《网页设计与制作项目教程》-项目四

任务一构建网页结构一、项目简介在上一个项目中.已经接触到ＣＳＳ样式表的设置.本项目侧重介绍用ＣＳＳ＋ＤＩＶ进行网页布局的一般流程和方法.用ＣＳＳ＋ＤＩＶ进行网页布局与样式设置是两个不同的思维过程.ＣＳＳ样式主要是实现各种具体效果.而网页布局更关注的是整个页面的呈现效果.通过前面的学习.了解到ＤｒｅａｍｗｅａｖｅｒＣＣ２０１５支持ＨＴＭＬ５语言.本项目中还将引入ＨＴＭＬ５中的新语义元素来定义Ｗｅｂ页面的不同部分.下一页返回任务一构建网页结构

二、项目目标本项目以“古诗文网”网站首页页面设计为例.初步掌握基于ＨＴＭＬ５的ＣＳＳ＋ＤＩＶ的页面布局方法.了解网页标准化的基本思想.理解ＣＳＳ盒模型.学会使用ＨＴＭＬ５中的新语义元素定义Ｗｅｂ页面的不同部分.掌握ＣＳＳ＋ＤＩＶ进行网页布局的一般流程和方法.三、工作任务根据“古诗文网”首页页面设计与制作的要求.基于工作过程.以任务驱动的方式.掌握基于ＨＴＭＬ５的ＣＳＳ＋ＤＩＶ的页面布局方法.上一页下一页返回任务一构建网页结构

①构建网页结构.②定义网页布局样式.(一)任务描述通过创建“古诗文网”网站首页结构的操作实践来掌握基于ＨＴＭＬ５构建网页结构的方法.网页效果如图4.1.1所示.①建立站点.②构建首页结构.上一页下一页返回任务一构建网页结构

(二)任务目标按照网站需求分析.建立站点文件夹.并在ＤｒｅａｍｗｅａｖｅｒＣＣ２０１５中设计制作网站首页页面结构.(三)知识准备知识准备一了解Ｗｅｂ标准化随着Ｗｅｂ２.０时代的到来.越来越多的网站开始注重Ｗｅｂ标准化.Ｗｅｂ标准不是一个标准.而是由一系列规范组成的.网页主要由三部分组成:结构(Ｓｔｒｕｃｔｕｒｅ)、表现(Ｐｒｅｓｅｎｔａｔｉｏｎ)、行为(Ｂｅｈａｖｉｏｒ).对应的标准也分三方面:结构化标准语言.主要包括ＸＨＴＭＬ和ＸＭＬ.上一页下一页返回任务一构建网页结构

表现标准语言.主要包括CSS.行为标准.主要包括对象模型(如Ｗ３ＣＤＯＭ、ＥＣＭＡＳｃｒｉｐｔ等).这些标准大部分由Ｗ３Ｃ起草和发布.也有一些是其他标准组织制定的标准.比如ＥＣＭＡ(ＥｕｒｏｐｅａｎＣｏｍｐｕｔ￣ｅｒＭａｎｕｆａｃｔｕｒｅｒｓＡｓｓｏｃｉａｔｉｏｎ)制定的ＥＣＭＡＳｃｒｉｐｔ标准.把网页标准化主要把层次结构绘制成模型图.如图4.1.2

所示.其中内容层主要是纯文字和非背景的图片.结构层主要是ＨＴＭＬ语言.表现层主要是ＣＳＳ语言.上一页下一页返回任务一构建网页结构

知识准备二认识ＤＩＶ和ＤＩＶ布局<ｄｉｖ>(ｄｉｖｉｓｉｏｎ)标签定义ＨＴＭＬ文档中的一个分隔区块或者一个区域部分.可以把Ｄｉｖ理解成一个容器.可以放置标题、段落、图片等任何ＨＴＭＬ元素.Ｄｉｖ布局是一种内容与形式分离的布局方式.符合Ｗ３Ｃ网页标准.用Ｄｉｖ设计页面结构.通过ＣＳＳ对<ｄｉｖ>控制实现美工.这样的网页布局方式就是通常所说的ＣＳＳ＋ＤＩＶ布局.由于内容和形式是各自独立的.所以.网页改版时.只需要修改对应的ＣＳＳ文件和图片.就能在不更改程序和结构代码的情况下完成所有的改版.这也正是ＣＳＳ＋ＤＩＶ布局成为目前网页布局的主要形式的原因.上一页下一页返回任务一构建网页结构

知识准备三理解ＣＳＳ盒模型ＣＳＳ盒模型是学习ＣＳＳ网页布局的基础.只有掌握了盒模型.才能够理解页面各个元素在网页排版中的位置和关系.所有ＨＴＭＬ元素都可以看作一个盒子.占据一定的页面空间.盒模型是以方形为基础显示.由内容(ｃｏｎｔｅｎｔ)、内边距(ｐａｄｄｉｎｇ)、边框(ｂｏｒｄｅｒ)、外边距(ｍａｒｇｉｎ)４个部分组成.如图4.1.4所示.①ｂｏｒｄｅｒ:边框.ＨＴＭＬ中任何一个元素都可以定义边框.Ｂｏｒｄｅｒ属性包含三个方面:ｂｏｒｄｅｒ－ｓｔｙｌｅ(样式)、ｂｏｒｄｅｒ－ｃｏｌｏｒ(颜色)和ｂｏｒｄｅｒ－ｗｉｄｔｈ(宽度).上一页下一页返回任务一构建网页结构

