网页设计版式布局设计

版式布局
你的logo是你的身份和品牌。最常用的是把 logo放在你header的左上角。我们的阅读 习惯是，从左往右，从上至下，所以你的 log应该放在访问者第一眼能看到的地方。
Navigation 页面导航是最重要的元素之一;你的访问者 需要用它来使用你的站点。 它应该是容易被 找到且易用的，这就是为什么大多数的人把 它放在header部分，最少也是在页面顶端附 近的原因。
版式布局
(5) 第一屏设计
所谓第一屏，是指我们到达一个网站 在不拖动滚动条时能够看到的部分。那么 第一屏有多“大”呢？其实这是未知的。 一般来讲，在800*600的屏幕显示模式(这 也是最常用的)下，在IE安装后默认的状态 (即工具栏地址栏等没有改变)下，IE窗口内 能看到的部分为778px*435px，一般来讲， 我们以这个大小为标准就行了，毕竟，在 无法适合所有人的情况下，我们只能为大 多数考虑了。
版式布局
版式布局
navigation类型:
Horizontal: 水平显示，被称为 ‘navigation’ Vertical: 垂直显示，被称为‘menu’
版式布局
版式布局
版式布局
在网页设计中，网页版式设计主要从以下几 方面确立思路：
1 黄金分割和九宫格理论 我们认为视觉的吸引力是基于比例的。几千
版式布局
8、Flash型：其实这与封面型结构是类似 的，只是这种类型采用了目前非常游戏行 的Flash，与封面型不同的是，由于Flash 强大的功能，页面所表达的信息更丰富， 其视觉效果及听觉效果如果处理得当，绝 不差于传统的多媒体。
版式布局
9、变化型：即上面几种类型的结合与变化， 比如本站在视觉上是很接近拐角型的，但 所实现的功能的实质是那种上、左、右结 构的综合框架型。
版式布局
Leabharlann Baidu
版式布局
版式布局
版式布局
左中右结构，左占40%，中右各占30%； 或是左右占30%,中间占40%；也可以进行 532，622，442的分配。
版式布局
版式布局
版式布局
版式布局
从上面的实例可以说明：
网页版式设计大布局上要尽量避免平 分的局面。
版式布局
（3）版式设计之细节刻画 网页设计中的小布局，也就是通常所说的
版式布局
版式设计理论通其他设计一样，都是从整 体着手。一般来说，基本上网页的设计布 局分为上中下，左中右，上下，上下左右 之混合几种类型。在进行版式布局设计时， 我们还要思考分辨率与网页大小的关系。
版式布局
现在大部分电脑显示器都是1024以上的分 辨率了，那我们设计网页的宽度是不是一 定也要相应变宽一点才好呢？由于网页本 身也会与浏览器产生视觉对比，如果塞得 太满没有一定的空间一定不是好办法。如 果留下空隙网面与留出来的空白也可形成 一定的对比，其比例也较接近黄金分割率。 所以还是不要塞满浏览器为好，给网页一 个可以自由遐想的空间。
版式布局
1、“国”字型：也可以称为“同”字型， 是一些大型网站所喜欢的类型，即最上面 是网站的标题以及横幅广告条，接下来就 是网站的主要内容，左右分列一些两小条 内容，中间是主要部分，与左右一起罗列 到底，最下面是网站的一些基本信息、联 系方式、版权声明等。这种结构是我们在 网上见到的差不多最多的一种结构类型。
版式布局
header并不真的是一个特定的元素，尽管 某些人会认为它是。它更多是用在涉及到你 放置你的logo，导航栏，tagline的web页 面顶层的地方。许多人更愿意把这些元素包 含在一个div里以方便使页面样式和内容分 离。header会被视为一个container，所以 它有两种类型选择，就是上文提到的 liquid 或 fixed 。
细节上的布局。我们可以把网页看成由很 多的小块组合而成的。通常要注意的是标 题与内容的关系，以及这些块放置的位置。
版式布局
（3）版式布局的类型
多与网页制作相关的书上都把网页的版式 归纳为以下几种：国字型（同字型）、拐 角型、标题正文型、左右框架型、上下框 架型、综合框架型、封面型、Flash型、变 化型。
版式布局
(7)版面布局的选择
这是初学者可能会问的问题。其实这要具 体情况具体分析的：比如如果内容非常多， 就要考虑用“国字型”或拐角型；而如果 内容不算太多而一些说明性的东西比较多， 则可以考虑标题正文型；那几种框架结构 的一个共同特点就是浏览方便，速度快， 但结构变化不灵活；
版式布局
而如果是一个企业网站想展示一下企业形 象或个人主页想展示个人风采，封面性是 首选；Flash型更灵活一些，好的Flash大 大丰富了网页，但是它不能表达过多的文 字信息。还没有提到的就是变化型了，我 只是想把这个留给读者了，因为，只有不 断的变化才会提高，才会不断丰富我们的 网页！
版式布局
2、拐角型：这种结构与上一种其实只是形 式上的区别，其实是很相近的，上面是标 题及广告横幅，接下来的左侧是一窄列链 接等，右列是很宽的正文，下面也是一些 网站的辅助信息。在这种类型中，一种很 常见的类型是最上面是标题及广告，左侧 是导航链接。
版式布局
3、标题正文型：这种类型即最上面是 标题或类似的一些东西，下面是正文，比 如一些文章页面或注册页面等就是这种类。
版式布局
4、左右框架型：这是一种左右为分别 两页的框架结构，一般左面是导航链接， 有时最上面会有一个小的标题或标致，右 面是正文。我们见到的大部分的大型论坛 都是这种结构的，有一些企业网站也喜欢 采用。这种类型结构非常清晰，一目了然。
版式布局
5、上下框架型：与上面类似，区别仅仅在 于是一种上下分为两页的框架。
年来，艺术家，设计师，建筑师等都有意无 意的在使用了一个共同的比例来增加他们作 品的美感。这个神奇的数字是什么呢？ 0.618...
版式布局
：黄金分割最早见于古希腊和古埃及。黄 金分割又 称黄金率、中外比，即把一根线 段分为长短不等的a、b两段，使其中长线 段的比(即a+b)等于短线段b对长线段a的比， 列式即为a:(a+b)=b:a， 其比值为 0.6180339……这种比例在造型上比较悦目， 因此，0.618又被称为黄金分割率。”
版式布局
我们中国也有一种类似于这样的概念叫九 宫格。这个也许就有一些朋友不清楚了， 这是一种用以临写碑帖的一种界格纸。基 本形是一个长方形等分九格。在这个九宫 格中中间部分就产生了四个交叉点，这四 个交叉点就是视觉中心点。
版式布局
版式布局
版式布局
(2)版式设计之大局观念
国外设计师说过，网页的设计95%都是排 版的设计，我们不知道具体有没有那么夸 张，但版式的重要性估计很多人都深有体 会，可是由于现在很多的互联网设计师在 版式设计方面的素养并不太高导致了中文 网站大多呈现乱，花。美观其次的，主要 是让用户在寻找想要的信息的时候花费过 多额外的时间。
版式布局
那网页自身的上下左右布局呢？同样的， 如只是上下或是左右结构的，不能把上下 左右平分，而是最好采用黄金分割比来进 行划分。如果是上中下或是左中右呢？同 样不能平分，要注意三者之间的关系。
版式布局
比如上中下结构，中间的内容需要大一点 的空间，会尽量的占大比例。一般让中间 占大约60%，而上面的内容占30%，下面 占10%。这样的分割会比平面看起来要舒 服得多。
版式布局
说了那么多，无非是一个标准的问题，其 实接下来不用我说大家也能想到，第一屏 当然要放最主要的内容，关键要知道的是， 我们要对第一屏能显示的面积要有个估计， 而不要仅仅以自己的机器为准。其实网页 制作的一个很麻烦的地方就是浏览者的机 器是未知的。
版式布局
(6)导航栏的位置
导航栏能让我们在浏览时容易的到达 不同的页面，是网页元素非常重要的部分， 所以导航栏一定要清晰、醒目，一般来讲， 导航栏要在“第一屏”能显示出来，但是 有时第一屏可能会小于上面所说的435px， 积于这点考虑，那种横向放置的导航栏要 优于纵向的导航栏考虑，原因很简单：如 果浏览者的第一屏很矮，横向的仍能全部 看到，而纵向的就很难说了，因为窗口的 宽度一般是不会受浏览器设置影响的，而 纵向的则不确定性要大的多。
版式布局
（5）第一屏设计
所谓第一屏，是指我们到达一个网站 在不拖动滚动条时能够看到的部分。那么 第一屏有多“大”呢？其实这是未知的。 一般来讲，在800*600的屏幕显示模式(这 也是最常用的)下，在IE安装后默认的状态 (即工具栏地址栏等没有改变)下，IE窗口内 能看到的部分为778px*435px，一般来讲， 我们以这个大小为标准就行了，毕竟，在 无法适合所有人的情况下，我们只能为大 多数考虑了。
2.3 版式布局设计
版式布局
网页骨架
这些是web页面的主要元素。有很多不同的方法去组织它们， 但是这种布局也许是最常用的。
版式布局
Container 所有的web页面都用一个container，主要是为了同一个目的： 去包含一些页面元素，然而这个方法实现各有不同。例如， body标签或者是最常用的div。甚至于过去常用的table（不 要使用table作为你的container，这是一个破方法）。想想 container作为你房子的外墙，里面包含卧室，厨房，起居 室等等。
版式布局
6、综合框架型：上页两种结构的结合，相 对复杂的一种框架结构，较为常见的是类 似于“拐角型”结构的，只是采用了框架 结构。
版式布局
7、封面型：这种类型基本上是出现在一些 网站的首页，大部分为一些精美的平面设 计结合一些小的动画，放上几个简单的链 接或者仅是一个“进入”的链接甚至直接 在首页的图片上做链接而没有任何提示。 这种类型大部分出现在企业网站和个人主 页，如果说处理的好，会给人带来赏心悦 目的感觉。