中职 网页设计与制作案例教程第7章 .pptx

《中职 网页设计与制作案例教程第7章 .pptx》由会员分享，可在线阅读，更多相关《中职 网页设计与制作案例教程第7章 .pptx（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、中职 网页设计与制作案例教程第7章 工信版WEB第7 章 使用CSS 设置表格样式WEB37.1 基础项目1：制作“通讯录”表格7.2 知识库：表格的HTML 标签和常用样式7.3 基础项目2：制作“百度日历”页面7.4 知识库：单元格的合并与拆分7.5 提高项目：制作“NBA 常规赛得分表”页面7.6 拓展项目：制作“热门景点排行榜”页面目录WEB7.1 制作“通讯录”表格4WEB5知识技能目标（1）掌握创建表格的方法。（2）掌握表格HTML标签的意义和用法。（3）初步掌握使用CSS样式美化表格的方法。7.1 制作“通讯录”表格WEB6!在传统的网页设计中表格一直占有比较重要的地位，曾用来对

2、网页进行布局和显示数据，但因为布局繁琐且后期维护成本高，现在已经不常采用，而是多用于显示数据。7.2 知识库：表格的HTML 标签和常用样式77.2.1 表格的HTML 标签 标签对分别表示表格的开始和结束。表格的其他组成元素，如行、单元格等都包含在 标签对之中。表格标签属性 值 描述width%、pixels规定表格的宽度。bor der pixels规定表格边框的宽度。cellspacing pixels、%规定单元格之间的空白。cellpaddingpixels、%规定单元边框与其内容之间的空白。可选的属性及含义8 标签对是表格的行标签。在标签对中有多少 标签对，这个表格就有多少行。tr

3、元素包含一个或多个th 或t d 元素。行标签 7.2.1 表格的HTML 标签9 标签对定义表格中的标准单元格。HTML 表单中有两种类型的单元格：表头单元格：包含表头信息（由th 元素创建）标准单元格：包含数据（由t d 元素创建）单元格标签7.2.1 表格的HTML 标签10 单元格标签7.2.1 表格的HTML 标签 标 签 对 要 包 含 在 和 标 签 对 之 中。一个表格被分为多行，每一行又被分为多个单元格。可选的属性及含义属性 值 描述colspan number规定单元格可横跨的列数。rowspan number规定单元格可横跨的行数。alignleft、right、cent

4、er、justify、char规定单元格内容的水平对齐方式。valigntop、middle、bottom、baseline规定单元格内容的垂直对齐方式。11 标签对定义表格中的表头单元格。在dr eamw eav er 中创建表格时可以选择表头所在的位置（左侧、顶部或两者都有）。标签常用的属性及含义与 相同。表头单元格标签7.2.1 表格的HTML 标签12 标签对用来定义表格标题。caption 标签必须紧随table 标签之后。每个表格只能定义一个标题，通常这个标题会被居中于表格之上。标题标签7.2.1 表格的HTML 标签13 设置表格或单元格的宽度、高度的方法与网页上其它块元素的方法

5、相同，用width 属性设置表格或单元格的宽度，用height 属性设置表格或单元格的高度。设置表格的宽度和高度7.2.2 表格的常用CSS 样式14语法格式：t ext-align:lef t|cent er|r ight;设置表格表格或单元格内容的水平对齐方式7.2.2 表格的常用CSS 样式15语法格式：v er tical-align:middle|t op|bott om;设置单元格内容的垂直对齐方式7.2.2 表格的常用CSS 样式普 通 单 元 格 中 内 容 的 默 认 对 齐 方 式 是 水 平 方 向 左 对 齐、垂直 方 向 居 中；表 头 单 元 格 中 内 容 的 默

6、 认 对 齐 方 式 是 水 平 方 向和垂直方向都居中。16 设置表格或单元格的文字属性和背景属性的方法与前面学过的如DIV、标题标签等其它网页元素的方法相同。设置表格或单元格的文字属性和背景属性7.2.2 表格的常用CSS 样式17语法格式：bor der:bor der-width|bor der-color|bor der-style;设置表格或单元格的边框7.2.2 表格的常用CSS 样式在 设 置 表 格 边 框 时 如 果 只 给 标 签 设 置 边 框 属 性，效 果 是 给 整 个 表 格 设 置 外 边 框，而 各 个 单 元 格 不 受 影 响。如 果 希 望 每 个 单

7、 元 格 都 显 示 边 框，则 要 给 标 签 也 设 置边框属性。只给table 标签设置了边框 只给t d 标签设置了边框18语法格式：bor der-collapse:sep arat e|collapse|inher it;设置表格边框双线合一7.2.2 表格的常用CSS 样式当 使 用 CSS 设 置 单 元 格 边 框 时，如 果 给 每 个 单 元 格 都 设 置宽 度 为 1 像 素 的 边 框，那 么 相 邻 两 个 单 元 格 的 边 框 的 实 际 宽度 是 1p x+1p x=2p x，美 观 程 度 将 受 影 响。此 时 可 以 使 用bor der-collap

8、se 属性将表格相邻的边框双线合一。没有设置双线合一 设置了双线合一197.3 制作“百度日历”页面207.3 制作“百度日历”页面知识技能目标（1）掌握合并单元格、拆分单元格操作的方法。（2）使用CSS样式进一步美化表格的方法。217.3 制作“百度日历”页面制作结构部分227.3 制作“百度日历”页面添加样式部分237.4 知识库：单元格的合并与拆分 在Dreamweaver 中要合并单元格可以先选中2 个或以上的单元格，单击鼠标右键，在弹出的快捷菜单中选择【表格】菜单中的【合并单元格】247.4 知识库：单元格的合并与拆分 拆分单元格先将光标移至要拆分的单元格中，单击鼠标右键，在弹出快捷菜单中选择【表格】菜单中的【拆分单元格】命令，在弹出的对话框中选择需要将单元格拆分成行还是列，然后再输入要拆分的行数或列数，单击【确定】完成操作。也可以在“属性”检查器上进行“合并单元格”和“拆分单元格”的操作。257.5 提高项目：制作“NBA 常规赛得分表”页面267.6 拓展项目：制作“热门景点排行榜”页面WEB