网张设计的原则与张面风格264课件

1、二：网页设计的原则与页面风格第二章网页设计的原则与页面风格第二章 网页设计的原则与页面风格 第一节 网站设计原则 第二节 站点的整体风格 第三节 站点的层次 第四节 站点结构实例分析 第五节 网站目录结构组织 第六节 小结 第一节 网站设计原则一、网站设计的基本原则二、网站设计的国际专业流程第一节 网站设计原则 网站设计的基本原则 仅仅会输入文本，制作超级链接和排列图片，不是真正意义上的网页制作，或者说不能够称为是网页创作。 因为网页制作最重要的一个原则是：创意。这个原则也可以看成是网页制作的根本，没有创意的网站不能算是成功的网站，而这样的站点也必将不能长期存在。除了创意之外，在网站设计时还需

2、要考虑以下基本原则： 网页内容要便于阅读。 站点内容要精、专和及时更新。 注重色彩搭配。 考虑带宽。 要适当考虑不同浏览器、不同分辨率的情况。 提供交互性。 简单即为美。第一节 网站设计原则 网站设计的基本原则第一节 网站设计原则一、网站设计的基本原则二、网站设计的国际专业流程第一节 网站设计原则 网站设计的国际专业流程初始探讨站点构思综合内容页面布局图形制作内容流程测试验收交付初始探讨站点构思综合内容页面布局图形制作内容流程测试验收交付第二章 网页设计的原则与页面风格 第一节 网站设计原则 第二节 站点的整体风格 第三节 站点的层次 第四节 站点结构实例分析 第五节 网站目录结构组织 第六节

3、 小结 第二节 站点的整体风格一、商业网站风格二、非商业组织网站的风格三、个人网站的风格 网站所使用的主题图形、基本结构布局、基本色调、文字的样式等都包含在网站风格的概念之中。我们可以这样理解网站的风格的概念：整个网站所采用的结构布局、色调、文字、标志、图案等要素带给浏览者的关于该网站的印象。第二节 站点的整体风格 商业网站风格1. Sony的网站 Sony是在互联网上最富有活力的网站之一。它的主页更新频率相当高，每次更新都能带给浏览者一种全新的风格，但始终以一个巨大的SONY作为背景。标志的不变性和必然出现在最醒目的地方是商业网站的一个重要特征。第二节 站点的整体风格 商业网站风格1. So

4、ny的网站 这个页面在设计上注重了以下几个方面： 主题图形形象突出、充满动感，反映了Sony公司开拓进取、灵活多变的风格。这种利用主题图形风格在网站上越来越常见，而一幅巨型的主题图形就是一则优秀的广告。 导航清晰，且栏目图标具有相应的内容提示。页面上利用Script语言，当鼠标指针移动到栏目图标上时，会显示该栏目中包含的相应内容，并可以继续进人下一层，层次非常清晰。 第二节 站点的整体风格 商业网站风格1. Sony的网站 具有强大的搜索引擎和快速网站导航。 整体颜色统一为深绿色和黑色，给人以神秘和粗犷一的感觉，这是一般网站所不具备的，该网站构思具有相当的艺术水准，令人注目。 更新日期置于左上

5、角的标志下方，浏览者一上站就可知道网站是否更新过，加快了阅读速度。这比把更新日期放在网页末尾更为妥当。联系地址和版权信息可以置于网页末尾。 第二节 站点的整体风格 商业网站风格 2. Sun公司的网站 Sun公司的网站同样突出了公司标志，它被安放在最醒目的左上角，与标志处于同一水平位置的还有搜索引擎入口。与国内的许多站点不同的是Sun公司的搜索引擎属于站内搜索引擎，包含两个部分：一是通过选择主题进行浏览；另一是关键词搜索。前者从某种意义上讲，相当于建立了不同栏目的超级链接，容量很大。当然，需要突出的主要栏目，应该放在比较显眼的地方。 第二节 站点的整体风格 商业网站风格 2. Sun公司的网站

