版式设计网页

二、网页的布局-T型
http://www.chaoshan.cn/
二、网页的布局-标题正文型
一般用于显示文 章页面、新闻页 面和一些注册页 面等。
二、网页的布局-左右框架型
是一些大型论坛 和企业经常使用 的一种布局结构。
这是一种被垂直 划分为两个或更多 个框架的网页布局 结构,具有结构清晰、 内容一目了然的优 点。
6
Banner
Banner为网页中的广告条，又被称作旗帜、 网幅或横幅，是一种可以由文本、图像和动画相结 合而成的网页栏目。
在设计Banner时，既可遵循以下标准，以方 便网站的广告用户设计广告。同时，也可灵活根据 网页的版式对其尺寸进行调节，以符合网页整体的 风格和布局。
名称 摩天大楼形 中级长方形 正方形弹出 宽摩天大楼 大长方形
子栏，然后再将这些子栏拼接在一起，形成整体的 效果。同时，还可以对子栏进行优化排列，提高用 户的体验。如网页的内容较少，则还可以使用单独 的内容栏，通过大量的图像使网页更加美观。
9
版尾版块 版尾，顾名思义是网页页面最底端版块，通常
放置网站的版权信息。 格式如下： Copyright [dates] by [author/owner] 清华大学网站的版尾信息为“©2010 Tsinghua
网页版式设计
主讲人L：O陈G逸O娴
网页版式设计
❖ 网页是信息传播的一种载体，在设计上同其他出 版物如报纸、杂志等有许多共同之处，也要遵循一 些设计的基本原则。但是，由于表现形式、运行方 式不同，网页设计同时又具有其特有的规律。
❖ 1．版面尺寸规范化 ❖ 2．媒介形式的多样化 ❖ 3．有限的界面颜色数量 ❖ 4．界面的嵌套性 ❖ 5．具有控制功能
长方形 竖长方形
Banner面积
120px×600px
300px×250px
250px×250px
160px×600px
336px×280px
180px×150px
7
240px×400px
Banner
内容版块 网页的内容版块通常是网页的主体部分。这一
版块可以包含各种文本、图像、动画、超链接等。 在设计内容栏时，用户可以先独立地设计多个
上下框架型: 通常应用于一些栏 目较少的网站，或 有整体背景图像的 网站。
二、网页的布局-封面型
如一本书，封面 型的网页常有一 个精美的封面 封面使用较好效 果的平面设计， 并有几个链接或 是只有一个“进 入”链接 用户单击链接以 后既可以进入网 页的内容。
二、网页的布局-变化型
为综合框架型， 如右图，是上、 左、右的结构。
二、网页的布局
❖ 网站分为很多不同的网页，比如主页、栏目首页、 内容网页等。不同的网页需要不同的版面布局。
隆尧之窗――网络文学网站主页
隆尧之窗――网络文学网站的内容网页
二、网页的布局
6、变化型
网页布局
5、封面型 4、左右框架型
1、“国”型字 2、T型
3、标题正文型
二、网页的布局-“国”字型
纯黄色的网站一般不会有，都是跟其它颜色 搭配使用，例如跟红色，桔色一起搭配制作饮食 类网站等。
橙色
灯光：温暖，温馨； 秋叶：成熟，收获； 桔子：甘甜，浓香；
橙色
橙色对视觉的刺激没有红色大，既有红色的 热情，又兼有黄色的光明，总给人以活泼以及朝 气蓬勃的感觉。橙色还能提起人的食欲。
因此橙色多用于儿童网站，食品类网站的界 面。
三、网站颜色风格
红色 黄色 橙色 绿色 蓝色 紫色 白色 灰色 黑色
红色
苹果：轻香的，甜甜的； 太阳：热烈的，干燥的； 血：革命的，恐怖的； 辣椒和火锅：刺激的，浓香的； 大红的灯笼和喜字：喜庆的，欢乐的； 警告牌：危险的； 一个上火的表情：吼叫，震动等。
红色
红色的纯度高，能引起视觉冲击力，让人产生 危险、愤怒、热烈、革命、辣、浓香、警示、激情 等心理反应。
因此红色易用于：过年过节、公司年会、表彰 大会、游戏等的宣传页面，饮食、婚庆等方面的企 业展示页面，还有跟党、政、革命等有关的门户类 页面等。
黄色
向日葵：积极上向，希望，光明； 黄金：富贵，华丽； 柠檬：微湿，轻香，酸等；
黄色
黄色明视度高 。它带给人的心理感受是明快， 阳光，也有警告 等意。
logo
是标识网站的名称，并为用户提供识别的标记。 绝大多数网站都有一个独特的Logo。Logo对于 网站而言是唯一的。 logo要尽可能的放在每个页面上最突出的位置。
导航条 导航条是网站的重要组成元素。其可以索引网
站内容，帮助用户快速访问网站功能。 导航条内包含的是网站功能的按钮或链接，其
项目的数量不宜过多。通常同级别的项目数量以3 到7个为宜。一个网站往往可包含多个级别的导航 条，例如主导航条、登录导航条、友情链接导航条 等。有时导航条也会与banner结合使用，通过图 像增强导航条的表现力。
University. All Rights Reserved.”
10
版尾版块
❖ “©2010 Tsinghua University. All Rights Reserved.”
Baidu Nhomakorabea
❖ Copyright 可以由copyright符号“©”代替
❖ dates可以是具体的年份，也可以是由年份表现 的时间段
绿色
芽：生命； 青山，森林，草原：安全，和平，安 静，青春，自然，轻松，清凉等；
绿色
在商业设计中，绿色所传达的清爽，理想， 希望，生长，安全，和平，安静，青春，自然的 意象，符合了服务业，卫生保健业的诉求。
❖ author/owner为作者或所有者
❖ 在作者/所有者之后，可以添加“All Rights
Reserved.”表示版权所有。但“All Rights
Reserved.”的大小写和最后英文句号”.” 不可省
略。如需要添加中文的“版权所有”，应写在英文
版权所有之后。
http://www.chaoshan.cn/
❖ 目前常见的网页所采用的分辨率有：640*480像 素、800*600像素、1024*768像素、1280 像素×1024像素或更高。
一、网页板块构成
❖ 网页是由各种版块构成的。Internet中的网页内 容各异。然而多数网页都是由一些基本的板块组成 的，包括Logo、导航条、Banner、内容版块、 版尾等。