网页设计教程

1第1章网页设计基础教学目的和要求:

掌握Web站点的有关概念、术语及其基本工作原理，掌握网站的命名规则和文件、文件夹的命名规范、网站页面布局格式与规范及网页修饰与创意原则，了解网站建设的基本流程和常用工具和编程语言，能够进行网站需求分析，了解网站的业务背景，能根据网站业务背景的不同确定网站功能，并能够根据网站内容进行页面规划和结构布局。2第1章网页设计基础主要内容:网页设计的几个基本概念网站基础网站设计网页规划和步骤了解常用网页制作工具和网页编程语言前几界学生作品的正反面案例分析重点内容:

文件、文件夹的命名规范，文件目录结构与链接结构，页面规划和结构布局难点内容:页面布局格式与规范及网页修饰与创意原则，能据网站业务背景的不同确定网站功能，并能够根据网站内容进行页面规划和结构布局.计划学时:4学时31.1网页设计的几个基本概念1、什么是网页？

一个网页是存储在某与互联网相连计算机中的一个文件，通过网址（URL）来识别和存取。在浏览器中输入网页网址，通过浏览器解释网页文件，用户就可以浏览该网页。

2、网页的分类

通常网页文件以htm、html、asp、aspx、PHP、JSP等为扩展名。不同的扩展名分别代表不同类型的网页文件。按表现形式可分为静态网页和动态网页。

返回目录4静态网页与动态网页

静态网页：指网页显示后（或显示期间），浏览器与服务器不再发生信息的交互。无法做进行查询、留言、聊天、电子商务等操作，并不是不动的网页，如FLASH动画。

动态网页指浏览器端和服务器端可以进行信息交流的网页，即服务器可以根据浏览者的请求做出相应动作和回复。常见的动态网页类型有ASP、ASPX、PHP和CGI等等，其中以ASP动态网页技术较成熟且易学。返回目录5网站与网页3、什么是网站

网站是互联网上一块固定的面向全世界发布消息的地方。它由域名（即网站地址）和网站空间构成。可以将网站喻为一个摊位或地盘。如果一个企业上了互联网，表示进入了世界上最大的市场，此时也只不过是一个看客；而如果企业建立了自已的网站，它就在市场中拥有了一个“摊位”，可以宣传和展示自已产品。4、网站与网页的关系

网站是网页、图片等文件的集合体，是网页通过超级链接的形式组成的。返回目录65、网站的逻辑结构

1．服务器部分——包括计算机硬件、操作系统、

WWW程序、电子邮件程序等。

2．网络接入部分和网络安全系统——包括路由器、调制设备和网络安全系统。

3．数据存贮部分和中间件——数据存贮存系统要有海量存贮能力，高速搜索能力，有效的数据采集、制作和发布能力。中间件介于服务器系统和数据存贮系统之间。

4．研发和维护部分

——此部分贯穿于网站从建立到消亡的全过程，需要专人负责。返回目录71.2网站基础

从网站功能考虑，网站系统可以划分为以下方向：

1．辅助政府部门进行国家管理。

2．为新闻和宣传提供平台。

3．为商业活动提供交易平台。

4．为科研和学术交流服务。

5．没有任何商业目标的公益性网站和个人爱好网站。返回目录1、定位网站系统81.2网站基础

网站的类别比较繁杂，从信息流转和提供服务的方式出发，可以分为以下几类：

1．门户类网站

2．信息发布类网站

3．电子商务类网站

4．资源服务类网站

5．娱乐游戏类网站

6．远程教育和医疗诊断类网站等等返回目录2、定位网站的类别91.2网站基础

准确的形象定位对于提高网站的点击率至关重要。网站形象是指它主要侧重的内容和功能。人们感兴趣的网站内容通常有：（1）新闻（包括时事新闻、体育新闻、财经新闻、娱乐新闻等）。（2）求职、招聘、交友、征婚信息。（3）计算机软件和硬件信息。（4）科教医疗信息。（5）金融证券信息。（6）商贸信息和各类广告。（7）休闲、旅行、娱乐信息。（8）电子书籍和影视。返回目录3、定位网站的形象10——定位网站的形象

