《网页设计与制作》课件-项目三 任务二 嵌套表格布局复杂页面_第1页
《网页设计与制作》课件-项目三 任务二 嵌套表格布局复杂页面_第2页
《网页设计与制作》课件-项目三 任务二 嵌套表格布局复杂页面_第3页
《网页设计与制作》课件-项目三 任务二 嵌套表格布局复杂页面_第4页
《网页设计与制作》课件-项目三 任务二 嵌套表格布局复杂页面_第5页
已阅读5页，还剩16页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Dreamweaver网页制作基础教程项目三制作学校新闻

任务二嵌套表格布局复杂页面任务描述利用表格对校园网的新闻列表页面进行布局，要求美观，并在布局的合适位置填上恰当的文字和图片。制作后的效果如图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在t2上面的单元格内插入一个一行两列的表格，设定ID为t21。填充、间距、边框为0。设定t21左侧单元格背景为“pic/项目3/images/index_r2_c1.jpg”，设置t21右侧单元格背景为“pic/项目3/images/index_r2_c7.jpg”。设置t2下面的单元格背景为“pic/项目3/images/index_r3_c1.jpg”。适当调整各单元格的宽度及高度，使表格t2美观，能显示完整的背景，但又没有空白或图像重复。设置的效果如图3.2.4所示。图3.2.4表格t2效果图步骤3：在表格t2下面插入表格，设置ID为t3。t3参数：宽1000，居中对齐，一行两列，填充0，间距1，边框0。左侧单元格宽198px，背景色#0099FF。在t3左侧单元格内插入四行一列的表格，设置ID为t31。t31参数：宽100%，自动以100%的宽度填充到上一级单元格，以下100%的宽度均为自动填充到上一级单元格，填充0，边框0，间距1。每个单元格的背景色均为#EEF7FF。在第一个单元格与第三个单元格内分别输入“栏目导航”与“点击排行”，并根据需要设置字体的大小、位置及背景图片，如图3.2.5所示。在t3左侧单元格内再插入表格或文字，完成效果如图3.2.6所示。图3.2.5图3.2.6左侧导航效果步骤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种已定义好的颜色名称，参见文本颜色。单元格边框的颜色属性与表格的相同，但只适用于IE。下面是一个宽为300，高为80，边框宽为4，边框颜色为“FF0000”的一行两列表格，其中第一个单元格的宽为200，高为80；第二个单元格的边框颜色为“0000FF”。5．表格及单元格的颜色表格及单元格均可设置背景色和背景图片。背景色属性：bgcolor="#"。背景图片属性：background="#"。代码如下：<tablewidth="450"border="1"bgcolor="#539996"bordercolor="#FFFFFF"height="90"><tr><td></td><tdbackground="Back01.gif"></td></tr><tr><td></td><td></td></tr><tr><tdbgcolor="#FF0000"></td><td></td></tr></table>6．单元格内的位置属性水平对齐方式，用align="#"属性说明，#号可以为left（左对齐）、right（右对齐）、center（居中）。垂直对齐方式，用valign="#"属性说明，#号可以为top（上对齐）、bottom（下对齐）、middle（居中）。注意单元格里的内容与边框的位置关系，如图3.2.13至图3.2.15所示。设置单元格的水平属性设置单元格的垂直属性图3.2.14单元格水平对齐代码图3.2.15单元格垂直对齐代码在实际的应用过程中，一般水平对齐和垂直对齐两种方式会同时使用，以满足不同的布局模式。任务总结通过这个任务，可以锻炼对复杂布局的掌控。对于表格各组成代码和标签的掌握是进行布局的关键。表格布局是一种传统的布局方式，对于简单的布局使用表格布局往往可以高效地完成任务。但对于复杂的布局来说，往往采用CSS+Div的格式更恰当。使用表格的布局方式往往会产生更多的代码，程序的易读性差。采用CSS+Div方式虽然产生的代码量比较少，但在设计时往往需要精确的计算和构思。

课后习题1．合并后的单元格，其中各单元格中的内容将（）。A．会被删除 B．不会被删除 C．被合并 D．不会被合并2．表格在网页中通常的存在形式是（）。A．以独立的形式存在 B．以隐藏的形式存在C．以压缩的形式存在 D．以嵌套的形式存在3．阅读以下的HTML代码，描述正确的是（）。 <html><head><title>表格</title><head><body><tableborder="1"><tr><t

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论