网页版面布局设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（6）尽量用图片解说––––此方法对不 能用语言说服、或用语言无法表达的情 感，特别有效。图片解说的内容，可以 传达给浏览者更多的信息。
网页版面布局的样式
就像传统的报刊杂志一样，我们可以将 页面看作一张报纸或一本杂志中的一页 来进行排版布局。设计版面时要把文字、 图片、空白当作一个整体来看待，采用 平面分割的方式，调动全部面积来构建 这个版面。下面我们来探讨一下页面布 局的样式。
政府机关网站的内容主要从省市概况、政府管 理、政府监督、便民服务等几个方面来进行设 计，据此画出具体的信息结构图脚本。
企业机构网站的规划
企业机构网站是指以企业单位为主体而 构建的网站，其目的是为了利用网络宣 传企业形象，展示企业文化，推销企业 产品，拓宽企业的营销渠道。其最高层 域名一般为“.com”。
包围式布局
对称式布局
对称式布局 的基本思路 是以中心线 为基准，左 右对称，是 一种格调高 雅的安定型 版式。
单侧对齐式布局
单侧对齐式布局的基本 思路是以左则对齐为 基调，将右侧散开， 一般用在追求理智和 自由感适当的平衡场 合，既暗示了页面的 格调，也传达了自由 的气氛。
卫星式布局
企业机构网站的内容一般从企业介绍、 产品展示、售后服务等方面来进行设计， 参照若干企业网站画出企业网站的内容 结构图。
服务机构网站的规划
服务机构网站是指以服务机构为主体构建的网 站，包括商业服务机构网站、金融服务机构网 站、邮政通信服务机构网站、家政服务机构网 站、休闲娱乐服务机构网站、行业机构网站等。 其最高层域名一般为“.net”，少数为 “.com”。
卫星式以指太阳 为中心的卫星环 绕型，传递出家 庭的印象，让访 问者沉浸在可以 自由参与的开放 感中。
散开式布局
散开式具有山水画 般的自由和优雅， 不同的国家，在散 开式的构成设计上 有不同特征，西方 人讲究左右平衡， 日本以追求典雅感 为目的。
照片组合式布局
一张照片单独看起 来可能无趣，但在 一组照片组合之后 就可能产生了新的 情趣，照片组合式 与全景式共同创造 出一种自发来去自 由的轻松气氛。
网站内容规划是进行网页设计的第一步， 写好内容脚本是十分关键的。下面我们 分别对“.com”、“.net”、“.edu”、 “.gov”为后缀的网站进行分析，学会网 站脚本的编写。
教育科研网站的规划
教育科研网站是指那些针对特定的人群， 围绕特定的学习主题、教科研主题、学 习素材类事物主题，完成特定信息的搜 索和提供、组织与发布，或者提供互动 学习平台的教育类网站，其最高层域名 一般为“.edu”。
网页版面布局的原则
（3）对比––––所谓对比，不仅利用色 彩、色调等技巧来进行表现，在内容上 也可涉及古与今、新与旧、贫与富等对 比。
（4）凝视––––所谓凝视是利用页面中 人物视线，使浏览者仿照跟随的心理， 以达到注视页面的效果，一般多用明星 凝视状。
网页版面布局的原则
（5）空白––––空白有两种作用，一方 面对其他网站表示突出卓越，另一方面 也表示网页品位的优越感，这种表现方 法对体现网页的格调十分有效。
布局的草稿
粗略布局
在草稿的基础上将确定需要放置的功能模块安 排到页面上。遵循突出重点、平衡谐调的原则， 将网站标志、主菜单等最重要的模块放在最显 眼、最突出的位置上，然后再考虑次要模块的 排放。
一般情况下，将网站的LOGO、导航条等元素 放在屏幕左边显眼的位置上，访问者在浏览网 页时可以对网站内容一目了然。
网页版面布局设计
信息技术学院 郑义
网站内容的规划与脚本编写
目前，全世界的网站总数已经超过了6000万 个，如何使自己的网站能够在众多的网站中脱 颖而出，令人刮目相看，关键是提升网站的知 名度和访问率，而对网站内容进行详细的规划 和注重网络应用则是提高网站访问率的重要因 素。从最新的网络统计分析报告中得知，网站 访问率的78%来自于搜索引擎，而网站在搜 索引擎中的排名与网站的内容有很大的关系。
网页布局
以最适合浏览的方式将图片和文字摆放 在页面的不同位置。
网页布局的基本原理是共通的，只要领 会要点，就能够举一反三。
创作阶段——打草稿
新建的页面就像一张白纸，没有任何表格、框 架和约定俗成的东西，我们可以任意发挥自己 的想象力，把想到的“景象”画上去（建议用 一张白纸和一支铅笔，当然用图像处理软件 Fireworks MX等也可以）。这属于创作阶段， 不讲究细腻工整，不必考虑细节功能，只以粗 略的线条勾画出创意的轮廓即可。尽可能多画 几张，最后选定一个满意的作为继续创作的脚 本。
服务机构网站的内容主要从ISP因特网内容接 入服务、ICP因特网内容提供服务、ASP因特 网内容应用服务这三个方面来进行设计，据此 画出具体的信息结构图脚本。
wenku.baidu.com
网页版面布局设计
版面指的是从浏览器看到的完整的一个页面 （可以包含框架和层）。
由于不同的浏览者所拥有的显示器的分辨率不 一致，所以在设计网页的时候要考虑到浏览者 的实际情况。目前常见的网页所采用的分辨率 有：640*480像素、800*600像素、 1024*768像素等。
左右对齐方式布局
左右对齐方式 满载着文字信 息，没有浪费 空间的感觉， 是最适合传递 商业性信息的 样式。
全景式布局
全景式分散排列多张图片，看起来就像 在瞭望台上看全景画，访问者可以自由、 闲庭信步地参与进来。
全景式布局
包围式布局
包围式布局的基本思路是页面四周用色 块或图案包围起来，以便产生一个被限 定的世界。如果色块或图案是深重的颜 色，则表示这个范围拒绝他人入侵，如 果是浅色调，则表示这是一个柔和的世 界。
教育科研网站的内容主要是围绕教学和 科研来进行的，突出教师和学生的地位， 据此画出具体的信息结构图。
政府网站的规划
政府网站是指以政府机构为主体构建的网站， 主要为政府税收和政府公共服务提供网络化的 交流平台，并且通过网络增加政府与百姓交流 的渠道，听取百姓的心声和意见，提高政府机 关的办事效率。其最高层域名一般为“.gov”。
“星火网”首页的粗略布局图
最终定案
将粗略布局精细化，具体化。凭借智慧 和经验，多方联想，才能做出具有创意 的布局。
“星火网”首页的最终定案图
网页版面布局的原则
（1）正常平衡––––亦称“匀称”，多 指左右、上下对照形式，主要强调秩序， 能达到安定诚实、信赖的效果。
（2）异常平衡––––即非对照形式，但 也要平衡和韵律，当然都是不均整的， 此种布局能达到强调性、不安性、高注 目性的效果。
网页版面布局的样式
就像传统的报刊杂志一样，我们可以将 页面看作一张报纸或一本杂志中的一页 来进行排版布局。设计版面时要把文字、 图片、空白当作一个整体来看待，采用 平面分割的方式，调动全部面积来构建 这个版面。下面我们来探讨一下页面布 局的样式。
政府机关网站的内容主要从省市概况、政府管 理、政府监督、便民服务等几个方面来进行设 计，据此画出具体的信息结构图脚本。
企业机构网站的规划
企业机构网站是指以企业单位为主体而 构建的网站，其目的是为了利用网络宣 传企业形象，展示企业文化，推销企业 产品，拓宽企业的营销渠道。其最高层 域名一般为“.com”。
包围式布局
对称式布局
对称式布局 的基本思路 是以中心线 为基准，左 右对称，是 一种格调高 雅的安定型 版式。
单侧对齐式布局
单侧对齐式布局的基本 思路是以左则对齐为 基调，将右侧散开， 一般用在追求理智和 自由感适当的平衡场 合，既暗示了页面的 格调，也传达了自由 的气氛。
卫星式布局
企业机构网站的内容一般从企业介绍、 产品展示、售后服务等方面来进行设计， 参照若干企业网站画出企业网站的内容 结构图。
服务机构网站的规划
服务机构网站是指以服务机构为主体构建的网 站，包括商业服务机构网站、金融服务机构网 站、邮政通信服务机构网站、家政服务机构网 站、休闲娱乐服务机构网站、行业机构网站等。 其最高层域名一般为“.net”，少数为 “.com”。
卫星式以指太阳 为中心的卫星环 绕型，传递出家 庭的印象，让访 问者沉浸在可以 自由参与的开放 感中。
散开式布局
散开式具有山水画 般的自由和优雅， 不同的国家，在散 开式的构成设计上 有不同特征，西方 人讲究左右平衡， 日本以追求典雅感 为目的。
照片组合式布局
一张照片单独看起 来可能无趣，但在 一组照片组合之后 就可能产生了新的 情趣，照片组合式 与全景式共同创造 出一种自发来去自 由的轻松气氛。
网站内容规划是进行网页设计的第一步， 写好内容脚本是十分关键的。下面我们 分别对“.com”、“.net”、“.edu”、 “.gov”为后缀的网站进行分析，学会网 站脚本的编写。
教育科研网站的规划
教育科研网站是指那些针对特定的人群， 围绕特定的学习主题、教科研主题、学 习素材类事物主题，完成特定信息的搜 索和提供、组织与发布，或者提供互动 学习平台的教育类网站，其最高层域名 一般为“.edu”。
网页版面布局的原则
（3）对比––––所谓对比，不仅利用色 彩、色调等技巧来进行表现，在内容上 也可涉及古与今、新与旧、贫与富等对 比。
（4）凝视––––所谓凝视是利用页面中 人物视线，使浏览者仿照跟随的心理， 以达到注视页面的效果，一般多用明星 凝视状。
网页版面布局的原则
（5）空白––––空白有两种作用，一方 面对其他网站表示突出卓越，另一方面 也表示网页品位的优越感，这种表现方 法对体现网页的格调十分有效。
布局的草稿
粗略布局
在草稿的基础上将确定需要放置的功能模块安 排到页面上。遵循突出重点、平衡谐调的原则， 将网站标志、主菜单等最重要的模块放在最显 眼、最突出的位置上，然后再考虑次要模块的 排放。
一般情况下，将网站的LOGO、导航条等元素 放在屏幕左边显眼的位置上，访问者在浏览网 页时可以对网站内容一目了然。
网页版面布局设计
信息技术学院 郑义
网站内容的规划与脚本编写
目前，全世界的网站总数已经超过了6000万 个，如何使自己的网站能够在众多的网站中脱 颖而出，令人刮目相看，关键是提升网站的知 名度和访问率，而对网站内容进行详细的规划 和注重网络应用则是提高网站访问率的重要因 素。从最新的网络统计分析报告中得知，网站 访问率的78%来自于搜索引擎，而网站在搜 索引擎中的排名与网站的内容有很大的关系。
网页布局
以最适合浏览的方式将图片和文字摆放 在页面的不同位置。
网页布局的基本原理是共通的，只要领 会要点，就能够举一反三。
创作阶段——打草稿
新建的页面就像一张白纸，没有任何表格、框 架和约定俗成的东西，我们可以任意发挥自己 的想象力，把想到的“景象”画上去（建议用 一张白纸和一支铅笔，当然用图像处理软件 Fireworks MX等也可以）。这属于创作阶段， 不讲究细腻工整，不必考虑细节功能，只以粗 略的线条勾画出创意的轮廓即可。尽可能多画 几张，最后选定一个满意的作为继续创作的脚 本。
服务机构网站的内容主要从ISP因特网内容接 入服务、ICP因特网内容提供服务、ASP因特 网内容应用服务这三个方面来进行设计，据此 画出具体的信息结构图脚本。
wenku.baidu.com
网页版面布局设计
版面指的是从浏览器看到的完整的一个页面 （可以包含框架和层）。
由于不同的浏览者所拥有的显示器的分辨率不 一致，所以在设计网页的时候要考虑到浏览者 的实际情况。目前常见的网页所采用的分辨率 有：640*480像素、800*600像素、 1024*768像素等。
左右对齐方式布局
左右对齐方式 满载着文字信 息，没有浪费 空间的感觉， 是最适合传递 商业性信息的 样式。
全景式布局
全景式分散排列多张图片，看起来就像 在瞭望台上看全景画，访问者可以自由、 闲庭信步地参与进来。
全景式布局
包围式布局
包围式布局的基本思路是页面四周用色 块或图案包围起来，以便产生一个被限 定的世界。如果色块或图案是深重的颜 色，则表示这个范围拒绝他人入侵，如 果是浅色调，则表示这是一个柔和的世 界。
教育科研网站的内容主要是围绕教学和 科研来进行的，突出教师和学生的地位， 据此画出具体的信息结构图。
政府网站的规划
政府网站是指以政府机构为主体构建的网站， 主要为政府税收和政府公共服务提供网络化的 交流平台，并且通过网络增加政府与百姓交流 的渠道，听取百姓的心声和意见，提高政府机 关的办事效率。其最高层域名一般为“.gov”。
“星火网”首页的粗略布局图
最终定案
将粗略布局精细化，具体化。凭借智慧 和经验，多方联想，才能做出具有创意 的布局。
“星火网”首页的最终定案图
网页版面布局的原则
（1）正常平衡––––亦称“匀称”，多 指左右、上下对照形式，主要强调秩序， 能达到安定诚实、信赖的效果。
（2）异常平衡––––即非对照形式，但 也要平衡和韵律，当然都是不均整的， 此种布局能达到强调性、不安性、高注 目性的效果。