人们感兴趣的网站功能通常有：（1）搜索引擎和信息查询。（2）电子邮件和免费电子信箱。（3）免费个人主页空间。（4）软件的上传与下载。（5）网上聊天室、新闻组、BBS、发送短信。（6）实时股票信息和网上股票交易服务。（7）网上游戏娱乐。（8）网上商务活动、网上购物、网上结算。等等返回目录111.2网站基础

网站费用包括建站费用和运作费用：

1．域名费用——域名分级别，不同级别收费不同。

2．服务器硬件设备费用——一个网站的硬件至少包括计算机和网络接入设备，这笔费用应根据网站规模而定，不必过分铺张。

3．系统软件费用和开发维护费用

4．网站的市场推销费用和经营费用——要提高自己的市场份额，应加强宣传并提高服务质量。返回目录4、了解网站费用12站点结构图（SITEMAP）导航栏（NAVIGATIONBAR）联系方式页面（CONTACTPAGE）反馈表（FEEDBACKFORMS）引人入胜的内容（COMPELLINGCONTENT）常见问题解答（FAQs）精美的图片（GOODGRAPHICS）搜索工具（SEARCHINGMECHANISMS）新闻页面（NEWSPAGE）相关站点链接（RELEVANTLINKS）1.2网站基础返回目录

按照国内外传统制作网站的要求，一个标准的网站应该包括以下10项内容：5、网站的基本内容131.2网站设计基础——申请域名

域名是网站在因特网上的门牌号码，也可看作网站在因特网上的商标。域名的命名基于IP地址层次化的命名方式，可由26个英文字母、10个阿拉伯数字、减号和下划线组成，用圆点分隔成几节，字母不区分大小写。域名应选择简短、有意义、容易记的单词。域名有惟一性。域名可以进行交易，买卖或过户。域名分级别，从右向左依次为最高级（也称顶级）、次高级等，最左边为主机名。基本结构为：

计算机主机名.机构名.网络名.最高层域名

顶级域名有2类：机构域和地理域。机构性域名由三个字母组成，地理性域名由两个字母组成。返回目录6、申请域名141.2网站基础1．专线接入

—花费较大但优势明显，提供的服务内容多。

2．服务器托管——将Web服务器由其他网络公司托管，费用比第一种接入方式低得多，但需要远程维护，技术要求高。

3．虚拟主机

——租用某些ISP的剩余磁盘空间，这些空间一般允许个人网站免费使用，节省了购买服务器的费用，但需要远程管理，受到的限制也比较多。返回目录7、接入Internet的方式151.2网站基础

选择服务器要综合考虑各方面因素，如：价格、性能、安全性、可扩展性。

1．单从价格出发，应首先考虑PC服务器，PC服务器又分工作组级、部门级和企业级三档，价格各不相同，可根据网站规模确定使用何种级别的PC服务器。

2．单从性能与安全出发，Unix服务器占有一定优势，是高端系统的首选。

3．如果选择PC服务器，操作系统一般为：WindowsNT或Windows2000或Linux。如果选择小型机为服务器设备，一般使用Unix为平台。

大网络一般使用Unix，小网络使用Windows

返回目录8、网站服务器设备161、网站设计的主要任务：网站平面构建设计（服务器端）以浏览器为客户端的Web应用程序开发系统测试网站发布2、网站设计的主要阶段：用户需求分析及变更（前期调研）网站业务流程分析系统分析及总体设计（撰写网站设计策划书）界面设计、交互设计和程序开发系统测试和文档编写客户培训、技术支持和售后服务1.3网站设计——设计任务和开发过程返回目录17客户提出要求同客户讨论设计细节按客户提出的要求和资料进行整体规划和页面设计将策划书提交客户审阅不同意同意签定合同并申请域名和网页空间进行网站的版面编排和页面制作网站功能检查测试不合格合格向客户提交完成稿不满意修改设计满意设计完成并为客户在各大搜索引擎上注册

1.3网站设计—网站设计工作流程181.3网站设计——定位网站的主题3、网站主题的选择：（按功能和结构形式）门户网站

国内网络公司经营的网站：新浪（）搜狐（）、网易（）等

国外投资的网站：如：中文雅虎、香港的TOM、中华网等

国内传统媒体办的网站：人民网（）新华网（）等普及型网站企业网站、大学网站、政府网站以及数量众多的个人网站电子商务类网站媒体信息服务类网站办公事务管理网站（办公内部）商务管理网站（企业内部）返回目录191.3网站设计——定位网站的主题返回目录网站主题的选择：（按内容形式）

