第五章-布局网页分析.ppt

网页设计与制作,学时：60学时,第五章布局网页,了解：了解表格在布局中的作用。熟练掌握：掌握创建表格和设置表格属性的方法；使用表格布局网页。掌握：掌握框架和框架集的操作，以及框架网页的制作。,第一节使用表格布局网页,一、创建表格,一、创建表格,一、创建表格创建表格有以下两种方法：执行“插入”“表格”命令。在插入栏的“常用”类别中，单击“表格”按钮。然后按下图所示设置。,二、设置表格和单元格属性,二、设置表格和单元格属性,（一）选择表格和单元格表格与单元格有各自的边框颜色、宽度、高度、背景色、背景图像等属性。因此，要对这些属性进行设置，首先选中表格或单元格。,二、设置表格和单元格属性,（二）表格的属性设置表格属性设置如下图：,“将表格宽度转换成像素”按钮：将表格中每列的宽度设置为以像素为单位的当前宽度。,二、设置表格和单元格属性,（三）单元格的属性设置单元格属性设置如下图：,合并单元格：将所选的单元格、行或列合并为一个单元格。,拆分单元格：将一个单元格分成两个或更多个单元格。,三、嵌套表格,三、嵌套表格,嵌套表格是在表格的一个单元格中再次插入一个表格。在表格单元格中嵌套表格的操作步骤如下：（1）选中表格中要嵌套表格的单元格。（2）执行“插入”“表格”命令，打开“插入表格”对话框。输入表格的宽度为100%。（3）单击“确定”按钮，该表格即出现在现有表格中。,四、使用表格布局网页实例,四、使用表格布局网页实例,下面通过一个简单的网页排版实例，来熟悉表格在排版中的作用。当然，这其中还要使用到上一章的CSS知识，一定要牢记：表格用来排版，CSS用于控制文字、图片等的外观。本实例是一个电子商务网站的一个商务课程内容显示页如右图所示。,第二节使用框架布局,一、创建框架,一、创建框架,在DreamweaverCS4中系统预设了多种框架集供用户选择，使用这些框架，可以轻松地创建框架集，用户也可以自己创建框架集，操作步骤如下：执行“文件”“新建”命令，弹出“新建文件”对话框，在对话框最左侧的选项区中选择“示例中的页”，在中间的选项区中选择“框架页”，右侧会显示出框架集的设置类型，从中可以选择需要的框架结构，如图所示。,二、保存框架和框架集,二、保存框架和框架集,保存框架和框架集的操作步骤如下：（1）执行“文件”“保存全部”命令，弹出“另存为”对话框，系统提示保存框架集文件，框架集文件默认的文件名为UntitledFrameset-2.html。（2）在对话框中输入要保存的名称后，单击“保存”按钮，框架集文件保存完毕，接着又弹出一个“另存为”对话框，这时系统要求保存剩下的两个框架文件，与保存框架集相同，为框架文件命名后单击“保存”按钮即可。,三、设置框架和框架集属性,三、设置框架和框架集属性,（一）选择框架和框架集在设置前，先选中需要设置的框架和框架集。1.选择框架集选择框架集有以下两种方法：,三、设置框架和框架集属性,（一）选择框架和框架集2.选择框架执行“窗口”“框架”命令，打开“框架”面板，在“框架”面板中单击框架，可以选择相应的框架，如图所示的被黑色线包围的部分“topFrame”。,三、设置框架和框架集属性,（二）设置框架和框架集属性1.设置框架的属性,三、设置框架和框架集属性,（二）设置框架和框架集属性2.设置框架集的属性,四、使用框架布局网页实例,四、使用框架布局网页实例,本实例的效果是先建立两个页面，分别命名为“males.html”、“female.html”。前一个是服装商务网站的男装页面，后一个