②ｐａｄｄｉｎｇ:内边距.内边距是ｃｏｎｔｅｎｔ与ｂｏｒｄｅｒ内边沿之间的距离.③ｍａｒｇｉｎ:外边距.外边距是ｂｏｒｄｅｒ外边沿与相邻元素之间的距离.④ｗｉｄｔｈ(ｈｅｉｇｈｔ):宽度(高度).在ＣＳＳ中通过属性ｗｉｄｔｈ(ｈｅｉｇｈｔ)来定义元素的宽度(高度).特别值得注意的是.用ｗｉｄｔｈ(ｈｅｉｇｈｔ)来定义的元素宽度(高度)指的是内容(ｃｏｎ￣ｔｅｎｔ)的宽度(高度).而一个盒子的实际宽度(高度)＝内容＋内边距＋边框＋外边距.这一点在做页面宽度或高度的精确计算时尤其要注意.上一页下一页返回任务一构建网页结构

知识准备四认识ＨＴＭＬ５中结构化元素通过研究Ｗｅｂ页面发现.通过使用一些带语义的标签.可以加快浏览器解释页面中元素的速度.所以.在ＨＴＭＬ５中.为了使文档的结构更加清晰明确.追加了几个与页眉、页脚、导航、文章相关联的结构元素.图4.1.6所示为一种常见的ＨＴＭＬ５文档结构.①ｈｅａｄｅｒ:定义页面头部区域.②ｎａｖ:定义页面导航区域.③ａｓｉｄｅ:定义页面侧边栏区域.④ａｒｔｉｃｌｅ:定义一篇文章区域.上一页下一页返回任务一构建网页结构

⑤ｓｅｃｔｉｏｎ:定义页面区域的章节表述.⑥ｆｏｏｔｅｒ:定义页面的底部.在使用中.可以把以上每一个标签都理解成一个语义化的Ｄｉｖ.(四)任务实施步骤一创建站点和首页①在Ｄ盘建立站点目录“ｇｓｗｗ”及其子目录ｉｍａｇｅｓ、ｆｉｌｅｓ和ｏｔｈｅｒ.将素材文件夹中提供的图片文件复制到ｉｍａｇｅｓ文件夹中.为后期建立网页文件做好前期准备工作.如图4.1.7和图4.1.8所示.上一页下一页返回任务一构建网页结构

②打开ＤｒｅａｍｗｅａｖｅｒＣＣ２０１５.新建站点.使用高级标签定义站点.站点名“ｇｓｗｗ”.如图4.1.9所示.③打开“文件”面板中.右键单击“站点”.新建网页文件.重命名为“ｉｎｄｅｘ.ｈｔｍｌ”.此网页文件为网站的首页.也称为主页.如图4.1.10所示.步骤二构建网页结构使用ＣＳＳ＋ＤＩＶ布局的第一步是构建网页结构.①根据首页效果图和ＣＳＳ盒模型的思想来做页面结构分析.如图4.1.11所示.在整体的ｃｏｎｔａｉｎｅｒ框架中.页面分成了五大块:页面顶部(Ｈｅａｄｅｒ)、导航栏(Ｎａｖ)、页面主体(Ｍａｉｎ)、页面右栏(Ａｓｉｄｅ)、页面底部(Ｆｏｏｔｅｒ).上一页下一页返回任务一构建网页结构

②分析设计了首页页面基本结构.就可以根据设计图开始制作了.也就是创建各个Ｄｉｖ.首先创建一个主容器ｃｏｎｔａｉｎｅｒ.接着按照之前的分析.插入五大块的Ｄｉｖ.ａ.双击打开ｉｎｄｅｘ.ｈｔｍｌ文件.在“设计”视图下.打开“插入”面板.选择“ＨＴＭＬ”→“Ｄｉｖ”(图4.1.12).弹出如图4.1.13所示的“插入Ｄｉｖ”对话框.设置ＩＤ为“ｃｏｎｔａｉｎｅｒ”.单击“确定”按钮后.在设计视图中看到一个虚线框(图4.1.14).ｂ.删除虚线框中的文字“此处显示ｉｄ"ｃｏｎｔａｉｎｅｒ"的内容”.在Ｄｉｖ＃ｃｏｎｔａｉｎｅｒ中.在“插入”面板下.选择“ＨＴＭＬ”→“Ｈｅａｄｅｒ”(图4.1.15).上一页下一页返回任务一构建网页结构

同样弹出如图4.1.16所示的“插入Ｈｅａｄｅｒ”对话框.设置ＩＤ为“ｗｅｂ－ｈｅａｄｅｒ”.ｃ.依此类推.依次在Ｄｉｖ＃ｃｏｎｔａｉｎｅｒ中插入ｎａｖ、ｍａｉｎ、ａｓｉｄｅ、ｆｏｏｔｅｒ标签.其中.ｎａｖ设置为“ｗｅｂ－ｎａｖ”.ｆｏｏｔｅｒ设置为“ｗｅｂ－ｆｏｏｔｅｒ”.效果如图4.1.17所示.上一页下一页返回任务一构建网页结构

