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

网页布局技术比较与应用优化 摘要：本文介绍了目前网页布局使用的几种主要技术：表格技术、框架技术、图像处理软件技术、CSS+DIV技术，在对这几种技术进行比较的基础上，提出了优化应用的方案。 关键字：网页布局技术，比较，优化 网页布局是开发网络教育资源工作的基础，目前常见的网页布局技术有表格技术、框架技术、图像处理技术和CSS+DIV技术，在实践中各种布局技术的混合使用让我们眼花缭乱、不知所措，那么如何有效利用这些技术快捷地布局出优美的网页呢？ 一、网页布局技术 1、表格技术 表格table.../table标签本来是用来对数据输出格式进行控制，后来被用于网页布局，表格由于使用简单而且灵活，是最早也是使用最广泛的网页布局技术。表格标签主要包含的标签有table、caption、th、tr、td、thead、tfoot、tbody、col、colgroup框架frame.../frame标签，它可以把屏幕分割开来的区域iframe标记只适用於IE它的作用是在一网页中间插入一个框窗以显示另一个文件。5/edu/keyan/index.htm）。 table width=950 height=100% border=0 align=center cellpadding=0 cellspacing=0 trtd height=90 colspan=2 valign=middle iframe src=topframe.htm width=100% height=85 name=fraToolbar frameBorder=no scrolling=no target=fraLeftFrame s/iframe/td /trtrtd width=250 rowspan=2 valign=top bgcolor=#01215Aiframe src=leftlist1.htm width=210 height=100% scrolling=auto name=fraLeftFrame frameBorder=no/iframe/td td width=700 height=30 valign=top iframe name=fraRightFrame1 width=730 height=30 border=0 borderColor=#6699cc frameBorder=no scrolling=no noresize src=righttopframe.htm target=_self/iframe/td /trtrtd height=100% valign=topiframe src=material/3.html width=733 height=100% name=main target=main frameBorder=no scrolling=auto/iframe/td/tr tr td height=28 colspan=2 align=left valign=topiframe src=bottom.htm width=100% height=28 frameBorder=no name=fraToolbar target=fraLeftFrame/iframe/td /tr/table 3、图象处理软件技术 Photosho、Fireworks等图像处理软件都提供了“切片”工具实现把图形转换为网页布局。首先是在图像处理软件中绘制出布局图，然后使用 切出需要实现交互（或者链接）的区域（如图5所示），最后转储为WEB格式文件。另外一种方法是把制作好的布局图插入到Dreamweaver中，然后使用等热点工具进行交互（或者链接）的区域（如图6所示）的切割。 图5 绘制网页布局 并使用“切片”工具切出交互区域 图6 将制作的布局图插入DM中 使用“热点”工具进行切割 4、CSS+DIV CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）方式的区别，XHTML网站设计标准中，不再使用表格技术，而是采用CSS＋DIV的方式实现各种。 DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。htmlheadstyle type=text/css !--body {margin:0px;font-size:13px;font-family:Arial;} #container{position:relative;width:100%;} #