主题要小而精

定位要小，内容要精。调查结果显示，网络上的“主题站”比“万全站“更受人们的喜爱。题材不要太滥或者目标太高

“太滥”是指到处可见、人人都有的题材，例如，软件下载、免费信息。“目标太高”是指在这一题材上已经有非常优秀、知名度很高的站点，要超越是很难的。201.3网站设计——定位网站的名称4、网站名称的选择名称要正气指合理、合法、合情，不能用反动的、色情的、迷信的、危害社会安全的词句。名称要简洁、易记对于中文网站，网站名称最好用中文，不要用英文或者中英文混合型名称。网站的名称的字数一般控制在6个字（最好是4个字）以内，例如，“××阁”。名称要有特色较好的网站名称应该是能体现一定的内涵、韵味，并给浏览者更多的视觉冲击和空间想象力。返回目录211.3网站设计——定位网站的CI形象5、CI（CorporateIdentity）形象指通过视觉来统一企业或个人的形象1.

网站有代表性的人物、动画、花草，可以用它们作为设计的蓝本，加以卡通化和艺术化。

2.网站是关于专业性的内容，可以以本专业有代表的物品作为标志。例如：中国银行的铜板标志、奔驰汽车的方向盘标志。

3.用自己网站的英文名称或字母组合做标志。我校的网站标记

（1）网站标志（logo）的设计返回目录22网站标志（Logo）231.3网站设计——定位网站的CI形象色彩是网站给浏览者的第一印象，不同的色彩搭配会产生不同的效果，并可能影响到访问者情绪。一般不宜超过3种色彩。可以运用到网站的标志、标题、主菜单、图片和主色块上。

设计网站的标准色彩的原则：

标准色彩：能体现网站形象和延伸内涵的色彩。返回目录（2）设计网站的标准色彩241.3网站设计——定位网站的CI形象色彩的选择与含义：（基本色）红色：代表热情、奔放、喜悦、庆典黑色：代表严肃、夜晚、沉着、恐怖；黄色：代表高贵、富有白色：代表纯洁、简单蓝色：代表天空、清爽绿色：代表植物、生命、生机灰色：代表阴暗、消极紫色：代表浪漫、爱情棕色：代表土地返回目录

色彩本身是无任何含义，有的话也只是人赋予它的。但色彩确实可以在不知不觉间影响人的心理，左右人的情绪，所以就有人给各种色彩都加上特定的含义。25

不同主题的网站所应用的色彩是不同的。对于网页设计者来说，色彩的心理作用尤其重要。

通常的选择是：重要内容的文字用非彩色（黑色），边框、背景、图片用彩色。网页色彩搭配的原理：注意色彩的鲜明性（引人注目）注意色彩的独特性（使印象深刻）注意色彩的合适性（色彩与内容气氛协调）注意色彩的联想性。（色彩与网页内涵关联）

例如：绿色可以使人产生优雅、舒适的气氛，黄绿色有青春、旺盛的视觉意境，而黑色则含有幽静、阴森的意境。返回目录1.3网站设计——定位网站的CI形象

网页色彩搭配261.3网站设计——定位网站的CI形象返回目录网页色彩搭配技巧

1.用一种色彩指先选定一种色彩，然后调整透明度或者饱和度，产生新的色彩。这样的页面色彩统一，有层次感。

2.用两种色彩选定一种色彩，然后选择它的对比色。

3.用一个色系就是用一个感觉的色彩，例如，淡蓝、淡黄、淡绿或黄、淡黄、棕黄等。

4.用黑色和一种彩色27网页色彩搭配注意点

1、不要将所有颜色都用到，尽量控制在3种色彩以内。背景色不要太过复杂，以免减慢网页打开的速度，建议主页的色彩运用应体现在站点标志、导航栏、按钮、边框，非正文文字上。

2、背景和前文的对比要尽量大，绝对不要用花纹繁复的图案作背景。

3.色彩的搭配考虑不是单纯的颜色运用，还要考虑诸多因素，如：社会背景、心理需求、访问者类别等等。1.3网站设计——定位网站的CI形象281.3网站设计——定位网站的CI形象

