信息化能力提升
当前位置：首页 >> 社会服务 >> 教育培训 >> 信息化能力提升
快速了解-网页设计
文章来源：资源研发中心----发表时间：2018年9月28日
一、界面尺寸的选定：
由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于无法突破显示器的范围，且浏览器也占去不少空间，留下可以看的页面范围变得越来越小。目前最小分辨率在1024*768的情况下，页面的显示尺寸为：1004*600，比较常见的分辨率在1366*768，页面的显示尺寸为：1346*600。从这个数据可以看出，分辨率越高页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因。一般浏览器的工具栏都可以取消或者增加，当显示或关闭全部工具栏时，页面的尺寸是不一样的。
在网页设计过程中，向下拖动页面是唯一给网页增多更多内容（尺寸的方法）。值得注意的是除非能肯定站点的内容能吸引用户拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，则需要使用链接方便访问者浏览。
二、网页分类
根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化）进行网站功能策划，然后进行页面设计美化工作。网站作为企业对外宣传物料的其中一种，精美的网页设计对于提升企业互联网品牌形象至关重要。大至分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。
三、网页布局
网页可以说是网站构成的基本元素。它的组成大致可以分为：
1.“国”字型
也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的最多的一种结构类型。
.jpg)
2.拐角型
这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
.jpg)
3.标题正文型
这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这类。
.jpg)
4.封面型
这种类型基本上是出一些网站的首页，大部分为一些精美的平面设计结合一些小动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页图片上做链接而没有任何提示。这种类型大部分是企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
.jpg)
5.“T”结构布局
所谓“T”结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”结构布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等。
这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以最大可能性获取，而且很方便，其次是页面结构清晰，主次分明、易于使用。
.jpg)
6.“口”型布局
这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。
这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别是顶部中央的一排小图标起到了活跃气氛的作用。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。
.jpg)
7.“三”型布局
这种布局多用于国外网站，国内用得不多。其特点是页面上横向两条色块，将页面整体分割为4个部分，色块中大多放广告条。
.jpg)
8.对称对比布局
顾名思义，它指采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型网站。其优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。
9.POP布局
POP源自广告术语，指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类网站，漂亮吸引人，缺点是速度慢，因为页面都是大图构成。
四、网页版式组成
1.页头
页头又可称为页眉，页眉的作用是定议页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。
2.导航
文本在页面中出现都以行或者块（段落）出现，它们的摆放位置决定着整个页面布局的可视性。
3.内容
4.页脚
页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。易知许多公司信息都是放置在页脚的。
