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

第第4章章 网页布局与插入图像网页布局与插入图像本章将讲述以下几个问题：网页布局插入图像编辑图像4.1 网页布局4.1.1 布局的基本概念4.1.2 表格和图层一、表格一张表格由行（rows）、列（columns）、单元格（cells）三部分组成。1）用HTML语言创建表格 2）用可视化方法创建表格（1）利用Table控件法 l创建表格：l确定表格的参数：（2）使用模板进行布局在“布局”的菜单中，选中“插入表”二、图层1图层的作用 图层是一个容器，在图层内可以放置各种类型的网页元素。因为放置在图层上的元素，可以随图层被拖放到任意位置，为元素的定位和网页布局带来极大的方便。在ASP.NET 2.0的设计界面中可以使用DIV标记来定义图层。2创建图层1）用HTML语言创建图层我是层！2）用可视化方法创建图层4.2 插入图像4.2.1 图像的类型PNG（Portable Network Graphic）类型的图像是Web图像中的通用格式，也是Fireworks 软件的基本格式。它用一种无损压缩的方法，最多可支持32位颜色，但它不支持动画。GIF（Graphics Interchange Format）类型的图像是Web中最常用的图像格式，它是一种压缩的8位图像文件，最多可支持256种颜色，文件很小，适合于存储线条、图标以及卡通和其它大色块图像。GIF图像还有一个突出的特点，就是它支持动态图、透明图和交织图。JPG（Joint Photographic Experts Group）是Web中仅次于GIF的常用图像格式，它是一种压缩得非常紧凑的格式，专用于存储不含大色块的图像。JPEG文件最小，可以作到只有GIF文件的1/4。JPEG对图标之类或含大色块的图像不很有效，不支持透明图和动态图。4.2.2 插入图像的方法有如下两个方法：将HTML页中的Image图像图标送入指定的位置，然后在它的src属性中设置图像的URL；在“源”代码视图中写以下代码。例如：ALT:Sets or retrieves a text alternative to the graphic 如果要在网页中显示Flash动态图，需要将*.swf图增加到网站中来以外。还需要使用以下语句，才能将该图像显示出来：4.3 编辑图像1用HTML语言编辑图像使用IMG标记在网页中插入一个行内图像。IMG标记不仅用于在网页中插入图像，也可以用于播放Video for Windows的多媒体文件（.avi）。1)设置图像的位置和替换文本SRC属性给出图像文件的URL地址，图像可以是JPEG文件、GIF文件或PNG文件。ALT属性给出图像的简单文本说明，这段文本在浏览器不能显示图像时显示出来，或图像加载时间过长时先显示出来。2)指定图像的高和宽通过HEIGHT和WIDTH属性来设置图像的高度和宽度，所用单位可以是像素或百分数。如果只给出了高度或宽度，则图像将按比例进行缩放。3)设置图像的边框使用IMG标记的BORDER属性可以给图像添加边框效果，该属性的取值为正整数，单位为像素。4)设置图像与文本之间的空白使用IMG标记的HSPACE和VSPACE属性可以设置图像与文本之间的空白，前者指定图像的左、右边距，后者指定图像的上、下边距，两者的单位均为像素。5)设置图像在页面上的对齐方式如果插入的图像在页面上单独占一行，则可以将IMG标记置于和标记之间，并通过标记的ALIGN属性来设置图像在页面上的对齐方式。6)设置图像与文本的对齐方式当在页面中进行图文混排时，可以使用IMG标记的ALIGN属性来设置图像与文本在垂直方向的对齐方式，此时ALIGN属性的取值如下：top：图像与文本顶部对齐。middle：图像与文本中央对齐。bottom：图像与文本底部对齐。通过设置IMG标记的ALIGN属性，也可以在图像的左、右绕排文本，此时ALIGN属性的取值为：left：图像居左，文本居右。right，图像居右，文本居左。使用换行标记BR的CLEAR属性，可以将换行后的文本移到图像的下面。2用可视化方法编辑图像1）确定图像编辑器通过与一些外部编辑器想结合可以用可视化方法编辑图像。例如与Fireworks MX 2004相结合就是一个例子。2）建立ASP.NET 2.0与Fireworks MX 2004之间的调用关系在设计界面中选用“工具”菜单，然后选择“外部工具”项。