互联网第2章-网页分析及网站规划课件

第2讲

网页分析

及网站规划设计

第2讲

网页分析

及网站规划设计

1本章要点◆网站设计流程

◆网站主题及风格定位

◆网站内容的确定

◆网站版面设计方法

◆网站策划书的撰写◆

网页的分析本章要点◆网站设计流程◆网站主题及风格定位◆网站内22.1网页分析网站的网页上可以有各种媒体元素，包括文本、声音、图像、动画和数字视频等。在这个网页中，包含了多种网页媒体元素。2.1网页分析网站的网页上可以有各种媒体31/6/202342.1网页分析1/6/202342.1网页分析41/6/20235

1文本文本一直是网页内容最常用的表达手段。用户可以按照自己的需求设置文本的字体、字号、颜色、底纹和边框等属性，通过不同的设置，突出显示重要的内容，并克服文字固有的缺点。1/6/20235 51/6/202362：图像

图像常用作网页中的题图、插图、背景图、图标和按钮。这些图像在网页中具有提供信息、展示作品、装饰网页、表达个人情调和风格的作用。在网页中经常使用GIF、JPEG(JPG)、PNG这3种图像文件格式。1/6/2023661/6/202373：动画动画可以增加网页的动态效果，使网站更为生动有趣。动画可以表现事物的运动过程，在商业网站上也常用它来做广告看板。很多娱乐网站中都使用Flash动画来表现网页的内容，使网站内容更富有动感和情趣。在网页中经常使用的动画格式包括GIF动画和Flash动画等。1/6/202373：动画71/6/202384：表单在网站浏览中，很多交互行为是通过超链接来实现的，但是这种交互行为只是一个简单的方式，表单的出现使用户与网站的交互上升到一个新的高度。表单是网页中站点服务器处理的一组数据输入域，当用户单击按钮或图形提交表单后，数据就会传送到服务器。1/6/202384：表单81/6/20239图1.【表单咨询】表单1/6/20239图1.【表单咨询】表单91/6/2023105：导航栏导航栏的作用是要让用户在浏览网站时，不会因为“迷路”而终止对网站的访问。导航栏就是一组超链接，这组超链接可链接到本站点的主页及其他主要网页。1/6/2023105：导航栏101/6/2023116：表格表格是网页上的一行或多行单元格，用来组织网页的布局或有系统地布置数据。用户可以在表格的单元格中放置任何东西，包括文本、图形和表单，也可以是表格。1/6/2023116：表格111/6/2023127框架框架是网页制作的另外一个布局工具，利用框架布局的网页将显示窗口划分成多个独立的区域。8其他网页元素网页中除了集中以上基本元素之外，还可以加入声音和数字电视等多媒体元素。声音可以用作网页背景音乐、网页操作时的音效、供用户欣赏的歌曲和数字视频伴音等。数字视频可以用于点播新闻节目和教学节目。1/6/2023127框架122.2网站设计流程

为使网站能够达到预期的目的，满足用户要求，不仅需要在网站建设过程中与用户方进行良好的沟通与交流，更重要的是要遵循网站建设流程。只有这样，才能做到既不浪费时间又能提高效率，同时又能保证网站的科学性、严谨性。2.2网站设计流程为使网站能够达到预期的目的，满13网站设计过程

（1）用户需求调查及分析。（2）确定服务器解决方案。（3）网站规划设计。（4）界面设计、页面制作及程序开发。（5）网站的测试与发布及文档的编写。（6）网站的维护。

网站设计过程（1）用户需求调查及分析。14网站设计的工作流程图

网站设计的工作流程图152.3网站主题与风格的定位2.3.1网站主题定位2.3.2网站风格定位

2.3网站主题与风格的定位2.3.1网站主题定位162.3.1网站主题定位

网站主题就是指网站的题材。作为一个网站设计者，在正式建站之前，必须明确要建设一个什么样的网站，需要达到何种目标。

网站主题与网站名称紧密相关，一个恰当的名称能给站点的推广提供便利，也能在一定程度上体现网站设计者的文化品位。网站的名称如果可以和域名配合起来，会更加方便浏览者记忆，也有利于提高访问量。

