《网页制作项目实训教程》 课件 项目3 使用表格排版网页；项目4 制作包含表单的网页.pptx

项目3使用表格排版网页由浅入深简章易懂贴近实际WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《网页制作项目实训教程》重庆大学出版社

CONTENTS任务1使用表格制作简单校园新闻网页任务2使用表格布局电子商务系新闻主页

任务1使用表格制作简单校园新闻网页本任务可以分解为2个活动：表格基本操作；使用表格制作新闻网页。

活动1表格基本操作1-1如下图所示，使用表格完成比赛成绩表的制作。活动要求

活动1表格基本操作1-11、表格的构成表格最基本的单位是单元格，由单元格组成行和列。单元格之间的间隔称为单元格间距；单元格内容与单元格边框之间的间隔称为单元格边距（或填充）。表格边框有明暗之分，可以设置粗细、颜色等属性。单元格边框也有明暗之分，可以设置颜色，但不可设置粗细属性。如下图所示是一个5行5列的表格。知识窗单元格行列单元格填充表格边框单元格间距框单元格边框

活动1表格基本操作1-12、表格的属性如下图所示，下面对表格“属性”面板中的相关参数进行说明：ID：指定表格的ID，以便在脚本中引用该表格。行：指定表格中的行数。列：指定表格中的列数。宽：指定表格的宽度。可选择单位为像素，或占浏览器窗口宽度的百分比。填充：指定单元格内容与单元格边框间的距离。单位为像素。间距：指定相邻单元格间的间隔。单位为像素。对齐：选择表格相对于同一段落中的其他元素的显示位置。边框：指定表格边框的宽度。单位为像素。类：对该表格应用CSS类。清除列宽：从表格中删除所有明确指定的列宽。清除行高：从表格中删除所有明确指定的行高。将表格宽度转换成像素：将表格中每列的宽度和整个表格的宽度都设为以像素为单位。将表格宽度转换成百分比：将表格中每列的宽度和整个表格的宽度都设为以百分比为单位。ID清除列宽将表格宽度转换成像素对齐类清除行高将表格宽度转换成百分比

活动1表格基本操作1-13、表格的编辑（1）选择表格选择整个表格主要有以下几种操作方法。单击表格左上角或单击表格中任一个单元格的边框，如下方左图所示。将光标移到表格内，单击文档窗口左下角的标签“table”，如上方右图所示。选择表格的行（或列）把光标放在需要选择的行左边（或列上方）时，光标变成黑色箭头，单击鼠标左键，选中该行（或列），如下图所示。

活动1表格基本操作1-1（2）合并与拆分单元格合并单元格选择要合并的几个单元格后，可以采取以下几种方法进行合并单元格操作。单击鼠标右键，在弹出的菜单中选择“表格”栏下的“合并单元格”选项，如下方左图所示。单击“属性”面板左下角“合并单元格”按钮，如下方右图所示。拆分单元格选择要拆分的单元格后，可以采取以下几种方法进行拆分操作。单击鼠标右键，在弹出的菜单中选择“表格”栏下的“拆分单元格”选项，如下方左图所示。单击“属性”面板左下角“拆分单元格”按钮，如下方右图所示。

活动1表格基本操作1-1（3）增加或删除行（或列）增加行（或列）把光标移到需要增加行（或列）的下面（右侧）后，有以下几种方法增加行（或列）：点击鼠标右键，在弹出的菜单中选择“表格”栏下的“插入行（或列）”选项，如下方左图所示。选择“修改”菜单栏下的“表格”选项，选择“插入行（或列）”选项。删除行（或列）把光标移到需要删除的行（或列）后，有以下几种方法删除该行（或列）：点击鼠标右键，在弹出的菜单中选择“表格”栏下的“删除行（或列）”选项，如上方右图所示。选择“修改”菜单栏下的“表格”选项，选择“删除行（或列）”选项。

活动1表格基本操作1-1详细操作步骤请参阅教材。活动实施表格的基本操作类似于Word文档中表格的操作，有基础的同学会很快熟悉，但是都需要多操作多练习。活动评价

活动2使用表格制作简单新闻网页1-21、新建一个网页文件，按要求插入表格。2、把素材中的文字、图片合理布局到网页中，并将网页文件以“task3-1-2.html”为文件名保存到“项目3”站点根目录下，最终效果如下图所示。活动要求

活动2使用表格制作简单新闻网页1-2单元格的属性如下图所示，下面对单元格“属性”面板中的相关参数进行说明：类：对该单元格应用CSS类。ID：指定单元格的ID，以便在脚本中引用该单元格。链接：指定单元格内对象的超链接地址。目标：指定链接对象打开的位置。水平：设置单元格内容在水平方向上的对齐方式。垂直：设置单元格内容在垂直方向上的对齐方式。宽和高：设置被选择单元格的宽和高。不换行：防止换行，从而使给定单元格中的所