网站的版面设计

1、本节课的学习目标 n通过本课的学习： n、了解网页版面设计的常见布局方式、 掌握对网站进行布局的方法 其中，第二点其中，第二点是进行网站版面设计时要用到是进行网站版面设计时要用到 的技能，必须掌握。的技能，必须掌握。 请同学们在下面的网站首页中选出 自己最喜欢的一个 样式一 样式二 样式三 样式四 样式五 样式六 同学们请回复最喜欢的样式 n你为什么喜欢这个样式？ 样式一 样式二 样式三 样式四 样式五 样式六 怎么设计一个网站的首页？ n设计首页的第一步是设计版面布局设计首页的第一步是设计版面布局。就像 传统的报刊杂志编辑一样，我们可以将网 页看做一张报纸、一本杂志来进行排版布 局。 n版面

2、，版面，指的是浏览器看到的完整的一个页 面（可以包含框架和层）。 n布局布局，就是以最适合浏览器的方式将图片 和文字排放在页面的不同位置。 那么，版面布 局有哪些分类 呢？ 我们经常用到的版面布局形式：我们经常用到的版面布局形式： n1.“厂厂”字型布局字型布局 n2.“口口”字型布局。字型布局。 n3.自由式自由式POP布局。布局。 1.“厂”字型布局。 n所谓“厂厂”字型字型。就是指页面顶部为横条网站标横条网站标 志志+广告条，广告条，下方左面为主菜单，右面显示内容左面为主菜单，右面显示内容 的布局。 n因为菜单条背景教深，整体效果类似汉字“厂”, 所以我们称之为“厂”字型布局。这是网页设

3、计 中用的最广返的一种布局方式。 n优点：优点：页面结构清晰，主次分明。是初学者最容 易上手的布局方法。 n缺点：缺点：规矩呆板，如果细节色彩上不注意，很容 易让人“看之无味”。 样式一 样式三 2.“口口”字型布局。字型布局。 n这是一个象形的说法，就是页面一般这是一个象形的说法，就是页面一般上下上下 各有一个广告条，左面是主菜单，右面放各有一个广告条，左面是主菜单，右面放 友情连接等，中间是主要内容。友情连接等，中间是主要内容。 n优点：优点：充分利用版面，信息量大。充分利用版面，信息量大。 n缺点：缺点：页面拥挤，不够灵活。也有将四边页面拥挤，不够灵活。也有将四边 空出，只用中间的窗口型

4、设计。空出，只用中间的窗口型设计。 样式四 3.自由式自由式POP布局。布局。 nPOP出自广告术语，就是指页面布局出自广告术语，就是指页面布局像一像一 张宣传海报张宣传海报，以一张精美图片作为页面的，以一张精美图片作为页面的 设计中心，菜单栏目自由摆放。常用于时设计中心，菜单栏目自由摆放。常用于时 尚类站点。尚类站点。 n优点：漂亮、吸引人。优点：漂亮、吸引人。 n缺点：就是显示速度慢，文字信息量较少。缺点：就是显示速度慢，文字信息量较少。 作为版面布局还是值得借鉴的。作为版面布局还是值得借鉴的。 样式二 样式五 样式六 那么，如何进 行版面布局呢？ 版面设计步骤版面设计步骤 n一一.草案草

5、案 n二二.粗略布局粗略布局 n三三.定案定案 一一.草案草案 n在白纸上加工在白纸上加工，没有任何表格，框架和约定俗成，没有任何表格，框架和约定俗成 的东西，你可以尽可能的发挥你的想象力，将你的东西，你可以尽可能的发挥你的想象力，将你 想到的想到的景象景象画上去画上去 n这属于这属于创造阶段创造阶段，不讲究细腻工整，不必考虑细，不讲究细腻工整，不必考虑细 节功能，只以粗陋的线条勾画出创意的轮廓即可。节功能，只以粗陋的线条勾画出创意的轮廓即可。 n尽你的可能多画几张，最后选定一个满意的作为尽你的可能多画几张，最后选定一个满意的作为 继续创作的脚本。继续创作的脚本。 二二.粗略布局粗略布局 n在

