网页设计与制作课件第6章.pptx

1、案例一目录页 CONTENTS PAGE 项目六 构建网页布局案例二制作企业网站新闻列表网页的页头部分案例三制作企业网站新闻列表网页的新闻中心栏目案例四制作企业网站新闻列表网页的集团要闻栏目3 项目六 构建网页布局案例说明本案例首先对Div、HTML 5结构元素、float和clear属性、浮动布局的原理、常用浮动布局方法、清除浮动对布局的不良影响，及浮动布局应用技巧进行简单介绍，然后制作新闻列表页面的整体布局，包括构建HTML结构和设置CSS样式。4 项目六 构建网页布局相关知识相关知识Div是一个HTML标签，全称为Division，意为“区分”，多数情况下用作文本、图像或其他页面元素的容

2、器，是CSS布局的基本构造块。一、Div基础将插入点置于文档中要显示Div标签的位置，在“插入”面板的“HTML”类别中单击“Div”按钮，打开“插入Div”对话框，如左图所示。u 插入：用于选择插入Div标签的位置。u Class：显示应用于当前标签的类样式。u ID：可让用户更改用于标识Div标签的名称。u 新建CSS规则：单击可打开“新建CSS规则”对话框。5 项目六 构建网页布局在“插入Div”对话框中单击“确定”按钮，可以在文档中插入Div，Div标签以一个框的形式出现在文档中，并带有占位符文本。当将光标移到Div标签框的边缘上时，Dreamweaver会高亮显示该框，如下图所示。6

3、 项目六 构建网页布局三、网页的本质在“插入Div”对话框中单击“新建CSS规则”按钮，打开“新建CSS规则”对话框，如左图所示。u 选择器类型：用于设置选择器类型，并将其运用到特定部分。u 选择器名称：用于选择或输入选择器名称。u 规则定义：用于设置新建CSS样式在网页中的存在方式。7 项目六 构建网页布局三、网页的本质在为新样式选择了某种类型和名称之后，单击“确定”按钮将打开“div的CSS规则定义”对话框，如左图所示。“div的CSS规则定义”对话框中包括9种样式类别，类型、背景、区块、方框、边框、列表、定位、扩展和过渡。所有的设置参数和CSS设计器中的属性完全相同。可以在该对话框中快捷

4、方便地设置样式属性。在“设计”视图中工作时，可以使CSS布局块可视化。CSS布局块是一个HTML页面元素，可以将它定位在页面上的任意位置。Div标签就是一个标准的CSS布局块。8 项目六 构建网页布局二、HTML 5结构元素Header标签，从语义上看为文档的页眉。它是一种具有引导和导航作用的结构元素，通常用于放置整个页面或页面内的一个内容区块的标题，一个网页内并没有限制Header标签的个数。1Header 我是大头 我是脖子 我是身体9 项目六 构建网页布局2Navigationnav标签，从语义上看为导航，通常作为页面导航的链接组，侧边栏导航。菜单1 菜单2 菜单3 Main标签规定文档

5、的主要内容。Main标签中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，如侧栏、导航栏、版权信息、站点标志或搜索表单中。3 Main10 项目六 构建网页布局Aside标签，从语义上看为在旁边、侧边，在article标签中使用时，作为主要内容的附属信息部分，如有关的参考资料、名词解释等。在article标签外使用时，作为页面或者站点全局的附属信息部分，如侧边栏、博客的友情链接部分、广告区域等。4AsideArticle标签，从语义上看为文档、页面，通常是一篇文章、一个页面、一个独立完整的内容模块；一般会带个标题，并放在header标签中，article元素可以互相嵌套。5A

6、rticle 是我标签 我是段落 我的内容 11 项目六 构建网页布局三、网页的本质Section标签，从语义上看为部分，用于页面内容的独立分块，往往是文章的一段，通常由内容和标题组成，没有标题的内容不推荐使用section。6SectionFooter标签，从语义上看为文档的脚注，或者一个内容区块的脚注。通常内容为联系信息、相关阅读、版权信息等。7Footer12 项目六 构建网页布局三、float和clear属性float属性用于定义元素浮动的方向。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是行内元素还是块元素

