网页布局技术比较和应用优化.docVIP

网页布局技术比较和应用优化 　　摘要本文介绍了目前网页布局使用的几种主要技术:表格技术、框架技术、图像处理软件技术、CSS+DIV技术,在对这几种技术进行比较的基础上,提出了优化应用的方案。 　　关键词网页布局技术;比较;优化 　　 　　网页布局是开发网络教育资源工作的基础,目前常见的网页布局技术有表格技术、框架技术、图像处理技术和CSS+DIV技术,在实践中诸多布局技术让我们眼花缭乱,如何有效利用这些技术快捷地布局出优美的网页呢? 　　 　　 　　网页布局技术 　　 　　一、表格技术 　　表格即＜table＞...＜/table＞标签本来是用于对数据输出格式进行控制,后来被用于网页布局,表格由于使用简单而且灵活,是最早也是使用最广泛的网页布局技术。表格标签主要包含的标签有table、caption、th、tr、td、thead、tfoot、tbody、col、colgroup,通过对表格单元格的合并与拆分以及表格中套表格等,得到需要的布局,如图1所示。最后在单元格中添加文字、图形等元素,完成网页制作,如图2所示。 　　二、框架技术 　　框架即＜frame＞...＜/frame＞标签,它可以把屏幕分割开来的“区域”,如果网页要布局成图3的框架集中所提供的样式,可以使用框架来实现。网络课程布局就常采用“顶部和嵌套的左侧框架”,如图4所示。 　　框架中还有一个＜iframe＞标记比较常用,但它只适用于IE,它的作用是在一个网页中间插入一个框窗以显示另一个文件。这一技术特别适合用来做网络课程布局。 　　三、图像处理软件技术 　　Photosho、Fireworks等图像处理软件都提供了“切片”工具实现把图形转换为网页布局。首先是在图像处理软件中绘制出布局图,然后使用 切出需要实现交互(或者链接)的区域(如图5所示),最后转储为WEB格式文件。另外一种方法是把制作好的布局图插入到Dreamweaver中,然后使用等热点工具进行交互(或者链接)的区域(如图6所示)的切割。 　　 　　 　　四、CSS+DIV 　　CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)布局方式的区别,XHTML网站设计标准中,不再使用表格布局技术,而是采用CSS+DIV的方式实现各种布局。 　　CSS(Cascading Style Sheet)称为层叠样式表,它是用于控制网页样式,并允许将样式信息与网页内容分离的一种标记语言,使用CSS目的是为了使HTML语言能够更好适应页面美工设计;DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素,DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。 　　 　　网页布局技术比较 　　 　　一、应用的灵活性 　　表格技术曾经是最常用的网页布局技术,它使用简单而且灵活,通过表格的嵌套,可以进行比较复杂的网页布局。框架技术由于其提供了固定的布局样式,所以适合布局一些特殊格式的网页,例如网络课程的布局常使用这一技术。很明显,使用图像处理技术布局的网页优美而紧凑,但需要具有较好的美工已经使用图像处理软件的能力,非常适合复杂布局。CSS+DIV使用也比较简单,可以进行复杂的布局,由于相对于其他技术其缺乏直观性,在复杂布局时,会感到比较困难。 　　 　　二、布局的重构性 　　无论是表格还是框架、图形处理技术,最终生成的网页布局文件是布局格式控制和网页内容混在一起,这样当遇到需要对网页布局进行比较大的改动甚至重新布局(称为重构)时,以上这些技术的改动就显得异常困难,甚至要重新制作页面。而CSS+DIV技术布局和内容表现是一个分离体,使用float和position属性就可以轻松移动各个块,是实现让用户动态选择界面的功能。 　　三、网页浏览 　　利用表格布局的网页在下载的时候必须等整个表格内容都下载完毕之后才会一次性显示出来,而利用DIV块的CSS布局的页面就科学多了,各个子块可以分别下载显示,从而提高了页面下载速度,搜索引擎的排名也会因此而提高。 　　但是,CSS+DIV布局网页在IE浏览器里正常显示的页面,到火狐浏览器(FireFox)中却可能面目全非,CSS+DIV还有待于各个浏览器厂商的进一步支持。 　　 　　网页布局技术应用优化 　　 　　一、网页布局元素分类 　　根据WEB制作标准,我们可以把网页布局中的元素分为三大类。 　　1.辅助布局设计元素。 　　辅助布局设计元素是指DIV、SPAN等,其主要功能是用来布局整个页面,灵活使用这些元素的各种属