第4章 网页布局与插入图像

《第4章 网页布局与插入图像》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、章名第4章网页布局与插入图像网页的整体布局非常重要，这是基于两方面的原因：一方面主页的整体布局，将给人带来整体视觉上的感受；另一方面浏览器本身的定位能力差，常常出现在设计阶段似乎较好的界面，程序一运行界面就乱了的情况，这就是由于没有用布局方法限制各控件位置的结果。同样，网页中的图像对提高生动性，增强网页吸引力方面能够发挥很大的作用，在Web的界面设计中占有重要的位置。围绕这两个问题本章将讲述以下几个问题：n网页布局n插入图像n编辑图像4.1网页布局4.1.1布局的基本概念传统的布局方法是利用表格的定位、对齐等功能来对网页进行布局。首先将网

2、页划分成几个部分，以决定表格的行数和列数，然后创建表格并在表格的各单元格中放置各种网页元素。虽然对表格的大小随时可以进行调整，行列之间也可以拆分和归并，但是在布局设计中仍然会出现顾此失彼的感觉。要想成为一个布局高手，非常不容易。后来，又出现了层和摸板，使布局更为灵活，层的重点是在局部上，而摸板的重点则在整体规划上。巧妙地将三者结合才是网页布局的最佳方案。4.1.2表格和图层一、表格1．表格的作用表格可以用于布局，但更多的时候是用于组织数据，如通讯录、课程表、列车时刻表等大都采用表格的形式。将数据或图形放在表格中将显得更有规律，更有利于对照

3、和比较。2．表格的创建一张表格由行（rows）、列（columns）、单元格（cells）三部分组成。创建表格实际上就是创建表格的行、列和单元格。1)用HTML语言创建表格创建表格的语句是：

4、t。(2)BACKGROUND：指定用作表格背景图片的URL地址。(3)BGCOLOR：指定表格的背景颜色。(4)BORDER：指定表格边框的宽度，以像素为单位。如果省略该属性，则默认值为0。(5)BORDERCOLOR：指定表格边框颜色，应与BORDER属性一起使用。(6)BORDERCOLORDARK：指定3D边框的阴影颜色，应与BORDER属性一起使用。(7)BORDERCOLORLIGHT：指定3D边框的高亮显示颜色，与BORDER属性一起用。(8)CELLPADDING：指定单元格内数据与单元格边框之间的间距，以像素为单位。(9

5、)CELLSPACING：指定单元格之间的间距，以像素为单位。(10)WIDTH：指定表格的宽度，以像素或百分比为单位。例如：一次特快列车时刻表站名到站时刻开车时刻北京西-16.0石家庄

6、td>18.569.08郑州0.010.14武昌6.426.54岳阳9.299.35长沙11.20---上述HTML语句对应的表格如下图4.1所示。–9–章名图4.1列车时刻表可通过TR标记的下

7、列属性对指定行的格式进行设置：(1)ALIGN：指定行中单元格的水平对齐方式，取值为left（默认值）、center或right。(2)BACKGROUND：给出图像文件的URL，该图像用作指定行的背景。(3)BGCOLOR：指定行的背景颜色。(4)BORDERCOLOR：指定行的边框颜色，该属性只有当TABLE标记的BORDER属性取非零值时才起作用。(5)BORDERCOLORDARK：指定行的3D边框的阴影颜色，该属性只有当TABLE标记的BORDER属性取非零值时才起作用。(6)BORDERCOLORLIGHT：指定行的3D边框的

8、高亮颜色，该属性只有当TABLE标记的BORDER属性取非零值时才起作用。(7)VALIGN：指定行中单元格内容的垂直对齐方式，该属性的取值可以是top（顶端对齐）、middle（居中对齐）、