网页设计与制作_项目式_教学课件 冯文惠 田源 模块五.pptVIP

模块五 使用表格、框架布局制作网页 学习目标 1、熟练地插入和编辑表格； 2、熟练地使用表格布局网页； 3、掌握使用框架布局网页。 任务1 使用表格布局制作复杂页面 任务导入 要求使用嵌套表格布局玫瑰园餐饮公司主页面，版面布局为“匡”字型，效果如图所示。 知识指导 一.插入表格和选择表格元素 1.插入简单表格： ①执行“插入”→“表格”命令，或单击“插入”面板的“常用”选项组中的“表格”按钮 。 ②在打开的对话框中可以预设表格的基本属性，如行数、列数、表格宽度、边框粗细、单元格边距和单元格间距等选项。 2.选择表格元素： （1）选择整个表格四种方法： ? ①将鼠标移至表格边框附近，鼠标指针变为 形状时，单击鼠标。? ? ②将鼠标移到任意表格边框上，鼠标指针变为 或 形状，然后单击鼠标即可。 ③将光标定位在表格中，执行“修改”→ “表格”→ “选择表格”命令。 ? ④将光标定位在表格中，在标签选择器中单击“table”标签。 （2）选择行或列三种方法： ? ①如果要选择一行，将鼠标指向该行的左边框，当鼠标指针变为? 时，单击鼠标就可以选择该行；如果要选择一列，将鼠标指向该列的顶端边框，当鼠标指针变为? 时，单击鼠标就可以选择该列。 ? ②单击一行或一列的起始单元格，横向或纵向拖动鼠标，即可选定一行或一列。 ? ③将光标移至要选择的行中任意一个单元格，在标签选择器中单击“tr”标签，即可选择该行。 （3）选择单元格 如果要选择单个单元格，需要将光标定位在该单元格中，在标签选择器中单击“td”标签或“th”标签即可。 二.编辑表格和设置表格元素属性 1．编辑表格 （1）调整表格大小 要调整表格尺寸，可以在选定表格后将光标移至表格的边或角的控制点处，然后根据箭头方向拖动鼠标，此时表格中各单元格的尺寸都将按比例进行调整。 （2）调整行高或列宽 要调整表格中某行的行高或某列的列宽，可以将光标定位在选定行或列的任一单元格中，然后将光标移至该单元格的右侧或下方，当光标变成 或 形状，单击并拖动鼠标即可调整行高或列宽。 （3）插入行或列 要在表格中某行或某列的上下或两侧插入行或列，可以使用如下的方法： ? ①先选择表格中的某行或某列，然后单击“插入”面板的“布局”选项组，然后单击插入行或插入列等相应的按钮。 ? ②先将光标定位在该行或该列的任意单元格中，然后执行“插入”→ “表格对象”命令，在二级菜单中单击相应的命令选择插入的行或列出现的位置。 （4）删除行或列 如要删除表格中的某行或某列，可以先选择该行或该列，然后单击鼠标右键，在弹出的快捷菜单中执行“表格”→ “删除行”或“删除列”命令即可。 2．设置表格元素属性 通过设置表格的属性，可以有效改变表格的外观，从而充分发挥表格在页面布局中所起的作用。在Dreamweaver中，选择整个表格后，表格属性面板如图所示： 三.复杂表格的制作 1．制作嵌套表格 要制作嵌套表格需要将光标定位在外层表格的某个单元格内，然后插入表格即可。 2．制作细线表格 制作细线表格，具体操作步骤如下： ①将光标定位在页面中需要插入细线表格的位置，单击插入“表格”按钮 ，弹出 “表格”设置对话框。 ②在对话框中设置插入表格的属性，各参数的值如图所示，“行数”、“列”和“表格宽度”根据具体情况设定。 ③单击“确定”按钮，在页面的相应位置即可插入一个“边框粗细”为0像素，“单元格边距”为0像素、“单元格间距”均为1像素的表格。 ④选择整个表格，设置整个表格的背景颜色为细线的颜色，方法为：切换到代码视图下，在表格的起始标签 “table” 中添加属性代码“bgcolor=#000000” 。 ⑤切换到设计视图下，设置表格中所有单元格的背景颜色，方法为：选择所有单元格，单击“属性”面板 中的“背景颜色”按钮，在颜色拾取器中选择白色。 任务2 使用框架布局制作页面 任务导入 要求使用框架布局玫瑰园餐饮公司的内容页面，单击页面左侧栏目中菜肴名称，可以在页面右侧显示该菜肴的详细信息，效果如图所示，该任务的重点是框架集和框架的保存以及设置框架之间的链接。 知识指导 一．认识框架和框架集 1. 框架：框架是浏览器窗口中的一个区域，在每个框架中可以输入文本、插入图片或者显示一个独立的网页文件，通过使用框架可以在一个浏览器窗口同时显示多个网页内容。 2. 框架集：当一个页面被划分成多个框架后，系统会自动建立一个框架集，即生成一个HTML文件，在框架集中定义了一组框架的布局和属性，包括框架的数目、框架的大小、位置和每个框架中初始显示的页面地址。框架集只向浏览器提供如何显示一组框架以及在这些