Dreamweaver网页制作基础教程任务二嵌套表格布局复杂页面教程文件.pptVIP

王焕杰 电话 邮箱:cnsyjsj@163.com 沈阳市信息工程学校 项目三 制作学校新闻 任务二 嵌套表格布局复杂页面 任务描述 利用表格对校园网的新闻列表页面进行布局，要求美观，并在布局的合适位置填上恰当的文字和图片。制作后的效果如图3.2.1所示。 图3.2.1 网页效果图 知识准备 表格和单元格有很多属性，其中有很多是相同或相似的。表格的最基本标记为table、tr、td。一般描述整个表格的属性标记放在table里，描述单元格的属性标记放在tr、td里。常用的属性包括表格的位置、表格边框的粗细及颜色、单元格的间距、表格和单元格的大小、表格及单元格的背景颜色、单元格元素的对齐方式等。 任务实施 步骤1：新建一个网页，保存为list.html。 步骤2：插入一个一行一列的表格，设置表格属性，填充、边框、间距均为0，居中对齐，在单元格内插入图片“pic/项目3/images/index_r1_c1.jpg”，效果如图3.2.2所示。 图3.2.2 网页顶部 在表格1下面插入第2个表格，设置表格属性，二行一列，填充、边框、间距均为0,宽度1000，居中对齐。设定表格ID为t2，如图3.2.3所示。 图3.2.3 设置表格ID 步骤4：设置t3右侧单元格垂直对齐方式为顶端对齐。在t3右侧单元格内插入一个一行一列的表格，ID设置为t32，宽度参数为100%，填充0，间距0，边框1，边框颜色#0099FF。 步骤5：在t32表格中插入一个六行两列的表格，ID值为t321。宽度参数设置为100%，填充0，间距0，边框0。合并t32表格中第一行的两个单元格，如图3.2.7所示。 图3.2.7 网页设计视图 设置合并后的单元格背景图片为“pic/项目3/images/list_r2_c4.jpg”，高度为34。 设置t32表格中第二行右侧单元格宽度为15，设置t32表格中第二行左侧单元格的背景图片为“pic/项目3/images/list_r6_c5.jpg”，单元格高度为28。 设置t32表格中第三行左侧单元格的背景图片为“pic/项目3/images/xuXian.jpg”，高度为38，效果如图3.2.8所示。 图3.2.8 设置背景图片 分别设置其他单元格，在单元格内插入表格及文字，调整单元格的大小及文字的格式。最终效果如图3.2.9所示。 图3.2.9 网页效果图 步骤6：在t3表格的下面插入一行两列的表格，ID为t4。宽1006，填充0，间距0，边框0。设置t3中第二行单元格的背景图片为“pic/项目3/images/index_r20_c2.jpg”。 步骤7：对照效果图完成网页中的其他部分。 知识拓展 表格的属性 1．表格的位置属性 表格的水平摆放位置用align=#属性来说明，#号可为left（左对齐）、right（右对齐）、center（居中）。分别如图3.2.10至图3.2.12所示。 可以在此处直接选择表格的对齐方式，也可以通过代码窗口直接输入HTML代码 图3.2.10 表格左对齐 图3.2.11 表格居中对齐 图3.2.12 表格右对齐 2．边框的粗细及颜色 Border属性用来设置边框的粗细，border=1为最小值。在视觉上当边框设为1时，往往并不会得到理想的效果。为了获得更理想的效果，一般可以通过设置td标签的CSS样式表来实现。 Bordercolor属性用来设置边框的颜色，颜色采用6位十六进制数来表示。前面加“#”，前面两位代表红色的比重，中间两位代表绿色的比重，最后两位代表蓝色的比重。颜色的最后效果按光的三原色原理计算。#000000为黑色，#FFFFFF为白色。 3．单元格间的间距 单元格间的间距由表格属性cellspacing、cellpadding共同控制。 cellspacing属性用来指定表格内各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。 cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。此属性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占的像素点数，以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。 4．表格、单元格的大小 表格及单元格的大小用“width=#”和“height=#”属性说明，“width=#”表示宽，“height=#”表示高，#是以像素或百分比为单位的数字。表格边框的宽度用“border=#”属性说明，#为宽度值，单位是像素。表格边框的颜色用“bordercolor=#”属性说明，#是十六进制的6位数，格式为rrggbb，分别表示红、 绿、兰三色的分量；或者是16种已定义好的颜色名称，参见