第5章 网站设计与 建设
第 章 网站页面设计nn5nn�.1 网页的风格设计n网页的风格设计是指用户对网站整体形象的一种感觉。如果 说硬件是网站的生存环境，结构是网站的骨骼，内容是网站 的血肉，那么界面就是网站的外表。 相对
第 章 网站页面设计nn5nn�.1 网页的风格设计n网页的风格设计是指用户对网站整体形象的一种感觉。如果 说硬件是网站的生存环境，结构是网站的骨骼，内容是网站 的血肉，那么界面就是网站的外表。 相对于网站的其它设计，网站的风格设计是最抽象、也是最 头疼的一个问题。许多网站的建设者作为专业做作业人员， 缺少开发独特风格的主页的能力。而专业的美工师通常从事 的都是传统的美工技术，对网页操作技术和因特网知之甚 少，难设计出最适合网络传输的图片。所以网站的页面设计 并不简单，它是一项综合技术。nn�.1 网页的风格设计n5.1.1 确定网站的主题风格 整个网站的主题风格是在图形界面设计之前必须要解决的重 要问题，是图形界面设计的出发点。 1．主题风格概述 ． 风格是一个抽象的概念，是指站点整体形象给用户的综合感 受，这个整体形象包括网站的CI（标志、色彩、字体、标语 等）、版面布局、浏览方式、交互性、文字、语气、内容价 值、存在意义、站点荣誉等等诸多因素。它往往无法用一个 具体的物体来描述，没有一个固定的程式可以参照和模仿。 有风格的网站与普通网站的区别在于： 有风格的网站与普通网站的区别在于：普通网站你看到的只 是堆砌在一起的信息，你只能用理性的感受来描述。但浏览 过有风格的网站后你能有更深一层的感性认识，比如站点的 品位，和蔼可亲的个性等。 所以风格就是一句话：与众不同，有个性。 所以风格就是一句话：与众不同，有个性。nn�.1 网页的风格设计n2．如何建立网站的主题风格 ． （1）要肯定风格是建立在有价值内容之上的 要肯定风格是建立在有价值内容之上的。一个网站有 要肯定风格是建立在有价值内容之上的 风格而没有内容，就像绣花枕头草包一个，无论你的站点 采用何种形式、什么样的外观、提供什么内容，都要以站 点的最终内容、目的作为出发点来考虑。 （2）要彻底搞清楚自己希望站点给人的印象是什么 ） 要彻底搞清楚自己希望站点给人的印象是什么。在此 反复强调给人以深刻印象，因为这点很重要，浏览者通常 会重返他印象最深刻的网站。可以从这几个问题来理清思 路。如果只用一名话来描述你的站点，应该是什么呢？如 果网站是一个人，他拥有的个性是什么呢？作为站长，你 希望给人的印象是什么呢？用一种动物来比喻，你的网站 最象什么？浏览者觉得你和其他网站的不同是什么呢？浏 览者跟你交流合作的感受又是什么呢？你可以自己先填写 一份答案，然后让其他的网友填写，比较的结果会告诉你 的网站现在的差距、弱点及需
要改进的地方。nn�.1 网页的风格设计n（3）在明确自己的网站印象后，开始努力建立和加强这种 印象。经过第二步印象的“量化”后。你需要进一步找出 进一步找出 其中最有特色特点的东西，就是最能体现网站风格的东西。 并以它作为网站的特色加以重点强化 特色加以重点强化，宣传。例如：再次 特色加以重点强化 审查网站的名称、域名、栏目名称是否符合这种个性、是 否容易记忆等等。 （4）确定了风格后，要坚持所有网页风格的一致性。特别 是色彩斑斓的站点,尤其要注意风格的统一 注意风格的统一。其实,风格一 注意风格的统一 致性的原则和传统的印刷出版物没什么区别。网页上所有 的图像、文字,包括像背景颜色、区分线、字体、标题、 注脚等,都要统一风格,贯穿全站。这样读者看起来舒服、 顺畅,会对网站留下一个“很专业”的印象。在方法上可 统一使用CSS样式技术，对整个站点内的页面风格进行统 一控制。nn�.1 网页的风格设计n从美工设计角度来看,网站的风格是指通过一定的颜色及图案 组合,布局安排等设计来体现网站经营者的思想和倾向。具体 三个方面的工作要做: 制作时有三个方面 三个方面 第一步:设置背景颜色或图案 第二步:设置文本的颜色 第三步:设置链接点的颜色nn�.1 网页的风格设计n3．网页主题风格的创意设计 ． 你的网站要有独特并能给人深刻印象的风格，创意是很重要 的。创意是网站生存的关键。 创意到底是什么？如何产生创意呢？ 创意到底是什么？如何产生创意呢？ 创意是传达信息的一种特别方式。创意就是灵感。很多时 候，成功的网站就是设计者的一点灵感创造出来的。 （1）网页创意设计的意义、功能和目的 网页创意设计是否成功，除了其内容因素外，首先要看其在 视觉上能否引人注目。 网页的创意设计包括文字排列方向、字群聚散组合，字体大 小风格的选择，图片的分布及色彩与空白的经营。不仅追求 网页形式的变化，更重视各视觉元素的不同形式和构成能给 人在感情上造成不同的心理感受，并体现不同的主题。nn�.1 网页的风格设计n（2）网页创意设计的构成要素及其作用 标题。标题是表达信息主题的短句，标题有主标题与子标 题之分。 标语。标语是具有韵味的意义完整的句子。 正文。 网页名称。 标志。 插图。将所传达的信息内容赋以视觉化的造型称为插图。 图标。 背景。 动画。动画不仅能增添网页的视觉趣味效果，同时，也可 以用来进一步突出网页和信息内容的主题和风格。nn�.1 网页的风格设计n（3）网页创意设计的原理和准则 进行网页的创意设计时，应遵循以下几
条构成原则 几条构成原则： 几条构成原则 内容与形式表现必须统一和有序，形式表现必须服从内容 要求，在造型上各构成要素规格化的设计样式要统一。要依 据信息内容的意义和结构进行情节化、理性化的统调布局和 必要的图像符号化处理。 必须考虑网页上各构成要素之间的视觉流程，能自然而有 序地达到信息诉求重点的位置，突出主题。注意提高网页信 息内容的视读性，在视觉上着力强调网页的诉求重点。 注意保护网页在视觉上的相对均衡感，不论是正常的均衡 或是异常的均衡，均应有相应的均衡和律动感，使其在网页 上得到正确的配置，否则会失去必要的安定感。nn�.1 网页的风格设计n（3）网页创意设计的原理和准则 进行网页的创意设计时，应遵循以下几条构成原则 几条构成原则： 几条构成原则 突出主题要素。注意网页设计中的空白处理。注重整体的 对比因素。 创造一定的韵律感。它反映在网页设计中利用有力的线条、 形体及色彩形成一种有节奏性的律动感，能引导人的视觉以 一种流畅而有停顿的方式运动。既有视觉的连续性又有间歇 性，使人能够抑扬起落地浏览整个网页，阅读时感到轻松而 又富于韵味。 网页的创意设计还必须重视“形象思维”的情感象征意义 的传达，以有别于知识性思考形式审美结构的营造。nn�.1 网页的风格设计n（4）网页创意设计的形式和表现手法 点、线、面 形状间的组合和构成关系 形状与空间关系 构架与空间 节奏与韵律 对比，调和与统一 装饰与趣味 特异nn�.1 网页的风格设计n4．网站名称的设计 ． 网站的名称，也称为网站的标题。网站的名称应是它主题的 一部分，也应是网站设计的一部分，一个好的主题应该包括 一个好的主题应该包括 给网站起一个好的名字，如图5-1所示。如果网站题材和主 给网站起一个好的名字 题已经确定，就要围绕题材和主题给网站起一个名字。和现 实生活中的商标一样，网站名称是否正气、响亮、易记，这 对网站的形象和宣传推广有很大影响，对网站主题的表现也 有很大的影响。 但是，也有些网站名称平平，而内容却十分突出。这些网站 的特点是开始的时候访问量不太大，但一段时间之后访问量 却与日俱增。这种情况也是很常见的，不过网站的发展就走 了不少的弯路，如果一开始就使用一个人人记得住的名字， 这样再加上内容与众不同，一定会成为一个成功的网站的。nn�.1 网页的风格设计n网站名称设计的一般规则 一般规则： 一般规则 （1）名称要正，要符合人类社会公认的文明标准和规范。 要合法、合情、合理，不能用带有反动的、色情的、
迷信的、 危害社会安全的名词语句。 （2）名称要易记。根据中文网站浏览者的特点，除非特别 的需要，网站的名字最好用中文名称，不要使用英文或者中 英文混合型名称，因为中文名字更亲切更好记。另外，网站 名称的字数应该控制在六个字（最好四个字）以内，比如 “阿里巴巴”、“网易”等。 （3）名称要有特色。名称如果能体现一定的文化内涵，给 浏览者更多的视觉冲击和空间想象力，则为上品。例如：音 乐前卫，网页陶吧，e书时空等网站的名字就很有特色。在 体现出网站主题的同时，又能点出特色之处。 总之,主题和名称的确立是设计网站的第一步,如能设计出一 个既有特色又令人满意的名称,花费再多的时间和精力都是值 得的。nn�.1 网页的风格设计n5．网站的标志（logo）和网页的图标设计 ．网站的标志（ ） 网站的标志就如同商标一样，是网站特色的集中体现。它对 对 外宣传网站的形象，对内反映网站的内涵。 外宣传网站的形象，对内反映网站的内涵 一个好的网站标志通常既要具有琅琅上口的名字，又要具有 令人印象深刻的图片造型，让人看见logo就能联想起你的站 点。 图标的代表了网页上一个部分的内容，也能对栏目内容进行 装饰。下面分别介绍网站的标志设计和网页的图标设计。nn�.1 网页的风格设计n（1）网站标志的类型 为你的网站设计一个好的logo，对提高你网站的形象有很大 的帮助，一般来说，网站的logo可以分为主图标和副图标两 种类型。 有时你进入一个网站时，看到的并不是网站的首页，而是一 幅图画，你要点击图形或者首页上的其他链接才能进入首页， 这幅图画就是网站的主图标 主图标。在进入了首页之后，一般在网 主图标 页的右上角有一个很小的logo，这就是网站的副图标 副图标。设置 副图标 主图标的作用，就是让人们进入你的网站之前，先给人一个 总体的印象。网站的副图标就是放在首页或者所有页面中的 代表了网站形象的一帼小图片。当没有主图标而只有一个副 图标时，我们就没有主副之分而称这个副图标为网站的logo 图标）。如无特别说明，下面所说的logo都是指网站的副图 标。nn�.1 网页的风格设计n下面就详细介绍两个重要的 logo类型。 纯文字型的logo。 纯文字型的 这类logo一般是由网站的名 称、网址，或者一两个能概 括角色内容的词构成。当然， 字体要跟文章中的字体有很 大的分别，字的颜色可以鲜 艳一些，引人注目一点。要 注意的是，选择合适的文字 作为logo和文字之间的相互 搭配是很重要的。nn�.1 网页的风格设计n图形加文字的logo。 。 图形加文字的 这类logo一般由一
个或几个 小图案再配合文字组成。图 案必须能反映出网站的特色， 而已必须要精巧，做到小巧 玲就最合适了。而文字的内 容也可以与纯文字型logo的 内容一样。由于文字与图案 的配合更能体现网站的风格， 这类logo在网上更加常用。nn�.1 网页的风格设计n（2）网站标志的设计 网站标志的设计并不是漂亮 就行，它需综合考虑网站的 性质、网站的特色、网站所 在地的历史文化等诸多方面 的因素。 比如门户网站在设计时就必 须考虑门户站点的性质。新 浪 网 （ www.sina.com.cn ） 在设计其网站标志时就非常 成功，它那只大眼睛无时不 向人门传送“新浪就是你的 眼睛，能帮助你快速地找到 你想要的东西”这一信息。nn�.1 网页的风格设计n又比如政府网站不仅需要考虑严肃认真的政府形象，还需 要考虑政府所在地的历史文化。nn�.1 网页的风格设计n总之，网站标志的设计既要有特色，醒目，又要符合网站的 网站标志的设计既要有特色，醒目， 网站标志的设计既要有特色 内涵。设计Logo也有较大程度取决于创意。 内涵 标志的设计创意来自你网站的名称和内容，可以用有代表性 的人物、动物和花草；也可以用中文、英文字母，或者各种 符号、图案等等。还可通过卡通化和艺术化的手段或者用英 文字母通过不同字体组合，以及颜色的变化来表现他们的效 果。 另外，借鉴其他网站的LOGO制作是自己制作LOGO的很好 的手段。例如 webdesigner（网页设计师），我们将其中E 字母大写一下，wEbdEsigEr，感觉怎么样,这其实就是一种 创意。如果你能够在你的网页上也加上那么几下神来之笔， 你创造出来的Logo也许会深深印在人们心中。nn�.1 网页的风格设计n（3）网站标志设计的注意事项： 体现形象。利用有代表性的人物、动物和花草，作为设计 要体现形象 体现形象 的蓝本，加以卡通化和艺术化。例如迪斯尼的米老鼠，搜狐 的卡通狐狸，鲨威体坛的篮球鲨鱼。 要体现专业 体现专业。可以以本专业有代表的物品作为标志。比如中 体现专业 国银行的铜板标志，奔驰汽车的方向盘标志。 要体现特色 体现特色。最常用和最简单的方式是用自己网站的英文名 体现特色 称作标志。采用不同的字体，字母的变形，字母的组合可以 很容易制作好自己的标志。比如：soim是用soim的英文作为 标志，新浪用字母sina 眼睛作为标志。nn�.1 网页的风格设计n图标设计的技巧通常有以下 几种。 （1）栏目标题前加上一个小 目标 细看网易网站的首页，你会 发现在有些标题栏目之前， 都有一个趣的符号标志 符号标志，而 符号标志 且这些标志大多数反映了栏 目的内容。例如在“通
信” 一栏，就用了一个代表信封 的图标，在“娱乐”一栏， 放置了一个游戏手柄的小图 标等。nn�.1 网页的风格设计n（2）广告图标的安排 一个成功的商业网站，除了正上方的广告横幅（banner）以 外，往往还有不止一个作为广告宣传功能的图标。 为了向浏览者提供更多广告客户的信息，一般这些图标都使 用gif动画形式，把文字和图片轮流显示。 21世纪网站在这方面做得很好，他们的诀窍就是把这些图标 放到栏目之间的空隙处，而且尽量选择文字多、图标少的地 方。这样，既为文字增加了生气，增添了网页的色彩，又满 足了广告客户的要求。nn�.1 网页的风格设计n（3）根据其他功能而设置的图标 由于21世纪网站是一个很庞大的网站，有很多方面的功能， 如果这些功能用图标来说明，再加上少量必要的文字，会收 到更好的效果。 可以看到在免费信箱登录框前面，就又有一个形象的信封标 志，那么这个登录框的功能就不言而喻了。我们还可以看到 一个提供21cn电话服务的图标，只要点击一下该图标，就会 进入到提供服务的链接页中。 另外，为图标加上链接，就可以作为与其他站点的友情链接， 这种链接方法比直接用文字更直观。nn�.1 网页的风格设计n6．设计网站的宣传标语。 ．设计网站的宣传标语。 宣传标语可以说是网站的“心”，是网站的精神，它是用一 用一 句话甚至一个词来高度概括的网站要实现的目标。它类似实 句话甚至一个词来高度概括的网站要实现的目标 际生活中的广告金句一样。 好的网站宣传标语会使网站名气更大，更容易成为“名牌”。 宣传标语可以采用夸张、求实、奇特、幽默等各种各样的方 法去实现。 例如：飞利浦的“让我们做的更好”；e龙网的“e网情深”； Intel脑“给你一个奔腾的心”；鹊巢的“味道好极了”；麦 斯威尔的“好东西和好朋友一起分享”等等。nn�.1 网页的风格设计n5.1.2 设计网站的界面风格 网页设计作为一种视觉语言，要讲究编排和布局。为达到最 佳的视觉表现效果，应讲究界面整体布局的合理性，使浏览 者有一个流畅的视觉体验。这种视觉效果和视觉体验是通过 界面风格来完成的，是通过文字和图形的空间组合所表达出 的和谐美来表现的。 网站的界面风格与网站的主题风格既有区别又有联系，前者 主要是指网站每一个页面的背景色彩、前景色彩、页面结构、 页面图案、文字之间的相互搭配，而后者主要是指整个网站 给人的总体印象。即：前者主要体现了网站的形式方面统一 的问题，而后者则体现了网页的内容方面的统一问题。它们 相互之间又是有联系的，一个网站的
主题风格决定了它应该 用什么界面来把这个主题表现出来，而设计得当的界面又会 更加突出主题。nn�.1 网页的风格设计n1．网页界面风格设计的一般原则 ． 首先要把握总体原则。整个网站页面应该保持一致的风格 整个网站页面应该保持一致的风格， 整个网站页面应该保持一致的风格 给浏览者以整体的美感。在设计中切勿将各组成部分孤立分 散，那样会使Web页面呈现出一种枝蔓纷杂的凌乱效果。 网页中各元素命名也应保持一致，同样的元素应该用同样的 网页中各元素命名也应保持一致 命名，做到即使某个元素的表述不清楚也能从上下文推断其 含义；网页中各元素功能应保持一致 网页中各元素功能应保持一致，完成同样的功能应该 网页中各元素功能应保持一致 网页元素的风格也应保持一致，元素 尽量使用同样的元素；网页元素的风格也应保持一致 网页元素的风格也应保持一致 的美观风格、摆放位置在同一个界面和不同界面之间都应该 保持一致。 表现在网页布局上应保持一致 网页布局上应保持一致；多样化的格式和标志会使网 网页布局上应保持一致 页更生动，但要把握一个“度”。nn�.1 网页的风格设计n另外，界面风格设计要考虑各因素的平衡统一 界面风格设计要考虑各因素的平衡统一。虽然网页的 界面风格设计要考虑各因素的平衡统一 设计不等同于平面设计，但是它们有许多相近之处，应充分 加以利用和借鉴。 在界面设计中要运用对比与调和、对称与平衡、节奏与韵律 以及留白等手段，通过空间、文字、图形之间的相互关系建 立整体的均衡状态，产生和谐的美感。如对称原则在页面设 计中，它的均衡有时会使页面显得呆板，但如果加入一些富 有动感的文字、图案，或采用夸张的手法来表现内容往往会 达到比较好的效果。 点、线、面作为视觉语言中的基本元素，要使用点、线、面 的互相穿插、互相衬托、互相补充构成最佳的页面效果。网 页设计中的点、线、面的运用并不是孤立的，很多时候都需 要将它们结合起来，表达完美的设计意境。nn�.1 网页的风格设计n2．版面布局风格 ． 网页界面的布局设计，是指文字、图形图像、色彩、动画和 视频多媒体等网页对象的传达要素，根据特定的内容和主题， 在网页限定的范围内将设计意图以视觉形式表现出来。布局 问题是网页设计中一个举足轻重的问题，网站的页面（特别 是主页）中有各种各样的部件，比如图片、图标、文字段和 菜单，每种类型的部件又可以分为相对独立的模块。网页的 布局问题就是考虑如何将这些模块有机地组织在一个网页上， 使这些模块既完
成各自的功能，又能和其他模块互相协调， 不但不会相互冲突，而且能相互衬托，令整个网页成为一个 不可分割的整体。理想状况下，设计良好的网页应该能让用 户立刻明白各区域的作用，并且能在明确定义的区域中快速 找到自己关心的内容或者放心地跳过自己不需要的部分。 设计网页的布局效果是构造网站独特风格的最主要的工作。 设计网页的布局效果是构造网站独特风格的最主要的工作。nn�.1 网页的风格设计n与报纸、杂志相比，报纸、杂志对不同的版面需要不同的布 局，但是网站的所有网页组成的是一个层次型结构，每一层 网页都需要建立到下一层网页的超链接索引，所以网页所处 的层次越高，网页中的内容就越丰富，网页的布局就越复杂。 比如小说网主页 小说网主页（http://www.xiaoshuo.com/），其中的内 小说网主页 容非常丰富，所以它的版面布局就非常复杂，而下面一层的 栏目首页，因为内容比较集中，所以它的布局比主页就简单 栏目首页 了一些。 再打开一个具体的内容网页，可以看到内容网页 内容网页的布局更加 内容网页 简单，网页的上边是一个头部，下边就是具体的内容。果将 这个特点反过来，便得到了网站在进行版面布局设计时应采 用的原则，那就是首先对主页进行版面布局，然后在主页布 局的基础上对栏目首页进行版面布局，接着往下，最后对内 容网页进行版面布局。nn�.1 网页的风格设计nn�.1 网页的风格设计nn�.1 网页的风格设计nn�.1 网页的风格设计n图示5-10就非常清晰地显示了上面例子中三层网页的版面布 局，从这幅图可以总结出网站在版面布局上的一个特点，那 就是从网站层次型结构的顶层主页到最底层的内容网页，版 面布局不断简化。nn�.1 网页的风格设计n3．版面布局的操作 ． 无论是主页、栏目首页还是内容网页，作为网页本身，在进 行单个网页的版面布局时所采用的步骤和方法都是一样的， 下面就具体介绍一下有关版面布局的一些基本知识。 （1）常用的页面布局形式。n网站标志 广告 网站标志 广告 条 主 内容 菜 单 内容 网站标志 网站标志 主菜单 广 告 栏 内容 网站标志nn主 菜 单 1nn版本说 明nn2nn广告条nn3nn4nn�.1 网页的风格设计n①“T”型布局 所谓“T”结构，就是指页面顶部为横条网站标志 广告条， 下方左面为主菜单，右面显示内容的布局。因为菜单条背景 较深，整体效果类似英文字母“T”，所以我们称之为“T”形 布局。“T”型布局是网页设计中用得最广泛的一种布局方式。 这种布局的优点是页面结构清晰，主次分明，是初学者最容 易掌握的布局方法。缺点是规矩呆板，如果
细节色彩上不注 意，很容易让人“看之无味”。 ②“口”型布局 “口”型布局是一个象形的说法，就是页面一般上下各有一 个广告条，左面是主菜单，右面放友情连接等，中间是主要 内容。这种布局的优点是充分利用版面，信息量大。缺点是 页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型 设计，如网易壁纸站。nn�.1 网页的风格设计n③“三”型布局 “三”型布局是页面上横向两条色块,将页面整体分割为四部 分，色块中大多放广告条。这种布局多用于国外站点，国内 站点较少用。 ④对称对比布局 对称对比布局，顾名思义，采取左右或者上下对称的布局， 一半深色，一半浅色，一般用于设计型站点。优点是视觉冲 击力强，缺点是将两部分有机地结合比较困难。 ⑤POP布局 POP引自广告术语，就是指页面布局象一张宣传海报,以一张 精美图片作为页面的设计中心。常用于时尚类站点，比如 ELLE.com。优点是页面色彩亮丽，引人注目。缺点就是网 页下载速度慢，但作为版面布局还是值得借鉴的。nn�.1 网页的风格设计n（2）版面布局的步骤和方法 版面布局也是一个创意的问题，但要比站点整体的创意容易， 有规律。 因为不同的用户可能使用不同的显示器和网页浏览器，所以 同一个网页在不同用户的计算机上显示可能是不一样的。 所以在设计版面布局之前，首先要做的就是确定这个网页主 要面向哪种配置，即主要在哪种分辨率 分辨率下进行显示，是面向 分辨率 800×600呢还是面向1024×768。800×600是目前大多数 显示器设置的分辩率，所以很多网站在设计时都针对 800×600进行设计。但是1024×768却是未来的发展趋势， 将日益成为主流的分辨率模式，所以在设计时最好能兼顾这 种分辩率。nn�.1 网页的风格设计nn�.1 网页的风格设计n第二步是确定网页的框架。框架指的是怎么样从整体把页面 划分开来，框架有很多种，最简单的是图5-14所示的左右型 框架和上下型框架，这种框架一般有大小两块区域，其中一 块较大的区域放置网页的主体内容，它通常占据整个屏幕的 五分之四。而另一块较小的区域通常放置的是网站标志和导 航条。nn�.1 网页的风格设计n将上下型框架和左右型框架结合起来可以形成复合型框架， 如图5-15所示显示的就是几种比较常见的复合型框架。比如 IBM公司主页和风雨网络文学网的栏目首页采用的就是图中 的第一种复合型框架，而易趣网主页和微软公司主页则采用 了图中的第四种复合型框架。nn�.1 网页的风格设计n当然，并不是所有 的网页都是有框架 的。它通常将网页 的内容很好地融合 到图片或者FLASH 动画中，
给人一种 与众不同的感觉。 这种无框架的设计 通常很难，需要很 高的美术功底才行。nn�.1 网页的风格设计n第三步就是在框架的不 同区域上安排不同的内 容。 人们在浏览一个网页的 时候，通常会把第一眼 通常会把第一眼 停留在网页的左上角或 中间的地方，然后才会 中间的地方 浏览其他部分。这个部 分通常称为焦点，所以 在布局内容的时候，应 该把最能传达信息、最 能吸引人的内容放在这 些地方，比如网站标志 和最新新闻。nn�.1 网页的风格设计n因此，具体版面布局的方法是先确定框架，然后在框架的不 同区域上安排不同的内容。 具体在操作上可用下列方法： 草案：新建页面就象一张白纸，没有任何表格，框架和约 草案 定俗成的东西,你可以尽可能的发挥你的想象力，将你想到的 “景象”画上去。 粗略布局：在草案的基础上，将你确定需要放置的功能模 粗略布局 块安排到页面上。主要包含网站标志，主菜单，新闻，搜索， 友情链接，广告条，邮件列表，计数器，版权信息等。 这种方法是用专业制图软件进行布局。建议使用Photoshop。 定案：将粗略布局精细化，具体化。 定案nn�.1 网页的风格设计n网页制作工具的布局技术有： 使用表格布局 表格就是一些你通过HTML代码创建出来的矩形格，在表格 中可以放置图片、文字或任何你想放置的内容。表格的优点 在于它的灵活性，你可以将表格展开至全部页面，也以只占 用其中的部分空间，选择权全部由你掌握。了解表格的第一 步是你应该知道可以将表格都制成哪些形式，它们是正方形 还是矩形？ 这 一个 是 表格nn�.1 网页的风格设计n还可以把表格变得更加古怪些：nn这 一个nn是 古怪的 表格nn�.1 网页的风格设计n表格由三个基本标志符组 成，它们是： 表 格
、 表 格 线 （table row）和表格 框(table cell)标志符内 标志符内，而 总是在 标志符内 标志符则在| 。 。 需要记住的是 | 标志符 标志符 总是在 |
| cell 1 | cell 2 |
| cell 3 | cell 4 |