5.2特殊表格的制作(课件）-高二《网页设计与制作》同步教学（北京理工版）

任务二　特殊表格的制作　 一、细线表格的制作 在设置表格边框时， 即使将表格的边框设置为“１”， 其边框还是有些粗的。 那么如何制作出更细表格线的表格呢? 下面将介绍制作细线表格的方法。 １) 在网页中， 选择如图５ －７ 所示表格。 ２) 在“属性” 面板的“表格” 框中输入“Ｎａｖ”， 在“填充” 和“边框” 文本框中输入“０”， 在“间距” 文本框中输入“１”， 如图５ －８ 所示。 ３) 选择表格， 执行菜单“窗口” → “ＣＳＳ 样式” 命令， 打开“ＣＳＳ 样式” 面板，单击面板下方的 按钮， 出现如图５ － ９ 所示的“新建ＣＳＳ 规则” 对话框， 单击“确定” 按钮。 下一页 返回 任务二　特殊表格的制作　 ４) 弹出如图５ － １０ 所示的“＃Ｎａｖ 的ＣＳＳ 规则定义” 对话框， 在“分类” 栏中的“背景” 选项卡中设置“Ｂａｃｋｇｒｏｕｎｄ － ｃｏｌｏｒ” 为“＃０００”， 设置完成， 单击“确定” 按钮。 ５) 选择表格中的所有单元格， 在单元格属性面板的“背景颜色” 选项卡中输入“＃ＦＦＦ”， 将单元格背景色设置为白色， 保存， 按Ｆ１２ 键浏览页面， 效果如图５ －１１ 所示。 二、外框线表格的制作 １) 在网页中， 选择如图５ －７ 所示的表格。 ２) 在属性面板中“表格” 名称框中输入“Ｎａｖ”， 在“填充” “边框” 和“间距” 文本框中输入“０”。 上一页 下一页 返回 任务二　特殊表格的制作　 ３) 选择表格， 执行菜单“窗口” → “ＣＳＳ 样式” 命令， 打开“ＣＳＳ 样式” 面板， 单击面板下方的 按钮， 出现如图５ － １２ 所示的“新建ＣＳＳ 规则” 对话框， 单击“确定”按钮。 ４) 弹出“＃Ｎａｖ 的ＣＳＳ 规则定义” 对话框， 在“分类” 栏的“边框” 选项卡中设置“Ｓｔｙｌｅ” “Ｗｉｄｔｈ” 和“Ｃｏｌｏｒ”， 如图５ － １２所示， 设置完成后， 单击“确定” 按钮。 ５) 保存网页， 按Ｆ１２ 键浏览页面， 效果如图５ －１４ 所示。 上一页 下一页 返回 任务二　特殊表格的制作　 三、利用表格制作水平线/ 垂直线 有时为了页面的美观， 需要在页面的适当位置设置一些水平线或垂直线， 但系统里提供的水平线往往达不到页面的具体需求， 且系统没有提供垂直线， 这时就可以利用表格的功能来制作它们。 利用表格制作水平线的方法如下: １) 在网页文档的适当位置插入一个１ 行１ 列的表格， 宽度为５００ 像素， 在“表格”属性面板的“表格” 名称框中输入“Ｎａｖ”， 在“填充” “边框” 和“间距” 文本框中输入“０”。 ２) 应用上面制作细线表格的方法， 将表格背景色“Ｂａｃｋｇｒｏｕｎｄ － ｃｏｌｏｒ” 设置为黑色。 上一页 下一页 返回 任务二　特殊表格的制作　 ３) 在代码视图中， 将光标定位到< ｔａｂｌｅ > 标签中， 设置高度“ｈｅｉｇｈｔ” 为１， 代码如下: < table height = ″1″ width = ″600″ border = ″0″ cellpadding = ″0″ cellspac￣ing = ″0″ id = ″Nav″ > ４) 选中表格， 在代码视图中， 将代码“ < ｔｈ > ＆ｎｂｓｐ,< ＼ ｔｈ > ” 中的空格“＆ｎｂｓｐꎻ” 去掉。 ５) 保存， 按Ｆ１２ 键浏览该网页， 效果如图５ －１５ 所示。 同理， 制作垂直线只需要将表格宽度设置为１ 像素， 高度设置为５００ 像素即可。 上一页 下一页 返回 任务二　特殊表格的制作　 四、立体导航栏的制作 在网页设计中为了使页面生动美观， 许多设计者喜欢把导航栏制作成立体效果。 利用表格颜色的设置同样可以制作出导航栏的立体感， 也就是立体导航栏。 制作立体导航栏的方法如下: １) 新建一个空白网页， 将光标定位在需要插入表格的位置， 插入一个１ 行７ 列、宽为８００ 像素的表格。 选中单元格， 在属性面板中将“水平” 文本框设置为“居中对齐”，添加如图５ －１６ 所示的文本。 ２) 在“表格” 属性面板的“表格” 名称框中输入“Ｎａｖ”， 在“边框” 文本中输入“１”， 在“填充” 和“间距” 文本框中输入“０”。 上一页 下一页 返回 任务二　特殊表格的制作　 ３) 选择该表格， 执行菜单“窗口” → “ＣＳＳ 样式” 命令， 打开“ＣＳＳ 样式” 面板，单击面板下方的 按钮， 出现如图５ － １７ 所示的“新建ＣＳＳ 规则” 对话框， 单击“确定” 按钮。 ４) 在“分类” 栏的“背景” 选项卡中设置“Ｂａｃｋｇｒｏｕｎｄ － ｃｏｌｏｒ” 为“＃００ｃｃｆｆ”， 如图５ －１８ 所示。 ５) 同理， 设置“分类” 栏中的“边框