中职网页制作基础（Dreamweaver CS6）（第2版）项目三 网页布局电子课件（）

(中职）网页制作基础（DreamweaverCS6）（第2版）项目三网页布局电子课件（工信版）项目三网

页

布

局项目目标（1）了解网页布局设计的主要内容；（2）掌握用表格布局网页的方法；（3）掌握用Div+CSS布局网页的方法。项目描述

本项目将通过3个任务来介绍网页布局时要注意的主要内容，以具体实例来说明如何利用表格和Div+CSS来布局网页，比较两种方法的区别。任务1使用表格布局页面，任务2使用Div+CSS布局页面，任务3通过对CSS的margin和float等属性的设置，来实现页面居中和多列布局。任务1认识网页的实质任务目标（1）掌握表格的创建和使用方法；（2）认识表格属性、单元格属性的设置及修改方法。任务描述

通过创建表格布局网页，并设置表格和单元格属性，学会添加行与列、拆分与合并单元格的方法，最后向表格中添加文本及图像等对象。任务分析

在网页布局方面，表格起着举足轻重的作用，通过设置表格及单元格的属性，对页面中的元素进行准确定位，既能使页面在形式上更加丰富多彩，又能对页面进行更加合理的布局。本任务通过表格来布局网页，通过本任务的学习，学生能掌握插入表格及设置表格属性、编辑表格与单元格等知识。

操作步骤步骤1．启动DreamweaverCS6，新建站点，新建HTML文档。（1）双击桌面上的DreamweaverCS6图标，启动DreamweaverCS6。（2）选择“站点”→“新建站点”命令，弹出“站点设置对象项目3”对话框，在“站点名称”文本框中输入“项目3”，“本地站点文件夹”中选择“E:\素材\项目3\示例\”，单击“保存”按钮，新建站点“项目3”。操作步骤（3）选择“文件”→“新建”命令，或按Ctrl+N组合键，弹出“新建文档”对话框。（4）在左侧栏中选择“空白页”选项，在“页面类型”栏中选择“HTML”选项，在“布局”栏中选择“<无>”选项，单击“创建”按钮，新建一个默认名为“Untitled_1.html”的空白网页。（5）选择“文件”→“保存”命令，或按Ctrl+S组合键，弹出“另存为”对话框，设置文件名为“table.html”。操作步骤步骤2．创建表格。（1）在“文档”窗口的“设计”视图中单击，使文本光标移动到需要插入表格的位置。（2）执行以下操作之一，可弹出“表格”对话框。（3）弹出“表格”对话框，可以在其中设置表格的基本属性，如行数、列数、表格宽度、边框粗细等。这里设置表格为4行1列，表格宽度为400像素，边框粗细为0像素。（4）设置完成后单击“确定”按钮。操作步骤步骤3．添加表格对象。（1）插入LOGO。（2）添加文本。（3）嵌套表格。步骤4．设置表格属性。（1）选中表格。（2）设置整个表格的属性。（3）设置列、行和单元格的属性。操作步骤步骤5．表格的基本操作。（1）添加行或列。（2）调整表格。（3）删除行、列。（4）合并单元格。（5）拆分单元格。知识链接

网页布局的效果直接影响到网页设计的质量。在完成网站的规划后，必须事先做好布局规划，如LOGO应该设计为多大、Banner应该设计为多大、图标应该设计多少等。1．页面版式草图的设计2．布局方案的选择3．布局方案的细化4．布局技术的选择5．页面元素的确定拓展与提高

常用表格元素包括table（表格）元素、tr（行）元素、td（单元格）元素。

（a）基本表格程序代码

（b）网页效果试一试

启动DreamweaverCS6，新建一个网页，用表格设计网页的布局，注意嵌套表格、合并和拆分单元格、调整单元格的颜色、调整行高列宽和对齐方式等。任务2使用Div+CSS布局页面任务目标（1）掌握用Div布局页面功能模块的方法；（2）掌握用CSS对网页外观进行设置的方法。任务描述Div是HTML中最常用的块元素，起到了分段分块的作用，可用于布局页面结构；CSS主要用于对页面字体、颜色、背景等进行精确控制，从而对网页的外观进行布局。任务分析

传统的表格布局网页是通过大小不一的表格和表格嵌套来定位及布局网页内容的。本任务使用Div+CSS布局，即通过CSS定义大小不一的Div和Div嵌套来布局网页。这种布局方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器。

操作步骤步骤1．启动DreamweaverCS6，打开站点，新建HTML文档。（1）双击桌面上的DreamweaverCS6图标，启动DreamweaverCS6。（2）在“文件”面板中选择已创建的站点“项目3，打开站点“项目3”。（3）选择“文件”→“新建”命令，或按Ctrl+N组合键，弹出“新建文档”对话框。（4）在左侧栏中选择“空白页”选项，在“页面类型”栏中选择“HTML”选项，在“布局”栏中选择“<无>”选项，单击“创建”按钮。新建一个默认名为“Untitled_1.html”的空白网页。（5）选择“文件”→“保存”命令，或按Ctrl+S组合键，弹出“另存为”对话框，设置文件名为“divcss.html”。操作步骤步骤2．插入Div元素，布局页面。（1）在“文档”窗口中，切换到“设计”视图，执行以下操作之一，即可弹出“插入Div标签”对话框。（2）弹出“插入Div标签”对话框，在“ID”文本框中输入“container”。（3）将内容“此处显示id”container“的内容”删除，将光标移动到Div虚线框的内部，在“插入”面板中选择“插入Div标签”选项，在“ID”文本框中输入“header”，则在“container”Div中嵌套插入ID为“header”的Div标签。切换到“拆分”视图。（4）用同样的方法，在“header”Div下面插入ID分别为“nav”“content”“footer”3个Div标签。操作步骤步骤3．创建CSS样式，设置页面外观。（1）设置网页背景颜色。（2）设置外层Div的高度、宽度、边框。（3）设置内层4个Div的背景颜色、高度、边框。步骤4．修改CSS样式，改变页面外观。

修改Div“footer”的背景颜色与“header”的背景颜色一致，即背景颜色改为深蓝色。（1）新建CSS后，样式的名称会在“CSS样式”面板中列出。（2）修改Div“footer”的样式，在“CSS样式”面板中双击“#footer”样式，即可弹出“footer的CSS规则定义”对话框，设置背景颜色为深蓝色知识链接1．CSS的基本语法CSS是一系列格式规则，使用CSS样式可以灵活控制网页外观，从精确的布局定位到特定的字体样式，都可以使用CSS样式来完成。2．常用的选择器（1）标签选择器。（2）类选择器。（3）ID选择器。（4）包含选择器。拓展与提高

传统表格布局方式实际上是利用了表格元素具有的无边框特性，表格布局的优势在于容易掌握，布局方便。但表格布局会生成大量难以阅读和维护的代码，大量样式设计代码混杂在表格、单元格中，使得可读性大大降低，维护起来成本也相当高；此外，表格布局的网页要等整个表格下载完毕后才能显示所有内容，所以表格布局浏览速度较慢。Div可以理解成一个块，是一个比表格简单的元素，在语法上只有<div></div>这样简单的定义。Div最大的好处就是样式由CSS来控制。总之：（1）Div+CSS布局比表格布局节省页面代码，代码结构更清晰明了。（2）Div+CSS的页面对搜索引擎支持好，速度更快，能够比表格更快速地显示网站内容。（3）Div+CSS布局使网站版面布局修改变得更简单，因为版面代码都写在独立的CSS文件中，这样修改起来更方便，不像表格那样要在页面中修改很多信息。试一试

新建网页文档，尝试使用Div+CSS设计网页布局结构，效果参照本书素材“素材\项目3\试一试\3-2\shi3-2.html”。任务3Div+CSS页面布局优化任务目标（1）掌握用Div+CSS设计一列布局页面的方法；（2）掌握用Div+CSS设计多列布局页面的方法。任务描述

Div是块级元素，块级元素的显著特点如下：每个块级元素都是从一个新行开始显示的，而且其后的元素也需另起一行显示。本任务通过设置CSS样式，使多个Div能并列显示在一行中，以形成多种不同类型的网页布局。任务分析

通过设置CSS样式的margin属性和float属性，实现Div的页面居中、两列或多列布局。

操作步骤步骤1．需求分析。

公司接到客户的业务咨询，要建设上海企业网网站，经过双方不断的接洽和了解，通过基本的可行性讨论后，初步达成和制定了协议，进行了项目立项，并制作了一份完整的客户需求说明书。步骤2．网站设计。（1）网站建设的目的和定位。（2）网站的整体风格和配色。（3）网站布局设计。（4）网站的栏目板块规划。操作步骤步骤3．具体开发。

按照网站的总体设计，收集并整理各种文字、图片、声音等素材。网页设计师开始设计网站的整体形象和主页。步骤4．网站整合。

网页设计人员将HTML文档传给程序员，添加实际的程序代码形成最终页面，最后由程序员进行总体网站整合，保证网站正常运行。步骤5．网站测试。

网页设计人员联合网站编辑进行最终页面的测试，包括死链、坏链、内容图片错误、错位、兼容性等。步骤6．网站部署和发布。知识链接1．域名

域名是便于记忆和沟通的一组服务器的地址，它是由一组用点分隔的名称组成的Internet上某一台计算机或计算机组的名称。2．LOGO