没有合适的资源?快使用搜索试试~ 我知道了~
网页设计中排版与布局基础
3星 · 超过75%的资源 需积分: 11 70 下载量 41 浏览量
2009-04-15
18:17:54
上传
评论
收藏 153KB DOC 举报
温馨提示
试读
38页
1. 网页布局设计基础 2. 网页布局理念 3. 网页布局的步骤 4. 网页布局的方法 5. 网页布局的技术 6. 网页布局的禁忌 7. 手把手教你网页布局的基本元素 8. 主页设计中的艺术处理原则 9. 网站规划书的写作规范! 10. 界面设计之图标设计规范 11. 网页设计的布局理念 12. 网页布局位置重心与位置间的对比关系 13. 网页的版式设计---文字的格式化 14. 网页的版式设计---版式的基本类型 15. 网页的版式设计---网页的排版与布局 16. 网页中的平衡、对比、连贯和留白 17. 文字排版在网页制作中应遵守的原则 18. 网站制作中的版式原理和比例 19. 网页设计中排版与布局的重要性 20. 注意你的网站布局对访者的友好程度 21. 网页设计中的版式原理--中心篇
资源推荐
资源详情
资源评论
网页设计中排版与布局基础
目录
1. 网页布局设计基础
2. 网页布局理念
3. 网页布局的步骤
4. 网页布局的方法
5. 网页布局的技术
6. 网页布局的禁忌
7. 手把手教你网页布局的基本元素
8. 主页设计中的艺术处理原则
9. 网站规划书的写作规范!
10. 界面设计之图标设计规范
11. 网页设计的布局理念
12. 网页布局位置重心与位置间的对比关系
13. 网页的版式设计 --- 文字的格式化
14. 网页的版式设计 --- 版式的基本类型
15. 网页的版式设计 --- 网页的排版与布局
16. 网页中的平衡、对比、连贯和留白
17. 文字排版在网页制作中应遵守的原则
18. 网站制作中的版式原理和比例
19. 网页设计中排版与布局的重要性
20. 注意你的网站布局对访者的友好程度
21. 网页设计中的版式原理 -- 中心篇
网页布局设计基础
正如你现在所看到的一样,网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站
点。虽然内容很重要,但只有当网页布局和网页内容成功接合时,这种网页或者说站点才是受人喜欢的。
取任何一面你都无法留住太过“挑剔”的访问者。
一网页布局的基本概念
最开始,网页呈现在你面前的时侯,它就好像一张白纸,它需要你任意挥洒你的设计才思。在开始
的时侯,你需要明白,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种约定俗成的标准或
者说大多数访问者的浏览习惯,那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计
方案,但如果你是初学者,那么最好明白网页布局的基本概念。
页面尺寸:
由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且
因为浏览器也将占去不少空间,留下给你的页面范围变得越来越小。一般分辨率在 的情况下,
页面的显示尺寸为: 个象素;分辨率在 的情况下,页面的显示尺寸为 个象素;
分辨率在 的情况下,页面的显示尺寸为:。从以上数据可以看出,分辨率越高页面
尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加,那么
当你显示全部的工具栏时,和关闭全部工具栏时,页面的尺寸是不一样的。
在网页设计过程中,向下拖动页面是惟一给网页增加更多内容尺寸的方法。但我想提醒大家除非
你能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超
过三屏的内容,那么你最好能在上面做上页面内部连接,方便访问者浏览。
整体造型:
什么是造型,造型就是创造出来的物体形象。这里是指页面的整体形象,这种形象应该是一个整体,
图形与文本的接合应该是层叠有序。虽然,显示器和浏览器都是矩形,但对于页面的造型,你可以充分运
用自然界中的其它形状以及它们的组合:矩形,圆形,三角形,菱形等。
对于不同的形状,它们所代表的意义是不同的。比如矩形代表着正式,规则,你注意到很多 和
政府网页都是以矩形为整体造型;圆形带表着柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页
面整体造型;三角形代表着力量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角
形为页面整体造型;菱形代表着平衡,协调,公平,一些交友站点常运用菱形作为页面整体造型。虽然不
同形状带表着不同意义,但目前的网页制作多数是接合多个图形加以设计,在这其中某种图形的构图比例
可能占的多一些。
页头:
页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。
这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计
和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。
文本:
文本在页面中出现都数以行或者块段落出现,它们的摆放位置决定者整个页面布局的可视性。在
过去因为页面制作技术的局限,文本放置的位置的灵活性非常小,而随着 的兴起,文本已经可以
按照自己的要求放置到页面的任何位置。
页脚:
页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。你能
看到,许多制作信息都是放置在页脚的。
图片
图片和文本是网页的两大构成元素,却一不可。如何处理好图片和文本的位置成了整个页面布局的
关键。而你的布局思维也将体现在这里。
多媒体
除了文本和图片,还有声音,动画,视频等等其它媒体。虽然它们不是经常能被利用到,但随着动
态网页的兴起,它们在网页布局上也将变得更重要。
网页布局理念
网页可以说是网站构成的基本元素。当我们轻点鼠标,在网海中遨游,一副副精彩的网页会呈现在
我们面前,那么,网页的精彩与否的因素是什么呢?色彩的搭配、文字的变化、图片的处理等,这些当然
是不可忽略的因素,除了这些,还有一个非常重要的因素——网页的布局。下面,我们就有关网页布局谈
论一下。
网页布局类型
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封
面型、 型、变化型,下面分别论述。
、“国”字型:也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横
幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到
底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的
一种结构类型。
、拐角型:这种结构与上一种其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅 ,
接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。在这种类型中,一种
很常见的类型是最上面是标题及广告,左侧是导航链接。
、标题正文型:这种类型即最上面是标题或类似的一些东西,下面是正文,比如一些文章页面或
注册页面等就是这种类。
、左右框架型:这是一种左右为分别两页的框架结构,一般左面是导航链接,有时最上面会有一
个小的标题或标致,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢
采用。这种类型结构非常清晰,一目了然。
、上下框架型:与上面类似,区别仅仅在于是一种上下分为两页的框架。
、综合框架型:上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”结
构的,只是采用了框架结构。
、封面型:这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小
的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示 。
这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。
、 型:其实这与封面型结构是类似的,只是这种类型采用了目前非常游戏行的 ,与封
面型不同的是,由于 强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,
绝不差于传统的多媒体。
、变化型:即上面几种类型的结合与变化,比如本站在视觉上是很接近拐角型的,但所实现的功
能的实质是那种上、左、右结构的综合框架型。
关于第一屏
所谓第一屏,是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢?
其实这是未知的。一般来讲,在 的屏幕显示模式这也是最常用的下,在 安装后默认的状态
即工具栏地址栏等没有改变下, 窗口内能看到的部分为 !!,一般来讲,我们以这个大小为
标准就行了,毕竟,在无法适合所有人的情况下,我们只能为大多数考虑了。
说了那么多,无非是一个标准的问题,其实接下来不用我说大家也能想到,第一屏当然要放最主要
的内容,关键要知道的是,我们要对第一屏能显示的面积要有个估计,而不要仅仅以自己的机器为准。其
实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。
有关导航栏的位置
导航栏能让我们在浏览时容易的到达不同的页面,是网页元素非常重要的部分,所以导航栏一定要
清晰、醒目,一般来讲,导航栏要在“第一屏”能显示出来,但是有时第一屏可能会小于上面所说的
!,积于这点考虑,那种横向放置的导航栏要优于纵向的导航栏考虑,原因很简单:如果浏览者的第
一屏很矮,横向的仍能全部看到,而纵向的就很难说了,因为窗口的宽度一般是不会受浏览器设置影响的 ,
而纵向的则不确定性要大的多。
什么样的布局是最好的
这是初学者可能会问的问题。其实这要具体情况具体分析的:比如如果内容非常多,就要考虑用“国
字型”或拐角型;而如果内容不算太多而一些说明性的东西比较多,则可以考虑标题正文型;那几种框架
结构的一个共同特点就是浏览方便,速度快,但结构变化不灵活;而如果是一个企业网站想展示一下企业
形象或个人主页想展示个人风采,封面性是首选; 型更灵活一些,好的 大大丰富了网页,但
是它不能表达过多的文字信息。还没有提到的就是变化型了,我只是想把这个留给读者了,因为,只有不
断的变化才会提高,才会不断丰富我们的网页!
网页布局的步骤
一、一般步骤
构思
根据网站的内容整体风格,设计版面布局。你可以参考其他优秀的网站,调用自己的各种知识
储备,特别是艺术方面的,在大脑中不断地酝酿、碰撞,往往不经意间就有闪光的思想出现。这时你就要
抓紧时间把它变成文字的东西,用笔在纸上粗略地勾画出布局的轮廓,不要讲究细节,只要有一个轮廓就
行。当然你也可能有多种想法,尽量都把它们画出来,然后再比较,采用一种比较满意的方案。
初步填充内容
这一步就要把一些主要的内容放到网页中,例如网站的标志、广告条、菜单、导航条、计数器
等,要注意重点突出,把网站标志、广告条、菜单放在最突出、最醒目的位置,然后再考虑其它元素的放
置。
细化
在将各主要元素确定好之后,下面就可以考虑文字、图像、表格等页面元素的排版布局了。在
这一步,你可以利用网页编辑工具把草案做成一个简略的网页,当然对每一种元素所占的比例也要有一个
详细的数字,以便以后修改。
经过以上几步,相信你的网页布局已经初具规模了,让别人看一下,给你提些建议,再不断修
改,一个很有特色的网页就要浮出水面了。
剩余37页未读,继续阅读
资源评论
- 俺老刘2012-08-08介绍的太简单了吧
- mimi_mimi772012-02-11内容有点老,且没有配图说明。全是文字。
kannla
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 农村信用社联合社计算机信息系统投产与变更管理办.docx
- 农村信用社联合社计算机信息系统数据管理办法.docx
- 利用SPSS作临床效度分析线上计算网站介绍-医学研究部统计谘.(医学PPT课件).ppt
- 利用Zabbix监控mysqldump定时备份数据库状态.docx
- 利用计算机解决问题的基本过程.doc
- 化工铁路通信工程总结.doc
- 北京大学网络教育软件工程作业.docx
- 医药公司(连锁店)计算机操作规程未新系统的自行按照旧制修改-新系统过制的编号加修模版.doc
- 医药公司(连锁店)计算机系统操作规程模版.doc
- 医药连锁门店计算机系统的操作和管理程序未新系统的自行按照旧制修改-新系统过制的编号加修模版.docx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功