ID: 17318865

5.2特殊表格的制作课件(共28张PPT)-中职《网页设计与制作》同步教学(北京理工版)

日期:2025-04-22 科目: 类型:课件 查看:66次 大小:5385176B 来源:二一课件通
预览图 1/9
中职,理工,北京,教学,同步,网页设计与制作
  • cover
(课件网) 任务二 特殊表格的制作  一、细线表格的制作 在设置表格边框时, 即使将表格的边框设置为“1”, 其边框还是有些粗的。 那么如何制作出更细表格线的表格呢 下面将介绍制作细线表格的方法。 1) 在网页中, 选择如图5 -7 所示表格。 2) 在“属性” 面板的“表格” 框中输入“Nav”, 在“填充” 和“边框” 文本框中输入“0”, 在“间距” 文本框中输入“1”, 如图5 -8 所示。 3) 选择表格, 执行菜单“窗口” → “CSS 样式” 命令, 打开“CSS 样式” 面板,单击面板下方的 按钮, 出现如图5 - 9 所示的“新建CSS 规则” 对话框, 单击“确定” 按钮。 下一页 返回 任务二 特殊表格的制作  4) 弹出如图5 - 10 所示的“#Nav 的CSS 规则定义” 对话框, 在“分类” 栏中的“背景” 选项卡中设置“Background - color” 为“#000”, 设置完成, 单击“确定” 按钮。 5) 选择表格中的所有单元格, 在单元格属性面板的“背景颜色” 选项卡中输入“#FFF”, 将单元格背景色设置为白色, 保存, 按F12 键浏览页面, 效果如图5 -11 所示。 二、外框线表格的制作 1) 在网页中, 选择如图5 -7 所示的表格。 2) 在属性面板中“表格” 名称框中输入“Nav”, 在“填充” “边框” 和“间距” 文本框中输入“0”。 上一页 下一页 返回 任务二 特殊表格的制作  3) 选择表格, 执行菜单“窗口” → “CSS 样式” 命令, 打开“CSS 样式” 面板, 单击面板下方的 按钮, 出现如图5 - 12 所示的“新建CSS 规则” 对话框, 单击“确定”按钮。 4) 弹出“#Nav 的CSS 规则定义” 对话框, 在“分类” 栏的“边框” 选项卡中设置“Style” “Width” 和“Color”, 如图5 - 12所示, 设置完成后, 单击“确定” 按钮。 5) 保存网页, 按F12 键浏览页面, 效果如图5 -14 所示。 上一页 下一页 返回 任务二 特殊表格的制作  三、利用表格制作水平线/ 垂直线 有时为了页面的美观, 需要在页面的适当位置设置一些水平线或垂直线, 但系统里提供的水平线往往达不到页面的具体需求, 且系统没有提供垂直线, 这时就可以利用表格的功能来制作它们。 利用表格制作水平线的方法如下: 1) 在网页文档的适当位置插入一个1 行1 列的表格, 宽度为500 像素, 在“表格”属性面板的“表格” 名称框中输入“Nav”, 在“填充” “边框” 和“间距” 文本框中输入“0”。 2) 应用上面制作细线表格的方法, 将表格背景色“Background - color” 设置为黑色。 上一页 下一页 返回 任务二 特殊表格的制作  3) 在代码视图中, 将光标定位到< table > 标签中, 设置高度“height” 为1, 代码如下: < table height = ″1″ width = ″600″ border = ″0″ cellpadding = ″0″ cellspac ̄ing = ″0″ id = ″Nav″ > 4) 选中表格, 在代码视图中, 将代码“ < th > &nbsp,< \ th > ” 中的空格“&nbsp ” 去掉。 5) 保存, 按F12 键浏览该网页, 效果如图5 -15 所示。 同理, 制作垂直线只需要将表格宽度设置为1 像素, 高度设置为500 像素即可。 上一页 下一页 返回 任务二 特殊表格的制作  四、立体导航栏的制作 在网页设计中为了使页面生动美观, 许多设计者喜欢把导航栏制作成立体效果。 利用表格颜色的设置同样可以制作出导航栏的立体感, 也就是立体导航栏。 制作立体导航栏的方法如下: 1) 新建一个空白网页, 将光标定位在需要插入表格的位置, 插入一个1 行7 列 ... ...

~~ 您好,已阅读到文档的结尾了 ~~