我们在设计网站时，需要尽量在页面中使用看上去比较淡雅、简洁的色彩；比如背景尽量少用灰暗、深沉的色彩（除非特殊需要），并且根页面的主题来选择主色调！返回目录

网站的性质。网站的访客。对比度是否合适。色彩是否统一。设计网站的标准色彩的注意事项：291.3网站设计——定位网站的CI形象

标准字体：一般网页默认的字体是中文“宋体”和英文”TimesNewRoman“。若需要体现“与众不同”和特有的风格，可选择特别的字体。（3）设计网站的标准字体1.不要使用超过3种以上的字体（包括在网页的统一界面中）。2.文字的颜色要注意与整体协调一致。3.标题以H1~H3字号为佳。网站的标准字体的设计原则：4.要注意：使用非默认字体时，最好采用图片的形式。因为浏览者的计算机中可以没有安装特别字体。返回目录30

宣传标语是网站的精神和目标，可用一句话甚至一个词加以高度概括，类似生活中的广告金句。例如，Intel的“给你一颗奔腾的心”。（4）设计网站的宣传标语31（5）确定网站的栏目和版块

将网站功能细分为若干的栏目和版块，确定网站的栏目结构和链接结构。

返回目录1.3网站设计——确定网站的栏目和版块

设计网站的栏目与版块划分：要紧扣主题。将主题按一定的方法分类并将它们作为网站的主栏目。

注意：主题栏目在总栏目中要占绝对优势，使网站显得专业、主题突出。各版块之间要保持相对独立性。322、设定一个最近更新或网站指南栏目。为照顾常来的访客，设置“最近更新”栏目，更有人性化。若主页内容庞大（超过15MB），层次较多，又没设置站内的搜索引擎，则更有必要设置“本站指南”栏目。3、设定一个可以双向交流的栏目，例如，论坛，留言本、邮件列表等，让浏览者留下他们的信息。调查表明，设置双向交流栏目的站点比简单地留一个“Emailme“的站点更具有亲和力。4、设立一个下载栏目或常见问题回答栏目。5、对于辅助内容，例如，网站介绍、版权信息等不必放在主栏目里，以免冲淡主题。331.3网站设计——确定网站的栏目和版块设计网站的栏目所需要注意的几点要求：尽可能将网站最有价值的内容列在栏目上。尽可能删除与主题无关的栏目。尽可能方便访问者的浏览和查询。返回目录34网站目录结构的基本规则：不要将所有文件都存放在根目录下（6）确定网站的目录结构和链接结构清晰的目录结构有利于站点的维护，而网站的链接结构是指页面之间相互链接的拓扑结构。好的链接结构有利于提高效率。按栏目内容建立子目录

容易造成文件管理混乱和上传速度慢，影响工作效率

子目录的建立，首先是按主菜单栏目（主栏目）建立在每个子目录下都建立独立的Images目录返回目录1.3网站设计——确定网站的目录结构和链接结构35网站主目录板块1子目录板块n子目录主页images……子页1images子页n……其他目录子页1images子页n……其他目录36其他注意事项：目录的层次不要太深，建议不要超过三层；不要使用中文目录名及文件名；可能对网址的正确显示造成困难不要使用过长的目录名；太长的目录名不便记忆尽量使用意义明确的目录名；尽量做到“见名知意”。

一般使用简单的英文单词或汉语拼音以其缩写形式37网站链接结构的基本形式：树状链接结构（一对一）

类似与DOS的目录结构，一级级进入，一级级退出。

条理清晰，访问者能明确知道自己在什么位置。

浏览效率低，如果要从一个栏目的子页面到另一个栏目的子页面，必须回到首页再进行。主页页面1页面2页面3页面4页面5页面6页面7一级标题二级标题返回目录1.3网站设计——确定网站的目录结构和链接结构38星状链接结构（一对多）优点：浏览方便缺点：容易使浏览者失去自己的位置，易“迷路”

在实际应用中，往往我们需要将这两种结构混合起来使用。总的目标是希望浏览者既可以方便快速地达到自己需要的页面，又可以清楚地知道自己的位置。返回目录1.3网站设计——确定网站的目录结构和链接结构39

随着网络技术的发展，网站的链接结构设计已经不仅仅局限于可以方便浏览，而更加注重其个性化和相关性。

