《第4章网页布局与图像.ppt》由会员分享，可在线阅读，更多相关《第4章网页布局与图像.ppt（25页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第4章 网页布局与图像 4.1 网页布局4.1.1 布局的基本概念布局的基本概念传统的布局方法是利用表格的定位、对齐等功能来对网页进行布局。首先将网页划分成几个部分，以决定表格的行数和列数，然后创建表格并在表格的各单元格中放置各种网页元素。虽然对表格的大小随时可以进行调整，行列之间也可以拆分和归并，但是在布局设计中仍然会出现顾此失彼的感觉。要想成为一个布局高手，非常不容易。后来，又出现了层和模板，使布局更为灵活。层的重点是在局部上，而模板的重点则在整体规划上。巧妙地将三者结合才是网页布局的最佳方案。4.1.2 表格和图层表格和图层 1.表格表格表格可以用于布局，但更多的时候是用于组织数据，如通
2、讯录、课程表、列车时刻表等大都采用表格的形式。将数据或图形放在表格中显得更有规律，更有利于对照和比较。一张表格由行(row)、列(column)、单元格(cell)三部分组成。创建表格实际上就是创建表格的行、列和单元格。用HTML语言创建表格的方法如下：创建表格的语句：创建表格的标题：创建行的语句：创建栏名的语句：创建单元格的语句：可通过TABLE标记的下列属性对表格的格式进行设置：ALIGN：指定表格的对齐方式，取值可以是left(默认值)、center或right。BACKGROUND：指定用作表格背景图片的URL地址。BGCOLOR：指定表格的背景颜色。BORDER：指定表格边框的宽度，
3、以像素为单位。如果省略该属性，则默认值 为0。BORDERCOLOR：指定表格边框颜色，应与BORDER属性一起使用。BORDERCOLORDARK：指定3D边框的阴影颜色，应与BORDER属性一起 使用。BORDERCOLORLIGHT：指定3D边框的高亮显示颜色，与BORDER属性一起使用。CELLPADDING：指定单元格内数据与单元格边框之间的间距，以像素为单位。CELLSPACING：指定单元格之间的间距，以像素为单位。WIDTH：指定表格的宽度，以像素或百分比为单位。例如：1次特快列车时刻表站名 到站时刻 开车时刻 北京西 -16：0 石家庄 18：56 9：08 郑州 0：01
4、0：14 武昌 6：42 6：54 岳阳 9：29 9：35 长沙 11：20 -上述HTML语句对应的表格，如下图4.1所示。图4.1 列车时刻表可通过TR标记的下列属性对指定行的格式进行设置：ALIGN：指定行中单元格的水平对齐方式，取值为left(默认值)、center或right。BACKGROUND：给出图像文件的URL，该图像用作指定行的背景。BGCOLOR：指定行的背景颜色。BORDERCOLOR：指定行的边框颜色，该属性只有当TABLE标记的BORDER属性取非零值时才起作用。BORDERCOLORDARK：指定行的3D边框的阴影颜色，该属性只有当TABLE标记的BORDER属
5、性取非零值时才起作用。BORDERCOLORLIGHT：指定行的3D边框的高亮颜色，该属性只有当TABLE标记的BORDER属性取非零值时才起作用。VALIGN：指定行中单元格内容的垂直对齐方式，该属性的取值可以是top(顶端对齐)、middle(居中对齐)、bottom(底端对齐)或baseline(基线对齐)。可通过TD和TH标记的下列属性对指定单元格的格式进行设置：ALIGN：指定单元格内文本的水平对齐方式，取值为left(默认值)、center或right。BACKGROUND：指定图像的URL，该图像用作单元格的背景。BGCOLOR：指定单元格的背景颜色。BORDERCOLOR：指定
6、单元格的边框颜色。BORDERCOLORDARK：用于指定单元格的3D边框的阴影颜色。BORDERCOLORLIGHT：用于指定单元格的3D边框的高亮颜色。COLSPAN：指定合并单元格时一个单元格跨越的表格列数。NOWRAP：若指定该属性，则避免Web浏览器将单元格里的文本换行。ROWSPAN：指定合并单元格时一个单元格跨越的表格行数。VALIGN：指定单元格中文本的垂直对齐方式，取值可以是top、middle(默认值)、bottom或baseline。用可视化方法简化了对表格的创建操作。通过鼠标的点击操作，能够创建出各类复杂的表格来。在创建表格的过程中，系统又提供了两种不同的方法：Tabl
7、e控件法和模板创建法。利用Table控件法的具体步骤如下：(1)进入【设计】视图窗口，将光标放置在表格将要出现的位置上，选择【工具箱】窗口的HTML选项卡，然后双击Table控件或拖曳Table控件到设计页面中适当位置。(2)选中插入的Table表，然后用鼠标将其拖曳到合适的位置，并缩放为适当大小。(3)选中Table，在右边属性窗口中选择相应属性，输入属性的值，以改变表格的外观。一些常用的属性如下：Rows(行)：代表表格的行数。Cell Padding(单元格填充)：代表单元格中内容与边界之间的空间。Cell Spacing(单元格间距)：代表单元格之间的间距。Width(表宽)：代表以像
8、素(pixel)或以浏览器窗口的百分比(%)为单位指定表格的宽度。Border(边宽)：代表表格边框的宽度，当不需要显示边框时，输入0。使用模板创建表格的步骤如下：(1)在【布局】菜单中，单击【插入表】，将弹出如图4.2所示的对话框。(2)窗口的左上方有两种选择：如果选择【自定义】，然后单击【单元格属性】，可以进行更加详细的设置。如果想在整体布局的基础上进行表格设计，可选中【模板】，然后在下拉列表框中进一步选择模板，然后再在模板的各个框架中放入表格。图4.2【插入表】对话框 2图层图层图层是一个容器，在图层内可以放置各种类型的网页元素。如文本、图像、表格、甚至还可以放置图层(图层嵌套)。每个图
9、层相当于一个独立的小屏幕。图层是一个可以任意移动的容器，甚至允许图层之间重叠放置，这是它与框架的不同之处，这也是图层的最大优点。因为放置在图层上的元素，可以随图层被拖放到任意位置，为元素的定位和网页布局带来极大的方便，同时也为控制动态元素奠定了基础。早期版本的Internet Explorer和Netscape Navigator浏览器都不支持图层，只有4.0及以后的版本才支持图层。但即使是现在，这两种浏览器对图层的定义方法似乎还没有完全统一。在ASP.NET 2.0的设计界面中可以使用DIV标记来定义图层。(1)用HTML语言创建图层例如，利用下列代码创建一个宽100px、高100px的图层
10、。我是层！(2)用可视化方法创建图层用可视化方法简化了对图层的创建操作。通过鼠标的点击操作，能够创建出图层。具体步骤如下：进入【设计】视图窗口，再将光标放置在图层将要出现的位置上，选择【工具箱】中的HTML选项卡，然后双击Div控件或拖曳Div控件到设计页面中适当位置。选中插入的Div，利用出现的8个控制点，拖曳到合适的位置，并缩放为适当 大小。选中Div，在右边属性窗口中的某些属性上进行选择或输入内容，浏览时图层会发生相应变化。4.2 插 入 图 像 为了在网页上插入图像，先要将需要的图像增加到网站目录(或其子目录)中。然后在布局的基础上，利用以下两种方法插入图像：(1)将HTML选项卡中的
11、Image控件拖放至指定的位置，然后在它的src属性中设置图像的URL。(2)在【源】视图中写以下代码。例如：用这种方法可以插入JPEG、GIF、PNG等图像。如果要在网页中显示Flash动态图像，除了需要将*.swf图增加到网站中，还需要使用以下语句，才能将该图像显示出来：其中frame.swf是Flash可执行文件的名字。4.3 编 辑 图 像 4.3.1 用用HTML语言编辑图像语言编辑图像 在HTML语言中，可使用IMG标记在网页中插入一个行内图像。IMG标记有许多属性，其中最常用的是SRC、ALT、HEIGHT、WIDTH、BORDERHSPACE、VSPACE和ALIGN属性。而且
12、，IMG标记不仅用于在网页中插入图像，也可以用于播放Video for Windows的多媒体文件(.avi)，以后将分别介绍。1.设置图像的位置和替换文本SRC属性给出图像文件的URL地址，图像可以是JPEG文件、GIF文件或PNG文件。ALT属性给出图像的简单文本说明，这段文本在浏览器不能显示图像时显示出来，或图像加载时间过长时先显示出来。2.指定图像的高和宽通过HEIGHT和WIDTH属性来设置图像的高度和宽度，所用单位可以是像素或百分数。如果只给出了高度或宽度，则图像将按比例进行缩放。3.设置图像的边框使用IMG标记的BORDER属性可以给图像添加边框效果，该属性的取值为正整数，单位为
13、像素。4.设置图像与文本之间的空白使用IMG标记的HSPACE和VSPACE属性可以设置图像与文本之间的空白，单位均为像素。5.设置图像在页面上的对齐方式如果插入的图像在页面上单独占一行，则可以将IMG标记置于和标记之间，并通过P标记的ALIGN属性来设置图像对齐方式。6.设置图像与文本的对齐方式当在页面中进行图文混排时，可以使用IMG标记的ALIGN属性来设置图像与文本在垂直方向的对齐方式，此时ALIGN属性的取值如下：top：图像与文本顶部对齐。middle：图像与文本中央对齐。bottom：图像与文本底部对齐。通过设置IMG标记的ALIGN属性，也可以在图像的左、右绕排文本，此时ALIG
14、N属性的取值为：left：图像居左，文本居右。right：图像居右，文本居左。使用换行标记BR的CLEAR属性，可以将换行后的文本移到图像的下面。4.3.2 用可视化方法编辑图像用可视化方法编辑图像 1.确定图像编辑器通过与一些外部编辑器结合可以用可视化方法编辑图像。例如与Fireworks MX 2004相结合就是一个例子。Fireworks MX 2004能够将位图和矢量编辑工具相结合，随时对图像进行编辑，还可以用批处理方式工作。Fireworks MX 2004是为适应网页需要而推出来的一套图形解决方案，因此它非常重视图像文件的容量和屏幕输出等因素，力求找到最佳效果的平衡。这一点与其他传
15、统传媒的要求不同，对于一些广告印刷品来说，也许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 200
16、4软件并建立ASP.NET 2.0与它之间的联系。建立联系的方法是，在【设计】视图中选择【工具】菜单，然后选择【外部工具】命令，将弹出如图4.3所示的对话框，再利用【添加】、【标题】、【命令】等进行适当设置，以完成两者的联系。图4.3【外部工具】对话框 4.4表单标记表单在Web网页中用来给访问者填写信息，实现客户端与服务器端的交互功能。表单标记的格式:.在和之间，可以使用以外的任何HTML标记（1）input标记格式：表单控件标记中具有非常重要的地位，它提供客户的输入区。该标记是单个标记，没有结束标记。INPUT中有六个属性：TYPE、NAME、SIZE、VALUE、MAXLENGTH、CH
17、ECKED。该标记共提供了九种类型的输入区域，由type属性来决定。ButtonCheckboxFileHiddenImagePasswordRadioResetSubmittext（2）下拉列表框、标记对用来创建一个菜单下拉列表框。具有multiple、name和size属性。multiple属性使用下拉列表实现多选；name是定义列表框的名字；size属性用来设置列表的高度。标记用来指定列表框中的一个选项，它放在标记对之间。此标记具有selected和value属性，selected用来指定默认的选项，value属性用来给指定的选项赋值，服务器正是通过调用区域的名字来获取value属性的数据值。（3）多行文本框 用来创建一个可以输入多行的文本框，此标记对用于标记对之间。具有以下属性：name是文本框的名称；cols是文本框的宽度；rows是文本框的列数，即其高度。