第3节 页面分析与设计.

Presentation on theme: "第3节 页面分析与设计."— Presentation transcript:

1 第3节 页面分析与设计

2 主页是来访者 第一眼看到的页面

3

4 一、确定主页的功能模块 网站主页的功能模块是指需要在主页上实现的主要内容和功能。一般的站点都需要这些模板： 网站名称（logo） 广告条（banner） 导航栏（site map） 新闻（news） 搜索（search） 友情链接（links） 版权（copyright）等

5 二、主页的版面设计 版面指的是通过浏览器看到的一个完整页面。 版面设计要注意结构平衡、色彩悦目，并且风格上要 与网站主题相一致。 LOGO
示例一 LOGO 导航栏 banner 内 容 一 二 三 版权信息

6 示例二 网站 名称 搜索 导航栏 图片信息 其他 内容 友情链接 版权信息 内容

7 网页常见的布局类型： 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合结构布局、封面型、FLASH型等。
1、国字型结构布局 国字型也可以称为“同”字型，是一些大型网站所广泛采用的类型，即最上面网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分别是一些小条内容，中间是主体部分，与左右一起罗列到底，最下面是一些基本信息，联系方式以及版权声明。是网上见到最多的一种结构类型。

8 标题 左边内容 右边内容 横幅 “国”字型

9 2、拐角型 上面标题 右边正文 左边导航链接 最下面为网站辅助信息
上面为标题及广告横幅，左边为一窄列链接等，右列为很宽的正文，下面也是一些网站的辅助信息，也是网站中比较常见的一种框架结构类型。

10 3、标题正文型 最上面标题 下面是正文 这种类型为最上面是标题或类似标题的一些内容，下面是正文，比如一些文章
或注册页面等就是这种类型的风格。

11 4、左右框架型 右边为正文 左边导航链接 这是一种左右分别为两页的框架结构，一般左面是导航链接，右边是正文，有的上面会是一个小的标题或标志。大部分的大型论坛以及一些企业网站均喜欢采用这种结构的布局。这种类型结构非常清晰，一目了然。

12 5、上下框架型 上面可以为标题 下面是正文 与左右框架区别仅仅在于上下框架布局是一种分为上下网页的框架结构。

13 6、综合型框架 综合框架布局综合了上面两个结构，是相对复杂的一种，较为常见的类似于拐角型结构，只是采用了框架

14 7、封面型 这种类型基本出现在一些网页的首页，大部分为一些设计精美的图片上搭配一些
小的动画，再放上几个简单的链接，或者是一个“进入”的链接，适合出现在企业网 站和个人主页中，如果处理的好，会给人带来一种赏心悦目的感觉。

15 8、FLASH型 只是采用了非常流行的flash，与其他页面不同的是，它是动态的更多的带来了一些视觉与听觉多样的效果。

16 网页配色风格 白光，经过分析在色带上可以看到，事实上包括了7种颜色。 色彩有冷、暖之分，其巧妙运用会达到意想不到的效果。
色彩具有五颜六色，千变万化的特点。平时我们看到的 白光，经过分析在色带上可以看到，事实上包括了7种颜色。 色彩有冷、暖之分，其巧妙运用会达到意想不到的效果。 红色代表：热情、活泼、热闹、温暖、幸福 橙色代表：光明、华丽、兴奋、快乐。 黄色代表：明朗、愉快、高贵、希望 绿色代表：平静、和平、柔和、安静、青春 蓝色代表：永恒、沉静、理智、诚实 紫色代表：高贵、魅力、自傲 白色代表：纯洁、朴实、神圣 灰色代表：消极、谦虚、平凡、中庸、寂寞 黑色代表：坚实、严肃、粗莽

17 小组交流与讨论： 以下是某些小组同学完成的主页设计草图，请 找出其中存在的问题，并提出修改意见。 网站主题 栏目一 栏目二 栏目三 栏目四
栏目五 版权信息 友情链接 与我联系 网站主题 栏一 栏二 栏三 栏四 栏五 与我联系 内容 友情链接 版权信息

18 网站主题 版权信息 友情链接 内容 友情链接 版权信息 栏目一 栏目二 栏目三 栏目四 栏目五 与我联系 网站主题 栏目一 栏目二 栏目三
栏目一 栏目二 栏目三 栏目四 栏目五 与我联系 网站主题 栏目一 栏目二 栏目三 栏目四 栏目五 与我联系 内容 友情链接 版权信息

19 课堂小结 1、了解一个网站主页的功能模块，学会确定自己网站主页的功能模块；
2、学会分析一个网站主页的版面设计，能够确定自己网站主页的布局和排版样式。