6、 Sun公司网站的主要栏目被放置在网页下部，每一栏目配以一幅主题图片，同时有文字说明，图文并茂，这是目前比较常见的一种栏目设置方式。 Sun公司的主页最突出的一点是：把正中位置留给产品广告。通过网络获取商业利益是公司的宗旨，因此用大幅面进行广告和宣传，成为各商业网站一致的做法。网站上的广告一般分为两种：一种是公司在自己网站上做的产品广告，这更接近主题图形的风格，如Sun公司自己的产品；还有一种是公司在别人的网站上做的广告。后者往往是通过图标或者广告横幅的形式出现。它们分别属于主题图形和广告Banner（标题）。第二节 站点的整体风格 商业网站风格1. 微软公司的网站 微软公司网站的主页，它具有

7、清新淡雅的风格。整体风格上，微软的网站体现了一个商业网站的标准模式： 第二节 站点的整体风格 商业网站风格1. 微软公司的网站 导航条位于页面的上方，用户可以方便地进入导航：定位到不同页面后，导航条会有微小的变化，这种变化告诉用户所在的位置，如当前位置是在主页上，因此在这页上Microsoft Home的背景是淡蓝色，通向其他导航位置的导航栏的背景是其他颜色；而当浏览Training栏目时，在导航栏上Training这个栏目标志为淡蓝色而通向其他栏目的导航栏背景为其他颜色。 第二节 站点的整体风格 商业网站风格1. 微软公司的网站 而且主要栏目的导航上，该页面采用了JavaScript程序，制

8、作了形同资源管理器的“目录树”结构，当用户单击一个栏目，该栏目将展开显示栏目的目录，显示出下层目录或者链接。这种结构风格简单清晰，在许多站点中都用到了。第二节 站点的整体风格 商业网站风格 上面列举的是几个著名公司主页的例子，通过分析这些主页，可以总结出有关商业网站的风格特征： 公司徽标或商标应当出现在页面最上方，尽可能做到色彩醒目，同时占用版面小。 可以采用主题图形产品广告来突出公司形象与风格。主题图形或产品广告应精心设计，给浏览者以良好的第一印象。 主要栏目一般采用图文并茂的超级链接实现，要考虑到主要栏目图片、文字之间的色彩配合，同时要和主题图形相互衬托，主题图形如果较大，则栏目必须缩小。

9、 第二节 站点的整体风格 商业网站风格 不要把主要栏目和次要栏目都显示在同一个页面上。可以通过站点组织图表示网站的结构布局，或者采用JavaScript来生成可以展开的“目录树”。 商业网站一般都有固定的栏目页面，如Support（技术支持），Service（服务），About us（关于公司）等。这些栏目不是网站的主要栏目，不需要采用很醒目的方式出现，但是它们应位于比较方便用户单击的位置，可以采用出现在网页顶端（或者底端）的细长的导航条的方式。 必须建立站内搜索引擎，以便浏览者在站内查找所需要的信息。第二节 站点的整体风格一、商业网站风格二、非商业组织网站的风格三、个人网站的风格 网站所使用

10、的主题图形、基本结构布局、基本色调、文字的样式等都包含在网站风格的概念之中。我们可以这样理解网站的风格的概念：整个网站所采用的结构布局、色调、文字、标志、图案等要素带给浏览者的关于该网站的印象。第二节 站点的整体风格 非商业组织网站的风格1.北京电影学院的网站 北京电影学院网站的主页风格主要表现在以下儿点： 主题图形：电影学院的主题图形不是校名，而是学院的标志，这种构思体现了现代网页设计的趋势：采用醒目的主题图形以吸引人。 栏目导航：这个页面设置在主页上的栏目不多，为少量的几个，同时提供快速链接（Quick Links），可以直接跳转到相应的子栏目。 同时在页面的右边设置了一个使用Java A

