网站的版面设计

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
修改完后,请同学们把自己的设计方案上 交。
再见
2、异常平衡——即非对照形式,但也要平衡和韵 律,达到强调性、高注目性吸引眼球效果。
3、对比——所谓对比,不仅利用色彩、色调等技巧来作表现,在内 容上也可涉及古与今、新与旧、贫与富等对比。
4、凝视——所谓凝视是利用页面中人物视线,使浏览者仿照跟随的 心理,以达到注视页面的效果,一般多用明星凝视状。
样式二
样式五
样式六
版面设计步骤
一.草案 二.粗略布局 三.定案
一.草案
在白纸上加工,没有任何表格,框架和约定俗成 的东西,你可以尽可能的发挥你的想象力,将你 想到的"景象"画上去
这属于创造阶段,不讲究细腻工整,不必考虑细 节功能,只以粗陋的线条勾画出创意的轮廓即可。
尽你的可能多画几张,最后选定一个满意的作为 继续创作的脚本。
优点:页面结构清晰,主次分明。是初学者最容 易上手的布局方法。
缺点:规矩呆板,如果细节色彩上不注意,很容 易让人“看之无味”。
样式一
样式三
2.“口”字型布局。
这是一个象形的说法,就是页面一般上下 各有一个广告条,左面是主菜单,右面放 友情连接等,中间是主要内容。
优点:充分利用版面,信息量大。 缺点:页面拥挤,不够灵活。也有将四边
和文字排放在页面的不同位置。
我们经常用到的版面布局形式:
1.“厂”字型布局 2.“口”字型布局。 3.自由式POP布局。
1.“厂”字型布局。
所谓“厂”字型。就是指页面顶部为横条网站标 志+广告条,下方左面为主菜单,右面显示内容 的布局。
因为菜单条背景教深,整体效果类似汉字“厂”, 所以我们称之为“厂”字型布局。这是网页设计 中用的最广返的一种布局方式。
样式一 样式二 样式三 样式四 样式五 样式六
你为什么喜欢这个样式?
怎么设计一个网站的首页?
设计首页的第一步是设计版面布局。就像
传统的报刊杂那志编么辑,一样版,面我们布可以将网 页 局看。做一张报局纸、有一哪本杂些志分来进类行排版布 版面,指的是浏览器呢看到?的完整的一个页
面(可以包含框架和层)。 布局,就是以最适合浏览器的方式将图片
三.定案
将粗略布局精细化,具体化。 (靠你的智慧和经验,旁敲侧击多方联想,
才能作出具有创意的布局。)
学生活动
请同学们拿出一张作业纸,大概画出你首 页的版式
总结:在布局过程中,我们可以遵 循的原则
1、正常平衡 2、异常平衡 3、对比 4、凝视 5、空白 6、尽量用图片解说
1、正常平衡——亦称"匀称"。多指左右、上下对照形式, 主要强调秩序,能达到安定诚实、信赖的效果。
二.粗略布局
在草案的基础上,将你确定需要放置的功能模块 安排到页面上。
(注:功能模块主要包含网站标志,主菜单,新闻,搜 索,友情链接,广告条,邮件列表,计数器,版权信息 等)。
注意,这里我们必须遵循突出重点、平衡谐调的 原则,将网站标志,主菜单等最重要的模块放在 最显眼,最突出的位置,然后再考虑次要模块的 排放。
空出,只用中间的窗口型设计。
样式四
3.自由式POP布局。
POP出自广告术语,就是指页面布局像一 张宣传海报,以一张精美图片作为页面的 设计中心,菜单栏目自由摆放。常用于时 尚类站点。
优点:漂亮、吸引人。 缺点:就是显示速度慢,文字信息量较少。
作为源自文库面布局还是值得借鉴的。
那么,如何进 行版面布局呢?
网站的版面设计
本节课的学习目标
通过本课的学习: ①、了解网页版面设计的常见布局方式②、
掌握对网站进行布局的方法
其中,第二点是进行网站版面设计时要用到 的技能,必须掌握。
请同学们在下面的网站首页中选出 自己最喜欢的一个
样式一
样式二
样式三
样式四
样式五
样式六
同学们请回复最喜欢的样式
5、空白——空白有两种作用,一方面对其他网站表示突出卓越,另一方面 也表示网页品位的优越感,这种表现方法对体现网页的格调十分有效。
6、尽量用图片解说——此法对不能用语言说服、或用语言无法表达 的情感,特别有效。图片解说的内容,可以传达给浏览者的更多的心 理因素。
学生活动
请同学们请同学们按照自己布局参照提示, 进行修改
相关文档
最新文档