网页设计与制作

1. 网页设计与制作 学时：60学时

2. 第五章 布局网页 • 了解：了解表格在布局中的作用。 • 熟练掌握：掌握创建表格和设置表格属性的方法；使用表格布局网页。 • 掌握：掌握框架和框架集的操作，以及框架网页的制作。

3. 第一节 使用表格布局网页 一、创建表格

4. 一、创建表格 一、创建表格 创建表格有以下两种方法： 执行“插入”→“表格”命令。 在插入栏的“常用”类别中，单击“表格”按钮 。 然后按下图所示设置。 行数：输入表格的行数。 列数：输入表格的列数。 边框粗细：输入表格线的宽度，如果不需要显示表格线，则输入“0”。 单元格间距：指定表格中相邻单元格的间距。 表格宽度：输入表格的宽度，并在右侧的列表中选择“像素”或“百分比”。 单元格边距：指定单元格边框和单元格内容的间距。

5. 二、设置表格和单元格属性

6. 二、设置表格和单元格属性 （一）选择表格和单元格 表格与单元格有各自的边框颜色、宽度、高度、背景色、背景图像等属性。因此，要对这些属性进行设置，首先选中表格或单元格。 • 1.选择表格 • 要选择整个表格，可以执行以下3种操作： • 单击表格的左上角、表格的上边框或下边框的任何位置或者行或列的边框。 • 单击某个单元格，然后在文档窗口左下角的“标签选择器”中选择<table>标签。 • 单击某个单元格，然后执行“修改”→“表格”→“选择表格”命令。 • 2.选择单元格 • 选择单元格有以下3种方法： • 单击单元格，将光标定位到单元格中，然后在文档窗口左下角的标签选择器中单击<td>标签。 • 按住Ctrl键，单击要选中的一个或者多个单元格，可以选中一个或者多个单元格。 • 单击单元格，将光标定位到单元格中，然后执行“编辑”→“全选”命令，选中当前单元格。再执行一次“编辑”→“全选”命令可以选中所有单元格。

7. 二、设置表格和单元格属性 （二）表格的属性设置 表格属性设置如下图： ●对齐：设置表格相对于同一段落中的其他元素的显示位置。 宽度：设置表格的宽度，以像素为单位或表示为占浏览器窗口宽度的百分比。 填充：设置单元格中的内容与单元格边框之间的像素数，也称单元格边距。 间距：设置相邻的表格单元格之间的像素数，也称单元格间距。 行和列：设置表格中行和列的数量。 “将表格宽度转换成百分比”按钮 ：将表格中每列的宽度设置为按占文档窗口宽度百分比表示的当前宽度。 类：对该表格设置一个CSS类。 边框：指定表格边框的宽度（以像素为单位）。 “清除列宽”按钮 和“清除行高”按钮 ：分别用于从表格中删除所有明确指定的行高或列宽。 “将表格宽度转换成像素”按钮 ：将表格中每列的宽度设置为以像素为单位的当前宽度。

8. 二、设置表格和单元格属性 （三）单元格的属性设置 单元格属性设置如下图： 不换行：防止换行，从而使给定单元格中的所有文本都在一行上。 背景颜色：设置单元格、列或行的背景颜色。 合并单元格：将所选的单元格、行或列合并为一个单元格。 水平：指定单元格、行或列内容的水平对齐方式。 宽和高：以像素为单位或按整个表格宽度或高度的百分比指定所选单元格的宽度和高度。 标题：将所选的单元格设置为表格标题单元格。 拆分单元格：将一个单元格分成两个或更多个单元格。 垂直：指定单元格、行或列内容的垂直对齐方式。

9. 三、嵌套表格

10. 三、嵌套表格 嵌套表格是在表格的一个单元格中再次插入一个表格。 在表格单元格中嵌套表格的操作步骤如下： （1）选中表格中要嵌套表格的单元格。 （2）执行“插入”→“表格”命令，打开“插入表格”对话框。输入表格的宽度为100%。 （3）单击“确定”按钮，该表格即出现在现有表格中。

11. 四、使用表格布局网页实例

12. 四、使用表格布局网页实例 下面通过一个简单的网页排版实例，来熟悉表格在排版中的作用。当然，这其中还要使用到上一章的CSS知识，一定要牢记：表格用来排版，CSS用于控制文字、图片等的外观。 本实例是一个电子商务网站的一个商务课程内容显示页如右图所示。

13. 第二节 使用框架布局 一、创建框架

14. 一、创建框架 在Dreamweaver CS4中系统预设了多种框架集供用户选择，使用这些框架，可以轻松地创建框架集，用户也可以自己创建框架集，操作步骤如下： 执行“文件”→“新建”命令，弹出“新建文件”对话框，在对话框最左侧的选项区中选择“示例中的页”，在中间的选项区中选择“框架页”，右侧会显示出框架集的设置类型，从中可以选择需要的框架结构，如图所示。

15. 二、保存框架和框架集

16. 二、保存框架和框架集 保存框架和框架集的操作步骤如下： （1）执行“文件”→“保存全部”命令，弹出“另存为”对话框，系统提示保存框架集文件，框架集文件默认的文件名为UntitledFrameset-2.html。（2）在对话框中输入要保存的名称后，单击“保存”按钮，框架集文件保存完毕，接着又弹出一个“另存为”对话框，这时系统要求保存剩下的两个框架文件，与保存框架集相同，为框架文件命名后单击“保存”按钮即可。

17. 三、设置框架和框架集属性

18. 三、设置框架和框架集属性 方法一：在文档窗口中，单击框架边框可以选择框架集，被选中的框架以虚线显示 方法二：执行“窗口”→“框架”命令，打开“框架”面板，在“框架”面板中单击框架，可以选择相应的框架， （一）选择框架和框架集 在设置前，先选中需要设置的框架和框架集。 1.选择框架集 选择框架集有以下两种方法：

19. 三、设置框架和框架集属性 （一）选择框架和框架集 2.选择框架 执行“窗口”→“框架”命令，打开“框架”面板，在“框架”面板中单击框架，可以选择相应的框架，如图所示的被黑色线包围的部分“topFrame”。

20. 三、设置框架和框架集属性 （二）设置框架和框架集属性 1.设置框架的属性 框架名称：用于为当前的框架命名。 滚动：用于设置是否在框架中显示滚动条。 源文件：用于输入或显示将在该框架中显示的网页的URL地址。 边框：用于设置是否显示框架的边框。 不能调整大小：如果选中该复选框，则浏览者在浏览页面时不能通过拖动框架边框来改变框架的大小。 边框颜色：用于设置框架的边框颜色，该颜色将覆盖框架集的边框颜色。 边界宽度：用于设置框架中的内容与框架左右边框之间的距离。 边界高度：用于设置框架中的内容与框架上下边框之间的距离。

21. 三、设置框架和框架集属性 （二）设置框架和框架集属性 2.设置框架集的属性 边框：用于设置所选的框架集边框是否在浏览器中显示。 边框颜色：用于设置所选框架集的边框颜色。 值：用于设置所选框架的宽度。 单位：用于设置框架的尺寸单位。 行列选定范围：深灰色表示当前选择的框架。 边界高度：用于设置框架中的内容与框架上下边框之间的距离。

22. 四、使用框架布局网页实例

23. 四、使用框架布局网页实例 本实例的效果是先建立两个页面，分别命名为“ males.html ”、“ female.html”。前一个是服装商务网站的男装页面，后一个是女装页面。然后建立一个含有框架的页面，在框架网页的左侧框架添加导航栏，单击导航文字就可以将相应的页面显示在右侧的框架中。最终效果如下图。

24. THE END