<ｂｏｄｙ><ｄｉｖｉｄ＝"ｃｏｎｔａｉｎｅｒ"><ｈｅａｄｅｒｉｄ＝"ｗｅｂ－ｈｅａｄｅｒ">此处显示ｉｄ"ｗｅｂ－ｈｅａｄｅｒ"的内容</ｈｅａｄｅｒ><ｎａｖｉｄ＝"ｗｅｂ－ｎａｖ">此处显示ｉｄ"ｗｅｂ－ｎａｖ"的内容</ｎａｖ><ｍａｉｎ>此处为新ｍａｉｎ标签的内容</ｍａｉｎ><ａｓｉｄｅ>此处为新ａｓｉｄｅ标签的内容</ａｓｉｄｅ><ｆｏｏｔｅｒｉｄ＝"ｗｅｂ－ｆｏｏｔｅｒ">此处显示ｉｄ"ｗｅｂ－ｆｏｏｔｅｒ"的内容</ｆｏｏｔｅｒ>上一页下一页返回任务一构建网页结构

</ｄｉｖ></ｂｏｄｙ>③保存主页.(五)任务评价上一页下一页返回任务一构建网页结构

(六)思考练习上一页下一页返回任务一构建网页结构

９.画出盒模型示意图.并且标明盒模型的各个部分.１０.为什么说用ＤＩＶ＋ＣＳＳ进行网页布局时.网页改版会变得很容易?(七)任务拓展在网站中增加“名句”分页.充分发挥自己的想象力.手绘网页效果图.并依据效果图设计搭建网页结构.上一页下一页返回任务一构建网页结构

在设计制作过程中.要求:①自学在代码视图下完成网页结构搭建.并比较在设计视图下完成这两种方式的优劣.②通过网络资源平台.深入学习研究ＨＴＭＬ５的结构元素的语义.总结ｓｅｃｔｉｏｎ标签用在怎样的结构中.ｈｅａｄｅｒ标签是不是只能用于网页标题?ｆｏｏｔｅｒ标签是不是只能用于网页脚注?上一页返回任务二定义网页布局样式(一)任务描述通过以下七个步骤的操作实践来掌握ＤＩＶ＋ＣＳＳ布局的一般流程和方法.完成“古诗文网”首页的制作.效果如图4.2.1所示.①定义网页基本属性.②定义标题块样式.③定义导航样式.④布局ｍａｉｎ、ａｓｉｄｅ和ｆｏｏｔｅｒ.⑤制作ｍａｉｎ部分.⑥定义ａｓｉｄｅ样式.⑦定义脚注块样式.下一页返回任务二定义网页布局样式

(二)任务目标构建出网页的基本结构以后.就可以进行网页布局了.通过本任务掌握网页布局的一般流程和方法.熟悉网页布局中的常用ＣＳＳ样式属性.初步掌握ｆｌｏａｔ属性的使用技巧.(三)知识准备知识准备一了解ＣＳＳ的继承性根据任务一完成的网页结构.可以得到如图4.2.2所示的各个标记间的树形关系图.上一页下一页返回任务二定义网页布局样式

在这张树形关系图中.处于最上端的<ｈｔｍｌ>标记称为“根”.是所有标记的源头.向下层层包含.在每一个分支中.称上层标记为其下层标记的“父”标记.相应地.下层标记称为上层标记的“子”标记.例如.<Ｄｉｖ＃ｃｏｎｔａｉｎｅｒ>标记就是<ｂｏｄｙ>标记的子标记.同时它又是<ｈｅａｄｅｒ>、<ｎａｖ>、<ｍａｉｎ>等标记的父标记.ＣＳＳ的继承指的就是子标记会继承父标记的所有样式风格.并可以在父标记样式风格的基础上修改.产生新的样式.而子标记的样式风格完全不影响父标记.所有的ＣＳＳ语句都是基于各个标记之间的父子关系的.ＣＳＳ之所以称为“层叠样式表”.正是源于此.上一页下一页返回任务二定义网页布局样式

知识准备二熟悉网页布局中的常用ＣＳＳ样式属性１.Ｗｉｄｔｈ/Ｈｅｉｇｈｔ(宽度/高度)Ｗｉｄｔｈ/Ｈｅｉｇｈｔ属性用来设置元素的宽度/高度.可以使用ｐｘ、ｃｍ等单位定义宽度.也可以使用百分比.当使用百分比来定义宽度时.它指的是相对于父元素的ｗｉｄｔｈ来计算的.Ｗｉｄｔｈ的默认值是ａｕｔｏ.此时.浏览器会计算出元素的实际宽度.Ｗｉｄｔｈ/Ｈｅｉｇｈｔ属性不受内边距、外边距和边框的影响.２.Ｂｏｒｄｅｒ(边框)上一页下一页返回任务二定义网页布局样式

(１)Ｂｏｒｄｅｒ属性的三个方面在任务一中.读者已经了解到Ｂｏｒｄｅｒ属性包含三方面.分别是ｂｏｒｄｅｒ－ｓｔｙｌｅ、ｂｏｒｄｅｒ－ｗｉｄｔｈ和ｂｏｒｄｅｒ－ｃｏｌｏｒ.１)ｂｏｒｄｅｒ－ｓｔｙｌｅ:样式ｂｏｒｄｅｒ－ｓｔｙｌｅ的值和效果如图4.2.3所示.上一页下一页返回任务二定义网页布局样式

２)ｂｏｒｄｅｒ－ｗｉｄｔｈ:宽度ｂｏｒｄｅｒ－ｗｉｄｔｈ为边框指定宽度.有两种方法:指定长度值.比如２ｐｘ或０.１ｅｍ(单位为ｐｘ、ｐｔ、ｃｍ、ｅｍ等).使用３个关键字之一.分别是ｔｈｉｃｋ、ｍｅｄｉｕｍ(默认值)和ｔｈｉｎ.３)ｂｏｒｄｅｒ－ｃｏｌｏｒ:颜色ｂｏｒｄｅｒ－ｃｏｌｏｒ的设置方法与文字的ｃｏｌｏｒ属性设置完全相同.(２)ｂｏｒｄｅｒ设置方法方法一:可以在一个属性中设置边框.上一页下一页返回任务二定义网页布局样式

