1、什么是网页扁平化设计
扁平化完全属于二次元，这个概念最核心的地方就是放弃一切装饰效果，诸如阴影，透视，纹理，渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净利落，没有任何羽化，渐变，或者阴影。尤其在手机上，更少的按钮和选项使得界面干净整齐，使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。
一、扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。
二、随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸，创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计，你可以一次保证在所有的屏幕尺寸上它会很好看。扁平化设计更简约，条理清晰，最重要的一点是，更好的适应性。
2、几种常见网页布局设计
网站是有网页构成，这点相信很多的从事网站建设或者是接触过网站开发的站长应该都清楚，但是你现在的问题是，虽然很多的企业都想要建设网站，但是对于网站的布局了解的并不清楚，下面就跟着我们沃然一起来了解一下网站建设中几种常见的布局吧。
1、区块型
2、国字型
3、门户型
4、Flash型
5、左右框架型
6、拐角型
7、封面型
8、标题正文型
9、上下框架型
10、综合框架型
3、网站设计风格主要体现在哪几个方面
网站简单的可以分为：功能型和展示型
功能型：网站在美工设计上可能不适合大块图片，在数据功能上比较强，比如：搜索、会员注册。一般企业网、购物网、大型门户、交友网等。
展示型：追求视觉上的美丽，对功能要求不高，在美工上、设计上要有强烈的视觉感。这种网站一般属于：美容业、女性用品、服饰等。
可以是企业展示网站、企业宣传网站、门户网站、电子商务、社交交友、综合型网站等等。
1、将你的标志logo，尽可能的放在每个页面上最突出的位置。
2、突出你的标准色彩。
3、总结一句能反映贵站精髓的宣传标语！
4、相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！
二、网页色彩的搭配
无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。在此告诉大家一些网页配色时的小技巧。
1、用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。
2、用两种色彩。先选定一种色彩，然后选择它的对比色。
3、用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。
在网页配色中，还要切记一些误区：
1、不要将所有颜色都用到，尽量控制在三至五种色彩以内。
2、背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。
现在是眼球经济时代，什么都要靠包装。你的网站设计的不好看，也无法引起用户的兴趣。我想谁都不喜欢看那些乱七八糟的网站，进去之后看不到网站主题，看不到主要内容，也找不到我们想要的信息。成功网站的第一步，就是从设计开始做起。
一、确定网站的整体风格
网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站，在这里，提供给大家一些参考经验：
1、将你的标志logo，尽可能的放在每个页面上最突出的位置。
2、突出你的标准色彩。
3、总结一句能反映贵站精髓的宣传标语！
4、相同类型的图像采用相同效果。
二、网页色彩的搭配
无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。在此告诉大家一些网页配色时的小技巧。
1、用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。
2、用两种色彩。先选定一种色彩，然后选择它的对比色。
3、用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。
在网页配色中，还要切记一些误区：
1、不要将所有颜色都用到，尽量控制在三至五种色彩以内。
2、背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。
4、网页的设计有几种方法
第一、靠前、无边框设计。无边框设计在近几年比较流行，在设计页面的时候，将页面中的风格线、边框删掉，用间距来代替的一种设计方法。无边框设计一般是以大图为主，图片本来就是一种分割元素。而内容基本是有规律的，留白间距之间的内容一定要相对一致、重复、紧密，这样用户在浏览的时候才会认为这些内容是一体的。一般来说，小众垂直的产品更适合使用无边框设计。
第二、卡片设计。卡片的设计打破了传统上固定的排版布局方式，提升了版面的使用率，可以给网站建设增加更多的惊喜。那么卡片设计有哪些优势呢？1、可以提高页面的使用率。卡片就好像是一个容器，将类型不一样的内容设置在不一样的卡片中，这样就可以很好地区分内容，还能够统一页面的风格。比如传统列表，内容一般是纵向滚动的方式，能够展示的内容比较有限，卡片式的设计采用的滑动方式，就可以有效地解决空间问题。2、区分卡片上的内容。卡片就好像是一个容器，将不同的内容放置在不同的卡片，更好地区分内容的类型。卡片的维度是不一样的，而且相对独立、有互相有联系，所以通过卡片归纳网站的内容，整个网站就显得更有秩序。3、卡片式设计可以提升可控性、提升体验度。卡片式设计的使用范围比较广泛，可以覆盖、滑动、堆叠，有良好的扩展性和可操作性。
第三、分割线的设计。这也是常见的一种页面布局设计方式，可以更好地帮助用户快速熟悉页面的布局，有良好的内容组织性。分割线可以贯穿整个页面，将不同的内容进行分割，成为独立的信息。
网站建设中的页面布局，有不同的设计方式，而且设计的趋势不断在变化，在设计页面布局之前，就要考虑好合适的样式，不能一味地追求潮流，根据产品的实际需求，选择合适的设计方式。而分割线的设计，想要做得出色，就要处理好线的间距、粗细、颜色等等
5、网页规划设计
互联网站规划与设计
摘要 本文概述了互联网站的规划与设计的方法，介绍了网站设计规划的规范,及所需的关键技术,对电信系网站的构建作了系统分析,提出了总体设计方案和制作步骤,而且论述了构建网站过程中所遇到的技术难题及解决办法。
关键词 网站规划 网站设计 网站维护 ASP
一、引言
在当今全球信息化大潮中，互联网（即因特网——Internet）异军突起，给20世纪末的人类社会增添了无限的活力，成为现代社会生活中一道亮丽的风景线。 互联网带给人们的不仅仅是技术，而是一种以信息为标志的崭新的生活方式。 他正在改变着人们的工作和生活方式。有人曾以“围城”比喻互联网，但所不同的是，“外面的人想进去，里面的人不想出来。”互联网为什么有这么大的魅力呢？这不仅与人们日益增长的文化生活有关，更重要的是与互联网的技术不断更新和革命有关。
一个网站的整体规划和设计的好坏是它发展的重要之处， 也是它吸引人们浏览的所在之处。Internet/Intranet技术的日益发展，使人们认识到了Internet/Intranet的优势，更使得数据库与web的连接成为数据库开发方面的热门技术之一。
通常情况下，通过浏览器看到的网页大多是静态的。所谓“静态”，是指网站的网页内容“固定不变”， 当浏览器通过互联网的HTTP（Hypertext Transport Protocol）协议向Web服务器请求提供网页时，服务器仅仅是将原来设计好的静态HTML文档传给浏览器。其页面内容使用的仅仅是标准的HTML代码，最多再加上流行的GIF89A 格式的动态图片，比如产生几只小猫小狗跑来跑去的动画效果。 若网站维护者要更新网页的内容，就必须手动更新所有的HTML文档。
静态网站的致命弱点就是不易维护。为了更新网页的内容， 网站维护者必须重复制作HTML文档，随着网站内容和信息量的日益扩增，可以想象这是多么复杂繁琐的工作。那么，什么是动态网站呢？所谓“动态”，并不是指放在网页上的图片会动，动态页面应具有以下几个特点：
（一）.交互性：即网页能根据客户的要求和选择而动态改变和响应，浏览器即作为客户端界面，这是今后Web发展的大势所趋。
（二）.自动更新：即无需手动更新HTML文档， 就能自动生成新的页面，从而大大减少工作量。
（三）.因时因人而变：即当不同的时间、不同的人访问同一网址时能产生不同的页面，这一点对于需要对使用者授权的网站尤其适用。
随着的Internet迅速发展，不管是专业的ISP(Internet服务提供者)和ICP(Internet内容提供者)，还是一般的政府机关、银行、交通部门、学校、医院、服务者，甚至是每个人，都在积极寻求在Internet上发布信息，提供新型的网上管理和服务。可以说，网站设计和网站的编辑正成为新兴的热门行业。
二、网站的系统分析
（一）.项目立项
我们接到客户的业务咨询，经过双方不断的接洽和了解，并通过基本的可行性讨论够，初步达成制作协议，这时就需要将项目立项。较好的做法是成立一个专门的项目小组，小组成员包括：项目经理，网页设计，程序员，测试员，编辑/文档等必须人员。
（二）.客户的需求说明书
收稿日期 ： 2001年5月25
作者简介：马彦文，西北第二民族学院电子与信息工程系97通信专业学生。
第一步是需要客户提供一个完整的需求说明。很多客户对自己的需求并不是很清楚，需要您不断引导和帮助分析。有些客户可能对自己建什么样的网站根本就没有明确的目的，以及他的网站建好后来干什么也是一无所知，为了客户能有明确的目的我们需要耐心说明，仔细分析，挖掘出客户潜在的，真正的需求。这样对大家都有好处，我们的宗旨应该是“客户明明白白，双方高高兴兴。”对客户和自己都是一种负责。
配合客户写一份详细的，完整的需求说明会花很多时间，但这样做是值得的，而且一定要让客户满意，签字认可。把好这一关，可以杜绝很多因为需求不明或理解偏差造成的失误和项目失败。糟糕的需求说明不可能有高质量的网站。那么需求说明书要达到怎样的标准呢？简单说，包含下面几点：正确性：每个功能必须清楚描写交付的功能；可行性：确保在当前的开发能力和系统环境下可以实现每个需求；必要性：功能是否必须交付，是否可以推迟实现，是否可以在削减开支情况发生时"砍"掉；简明性：不要使用专业的网络术语；检测性：如果开发完毕，客户可以根据需求检测。
三、建设方案
（一）.建站理念
(1)预早筹划
设计主页未必很艰难。但这一工作与编制传统的宣传品一样，都需要我们谨慎处理和筹划。换言之，我们必须首先 确定自己需要传达的主要信息，然后细意斟酌、把所有意念合情合理地组织起来；之后是设计一个页面式样，试用于有代表性的用户，接着重复修订，务求尽善尽美。
(2)尽量精简
主页的作用好比一本书的封面，是为了吸引用户测览你的网址内容。因此，主页的设汁应以醒目为上、令人一目了然。切勿堆砌太多不必要的细节，或使画面过于复杂。在主页上清楚列出三项要点，例如机构名称、提供的产品或服务 、以及主页内容(亦即你的其他页面还载有什么资料)。应切记页面给人的第一观感最为重要。在网上到处浏览的人很多。如果你的主页真没有吸引力，很难令他们深入观赏。
(3)尽量简朴
现今大部分用户那是用调制解调器接驳万维网，所以他们一般都要花很多时间等待主页传送到自己的系统。主页上的图形应力求简朴， 避免耽搁用户的时间。图像愈大、颜色愈深，传送页面的时间愈长。这并不是说你要完全略去图像不用，只是提醒你要注注意使用图像所引起的效果。主页上的颜色最好不超过六十四种，页顶图像最好保持在大约10KB(千字节)以下。切勿禁不住诱惑,觉得非要放入大幅的图画不可；应考虑只用三两幅短小精悍的图像。主页整体上要能够迅速传送。如果载入的时间超过十至十五秒，很多用户就会等得不耐烦。如果情况许可，最好先测试你的主页在稍差的条件下的传送速率，14.4千波特的调制解调器，或透过 Prodigy 等网上服务接驳万维网等。
此外、还须注意配合最低档的设备，例如标准的小型显示器，不要假设人人都用高解像度的大荧幕。运用先进浏览软件所提供的一些尖端功能是可以的、但应确保你的主页在次一级的浏览软件上(例如某些网上服务所提供的专用浏览软件)仍可畅顺地显现。
(4)善用图像
用户在网上四处漫游，你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力，所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款，使其别具特色，令人过目不忘。图像的内容应有一定的实际作用，切忌虚饰浮夸。最佳的图像应集美观与传讯于一身。注意图画可以弥补文字之不足，但并不能够完全取代文字。很多用户把浏览软件设定为略去图像，以求节省时间他们只看文字。因此，制作主页时，必须注意将图像所带的重要信息或联接其他页面的指示用文字重复表达—次。用“纯文中”模式测试已制成的主页，确保其传达到所有信息。
(5)使主页易于漫游
主页的其中一个主要功能是作为漫游工具，指引用户查阅你存储在网址或其他地点的信息。尽量使漫游过程不费吹灰之力。基于清晰明确和速度的考虑，主页上的联接项目应只限于几个高级的类别，例如公司、产品、服务、支援等。用六至八个联接项目最为理想。
此外，你提供的信息不应埋藏在重重叠叠的页面之下。穿越五个以上的联接项目已足以令人厌烦。因此，你必须在广度和深度之间求取平衡。如果你的网址上有太多信息，你可能要编制较长的页面或使用更多联接项目，甚至可能要建立多个主页、 使每个主页载有不同的信息。如果能够让用户在主页上以关键字或词语查找所需的信息，肯定受用户欢迎。
假若你有充足的资源，便应找一位专家来评估你设计的主页是否方便易用。设法找一些对主页陌生的用户，来试用你的初步制成品。
(6)提网协领
主页—般须载有以下事项：
标题,此标题须清楚无误地标示你的网站。标题可以是名称、标语徽号或图像。
电子邮件地址 ,以便用户有问题时，可以通知你。
版权资料,这是适用于主页内容的版权规定。你可以在主页上标示一句简短的版权声明，用联接方法带出另—个载有详细使用条款的页面,这样可以避免主页显得乱糟糟。
联络资料 ,列出通讯地址电话号码等。
(7)循环利用现有信息
制作主页时，通常都毋须从头做起，因为有许多现成的文字、图画等资料可供我们重用，例如宣传小册、公关文件、技术手册、资料库等。很多情况下，只要用少许功夫、就可把这些材料转到网页上使用。
(8)保持新鲜感
万维网上不断有新事物出现、每天都有新花样。如果你的主页从不改变，用户很快会厌倦。在主页上预告即将有新资料推出，可吸引用户再来浏览不妨在页头以大字标题宣布新消息。可以定期改变主页上的图像、或更改主页的式样。趣味性的事项可以持续或自动更新、例如列出会浏览你的网站的人次。
同样，为保持新鲜感，应时刻确保主页提供的是最新信息。将更新主页信息的工作纳入既定的公关及资料编制计划内，亦即当你使用传统方法(例如新闻稿)传递的新信息时出现在你的主页上。确保连接项目运作畅顺，以免用户在荧幕上收到“无法查阅所需档案”的信息而大感没趣。
(9)贯彻诺言
做不到的事情，千万不要轻易承诺。切勿随便叫用户做出回应行动，例如要求用户填交订贷表格，除非你已制订好处理这些订单的方法和交货程序。如果在网上列出联络电话,就要确保自己能够迅速解决来电者的问题。
(10)吸引用户浏览
既然绞尽脑汁把主页弄得美观实用，没有人来欣赏就太可惜了。为吸引所有网中人来浏览，必须使主页易于寻找。通知其他网站(例如题材相关的网站)，他们可能想连接你的主页。安排将自己的网址列在所有相关的网址目录、索引、查找程序和“What’s new”页面上。尽量将网址传播开去，使之出现在 Internet和所有传统煤体上、例如书刊广告、公关文件、宣传品等。
在网站上，于每个页面设置“home”按键，方便用户随时返回主页。
万维网充满生命力、正在不断演进，所以一些现时适用的经验，将来未必合用。举例来说，将来家居用户有高速线路接驳Internet，就可以消除数据传输目前的所受的限制、使主页的篇幅可以更长，页面更华丽。新的浏览功能、例如Sun的 HotJava浏览软件所提供的先进功能、将使万维网更强劲和更方便沟通。 HotJava将主页由静态的文件转为动态的实体， 提供诸如即时制作动画、背景音乐、即时存入资料(例如不断更新股票价格)、话音广播等功能、为网上用户带来更多乐趣。有好的主页，还须有精良的设备支持。网站服务器不断推陈出新，使建设网站的工作愈来愈容易。 以 S u n的Netra Internet Server为例、全套设备包括上网所需的软硬件,以及建立完善的高效能网站所需购各种软硬件设施。这些发展为万维网及其用户开拓了壮阔的前景。建设网站的上作，从未如此容易过。
（二）.网站总体设计
在拿到客户的需求说明后，并不是直接开始制作，而是需要对项目进行总体设计，详细设计出一份网站建设方案给客户。总体设计是非常关键的一步。它主要确定：网站需要实现哪些功能；网站开发使用什么软件，在什么样的硬件环境；需要多少人，多少时间；需要遵循的规则和标准有哪些。同时需要写一份总体规划说明书，包括：网站的栏目和板块；网站的功能和相应的程序；网站的链接结构；如果有数据库，进行数据库的概念设计；网站的交互性和用户友好设计。
在总体设计出来后，一般需要给客户一个网站建设方案。很多网页制作公司在接洽业务时就被客户要求提供方案。那时的方案一般比较笼统，而且在客户需求不是十分明确的情况下提交方案，往往和实际制作后的结果会有很大差异。所以应该尽量取得客户的理解，在明确需求并总体设计后提交方案，这样对双方都有益处。网站建设方案的包括以下几个部分：.客户情况分析；网站需要实现的目的和目标；网站形象说明；网站的栏目板块和结构；网站内容的安排，相互链接关系；使用软件，硬件和技术分析说明；开发时间进度表；宣传推广方案；维护方案；制作费用；本公司简介：成功作品，技术，人才说明等。当您的方案通过客户的认可，那么可以开始动手制作网站了。但还不是真正意义上的制作，你需要进行详细设计。
（三）．网站详细设计
总体设计阶段以比较抽象概括的方式提出了解决问题的办法。详细设计阶段的任务就是把解法具体化。详细设计主要是针对程序开发部分来说的。但这个阶段的不是真正编写程序，而是设计出程序的详细规格说明。这种规格说明的作用很类似于其他工程领域中工程师经常使用的工程蓝图，它们应该 包含必要的细节，例如：程序界面，表单，需要的数据等。程序员可以根据它们写出实际的程序代码。我们这次主要用ASP来实现有关功能和解决有关问题的，例如，公告版BBS,聊天室，信息发布系统， 网上超市等都用ASP来实现人机交互功能的，其中也用到调用数据库的技术。
ASP (Active Server Pages)是Microsoft 公司推出的一种Web应用程序开发技术，也是服务器端的脚本（Script）运行环境，使用该技术可以开发动态的、交互的Web应用程序。
ASP可用来产生和执行动态的高性能的WE B服务器程序。当用户使用浏览器请求ASP主页时，WEB服务器做出响应，调用ASP引擎来执行ASP文件，并解释其中的脚本语言(JScript 或VBScript)，通过ODBC连接数据库，由数据库访问组件ADO完成数据库操作，最后ASP生成包含数据查询结果或做出其他响应的HTML页面，送回用户端显示。
ASP程序通常运行在Windows NT+ IIS(Internet Information Server) , 或者Windows 2000 + IIS, 或者Windows 95/98+PWS(Personal Web Server)环境下。其程序代码简单、通用，文件名由.asp结尾。ASP文件通常由四部分构成： 标准的HTML标记； ASP语法命令，即<% %> 标签内的ASP代码； 服务器端的include语句； 以及脚本语言，即：ASP自带JScript和VBScript两种脚本语言，用于增ASP的编程功能，用户也可安装其它脚本语言，如Per语言等。
ASP提供了六个内建对象供用户直接调用，以实现页面的交互： Application对象负责管理所有会话信息，可用来在指定的应用程序的所有用户之间共享信息； Session对象存贮特定用户的会话信息，只被该用户访问，当用户在不同WEB页面跳转时，Session中的变量在用户整个会话过程中一直存在；Session对象需cookie支持； Request对象从用户端取得信息传递给服务器，是ASP读取用户输入的主要方法；Response对象支持服务器将输出内容发送到用户端；Server对象提供对服务器有关方法和属性的访问； Object Context对象是IIS 4.0新增对象，用来进行事务处理。此项功能需得到MTS(Microsoft Transaction Server)管理的支持。
ASP还内置以下组件以增强其功能： Ad Rotator组件用来按指定计划在同一页面上自动轮换显示广告，用于WWW上日益重要的广告服务； Browser Capabilities组件确定访问WEB站点的用户浏览器的功能数据，包括类型、性能、版本等； Database Access组件即ADO (ActiveX Data Objects)，用来访问数据库； File Access组件提供对服务器端文件的读写功能; Content Linking组件生成WEB页内容列表，并将各页顺序连接，用于制作导航条。 此外，用户还可安装Myinfo、Counters、Content Rotator、Page Count等组件，也可自行编制ActiveX组件，以提高系统的实用性。
如上所述，ADO是ASP内置的ActiveX服务器组件(ActiveX Server Component)。它可通过开放式数据库连接接口ODBC和通用数据源接口OLEDB访问多种数据库,是对目前微软所支持的数据库进行操作的最有效、最简单和最直接的方法。
ADO组件主要提供了以下七个对象和四个集合来访问数据库： Connection对象用于建立与后台数据库的连接； Command对象用于执行SQL指令，访问数据库； Parameters对象和Parameters集合为Command对象提供数据和参数； RecordSet对象存放从数据库中调用的数据记录； Field对象和Field集合提供对RecordSet中当前记录的各个字段进行访问的功能； Property对象和Properties集合提供有关信息，供Connection、Command、RecordSet、Field对象使用； Error对象和Errors集合提供访问数据库时的错误信息。
在ASP中使用ADO组件访问后台数据库一般步骤为 ：
在WEB服务器上打开“控制面板”，选中“ODBC”， 定义数据源；然后使用ADO组件查询WEB数据库；再调用Server.CreateObject方法取得“ADODB.Connection”的实例，此后用Open方法打开数据库，指定要执行的SQL命令对数据库进行操作，如查询、浏览、修改、删除等。 当然也可以用本文介绍的方法不定义数据源，直接调用数据库的数据。
（四）.网站的制作规范探讨
(1)网站目录规范
目录建立的原则：以最少的层次提供最清晰简便的访问结构。
a.根目录。根目录指DNS域名服务器指向的索引文件的存放目录。根目录只允许存放index.html和main.html文件，以及其他必须的系统文件；
b.每个语言版本存放于独立的目录；
c.每个主要功能(主菜单)建立一个相应的独立目录；
d.当页面超过20页，每个目录下存放各自独立images目录.共用的图片放在根目录下的images目录下；
e.所有的js文件存放在根目录下统一目录script；
f.所有的CSS文件存放在各语言版本下的style目录
g.所有的CGI程序存放在根目录并列目录cgi_bin目录
(2)文件命名规范
文件命名的原则：以最少的字母达到最容易理解的意义。
a.索引文件统一使用index.html文件名(小写)。index.html文件统一作为“桥页”制作具体内容，仅仅作为跳转页和meta标签页。主内容页为main.htm；
b.菜单图片名称按菜单名的英语翻译为名称。例如：关于我们aboutus;信息反馈feedback 产 品proct;所有单英文单词文件名都必须为小写，所有组合英文单词文件名第二个起第一个字母大写；
c.所有文件名字母间连线都为下划线;
d.图片命名原则以图片英语字母为名,大小原则写同上;
e.js的命名原则以功能的英语单词为名。例如：广告条的js文件名为:Ad.js
f.所有的CGI文件后缀为.cgi。
(3)链接结构规范
链接结构的原则：用最少的链接，使得浏览最有效率。首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。超过三级页面，在页面顶部设置导航条。
(4)尺寸规范
a.页面标准按800*600分辨率制作，实际尺寸为778*434px;
b.每个标准页面为A4幅面大小，即8.5X11英寸;
c.大banner为468*60px，小banner为88*31px。
(5) 首页HEAD区规范
a.公司版权注释
<! --- The site is designed by dxxweb.inc05/2001-->
b.网页显示字符集
简体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英 语：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
c.网页制作者信息
<META name="author" content="[email protected]">
d.网站简介
<META NAME="DESCRIPTION" CONTENT="电子与信息工程系">
e.搜索关键字
<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
f.网页的css规范
<LINK href="style/style.css" rel="stylesheet" type="text/css">
g.网页标题
<title>电子与信息工程系</title>
四、网站的设计制作
1.整体形象设计
在程序员进行详细设计的同时，网页设计师开始设计网站的整体形象和首页。
整体形象设计包括标准字，Logo，标准色彩，广告语等。 首页设计包括版面，色彩，图像，动态效果，图标等风格设计，也包括banner，菜单，标题，版权等模块设计。首页一般设计1-3个不同风格。
2.开发制作
本次网站规划设计采用软件工程的设计方法，设计小组在系统分析和总体设计的基础上，将设计任务分解，分配到设计组的每个成员，各模块有设计组成员单独承担设计和调试，既有分工，又有协作，最后将各模块上载到服务器上，做链接和整体的调试。
3.调试完善
各模块初步完成后，上传到服务器，对网站进行全范围的测试。包括速度，兼容性，交互性，链接正确性，程序健壮性，超流量测试等，发现问题及时解决并记录下来。
网站建设实际上是一个不断充实和完善的过程，通过不断的发现问题，解决问题，修改，补充，使网站结构趋向合理，内容更加丰富，形式更富有感染力。
4.宣传推广
刚刚建成的网站就好像一个新注册的电话号码，没有人会自动找上门来，这时你就需要适当地做一些网站推广工作了,这里有很多方法，例如：
a.网页里设置适当的META标签；
b.交换友情链接。这是个免费而高效的办法，就好比在别人商店打上你的广告，在你的商店打上别人的广告，这样一来当网友参观别人的网站时就知道你的网站了，如果你的广告做的好，他一多半都会参观你的网站，这是件无须开支、互利互惠的好事情，推荐使用。
c. 在各大搜索网站（例如sohu.com yahoo.com）注册你的网站，这样当别人在搜索同类的信息时就会发现你的网站；
d.备新闻稿件在各新闻公告板发表；
e.合理使用Email邮件列表；
f.付费广告，这个办法最有效了，但它是付费的；
g.在论坛里贴条子。这个办法效率不高，也很累，有时也会被别人删除掉，所以不推荐。
另外还需要说明的是，请千万不要使用发垃圾邮件来推广个人主页，这样不但不会使别人喜欢你的网站，反而会引起别人的极度反感，这是一种不道德的行为。
至此，网站项目建设完毕。
5．维护
网站做好了是不是就打算一劳永逸呢？不是，如果网站做大的话，网站维护也是个艰巨的工作。当网站变得十分庞大时将会有不计其数的图片、网页文件等内容，如果它们有一个丢失或链接失败都会引起网页错误，想想我们做的多副图片如果少一副会是什么情景？所以我们一定要保证整个网站的“健康”和完整。为了使网站健康、完整，通常我们在做新网站之前，都应该在DW里建设一个“本地网站”，也就是自己电脑上的网站副本，这样才能有效减少网站错误，刚才我们制作网站时是先做网页后建网站，其实这种网站建设方法是错误的，正确的是先建网站后添加内容。另外就是要时常检查网站的链接是否有误，这里我们可以使用DW的SITE程序的SITE菜单中CHECK LINK SITEWIDE选项来检查网站中是否有断掉的链接，以便及时修复。
另外我们还应该科学地存放不同类型的文件，例如将网站中的图片都放在一个文件夹里，将网页放在另一个文件夹里。而且如果将来网站真的“肥沃”起来，我们甚至需要为每一个栏目建立一个文件夹，例如将有关MUSIC栏目的文件放在一个文件夹里，将PICTURES栏目的文件放在一个文件夹里，这样一来，会为我们的维护工作减少很多不必要的麻烦！
网站维护最后要说的就是网站的文件备份了，如果电脑发生了灾难，我们的网站就很可能要瘫痪了，所以时常备份网站文件也是很重要的。
网站成功推出后，长期的维护工作才刚刚开始，我们需要做到的是:及时响应客户反馈；例如可以采取Email自动回复功能，然后尽快解决问题，再次回复；网站流量统计分析和相应对策；尽量推广和使用您的网址；网站内容的及时更新和维护。
五、网站安全问题及对策
防火墙是阻止外面的人对你的网络进行访问的任何设备，此设备通常是软件和硬件和组合体，它通常根据一些规则来挑选想要或不想要的地址。
首先绝大多数简单的身份验证过程都是以IP地址为根据的。IP地址是Internet网上最普遍的身份索引，它有静态和动态之分。 静态IP地址即固定不变的IP地址；它可以是某台连在Internet网上的主机地址。静态IP地址分在几类。其中一类能通过Whois查询命令得到；并且此类地址主要是Internet网上最高层的主机的IP地址，这些主机可以是域名服务器、Web服务器和“根”主机，并且在InterNIC的Whois数据库中都有它们的注册主机名。另一类静态IP地址被分配给Internet网中的第二和第三层主机（这些机器还有固定的物理地址），然而这些机器不一定拥有注册主机名。但不管怎样它们有注册的IP地址。动态IP地址是指每次强制分配给不同的上网主机的地址。ISP的拔号服务器中经常使用动态IP地址－－节点机每次拔号上网，都会被分配一个不同的IP地址。无论IP地址是静态还是动态的，它都被用于网络传输中。
6、让网页更吸引人的几个网页设计技巧
技巧谈不上，只能说细节重要。
第一、版式。用户打开网站，首先看到的是什么？当然是排版，你要有一个吸引人的排版才能让用户有兴趣往下看。
第二、颜色搭配。论重要性，它不比版式低，根据网站的内容性质，我们要适当使用与内容搭配的颜色，用户以哪一种心情进入网站，设计师心里要有数。
第三、必要的功能。用户浏览到一半，想要资询你，发现没有联系方式，那岂不是失去了这个一个客户？当然不止联系方式，还有返回顶部也很重要，特别是页面很长的时候，总不能让用户一直拨动滚轮，滚轮坏了你给买啊？
第四、能进一步了解产品或者服务等的内容信息。拿淘宝为例，用户看到某个商品，觉得喜欢，想要了解产品，这时候必须有产品详情展示给用户。
这只是一部分，当然还有很多。总之想要有一个高大上的网站，必须考虑到用户体验。
7、为什么网页设计要使用栅格化
研究网页栅格系统前，来看一组数据：
网站 首页页面宽度 px
Yahoo! 950
淘宝 950
MySpace 960
新浪 950
网易 960
Live Search 958
搜狐 950
优酷 960
AOL 960
上面列举的都是Alexa全球排名前100的站点，它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点：页面结构较复杂，都可以认为是门户型网站。
再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点，它们的首页宽度没什么固定规律，共同的特点是：功能专一，页面结构相对简单。
根据上面的简单分析可以认为：当搭建页面结构复杂的门户型网站时，开发工程师们不约而同地都选择将页面宽度定为950px/960px.
这是一件很有趣的事情，为什么要选择这个宽度呢？这个宽度值究竟有什么魔力？
神奇的960
设计师们对苹果情有独衷。在 1024 x 768 的分辨率下，打开Firefox：
自然状态下，Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框，网页的实际大小为上图中的红色部分，高宽为 960 x 650.
有趣的960就这样出现了。是的，可以认为一切就这么简单。栅格系统最早出现在平面设计领域，设计师们爱用苹果，苹果下浏览器的默认宽度为960px, 于是960就这么“自然”地出现了。
数字背后的奥妙
上面的“自然”出现，细究自然是不让人信服的。苹果系统的设计者们在没有喝醉酒的情况下选择了960，而不是其它什么1000之类的整数，自然另有奥妙。
科学界有很多问题都可以归结到数学问题上，我们也从数学着手：
960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍：
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,
48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
共26种（26 = 7 * 2 * 2 - 2, 减去2是去掉1和960自身），我们标记为：
N(960) = N(2^6 * 3 * 5) = 26
根据上面的算法，可以得到：
N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30
根据直觉（严格证明也不难，不过还是留给数学系的学生去证明吧），我们得到一个有趣的结论：
要使得N(width)最大，width的取值有两个系列：
A系列： …, 320, 720, 1440, …
B系列： …, 480, 960, 1920, …
N越大，可组合的宽度值就越多。对栅格系统来说，这意味着越灵活！
目前绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度，可以看出960是非常合适的。这样，在目前主流显示器下，960就成为网页栅格系统中的最佳宽度了。（也许不久的将来，将会流行1440）首先澄清一个应用场景问题。研究(1)中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应布局更受青睐。
有个很有意思的网站是Yahoo!, 看起来是固定宽度布局，实际上在CSS中只要去掉一行，就能摇身一变自适应宽度了：
以下为引用的内容：
#page { width: 70em;}
为什么Yahoo!最后选择了定宽布局呢?这很可能是因为定宽布局比宽度自适应布局更容易控制。对于结构复杂的网站来说，可维护性和可扩展性非常重要。Yahoo!是以信息展示为主的门户型网站，960的宽度对于信息的阅读比较友善(Joe Clark写了一篇屏幕阅读时有关行长的有趣文章)。种种因素使得Yahoo!最后采用了定宽布局(Tommy Olsson总结了每种布局设计的优缺点)。
这里将只关注定宽布局，适用的场景是搭建复杂的门户型网站。对于宽度自适应布局和相应的栅格系统，暂不讨论(根据实现的技术手段不同，宽度自适应布局又分为流体布局和弹性布局。我个人蛮喜欢弹性布局，以后有时间再研究)。
好了，已经将范围缩小到定宽布局的网页栅格系统，那我们开始吧。
并不遥远的750
还记得800×600的显示器不?虽然才时隔几年，感觉却好像是上个世纪的事了。Mark Boulton做了最早的探索：
将750分割成均等的6份，这就形成了栅格系统，稍加组合划分就形成了两栏布局和三栏布局。Mark Boulton还研究了Gutter(垂直栏之间的间隙)对栅格的影响，有兴趣的可以阅读原文，或者跟着我往下看吧，下面将详细阐述。
几个术语和一个公式
一个标准的栅格系统，包括以下部分：
将Flowline的总宽度标记为W, Column的宽度标记为c, Gutter宽度标记为g, Margin的宽度标记为m, Column的个数标记为N, 我们可以得到以下公式：
W = c * N + g * (N - 1) + 2 * m
一般来说，Gutter的宽度是Margin的两倍，上面的公式可以简化为：
W = c * N + g * (N - 1) + g = (c + g) * N
将c+g标记为C, 公式变得非常简单：
W = C * N
上面的公式就是栅格系统的基础，很简单吧。
950的来历
具体应用时，Margin其实是一个空白边，从视觉上看并不属于总宽度。不少栅格设计里习惯性地设定Gutter为10px, 这样Margin就是5px. 当W为960，分割成6列时，栅格如下图：
上图的处理是左右Margin各为5px. 也可以将Margin集中放在一边，比如右边：
无论Margin放在何处(这只影响技术实现，不影响设计)，我们真正要关注的是去除Margin之后的部分：
这就是我们要真正关注的950!将W的含义变为去除Margin的总宽度，公式变化为：
W = N * C - g
将上面的公式实例化一下：
950 = 12 * 80 - 10
950 = 16 * 60 - 10
950 = 24 * 40 - 10
这就形成了960蛋糕的三种常见切法。
12 x 80
16 x 60
24 x 40
上面三种切法，N越大，灵活度越高。可以根据网页的实际复杂度来选用对应的切法。在960 Grid System首页中，展示了12 x 80的应用：
我们来看下 研究(1)中开头列举的网站的栅格应用情况。
Yahoo!是很标准的 24 x 40 栅格：
淘宝网目前只有商城上部分使用了栅格系统(大的两栏布局遵守了 24 x 40 的栅格化，主体部分使用的另一套740的栅格划分)：
网易很不错，采用的是 16 x 60 的栅格系统：
研究(1)中的其它站点都没有真正严格地采用栅格系统。
栅格系统的优势
上面的“发现”是让人有点沮丧的。目前严格采用栅格系统的站点非常少，为什么我们还要努力的让网页栅格化呢?
栅格系统具有以下优势：
能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。
基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。
对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计。(详见《超越CSS》一书)
对于大型网站来说，我相信栅格化将是一种潮流和趋势。
下面讨论栅格系统中的黄金分割。
黄金分割
黄金分割可以归结为数学问题：对于长度为1的线段，将其分成两部分 x 和 1 - x, 使得：
x / 1 = (1 - x) / x
化为简单的二次方程：
x^2 + x - 1 = 0
正数解为：
x = (sqrt(5) - 1) / 2 ~= 0.618
这就是黄金分割。这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域，在管理、工程设计等方面也有着不可忽视的作用。 (这是个自然界的魔数，类似的还有真空光速、普朗克常数、精细结构等等，感兴趣的Google吧)
在平面设计领域，黄金分割点被广泛采用。比如下面这种图：
数一数上面有多少黄金分割?
对于960栅格，实际宽度是950. 两栏布局时，黄金分割为：
对于 24 x 40 的情景，最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15. 但实际使用时，因为窄栏经常用来做导航或放辅助信息，并不需要350px这么宽。因此实际情况下经常被采用的布局是：
上面讲的都是宽度方向上的栅格化，下面我们看看高度方向上如何应用。
高度方向上的栅格
还记得研究(1)中那张红红的很刺眼的图吗?注意高度值560也是很神奇的。
N(560) = N(2^4 * 5 * 7) = 18
560 / 960 ~= 0.583
N(560)比较大，同时可以让高宽比接近黄金分割。针对560, 我们采用 14 x 40 栅格：
这样，我们就在宽度和高度两个方向上都实现了栅格化。
淘宝的首页目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）：
（图1）
纷乱的高度世界我们来看下图1左上角。左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格（不可避免的要调整内容，比如人气宝贝中将只能放下3张图片）。来仔细看下高度方向：
（图2）
高度方向的布局是：90 : 117 : 100, 第一个间隔是8, 总高度为325. 很明显，高度方向没有任何栅格化的迹象。实际上，即便是严格遵守栅格系统的Yahoo!首页，高度方向上也没有严格栅格化。
这究竟是为何？
一切皆有可能我们缩小关注点：
（图3）
上图中，图像的大小是70 x 70, 刚好是24列960栅格系统两列的宽度。对于右边的文字，采取了如下样式：font-size: 12px;line-height: 150%; /* 12 x 150% = 18px */
中文字体是宋体，line-height的计算值是18px. 注意图3中文字部分可视区域的高度为65, 上下各有4px和1px的间隙。为什么会产生这么奇怪的间隙呢？我们来看下图：
（图4）
从上图中我们可以得知，12px的宋体中文字，实际高度只有11px. line-height减去11多出来的高度，则“均匀”分布在上下间隙中（如果多出来的高度为偶数，则上下均分；为奇数时，上面比下面多1px）。这样，对于70px的高度来说，要布局4行文字时，假设行高多出来的上半部分为x, 下半部分为y, 在最理想的情况下，应该满足以下公式：11 * 4 + 4 * x + 3 * y = 70x = y 或 x = y + 1
不难推出，x最理想的整数解为4. 从而line-height为 4 + 11 + 3 = 18. 因此：
对于24列960栅格系统来说，如果要在高度方向上实现栅格，font-size为12px时，line-height的最佳取值是18px(150%).
追求完美点话，还可以将文字部分margin-top: -1px, 使得65上下的间隙为3和2.
至此，我们可以初步判断：
高度方向上是有可能严格栅格化的。一切皆有可能！
然而，现实总那么残酷
（图5）
上图中的标题高度为22, 这在24列960栅格系统中是无法对齐的。而且总高度为100, 在24列960栅格系统中也不存在（110才可以）。或许高度方向上我们可以细化行宽为20, 但依旧没法解决上面两个问题（22是明显不能解决的，而对于100px的高度，也无法通过细化行宽来解决。可选高度永远是10的奇数倍，如果进一步细化，小于10后，会变得非常繁琐，没什么实际应用价值）宽度世界里会好些吗
（图6）
上面是Yahoo!首页上的两个小模块，我都不想去标注模块里面的布局宽度了（因为一点都不符合24列960栅格系统）。宽度世界里，和高度世界一样充满希望但现实却残酷无比。银弹是不存在的栅格系统是美好的。但如果我们一味地追求将所有设计都栅格化（必须承认我曾有这个幻想），则立刻会陷入地狱一般的黑暗中。这篇文章中的艰难尝试（我分析了20多个小模块），让我突然醒悟到一个粒度问题：任何设计都有适用范围，超出最佳适用范围，强行使用只会带来无尽的烦恼。对于栅格系统（这里指所有栅格系统，包括多种栅格系统混合使用的情景）来说，我觉得以下场景非常适合：
页面的总体宽度布局，比如两栏、三栏等布局
一些固定区块的尺寸，比如广告图片的尺寸
区块之间的间距，可以参考栅格系统的槽宽（Gutter）
一些可以栅格化的小区域，比如图3中的例子，暗合栅格往往能简化布局上的考虑
除了上面这些应用场景，强行使用栅格系统，往往会束手束脚，适得其反。这篇文章的目的，就是尝试用最啰嗦最费神貌似很科学实际很无聊的分析来指出栅格系统应用时的粒度问题。在粒度问题上达成一致后，下一篇中我们将讨论栅格系统的技术实现，最后一篇则讨论栅格系统的压轴好戏：模块化开发。
前三篇文章中，明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。
Blueprint的实现Blueprint是一个完整的CSS框架，栅格系统是它的一部分功能。我们来看demo页面：
以上三栏布局的代码为：<style type="text/css"> .container { margin: 0 auto; width: 950px } .span-8 { float: left; margin-right: 10px } div.last { margin-right: 0 } hr { clear: both; height: 0; border: none }</style><div class="container"> <div class="span-8"></div> <div class="span-8"></div> <div class="span-8 last"></div> <hr /></div>
上面是基本功能，Blueprint还支持append-n, prepend-m, border等“高级”功能，这些就不细说了
8、网页设计原理:如何设计漂亮的网页
迈阿密大学的艺术科学学院网页通过细节的精心处理给人一种赏心悦目的视觉效果。最好的设计往往就是最简单的设计：一个中心思想，一幅图片，少量的文字，开放的空间。这种风格的设计清晰、漂亮，让人印象深刻。但真实的生活并不经常是如此的简单，更多的是杂事缠身。在设计一个项目时，往往需要将很多不同的信息同时放上去，一个都不能少，就象现在很多的网站一样，信息密集，显得非常拥挤复杂。 在本文中，我们将介绍迈阿密大学的艺术科学学院网站的版面，它之所以吸引我们的注意，是因为该网站虽然有很多信息，但却给我们留下美好的印象。该网站通过两个途径实现这种效果：一，它尽可能地减少各种元素，只保留最重要的部分（其实仍然是“简单的设计”思想在起作用），二，就是在处理各种细节时都经过精心处理。这种设计手法在技术上其实一点不难，让我们进去看看：主页虽然多达二十多个链接，但整体却显得温和，协调一致。结构： 网站的页面尺寸并没有走极端，不会太长，大多数页面上的内容不需要拖动就可以轻易浏览，是一种方便人们阅读的屏幕尺寸。每个页面由三个区域构成，每一个区域负责不同的信息，最上方及最下方的区域内容是固定的，改变的只是中间区域的内容。不同的颜色定义了不同的区域：白色区域是中心舞台，这个区域通过上方颜色较深的页眉与下方较浅的页脚而得到确定。固定内容的区域包含了各种最基本的元素：标志，链接，搜索等诸如此类的内容。中间白色区域的内容则是变化的，主要展示不同的事件信息、新闻简讯等内容。从下方示意图可以看出，这个页面结构相当紧凑，可以有效组织各种内容，比起那种需要拖动滚动条的页面更容易阅读。紧凑，是其中的关键。页眉：此外由两个色带构成：绿色及棕色。这两种颜色构成了一个简单坚实的页眉并统领着这个网站。标志及链接文字则反转成白色字体。为了柔和视觉效果，左方还使用了象是阳光照射所呈现的一个非常微弱的渐变面。 页眉右方远处有四个固定的链接，文字的颜色显得相当低调，但由于处于页眉的区域内，没有人会忽视它的存在。主链接：第一级链接处于页眉的标色色带区域内。链接的字体、颜色及阴影与上方的标志呼应，使两者之间产生视觉上的联系。 绿色及棕色当然是两种不同的颜色，但如果你将这两种颜色变成灰度显示，你可以发现他们的相同之处，其灰度色值是基本一样的，这个隐藏的共同点使两者在视觉上既有区别，又有联系。下图中，字母的间距比较宽松，与普通的字母间距相比，呈现一种轻松气息，也传达了一种从容及尊严。在屏幕显示时，字母间距较大也更容易阅读。次级链接： 当浏览者深入这个网站时，字体字母及颜色在细节上的变化都在暗示读者这是另外的一些信息。但字体及尺寸仍然与主链接相同。中心舞台：在页眉与页脚之间的白色区域是我们的中心区域，也是这个网站的视觉焦点所在。在每一个页面中的文章，都显得相当简短，而且象印刷的书本那样的文字排版，行距非常大，采用衬线字体，整个页面显得清爽而不窒息。其书本气息让人能够舒适阅读。页脚： 有效设计的页脚是可以发挥很大的作用的。不要将页脚想象成一条多出来的“尾巴”，而应该将它看作是一个支撑点，支撑着上述所有内容的一个区域。页脚区域中放置的也是一些固定不变的内容，如链接、联系信息及标志等。在设计中，层次感是非常重要的。上图左，如果将页眉与页脚设计成相同的份量，给人的感觉就象奥利奥夹心曲奇饼，它分散了读者的注意力，弱化了版面的力量感。相反，三个区域呈现层次感使到每个区域都能够正确承担起自己的任务。在脑海中一定要记住的是，读者的眼睛永远会集中在中心区域内，所以这里要放置最重要的信息。周围所放置是支持性的内容。字体：这个网页中，正文的字体全部采用Georgia字体，可以说是一种在屏幕上显示的最佳衬线字体，当样，Georgia作为印刷字体同样表现良好。中国设计者在使用英文字体时更多会采用默认的Times字体。 让我们看看Georgia字体与Times字体的区别，从这种区别中，也可以知道为什么在屏幕上显示时，Georgia字体会赢了这一回合。点击上图看大图字母的间距与字母形状一样重要， Georgia字体用于正文时，整体显得平滑、重复及具有节奏感。试比较以下两者的观看感觉。
9、情境化设计包含哪些要素？大致分为几种类型？
旅游活动中情境化设计的三要素是：舞台设计、道具设计、布景设计。舞台设计是情景化的主要线索，旅游的主要线索是其要提供给游客怎样的情境体验，道具设计是围绕情境线索而设计的人们可以参与的活动设施，旅游活动必然要落实到空间，这也就产生了环境的布置问题，什么样的舞台就应该具备什么样的环境。旅游设计是一门包括面非常广的学问也是我们在旅游开发中要注意的一个非常重要的方面，有关旅游设计我们院也是在不断的研究和探讨，而且还做出过一些专题报告，如果你想要做进一步的了解的话可以调集下列文章：1、《情境设计与非主流景观新整合 》2、《动感艺术理念下的游憩与景观设计 》3、《旅游设计学系列》