网页设计版式布局设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.3 版式布局设计
版式布局
网页骨架
这些是web页面的主要元素。有很多不同的方法去组织它们， 但是这种布局也许是最常用的。
版式布局
Container 所有的web页面都用一个container，主要是为了同一个目的： 去包含一些页面元素，然而这个方法实现各有不同。例如， body标签或者是最常用的div。甚至于过去常用的table（不 要使用table作为你的container，这是一个破方法）。想想 container作为你房子的外墙，里面包含卧室，厨房，起居 室等等。
版式布局
那网页自身的上下左右布局呢？同样的， 如只是上下或是左右结构的，不能把上下 左右平分，而是最好采用黄金分割比来进 行划分。如果是上中下或是左中右呢？同 样不能平分，要注意三者之间的关系。
版式布局
比如上中下结构，中间的内容需要大一点 的空间，会尽量的占大比例。一般让中间 占大约60%，而上面的内容占30%，下面 占10%。这样的分割会比平面看起来要舒 服得多。
版式布局
你的logo是你的身份和品牌。最常用的是把 logo放在你header的左上角。我们的阅读 习惯是，从左往右，从上至下，所以你的 log应该放在访问者第一眼能看到的地方。
Navigation 页面导航是最重要的元素之一;你的访问者 需要用它来使用你的站点。 它应该是容易被 找到且易用的，这就是为什么大多数的人把 它放在header部分，最少也是在页面顶端附 近的原因。
细节上的布局。我们可以把网页看成由很 多的小块组合而成的。通常要注意的是标 题与内容的关系，以及这些块放置的位置。
版式布局
（3）版式布局的类型
多与网页制作相关的书上都把网页的版式 归纳为以下几种：国字型（同字型）、拐 角型、标题正文型、左右框架型、上下框 架型、综合框架型、封面型、Flash型、变 化型。
版式布局
版式布局
navigation类型:
Horizontal: 水平显示，被称为 ‘navigation’ Vertical: 垂直显示，被称为‘menu’
版式布局
版式布局
版式布局
在网页设计中，网页版式设计主要从以下几 方面确立思路：
1 黄金分割和九宫格理论 我们认为视觉的吸引力是基于比例的。几千
版式布局
版式布局
版式布局
版式布局
左中右结构，左占40%，中右各占30%； 或是左右占30%,中间占40%；也可以进行 532，622，442的分配。
版式布局
版式布局
版式布局
版式布局
从上面的实例可以说明：
网页版式设计大布局上要尽量避免平 分的局面。
版式布局
（3）版式设计之细节刻画 网页设计中的小布局，也就是通常所说的
版式布局
我们中国也有一种类似于这样的概念叫九 宫格。这个也许就有一些朋友不清楚了， 这是一种用以临写碑帖的一种界格纸。基 本形是一个长方形等分九格。在这个九宫 格中中间部分就产生了四个交叉点，这四 个交叉点就是视觉中心点。
Leabharlann Baidu
版式布局
版式布局
版式布局
(2)版式设计之大局观念
国外设计师说过，网页的设计95%都是排 版的设计，我们不知道具体有没有那么夸 张，但版式的重要性估计很多人都深有体 会，可是由于现在很多的互联网设计师在 版式设计方面的素养并不太高导致了中文 网站大多呈现乱，花。美观其次的，主要 是让用户在寻找想要的信息的时候花费过 多额外的时间。
版式布局
版式设计理论通其他设计一样，都是从整 体着手。一般来说，基本上网页的设计布 局分为上中下，左中右，上下，上下左右 之混合几种类型。在进行版式布局设计时， 我们还要思考分辨率与网页大小的关系。
版式布局
现在大部分电脑显示器都是1024以上的分 辨率了，那我们设计网页的宽度是不是一 定也要相应变宽一点才好呢？由于网页本 身也会与浏览器产生视觉对比，如果塞得 太满没有一定的空间一定不是好办法。如 果留下空隙网面与留出来的空白也可形成 一定的对比，其比例也较接近黄金分割率。 所以还是不要塞满浏览器为好，给网页一 个可以自由遐想的空间。
版式布局
2、拐角型：这种结构与上一种其实只是形 式上的区别，其实是很相近的，上面是标 题及广告横幅，接下来的左侧是一窄列链 接等，右列是很宽的正文，下面也是一些 网站的辅助信息。在这种类型中，一种很 常见的类型是最上面是标题及广告，左侧 是导航链接。
版式布局
3、标题正文型：这种类型即最上面是 标题或类似的一些东西，下面是正文，比 如一些文章页面或注册页面等就是这种类 。
版式布局
1、“国”字型：也可以称为“同”字型，是一 些大型网站所喜欢的类型，即最上面是网 站的标题以及横幅广告条，接下来就是网 站的主要内容，左右分列一些两小条内容 ，中间是主要部分，与左右一起罗列到底 ，最下面是网站的一些基本信息、联系方 式、版权声明等。这种结构是我们在网上 见到的差不多最多的一种结构类型。
版式布局
4、左右框架型：这是一种左右为分别 两页的框架结构，一般左面是导航链接， 有时最上面会有一个小的标题或标致，右 面是正文。我们见到的大部分的大型论坛 都是这种结构的，有一些企业网站也喜欢 采用。这种类型结构非常清晰，一目了然 。
年来，艺术家，设计师，建筑师等都有意无 意的在使用了一个共同的比例来增加他们作 品的美感。这个神奇的数字是什么呢？ 0.618...
版式布局
：黄金分割最早见于古希腊和古埃及。黄 金分割又 称黄金率、中外比，即把一根线 段分为长短不等的a、b两段，使其中长线 段的比(即a+b)等于短线段b对长线段a的比， 列式即为a:(a+b)=b:a， 其比值为 0.6180339……这种比例在造型上比较悦目， 因此，0.618又被称为黄金分割率。”
版式布局
header并不真的是一个特定的元素，尽管 某些人会认为它是。它更多是用在涉及到你 放置你的logo，导航栏，tagline的web页 面顶层的地方。许多人更愿意把这些元素包 含在一个div里以方便使页面样式和内容分 离。header会被视为一个container，所以 它有两种类型选择，就是上文提到的 liquid 或 fixed 。
版式布局
网页骨架
这些是web页面的主要元素。有很多不同的方法去组织它们， 但是这种布局也许是最常用的。
版式布局
Container 所有的web页面都用一个container，主要是为了同一个目的： 去包含一些页面元素，然而这个方法实现各有不同。例如， body标签或者是最常用的div。甚至于过去常用的table（不 要使用table作为你的container，这是一个破方法）。想想 container作为你房子的外墙，里面包含卧室，厨房，起居 室等等。
版式布局
那网页自身的上下左右布局呢？同样的， 如只是上下或是左右结构的，不能把上下 左右平分，而是最好采用黄金分割比来进 行划分。如果是上中下或是左中右呢？同 样不能平分，要注意三者之间的关系。
版式布局
比如上中下结构，中间的内容需要大一点 的空间，会尽量的占大比例。一般让中间 占大约60%，而上面的内容占30%，下面 占10%。这样的分割会比平面看起来要舒 服得多。
版式布局
你的logo是你的身份和品牌。最常用的是把 logo放在你header的左上角。我们的阅读 习惯是，从左往右，从上至下，所以你的 log应该放在访问者第一眼能看到的地方。
Navigation 页面导航是最重要的元素之一;你的访问者 需要用它来使用你的站点。 它应该是容易被 找到且易用的，这就是为什么大多数的人把 它放在header部分，最少也是在页面顶端附 近的原因。
细节上的布局。我们可以把网页看成由很 多的小块组合而成的。通常要注意的是标 题与内容的关系，以及这些块放置的位置。
版式布局
（3）版式布局的类型
多与网页制作相关的书上都把网页的版式 归纳为以下几种：国字型（同字型）、拐 角型、标题正文型、左右框架型、上下框 架型、综合框架型、封面型、Flash型、变 化型。
版式布局
版式布局
navigation类型:
Horizontal: 水平显示，被称为 ‘navigation’ Vertical: 垂直显示，被称为‘menu’
版式布局
版式布局
版式布局
在网页设计中，网页版式设计主要从以下几 方面确立思路：
1 黄金分割和九宫格理论 我们认为视觉的吸引力是基于比例的。几千
版式布局
版式布局
版式布局
版式布局
左中右结构，左占40%，中右各占30%； 或是左右占30%,中间占40%；也可以进行 532，622，442的分配。
版式布局
版式布局
版式布局
版式布局
从上面的实例可以说明：
网页版式设计大布局上要尽量避免平 分的局面。
版式布局
（3）版式设计之细节刻画 网页设计中的小布局，也就是通常所说的
版式布局
我们中国也有一种类似于这样的概念叫九 宫格。这个也许就有一些朋友不清楚了， 这是一种用以临写碑帖的一种界格纸。基 本形是一个长方形等分九格。在这个九宫 格中中间部分就产生了四个交叉点，这四 个交叉点就是视觉中心点。
Leabharlann Baidu
版式布局
版式布局
版式布局
(2)版式设计之大局观念
国外设计师说过，网页的设计95%都是排 版的设计，我们不知道具体有没有那么夸 张，但版式的重要性估计很多人都深有体 会，可是由于现在很多的互联网设计师在 版式设计方面的素养并不太高导致了中文 网站大多呈现乱，花。美观其次的，主要 是让用户在寻找想要的信息的时候花费过 多额外的时间。
版式布局
版式设计理论通其他设计一样，都是从整 体着手。一般来说，基本上网页的设计布 局分为上中下，左中右，上下，上下左右 之混合几种类型。在进行版式布局设计时， 我们还要思考分辨率与网页大小的关系。
版式布局
现在大部分电脑显示器都是1024以上的分 辨率了，那我们设计网页的宽度是不是一 定也要相应变宽一点才好呢？由于网页本 身也会与浏览器产生视觉对比，如果塞得 太满没有一定的空间一定不是好办法。如 果留下空隙网面与留出来的空白也可形成 一定的对比，其比例也较接近黄金分割率。 所以还是不要塞满浏览器为好，给网页一 个可以自由遐想的空间。
版式布局
2、拐角型：这种结构与上一种其实只是形 式上的区别，其实是很相近的，上面是标 题及广告横幅，接下来的左侧是一窄列链 接等，右列是很宽的正文，下面也是一些 网站的辅助信息。在这种类型中，一种很 常见的类型是最上面是标题及广告，左侧 是导航链接。
版式布局
3、标题正文型：这种类型即最上面是 标题或类似的一些东西，下面是正文，比 如一些文章页面或注册页面等就是这种类 。
版式布局
1、“国”字型：也可以称为“同”字型，是一 些大型网站所喜欢的类型，即最上面是网 站的标题以及横幅广告条，接下来就是网 站的主要内容，左右分列一些两小条内容 ，中间是主要部分，与左右一起罗列到底 ，最下面是网站的一些基本信息、联系方 式、版权声明等。这种结构是我们在网上 见到的差不多最多的一种结构类型。
版式布局
4、左右框架型：这是一种左右为分别 两页的框架结构，一般左面是导航链接， 有时最上面会有一个小的标题或标致，右 面是正文。我们见到的大部分的大型论坛 都是这种结构的，有一些企业网站也喜欢 采用。这种类型结构非常清晰，一目了然 。
年来，艺术家，设计师，建筑师等都有意无 意的在使用了一个共同的比例来增加他们作 品的美感。这个神奇的数字是什么呢？ 0.618...
版式布局
：黄金分割最早见于古希腊和古埃及。黄 金分割又 称黄金率、中外比，即把一根线 段分为长短不等的a、b两段，使其中长线 段的比(即a+b)等于短线段b对长线段a的比， 列式即为a:(a+b)=b:a， 其比值为 0.6180339……这种比例在造型上比较悦目， 因此，0.618又被称为黄金分割率。”
版式布局
header并不真的是一个特定的元素，尽管 某些人会认为它是。它更多是用在涉及到你 放置你的logo，导航栏，tagline的web页 面顶层的地方。许多人更愿意把这些元素包 含在一个div里以方便使页面样式和内容分 离。header会被视为一个container，所以 它有两种类型选择，就是上文提到的 liquid 或 fixed 。