网站页面框架的制作设计

发布：2018-10-29 17:25:28 浏览：3705

网页具有可塑性，无论是水平方向还是垂直方向，这是纸质页面所不具有的。因此，即便是在确定页面网格之前，你也需要确定最适合网站的基本页面框架:固定宽度的页面还是弹性宽度的页面。

确定页面长度要容易一些。最好的方式便是适用于内容的常识性方式。“网络读者不会滚动”这一老话或许适用于10年前或者更久之前的新用户，但是到了现在就不再是那么回事了。随着读者更习惯于将网页作为一个阅读媒介，页面长度的设计限制减少了。可用性研究表明，网页读者必定会通过屏幕滚动来阅读他们感兴趣的内容。

固定页面宽度

固定宽度页面设计使用普遍，尤其是在进行包含很多页面功能子区域的复杂而面设计时，诸如新闻网站。将内容放置在固定宽度的列意味着你的页面布局将不会因为用户的屏幕或浏览器窗口的大小不同而改变。在一个不变的环境中进行设计音味着，你可以固定页面元素的位置并控制行长和间距等版式特性。固定的布局还可以保持有关页面布局中的不同组成部分之间是如何关联的Gestalt视觉和空间逻辑。固定宽度的布局存在一些不利因素。在大的显示屏上，会有较大比例的屏幕外于非使用状态，而在狭窄的浏览窗口中，用户或许会需要水平滚动才能看到完整雷度的页面。此外，在浏览放大的文本时，固定宽度布局不会总是那么完美地作出反应。

如果读者选择放大文本，那么固定宽度的设计或许会产生视觉上的分离常见的混合式替代设计就是将一个或者更多的固定宽度栏与一个弹性宽度的中间栏进行组合，其中中间栏拥有相对简单的内容结构并且可以延伸以填满浏览器窗口的整个宽度。

“安全的”页面宽度是一个不断变换的目标，因为电脑屏幕的平均大小~直在增长。决定最佳页面宽度的最好方式就是使用网络分析学来确定网站浏览者的平均屏幕大小。

固定布局对绝大多数网页浏览环境(台式电脑或笔记本电脑显示屏)而言是最佳的选择，其还可以适用于掌上设备以及其他形式的含移动样式表的移动电脑。不过固定布局将会变得比弹性布局更脆弱并且更容易出现通用可用性问题。因此，我们强烈推荐在设计时选择灵活页面布局。

灵活页面宽度

由于显示屏大小不一，从小型的手机到宽的电影屏幕，要设计成一个标准“安全的”大小的打算往往是不现实的。网页是一个灵活的媒介，用于适应不同的用户以及各不相同的显示设备。与打印的固定于纸质上的文档不-样的是，网页的外观取决于显示大小、分辨率以及颜色设置、浏览器窗口的高度和宽度、软件参数选择(诸如链接和背景颜色设置)以及可用的字体等这类元素。往往最佳的方式就是接受媒介的灵活性，设计出清晰的、可适用于很多现实设备且能被所有用户采用的页面。灵活或“弹性”的页面设计在很多方面都比固定设计更具挑战性，因为灵活的页面设计要求对HTML和其在平台和浏览器中的使用有一个很深的了解。灵活的页面设计还要求设计者能跳出自身的结构并想出能够在不同环境中发挥功效的图形和布局。在定义灵活性页面宽度时有很多种方法。最常用的方法就是使用百分比来定义页面上不同元素的宽度。例如，对一个两栏布局而言，内容可以占据页面宽度的75%，而区域导航占页面剩余的25%。同一页面在打印时将会隐藏导航栏，因为其在纸质页面。上的用处不大，同时将页面宽度调至一个适宜阅读的数值。而在移动设备上，导航是必要的，但狭窄的屏幕宽度不会支持多栏，我们会将两栏折叠为一栏。并将屏幕上的可用空间最大化。

灵活的网站设计在适应不同的显示设备(台式电脑、笔记本电脑、手机、iPod，等等)方面具有很多的优势。此外，灵活性设计更具有通用使用性，因为其可以轻易用于增加文本大小、提升显示颜色和对比，以及增加阅读参数。灵活的页面或许对于依赖于页面大小、版式以及图形之间相对固定的视觉关系的复杂页面布局而言，不是最好的方式。