11、pplet制作的滚动信息看板，显示不断更新的信息，通过访问该大学网站，可以很快知道校园内最新发生的事件。第二节 站点的整体风格 非商业组织网站的风格 2.北京航空航天大学的网站 北京航空航天大学网站的主页又展示了另一种风格。 天蓝色是北航网站的主色调，保证了网站风格的统一性。页面没有冗余的部分，在页面上端一个北航的标志，形成了主题的图形。导航也利用了JavaScript编程，当用户访问其中一个栏目时，会显示出该栏目的下一级内容，这种编程技术和Sony主页的一样。在鼠标指针移动到某个地方时图片开始切换，显得富有活力。 整个网站的风格归纳起来就是“层次清晰、布局简单”。第二节 站点的整体风格 非商

12、业组织网站的风格3.清华大学的网站 清华大学网站的主页上部采用了一个主题banner，在页面上主要栏目下分设下级栏目，页面的左边以站点内主要的栏目为主，配以清华园的照片作为主题图，突出了学校的特色。在右面上部建立了信息查看板：校内快讯，可以方便用户查看最新信息。而版权信息和计数器位置的安排也较合理，安放在最下方，不影响整个画面的统一。 第二节 站点的整体风格 非商业组织网站的风格 由以上实例可以归纳出非商业组织的网站风格一致的地方： 强调页面的主色调。 主题图形要求反映单位的风采，设计应有创意、有内涵，庄重中不乏活泼。 超级链接的分类一定要清晰，可采用图形，必要时可建立站内搜索引擎。 第二节

13、站点的整体风格 非商业组织网站的风格 信息查看板很重要，因为非商业组织的网站更新不如商业网站频繁，始终如一的画面显得枯燥，所以经常去更新信息查看板，将增加访问者的访问兴趣，北京电影学院和清华大学的主页就使用了这样的技术。放置信息查看板主要有两种方法：一是在主页直接放置信息查看板；二是当页面上主题图形小，超级链接也不多的情况下不宜把信息查看板放在主页，则可以在主页上增加一个快速进人信息查看板的超级链接。第二节 站点的整体风格一、商业网站风格二、非商业组织网站的风格三、个人网站的风格 网站所使用的主题图形、基本结构布局、基本色调、文字的样式等都包含在网站风格的概念之中。我们可以这样理解网站的风格的

14、概念：整个网站所采用的结构布局、色调、文字、标志、图案等要素带给浏览者的关于该网站的印象。第二节 站点的整体风格 个人网站的风格 个人站点在互联网中也占有非常重要的地位，有许多个人网站都具有自己的独特风格，它直接反映了不同人的不同个性，但个人网站建站设备比较落后，在水平上参差不齐，有些个人网站完全成了只有超级链接的页面。然而在263所评选的Top50个人网站，都不是把建立超级链接作为单一任务，这些网站都有自己独特的风格，并充分借鉴了一些非个人网站运用的技术，网页的规划设计都有一定的规章法。用户可通过http: /来欣赏这些优秀的个人网站。这里打算用另一种方式介绍个人网站的基本风格。 第二节 站

15、点的整体风格 个人网站的风格 个人网站的基本风格有三种： 主题图形式 信息发布式 介于两者之间的形式 这三种个人网站的风格在布局上有区别，尤其反映在主页上。第二节 站点的整体风格 个人网站的风格主题图形式 主题图形式网站最显著的标志是主页有一个醒目的图形，该图形很大程度上反映了网页作者希望自己的网页具有的一种意境：或沉静或活泼，采用冷或暖色调。主题图形可以是制作的图形，也可以采用个人照片、主题图形式网站的另一个特点是主页上的超级链接不多，而且很少出现大段的文本，只有当浏览者进人下一级页面时，才能看到详细的文本信息。这类网站体现了作者较好的艺术修养，倾向于个性展示。但是由于主题图形增加了网页的体