例如:ｂｏｒｄｅｒ:ｓｏｌｉｄｒｅｄ５ｐｘ.方法二:可以用多个属性中设置边框.例如:ｂｏｒｄｅｒ－ｓｔｙｌｅ:ｓｏｌｉｄ.ｂｏｒｄｅｒ－ｃｏｌｏｒ:ｒｅｄ.ｂｏｒｄｅｒ－ｗｉｄｔｈ:５ｐｘ.以上两种ｂｏｒｄｅｒ设置的效果一样.上一页下一页返回任务二定义网页布局样式

(３)ＣＳＳ盒模型边框设置方法ＣＳＳ盒模型是以方形为基础的.所以设置边框属性.还可以通过以下四个属性单独进行:ｂｏｒｄｅｒ－ｔｏｐ(顶)、ｂｏｒｄｅｒ－ｂｏｔｔｏｍ(底)、ｂｏｒｄｅｒ－ｌｅｆｔ(左)、ｂｏｒｄｅｒ－ｒｉｇｈｔ(右).属性ｍａｒｇｉｎ、ｐａｄｄｉｎｇ同样如此.例如:ｂｏｒｄｅｒ－ｂｏｔｔｏｍ:ｓｏｌｉｄｒｅｄ５ｐｘ./∗只是设置了底边框样式∗/上一页下一页返回任务二定义网页布局样式

３.Ｍａｒｇｉｎ(外边距)ｍａｒｇｉｎ属性可以有１~４个值.定义盒模型的外边距有多种方法.见以下实例:例１:ｍａｒｇｉｎ:２５ｐｘ.所有的４个边距都是２５ｐｘ.例２:ｍａｒｇｉｎ:２５ｐｘ５０ｐｘ７５ｐｘ１００ｐｘ.上边距为２５ｐｘ.右边距为５０ｐｘ.下边距为７５ｐｘ.左边距为１００ｐｘ.上一页下一页返回任务二定义网页布局样式

４.Ｐａｄｄｉｎｇ(内边距)Ｐａｄｄｉｎｇ的设置方法与ｍａｒｇｉｎ的类似.知识准备三网页布局的基本形式网页布局主要包括以下三种形式:①自然布局:根据标签在网页中的排列顺序.从上到下进行解析和显示.②浮动布局:用ｆｌｏａｔ属性实现的排版.③定位布局:用ｐｏｓｉｔｉｏｎ属性实现的排版.它用一种模拟图像定位的方法来解析网页.不再遵循标签在网页中的位置关系.上一页下一页返回任务二定义网页布局样式

知识准备四ｆｌｏａｔ属性完成任务一创建网页结构后形成的网页效果如图4.2.4所示.这样的布局就是自然布局.即根据标签在网页中的排列顺序从上至下呈现.对比期望呈现的网页布局(图4.2.5).不难发现.主要问题在于如何实现ｍａｉｎ与ａｓｉｄｅ的并列布局.１.网页排版主要通过ｆｌｏａｔ属性来实现Ｆｌｏａｔ属性包含３个值:ｌｅｆｔ(向左浮动)、ｒｉｇｈｔ(向右浮动)和ｎｏｎｅ(禁止浮动).任务一中的例４.２中构建了两个Ｄｉｖ.上下排布.在此基础上.对<ｄｉｖ>标签设置属性ｆｌｏａｔ:ｌｅｆｔ.则实现了两个矩形框的并列居左排布.上一页下一页返回任务二定义网页布局样式

２.清除浮动Ｆｌｏａｔ属性虽然实现了自然布局没有办法呈现的多列布局的样式.但是.受ｆｌｏａｔ属性的影响.原本不打算浮动的对象可能也会受其影响出现各种布局问题.为此.ＣＳＳ又定义了ｃｌｅａｒ属性.用来清除浮动.Ｃｌｅａｒ属性取值包括ｌｅｆｔ(清除左侧浮动)、ｒｉｇｈｔ(清除右侧浮动)、ｂｏｔｈ(左右两侧浮动都被清除)和ｎｏｎｅ(不清除浮动).需特别注意的是.所谓的清除.不是清除别的元素.而是清除自身.如果左右两侧存在浮动元素.则当前元素就把自己清除到下一行显示.而不是把前面的浮动元素清除.或者清除到上一行显示.上一页下一页返回任务二定义网页布局样式

(四)任务实施步骤一定义网页基本属性完成任务一构建出“古诗文网”首页的基本结构以后.就可以开始定义ＣＳＳ样式了.首先定义网页的基本属性.１.设置页面属性设置页面属性(图4.2.9~图4.2.11).定义页面的背景颜色、文字及链接默认颜色等.效果如图4.2.12所示.２.定义Ｄｉｖ＃ｃｏｎｔａｉｎｅｒ样式以下介绍三种操作方法完成样式定义.上一页下一页返回任务二定义网页布局样式