6、草案的基础上，将你在草案的基础上，将你确定需要放置的功能模块确定需要放置的功能模块 安排到页面上。安排到页面上。 n(注：功能模块主要包含网站标志注：功能模块主要包含网站标志,主菜单主菜单,新闻新闻,搜搜 索索,友情链接友情链接,广告条广告条,邮件列表邮件列表,计数器计数器,版权信息版权信息 等等)。 n注意，这里我们必须遵循突出重点、平衡谐调的注意，这里我们必须遵循突出重点、平衡谐调的 原则，将网站标志，主菜单等最重要的模块放在原则，将网站标志，主菜单等最重要的模块放在 最显眼，最突出的位置，然后再考虑次要模块的最显眼，最突出的位置，然后再考虑次要模块的 排放。排放。 三三.定案定案 n将粗

7、略布局将粗略布局精细化，具体化。精细化，具体化。 n（靠你的智慧和经验，旁敲侧击多方联想，（靠你的智慧和经验，旁敲侧击多方联想， 才能作出具有创意的布局。）才能作出具有创意的布局。） 学生活动 n请同学们拿出一张作业纸，大概画出你首请同学们拿出一张作业纸，大概画出你首 页的版式页的版式 总结：在布局过程中，我们可以遵总结：在布局过程中，我们可以遵 循的原则循的原则 1、正常平衡、正常平衡 2、异常平衡、异常平衡 3、对比、对比 4、凝视、凝视 5、空白、空白 6、尽量用图片解说、尽量用图片解说 n1、正常平衡、正常平衡亦称亦称匀称匀称。多指左右、上下对照形式，。多指左右、上下对照形式， 主要强

8、调秩序，能达到安定诚实、信赖的效果。主要强调秩序，能达到安定诚实、信赖的效果。 n2、异常平衡、异常平衡即非对照形式，但也要平衡和韵即非对照形式，但也要平衡和韵 律，达到强调性、高注目性吸引眼球效果。律，达到强调性、高注目性吸引眼球效果。 n3、对比、对比所谓对比，不仅利用色彩、色调等技巧来作表现，在内所谓对比，不仅利用色彩、色调等技巧来作表现，在内 容上也可涉及古与今、新与旧、贫与富等对比。容上也可涉及古与今、新与旧、贫与富等对比。 n4、凝视、凝视所谓凝视是利用页面中人物视线，使浏览者仿照跟随的所谓凝视是利用页面中人物视线，使浏览者仿照跟随的 心理，以达到注视页面的效果，一般多用明星凝视状

9、。心理，以达到注视页面的效果，一般多用明星凝视状。 n5、空白、空白空白有两种作用，一方面对其他网站表示突出卓越，另一方面空白有两种作用，一方面对其他网站表示突出卓越，另一方面 也表示网页品位的优越感，这种表现方法对体现网页的格调十分有效。也表示网页品位的优越感，这种表现方法对体现网页的格调十分有效。 n6 6、尽量用图片解说、尽量用图片解说此法对不能用语言说服、或用语言无法表达此法对不能用语言说服、或用语言无法表达 的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心 理因素。理因素。 学生活动 n请同学们请同学们按照自己布

10、局参照提示，请同学们请同学们按照自己布局参照提示， 进行修改进行修改 n修改完后，请同学们把自己的设计方案上修改完后，请同学们把自己的设计方案上 交。交。 再见 请同学们在下面的网站首页中选出 自己最喜欢的一个 样式一 样式三 1.“厂”字型布局。 n所谓“厂厂”字型字型。就是指页面顶部为横条网站标横条网站标 志志+广告条，广告条，下方左面为主菜单，右面显示内容左面为主菜单，右面显示内容 的布局。 n因为菜单条背景教深，整体效果类似汉字“厂”, 所以我们称之为“厂”字型布局。这是网页设计 中用的最广返的一种布局方式。 n优点：优点：页面结构清晰，主次分明。是初学者最容 易上手的布局方法。 n缺点：缺点：规矩呆板，如果细节色彩上不注意，很容 易让人“看之无味”。 样式四 三三.定案定案 n将粗略布局将粗略布局精细化，具体化。精细化，具