16、积大小，所以不应再出现大段的文本，否则网页访问速度就会变慢。第二节 站点的整体风格 个人网站的风格信息发布式 信息发布式个人网站则主要看重网站的信息量，这类网站都发布大量的信息，其作者较热衷于贡献信息。为便于浏览者访问，网站的主页就出现大量的信息，更新信息较多，然后另辟栏目介绍其他信息。网站主题图形基本上采用类似广告条的样式，往往被放置在网页最上方，其布局类似各公司的徽标，目的在于提醒浏览者所处的位置，便于迅速切换栏目。信息发布式网站以提供大量信息为目的，应避免一切华而不实的设计。 第二节 站点的整体风格 个人网站的风格信息发布式 信息发布式学习了如新浪、263等综合类门户站点的布局，这些综合

17、类网站要求主页面尽可能提供丰富的信息量，通过主页就可以完成许多信息搜索任务，查找信息简单方便。 因此，这些网站主页链接相当繁多，还有各种免费邮件入口、会员登记入口、搜索引擎入口等，纷繁有序。第二节 站点的整体风格 个人网站的风格两者之间的网站 还有一种是介于上述两种类型之间的网站。这种网站既想突出个人形象，又想发布大量信息，组织形式不鲜明。初学者应注意一定要让自己的网站简洁，这样便于作者控制网页上的元素。网页元素包括图形图像、文字、超级链接、表格等由作者在网页上建立的对象。第二节 站点的整体风格 个人网站的风格 个人网站具体采用哪种风格形式，应当按照需要决定。如果只为介绍个人及其爱好，其他要加

18、入的资料不多，就可以采用主题图形式，这种情况下需要掌握一些图像处理的特殊技能。如果想开设软件下载、音乐下载、文学作品大全等，对展示个性并不热衷，采用信息式站点模式比较方便。信息式网页有一个特点是栏目间的网页结构相似，可以建立起以一个网页为基准的模板，从而能够快速建立其他网页，这使得管理站点更为省时、省力。第二章 网页设计的原则与页面风格 第一节 网站设计原则 第二节 站点的整体风格 第三节 站点的层次 第四节 站点结构实例分析 第五节 网站目录结构组织 第六节 小结 第三节 站点的层次 网站的层次是指主页面（首页或一级页面） 和二级页面、三级页面之间的结构关系。大部分网站制作的初学者不重视这种

19、层次规划，以致于网页风格不统一，在网页导航上也出现了很多问题。按照专业网页设计流程，制作网页前应先设计好导航条，即需要事先规划好网页的层次结构。 第三节 站点的层次 无论是复杂的商业网站，还是简单的个人网站，在网页的层次结构上都存在着一些共同点，即任何一个网站均可以用三级结构实现，也就是“首页栏目页文章页”或“一级页面二级页面三级页面”结构。制作好这三级结构，就能制作好其他类型的结构，因为任何网站都是以这三级结构为基准的，而且各级结构各有特点。 目前，互联网上制作首页大多采用大主题图形配以少量文字介绍的方法，除了大型的公众网站外，其他的站点都不必采用制作大量超级链接的做法。对于目前的商业网站和

20、个人网站来说，这条原则都是适用的。因此，主页的制作将主要是主题图形的制作以及页面构图。 第三节 站点的层次 二级页面是每个栏目起始页，该页面应有该栏目的对应的主题图形，相对于整个网站的主题图形来说，标志要小但必须醒目。当用户进人该页面后，需要设置通向其他栏目的链接以及返回首页上应有明确指示。 第三节 站点的层次 三级页面是文章页，位于最底层。由于文章页本身包含大量文字，图片不宜安放过多。 一般情况下个人网站应避免把文章标题做成各种各样的美术字、特效字，结果将是得不偿失。文字可以直接用文本表现，只要色彩、字体搭配得当，就可以制作出美丽的页面。应把有限的页面空间留给那些无法用文本表现的装饰图片。

