文档介绍：第3章网页项目设计
网页功能概要设计
功能详细设计
绘制设计草图
网页功能概要设计
网页功能概要设计给出整个网站模块组成,确定网站的栏目版块。
例:有如下网站首页中的导航栏:
在该网站中主要包括以下几个模块,并能通过首页分别链接到各个子模块: 文章;web学院;相册;地图;音乐;视频;聊天;QQ空间互踩;网络证件;留言板;论坛。
功能详细设计
在详细设计阶段要给出每个页面中使用元素。
例:以下是某网站中的一个页面
在本页中主要包括以下元素:logo、导航栏、图片、小flash动画、文字、网页控件、版权等。其它网页详细设计同上。
绘制设计草图
根据草图类型,手绘每一个页面所使用的类型以及网页的大体布局。
1、常见网页布局类型
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型,重点讨论常用的以下几种类型。
(1)“同”字型(“国”字型):
页面顶部为主导航条,左右两侧分列出二级栏目内容,中间是主要内容,是最常见的网页结构,具有直观均衡、结构清晰的特点。
绘制设计草图
(2)“匡”字型:(“广”字型或拐角型)
形式上是将同字型旋转90度。上面是标题及主导航条,左侧是导航链接,右列是很宽的正文,下面是网站辅助信息。优点是充分利用版面,信息量大。
(3)“吕”字型(“三”字型):
这种类型将页面整体分割为两部分,即上面是标题或导航,下面是正文。例如一些文章页面或注册页面等就是这一种类。特点是内容清晰,一目了然。
绘制设计草图
(4)左右型:
这是一种左右为分别两页的框架结构,一般左面,是导航链接,有时最上面会有一个小的标题或标志,右面是正文。这种类型结构布局比较灵活,富有弹性。
(5)封面型:(POP型、FLASH型:加入动画元素)
这种类型基本上是出现在一些企业网站和个人网站主页的首页,大部分为一些精美的平面设计,或结合动画放上几个简单的链接,优点是视觉冲击力强。
绘制设计草图
2、网页的构成
(1)页面标题
标题位置:出现在浏览器的标题栏中
功能作用:反映网页的主要内容,便于搜索引擎搜索。
编辑方法:将标题内容插入在HTML文档中的〈title〉和〈/title〉之间。
(2)网站标志(logo)
标志位置:一般放在显要的位置,通常在页眉的前部。
标志功能:一是进行网站链接;二是体现网站特色及文化内涵。
制作要求:符合国际标准、精美独特、与网站的整体风格相融。
尺寸标准: 88*31; 120*60; 120*90; 468*60
绘制设计草图
(3)页眉(banner)
页眉位置:处于网页的最顶端,通常与整个页面等宽。
功能作用:放置站点名字图片或标志,展示宣传网站的广告和动画。
制作要求:设计制作应注意与整个页面协调。
(4)导航栏
显示位置:可以设置导航栏显示在网页的顶部、底部、左侧、右侧。
功能作用:添加分类信息,提供到网站不同区域的链接。
制作要求:导航清晰合理,链接关系正确,变更扩展方便。
绘制设计草图
(5)主内容区
功能作用:是网页的主体元素,一般放置二级链接内容的标题、提要、摘录。
表现原则:合理分割板块,文字与图片配合巧妙、文字和背景和谐对比。
排布原则:符合视觉流动习惯,重要的内容排在左部、上部。
绘制设计草图
(6)页脚(版权)
页脚位置:位于网页的最底部,和页头相呼应。
作用功能:标注站点所属公司名称、地址,网站版权、制作者信息。
制作要求:文字清晰简洁,字号小于正文。