网页设计与制作任务驱动教程全套配套课件第3版陈承欢电子资源0503【任务5-3】创建包含一个4行3列表格的网页.pptxVIP

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