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

章名第4章 网页布局与插入图像网页的整体布局非常重要，这是基于两方面的原因：一方面主页的整体布局，将给人带来整体视觉上的感受；另一方面浏览器本身的定位能力差，常常出现在设计阶段似乎较好的界面，程序一运行界面就乱了的情况，这就是由于没有用布局方法限制各控件位置的结果。同样，网页中的图像对提高生动性，增强网页吸引力方面能够发挥很大的作用，在Web的界面设计中占有重要的位置。围绕这两个问题本章将讲述以下几个问题：n 网页布局n 插入图像n 编辑图像4.1 网页布局4.1.1 布局的基本概念传统的布局方法是利用表格的定位、对齐等功能来对网页进行布局。首先将网页划分成几个部分，以决定表格的行数和列数，然后创建表格并在表格的各单元格中放置各种网页元素。虽然对表格的大小随时可以进行调整，行列之间也可以拆分和归并，但是在布局设计中仍然会出现顾此失彼的感觉。要想成为一个布局高手，非常不容易。后来，又出现了层和摸板，使布局更为灵活，层的重点是在局部上，而摸板的重点则在整体规划上。巧妙地将三者结合才是网页布局的最佳方案。4.1.2 表格和图层一、表格1表格的作用表格可以用于布局，但更多的时候是用于组织数据，如通讯录、课程表、列车时刻表等大都采用表格的形式。将数据或图形放在表格中将显得更有规律，更有利于对照和比较。2表格的创建一张表格由行（rows）、列（columns）、单元格（cells）三部分组成。创建表格实际上就是创建表格的行、列和单元格。1) 用HTML语言创建表格创建表格的语句是： 创建表格的标题是： 创建行的语句是： 创建栏名的语句是： 创建单元格的语句是：可通过TABLE标记的下列属性对表格的格式进行设置：(1) ALIGN：指定表格的对齐方式，取值可以是left（默认值）、center或right。(2) BACKGROUND：指定用作表格背景图片的URL地址。(3) BGCOLOR：指定表格的背景颜色。(4) BORDER：指定表格边框的宽度，以像素为单位。如果省略该属性，则默认值为0。(5) BORDERCOLOR：指定表格边框颜色，应与BORDER属性一起使用。(6) BORDERCOLORDARK：指定3D边框的阴影颜色，应与BORDER属性一起使用。(7) BORDERCOLORLIGHT：指定3D边框的高亮显示颜色，与BORDER属性一起用。(8) CELLPADDING：指定单元格内数据与单元格边框之间的间距，以像素为单位。(9) CELLSPACING：指定单元格之间的间距，以像素为单位。(10) WIDTH：指定表格的宽度，以像素或百分比为单位。例如： 一次特快列车时刻表 站名 到站时刻 开车时刻 北京西 - 16.0 石家庄 18.56 9.08 郑州 0.01 0.14 武昌 6.42 6.54 岳阳 9.29 9.35 长沙 11.20 - 上述HTML语句对应的表格如下图4.1所示。图4.1 列车时刻表可通过TR标记的下列属性对指定行的格式进行设置：(1) ALIGN：指定行中单元格的水平对齐方式，取值为left（默认值）、center或right。(2) BACKGROUND：给出图像文件的URL，该图像用作指定行的背景。(3) BGCOLOR：指定行的背景颜色。(4) BORDERCOLOR：指定行的边框颜色，该属性只有当TABLE标记的BORDER属性取非零值时才起作用。(5) BORDERCOLORDARK：指定行的3D边框的阴影颜色，该属性只有当TABLE标记的BORDER属性取非零值时才起作用。(6) BORDERCOLORLIGHT：指定行的3D边框的高亮颜色，该属性只有当TABLE标记的BORDER属性取非零值时才起作用。(7) VALIGN：指定行中单元格内容的垂直对齐方式，该属性的取值可以是top（顶端对齐）、middle（居中对齐）、bottom（底端对齐）或baseline（基线对齐）可通过TD和TH标记的下列属性可以对指定单元格的格式进行设置：(1) ALIGN：指定单元格内文本的水平对齐方式，取值为left（默认值）、center或right。(2) BACKGROUND：指定图像的URL，该图像用作单元格的背景。(3) BGCOLOR：指定单元格的背景颜色。(4) BORDERCOLOR：指定单元格的边框颜色。(5) BORDERCOLORDARK：用于指定单元格的3D边框的阴影颜色。(6) BORDERCOLORLIGHT：用于指定单元格的3D边框的高亮颜色。(7) COLSPAN：指定合并单元格时一个单元格跨越的表格列数。(8) NOWRAP：若指定该属性，则避免Web浏览器将单元格里的文本换行。(9) ROWSPAN：指定合并单元格时一个单元格跨越的表格行数。(10) VALIGN：指定单元格中文本的垂直对齐方式，取值可以是top、middle（默认值）、bottom或baseline。 2）用可视化方法创建表格用可视化方法简化了对表格的创建操作。通过鼠标的点按操作，能够创建出各类复杂的表格来。在创建表格的过程中，系统又提供了二种不同的方法：Table控件法和模板控制法。（1）利用Table控件法的具体步骤如下：a) 创建表格：(a) 进入“设计”视图窗口，将光标放置在表格将要出现的位置上，选工具箱窗口的HTML页，然后双击Table按钮或拖曳Table按钮到设计页面中适当位置。(b) 选中插入的Table表，然后用鼠标将其拖曳成需要的形式和位置。b) 确定表格的参数：选中Table，在右边属性窗口中选择属性，输入属性的值，以改变表格的外观。一些常用的的属性如下：(a) Rows（行）代表表格的行数。(b) Cell Padding（单元格填充）代表单元格中内容与边界之间的空间。(c) Cell Spacing（单元格间距）代表单元格之间的间距。(d) Width（表宽）代表以像素（pixels）或以浏览器窗口的百分比（%）为单位指定表格的宽度。(e) Border（边宽）代表表格边框的宽度，当不须显示边框时，输入0。（2）使用模板进行布局：使用模板进行布局的步骤如下：n 在“布局”的菜单中，选中“插入表”将弹出如图4.2所示的窗口： 图4.2 插入表的窗口n 窗口的左上方有二种选择：如果选择“自定义”，然后点击“单元格属性”，可以进行更加详细设置。如果想在整体布局的基础上进行表格设计，可选中“模板”，然后在下拉菜单中进一步选择模板，然后再在摸板的各个框架中放入表格。二、图层1图层的作用 图层是一个容器，在图层内可以放置各种类型的网页元素。如，文本、图像、表格、甚至还可以放置图层（图层嵌套）。每个图层相当于一个小屏幕，一个独立的小屏幕。图层是一个可以任意移动的容器，甚至允许图层之间重叠放置，这是它与框架的不同之处，这也是图层的最大优点。因为放置在图层上的元素，可以随图层被拖放到任意位置，为元素的定位和网页布局带来极大的方便，同时也为控制动态元素奠定了基础。早期版本的Internet Explorer和Netscape Navigator浏览器都不支持图层，只有4.0及以后的版本才支持图层。但即使是现在，这两种浏览器对图层的定义方法似乎还没有完全统一。在ASP.NET 2.0的设计界面中可以使用DIV标记来定义图层。2创建图层1）用HTML语言创建图层例如利用下列代码创建一个宽100px、高100px的图层。我是层！2）用可视化方法创建图层用可视化方法简化了对图层的创建操作。通过鼠标的点按操作，能够创建出图层来。具体步骤如下：n 进入“设计视图”窗口，再将光标放置在图层将要出现的位置上，选工具箱窗口的HTML页，然后双击Div按钮或拖曳Div按钮到设计页面中适当位置松手。n 选中插入的Div，利用出现的八个控制点，拖曳成需要的形式和位置。n 选中Div，在右边属性窗口中的某些属性上进行选择或输入内容，浏览时图层会发生相应变化。4.2 插入图像4.2.1 图像的类型并不是所有类型的图像都适合于网页的应用，有的图像虽然很美丽，但由于容量大，网上传输和下载的时间长，这样的图像就不适合网页的需要。另外，网页中增添图像的主要目的，是为了使网页变得更加生动、直观和更具有吸引力，对图像本身精细程度的要求并不高。考虑到以上这些特点，PNG、GIF、JPEG等类型的图像最适合于网页上使用。这些图像的共同特点是，具有一定的清晰度且压缩比大、容量小，网上传输和下载的时间短。这些图像的简要特性如下：n PNG（Portable Network Graphic）类型的图像是Web图像中的通用格式，也是Fireworks 软件的基本格式。它用一种无损压缩的方法，最多可支持32位颜色，但它不支持动画，如果没有相应的插件，有的浏览器可能不支持这种格式；n GIF（Graphics Interchange Format）类型的图像是Web中最常用的图像格式，它是一种压缩的8位图像文件，最多可支持256种颜色，文件很小，适合于存储线条、图标以及卡通和其它大色块图像。GIF图像还有一个突出的特点，就是它支持动态图、透明图和交织图。n JPG（Joint Photographic Experts Group）是Web中仅次于GIF的常用图像格式，它是一种压缩得非常紧凑的格式，专用于存储不含大色块的图像。JPEG图像有一定的失真度，但通常用肉眼不容易分辨出来。JPEG文件最小，可以作到只有GIF文件的1/4。JPEG对图标之类或含大色块的图像不很有效，不支持透明图和动态图。4.2.2 插入图像的方法为了在网页上插入图像，先要将需要的图像增加到网站目录（或其子目录）下来。然后在布局的基础上，有两个方法将图像放进来：n 将HTML页中的Image图像图标送入指定的位置，然后在它的src属性中设置图像的URL；n 在“源”代码视图中写以下代码。例如：用这种方法可以插入JPG、GIF、PNG等图像。如果要在网页中显示Flash动态图，需要将*.swf图增加到网站中来以外。还需要使用以下语句，才能将该图像显示出来：其中frame.swf是Flash可执行文件的名字。4.3 编辑图像1用HTML语言编辑图像在HTML语言中，可使用IMG标记在网页中插入一个行内图像。IMG标记有许多属性，其中最常用的是SRC、ALT、HEIGHT、WIDTH、BORDERHSPACE、VSPACE和ALIGN属性。而且，IMG标记不仅用于在网页中插入图像，也可以用于播放Video for Windows的多媒体文件（.avi），以后将分别介绍。1) 设置图像的位置和替换文本SRC属性给出图像文件的URL地址，图像可以是JPEG文件、GIF文件或PNG文件。ALT属性给出图像的简单文本说明，这段文本在浏览器不能显示图像时显示出来，或图像加载时间过长时先显示出来。2) 指定图像的高和宽通过HEIGHT和WIDTH属性来设置图像的高度和宽度，所用单位可以是像素或百分数。如果只给出了高度或宽度，则图像将按比例进行缩放。3) 设置图像的边框使用IMG标记的BORDER属性可以给图像添加边框效果，该属性的取值为正整数，单位为像素。4) 设置图像与文本之间的空白使用IMG标记的HSPACE和VSPACE属性可以设置图像与文本之间的空白，前者指定图像的左、右边距，后者指定图像的上、下边距，两者的单位均为像素。5) 设置图像在页面上的对齐方式如果插入的图像在页面上单独占一行，则可以将IMG标记置于和标记之间，并通过P标记的ALIGN属性来设置图像在页面上的对齐方式。6) 设置图像与文本的对齐方式当在页面中进行图文混排时，可以使用IMG标记的ALIGN属性来设置图像与文本在垂直方向的对齐方式，此时ALIGN属性的取值如下： top：图像与文本顶部对齐。 middle：图像与文本中央对齐。 bottom：图像与文本底部对齐。通过设置IMG标记的ALIGN属性，也可以在图像的左、右绕排文本，此时ALIGN属性的取值为： left：图像居左，文本居右。 right，图像居右，文本居左。 使用换行标记BR的CLEAR属性，可以将换行后的文本移到图像的下面。2用可视化方法编辑图像1）确定图像编辑器通过与一些外部编辑器想结合可以用可视化方法编辑图像。例如与Fireworks MX 2004相结合就是一个例子。Fireworks MX 2004能够将位图和矢量编辑工具相结合，随时对图像进行编辑，还可以用批处理方式工作。Fireworks MX 2004是为适应网页需要而推出来的一套图形解决方案，因此它非常重视图像文件的容量和屏幕输出等因素，力求在他们之间找到最佳效果的平衡。这一点与其他传统传媒的要求不同，对于一些广告印刷品来说，也许Fireworks MX 2004并不是处理图像的最佳选择。Fireworks MX 2004从各种图形编辑软件中吸取优点。例如，它处理图像的思路、技巧、工具和快捷键等方面吸取了Photoshop的特长；还集中了Flash中的图符和库面板，Dreamweaver 的快速启动栏等优点。本书不准备对Fireworks MX 2004作详细的介绍，只是想通过几个实际例子来说明它的应用，如果想用其他类似软件，也可参考它们进行。2）建立ASP.NET 2.0与Fireworks MX 2004之间的调用关系为了调用Fireworks MX 2004软件编辑图像，必须安装Fireworks MX 2004软件并建立ASP.NET 2.0与它之间的联系。建立联系的方法是，在设计界面中选用“工具 ”菜单，然后选择“外部工具”项，将弹出如下图4.3所示的对话窗口，再利用“添加”、“标题”、“命令”等进行适当设置，以完成两者的联系。图4.3 调用外部工具窗口4.4 小结网页布局非常重要，习惯与桌面系统设计的人往往忽视这个问题，以为只要设计阶段将各个控件放到适当的位置就不会有问题。其实浏览器与桌面系统不一样，它的定位能力比较差，如果不用布局方法将各控件的位置限制住，设计阶段的部署运行中不一定能够保持住。网页布局的工具有多种，各有其特点，最好将它们结合起来使用。摸板常用来作全局性的布局，表格和层常用来进行局部的设计，摸板中可以套用表格（或层），表格中还可以套用表格。网页布局是一项非常细致而又费时的工作，需要反复练习才能熟练。在网页中适当地插入图像能够增强网页的生动性和吸引力，是网页设计中非常重要的一个方面。在编辑图像方面，ASP.NET类库中的System.Drawing和System.Drawing.Imaging命名空间中提供了几个用于编辑图像的类，功能很强，但是需要编写较多的代码，本书受篇幅限制没有作介绍。建议利用一些可视化编辑图像的工具（如：Firework、Flash等）先将图像编辑成需要的界面，然后再插入到网页中来。4.5 习