Dreamweaver实例教程 叶哲丽 孙海龙 第3章新.pptVIP

第三章 网页的布局与定位 本章学习目标 1）了解网页布局与定位基本概念 2）掌握在网页中使用表格和单元格。 3）了解布局视图的概念。 4）掌握使用表格和布局视图对网页布局和定位。 3.1 布局与定位的基本概念 重点提示 1）网页布局与定位的基本概念。 2）网页布局与定位常用方法。 3）网页布局与定位实例。 3.1 布局与定位的基本概念 布局与定位的基本概念 1．网页尺寸大小 2．网页布局类型 3．网页标题和页脚 4．网页文本和图像 3.1 布局与定位的基本概念 实例１：用一张设计好的网页效果图，将它合理分割，最后生成网页。再用表格进行布局和定位。实例效果如下图所示。 3.2 表格对网页布局与定位 重点提示: 1）网页中插入表格和单元格并输入数据。 2）设置表格和单元的属性。 3）表格和单元格的编辑。 3.2 表格对网页布局与定位 实例2：在网页中插入一个3行3列、边框宽度为5、宽度为75%、单元格填充为2、单元格间距为2的表格。 本实例重点掌握表格的插入方法。 实例3：在实例2的表格中输入文字。 实例4：表格数据的导入 。 实例5：选择表格和表格中的元素。 本实例重点掌握表格、单元格、以及表格中行和列的属性设置 3.3 布局视图对网页布局与定位 重点提示 1）绘制布局表格和布局单元格。 2）设置间隔图像和列设置为自动伸展。 实例6：在Dreamweaver 8.0中创建一个静态网页，用布局视图进行布局，绘制布局表格和布局单元格。 本实例重点掌握绘制布局表格和布局单元格、设置间隔图象、设置列为自动伸展。 3.4 网页网页布局与定位练习 重点提示 1）运用表格对网页布局和定位。 2）运用布局视图对网页布局和定位。 实例7：运用表格布局将图像：电路基础_01.gif、电路基础_02.gif、电路基础_03.gif等插入在表格中相应位置，对网页合理布局，最终生成网页“电路基础.html”。（单击进入助教视频） 实例8：在Dreamweaver 8.0中创建一个静态网页，运用布局视图绘制布局表格和布局单元格，然后插入实例一中分割好的图，然后在布局单元格中插入图像，最后做成一张完整的网页buju.html。 本 章 小 结 本章第一节主要介绍了网页布局与定位的基本概念；第二节详细介绍了如何在网页中插入表格、表格的属性设置、在表格中输入、导入和导出数据、编辑表格和用表格布局页面；第三节介绍布局视图在网页布局的运用以及布局表格和布局单元格的绘制；第四节用两个实例分别介绍用表格和用布局视图对网页进行布局的方法。 通过本章的学习，使读者掌握用表格和布局图布局网页。可以设计自己需要的页面形式，使之层次清晰；还可以有效地固定网页中的元素，给网页制作带来极大的方便。 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网