方法一:通过“ＣＳＳ设计器”定义样式.首先.为方便样式设计.选择菜单“窗口”→“工作区布局”→“设计”.则Ｄｒｅａｍ￣ｗｅａｖｅｒＣＣ２０１５工作区布局调整为设计布局.显示效果如图4.2.13所示.选中“ＤＯＭ>ｄｉｖｉｄ＝"ｃｏｎｔａｉｎｅｒ"”(图4.2.14).单击“选择器”窗格中的“＋”按钮.系统自动添加一个ＣＳＳ选择器“＃ｃｏｎｔａｉｎｅｒ”.如图4.2.15所示.然后.在“ＣＳＳ设计器”的“属性”窗格(图4.2.16)中设置相关属性值(图4.2.17~图4.2.22).最后.选中“ＣＳＳ设计器”的“属性”窗格中的“显示集”选项.则集中显示有关于ＣＳＳ选择器“＃ｃｏｎｔａｉｎｅｒ”所定义的所有属性集.网页效果如图4.2.23

所示.上一页下一页返回任务二定义网页布局样式

方法二:通过“属性”面板中的“编辑规则”定义样式.前面的步骤与方法一相同.当完成了在ＣＳＳ选择器中添加了一个ｉｄ选择器“＃ｃｏｎｔａｉｎ￣ｅｒ”后.在“属性”面板中就可以调出目标规则“＃ｃｏｎｔａｉｎｅｒ”(图4.2.24).并单击“编辑规则”按钮.弹出对话框“＃ｃｏｎｔａｉｎｅｒ的ＣＳＳ规则定义”.定义相关样式.如图4.2.25~图4.2.28所示.效果同方法一.上一页下一页返回任务二定义网页布局样式

方法三:通过“代码”视图手工编写代码.直接在代码视图下<ｓｔｙｌｅ>代码区手工添加以下代码:＃ｃｏｎｔａｉｎｅｒ{ｗｉｄｔｈ:８０％.ｍａｒｇｉｎ:０ａｕｔｏ.ｔｅｘｔ－ａｌｉｇｎ:ｃｅｎｔｅｒ.ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ:＃Ｅ２ＥＦＥ８.上一页下一页返回任务二定义网页布局样式

ｂｏｒｄｅｒ－ｌｅｆｔ:ｄｏｕｂｌｅ＃６９Ｂ８Ｃ９５ｐｘ.ｂｏｒｄｅｒ－ｒｉｇｈｔ:ｄｏｕｂｌｅ＃６９Ｂ８Ｃ９５ｐｘ.}三种方法的比较:上一页下一页返回任务二定义网页布局样式

①方法一比较适合初学者.②对于方法二.虽然对话框的形式对于熟悉老版本Ｄｒｅａｍｗｅａｖｅｒ的用户来说会很习惯.但是由于ＣＳＳ升级到ＣＳＳ３.０后.增设的很多属性在这种形式下无法实现.所以.方法二不推荐使用.③对于方法三.因为ＤｒｅａｍｗｅａｖｅｒＣＣ为代码编写提供了很好的代码提示功能.使得代码编写简单易行.所以方法三成为绝大多数用户的选择.但是方法三要求用户相对熟悉ＣＳＳ代码.在后续的步骤讲解中.主要以方法三为主表述.选用方法一或者方法二的读者请对照代码查找对应窗口的对应选项完成样式设置.上一页下一页返回任务二定义网页布局样式

３.定义全局属性∗∗{ｍａｒｇｉｎ:０.ｐａｄｄｉｎｇ:０.}这句代码.将网页中所有标签的ｐａｄｄｉｎｇ和ｍａｒｇｉｎ都默认设定为０ｐｘ.这主要是用来清除浏览器所有可能的默认空白.上一页下一页返回任务二定义网页布局样式

若用方法一完成.如图4.2.29

所示.单击“ＣＳＳ设计器”→“选择器”窗格的“＋”按钮.键入全局属性“∗”.确认后.在“ＣＳＳ设计器”→“属性”窗格中.设置ｍａｒｇｉｎ和ｐａｄｄｉｎｇ均为０.步骤二定义网页标题样式①在设计视图中.删除Ｈｅａｄｅｒ＃ｗｅｂｈｅａｄｅｒ中的“此处显示ｉｄ"ｗｅｂｈｅａｄｅｒ"的内容”.输入“古诗文网”.查看代码如下:<ｈｅａｄｅｒｉｄ＝"ｗｅｂ－ｈｅａｄｅｒ"><ｐ>古诗文网</ｐ></ｈｅａｄｅｒ>上一页下一页返回任务二定义网页布局样式

②选用三种方法之一定义网页标题ＣＳＳ样式.效果如图4.2.30所示.＃ｗｅｂ－ｈｅａｄｅｒ{ｂａｃｋｇｒｏｕｎｄ:ｕｒｌ(ｉｍａｇｅｓ/ｔｉｔｌｅ.ｊｐｇ)./∗设置背景图片ｔｉｔｌｅ.ｊｐｇ∗/ｂａｃｋｇｒｏｕｎｄ－ｓｉｚｅ:ｃｏｖｅｒ./∗设置背景图片全覆盖∗/ｈｅｉｇｈｔ:１２０ｐｘ.ｐａｄｄｉｎｇ－ｔｏｐ:２５ｐｘ.}上一页下一页返回任务二定义网页布局样式