链接结构设计，在实际网页设计中是非常重要的一环。采用什么样的链接结构将直接影响版面的布局。例如：主菜单、主菜单放在什么位置?是否每页都需要放置，是否需要用分帧框架，是否需要加入返回首页的链接等。在确定链接结构后，再开始考虑链接效果和形式，是采用下拉表单还是用DHTML动态菜单等。40（7）版面布局版面布局基本规则：平衡、对比、疏密度、比例、凝视、图片说明（1）“T”型布局

这种布局形式，一般指页面顶部为横条（网站标志+广告条），下方为多列的结构，如最简单的是左半部分为主菜单，右半部分显示内容。

优点：页面结构清晰，主次分明，强调次序，给人稳重、可信。缺点：规矩呆板，如果细节和色彩搭配上不注意，很容易让人“看之无味”。返回目录1.3网站设计——版面布局41返回目录1.3网站设计——版面布局“T”型布局42（2）“国”型布局

也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的最多的一种结构类型。优点：充分利用版面，版面充实，信息量大。

缺点：页面拥挤，不够灵活。返回目录1.3网站设计——版面布局431.3网站设计——版面布局“同”、“国”字型结构布局(Π型结构布局)

4445（3）POP布局

POP引自广告语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，在适当位置放置主菜单。

优点：讲究平衡和有韵律，能达到强调、动感、高注目性的效果，漂亮吸引人；

缺点：速度慢。返回目录1.3网站设计——版面布局46（4）对比性布局

这种布局形式，利用色彩、色调等技巧来表现，在内容上也可以涉及古与今、新与旧、贫与富等的对比。优点：视觉冲击力强；

缺点：将两部分有机的结合比较困难，一般用于设计型网站。返回目录1.3网站设计——版面布局47

往往上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接

（5）拐角型布局4849

这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

（6）标题正文型布局5051

这是一种左右分别为两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

（7）左右框架型布局5253

与上面类似，区别仅仅在于是一种上下分为两页的框架。

（8）上下框架型布局5455

上面两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

（9）综合框架型布局56

这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

（10）封面型布局5758

其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

（10）Flash型596061

即上面几种类型的结合与变化，比如在视觉上很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

（11）变化型62版面布局设计的步骤：草案以粗陋的线条勾画出创意的轮廓粗略布局安排模块的放置，注意突出重点、平衡协调定案注意设计的平衡和韵律，采用适当的对比和空白效果，突出重点，以达到强调次序，使网站赏心悦目、内容丰富、表达直观。返回目录1.3网站设计——版面布局63版面布局设计的注意点：页面尺寸

像素点数，也指一个网页文档在显示器上显示的屏数。与显示器的分辨率有关。页面长度最好不要超过三屏，否则给人以冗长的感觉。选择合适的造型形状

保持页面的平衡

平衡是指以页面中心为支点，页面的上下左右在分量上应给人以匀称的感觉。平衡又分为对称平衡（庄重、稳定）和非对称平衡（活泼、乐趣）。重点要突出，增加表现力页面风格应一致或接近减轻用户的认知负担，并利用浏览器的缓存能力，提高系统的效率64（8）网站风格网站风格由诸多因素所组成，是一个“整体形象”。“整体形象”指站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义和站点荣誉等诸多因素。网站的风格应该具有一定的独特性，人性化，要让浏览者明确分辨出这是某个网站所独有的。与众不同要肯定风格是建立在有价值的内容之上的要彻底搞清楚自己希望网站能给人的印象是什么要在明确自己的网站印象后，开始努力建立和加强这种印象，风格不是一次定位的，而是在实践中不断强化、调整、修饰的风格必须建立的人的基础之上返回目录1.3网站设计——确定网站的整体风格和创意设计65

对网站进行分析定位之后，接下来就是制作网页了，然而，如何对确定的主题和结构中的文件加以规划和创意，如何提高网页的视觉吸引力，有效地传达信息、给人以审美感受，就成为了摆在我们面前的一个非常重要的问题。网页上有各种功能组件和媒体信息。最常见的功能组件包括网站标志、导航栏、广告条等，而色彩、文本、图片和动画则是网页最基本的信息形式和表现手段。

1.4网页规划和步骤——网页基本元素

返回目录66网页设计的关键任务

