论网页设计中元素定位和布局.docVIP

论网页设计中元素定位和布局 　　摘 要：本文重点对网页设计中元素的定位和布局进行了探究，然后针对这些问题提出了一些实用的定位及布局的技术，旨在促进计算机网络及信息技术的不断进步。 　　关键词：网页设计；元素定位；布局 　　网页元素定位一直是WEB标准应用中的难点，如果网页中的元素定位不合理，那么可能应实现的效果实现不了。只有结合实际情况，灵活运用这些技术，理清了定位的原理，那才能让网页实现的更加完美。 　　一、利用表格对网页元素定位 　　一般的设计者大多使用表格定位的方法对页面元素进行定位，其在网页中的应用已经突破了传统的用来记载大量数据的功能，它可以使插入页面的图像和文本等对象被限制在某一固定位置。现今所有的综合性网站都使用了大量的表格，利用表格来组织网页内容，可以设计出布局合理、结构协调、美观匀称的网页。 　　浏览器解释html页面的顺序是自上而下依次逐行解释和显示，只有等到浏览器解释到了页面的最后，才会将整个页面的内容在访问者眼前显示出来。一些优秀网站的设计，通常也都采用表格来定位，而且大多数都是一行一行来设计的，当然每个单行排列的表格里也存有表格嵌套，但整个页面的内容最好不要放于一张大表格里面。因此在使用表格进行网页元素布局时，应尽量避免使用整个表格。 　　总表格和嵌套表格在设置宽度和高度时需要注意的是：总表格设置的是网页整体的排版，为了使之在不同分辨率的显示器下能保持统一的外观，总表格的高度和宽度一般使用像素值。而为了使嵌套表格的高度和宽度不和总表格发生冲突，嵌套表格一般使用百分比设置高度和宽度。 　　由于表格定位只能解决平面布局中的定位问题，随着人们对平面布局精确度要求的提高和三维空间定位需求的增加，越来越多的网页采用层来实现元素的定位。 　　二、利用图层对网页元素定位 　　在设计网页时，必须对页面元素进行定位，使页面布局整齐、美观。层就是一种新的网页元素定位布局技术，因为图层具有像素级精确定位特性以及层叠特性，所以可以利用图层技术来定位某一网页元素在网页中的绝对位置。例如，要定位一个图片在页面上的绝对位置时，可以先绘制一个图层，接着将图片插入到该图层中，然后选择该图层，在层属性面板中设置层的右上坐标即可。层具有隐藏属性，利用隐藏属性可以控制页面元素的显示与隐藏，增加网页的动态效果。把页面元素置于层中，用户浏览页面时，当鼠标移到一个图片上时，显示与该图片有关的文字说明；当鼠标移出该图片时，文字说明隐藏。这种效果就可以利用层的技术实现。配合时间轴的使用，可同时移动一个或多个层，从而轻松地制作出动态效果。层具有透明特性，在排列图层时可以观察到网页元素的定位情况，并且在移动和编辑某个图层时不会影响其它层。但是当改变显示器分辨率，改变窗口大小之后，层就错位了。解决这些问题可以通过层的相对定位来实现，必要的时候还可以实现表格和层的相互转换。在网页设计中灵活地应用表格和层可以设计出结构整齐而美观的页面。 　　三、利用框架对网页元素定位 　　框架是将一个网页分割成多个html页面，每个框架页都是一个独立的html页面，通过框架集的使用，这些框架能够很好地在一起运作，使网站的风格一致。框架的作用通常被用来把浏览器窗口划分为若干区域，每个区域可以分别显示不同的网页，定义页面的导航区域和内容区域，它的主要特征是网页中的一部分固定不动，而另一部分换页更新内容。这样可以用来增强页面的导航功能。 　　框架是一种成熟的版面控制技术，它的应用虽然可以有效地控制网页的版面，但由于框架中链接目标属性较复杂，因此对于网页制作初学者来说使用框架过程中很难控制页面显示。 　　四、利用设计网页布局 　　dream weaver为用户提供了几个不同的途径来创建和控制网页页面布局。页面布局是一项重要的设计，创建页面布局的一种常用方法是使用表格对元素的定位，但是，使用表格进行布局不太方便，因为最初创建表格是为了了显示表格数据，而不是用于对web页进行布局，为了简化使用表格进行页面布局的过程，dream weaver提供了布局视图。 　　在布局模式中，可以使用表格作为基础结构来设计自己的网页布局，并且可以避免使用表格带来的缺陷，例如可以在网页上轻松地画出单元格，让后定制和移动单元格到任何需要的地方，创建的布局可以有固定的宽度或者可以占满整个浏览器窗口。当然也可以使用传统的表格来创建网页布局，或者是先创建多个互不重叠的层，让后将它们转换为表格，但是dream weaver的布局视图是创建页面布局更简单的方法。 　　由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给页面范围变得越来越小。 　　五、利用库与模板 　　模板和库是批量制作网页，统一网站风格的重要工具。在网页的制作过程中，常常会制作很多布局