7、。float属性的值及其意义如下表所示。1float属性值描 述left元素向左浮动right元素向右浮动none默认值。元素不浮动，会显示在文档中默认的位置inherit规定应该从父元素继承float属性的值。IE不支持该属性知识库替换元素是指其在浏览器中显示的内容并非由HTML文档内容直接表示，如就是一个替换元素，它本身没有具体内容，而是由src属性指定一个图像替换。13 项目六 构建网页布局三、网页的本质clear是一个与float相反的属性，它定义了在元素的哪边不允许出现浮动元素。假设声明为左边清除，会使元素的上外边框边界刚好在左边上浮动元素的下外边距边界之下。clear属性的值及其意

8、义如下表所示。2clear属性属性值描 述left在左侧不允许浮动元素right在右侧不允许浮动元素both在左右两侧均不允许浮动元素none默认值。允许浮动元素出现在两侧inherit规定应该从父元素继承 clear 属性的值。IE不支持该属性14 项目六 构建网页布局四、浮动布局的原理请看下图，当把框1向右浮动时，它脱离标准流并向右移动，直到它的右边缘碰到包含框的右边缘。15 项目六 构建网页布局再请看下图（a）所示，当框1向左浮动时，它脱离标准流并向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于标准流中，所以不占据空间，实际上覆盖住了框2，使框2从视图中消失。如果把所有三个框都

9、向左浮动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框，如下图（b）所示。16 项目六 构建网页布局如果包含框太窄，无法容纳水平排列的3个浮动元素，那么其他浮动块向下移动，直到有足够的空间，如下图（a）所示。如果浮动元素的高度不同，那么当它们向下移动时可能被其他浮动元素“卡住”，如下图（b）所示。知识库设置了浮动属性的元素遵循如下规则：（1）浮动元素的边距不会产生重叠。（2）只有元素中的内容会受到浮动元素的影响。也就是说背景、边距、边框、填充等盒子模型相关属性不受影响。（3）浮动元素均被视为块级元素，元素的实际宽度和高度由边距、边框、填充、宽度和高度属性决定。17 项

10、目六 构建网页布局五、常用的浮动布局方法在网页中插入两个id名分别为left和right的标签，HTML代码如下，默认效果如下图所示。后面将以该代码为例，讲解常用的浮动布局方法。第1个div元素第2个div元素18 项目六 构建网页布局在网页的标签对中加入以下样式，效果如下图所示。方法一：两个元素都左浮动或都右浮动#left,#rightfloat:left;将网页的css样式设置为右浮动，效果如下图所示。#left,#rightfloat:right;19 项目六 构建网页布局将网页的css样式设置为一个左浮动，一个右浮动，效果如下图所示。方法二：第一个左浮动，第二个右浮动#leftfloa

11、t:left;#rightfloat:right;20 项目六 构建网页布局方法三：第一个左浮动，第二个设置左边距（此时左边的需要设置宽度）#leftwidth:100px;float:left;#rightmargin-left:100px;21 项目六 构建网页布局方法四：第一个右浮动，第二个设置右边距#leftwidth:100px;float:right;#rightmargin-right:100px;22 项目六 构建网页布局六、清除浮动对布局的不良影响设置浮动后必须清除浮动效果对后面元素的影响。例如，在前面并列显示的两个元素后加入一个段落。第1个div元素第2个div元素这是一个

12、段落将网页css样式设置如下：#left,#rightfloat:left;23 项目六 构建网页布局#left,#rightfloat:left;pclear:left;/*这里也可以设置为both，消除左右浮动的影响*/当两个都同时向左浮动后，会发现段落自动跑到同一行中，如下图所示。为使段落不受浮动元素的影响，需要给标签加上clear属性，效果如下图所示。提示在网页布局过程中通常使用空放在浮动元素的后面，利用为空设置clear属性来解决浮动元素对其他正常标准流的影响。24 项目六 构建网页布局七、浮动布局应用技巧浮动框旁边的行框会被缩短，从而给浮动框留出空间，使行框围绕浮动框。因此，创建浮

