网页排版与布局教案资料.ppt

留白 我们应该在网页中通过留白的作用，使整个内容排布得松紧有度，给人以跌宕起伏之感。 把整个屏幕都塞得满满的，让人感觉不乱也很挤。网适当地留白，可以提高网页的视觉效果和艺术感染力。 留白既可以给人带来心理上的松弛，也可以给人带来紧张与节奏。利用留白的体量感来使页面布局平衡，在一种不平衡中营造平衡，这样就会使页面生动起来。 网页设计拥有传统的媒体的不具有的优势，例如是能够声音、图片、文字、动画相结合，营造一个富有生气的独特世界，同时它拥有极强交互性，使使用者能够参与其中，同设计者相交流。但是最基本的模式还是平面设计的内容，也就要考虑形式美的内容。 所以现在强调网页设计的创造，表现在对页面的布局上，具体说就是体现在页面的形式美方面。就是通过页面的合理安排，例如文字的条理清楚、流畅、整体，使形式美得到体现。 1.一个用户首次进入网站首页能清楚知道的问题： a,这是什么地方； b,这里有什么； c,我在这里可以做些什么 ； d,我为什么要呆在这里 2.用户不做最佳选择,只要满意， 原因：a,太匆忙 b,即使选错,代价也不大 c,权衡选择未必能增加胜率 d,猜测更省劲 3.我们会把注.意力集中于符合下列条情况之一的词语或短语: a,与手头工作有关的； b,满足当前的个人兴趣的； c,对神经系统有冲击力的词语,如免费,甩卖等,及自己的名字. 设计前的一些思考: 网页上尽量不出现使人费神琢磨的东西 2. 设计的网页应一目了然 3. 设计的网页应便于浏览,而非阅读 4. 利用惯例：惯例是因为有效而成为惯例的,惯例的广泛采用可使用户毫不费劲地在网站畅游 制作便于浏览页面的一个大敌就是视觉干扰,它包含两类: a,混乱页面主次不清,所有的东西都引人注目 b,背景干扰 一、网站的层次结构: 1.把页面分割成清晰明确的不同区域很重要，因为可使用户迅速判断出哪些区域应重点看,哪些可以放心地忽略。 2.创建清晰直观的页面层次结构;越重要越要突出;逻辑相关的内容视觉上也应该相关 3.用嵌套的方式形象地显示从属关系 二.网页的布局形式 整个页面可以分为几个部分，每个部分有不同的功能，也能体现不同的形式，中间的部分一般是最大的，因为它承载着主要的信息，使用者主要就是看中间这个部分的内容， 有些网站也为了出新意把整个页面进行任意划分，特别是个人网页，例如把整个页面平分为左右两个部分，但是这样会让人不着重点，还有的框架用得太多，影响了页面的整体性…… 1.骨骼型网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。 题头加三栏式的设计方式：题头就是在最上行，左边是网站标题图案，右边是正文。 上下水平设计方式，它有适合信息量大，维护方便的特点，适用于商业网站。 网站导航的设计——清晰,简洁,一致 导航的意义a,帮助用户寻找他要的东西b,告诉用户他在哪里c,更好的展现网站的内容d,使浏览者对网站有信心 固定导航应包括下列最常用的5个元素:1,网站标识2,栏目3,公共服务(帮助,网站地图,关于我们,联系我们等)4,返回主页5,搜索 2.满版型页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。四边出血，向外扩张，适合年轻人的口味。 3.分割型把整个页面分成上下或左右两部分，分别安排图片和文案。分割线上的压置的图片既打破了页面分割的生硬感，也使自身得到强调。左边框上的小标签乃点睛之笔。 4.中轴型沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。 5.曲线型图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。网站的导航标题沿图形弧线排列。 6.倾斜型页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。 文字水平排列，将画框斜置，产生对比与动势，印象被加强。 7.对称型对称的页面给人稳定、严谨、庄重、理性的感受。 以相对对称手法制作的导航页面。 8.焦点型焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。通过离心的版式，清晰地传达出网站提供的服务 9.三角型网页各视觉元素整体看为正三角形的构图，主体形象稳定而突出 10.自由型自由型的页面具有活泼、轻快的风格 引导视线的图片以散点构成，传达随意、轻松的气氛 但是作为个人网站，就不一定要采用这些方式，完全可以更新颖、更艺术些。什么又算是灵活多样？怎样做到新颖、艺术呢？没有一个模式去套，它需要你去领悟、去创新。