2.3.1网站主题定位172.3.2网站风格定位所谓网站风格，就是指某一网站的整体形象给浏览者的综合感受，是站点与众不同的特色，它能透露出设计者与企业的文化品位。这个整体形象包括网站的CI(CorporateIdentity,企业形象，包括标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等诸多因素。2.3.2网站风格定位18具体设计时，对于不同性质的行业，应体现出不同的网站风格。一般情况下政府部门的网站风格应比较庄重沉稳；文化教育部门的网站应该高雅大方；娱乐行业的网站可以活泼生动一些；商务网站可以贴近民俗；个人网站则可以不拘一格，更多地结合内容和设计者的兴趣，充分彰显个性；具体设计时，对于不同性质的行业，应体现出不同的网站风19尽可能地将网站标志（logo）放在每个页面最突出的位置

网站标志可以是英文字母、汉字，也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。如果网站内有代表性的人物、植物或是小动物等，则可以用它们作为设计的蓝本，加以艺术化；专业性较强的网站可以选择本专业有代表的物品作为标志等。最常用和最简单的方式是用自己网站的英文名称做标志，采用不同的字体或字母的变形、组合等方式就可以了。

尽可能地将网站标志（logo）放在每个页面最突出的位置20优点：营造网页气氛、活泼版面、强化视觉效果；缺点：一是图片文件一般情况下都比较大，这样在网上传输就会比较慢，就会浪费浏览者的时间，有可能会使他们感到不耐烦；二是如果图片太多则意味着信息量有可能会减少，还可能会影响到网页的整体效果；另外，图片尤其是照片的色调一般都比较深，如果处理不好的话，可能会破坏网站的整体风格。在处理网站图片时要注意主要图片阴影效果的方向、厚度、模糊度等都必须尽可能地保持一致，图片的色彩与网页的标准色搭配也要适当。

使用统一的图片处理效果优点：营造网页气氛、活泼版面、强化视觉效果；使用统一的图片处21突出标准色彩

标准色彩是指能体现网站形象和延伸内涵的色彩，主要用于网站的标志、标题、主菜单和主色块。无论是平面设计，还是网页设计，色彩永远是其中最重要的一环。色彩简洁明快、保持统一、独具特色的网站能让用户产生较深的印象，从而不断前来访问，增加网站的访问量。一般来说，一个网站的标准色彩不宜超过三种，太多则让人眼花缭乱。突出标准色彩221/6/2023235网页色彩的搭配色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。1/6/2023235网页色彩的搭配231/6/202324附：网页色彩搭配的原则

1.使用单色

2.使用邻近色

1/6/202324附：网页色彩搭配的原则1.使用单色241/6/2023253.使用对比色

4.背景色的使用

1/6/2023253.使用对比色4.背景色的使用251/6/202326一、红色

1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。色彩的心理感受1/6/202326色彩的心理感受261/6/202327二、黄色1、少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。2、加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。3、加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。4、加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。1/6/202327二、黄色271/6/2023281/6/202328281/6/202329

色感冷静，性格朴实而内向，是一种有助于人头脑冷静的色。该色调常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。

三、蓝色1/6/202329色感冷静，性格朴实而内向291/6/2023301/6/202330301/6/202331四：绿色具有黄色和蓝色两种成份的色。其性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。1、在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。2、在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。3、在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。1/6/202331四：绿色311/6/202332五：白色色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。1、在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。2、在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。3、在白色中混入少量的蓝，给人感觉清冷、洁净。4、在白色中混入少量的橙，有一种干燥的气氛。5、在白色中混入少量的绿，给人一种稚嫩、柔和的感觉6、在白色中混入少量的紫，可诱导人联想到淡淡的芳香1/6/202332五：白色321/6/2023331/6/202333331/6/2023341/6/202334341/6/202335黑色的使用1/6/202335黑色的使用35使用标准字体

和标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。一般网页默认的字体是宋体。为了体现网站的独特风格和与众不同，可以根据需要，选择一些特别的字体。如果要使用Windows系统非默认的字体，则需要用图片的形式来展现，因为如果浏览者的计算机里没有安装这种字体，浏览器会一律用系统默认字体显示，这样显示效果可能会与原来的设计相差很大，从而无法展现出自己精心设计的风格。

使用标准字体如果要使用Windows系统非默认的字362.4网站内容的确定

2.4.1网站内容设计

2.4.2网站包括的内容

2.4网站内容的确定2.4.1网站内容设计372.4.1网站内容设计网站建设目标与内容设计内容设计,就是分析网站所面向的用户群的需求，通过需求分析，确定网站要达到的目标,进而确定为达到目的而需要提供的信息和服务。很明显，这是实现网站建设目标的关键环节，因此成为网站建设的根本任务。2.4.1网站内容设计38网站内容设计的特性（1）针对性。（2）高精细度。（3）真实性。（4）广泛性。（5）新鲜性。（6）可追踪性。（7）可理解性。网站内容设计的特性39内容设计应注意的问题

（1）注意从观念上重视内容设计，要以求真务实的态度搞好内容设计，不要让技术淹没了内容设计，在创意设计与内容设计矛盾时，要服从内容设计,内容设计要服从网站建设目标。（2）要注意内容的更新，这是从网站设计者的角度考虑的。（3）要考虑用户的参与性，用户是网站的使用者，要充分考虑用户的能动性和积极性，在内容设计中要注意贴近用户生活，设计用户感兴趣的主题，论坛、社区等就是充分考虑了与用户的互动，得到了较好的效果的例证。（4）注意换位思考，这是从用户角度看是否有用，应用是否方便等。[互联网]第2章-网页分析及网站规划课件40网站内容设计应遵循的原则（1）设计好主页对于任何网站，主页或第一个网页都是非常重要的，因为它们能够给用户留下第一印象，好的第一印象能够吸引用户再次光临这个网站，因此应该更加重视主页的设计，以提高网站的访问量。（2）网站内容应该是动态的，随时进行修改和更新，以使自己的网站紧跟时代发展步伐。如果在主页上注明更新日期及URL，对于经常访问的用户能够提供很大的方便。（3）HTML文档的效果由其自身的质量和浏览器解释HTML网站内容设计应遵循的原则41

（4）网站信息的组织结构要层次分明这是吸引用户的关键。应该尽量避免形成复杂的网状结构，没有层次的网状结构不利于用户查找感兴趣的内容，用户可能会因此放弃浏览该网站，而且随着信息量的不断增多，这种结构还会给维护工作带来不便和麻烦。

（5）文本内容应简单明了、易于理解所有内容都要针对设计目标而写，避免出现错别字和语法错误。

（6）增加图像、声音和视频信息比普通文本提供更丰富和更直接的信息，产生更大的吸引力，但文本字符可提供较快的浏览速度。（7）提供一些联机帮助功能，（4）网站信息的组织结构要层次分明421/6/202343例设计站点的基本结构图“网上书苑”网站基本结构示意图1/6/202343例设计站点的基本结构图“网432.4.2网站内容设计导航栏

每个网站都应该包括一组导航工具，它出现在该网站的每一个页面中，称为导航栏。导航栏的作用是引导浏览者快速浏览网站中重要的栏目和内容,或确定自己当前所处的位置。导航栏中的按钮应该包括主页、联系方式、反馈信息及其他一些用户感兴趣的内容，这些内容应该是与站点的主要题目相关联的。2.4.2网站内容设计44设计导航栏的注意事项（1）使用常用颜色。应该使用标准、醒目的颜色，避免在链接处使用特殊的颜色。（2）图片比单纯的文字效果更佳，但它必须能够清楚地体现出它所链接的内容。图片下应附有文字说明，以避免图片使用不当而引起的混淆。（3）每个页面都应该包括代表“返回”或“前进”的按钮。（4）当前页面所对应的按钮应该相应的变成灰色、突出显示或以其他方式表示出来。

设计导航栏的注意事项45站点结构图

站点结构图是一种有关站点结构、组织方式的示意图。站点的主要栏目或者关键内容都列在其下的副标题中，当访问者单击标题、题目或副标题时，相关的网页就会打开。站点结构图还可以被看做是站点的分级结构图，按照这种方式组织起来的信息，用户可以快速找到信息所在的位置。站点结构图46引人入胜的内容

在每页中都要包含相关的、引人入胜的内容，特别是当要销售产品的时候，每个页面都要用详细的内容和图片进行精心策划。因为目的是为了吸引用户，所以网站上使用的语言也应该通俗易懂，对专业术语要进行注释。把特别重要的内容用符号标出来，但不要用得过多，以保持页面的简洁。[互联网]第2章-网页分析及网站规划课件47精美的图片

选择一些合适的、无须占用太多内存及下载时间的图片，但是不要用得过多。必要时，可以降低图片精度，对每页的文字和图像进行限制，或创建纯文本的版本。[互联网]第2章-网页分析及网站规划课件48新闻页面

（1）在主页或每个页面下加注一行文字，表明本网站或每个单独的页面最近一次被更新的时间。（2）在最近更新的信息的标题旁边加注一个显眼的小图标“New”或“新”等。（3）为最新消息创建单独页面，并在一段时间后将其移到适当的目录中。新闻页面49搜索工具

用户可以在搜索工具中输入关键词语或词组，在单击“查询”或“搜索”按钮后，与关键词相关的网页列表会显示出来。需要注意的是，要提供关于有效查询的说明。搜索工具50

常见问题解答

创建常见问题解答可以避免重复回答相同的问题，这样可以节省管理者和访问者的时间和精力。可以将问题列于常见问题解答页面上，并将每个问题与回答链接在一起。另外，要确认在导航栏中包含有常见问题解答按钮。

51反馈表

利用反馈表，用户可以随时提出信息需求，而不必记下复杂的电话号码。反馈表还为没有E-mail的用户提供了方便。有了反馈表，可以选择以寄信件、发E-mail或打电话的方式与用户联系。每个反馈表都是一个不断提高服务质量以满足用户需求的机会。从反馈表中还可以发现网站中哪些信息是重要的，哪些信息是无关紧要的。反馈表52联系方式页面

在此页面中创建可发送E-mail的链接，使E-mail地址可以自动出现在“收信人”栏中。这样，访问者在输入相关内容后单击“发送”按钮即可完成发送操作。此页面还应该包括其他联系方式，如通信地址及联系人姓名、电话、传真等。在导航栏中应该能很方便地找到这些信息。联系方式页面53

相关站点链接

好的站点通常都可以链接到其他相关站点以便为访问者提供更多信息。对每个链接都要做简要说明，并对它被链接的原因进行阐述，这些信息可以帮助访问者选择最适合其需求的站点。定期访问各链接站点，删除那些“死”站点，以免访问者感到厌烦。网站内容是网站吸引浏览者最重要的因素，信息量少或是信息不实用的网站是无法留住匆匆浏览的访客的。因此，为了增加网站的访问量，应该事先对人们希望阅读的信息进行调查，并在网站发布后及时地调查人们对网站内容的满意程度，以便对网站的内容进行及时调整，不断地吸引用户。相关站点链接542.5网站版面设计2.4.1版面设计方法与布局原则2.4.2常见版面布局2.5网站版面设计2.4.1版面设计方法与布局原则552.5.1网站内容设计版面设计方法（1）简洁。（2）要有主色调。（3）注意字体的设置。（4）视觉效果要好。2.5.1网站内容设计56版面布局原则（1）整体布局，和谐统一。（2）主次分明，中心突出。（3）疏密有度，错落有致。（4）图文并茂,相得益彰。版面布局原则571/6/202358附版面布局与首页设计（草案）应遵循对比、统一、平衡、节奏的原则1/6/202358附版面布局与首页设计（草案）582.5.2常见版面布局

T型布局T型布局是指页面顶部为横条网站标志和广告条，下方左半部分为主菜单，右半部分为显示内容的布局。因为菜单背景较深，整体效果类似英文字母T，所以称之为T型布局，这是网页设计中使用最广泛的一种布局方式。其优点是页面结构清晰，主次分明，是初学者最容易学习的布局方法；缺点是规矩呆板，如果把握不好，在细节和色彩搭配上不注意，容易让人看了之后感到乏味。2.5.2常见版面布局59T型布局的结构图T型布局的结构图601/6/202361附“T”结构布局1/6/202361附“T”结构布局61“口”型布局“口”型布局是页面上下各有一个广告条，左边是主菜单，右边是友情链接等内容，中间是主要内容。其优点是充分利用了版面，信息量大；缺点是页面拥挤，不够灵活。“口”型布局62“口”型布局结构图“口”型布局结构图631/6/202364附“口”型布局1/6/202364附“口”型布局64“国”型布局“国”型布局又称为“同”型布局，是一些大型网站喜欢使用的布局类型。页面顶部是一横条，横条左部设置网站标志,右部是横条广告，横条下部是水平放置的主导航栏。导航栏下方分为左中右三栏，左边一般放置内容导航、二级栏目、注册登录、搜索引擎等，右边一般放置动态新闻、热点内容、友情链接等,中间显示网页的主体内容，在页面的最下方是一横条状菜单或广告，也可以是网站的一些基本信息、联系方式、版权声明等。这种布局通常用于主页设计，主要优点是页面容纳的内容多，信息量大。“国”型布局65“国”型布局结构图

“国”型布局结构图66标题正文型布局

标题正文型布局最上方是标题或广告等内容，下方是正文，通常文章页面或注册页面采用此种布局，其特点是简洁明快，干扰信息少，较为正规。标题正文型布局67标题正文型布局结构图

标题正文型布局结构图68“三”型布局

“三”型布局具有简洁明快的艺术效果，适合于艺术类、收藏类、展示类网站。这种布局往往采用简单的图像和线条代替拥挤的文字，给浏览者以强烈的视觉冲击，使其感觉进入了一幅完整的画面,而不是一个分门别类的超市。它的一级页面和二级页面的链接都按行水平排列在页面的中部,网站标志非常醒目。“三”型布局69“三”型布局结构图

“三”型布局结构图70“川”型布局

“川”型布局比较特殊，整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，可以最大限度地突出主页的索引功能。如果网站栏目很多，可以考虑采用这种布局。它和“国”形布局的主要区别是：把主内容区换成了各个二级页面的链接，其中的不足是二级栏目比例不易配置平衡，色彩不易协调。“川”型布局71“川”型布局结构图

“川”型布局结构图72POP布局

POP布局像一张宣传海报，以一张精美图片作为页面的设计中心，在适当位置放置主菜单，常用于时尚类站点。这种布局方式不讲究上下和左右的对称，但要求平衡有韵律，能达到动感的效果，其优点是漂亮吸引人，缺点是速度慢。POP布局73POP布局结构图

POP布局结构图741/6/202375附POP布局（自由布局）1/6/202375附POP布局（自由布局）75变化型

采用上述几种布局的结合与变化，布局采用上、下、左、右结合的综合型框架，再结合Flash动画，使页面形式更加多样，视觉冲击力更强。变化型761/6/202377附：对称对比布局

1/6/202377附：对称对比布局772.6网站策划书撰写通过充分的调查研究与分析，确定了网站建设的基本目标和主要任务，结束了一系列的前期工作后，应开始着手撰写网站策划书。撰写网站策划书时，应该着重从访问者的角度来考虑问题，而不是从设计者的角度，因为访问者是决定网站是否成功的关键因素。网站策划书的撰写应该尽可能地涵盖网站规划中的各个方面，撰写时一定要本着严肃认真、实事求是的科学态度，只有这样，才能发挥出策划书应有的价值。2.6网站策划书撰写通过充分的调查研究78前期调研分析(1)了解目前网上相关行业的市场状况对本公司的市场特点进行深入分析，考虑本公司的业务是否适合在互联网上开展,是否可以利用网站提升本公司的竞争力，提升哪些竞争力等。(2)分析市场上的主要竞争者了解竞争对手的上网情况及其网站规划、网站功能、网站在其公司运作中所起到的作用等。(3)分析网站可能的访问者从可能的访问者中分析出潜在的用户，并充分利用网站的各种功能模块为这些潜在的用户提供有特色的服务。(4)分析网站设计者自身的条件、建设网站的能力及建站的费用、技术等。前期调研分析79建站目的及功能定位

(1)首先要确定为什么要建立网站，是为了建立行业性网站开展电子商务，还是仅仅为了宣传产品。(2)根据需要和计划确定网站的功能，如产品宣传型、电子商务型、网上营销型、客户服务型等。(3)根据网站功能，确定网站应达到的目的。建站目的及功能定位80网站技术解决方案

(1)确定是采用自备主机，还是租用虚拟主机或是采用服务器整机托管的方案。(2)选择操作系统，用Windows、Linux还是UNIX系列，并分析投入成本、功能、安全性和稳定性等。(3)确定是采用现成的企业上网方案、电子商务解决方案，还是自己重新进行设计开发。(4)确定网站安全性措施，如防入侵、防病毒方案等。(5)相关程序开发，如ASP。网站技术解决方案81网站内容规划

(1)根据网站的目的和功能规划网站内容。公司网站一般应包括公司简介、产品介绍、价格信息、服务内容、网上订单、联系方式等基本内容。电子商务类网站要提供会员注册、商品服务信息、订单确认、付款方式、个人信息保密措施、信息搜索查询、相关帮助等内容。(2)如果网站栏目比较多时，还需要考虑指定专人负责相关内容。网站内容规划82网页设计

(1)在网页的美术设计要求上，一般要与企业整体形象一致，要符合CI规范，注意网页色彩、图片的应用以及版面规划，要保持网页的整体一致性。(2)在新技术的采用上要充分考虑主要目标访问群体的地域、年龄、职业、网络速度和阅读习惯等。(3)制定网页改版计划，如每半年或一年进行一次较大规模的改版等。网页设计83网站测试(1)服务器的稳定性、安全性测试。(2)程序及数据库测试。(3)网页兼容性测试。包括不同浏览器下的显示结果、不同显示器分辨率的页面效果等。(4)需要的其他测试。网站测试84(1)网站测试完成后进行发布前的公关、广告活动等。(2)搜索引擎登记等。网站发布与推广网站发布与推广85网站维护

(1)服务器及相关软硬件的维护。对可能出现的问题进行评估，制定响应时间。(2)数据库维护。有效地利用数据是网站维护的重要内容，因此要重视对数据库的维护工作。(3)内容的更新、计划的调整。(4)制定相关网站维护的规定，使网站维护规范化、制度化。网站维护86网站建设日程表

包括各项规划任务的开始时间，完成时间及相关的主要负责人等。费用明细要详细列出各项事宜所需费用的清单，估算出总的投资额度。网站建设日程表费用明细87作业初步规划一个网站包括：站名内容布局色彩作业初步规划一个网站882.7网页设计的基础语言HTML2.7.1超文本与HTML(hypertextmarkuplanguage)语言2.7.2

HTML文档结构2.7.3常见标记属性2.7网页设计的基础语言HTML2.7.1超文本与H892.7.1超文本与HTML(hypertextmarkuplanguage)语言1:超文本连接到其他网页或其他数据上的文本,通过它可以将不同地区的信息资源连接起来,达到资源共享;2：HTML语言用于描述超文本文档结构与内容，实现文档之间的超级链接的语言；3:超级链接可以连接到其他网站或其他数据上的媒体,超链接的两端可以是图形、声音动画等其他媒体数据；2.7.1超文本与HTML(hypertextmarku902.7.2HTML文档结构

由文本与标记组成，为纯文本文件；用标记来描述网页要显示的内容，通过标记告诉浏览器网页的结构与格式；标记组成：开头标记<html>结束标记</html>文档组成：由<html>………</html>每个文档至少由标头部分与主体部分组成；

2.7.2HTML文档结构由文本与标记组成，为纯文本文件；911：<head></head>为文件的标头部分，通常包含了网页的基本信息，<title></title>设置网页在标题栏中的标题；<meta>标示所用的文字符；1：<head></head>为文件的标头922：<body></body>为文件的主体部分，网页中所显示的全部内容均在此区域中编辑；2：<body></body>为文件的主体部分，网页中933：标记通常称对出现，当标记无标示内容时，可以没有结束标示；

3：标记通常称对出现，当标记无标示内容时，可以没有结束标示；944：大部分标记可以包含属性，通过设置属性，进一步说明显示内容的细节；<palign=”center”>

<frontsize=”4”>4：大部分标记可以包含属性，通过设置属性，进一步说明显示内容955:标记可以嵌套，但不能出现交叉；5:标记可以嵌套，但不能出现交叉；962.7.3常见标记属性id：用于标示页面的内容class：定义一个标示为一个或多个类的成员；style：为标记指定某一种样式；lang：指定标记所用语言；dir：指定文字在页面中的行文走向；p：分段标记；2.7.3常见标记属性97

第2讲

网页分析

及网站规划设计

第2讲

网页分析

及网站规划设计

98本章要点◆网站设计流程

◆网站主题及风格定位

◆网站内容的确定

◆网站版面设计方法

◆网站策划书的撰写◆

网页的分析本章要点◆网站设计流程◆网站主题及风格定位◆网站内992.1网页分析网站的网页上可以有各种媒体元素，包括文本、声音、图像、动画和数字视频等。在这个网页中，包含了多种网页媒体元素。2.1网页分析网站的网页上可以有各种媒体1001/6/20231012.1网页分析1/6/202342.1网页分析1011/6/2023102

1文本文本一直是网页内容最常用的表达手段。用户可以按照自己的需求设置文本的字体、字号、颜色、底纹和边框等属性，通过不同的设置，突出显示重要的内容，并克服文字固有的缺点。1/6/20235 1021/6/20231032：图像

图像常用作网页中的题图、插图、背景图、图标和按钮。这些图像在网页中具有提供信息、展示作品、装饰网页、表达个人情调和风格的作用。在网页中经常使用GIF、JPEG(JPG)、PNG这3种图像文件格式。1/6/202361031/6/20231043：动画动画可以增加网页的动态效果，使网站更为生动有趣。动画可以表现事物的运动过程，在商业网站上也常用它来做广告看板。很多娱乐网站中都使用Flash动画来表现网页的内容，使网站内容更富有动感和情趣。在网页中经常使用的动画格式包括GIF动画和Flash动画等。1/6/202373：动画1041/6/20231054：表单在网站浏览中，很多交互行为是通过超链接来实现的，但是这种交互行为只是一个简单的方式，表单的出现使用户与网站的交互上升到一个新的高度。表单是网页中站点服务器处理的一组数据输入域，当用户单击按钮或图形提交表单后，数据就会传送到服务器。1/6/202384：表单1051/6/2023106图1.【表单咨询】表单1/6/20239图1.【表单咨询】表单1061/6/20231075：导航栏导航栏的作用是要让用户在浏览网站时，不会因为“迷路”而终止对网站的访问。导航栏就是一组超链接，这组超链接可链接到本站点的主页及其他主要网页。1/6/2023105：导航栏1071/6/20231086：表格表格是网页上的一行或多行单元格，用来组织网页的布局或有系统地布置数据。用户可以在表格的单元格中放置任何东西，包括文本、图形和表单，也可以是表格。1/6/2023116：表格1081/6/20231097框架框架是网页制作的另外一个布局工具，利用框架布局的网页将显示窗口划分成多个独立的区域。8其他网页元素网页中除了集中以上基本元素之外，还可以加入声音和数字电视等多媒体元素。声音可以用作网页背景音乐、网页操作时的音效、供用户欣赏的歌曲和数字视频伴音等。数字视频可以用于点播新闻节目和教学节目。1/6/2023127框架1092.2网站设计流程

为使网站能够达到预期的目的，满足用户要求，不仅需要在网站建设过程中与用户方进行良好的沟通与交流，更重要的是要遵循网站建设流程。只有这样，才能做到既不浪费时间又能提高效率，同时又能保证网站的科学性、严谨性。2.2网站设计流程为使网站能够达到预期的目的，满110网站设计过程

（1）用户需求调查及分析。（2）确定服务器解决方案。（3）网站规划设计。（4）界面设计、页面制作及程序开发。（5）网站的测试与发布及文档的编写。（6）网站的维护。

网站设计过程（1）用户需求调查及分析。111网站设计的工作流程图

网站设计的工作流程图1122.3网站主题与风格的定位2.3.1网站主题定位2.3.2网站风格定位

2.3网站主题与风格的定位2.3.1网站主题定位1132.3.1网站主题定位

网站主题就是指网站的题材。作为一个网站设计者，在正式建站之前，必须明确要建设一个什么样的网站，需要达到何种目标。

网站主题与网站名称紧密相关，一个恰当的名称能给站点的推广提供便利，也能在一定程度上体现网站设计者的文化品位。网站的名称如果可以和域名配合起来，会更加方便浏览者记忆，也有利于提高访问量。

2.3.1网站主题定位1142.3.2网站风格定位所谓网站风格，就是指某一网站的整体形象给浏览者的综合感受，是站点与众不同的特色，它能透露出设计者与企业的文化品位。这个整体形象包括网站的CI(CorporateIdentity,企业形象，包括标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等诸多因素。2.3.2网站风格定位115具体设计时，对于不同性质的行业，应体现出不同的网站风格。一般情况下政府部门的网站风格应比较庄重沉稳；文化教育部门的网站应该高雅大方；娱乐行业的网站可以活泼生动一些；商务网站可以贴近民俗；个人网站则可以不拘一格，更多地结合内容和设计者的兴趣，充分彰显个性；具体设计时，对于不同性质的行业，应体现出不同的网站风116尽可能地将网站标志（logo）放在每个页面最突出的位置

网站标志可以是英文字母、汉字，也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。如果网站内有代表性的人物、植物或是小动物等，则可以用它们作为设计的蓝本，加以艺术化；专业性较强的网站可以选择本专业有代表的物品作为标志等。最常用和最简单的方式是用自己网站的英文名称做标志，采用不同的字体或字母的变形、组合等方式就可以了。

尽可能地将网站标志（logo）放在每个页面最突出的位置117优点：营造网页气氛、活泼版面、强化视觉效果；缺点：一是图片文件一般情况下都比较大，这样在网上传输就会比较慢，就会浪费浏览者的时间，有可能会使他们感到不耐烦；二是如果图片太多则意味着信息量有可能会减少，还可能会影响到网页的整体效果；另外，图片尤其是照片的色调一般都比较深，如果处理不好的话，可能会破坏网站的整体风格。在处理网站图片时要注意主要图片阴影效果的方向、厚度、模糊度等都必须尽可能地保持一致，图片的色彩与网页的标准色搭配也要适当。

使用统一的图片处理效果优点：营造网页气氛、活泼版面、强化视觉效果；使用统一的图片处118突出标准色彩

标准色彩是指能体现网站形象和延伸内涵的色彩，主要用于网站的标志、标题、主菜单和主色块。无论是平面设计，还是网页设计，色彩永远是其中最重要的一环。色彩简洁明快、保持统一、独具特色的网站能让用户产生较深的印象，从而不断前来访问，增加网站的访问量。一般来说，一个网站的标准色彩不宜超过三种，太多则让人眼花缭乱。突出标准色彩1191/6/20231205网页色彩的搭配色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。1/6/2023235网页色彩的搭配1201/6/2023121附：网页色彩搭配的原则

1.使用单色

2.使用邻近色

1/6/202324附：网页色彩搭配的原则1.使用单色1211/6/20231223.使用对比色

4.背景色的使用

1/6/2023253.使用对比色4.背景色的使用1221/6/2023123一、红色

1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。色彩的心理感受1/6/202326色彩的心理感受1231/6/2023124二、黄色1、少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。2、加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。3、加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。4、加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。1/6/202327二、黄色1241/6/20231251/6/2023281251/6/2023126

色感冷静，性格朴实而内向，是一种有助于人头脑冷静的色。该色调常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。

三、蓝色1/6/202329色感冷静，性格朴实而内向1261/6/20231271/6/2023301271/6/2023128四：绿色具有黄色和蓝色两种成份的色。其性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。1、在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。2、在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。3、在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。1/6/202331四：绿色1281/6/2023129五：白色色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。1、在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。2、在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。3、在白色中混入少量的蓝，给人感觉清冷、洁净。4、在白色中混入少量的橙，有一种干燥的气氛。5、在白色中混入少量的绿，给人一种稚嫩、柔和的感觉6、在白色中混入少量的紫，可诱导人联想到淡淡的芳香1/6/202332五：白色1291/6/20231301/6/2023331301/6/20231311/6/2023341311/6/2023132黑色的使用1/6/202335黑色的使用132使用标准字体

和标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。一般网页默认的字体是宋体。为了体现网站的独特风格和与众不同，可以根据需要，选择一些特别的字体。如果要使用Windows系统非默认的字体，则需要用图片的形式来展现，因为如果浏览者的计算机里没有安装这种字体，浏览器会一律用系统默认字体显示，这样显示效果可能会与原来的设计相差很大，从而无法展现出自己精心设计的风格。

使用标准字体如果要使用Windows系统非默认的字1332.4网站内容的确定

2.4.1网站内容设计

2.4.2网站包括的内容

2.4网站内容的确定2.4.1网站内容设计1342.4.1网站内容设计网站建设目标与内容设计内容设计,就是分析网站所面向的用户群的需求，通过需求分析，确定网站要达到的目标,进而确定为达到目的而需要提供的信息和服务。很明显，这是实现网站建设目标的关键环节，因此成为网站建设的根本任务。2.4.1网站内容设计135网站内容设计的特性（1）针对性。（2）高精细度。（3）真实性。（4）广泛性。（5）新鲜性。（6）可追踪性。（7）可理解性。网站内容设计的特性136内容设计应注意的问题

（1）注意从观念上重视内容设计，要以求真务实的态度搞好内容设计，不要让技术淹没了内容设计，在创意设计与内容设计矛盾时，要服从内容设计,内容设计要服从网站建设目标。（2）要注意内容的更新，这是从网站设计者的角度考虑的。（3）要考虑用户的参与性，用户是网站的使用者，要充分考虑用户的能动性和积极性，在内容设计中要注意贴近用户生活，设计用户感兴趣的主题，论坛、社区等就是充分考虑了与用户的互动，得到了较好的效果的例证。（4）注意换位思考，这是从用户角度看是否有用，应用是否方便等。[互联网]第2章-网页分析及网站规划课件137网站内容设计应遵循的原则（1）设计好主页对于任何网站，主页或第一个网页都是非常重要的，因为它们能够给用户留下第一印象，好的第一印象能够吸引用户再次光临这个网站，因此应该更加重视主页的设计，以提高网站的访问量。（2）网站内容应该是动态的，随时进行修改和更新，以使自己的网站紧跟时代发展步伐。如果在主页上注明更新日期及URL，对于经常访问的用户能够提供很大的方便。（3）HTML文档的效果由其自身的质量和浏览器解释HTML网站内容设计应遵循的原则138

（4）网站信息的组织结构要层次分明这是吸引用户的关键。应该尽量避免形成复杂的网状结构，没有层次的网状结构不利于用户查找感兴趣的内容，用户可能会因此放弃浏览该网站，而且随着信息量的不断增多，这种结构还会给维护工作带来不便和麻烦。

（5）文本内容应简单明了、易于理解所有内容都要针对设计目标而写，避免出现错别字和语法错误。

（6）增加图像、声音和视频信息比普通文本提供更丰富和更直接的信息，产生更大的吸引力，但文本字符可提供较快的浏览速度。（7）提供一些联机帮助功能，（4）网站信息的组织结构要层次分明1391/6/2023140例设计站点的基本结构图“网上书苑”网站基本结构示意图1/6/202343例设计站点的基本结构图“网1402.4.2网站内容设计导航栏

每个网站都应该包括一组导航工具，它出现在该网站的每一个页面中，称为导航栏。导航栏的作用是引导浏览者快速浏览网站中重要的栏目和内容,或确定自己当前所处的位置。导航栏中的按钮应该包括主页、联系方式、反馈信息及其他一些用户感兴趣的内容，这些内容应该是与站点的主要题目相关联的。2.4.2网站内容设计141设计导航栏的注意事项（1）使用常用颜色。应该使用标准、醒目的颜色，避免在链接处使用特殊的颜色。（2）图片比单纯的文字效果更佳，但它必须能够清楚地体现出它所链接的内容。图片下应附有文字说明，以避免图片使用不当而引起的混淆。（3）每个页面都应该包括代表“返回”或“前进”的按钮。（4）当前页面所对应的按钮应该相应的变成灰色、突出显示或以其他方式表示出来。

设计导航栏的注意事项142站点结构图

站点结构图是一种有关站点结构、组织方式的示意图。站点的主要栏目或者关键内容都列在其下的副标题中，当访问者单击标题、题目或副标题时，相关的网页就会打开。站点结构图还可以被看做是站点的分级结构图，按照这种方式组织起来的信息，用户可以快速找到信息所在的位置。站点结构图143引人入胜的内容

在每页中都要包含相关的、引人入胜的内容，特别是当要销售产品的时候，每个页面都要用详细的内容和图片进行精心策划。因为目的是为了吸引用户，所以网站上使用的语言也应该通俗易懂，对专业术语要进行注释。把特别重要的内容用符号标出来，但不要用得过多，以保持页面的简洁。[互联网]第2章-网页分析及网站规划课件144精美的图片

选择一些合适的、无须占用太多内存及下载时间的图片，但是不要用得过多。必要时，可以降低图片精度，对每页的文字和图像进行限制，或创建纯文本的版本。[互联网]第2章-网页分析及网站规划课件145新闻页面

（1）在主页或每个页面下加注一行文字，表明本网站或每个单独的页面最近一次被更新的时间。（2）在最近更新的信息的标题旁边加注一个显眼的小图标“New”或“新”等。（3）为最新消息创建单独页面，并在一段时间后将其移到适当的目录中。新闻页面146搜索工具

用户可以在搜索工具中输入关键词语或词组，在单击“查询”或“搜索”按钮后，与关键词相关的网页列表会显示出来。需要注意的是，要提供关于有效查询的说明。搜索工具147

常见问题解答

创建常见问题解答可以避免重复回答相同的问题，这样可以节省管理者和访问者的时间和精力。可以将问题列于常见问题解答页面上，并将每个问题与回答链接在一起。另外，要确认在导航栏中包含有常见问题解答按钮。

148反馈表

利用反馈表，用户可以随时提出信息需求，而不必记下复杂的电话号码。反馈表还为没有E-mail的用户提供了方便。有了反馈表，可以选择以寄信件、发E-mail或打电话的方式与用户联系。每个反馈表都是一个不断提高服务质量以满足用户需求的机会。从反馈表中还可以发现网站中哪些信息是重要的，哪些信息是无关紧要的。反馈表149联系方式页面

在此页面中创建可发送E-mail的链接，使E-mail地址可以自动出现在“收信人”栏中。这样，访问者在输入相关内容后单击“发送”按钮即可完成发送操作。此页面还应该包括其他联系方式，如通信地址及联系人姓名、电话、传真等。在导航栏中应该能很方便地找到这些信息。联系方式页面150

相关站点链接

好的站点通常都可以链接到其他相关站点以便为访问者提供更多信息。对每个链接都要做简要说明，并对它被链接的原因进行阐述，这些信息可以帮助访问者选择最适合其需求的站点。定期访问各链接站点，删除那些“死”站点，以免访问者感到厌烦。网站内容是网站吸引浏览者最重要的因素，信息量少或是信息不实用的网站是无法留住匆匆浏览的访客的。因此，为了增加网站的访问量，应该事先对人们希望阅读的信息进行调查，并在网站发布后及时地调查人们对网站内容的满意程度，以便对网站的内容进行及时调整，不断地吸引用户。相关站点链接1512.5网站版面设计2.4.1版面设计方法与布局原则2.4.2常见版面布局2.5网站版面设计2.4.1版面设计方法与布局原则1522.5.1网站内容设计版面设计方法（1）简洁。（2）要有主色调。（3）注意字体的设置。（4）视觉效果要好。2.5.1网站内容设计153版面布局原则（1）整体布局，和谐统一。（2）主次分明，中心突出。（3）疏密有度，错落有致。（4）图文并茂,相得益彰。版面布局原则1541/6/2023155附版面布局与首页设计（草案）应遵循对比、统一、平衡、节奏的原则1/6/202358附版面布局与首页设计（草案）1552.5.2常见版面布局

T型布局T型布局是指页面顶部为横条网站标志和广告条，下方左半部分为主菜单，右半部分为显示内容的布局。因为菜单背景较深，整体效果类似英文字母T，所以称之为T型布局，这是网页设计中使用最广泛的一种布局方式。其优点是页面结构清晰，主次分明，是初学者最容易学习的布局方法；缺点是规矩呆板，如果把握不好，在细节和色彩搭配上不注意，容易让人看了之后感到乏味。2.5.2常见版面布局156T型布局的结构图T型布局的结构图1571/6/2023158附“T”结构布局1/6/202361附“T”结构布局158“口”型布局“口”型布局是页面上下各有一个广告条，左边是主菜单，右边是友情链接等内容，中间是主要内容。其优点是充分利用了版面，信息量大；缺点是页面拥挤，不够灵活。“口”型布局159“口”型布局结构图“口”型布局结构图1601/6/2023161附“口”型布局1/6/202364附“口”型布局161“国”型布局“国”型布局又称为“同”型布局，是一些大型网站喜欢使用的布局类型。页面顶部是一横条，横条左部设置网站标志,右部是横条广告，横条下部是水平放置的主导航栏。导航栏下方分为左中右三栏，左边一般放置内容导航、二级栏目、注册登录、搜索引擎等，右边一般放置动态新闻、热点内容、友情链接等,中间显示网页的主体内容，在页面的最下方是一横条状菜单或广告，也可以是网站的一些基本信息、联系方式、版权声明等。这种布局通常用于主页设计，主要优点是页面容纳的内容多，信息量大。“国”型布局162“国”型布局结构图

“国”型布局结构图163标题正文型布局

标题正文型布局最上方是标题或广告等内容，下方是正文，通常文章页面或注册页面采用此种布局，其特点是简洁明快，干扰信息少，较为正规。标题正文型布局164标题正文型布局结构图

标题正文型布局结构图165“三”型布局

“三”型布局具有简洁明快的艺术效果，适合于艺术类、收藏类、展示类网站。这种布局往往采用简单的图像和线条代替拥挤的文字，给浏览者以强烈的视觉冲击，使其感觉进入了一幅完整的画面,而不是一个分门别类的超市。它的一级页面和二级页面的链接都按行水平排列在页面的中部,网站标志非常醒目。“三”型布局166“三”型布局结构图

“三”型布局结构图167“川”型布局

“川”型布局比较特殊，整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，可以最大限度地突出主页的索引功能。如果网站栏目很多，可以考虑采用这种布局。它和“国”形布局的主要区别是：把主内容区换成了各个二级页面的链接，其中的不足是二级栏目比例不易配置平衡，色彩不易协调。“川”型布局168“川”型布局结构图

“川”型布局结构图169POP布局

POP布局像一张宣传海报，以一张精美图片作为页面的设计中心，在适当位置放置主菜单，常用于时尚类站点。这种布局方式不讲究上下和左右的对称，但要求平衡有韵律，能达到动感的效果，其优点是漂亮吸引人，缺点是速度慢。POP布局170POP布局结构图

POP布局结构图1711/6/2023172附POP布局（自由布局）1/6/202375附POP布局（自由布局）172变化型

采用上述几种布局的结合与变化，布局采用上、下、左、右结合的综合型框架，再结合Flash动画，使页面形式更加多样，视觉冲击力更强。变化型1731/6/2023174附：对称对比布局

1/6/202377附：对称对比布局1742.6网站策划书撰写通过充分的调查研究与分析，确定了网站建设的基本目标和主要任务，结束了一系列的前期工作后，应开始着手撰写网站策划书。撰写网站策划书时，应该着重从访问者的角度来考虑问题，而不是从设计者的角度，因为访问者是决定网站是否成功的关键因素。网站策划书的撰写应该尽可能地涵盖网站规划中的各个方面，撰写时一定要本着严肃认真、实事求是的科学态度，只有这样，才能发挥出策划书应有的价值。2.6网站策划书撰写通过充分的调查研究175前期调研分析(1)了解目前网上相关行业的市场状况对本公司的市场特点进行深入分析