就是围绕主题如何将已有的网页基本元素以网页的形式展现出来。更通俗地说就是如何布局、安置素材，故其前期工作素材的准备尤其重要。671.4网页规划和步骤——网页制作步骤网页制作一般分为如下步骤：

1．网站规划：将主题拆分为若干子主题，为每个子主题制作目录及必要的空网页文件。

2．主页规划：为主页划分区域，合理安排网站名称、网站标志、公共导航等必要内容，并在主页上为每个子主题建立带描述性文字的超链接。

3．设计主页、子主题网页。返回目录68网页上最常见的功能组件1.网站的标志(LOGO)：通常位于主页面的左上角。2.导航栏：直观地表示网页具体内容，引导浏览者顺利访问网页。导航栏要放在明显位置，它有一排、两排、多排、图片导航和框架快捷导航等。3.广告条：又称广告栏。一般位于网页顶部、导航栏的上方，与左上角的网站标志相邻。广告条中图形无需太繁杂，文字尽量使用粗体字，广告语要精练，朗朗上口。4.搜索引擎：方便用户以最快方式找到所需信息。一般位于导航栏下方。5.注册与登录区：用户在此注册会员或以会员身份登录。一般放在页面主内容区的左上方或者右上方。6.主内容区：网页中要呈现给用户的主要内容。占据页面最突出的位置和最大的空间。7.友情链接：用户可以通过这些链接进入其他网站。是一种互相宣传的方式。一般位于页面右侧或者下方。1.4网页规划和步骤——网页基本元素

返回目录69网页最基本的信息形式和表现手段

包含文字、按钮、图像、超链接、表格、表单、事件与行为、动画、框架、音频、视频、交互等1、按钮：网页上的任何一个板块内容都可以设计成按钮的形式，在制作时要注意网页整体协调。按钮上的文字要清楚，图案色彩要简单。2、文本：网页中最多的内容通常是文本，可以根据自已的需要设置文字的颜色、字体、字号等内容。3、图像：是表现、美化网页的最佳元素。但图像也不宜太多，否则会让人觉得杂乱，也影响网速。4、表格：一般用来控制网页的布局。如使用较多的横竖分明的网页布局。5、表单：用来收集信息或实现一些交互作用的表。6、多媒体及特殊效果：为了吸引浏览者，常设置一些动画或声音，使得页面图、文、声并茂，以增加点击率。1.4网页规划和步骤——网页基本元素

返回目录701.4网页规划和步骤——网页文件规划

网页文件规划需要多方位考虑设计者和浏览者的需要，使网页文件最大限度地实现设计者的目标并为浏览者提供方便快捷和最直观有效的信息服务。网页文件规划要遵循三个基本原则：内容、速度和页面美观，其中内容最重要。返回目录总体设计：设计出总体框架图。网页主题鲜明、结构合理，不能堆砌；将丰富的内容和多样的形式组织在一个统一的结构中，达到形式和内容的统一、协调；力求布局合理，美观大方；；网页设计标准，保持风格一致。711.4网页规划和步骤——网页框架

网页框架指网页文件系统的组织结构，合理的框架可以让Web页面井井有条，在实际管理中减少不必要的错误。

一个页面一个主题，避免大主题。把大主题分成几个子主题，用主页把所有页面联起来，在主页中加入指向其他页面的链接，并附带简短描述性文字，将读者带入不同主题的领域。在每个页面加入超链接，方便读者按自己意愿阅读。返回目录721.4网页规划和步骤——网页文件规划1．规划主（首）页

严格来说，主页（HomePage）和网页（Webpage）是两个不同概念，主页是指登陆到网站后看到的第一个页面。

主机上默认首页名称是固定的，不能随便起，要符合远程服务器的要求，通常为index.htm、index.html、default.htm、default.html或default.aspx，也可为其他扩展名。

主页的一个重要功能是导航，一般没有实质性的具体内容，有，也只是什么？利用超链接指引用户查询保存在网址或其他位置的信息，但超链接层数不能太多。返回目录73“好的开始是成功的一半”，首页的设计和制作是绝对需要重视和花心思的，一般首页设计和制作占整个制作时间的40%。1.确定首页的功能模块

