网页制作网页版面布局创新设计 .ppt

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