第3章 网页的布局教学课件 网页制作基础教程（Dreamweaver CS6 第2版）

第3章网页的布局教学课件网页制作基础教程（DreamweaverCS6第2版）工信版主编黄洪杰电子工业出版社网页制作基础教程

(DreamweaverCS6第2版)电子教案第3章网页的布局项目1网页布局相关知识当我们在网上浏览时，常常对一些网站记忆犹新。有的网站给人一种清新雅致的感觉，有的网站让人感觉厚重古朴，有的网站让人轻易就被吸引，有的网站让人很快找到自己想要的信息……为何会有这么多的不同感受？子项目1网站的风格在对网页插入各种对象、修饰效果前，一定要确定网站的风格和网页的布局。也就是说，要先确定网站的总体风格，并对网页的布局进行规划，这样才能保证网站中各网页的统一。主页风格没有优劣之分，网站的性质与风格有着根本的区别。门户网站采用鲜艳的色彩吸引浏览者的注意，而广告是网站收入的重要来源，所以各种形式的广告是少不了的。服务性质的网站不必借各种手段吸引浏览者。而个人网站往往突出创意和个性。子项目2网页布局实例

简单划分，网页的布局一般可以分为“同”字型、标题正文型、分栏型、Flash型和封面型等。“同”字型子项目2网页布局实例

简单划分，网页的布局一般可以分为“同”字型、标题正文型、分栏型、Flash型和封面型等。“同”字型子项目2网页布局实例

标题正文型子项目2网页布局实例

分栏型结构子项目2网页布局实例

Flash型网站子项目2网页布局实例

封面型结构子项目3网页布局注意事项1.平衡性2.对称性3.对比性4.疏密度5.反复性6.韵律感7.颜色搭配子项目4画出网页布局草图项目2使用表格规划网页布局子项目1在网页中插入表格

在网页中单击鼠标，确定光标的位置。然后单击“插入”菜单，选择“表格”命令，输入行、列的值。子项目1在网页中插入表格

表格的高度和宽度是可以改变的。将鼠标指针移动到框线上，当鼠标指针改变时，拖动鼠标到合适的位置然后松开就可以了。子项目2制作不规则表格

1.添加新行、新列使光标出现在表格某行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上使之弹出子菜单，在子菜单中单击“插入行”，则插入一行。子项目2制作不规则表格

2.删除行或列首先单击鼠标，使光标出现在被删除行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上使之弹出子菜单，在子菜单中单击“删除行”，则该行被删除。子项目2制作不规则表格

3.合并单元格。拖动鼠标同时选中多个单元格，移动鼠标指针到“属性”面板上，单击“合并单元格”按钮，则被选中的单元格被合并。子项目2制作不规则表格

4.拆分单元格首先单击鼠标，使光标出现在被拆分单元格中。移动鼠标指针到“属性”面板上，单击“拆分单元格”按钮，打开“拆分单元格”对话框。在“拆分单元格”对话框中，输入相应值，单击确定。子项目3设置表格和单元格属性

对表格进行设置，主要是在“属性”面板中进行，需要注意的是选取表格与选取单元格时，“属性”面板的内容是不同的。在表格的“属性”面板中，能够设置框线的宽度、单元格间距，以及背景色等。子项目3设置表格和单元格属性

将表格框线的宽度更改为“0”，可以发现表格的框线变成虚线，这样在浏览器中，表格将被隐藏。子项目4表格的嵌套在表格的单元格中，可以再插入一个表格。子项目5使用表格规划网页布局将表格中的所有框线粗细都设为0，调整表格的高度和宽度，借口初步看到一个规划后网页的样子。调整“属性”面板中的“填充”值和“间距”值。项目3使用APDiv布局网页子项目1Div与APDiv概述Div，也称Div标签，是一种区隔标记。它的主要作用是还可以将页面分割为不同的区域，设定文字、图像和表格的排列方式。通过拖动、方向键或者指定坐标的位置等方式，对文字、图像等元素进行精确定位。APDiv是一种绝对定位元素，它可以包含文本、图像等其他内容，这使得组成网页的各种元素可以精确定位在网页的某个位置。子项目2插入APDiv移动鼠标单击“插入”菜单，选择“布局对象”下的“APDiv”命令，此时在网页编辑区出现一个区域。子项目3设置APDiv选中AP元素，单击AP元素框线，将鼠标指针移动到框线的右下角

上，当鼠标指针变成

时，拖动鼠标，更改AP元素的大小。子项目3设置APDiv属性面板中的主要参数含义如下：编号：AP元素编号，与同一网页上的其他AP元素相区分。左、上：AP元素与页面左上角的距离，用于确定绝对定位。宽、高：AP元素的宽度和高度。Z轴：各个AP元素的排列顺序，也就是哪个AP元素在上面，哪个AP元素在下面。背景颜色、背景色：用于设定AP元素的背景。溢出：当层中文字超过层的大小时，显示文字的方式。有“visible”、“hidden”、“scroll