13、动框可以使文本围绕图像，如下图所示。25 项目六 构建网页布局要阻止行框围绕浮动框，需要对该行框应用clear属性，如下图（a）所示。此外，还可在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面，如下图（b）所示。假设希望一个图像浮动到文本块的左边，并且希望这幅图像和文本包含在另一个具有背景颜色和边框的元素中，则可以编写代码。26 项目六 构建网页布局这种情况下就出现一个问题。因为浮动元素脱离了标准流，所以包围图像和文本的容器不占据空间，如下图（a）所示；如何让浮动元素所在的容器在视觉上也包围浮动元素呢？需要在该元素中的某个地方应用clear属性。但由于没有现有的元素

14、可以应用清理，所以只能添加一个空并清理它的浮动。效果如下图（b）所示。还有一个办法，就是对容器进行浮动。这样会得到希望的效果，但是下一个元素会受到该浮动元素的影响。27 项目六 构建网页布局案例实施案例实施一、网页、网站和主页在了解了浮动布局的相关知识后，接下来通过为企业网站新闻列表网页构建整体布局（包括构建HTML结构和设置CSS样式），来进一步学习浮动布局在实际网页制作中的应用。该页面可分为3部分：头部header、主体content和尾部footer。其中主体content又可分为2大部分：新闻中心（左）leftlist和新闻列表（右）rightlist，如下图所示。28 项目六 构建网

15、页布局案例实施案例实施在“文件”面板中打开“ydjt”站点，在站点中新建网页文档“xwlist_1x.html”。一、网页、网站和主页步骤 01打开“xwlist_1x.html”文档，为其设置文档头信息和页面属性，如右图所示。步骤 02根据前面的分析，从整体上把该页面分成3大部分，导航、banner部分为网页的头部（header），新闻中心（#leftlist）和新闻列表（#rightlist）部分为正文（#content），最后一行版权为尾部（footer）。一、构建HTML结构29 项目六 构建网页布局案例实施案例实施将插入点置于文档窗口中，单击“插入”面板“HTML”类别中的“Head

16、er”按钮，打开“插入Header”对话框，单击“确定”按钮插入Header，如下图所示。一、网页、网站和主页步骤 0330 项目六 构建网页布局案例实施案例实施将插入点置于前面插入的Header标签下方，单击“插入”面板“HTML”类别中的“Div”按钮，打开“插入Div”对话框，在“ID”编辑框中输入“content”，然后单击“确定”按钮插入Div，如下图所示。步骤 0431 项目六 构建网页布局案例实施案例实施将插入点置于ID为“content”的Div中，单击“插入”面板“HTML”类别中的“Div”按钮，打开“插入Div”对话框，在“ID”编辑框中输入“leftlist”，然后单击

17、“确定”按钮插入Div，如下图所示。步骤 0532 项目六 构建网页布局案例实施案例实施将ID为“content”的Div中的文字删除，然后将插入点置于其中“ID”为“leftlist”的Div下方，单击“插入”面板“HTML”类别中的“Div”按钮，打开“插入Div”对话框，在“ID”编辑框中输入“rightlist”，然后单击“确定”按钮插入Div，如下图所示。一、网页、网站和主页步骤 06一、构建HTML结构提示插入标签时一定要注意插入位置。当在现有的某个标签对内插入时，原标签和新插入的标签是嵌套（父子）关系；当在标签对外插入时，原标签和新插入的标签是平行关系。可在代码界面或设计界面中定

18、位插入点以确定插入位置。在插入某些标签时，还可在弹出的对话框中选择插入位置。33 项目六 构建网页布局案例实施案例实施插入尾部的标签。参照前面的方法，将插入点置于id为content的标签后面，单击“插入”面板“HTML”类别中的“Footer”按钮，打开“插入Footer”对话框，单击“确定”按钮插入，如下图所示。步骤 0734 项目六 构建网页布局案例实施案例实施在标签对中输入版权信息。首先将标签对中的默认文本“此处为新footer标签的内容”删除，然后输入版权信息文本，可在设计界面中输入，也可在代码界面中输入，效果如下图所示。步骤 0835 项目六 构建网页布局案例实施案例实施在“CSS

