最新第7章表 格幻灯片.ppt

《最新第7章表 格幻灯片.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第7章表格本章学习内容7.1案例1设计学生成绩单7.2学习任务：表格标签7.3案例2使用表格布局“图书资源网”7.4案例3设计“旅游信息网”7.5实训《网页设计与制作案例教程》（第2版）7.1案例1设计学生成绩单学习目标：通过案例学习，能够熟练掌握创建表格、设置表格的属性、编辑表格等操作，为熟练地使用表格布局网页打下基础。知识要点：创建表格；表格的属性设置；选择表格或表格单元格；插入、删除行和列；表格的拆分和合并等。案例效果如图7-1所示。《网页设计与制作案例教程》（第2版）7.1案例1设计学生成绩单创建表格时，打开的“表格”对话框如图7-3

2、所示。图7-3“表格”对话框《网页设计与制作案例教程》（第2版）7.1案例1设计学生成绩单“表格”对话框中各项含义：行数：设置表格的行数。列数：设置表格的列数。表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。边框粗细：设置表格边框的宽度（以像素为单位）。若希望浏览器不显示边框，可将其值设置为0像素。单元格边距：用于设置单元格内容与单元格边框之间的像素数。《网页设计与制作案例教程》（第2版）7.1案例1设计学生成绩单单元格间距：用于设置相邻的表格单元格之间的像素数。“标题”栏：用于设置表格标题的样式。“无”对表格不启用列或行标

3、题；“左”将表格的第一列作为标题列；“顶部”将表格的第一行作为标题行；“两者”能够在表格中输入列标题和行标题。“辅导功能”栏：其中的“标题”用于设置显示在表格外的表格标题；“摘要”给出对表格的内容摘要，屏幕阅读器可以读取摘要文本，但是该文本不会显示在用户的浏览器中。《网页设计与制作案例教程》（第2版）7.1案例1设计学生成绩单7.1.2设置表格属性表格“属性”面板如图7-5所示。图7-5表格“属性”面板表格“属性”面板中主要参数含义：“表格”下拉列表框：用于输入表格的ID标识，以方便脚本引用该表格。行、列：用于显示并设置表格中行数、列数。《网

4、页设计与制作案例教程》（第2版）7.1案例1设计学生成绩单宽：以像素为单位或按浏览器窗口宽度的百分比指定表格的宽度。填充：也称单元格边距，是单元格内容和单元格边框之间的像素数。对于大多数浏览器来说，此选项的值设为1px。如果用表格进行页面布局时，可将此参数设置为0。间距：也称单元格间距，设置相邻的表格单元格间的像素数。对齐：设置表格在网页中的对齐方式，可以选择“默认”、“左对齐”、“居中对齐”和“右对齐”方式。边框：以像素为单位设置表格边框的宽度。《网页设计与制作案例教程》（第2版）7.1案例1设计学生成绩单类：用于选择CSS样式应用于表格。

5、按钮：清除列宽按钮。单击该按钮，可以取消单元格的宽度设置，使其宽度随单元格的内容自动调整。按钮：清除行高按钮。单击该按钮，可以取消单元格的高度设置，使其高度随单元格的内容自动调整。按钮：将表格宽度转换成像素按钮。将表格每列宽度的单位和表格宽度的单位转换成像素。按钮：将表格宽度转换成百分比。将表格每列宽度的单位和表格宽度的单位转换成百分比。《网页设计与制作案例教程》（第2版）7.1案例1设计学生成绩单7.1.3编辑表格1．选择表格单元格选中表格元素是对表格进行编辑的基础。将鼠标指针指向表格中的某个单元格单击，即可选中该单元格；若选择多个单元格，

6、可使用下面的方法完成：选择连续的多个单元格：在需要选择的单元格中单击鼠标，然后按住鼠标左键不放，同时向相邻的单元格方向拖曳，被拖到的单元格出现黑色边框，表示它们被选中。《网页设计与制作案例教程》（第2版）7.1案例1设计学生成绩单选择不连续的多个单元格：按住【Ctrl】键的同时，单击任意个不相邻的单元格，可以选中不相邻的多个单元格。选择整行单元格：将鼠标移到行的最左边，当光标变成一个向右箭头时单击，即可选中整行单元格。选择整列单元格：将鼠标移到列的最上边，当光标变成一个向下箭头时，单击即可选中整列单元格。《网页设计与制作案例教程》（第2版）7

7、.1案例1设计学生成绩单选择表格的所有单元格：选中表格左上角的第1个单元格，按住【Shift】键的同时，将鼠标指针移动到表格右下角最后一个单元格单击，将选中全部的单元格。图7-7激活HTML按钮时的单元格“属性”面板图7-8激活CSS按钮时的单元格“属性”面板《网页设计与制作案例教程》（第2版）7.1案例1设计学生成绩单单元格“属性”面板中各选项含义如下：“单元格”按钮组：用于将选定的单元格进行合并或者拆分操作。单击按钮，将所选的单元格、行或列合并为一个单元格；单击按钮，将一个单元格分成两个或更多个单元格。需要说明的是，一次只能拆分一个单元格

8、；如果选择的单元格多于一个，则此按钮将被禁用。水平：指定单元格、行或列内容的水平对齐方式。可将内容对齐到单元格的左侧、右侧《网页设计与制作案例教程》（第2版）7.1