＃ｗｅｂ－ｈｅａｄｅｒｐ{ｆｏｎｔ－ｓｉｚｅ:６０ｐｘ.ｌｅｔｔｅｒ－ｓｐａｃｉｎｇ:１２ｐｘ.ｔｅｘｔ－ａｌｉｇｎ:ｃｅｎｔｅｒ.ｃｏｌｏｒ:＃３６０９０４.}其中.ｂａｃｋｇｒｏｕｎｄ－ｓｉｚｅ是ＣＳＳ３提供的一个新的属性.所以.这个属性设置用方法二就无法实现.若用方法一进行设置.如图4.2.31

所示.上一页下一页返回任务二定义网页布局样式

步骤三定义导航样式①在设计视图中.删除ｎａｖ＃ｗｅｂ－ｎａｖ中的“此处显示ｉｄ"ｗｅｂ－ｎａｖ"的内容”.插入列表.并且添加链接组.效果如图4.2.32所示.ｎａｖ部分代码如下:<ｎａｖｉｄ＝"ｗｅｂ－ｎａｖ"><ｕｌ><ｌｉ><ａｈｒｅｆ＝"＃">诗文</ａ></ｌｉ><ｌｉ><ａｈｒｅｆ＝"＃">名句</ａ></ｌｉ>

上一页下一页返回任务二定义网页布局样式

<ｌｉ><ａｈｒｅｆ＝"＃">典籍</ａ></ｌｉ><ｌｉ><ａｈｒｅｆ＝"＃">作者</ａ></ｌｉ></ｕｌ></ｎａｖ>上一页下一页返回任务二定义网页布局样式

②为导航部分添加ＣＳＳ样式:＃ｗｅｂ－ｎａｖ{ｗｉｄｔｈ:１００％.ｈｅｉｇｈｔ:２５ｐｘ.}＃ｗｅｂ－ｎａｖｕｌ{ｌｉｓｔ－ｓｔｙｌｅ－ｐｏｓｉｔｉｏｎ:ｉｎｓｉｄｅ../∗列表标记的位置∗/}上一页下一页返回任务二定义网页布局样式

＃ｗｅｂ－ｎａｖｕｌｌｉ{ｆｌｏａｔ:ｌｅｆｔ.ｆｏｎｔ－ｗｅｉｇｈｔ:ｂｏｌｄ.ｐａｄｄｉｎｇ:０ｐｘ１０ｐｘ.}以上代码中.ｆｌｏａｔ:ｌｅｆｔ.语句实现了列表项目的横向显示.效果如图4.2.33

所示.上一页下一页返回任务二定义网页布局样式

步骤四布局ｍａｉｎ、ａｓｉｄｅ和ｆｏｏｔｅｒ根据前面分析的排版形式(图4.2.34).布局ｍａｉｎ、ａｓｉｄｅ和ｆｏｏｔｅｒ.ｍａｉｎ{ｆｌｏａｔ:ｌｅｆｔ.ｗｉｄｔｈ:８０％.}ａｓｉｄｅ{上一页下一页返回任务二定义网页布局样式

ｆｌｏａｔ:ｒｉｇｈｔ.ｗｉｄｔｈ:１８％.}ｆｏｏｔｅｒ{ｃｌｅａｒ:ｂｏｔｈ.}上一页下一页返回任务二定义网页布局样式

以上代码.通过设置ｆｌｏａｔ属性.形成ｍａｉｎ与ａｓｉｄｅ的两列布局形式.同时.为了保证ｆｏｏｔｅｒ独立在下.又通过设置ｃｌｅａｒ属性.清除ａｓｉｄｅ中使用ｆｌｏａｔ对ｆｏｏｔｅｒ的影响.效果如图4.2.35所示.步骤五制作ｍａｉｎ部分１.分析ｍａｉｎ结构根据ｍａｉｎ中的内容.将ｍａｉｎ又细分成如图4.2.36所示的结构.Ｍａｉｎ中包含两个ｓｅｃ￣ｔｉｏｎ.分别对应“唐诗赏鉴”和“宋词赏鉴”两个单元.其中.“唐诗赏鉴”和“宋词赏鉴”就是ｓｅｃｔｉｏｎ中的ｈｅａｄｅｒ的内容.每个ｓｅｃｔｉｏｎ又包含两个ａｒｔｉｃｌｅ.每个ａｒｔｉｃｌｅ对应的就是一首诗文.上一页下一页返回任务二定义网页布局样式

２.构建ｍａｉｎ结构在设计视图下.删除虚线框中的文字“此处为新ｍａｉｎ标签的内容”.分别插入两个ｓｅｃ￣ｔｉｏｎ标签.设置ｃｌａｓｓ均为“ｍａｉｎ－ｓｅｃｔｉｏｎ”.然后再在这两个ｓｅｃｔｉｏｎ中分别插入一个ｈｅａｄｅｒ标签(ｃｌａｓｓ为“ｓｅｃｔｉｏｎ－ｈｅａｄｅｒ”)和两个ａｒｔｉｃｌｅ标签(ｃｌａｓｓ均为“ｍａｉｎ－ａｒｔｉｃｌｅ”).效果如图4.2.37

所示.上一页下一页返回任务二定义网页布局样式

查看ｍａｉｎ部分的ＨＴＭＬ代码为:<ｍａｉｎ><ｓｅｃｔｉｏｎｃｌａｓｓ＝"ｍａｉｎ－ｓｅｃｔｉｏｎ"><ｈｅａｄｅｒｃｌａｓｓ＝"ｓｅｃｔｉｏｎ－ｈｅａｄｅｒ">此处显示ｃｌａｓｓ"ｓｅｃｔｉｏｎ－ｈｅａｄｅｒ"的内容</ｈｅａｄｅｒ><ａｒｔｉｃｌｅｃｌａｓｓ＝"ｍａｉｎ－ａｒｔｉｃｌｅ">此处显示ｃｌａｓｓ"ｍａｉｎ－ａｒｔｉ￣ｃｌｅ"的内容</ａｒｔｉｃｌｅ>上一页下一页返回任务二定义网页布局样式