19、设计器”“源”窗格中单击“添加CSS源”按钮 ，在其下拉列表中选择“附加现有的CSS文件”，如左图所示。一、网页、网站和主页步骤 01弹出“使用现有的CSS文件”对话框，单击“浏览”按钮在打开的“选择样式表文件”对话框中选择项目五创建的样式文件“s1.css”，单击“确定”按钮回到“使用现有的CSS文件”对话框，在“添加为”列表区选择“链接”，然后单击“确定”按钮，如右图所示。步骤 02二、设置CSS样式36 项目六 构建网页布局案例实施案例实施此时可以看到文档内容自动应用了链接样式表“s1.css”中相应的样式，如下图所示。一、网页、网站和主页步骤 03一、构建HTML结构37 项目六 构建

20、网页布局案例实施案例实施设置“新闻中心（leftlist）”样式。在“CSS设计器”“源”窗格中选择链接的样式表“s1.css”，在“选择器”窗格中新建嵌套选择器“#content#leftlist”，在“属性”窗格“布局”类别中设置“width”为210px，“float”为左浮动，如左图所示。一、网页、网站和主页步骤 04一、构建HTML结构设置“新闻列表（rightlist）”样式。在“CSS设计器”的“选择器”窗格中新建嵌套选择器“#content#rightlist”，设置“width”为890px，“float”为左浮动，“margin-left”为20px，如右图所示。步骤 05

21、提示此处将右边盒子的宽度设为890px，这个宽度是怎么确定的呢？页面宽度（1200px）减content的左右内边距（各40px，共计80px），再减去左边盒子的大小（210px）及两个盒子的间距（20px），即1200px80px210px20px890px。38 项目六 构建网页布局案例实施案例实施在“此处显示 id”rightlist“的内容”文字后面单击并按回车键，然后保存文档并在浏览器中预览，可以看到网页的效果如下图所示，这是因为“新闻列表”部分的左浮动样式对后面标准流中的元素产生了影响。步骤 06在HTML中ID为rightlist的后面插入一个class名为clear的空，然后为

22、其设置clear属性，从而清除浮动的影响。步骤 07案例一目录页 CONTENTS PAGE 项目六 构建网页布局案例二案例三制作企业网站新闻列表网页的新闻中心栏目案例四制作企业网站新闻列表网页的集团要闻栏目40 项目六 构建网页布局案例说明本案例主要完成新闻列表网页页头部分的HTML结构构建和CSS样式设置。由于该网页与项目五制作的新闻显示网页页头部分结构差不多，只是多了一个“搜索栏目”，所以此处只需要构建HTML结构，并为“搜索栏目”设置CSS样式即可。41 项目六 构建网页布局案例实施案例实施下面开始制作新闻列表网页的页头，效果如下图所示。整个页头主要包括5大部分：Logo、导航菜单me

23、nu、banner图像、页面路径lujing和搜索栏目search。为便于理解，此处将案例分为2大部分，先构建HTML结构，然后利用CSS设置网页样式。其中CSS代码单独放在案例一中链接的文件名为s1.css的CSS文件中。在完成本案例的过程中，要注意盒子模型（块元素和行内元素）的计算方式。一、网页、网站和主页一、构建HTML结构42 项目六 构建网页布局案例实施案例实施分析新闻列表页面页头的整体布局。根据效果图，可以把前3行的内容看作是头部里面的内容，分别是：最顶部的logo图像和导航菜单、Banner图像、页面路径和搜索栏目，所以网页头部的结构可以表示为下图所示。步骤 01一、网页、网站和

24、主页一、构建HTML结构43 项目六 构建网页布局案例实施案例实施一、网页、网站和主页继续在前面的文档“xwlist_1x.html”中操作。在案例一中插入的标签对中插入logo图像“logo.gif”，并将原来的文字“此处为新header标签的内容”删除。此外，为了可以使用CSS对该图像进行控制，在“代码”视图中img标签中输入代码class=“left”，如下图所示。步骤 0244 项目六 构建网页布局案例实施案例实施添加网站导航菜单内容。在步骤2插入的图像后面插入一个id名为menu的标签，然后在该标签中输入文本，并为这些文本分别设置空链接，可以看到这些内容自动应用了“s1.css”中设