首页的内容模块是指需要在首页上实现的内容和功能。例如：网站名称，主菜单，新闻，搜索，友情链接，邮件列表、计数器（count)、版权（copyright)等。选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计时需要首先确定的。2.设计首页的版面设计版面的最好方法是：找一张白纸，一支笔，先将理想中的草图勾画出来，然后再用网页制作软件实现。3.技术细节的处理：例如，如何设置字体和链接颜色等。返回目录首页设计74

包括主页在内的所有页面都应该简洁清晰，以最少的元素表达最多的信息。整体风格基本一致。751.4网页规划和步骤——网页文件规划2．设计网页的色彩视觉冲击是网站给人的第一印象，好的色彩搭配能体现网站形象，延伸网站内涵，还能直接影响访问者的情绪。通常，网站的主要色彩不要超过3种，用于网站标志、标题、主菜单和主色块，显得整体统一。其他色彩可作为点缀和衬托，不能喧宾夺主。3．设计网站标志(logo)、准备网页素材

网站标志就如同商品的商标一样，是站点特色和内涵的集中体现，好的标志能让人看见logo就联想到拥有该标志的网站。标志可以是汉字、英文字母、动物或人物的符号、图案等。返回目录761.4网页规划和步骤——网页文件规划4．设计网页的图形和背景

图形是WWW网站的特色之一，具有醒目、吸引人和传达信息形象的作用。适当运用图形可以为网页增色，应用不当也会带来反效果。由于图形的传输远没有文字传输快，要充分考虑图形文件的大小和传输速率。背景也是如此，虽能使页面美观，但却耗费传输时间。返回目录771.4网页规划和步骤——网页文件规划5．网页文本

文本通常是网页的主要内容，也是网站经常更新的部分。网站成功与否，内容很关键。网页上文字的字体、颜色等属性要与页面整体风格匹配，并贯穿整个网站建设，尽量不用闪烁文字。6．联系方式

提供联系方式使访问者与自己联系或发表意见，是网页文件规划中不可缺少的，通常应提供电子信箱、电话号码、传真、通信地址等。返回目录781.4网页规划和步骤——网页文件规划7.留言本

留言本可以方便自己与网页访问者交流，访问者对网站的评价可以写在留言本里，回答问题也可以在留言本里进行。8．计数器和聊天室

如果想知道网站的访问次数，还可以在主页上为网站设置一个计数器。也可申请免费聊天室程序，链接添加到主页中。9、目录结构返回目录791.4网页规划和步骤——网页创意设计网页创意设计的基本原则：意义：在于能大大提高网页的视觉吸引力，有利于信息的有效传达，并能给人以一定的审美感受。网页创意设计的意义、功能和目的：依据信息内容的意义和结构进行情节化、理性化的统调布局和

必要的图像符号化处理；重视“形象思维”的情感象征意义的传达，以有别于知识性思考与形式审美结构的营造。功能：引人注目，提高网页的视觉吸引力，增加读者的浏览和持续阅读的兴趣。目的：使得布局新颖别致，视觉流畅通顺，形态清晰悦目，使网页所提供的信息能得到更明确而有效的传达。不要刻意追求与众不同返回目录80网页创意设计的构成要素及其作用：

分类

基本要素

创意设计

作用

内容的构成

网页名称使用较大的字型；用活字或书写字或独特的美术字富有美感，以表现独特的信息风格

标题主标题，放置在显著位置子标题以菜单方式出现吸引浏览者视线，导引信息正文

正文字群聚集，字体统一，每行最好在20~30个中文字，空白适度降低读者阅读时的视力疲劳

标语具有韵味的意义完整的句子传递网站风格、理念、品位格调及定位

造型的构成

标志图案化徽标，力求造型简单单纯具有一定的象征意义，有较强的视觉传达效果

文字插图一个界面不要超过三种字体清晰悦目，直观明确

图标可视化造型风格的标签或符号帮助浏览者发现信息

动画各种造型变化及形式效果变化的图形增添视觉趣味，突出风格和主题

背景色彩灰度肌理、抽象连续图案做底纹感观效果1.4网页规划和步骤——网页创意设计返回目录81网页创意设计的原理和准则：原理：使各要素的构成与视觉的关联与配置，使各要素和谐统一，相辅相成，在构成上成为具有活力的有机组合；使各要素保持合理的秩序性，创造一种统一的视觉效果，从而有效的传