<ａｒｔｉｃｌｅｃｌａｓｓ＝"ｍａｉｎ－ａｒｔｉｃｌｅ">此处显示ｃｌａｓｓ"ｍａｉｎ－ａｒｔｉ￣ｃｌｅ"的内容</ａｒｔｉｃｌｅ></ｓｅｃｔｉｏｎ><ｓｅｃｔｉｏｎｃｌａｓｓ＝"ｍａｉｎ－ｓｅｃｔｉｏｎ"><ｈｅａｄｅｒｃｌａｓｓ＝"ｓｅｃｔｉｏｎ－ｈｅａｄｅｒ">此处显示ｃｌａｓｓ"ｓｅｃｔｉｏｎ－ｈｅａｄｅｒ"的内容</ｈｅａｄｅｒ>上一页下一页返回任务二定义网页布局样式

<ａｒｔｉｃｌｅｃｌａｓｓ＝"ｍａｉｎ－ａｒｔｉｃｌｅ">此处显示ｃｌａｓｓ"ｍａｉｎ－ａｒｔｉ￣ｃｌｅ"的内容</ａｒｔｉｃｌｅ><ａｒｔｉｃｌｅｃｌａｓｓ＝"ｍａｉｎ－ａｒｔｉｃｌｅ">此处显示ｃｌａｓｓ"ｍａｉｎ－ａｒｔｉ￣ｃｌｅ"的内容</ａｒｔｉｃｌｅ></ｓｅｃｔｉｏｎ></ｍａｉｎ>上一页下一页返回任务二定义网页布局样式

３.录入ｍａｉｎ的内容<ｍａｉｎ><ｓｅｃｔｉｏｎ><ｈｅａｄｅｒｃｌａｓｓ＝"ｓｅｃｔｉｏｎ－ｈｅａｄｅｒ"><ｈ４>唐诗赏鉴</ｈ４></ｈｅａｄｅｒ><ａｒｔｉｃｌｅｃｌａｓｓ＝"ｍａｉｎ－ａｒｔｉｃｌｅ"><ｈ２>静夜思</ｈ２><ｐ>上一页下一页返回任务二定义网页布局样式

床前明月光.<ｂｒ/>疑是地上霜.<ｂｒ/>举头望明月.<ｂｒ/>低头思故乡.<ｂｒ/></ｐ></ａｒｔｉｃｌｅ><ａｒｔｉｃｌｅｃｌａｓｓ＝"ｍａｉｎ－ａｒｔｉｃｌｅ"><ｈ２>春夜喜雨</ｈ２><ｐ>上一页下一页返回任务二定义网页布局样式

好雨知时节.<ｂｒ/>当春乃发生.<ｂｒ/>随风潜入夜.<ｂｒ/>润物细无声.<ｂｒ/></ｐ></ａｒｔｉｃｌｅ></ｓｅｃｔｉｏｎ><ｓｅｃｔｉｏｎ>上一页下一页返回任务二定义网页布局样式

<ｈｅａｄｅｒｃｌａｓｓ＝"ｓｅｃｔｉｏｎ－ｈｅａｄｅｒ"><ｈ４>宋词赏鉴</ｈ４></ｈｅａｄｅｒ><ａｒｔｉｃｌｅｃｌａｓｓ＝"ｍａｉｎ－ａｒｔｉｃｌｅ"><ｈ２>满江红.写怀</ｈ２><ｐ>怒发冲冠.凭栏处.潇潇雨歇.<ｂｒ/>抬望眼.仰天长啸.壮怀激烈.<ｂｒ/>三十功名尘与土.八千里路云和月.<ｂｒ/>上一页下一页返回任务二定义网页布局样式

莫等闲.白了少年头.空悲切!<ｂｒ/></ｐ></ａｒｔｉｃｌｅ><ａｒｔｉｃｌｅｃｌａｓｓ＝"ｍａｉｎ－ａｒｔｉｃｌｅ"><ｈ２>念奴娇.赤壁怀古</ｈ２><ｐ>上一页下一页返回任务二定义网页布局样式

大江东去.浪淘尽.千古风流人物.<ｂｒ/>故垒西边.人道是.三国周郎赤壁.<ｂｒ/>乱石穿空.惊涛拍岸.卷起千堆雪.<ｂｒ/>江山如画.一时多少豪杰.<ｂｒ/></ｐ></ａｒｔｉｃｌｅ></ｓｅｃｔｉｏｎ></ｍａｉｎ>上一页下一页返回任务二定义网页布局样式

４.�定义ｍａｉｎ的ＣＳＳ样式.ｓｅｃｔｉｏｎ－ｈｅａｄｅｒ{ｐａｄｄｉｎｇ－ｔｏｐ:５ｐｘ.ｐａｄｄｉｎｇ－ｂｏｔｔｏｍ:５ｐｘ.ｔｅｘｔ－ａｌｉｇｎ:ｌｅｆｔ.ｔｅｘｔ－ｉｎｄｅｎｔ:２０ｐｘ.ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ:＃６６ＢＢＣＣ.}.ｍａｉｎ－ａｒｔｉｃｌｅ{上一页下一页返回任务二定义网页布局样式

ｍａｒｇｉｎ－ｌｅｆｔ:２０％.ｍａｒｇｉｎ－ｒｉｇｈｔ:２０％.ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ:＃６６ＢＢＣＣ.ｂｏｒｄｅｒ－ｔｏｐ:ｄｏｔｔｅｄｂｌａｃｋｔｈｉｎ./∗设置顶框线用于分隔ａｒｔｉｃｌｅ∗/}效果如图4.2.38