25、置的样式，效果如下图所示。一、网页、网站和主页步骤 0345 项目六 构建网页布局案例实施案例实施添加页面banner内容。对于banner图像，可以采用插入图像或使用CSS设置背景图像的方式进行设计。此处使用插入图像方式，直接在步骤3插入的id名为menu的标签对后面插入图像“01.jpg”即可，如下图所示。一、网页、网站和主页步骤 0446 项目六 构建网页布局案例实施案例实施添加页面路径内容。首先在步骤4插入的图像后面插入一个id为lujing的标签对，然后在该盒子中输入相关文字和符号，并为路径中的文字设置超链接，如下图所示。一、网页、网站和主页步骤 0547 项目六 构建网页布局案例实

26、施案例实施添加“站内搜索”内容。在步骤5插入的标签中插入一个id为search的标签对（注意是在文字前面插入），如下图所示。一、网页、网站和主页步骤 06提示 此处的搜索也可以放在页面路径的外面，与其形成平行关系，但这样需要对搜索设置与页面路径相同的背景图像。根据采用的布局方式的不同，搜索的放置位置也不一样。此处打算使用向右浮动的方式到达页面路径所在行的最右边，因此放在此位置。48 项目六 构建网页布局案例实施案例实施插入搜索表单。由于表单通常用于和服务器端进行交互，因此此处需要插入表单元素。将id名为search的中的默认文本删除，并在其中插入一个表单标签（id为form1），然后在标签中依

27、次输入文本“站内搜素：”，插入一个“文本字段”和一个“图像按钮”表单元素，并设置相应属性，如下图所示。一、网页、网站和主页步骤 07提示通过选择“插入”“表单”子菜单中的各项可以插入表单和表单元素。图像按钮的插入方法与图像类似，选择菜单项后，在打开的“选择图像源文件”对话框中选择图像即可。49 项目六 构建网页布局案例实施案例实施首先去掉表单和表单对象的默认样式。在插入对象后，会发现搜索search盒子变大了，这是因为自带默认的边界和填充，需要将这些默认属性去掉。打开CSS样式文件“s1.css”，在前面设置的h3，h4和p选择器中加上input和form。一、网页、网站和主页步骤 01设置搜

28、索栏目整体向右对齐，此处采用右浮动方式。在“CSS设计器”中新建选择器“#search”，设置其padding-right、float、color、font-weight、font-size和line-height属性值分别为20px、right、#C31103、bold、14px和30px，如右图所示。步骤 02一、网页、网站和主页二、设置CSS样式50 项目六 构建网页布局案例实施案例实施保存文档并在浏览器中预览，此时的效果如下图所示。可以看出搜索栏目中的图像按钮要高于前面的文本框和文字。一、网页、网站和主页步骤 0351 项目六 构建网页布局案例实施案例实施使图像按钮与文本框对齐。此处需

29、要注意的是，设置图像按钮上下对齐时一般使用margin-bottom加负值，在“CSS设计器”中新建选择器“#imageField”，设置其margin-bottom值为7px，此时可以看到图像按钮与文本框对齐了，如下图所示。一、网页、网站和主页步骤 04案例一目录页 CONTENTS PAGE 项目六 构建网页布局案例二案例三案例四53 项目六 构建网页布局案例说明本案例将通过制作右图所示的企业网站新闻列表页面中的新闻中心栏目，来继续学习使用浮动方式和其他方式进行网页布局的方法。54 项目六 构建网页布局案例实施案例实施一、网页、网站和主页根据分析，可以看出左侧新闻中心栏目（leftlist

30、）内容由两部分构成，分别是：新闻标题和正文列表（ul，li），结构如下图所示。步骤 01一、网页、网站和主页一、网页、网站和主页一、构建HTML结构55 项目六 构建网页布局案例实施案例实施一、网页、网站和主页在案例一插入的id为leftlist的中插入id为listTitle的，作为标题的容器，并将其中的文本“此处显示 id”leftlist“的内容”删除，如下图所示。步骤 0256 项目六 构建网页布局案例实施案例实施一、网页、网站和主页设置文字列表。将插入点置于步骤2插入的后面，单击“插入”面板“HTML”类别中的“项目列表”按钮，然后输入文本“集团要闻”，之后按回车键输入“经营动态”，