21、第三节 站点的层次 在上述的三级结构中，二级页面之间、三级页面之间应保持风格一致。也就是基本布局一致。首页与二、三级页面之间的风格也有需要一致之处，但这种要求不十分严格，自由度稍大。 第三节 站点的层次 第二章 网页设计的原则与页面风格 第一节 网站设计原则 第二节 站点的整体风格 第三节 站点的层次 第四节 站点结构实例分析 第五节 网站目录结构组织 第六节 小结 第四节 站点结构实例分析 本章主要介绍网站的层次结构，只有通过对网站的层次结构的理解，网站制作才会取得更好的效果。网站的设计概念、网站的整体风格、网站的层次规划，都是网页设计的前提，它们描述了页面与页面之间的 关系，是整个网站成功

22、的关键。体验三级结构商业网站非商业网站个人网站第四节 站点结构实例分析 IBM的站点 IBM公司的网站结构非常严谨，二级页面和三级页面相互之间的风格统一。风格、布局的统一不仅是为了美观，而且能告诉浏览者当时所处的站点位置，并且可以让他清楚地知道自己所在的层。 对于任何网站来说，脉络分明都很重要。在网页制作尚未开始时，它就应该被规划好。 在这方面，FrontPage所提供的网站结构图就起到很大作用，它所有的风格主题模板就是基于“三级结构”这种层次而设计的。第四节 站点结构实例分析 IBM的主站点第四节 站点结构实例分析 IBM的主站点 IBM在第三级页面上没有建立通向其他栏目的超级链接，这会引起

23、访问的不便，但这种做法有利于把握网站的结构。第四节 站点结构实例分析 本章主要介绍网站的层次结构，只有通过对网站的层次结构的理解，网站制作才会取得更好的效果。网站的设计概念、网站的整体风格、网站的层次规划，都是网页设计的前提，它们描述了页面与页面之间的 关系，是整个网站成功的关键。体验三级结构商业网站非商业网站个人网站第四节 站点结构实例分析 雅虎站点 雅虎站点是一个非常著名的公共信息站点，其严格按照三级结构进行，可以看到公共信息站点的首页上布满了链接，在页面的上部放置了整个站点的特色栏目，比如：娱乐、电邮、雅虎通等等，这样便于浏览者直接进人相应的栏目。在页面的右边放置的是当天最新的新闻，使浏

24、览者一登录主页就可以察看到最新的新闻。在页面的主要部分，还是放置了站点的主要内容：搜索引擎目录，分门别类地放置了很多类别的链接。第四节 站点结构实例分析 本章主要介绍网站的层次结构，只有通过对网站的层次结构的理解，网站制作才会取得更好的效果。网站的设计概念、网站的整体风格、网站的层次规划，都是网页设计的前提，它们描述了页面与页面之间的 关系，是整个网站成功的关键。体验三级结构商业网站非商业网站个人网站第四节 站点结构实例分析 个人站点 前面的章节已经指出，个人网站具有两种不同的类型而它们的结构特点也不尽相同。 主题图形式的网站，三级层次结构很突出； 而对于信息发布式的网站，有时候首页和栏目页之

25、间没有太大差别，只是首页上显示更多的综合信息。 通过对一些网站层次结构的分析，初学者可以对网站的层次有个清晰的概念。第四节 站点结构实例分析 个人站点 一般来说，首页的主题图形是为了突出网站的风格而设计，它给出了通向栏目的超级链接。进人栏目后，栏目本身就可以放置一个突出的主题图形，这个主题图形不仅显示该栏目的风格，而且是区别于其他栏目的标志，并告诉浏览者当前的位置。最后一级文章页，图片要少而要能容纳大量文字。在结构布局上，一般没有设计通向其他栏目的超级链接，而放置一个返回上一级超级链接(Back)就可以了。主题图形式的个人网站第四节 站点结构实例分析 个人站点 介绍信息网站的层次布局，与公共信

