《关于网页布局方式的研究》

《《关于网页布局方式的研究》》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、关于“网页布局”方式的研究李玲玲（淮北职业技术学院计算机科学技术系，安徽淮北２３５０００）摘要：网页是网站构成的基本要素，而网页元素在网页中的组合决定了网页的最终效果。文章首先指出了三种经典的网页布局方式，对其进行分析比较，并论述了他们各自的优缺点，然后说明了实际应用中常用的方法手段。关键词：网页布局；表格；框架；ＡＰ元素中图分类号：ＴＰ３９３．０９２文献标识码：Ａ文章编号：１６７１－８２７５（２０１１）０１－００１１－０２网页中可以直接输入文本、图像、多媒体等诸多元素，并可以按照我们的目标设置它们之间的排版格式，但

2、是不能随心所欲的在网页中的任意位置放置这些元素。制作网页的过程中有时元素之间的相对位置会根据元素的尺寸等很多要素而变得毫无章法，也可能随着ＩＥ窗口的大小调整及屏幕的分辨率的不同而改变，即网页处于不稳定的状态，而解决这些问题的方法就是在插入这些网页元素之前对网页进行页面布局［１］１５－２２。经典的页面布局方式有三种：用表格布局网页、用框架布局网页和用ＡＰ元素布局网页［２］８。用框架布局网页在Ｄｒｅａｍｗｅａｖｅｒ中框架（Ｆｒａｍｅ）是除了表格以外另一种常用的网页布局排版工具。框架结构就是把浏览器窗口划分为多个区域，每个

3、区域都可以分别显示不同的网页。框架实际上由两部分组成，即框架与框架集。框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容相关或无关的网页文件。每一个框架都是一个独立的网页文件；框架集是框架的集合，是一个定义了一组框架结构的网页。框架集文档本身不在浏览器中显示，它只是向浏览器提供如何显示框架以及在框架中显示哪些文档的信息，是一个用于存储框架的容器。框架网页是指一种Ｗｅｂ页，可以将Ｗｅｂ浏览器窗口分为不同的可滚动的区域，这些区域可独立的显示几个Ｗｅｂ页［４］１８５－１９２。一个窗口可保持不变，而其

4、它窗口根据用户选择的超链接变化。用框架布局网页首先要建立框架或框架集，其操作可以借助于菜单或工具，也可以直接使用鼠标拖拽。然后把相对应元素（文本、图像、网页等）导入到框架中。值得一提的是框架和框架集在使用时都需要保存。使用Ｉｆｒａｍｅ可以将一个文档嵌入到另一个文档中显示。随处引用，而不必拘泥于形式。但必须用代码手工添加。在Ｄｒｅａｍｗｅａｖｅｒ中，使用框架布局网页，其优点是框架网页本身不包含可见内容，它只是一个容器，用于指定在框架中显示的其它网页及显示方式；访问者不需要为每个页面重新加载与导航相关的图形；每个框架都有

5、自己独立的滚动条，方便访问者独立浏览这些框架。缺点是缺省时，框架是有边框的，占用屏幕上可用作别的目的的一些空间；难以实现不同的框架中各元素的精确对齐；主流的搜索引擎下不会收录框架的页面；网点速度相对较慢等。３用ＡＰ元素布局网页Ｄｒｅａｍｗｅａｖｅｒ的绝对定位简称ＡＰ，是分配有绝对位置２用表格布局网页众所周知，表格的基本功能是罗列和显示数据的，这在Ｗｏｒｄ和Ｅｘｃｅｌ中是最好的证明。然而，在Ｄｒｅａｍｗｅａｖｅｒ中，表格除了罗列和显示数据外，还有一项非常重要的功能，就是定位与排版，即布局网页的功能［３］８５－９２。利用

6、表格布局的常用方法是根据页面的需求，插入表格，设置好表格的相关属性，然后把网页所用元素（常用的有文本、图像等）插入到表格当中，使这些元素固定在相对的单元格中。因为外层有表格限制，所以这些插入进来的元素受单元格限制，而不会再随意移动。当然，在Ｄｒｅａｍｗｅａｖｅｒ中，可以用来布局网页的，除了基本表格外，还包括嵌套表格和自绘表格。无论是使用哪种表格来对网页进行布局，通常表格的属性中边框粗细、单元格边距、单元格间距的值通常都设置为０。在Ｄｒｅａｍｗｅａｖｅｒ中，使用表格布局网页，其优点是便于规划，易于接受，对设计人员的专业

7、技术要求不高，操作简单，直观。缺点是Ｔａｂｌｅ布局灵活性不大，你只能遵循〈ｔａｂｌｅ〉〈／ｔａｂｌｅ〉、〈ｔｒ〉〈／ｔｒ〉、〈ｔｄ〉〈／ｔｄ〉的格式；不适合过于复杂的网页；垃圾代码会很多，一些修饰的样式及布局的代码混合一起，降低代码的可读性。１的一种页面元素。通常文字、图像等元素都是在二维空间进行编辑操作的。而使用ＡＰＤｉｖ则让页面元素向三维空间扩展。ＡＰ元素可以包含文字、图像、影像等。ＡＰＤｉｖ就是以绝对的定位方式处理ＨＴＭＬ页面的元素［５］６２－６９。用ＡＰ元素布局网页，首先要绘制ＡＰＤｉｖ层，其对应的标志符为〈

8、ｄｉｖ〉〈／ｄｉｖ〉，然后把光标置于相应的ＡＰＤｉｖ层内，把所需页面元素插入进来即可。ＡＰＤｉｖ层是可以相互重叠的。因为元素是被限定在ＡＰＤｉｖ内，所以元素相对ＡＰＤｉｖ层是不移动的，但ＡＰＤｉｖ层本身是可以在网页中任意移动。即ＡＰＤｉｖ层将携带内置元素一起移动。用ＡＰ元素布局网页，优点是绘制简单，直观，元素会跟随ＡＰＤｉｖ层移动。缺点是ＡＰＤ