31、按照同样的方法依次输入下方的其他列表文本，如下图所示。步骤 0357 项目六 构建网页布局案例实施案例实施一、网页、网站和主页为列表文字添加超链接。选中项目文字“集团要闻”，在“属性”面板“链接”编辑框中输入“#”符号，为文字设置空链接，之后按照同样的方法为下方的列表文字分别设置空链接，如下图所示。步骤 04将id为listTitle的div中的默认文字“此处显示 id”listTitle“的内容”删除，重新输入“新闻中心”，完成HTML结构的构建。步骤 0558 项目六 构建网页布局案例实施案例实施一、网页、网站和主页给新闻标题listTitle盒子设置背景和文字样式。在“CSS选择器”中新

32、建选择器“#listTitle”，在“属性”窗格中分别设置其height、padding-left、color、font-weight、font-size、line-height和background属性，如右图所示。步骤 01一、网页、网站和主页一、网页、网站和主页二、设置CSS样式左侧新闻中心的背景图像由三部分构成：listhead.gif、listmiddle.gif和listfoot.gif。在设计样式时可以将listhead.gif作为新闻标题的背景，listmiddle.gif作为ul的背景，listfoot.gif作为最外层的leftlist盒子的背景。59 项目六 构建网页布局

33、案例实施案例实施一、网页、网站和主页为新闻中心的列表菜单设置样式。由于和都自带默认的项目列表符号，以及边界margin或填充padding属性，因此通常在制作时需要将他们的默认样式统一去掉。可以在前面已经存在的选择器中添加相应标签，代码如右图所示。步骤 02提示 利用height:48px;属性设置的高度与背景图像listhead.gif的高度一致。利用line-height:40px;属性设置的行高不能超过背景图像的高度。padding-left:20px;属性表示给标题与左边界保留20px的间距，此处不能使用margin-left属性。60 项目六 构建网页布局案例实施案例实施一、网页、网

34、站和主页为leftlist盒子里的设置背景和上下间距样式。在“CSS设计器”中新建嵌套选择器“#content#leftlist ul”，设置其background和padding属性，如左图所示。步骤 03为leftlist盒子里中的添加虚线边框、列表符号和左右间距样式。在“CSS设计器”中新建嵌套选择器“#leftlist ul li”，设置其各项属性，如右图所示。步骤 0461 项目六 构建网页布局案例实施案例实施一、网页、网站和主页为leftlist盒子里中列表文本的超链接去除下划线并设置文字颜色。在“CSS设计器”中新建嵌套选择器“#leftlist ul li a”，设置其各项属性

35、，如左图所示。步骤 05为leftlist盒子添加背景。在“CSS设计器”中选择前面在案例一中创建的“#content#leftlist”，并为其添加padding和背景属性，如右图所示。步骤 0662 项目六 构建网页布局案例实施案例实施一、网页、网站和主页此时便完成了新闻中心栏目的制作，保存文档并在浏览器中预览，效果如下图所示。步骤 07提示 padding-bottom:22px;此处通过增加下方的内边距来增加的高度，下边距的高度应大于或等于背景图像listfoot.gif的高度22px。background-position:bottom;设置背景图像在块的最下方显示。案例一目录页 C

36、ONTENTS PAGE 项目六 构建网页布局案例二案例三案例四64 项目六 构建网页布局案例说明本案例将通过制作右图所示企业网站新闻列表网页中的集团要闻栏目，来继续学习使用浮动方式和其他方式进行网页布局的方法。效果图中的蓝色字体为鼠标移上去的效果。65 项目六 构建网页布局案例实施案例实施一、网页、网站和主页一、网页、网站和主页一、网页、网站和主页下面开始制作集团要闻栏目，通过分析效果图，可以将整个栏目分为4大部分：栏目标题h2、新闻标题、新闻时间和新闻翻页，如下图所示。制作过程中需要注意，采用浮动方式进行布局时，如何对HTML元素进行合理的设置。66 项目六 构建网页布局案例实施案例实施一