26、息站点一样，在第一、二级之间不需要有太大的区别，区分首页和栏目页即可。但是在进人第三级文章页后，应该有较大变动，不允许该页面有过多图片，而要尽量容纳大篇幅的文字，整个页面尽量放开，结构也要简单，另外在该页面上还需要放置一个Back的超级链接，用以回到上级栏目页，整体风格要清新而淡雅，不会对读者阅读信息产生不良的刺激。网站作者的E-mail、网站版权信息等都置于的页面最下方，不影响主要内容的显示。 这种网站的建设起来比较快，因其层次结构具有很大的沿袭性，只需要稍加改动，就能产生一个新的栏目页。信息发布式的个人网站第二章 网页设计的原则与页面风格 第一节 网站设计原则 第二节 站点的整体风格 第三

27、节 站点的层次 第四节 站点结构实例分析 第五节 网站目录结构组织 第六节 小结 第五节 网站目录结构组织站点目录结构的组织网站的链接结构的组织第五节 网站目录结构组织 站点目录结构的组织 网站的目录是指你建立网站时创建的目录例如：在用FrontPage 2000建立网站时都默认建立了根目录和image子目录网站的目录的结构是一个容易忽略的问题，不少初学者往往不经规划，随意创建子目录。由于超级链接的存在，可以随意在目录间跳转，因此目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，站点内容未来的扩充和移植有着重要的影响。第五节 网站目录结构组织 站点目录结构的组织 1

28、.不要将所有文件都存放在根目录。 文件管理混乱。 上传速度慢。第五节 网站目录结构组织 站点目录结构的组织 2.按栏目内容分别建立子目录 既然要求分散文件，那么要建立子目录，首先应该按站点内容的主要栏目建立。 其他的次要栏目，比如whats new、友情连接等内容较多，需要经常更新的栏目可以建立独立的子目录。 而一些相关性强，不需要经常更新的栏目，例如：关于本站，关于站长，站点经历等可以合并放在一个统一目录下。 所有的相关程序一般都存放在特定目录。例如：CGI程序放在cgi-bin目录，便于维护管理。所有需要下载的内容也最好按照类别分别放在各个目录下）第五节 网站目录结构组织 站点目录结构的组

29、织 3.在每个主目录下都建立独立的images目录 默认的，一个站点根目录下都有一个images目录，但是如果将所有图片都存放在这个目录里面，会造成很大的不便，当需要更新某个主栏目，或者将某个栏目删除时，图片的管理相当麻烦，往往反复几次后images就成为一个庞大的垃圾目录了。经过实践发现，为每个主栏目建立一个独立的images目录是最方便管理的。而根目录下的images目录只是用来放根目录下的页面和一些通用栏目的图片。第五节 网站目录结构组织 站点目录结构的组织4.目录的层次不要太深；5.切忌使用中文目录；6.不要使用过长的目录；7.尽量使用意义明确的目录。 随着网页技术的不断发展，利用数据

30、库或者其他后台程序自动生成网页越来越普遍，网站的目录结构也必将飞跃到一个新的结构层次，但是上面的几个原则依然适用。第五节 网站目录结构组织站点目录结构的组织网站的链接结构的组织第五节 网站目录结构组织 网站的链接结构的组织 网站的链接结构是指页面之间相互链接的拓扑结构。 它建立在目录结构基础之上，但可以跨越目录。形象地说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。研究网站的链接结构的根本目的在于：用最少的链接，使得浏览最有效率。商业站点结构示例第五节 网站目录结构组织

31、 网站的链接结构的组织 一般地，建立网站的链接结构有两种基本方式： 1树形链接结构（一对一） 类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面、立体结构看起来就像蒲公英。优点是条理清晰，访问者明确知道自己在什么位置，不会“迷”路;缺点是浏览效率低，要进行栏目跳转时，必须绕经首页。 第五节 网站目录结构组织 网站的链接结构的组织 2星形链接结构（一对多） 类似互联网的结构，每个页面相互之间都建立有链接。立体结构像东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容第五节 网站目录结构组织 网站的链接结构的组织 这两种基本结构都只是理论上的方式，在实际的网站设计中，总是将这两种结构混合起来使用。我