中职高教版《网页设计与制作任务驱动教程》5.3创建包含一个4行3列表格的网页课件

1 单元5 制作包含列表和表格的网页 【任务5-3】创建包含一个4行3列表格的网页 《网页设计与制作任务驱动教程（第3版）》 1 2 【任务描述】 【任务5-3】创建包含一个4行3列表格 的网页 （1）创建样式文件main.css，在该样式文件中定义标签的属性、类选择符及其属性。 （2）创建网页文档0503.html，且链接外部样式文件和main.css。 《网页设计与制作任务驱动教程（第3版）》 3 （3）在网页0503.html中添加必要的HTML标签、插入表格和输入文字。 （4）网页0503.html的浏览效果如图5-9所示，该网页包含一个4行3列的表格。 图5-9 网页0503.html的浏览效果 《网页设计与制作任务驱动教程（第3版）》 4 【任务实施】 （1）创建文件夹与网页 在站点“单元5”中创建文件夹“task05-3”，在该文件夹中创建子文件夹“CSS”。在文件夹“task05-3”中创建网页文档0503.html， 《网页设计与制作任务驱动教程（第3版）》 5 （2）编写网页主体布局结构的HTML代码 打开网页0503.html的【代码】窗口，将光标置于<body></body>之间，然后在【插入】菜单中选择【结构】-【章节】菜单项，打开【插入Section】对话框，单击【确定】即可插入标签<section></section>，然后设置标签<section>的id值为“content”，代码如下所示。 <section id="content"></section > 《网页设计与制作任务驱动教程（第3版）》 5 6 （3）通过“表格”对话框插入4行3列表格 将光标置于<section id="content">与</section >之间，在Dreamweaver CC主界面中，选择命令【插入】→【表格】，弹出【表格】对话框。 ① 在【表格】对话框“行数”文本框中输入“4”，在“列数”文本框中输入“3”。 ② 在“表格宽度”文本框输入“40”，其后的下拉列表框中选择宽度的单位为“百分比”。 《网页设计与制作任务驱动教程（第3版）》 7 ③ 在“边框粗细”文本框中指定表格边框的宽度，默认值为0，单位为“像素”。如果在浏览器中浏览时不显示表格边框，将“边框粗细”设置为0。这里为了便识别表格边框，暂设置边框宽度为1，以后再设置为0。其他参数暂保持其默认值不变。 ④ 在“单元格边距”文本框中指定单元格边距大小，默认值为5。这里设置为1。 ⑤ 在“单元格间距”文本框中指定单元格间距大小，默认值为0，这里保持默认值不变。 《网页设计与制作任务驱动教程（第3版）》 8 ⑦ 在“标题”区域选择“顶部”形式的标题。 【表格】对话框设置完成后如图5-10所示。 图5-10 【表格】对话框 《网页设计与制作任务驱动教程（第3版）》 9 ⑧ 设置完成后在【表格】对话框单击【确定】按钮，一个4行3列的表格便插入到网页中。网页0503.html中所插入表格的初始HTML代码如表5-7所示。 表5-7 网页0503.html中所插入表格的初始HTML代码 序号 HTML代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 <table width="40%" border="1" cellspacing="0" cellpadding="1"> <tr> <th scope="col">&nbsp;</th> <th scope="col">&nbsp;</th> <th scope="col">&nbsp;</th> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> 《网页设计与制作任务驱动教程（第3版）》 10 ⑨ 保存网页0503.html中所插入的表格，该表格的浏览效果如图5-11所示。 图5-11 网页0503.html中所插入表格的初始浏览效果 《网页设计与制作任务驱动教程（第3版）》 11 （4）设置网页0503.html中表格的属性 ① 选择网页0503.html中所插入的表格 用鼠标指针指向表格边框线，当鼠标光标变为形状