《网页设计与制作教程HTML+CSS+Bootstrap》课件 项目四创建网站古诗文网_第1页
《网页设计与制作教程HTML+CSS+Bootstrap》课件 项目四创建网站古诗文网_第2页
《网页设计与制作教程HTML+CSS+Bootstrap》课件 项目四创建网站古诗文网_第3页
《网页设计与制作教程HTML+CSS+Bootstrap》课件 项目四创建网站古诗文网_第4页
《网页设计与制作教程HTML+CSS+Bootstrap》课件 项目四创建网站古诗文网_第5页
已阅读5页,还剩20页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

项目四

创建古诗文网项目简介用CSS+DIV进行网页布局与设置样式是两个不同的思维过程,CSS样式主要是实现各种具体效果,而网页布局更关注的是整个页面的呈现效果。通过前面的学习,了解到DreamweaverCC2015支持HTML5语言。本项目中还将引入HTML5中的新语义元素来定义Web页面的不同部分。项目目标本项目以《古诗文网》网站首页页面设计为例,初步掌握基于HTML5的CSS+DIV的页面布局方法。了解网页标准化的基本思想,理解CSS盒模型,学会使用HTML5中的新语义元素定义Web页面的不同部分,掌握CSS+DIV进行网页布局的一般流程和方法。工作任务根据《古诗文网》首页页面设计与制作的要求,基于工作过程,以任务驱动的方式,掌握基于HTML5的CSS+DIV的页面布局方法。(1)构建网页结构(2)定义网页布局样式任务一构建网页结构通过创建《古诗文网》网站首页结构的操作实践来掌握基于HTML5构建网页结构的方法:1、建立站点2、构建首页结构;

任务目标按照网站需求分析,建立站点文件夹,并在DreamweaverCC2015中设计制作网站首页页面结构。知识准备知识准备一了解Web标准化

知识准备二认识DIV和DIV布局知识准备三理解CSS盒模型知识准备四认识HTML5中结构化元素任务实施步骤一

创建站点和首页步骤二

构建网页结构任务二

定义网页布局样式通过以下七个步骤的操作实践来掌握DIV+CSS布局的一般流程和方法,完成《古诗文网》首页的制作:1.定义网页基本属性;2.定义标题块样式;3.定义导航样式;4.布局main、aside和footer;5.制作main部分;6.定义aside样式;7.定义脚注块样式。任务目标构建出网页的基本结构以后,就可以开始进行网页布局。通过本任务掌握网页布局的一般流程和方法,熟悉网页布局中的常用CSS样式属性,初步掌握float属性的使用技巧。知识准备知识准备一了解CSS的继承性知识准备二

熟悉网页布局中的常用CSS样式属性Width/Height(宽度/高度)Border(边框)Margin(外边距)知识准备三

网页布局的基本形式自然布局浮动布局定位布局知识准备四float属性任务实施步骤一定义网页基本属性1.设置页面属性。2.定义Div#container样式。步骤二

构建网页结构步骤二

定义网页标题样式步骤三

定义导航样式步骤四

布局main、as

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论