37、、网页、网站和主页设置栏目标题。此处的栏目标题包括中文和英文两部分，需要将英文部分放置在标签对中，并设置其class名为fnt1，以便使用CSS单独设置其样式。将id为rightlist的Div中的默认文字删除，单击“插入”面板“HTML”类别中的“标题”下拉按钮，在其下拉列表中选择“H2”，并输入标题文字“集团要闻 Group News”，然后在代码界面中为英文加上标签和class属性，如下图所示。步骤 01一、网页、网站和主页一、网页、网站和主页一、构建HTML结构67 项目六 构建网页布局案例实施案例实施一、网页、网站和主页设置新闻标题与新闻时间。在步骤1设置好的标题后面按回车键并单击“

38、插入”面板“HTML”类别中的“项目列表”按钮，之后输入日期和新闻标题，并为其设置空链接，最后在代码界面中为日期添加标签和class属性，如下图所示。步骤 02提示新闻标题与新闻时间的布局结构与前面搜索框的原理一致，关键在于是浮动新闻标题还是新闻时间。如果希望使新闻时间向右浮动到列表的最右边，那么新闻时间的HTML元素应该在新闻标题之前。此外，新闻时间与新闻标题在同一行显示，需要对新闻时间采用行内标签，并添加class名newsTime。68 项目六 构建网页布局案例实施案例实施一、网页、网站和主页参照步骤2的操作，在第1条新闻后面单击并按回车键，输入第2条新闻（包括日期和新闻标题内容），并同

39、样地将日期括起来和设置class属性；之后按照同样的方法依次输入其他新闻，如下图所示。步骤 0369 项目六 构建网页布局案例实施案例实施一、网页、网站和主页知识库 此处新闻标题和新闻时间的HTML结构并不是唯一的，也可以将新闻时间放在新闻标题之后，然后采用新闻标题左浮动，新闻时间右浮动的方式，例如：新闻标题新闻时间 使用这种方式设置超链接的hover样式时，由于新闻时间在超链接外面，因此其样式保持不变。如果想要达到效果图中的样式，需要将新闻时间也放在超链接a里面，此时需要给新闻标题单独添加span标签，HTML结构如下：新闻标题 新闻时间70 项目六 构建网页布局案例实施案例实施一、网页、网

40、站和主页设置翻页效果。通过观察效果图，可以发现里面有红色文字样式，此处对红色文字采用行内标签，并设置其class名为fnt2。在代码界面中新闻列表标签后面单击并按回车键，然后插入一个标签，并设置其id属性为page，接着在其中输入文字，并为相应文字加上标签及class属性，如下图所示。步骤 0471 项目六 构建网页布局案例实施案例实施一、网页、网站和主页为中的英文标题设置样式。新建类选择器“.fnt1”，分别设置其font-family、font-size和color属性，如左图所示。步骤 03为右边的新闻列表设置样式。首先设置的上边框样式。新建嵌套选择器“#content#leftlist

41、 ul”，设置其样式属性如右图所示。步骤 0472 项目六 构建网页布局案例实施案例实施一、网页、网站和主页设置标题样式。首先将标题的默认样式去掉，只需要在已经存在的标签选择器前加上h2，如左图所示。步骤 01一、网页、网站和主页一、网页、网站和主页二、设置CSS样式为标题添加下边框和字体样式属性。新建标签选择器“h2”，分别设置其width、font-size、line-height和border-bottom属性，如右图所示。步骤 0273 项目六 构建网页布局案例实施案例实施一、网页、网站和主页为列表项设置行高、列表符号和虚线边框样式等。新建嵌套选择器“#content#rightlis

42、t ul li”，设置其样式属性如右图所示。步骤 05为列表项中的超链接设置样式。新建嵌套选择器“#content#rightlist ul li a”，设置其样式属性如下图所示。步骤 0674 项目六 构建网页布局案例实施案例实施一、网页、网站和主页为列表项中的超链接设置鼠标滑过时的样式。新建嵌套选择器“#content#rightlist ul li a:hover”，设置其样式属性如左图所示。步骤 07为新闻时间设置右浮动样式。新建类选择器“.newsTime”，设置其样式属性如右图所示。步骤 0875 项目六 构建网页布局案例实施案例实施一、网页、网站和主页为新闻翻页的页码设置样式。新建类选择器“.fnt2”，设置其文本颜色color值为#CC0033。步骤 09知识库在HTML结构中，如果新闻时间在新闻标题后，就应该对新闻标题进行左浮动，其他元素的样式设置不变。