1、在线教务辅导网：http:/,教材其余课件及动画素材请查阅在线教务辅导网,QQ:349134187 或者直接输入下面地址：,http:/,模块五,使用表格、框架布局制作网页,学习目标,1、熟练地插入和编辑表格； 2、熟练地使用表格布局网页； 3、掌握使用框架布局网页。,任务1,使用表格布局制作复杂页面,任务导入,要求使用嵌套表格布局玫瑰园餐饮公司主页面，版面布局为“匡”字型，效果如图所示。,知识指导,一.插入表格和选择表格元素 1.插入简单表格： 执行“插入”“表格”命令，或单击“插入”面板的“常用”选项组中的“表格”按钮 。 在打开的对话框中可以预设表格的基本属性，如行数、列数、表格宽度、边
2、框粗细、单元格边距和单元格间距等选项。 2.选择表格元素： （1）选择整个表格四种方法： 将鼠标移至表格边框附近，鼠标指针变为 形状时，单击鼠标。, 将鼠标移到任意表格边框上，鼠标指针变为 或 形状，然后单击鼠标即可。将光标定位在表格中，执行“修改” “表格” “选择表格”命令。 将光标定位在表格中，在标签选择器中单击“”标签。 （2）选择行或列三种方法： 如果要选择一行，将鼠标指向该行的左边框，当鼠标指针变为 时，单击鼠标就可以选择该行；如果要选择一列，将鼠标指向该列的顶端边框，当鼠标指针变为 时，单击鼠标就可以选择该列。, 单击一行或一列的起始单元格，横向或纵向拖动鼠标，即可选定一行或一列
3、。 将光标移至要选择的行中任意一个单元格，在标签选择器中单击“”标签，即可选择该行。 （3）选择单元格如果要选择单个单元格，需要将光标定位在该单元格中，在标签选择器中单击“”标签或“”标签即可。,二.编辑表格和设置表格元素属性 1编辑表格 （1）调整表格大小要调整表格尺寸，可以在选定表格后将光标移至表格的边或角的控制点处，然后根据箭头方向拖动鼠标，此时表格中各单元格的尺寸都将按比例进行调整。 （2）调整行高或列宽要调整表格中某行的行高或某列的列宽，可以将光标定位在选定行或列的任一单元格中，然后将光标移至该单元格的右侧或下方，当光标变成 或 形状，单击并拖动鼠标即可调整行高或列宽。,（3）插入行
4、或列要在表格中某行或某列的上下或两侧插入行或列，可以使用如下的方法： 先选择表格中的某行或某列，然后单击“插入”面板的“布局”选项组，然后单击插入行或插入列等相应的按钮。 先将光标定位在该行或该列的任意单元格中，然后执行“插入” “表格对象”命令，在二级菜单中单击相应的命令选择插入的行或列出现的位置。 （4）删除行或列如要删除表格中的某行或某列，可以先选择该行或该列，然后单击鼠标右键，在弹出的快捷菜单中执行“表格” “删除行”或“删除列”命令即可。,2设置表格元素属性通过设置表格的属性，可以有效改变表格的外观，从而充分发挥表格在页面布局中所起的作用。在Dreamweaver中，选择整个表格后，
5、表格属性面板如图所示：,三.复杂表格的制作 1制作嵌套表格要制作嵌套表格需要将光标定位在外层表格的某个单元格内，然后插入表格即可。2制作细线表格制作细线表格，具体操作步骤如下：,提示：在制作嵌套表格时，外层表格的宽度一般以“像素”为单位，如果内层嵌套的表格的宽度以“%”为单位，嵌套表格将受它所在单元格的宽度的限制；如果内层嵌套的表格的宽度以“像素”为单位，当嵌套表格的宽度大于所在单元格的宽度时，外层单元格将被嵌套表格撑开。,将光标定位在页面中需要插入细线表格的位置，单击插入“表格”按钮 ，弹出 “表格”设置对话框。 在对话框中设置插入表格的属性，各参数的值如图所示，“行数”、“列”和“表格宽度
6、”根据具体情况设定。单击“确定”按钮，在页面的相应位置即可插入一个“边框粗细”为0像素，“单元格边距”为0像素、“单元格间距”均为1像素的表格。 选择整个表格，设置整个表格的背景颜色为细线的颜色，方法为：切换到代码视图下，在表格的起始标签 “” 中添加属性代码“bgcolor=“#000000“” 。,切换到设计视图下，设置表格中所有单元格的背景颜色，方法为：选择所有单元格，单击“属性”面板 中的“背景颜色”按钮，在颜色拾取器中选择白色。,任务2,使用框架布局制作页面,任务导入,要求使用框架布局玫瑰园餐饮公司的内容页面，单击页面左侧栏目中菜肴名称，可以在页面右侧显示该菜肴的详细信息，效果如图所
7、示，该任务的重点是框架集和框架的保存以及设置框架之间的链接。,(a) 框架链接效果图,(b) 框架链接效果图,知识指导,一认识框架和框架集 1. 框架：框架是浏览器窗口中的一个区域，在每个框架中可以输入文本、插入图片或者显示一个独立的网页文件，通过使用框架可以在一个浏览器窗口同时显示多个网页内容。 2. 框架集：当一个页面被划分成多个框架后，系统会自动建立一个框架集，即生成一个HTML文件，在框架集中定义了一组框架的布局和属性，包括框架的数目、框架的大小、位置和每个框架中初始显示的页面地址。框架集只向浏览器提供如何显示一组框架以及在这些框架中显示哪些文件的信息，本身不会在浏览器中显示。,二.创
8、建和选择框架 1创建框架 在Dreamweaver中，系统预设了15种框架结构样式，基本包括了框架设计中的常见类型。用户可以通过以下四种方法来创建框架： （1）新建框架页 具体操作步骤如下： 启动Dreamweaver，执行“文件”“新建”命令打开“新建文档”对话框。 在对话框中选择“示例中的页”选项，在出现的右侧的“示例文件夹”中的单击“框架页”，这时，对话框的最右侧会显示15种框架样式。 选择需要的框架样式，然后单击“创建”按钮，系统会弹出“框架标签辅助功能属性”对话框。,在对话框中可以为每一个框架指定一个标题，单击”确定”按钮后，即可创建一个框架页。 （2）通过插入面板插入框架操作方法是
9、：新建一个空白的html文档后，单击“插入”面板的“布局”选项组中的“框架”列表，在显示的列表中选择需要的框架样式即可。 （3）通过菜单命令插入框架操作方法是：新建一个空白的html文档后，执行“插入”“HTML”“框架”命令，在子菜单中选择相应的命令插入框架。 （4）拆分框架操作方法是：新建一个空白的html文档后，执行“修改”“框架集”命令显示子级菜单，在菜单中选择相应的命令拆分框架。,2选择框架集和框架 （1）选择框架集的方法如下： 在设计窗口中，单击框架的边框线可以选择相应的框架集。 在框架面板中，单击比较粗的边框线可以选择相应的框架集。 （2）选择框架的方法：在框架面板中，单击框架区
10、域即可选择相应的框架。 3创建嵌套框架在网页中创建嵌套框架时，将光标定位在想要插入嵌套框架集的框架中，然后选择下列任意一种方法创建： 执行“修改”“框架集”命令，在弹出的子菜单中根据需要进行选择，即拆分该框架。,执行“插入”“HTML”“框架”命令，选择需要嵌套的框架集样式。 在“插入”面板的“布局”选项卡中，单击框架按钮，然后在显示的下拉列表中选择需要嵌套的框架集样式。,三. 设置框架集和框架属性 1框架集属性设置选择一个框架集后，将显示框架集的属性面板，如图所示：,2框架属性设置选择一个框架后，将显示该框架的属性面板，如图所示:,提示：框架名称要被超链接和脚本引用，所以必须符合框架命名规则
11、。,四链接框架 若要在框架间设置链接，操作步骤如下： 选择网页中用于显示不同栏目页面的框架（一般为mainFrame框架），在属性面板中为该框架设置框架名称。 选中导航栏中的链接文本，在属性窗口中的“链接”文本框中设置链接到的文件。 单击属性窗口中的“目标”下拉列表，列表中会显示该页面中各框架的名称，选择用于显示不同栏目页面的框架名称（如mainFrame框架）。,五保存框架集和框架 保存框架页的方法有以下两种： 1. 全部保存执行“文件”“保存全部”命令，将会弹出一系列的“另存为”对话框，要求对框架集和各个框架进行保存。 2. 单独保存 单独保存框架集和框架的操作步骤如下： 保存框架集：选择框架集后，执行“文件”“保存框架页”命令。如果希望将框架集文档以其它名称进行保存，则可执行“框架集另存为”命令。,保存框架：将光标定位到要保存的框架中，执行“文件”“保存框架”或“框架另存为”命令。,注意：在保存框架时，不能选择框架，只有将光标位到该框架中，才能保存框架，否则只能保存框架页。,