所示.上一页下一页返回任务二定义网页布局样式

步骤六定义ａｓｉｄｅ样式①在设计视图中.删除ａｓｉｄｅ中“此处为新ａｓｉｄｅ标签的内容”.插入列表.并且添加链接组.效果如图4.2.39所示.<ａｓｉｄｅ><ｈ４>友情链接</ｈ４><ｕｌ><ｌｉ><ａｈｒｅｆ＝"＃">唐诗网</ａ></ｌｉ><ｌｉ><ａｈｒｅｆ＝"＃">宋词网</ａ></ｌｉ><ｌｉ><ａｈｒｅｆ＝"＃">李白诗词鉴赏</ａ></ｌｉ>上一页下一页返回任务二定义网页布局样式

<ｌｉ><ａｈｒｅｆ＝"＃">杜甫诗词鉴赏</ａ></ｌｉ><ｌｉ><ａｈｒｅｆ＝"＃">岳飞网</ａ></ｌｉ><ｌｉ><ａｈｒｅｆ＝"＃">苏轼诗词鉴赏</ａ></ｌｉ></ｕｌ></ａｓｉｄｅ>②为ａｓｉｄｅ部分添加ＣＳＳ样式.效果如图4.2.40所示.上一页下一页返回任务二定义网页布局样式

ａｓｉｄｅ{ｆｌｏａｔ:ｒｉｇｈｔ.ｗｉｄｔｈ:１８％.ｐａｄｄｉｎｇ－ｒｉｇｈｔ:２０ｐｘ.ｔｅｘｔ－ａｌｉｇｎ:ｒｉｇｈｔ.ｂｏｒｄｅｒ－ｔｏｐ:ｓｏｌｉｄ＃６６ＢＢＣＣｔｈｉｎ.ｂｏｒｄｅｒ－ｂｏｔｔｏｍ:ｓｏｌｉｄ＃６６ＢＢＣＣｔｈｉｎ.}上一页下一页返回任务二定义网页布局样式

ａｓｉｄｅｈ４{ｃｏｌｏｒ:＃００３３６６.}ａｓｉｄｅｕｌ{ｌｉｓｔ－ｓｔｙｌｅ－ｔｙｐｅ:ｎｏｎｅ.}上一页下一页返回任务二定义网页布局样式

ａｓｉｄｅｕｌｌｉ{ｂｏｒｄｅｒ－ｔｏｐ:ｄｏｔｔｅｄ＃６６ＢＢＣＣｔｈｉｎ./∗设置每一个列表项之间的分隔线∗/}上一页下一页返回任务二定义网页布局样式

步骤七定义脚注块样式①在设计视图中.删除ｆｏｏｔｅｒ＃ｗｅｂｆｏｏｔｅｒ中的“此处显示ｉｄ"ｗｅｂｆｏｏｔｅｒ"的内容”.输入相关内容.查看代码如下:<ｆｏｏｔｅｒｉｄ＝"ｗｅｂ－ｆｏｏｔｅｒ">ＣｏｐｙＲｉｇｈｔ＆ｃｏｐｙ.２０１７ＤｅｓｉｇｎｅｄＢｙＸＸＸ</ｆｏｏｔｅｒ>上一页下一页返回任务二定义网页布局样式

②定义ｆｏｏｔｅｒ的ＣＳＳ样式.效果如图4.2.41所示.＃ｗｅｂ－ｆｏｏｔｅｒ{ｃｌｅａｒ:ｂｏｔｈ.ｆｏｎｔ－ｆａｍｉｌｙ:ＴｉｍｅｓＮｅｗＲｏｍａｎ.ｆｏｎｔ－ｓｉｚｅ:１５ｐｘ.ｂｏｒｄｅｒ－ｔｏｐ:ｓｏｌｉｄ＃６６ＢＢＣＣｔｈｉｎ.}上一页下一页返回任务二定义网页布局样式

(五)任务评价上一页下一页返回任务二定义网页布局样式

(六)思考练习上一页下一页返回任务二定义网页布局样式

６.根据ＣＳＳ盒模型.Ｗｉｄｔｈ属性用来设置()的宽度/高度.Ａ.ｃｏｎｔｅｎｔＢ.ｃｏｎｔｅｎｔ＋ｐａｄｄｉｎｇＣ.ｃｏｎｔｅｎｔ＋ｐａｄｄｉｎｇ＋ｂｏｒｄｅｒＤ.ｃｏｎｔｅｎｔ＋ｐａｄｄｉｎｇ＋ｂｏｒｄｅｒ＋ｍａｒｇｉｎ上一页下一页返回任务二定义网页布局样式

７.对于属性ｍａｒｇｉｎ的定义:ｍａｒｇｉｎ:２５ｐｘ５０ｐｘ７５ｐｘ.以下解读正确的是().Ａ.上下边距为２５ｐｘＢ.左右边距为５０ｐｘＣ.上下边距为７５ｐｘＤ.左右边距为７５ｐｘ上一页下一页返回任务二定义网页布局样式

８.下列说