[教育]网页制作与网站设计第四章.ppt

《[教育]网页制作与网站设计第四章.ppt》由会员分享，可在线阅读，更多相关《[教育]网页制作与网站设计第四章.ppt（87页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页制作与网站设计网页制作与网站设计第四章第四章 网站的规划与设计网站的规划与设计【本章内容】 4.1 网站的栏目规划网站的栏目规划 4.2 网站的目录结构设计网站的目录结构设计 4.3 网站的风格设计网站的风格设计 4.4 网页设计实战网页设计实战 4.5 网站的导航设计网站的导航设计网页制作与网站设计网页制作与网站设计4.1节节 网站的栏目规划网站的栏目规划【本节内容】 一一. 网站的逻辑结构网站的逻辑结构 二二. 栏目规划栏目规划 三三. 栏目规划举例栏目规划举例网页制作与网站设计网页制作与网站设计一、网站的逻辑结构（一、网站的逻辑结构（1） 网站内网页之间存在一定的逻辑关系。网站内网页

2、之间存在一定的逻辑关系。 1. 1. 线性结构线性结构 线性结构是最简单的逻辑结构，如图线性结构是最简单的逻辑结构，如图4-14-1所示。它将多个网页按照一定的先后顺序链所示。它将多个网页按照一定的先后顺序链接起来，用户没有访问到前一个网页就无法接起来，用户没有访问到前一个网页就无法进入下一个网页。进入下一个网页。 图4-1 线性结构网页1网页2网页3网页4网页制作与网站设计网页制作与网站设计一、网站的逻辑结构（一、网站的逻辑结构（1）1. 1. 线性结构线性结构线性结构最常用于需要逐步进行的栏目，比线性结构最常用于需要逐步进行的栏目，比如用户注册、建立定单、教程等。图如用户注册、建立定单、教

3、程等。图4-24-2所示所示的就是一个典型的用户注册的例子。的就是一个典型的用户注册的例子。图4-2 用户注册流程开始注册接受条款填写注册信息完成注册网页制作与网站设计网页制作与网站设计一、网站的逻辑结构（一、网站的逻辑结构（1）1. 1. 线性结构线性结构 如图如图4-34-3所示的带选择的线性结构，可以所示的带选择的线性结构，可以根据用户不同的选择来访问不同的下一个网根据用户不同的选择来访问不同的下一个网页。页。图4-3 带选择的线性结构网页1网页2网页3网页4网页2网页制作与网站设计网页制作与网站设计一、网站的逻辑结构（一、网站的逻辑结构（2）2. 2. 层次型结构层次型结构 相对于按先

4、后顺序组织相对于按先后顺序组织而成的线性结构，层次型而成的线性结构，层次型结构是按照网页之间的包结构是按照网页之间的包含关系组织而成的。图含关系组织而成的。图4-44-4所示的就是一个典型的层所示的就是一个典型的层次型结构，它很像一棵倒次型结构，它很像一棵倒置的树。置的树。网页21网页1网页2网页3主 页网页22网页11网页314-4 层次型结构网页制作与网站设计网页制作与网站设计一、网站的逻辑结构（一、网站的逻辑结构（2）2. 2. 层次型结构层次型结构 层次型结构简单而且直观，能将所有的内层次型结构简单而且直观，能将所有的内容划分得非常清晰且便于理解，因而几乎所容划分得非常清晰且便于理解，

5、因而几乎所有的网站都采用这种结构来进行总体的栏目有的网站都采用这种结构来进行总体的栏目规划，即将所有的内容先分成若干个大栏目，规划，即将所有的内容先分成若干个大栏目，然后再将每个大栏目细分成若干小栏目，以然后再将每个大栏目细分成若干小栏目，以此类推直到不用再细分为止。此类推直到不用再细分为止。 网页制作与网站设计网页制作与网站设计一、网站的逻辑结构（一、网站的逻辑结构（2）2. 2. 层次型结构层次型结构 层次型结构也有不好的地方，就是用户如果要访问层次型结构也有不好的地方，就是用户如果要访问最底层的网页就不得不按照层次从上到下一级一级地最底层的网页就不得不按照层次从上到下一级一级地访问，最终

6、到达想要访问的网页。访问，最终到达想要访问的网页。 所以，层次型结构最好的深度就是三层，最多不要所以，层次型结构最好的深度就是三层，最多不要超过五层。超过五层。 另外，建立一个良好的导航系统（本章第另外，建立一个良好的导航系统（本章第4 4节将学节将学习）也可以弥补层次型结构这方面的缺点。习）也可以弥补层次型结构这方面的缺点。 网页制作与网站设计网页制作与网站设计一、网站的逻辑结构（一、网站的逻辑结构（3）3. 3. 网状结构网状结构 如图如图4-54-5所示，网状结所示，网状结构是指多个网页相互之间构是指多个网页相互之间都有超链接的一种结构，都有超链接的一种结构，这些网页可以是层次结构这些网

7、页可以是层次结构上的任意网页，由于导航上的任意网页，由于导航的需要或者内容上的相关的需要或者内容上的相关性而相互链接在一起。性而相互链接在一起。 4-4 网状结构网页2网页1网页3网页4网页5网页制作与网站设计网页制作与网站设计一、网站的逻辑结构（一、网站的逻辑结构（3）3. 3. 网状结构举例网状结构举例HTML.COMHTML.COM网网它它的导航条就出现在主页和其的导航条就出现在主页和其它每一个网页上，用户在任它每一个网页上，用户在任何一个网页上进行访问的时何一个网页上进行访问的时候，都可以通过这个导航条候，都可以通过这个导航条而一步切换到其他栏目的网而一步切换到其他栏目的网页之上。这个

8、网站各个网页页之上。这个网站各个网页之间因这个导航条而形成了之间因这个导航条而形成了一个网状结构。一个网状结构。 4-6 网状结构举例网页制作与网站设计网页制作与网站设计一、网站的逻辑结构（一、网站的逻辑结构（3）3. 3. 网状结构网状结构 网状结构的实现就在于所有相关的网页上网状结构的实现就在于所有相关的网页上保留到其他网页的超链接。这种结构使用户保留到其他网页的超链接。这种结构使用户能更方便地在网站上游弋，但同时也带来一能更方便地在网站上游弋，但同时也带来一个庞大超链接数的问题，对于维护来说相当个庞大超链接数的问题，对于维护来说相当麻烦，某个网页的改动麻烦，某个网页的改动( (如改名、删

9、除、增加如改名、删除、增加) )就可能同时需要对所有的网页进行相应的修就可能同时需要对所有的网页进行相应的修改。所以在网站中要谨慎使用网状结构。改。所以在网站中要谨慎使用网状结构。 网页制作与网站设计网页制作与网站设计二、栏目规划二、栏目规划 栏目规划的主要任务是对所收集的大量内栏目规划的主要任务是对所收集的大量内容进行有效筛选，并将它们组织成一个合理的容进行有效筛选，并将它们组织成一个合理的易于理解的逻辑结构。成功的栏目规划不仅能易于理解的逻辑结构。成功的栏目规划不仅能给用户的访问带来极大的便利，帮助用户准确给用户的访问带来极大的便利，帮助用户准确地了解网站所提供的内容和服务，以及快速地地了

10、解网站所提供的内容和服务，以及快速地找到自己所感兴趣的网页，还能帮助网站管理找到自己所感兴趣的网页，还能帮助网站管理员对网站进行更为高效的管理。员对网站进行更为高效的管理。 网页制作与网站设计网页制作与网站设计二、栏目规划（二、栏目规划（1）1. 1. 确定必需栏目确定必需栏目 栏目规划的第栏目规划的第步就是要确定哪些是必需的栏目，步就是要确定哪些是必需的栏目，这取决于网站的性质。这取决于网站的性质。 例如，对于一个企业网站来说，公司简介、产品例如，对于一个企业网站来说，公司简介、产品介绍、服务内容、技术支持、联系方式等栏目是必不介绍、服务内容、技术支持、联系方式等栏目是必不可少的，而对于政府

11、网站来说政务、政策法规、地方可少的，而对于政府网站来说政务、政策法规、地方经济、百姓生活、观光旅游等栏目都是必需的。个人经济、百姓生活、观光旅游等栏目都是必需的。个人网站相对来说比较随意，往往取决于所收集的内容，网站相对来说比较随意，往往取决于所收集的内容，但个人简介、个人收藏等栏目通常不能缺少。但个人简介、个人收藏等栏目通常不能缺少。 网页制作与网站设计网页制作与网站设计二、栏目规划（二、栏目规划（1）1. 1. 确定必需栏目确定必需栏目 除了内容栏目之外，网站还应该包含另外两类栏目：除了内容栏目之外，网站还应该包含另外两类栏目：用户指南类栏目和交互性栏。用户指南类栏目和交互性栏。 用户指南

12、类栏目是为了帮助用户了解这个网站的背用户指南类栏目是为了帮助用户了解这个网站的背景、性质、目的、功能及发展历程，如何更好地对网景、性质、目的、功能及发展历程，如何更好地对网站进行访问，以及网站的最新动态。常以站进行访问，以及网站的最新动态。常以“帮助帮助”、“关于网站关于网站”、“网站地图网站地图”、“最新动态最新动态”等名称等名称出现。出现。 交互性栏目是能与用户进行双向交流的栏目，通交互性栏目是能与用户进行双向交流的栏目，通过它解答用户的疑问、了解用户的需求，还可以获得过它解答用户的疑问、了解用户的需求，还可以获得用户对网站的建议和看法。如留言板、论坛（用户对网站的建议和看法。如留言板、论

13、坛（BBSBBS）。 网页制作与网站设计网页制作与网站设计二、栏目规划（二、栏目规划（2）2. 2. 确定重点栏目确定重点栏目 确定完需要设置哪些栏目后，需要从这些栏目中确定完需要设置哪些栏目后，需要从这些栏目中挑选出最重要的几个栏目，然后对它们进行更详细的挑选出最重要的几个栏目，然后对它们进行更详细的规划。规划。 这种选择取决于网站的目的与功能。比如企业网这种选择取决于网站的目的与功能。比如企业网站，其目的可能是为了更好地推销自己的产品，所以站，其目的可能是为了更好地推销自己的产品，所以产品介绍便是它的重点栏目。产品介绍便是它的重点栏目。 而个人网站，目的通常而个人网站，目的通常是为了让别人

14、分享他收集到的信息，向别人介绍他的是为了让别人分享他收集到的信息，向别人介绍他的原创作品，它的重点栏目往往是个人作品和个人收藏。原创作品，它的重点栏目往往是个人作品和个人收藏。 网页制作与网站设计网页制作与网站设计二、栏目规划（二、栏目规划（3）3 3建立层次型结构建立层次型结构 建立层次型结构是一个递进的过程，即从建立层次型结构是一个递进的过程，即从上到下逐级确定每上到下逐级确定每层的栏目。首先是确定第层的栏目。首先是确定第一层，即网站所必需的栏目，然后对其中的重一层，即网站所必需的栏目，然后对其中的重点栏目进行进点栏目进行进步规划，确定它们所必需的子步规划，确定它们所必需的子栏目，以此类推

15、直至不需要再细分为止。将所栏目，以此类推直至不需要再细分为止。将所有的栏目及其子栏目连在一起就形成了网站的有的栏目及其子栏目连在一起就形成了网站的层次型结构。层次型结构。 网页制作与网站设计网页制作与网站设计二、栏目规划（二、栏目规划（3）3 3建立层次型结构建立层次型结构 如图如图4-74-7所示的可乐所示的可乐猫网站猫网站，它在第它在第层设置层设置了了“我的资料我的资料”、“我的我的作品作品”、“怀念家驹怀念家驹”、“给我留言给我留言”四个重点栏四个重点栏目和目和“news”news”、“info”“info”、“link”“link”三个其他栏目。三个其他栏目。 4-7 可乐猫网站主页网

16、页制作与网站设计网页制作与网站设计二、栏目规划（二、栏目规划（3）3 3建立层次型结构建立层次型结构 然后对每一个重点栏目又进行了更细的规划，然后对每一个重点栏目又进行了更细的规划，比如比如“我的资料我的资料”又分出又分出“我的清单我的清单”、“我我的爱情的爱情”和和“我的梦想我的梦想”三个子栏目，三个子栏目，“我的我的作品作品”又分出又分出“FLASH”FLASH”、“CG”“CG”和和“ARTICLE”ARTICLE”三个子栏目。将这些栏目及其子栏目连在一起，三个子栏目。将这些栏目及其子栏目连在一起，我们可以很清楚地看到可乐猫网站的层次型结我们可以很清楚地看到可乐猫网站的层次型结构，如图构

17、，如图4-84-8所示。所示。 网页制作与网站设计网页制作与网站设计二、栏目规划（二、栏目规划（3） 图4-8可乐猫网站栏目的层次型逻辑结构 可乐猫网站我的资料我的作品怀念家驹我的清单我的爱情我的梦想FLASHCGARTICLEE成员介绍旧日足迹经典照片给我留言NEWSINFOLINK网页制作与网站设计网页制作与网站设计二、栏目规划（二、栏目规划（4）4. 4. 设计每一个栏目设计每一个栏目 层次型结构的建立只是对网站的栏目进行层次型结构的建立只是对网站的栏目进行了总体的规划，接下来要做的是对每一个栏目了总体的规划，接下来要做的是对每一个栏目或者子栏目进行更为细致的设计。或者子栏目进行更为细致

18、的设计。 设计一个栏目通常需要做三件事情。设计一个栏目通常需要做三件事情。 首先首先是描述这个栏目，描述这个栏目的目是描述这个栏目，描述这个栏目的目的、服务对象、内容、资料来源等的、服务对象、内容、资料来源等 。 网页制作与网站设计网页制作与网站设计二、栏目规划（二、栏目规划（4）4. 4. 设计每一个栏目设计每一个栏目 其次其次是设计这个栏目的实现方法，即设计这个栏目是设计这个栏目的实现方法，即设计这个栏目的网页构成、各个网页之间的逻辑关系、各个网页的的网页构成、各个网页之间的逻辑关系、各个网页的内容、内容的显示方式、数据库结构等各个方面的问内容、内容的显示方式、数据库结构等各个方面的问题。

19、例如很多网站都有的用户注册栏目，如图题。例如很多网站都有的用户注册栏目，如图4-94-9所示，所示，这个栏目通常需要六个网页，采用线性这个栏目通常需要六个网页，采用线性+ +分支结构来进分支结构来进行组织。行组织。不合法开始注册接受条款填写注册信息信息检验合法同意不同意完成注册结束注册网页制作与网站设计网页制作与网站设计二、栏目规划（二、栏目规划（4）4. 4. 设计每一个栏目设计每一个栏目 详细设计上图中的每一个网页。如第三个网页详细设计上图中的每一个网页。如第三个网页“填写注册信息填写注册信息”采用表单来实现，所需注册的信息采用表单来实现，所需注册的信息根据网站的需求而定，通常包括用户名、

20、密码、性别、根据网站的需求而定，通常包括用户名、密码、性别、国籍、省份、国籍、省份、E-mailE-mail等内容。等内容。 还要设计好网页之间的分支关系，如用户在第二还要设计好网页之间的分支关系，如用户在第二个网页同意个网页同意“接受条款接受条款”则进入到则进入到“填写注册信息填写注册信息”的网页；不同意的网页；不同意“接受条款接受条款”时，就要进入到时，就要进入到“退出退出注册注册”，该网页显示有关中止注册的信息。，该网页显示有关中止注册的信息。 。 网页制作与网站设计网页制作与网站设计二、栏目规划（二、栏目规划（4）4. 4. 设计每一个栏目设计每一个栏目 最后最后还要设计这个栏目和其他

21、栏目之间的关系。网还要设计这个栏目和其他栏目之间的关系。网站有许多栏目，但栏目与栏目之间存在着从数据、内站有许多栏目，但栏目与栏目之间存在着从数据、内容到布局等各个层次上的关联。如企业站点的产品介容到布局等各个层次上的关联。如企业站点的产品介绍、价格信息和在线定单等栏目之间通常使用统一的绍、价格信息和在线定单等栏目之间通常使用统一的数据库，这样在任何数据库，这样在任何个栏目中打开同一个产品时都个栏目中打开同一个产品时都能看到相同的介绍信息，保证了信息的一致性。能看到相同的介绍信息，保证了信息的一致性。 设计栏目之间关系的工作，就是找出各个栏目之间设计栏目之间关系的工作，就是找出各个栏目之间可以

22、共享的相关内容，并确定采用什么样的方式将它可以共享的相关内容，并确定采用什么样的方式将它们串联起来。们串联起来。 网页制作与网站设计网页制作与网站设计三、栏目规划举例三、栏目规划举例 栏目规划最便捷的方法就是参考同类网栏目规划最便捷的方法就是参考同类网站的栏目规划，吸收共同的栏目，去掉不适站的栏目规划，吸收共同的栏目，去掉不适合的栏目，然后添加有自己特色的栏目。合的栏目，然后添加有自己特色的栏目。 参考参考“德德玛德德玛”网站来学习个人网站的网站来学习个人网站的栏目规划。假若你非常喜欢歌唱家德德玛，栏目规划。假若你非常喜欢歌唱家德德玛，你已经收集了很多有关德德玛的歌曲、图片你已经收集了很多有关

23、德德玛的歌曲、图片以及报道等。现在要建立一个名为以及报道等。现在要建立一个名为“我从草我从草原来原来- -德德玛德德玛”的个人网站的个人网站 。网页制作与网站设计网页制作与网站设计三、栏目规划举例三、栏目规划举例 根据上节所学知识，首先需要做的是确定网站所根据上节所学知识，首先需要做的是确定网站所必需的栏目。第一个必需的栏目就是图片栏目，将其必需的栏目。第一个必需的栏目就是图片栏目，将其取名为取名为“个人图库个人图库”；接着就是简介德德玛的艺术生；接着就是简介德德玛的艺术生涯，第二个栏目是涯，第二个栏目是“艺术简介艺术简介”；第三个栏目是；第三个栏目是“草草原夜莺原夜莺”，专门介绍德德玛演唱的

24、歌曲与视频专辑；，专门介绍德德玛演唱的歌曲与视频专辑；第四个栏目是第四个栏目是“精彩回放精彩回放”，介绍德德玛在央视，介绍德德玛在央视“艺艺术人生术人生”、“东方之子东方之子”等频道被报道的专辑；第五等频道被报道的专辑；第五个栏目是个栏目是“文摘报道文摘报道”介绍报刊登载的有关道德德玛介绍报刊登载的有关道德德玛歌唱生涯的重要文章；为让更多朋友参与讨论、共享歌唱生涯的重要文章；为让更多朋友参与讨论、共享收藏，以及对本网站的建议，还设置交互性栏目收藏，以及对本网站的建议，还设置交互性栏目“德德迷论坛迷论坛”，等等。，等等。 网页制作与网站设计网页制作与网站设计三、栏目规划举例三、栏目规划举例 重点

25、栏目的规划。重点栏目的规划。 “草原夜莺草原夜莺”、“精彩回放精彩回放”、“文摘报道文摘报道”和和“德迷论坛德迷论坛”是所有这些栏目中最为重要的栏目，所是所有这些栏目中最为重要的栏目，所以需要对它们进行更细的规划。以需要对它们进行更细的规划。 “ “草原夜莺草原夜莺”栏目又分为栏目又分为“歌曲专辑歌曲专辑”和和“歌曲歌曲插图插图”等子栏目。等子栏目。“精彩回放精彩回放”栏目又分为栏目又分为“艺术人艺术人生生”、“爱心世界爱心世界”、“西部情怀西部情怀”、“东方之子东方之子”等子栏目。等子栏目。“文摘报道文摘报道”栏目将登载报刊对德德玛的栏目将登载报刊对德德玛的重要报道。重要报道。“德迷论坛德迷

26、论坛”栏目除了一般论坛应有的子栏目除了一般论坛应有的子栏目外，还做一个栏目外，还做一个“论坛展区论坛展区”的子栏目，用于展示的子栏目，用于展示“德迷德迷”收藏的作品。收藏的作品。 网页制作与网站设计网页制作与网站设计三、栏目规划举例三、栏目规划举例图4-10 我从草原来-德德玛个人网站栏目层次结构 艺术简介精彩回放艺术人生精彩图片西部情怀东方之子文摘报道草原上的夜莺 故乡是块磁铁个人图库草原夜莺歌曲专辑歌曲插图德迷论坛登 录注 册论坛展区服务条款完成注册图片集音乐集电影集信息填写信息检验搜 索风 格我 从 草 原来 德 德 玛个人网站文章内插图友情链接网页制作与网站设计网页制作与网站设计4.2

27、节节 网站的目录结构设计网站的目录结构设计 目录结构也可称为物理结构，它是解决如何目录结构也可称为物理结构，它是解决如何在硬盘上更好地存放包括网页、图片、在硬盘上更好地存放包括网页、图片、Flash动动画、视音频、数据库等各种资源在内的所有网站画、视音频、数据库等各种资源在内的所有网站资源。资源。 目录结构是否合理，对网站的创建效率会产目录结构是否合理，对网站的创建效率会产生较大的影响，但更主要的，会对未来网站的性生较大的影响，但更主要的，会对未来网站的性能、网站的维护及扩展产生很大的影响。能、网站的维护及扩展产生很大的影响。 网页制作与网站设计网页制作与网站设计4.2节节 网站的目录结构设计

28、网站的目录结构设计【本节内容】 一一. 目录结构设计原则目录结构设计原则 二二. 目录结构设计举例目录结构设计举例网页制作与网站设计网页制作与网站设计一、目录结构设计原则一、目录结构设计原则 目录结构对用户来说是不可见的，它只针对网站目录结构对用户来说是不可见的，它只针对网站管理员，所以它的设计是为了网站管理员能从文件的管理员，所以它的设计是为了网站管理员能从文件的角度更好地管理网站的所有资源。角度更好地管理网站的所有资源。 目录结构的设计通常需要遵循以下原则：目录结构的设计通常需要遵循以下原则： 1. 网站应有一个主目录网站应有一个主目录 。 2. 不要将所有的文件都直接存放在网站根目录下不

29、要将所有的文件都直接存放在网站根目录下 3. 根据栏目规划来设计目录结构根据栏目规划来设计目录结构 网页制作与网站设计网页制作与网站设计一、目录结构设计原则一、目录结构设计原则 4. 每个目录下都建立独立的每个目录下都建立独立的images（或或pictures）子目录）子目录 . 5. 目录的层次不要太深目录的层次不要太深 6. 不要使用中文目录名和中文文件名不要使用中文目录名和中文文件名 7. 可执行文件和不可执行文件分开放置可执行文件和不可执行文件分开放置 8. 数据库文件单独放置数据库文件单独放置 网页制作与网站设计网页制作与网站设计二、目录结构设计举例二、目录结构设计举例 以以“我从

30、草原我从草原来来-德德玛德德玛”个人个人网站为例。在上节网站为例。在上节栏目规划的基础上，栏目规划的基础上，接着为这个网站设接着为这个网站设计它的目录结构，计它的目录结构，如图如图4-11所示。所示。 dedemaweb images jingcaihuifang images wengzhanbaodao images caoyuanyieying images musics movies demilundan images musics flashes movies youqingliangjie images网页制作与网站设计网页制作与网站设计二、目录结构设计举例二、目录结构设计举例 上

31、图就是根据前面所述的若干原则而设计的目录上图就是根据前面所述的若干原则而设计的目录结构。从中可以看到，网站的目录结构和图结构。从中可以看到，网站的目录结构和图4-10所示所示的层次型结构是对应的，每一个目录下都有的层次型结构是对应的，每一个目录下都有个名为个名为“images”的子目录，用于保存图片。的子目录，用于保存图片。 图4-12 我从草原来- 德德玛个人网站 网页制作与网站设计网页制作与网站设计4.3节节 网站的风格设计网站的风格设计 相对于网站的栏目规划和目录结构设计，网站的风相对于网站的栏目规划和目录结构设计，网站的风格设计是最抽象的格设计是最抽象的。风格。风格是指用户对网站整体形

32、象的一是指用户对网站整体形象的一种感觉。这个整体形象包括网站标志、色彩、版面布局、种感觉。这个整体形象包括网站标志、色彩、版面布局、交互方式、文字编排、图片、动画等诸多因素。交互方式、文字编排、图片、动画等诸多因素。 风格又风格又是独特的，是本网站不同于其他网站的地方。是独特的，是本网站不同于其他网站的地方。统一的风统一的风格使用户无论处于网站的哪一个网页，都知道自己正在访问格使用户无论处于网站的哪一个网页，都知道自己正在访问的是这个网站。的是这个网站。例如微软网站，每一个网页都有特有的例如微软网站，每一个网页都有特有的蓝色和蓝色和“Microsoft”Microsoft”标志。标志。 色彩搭

33、配和版面布局是网站风格最重要的两个方面。色彩搭配和版面布局是网站风格最重要的两个方面。 网页制作与网站设计网页制作与网站设计4.3节节 网站的风格设计网站的风格设计【本节内容】 一一. 色彩搭配基础色彩搭配基础 二二. 版面布局设计版面布局设计网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（1）1. 1. 色彩的基本知识色彩的基本知识 由光学知识可知，颜色是因为物体对光的反映或由光学知识可知，颜色是因为物体对光的反映或折射而产生的。红、绿、蓝是光的三原色，它们不同折射而产生的。红、绿、蓝是光的三原色，它们不同程度的组合可以形成各种颜色。在网页中用光的三原程度的组合可以形

34、成各种颜色。在网页中用光的三原色的不同颜色值组合成各种颜色。常采用色的不同颜色值组合成各种颜色。常采用6 6位十六进位十六进制的数值来表示，每两位代表一种颜色，从左到右依制的数值来表示，每两位代表一种颜色，从左到右依次表示红色、绿色和蓝色，每种颜色的十六进制值从次表示红色、绿色和蓝色，每种颜色的十六进制值从0000FFFF。颜色值越高表示这种颜色越浓。比如红色，。颜色值越高表示这种颜色越浓。比如红色，其数值为其数值为“#“#FF0000”FF0000”（号表示这是十六进制数），号表示这是十六进制数），白色为白色为“#“#FFFFFF”FFFFFF”，黑色为黑色为“#000000”“#00000

35、0”。 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（1）1. 1. 色彩的基本知识色彩的基本知识 在传统的色彩理论中，颜色一般分为彩在传统的色彩理论中，颜色一般分为彩色和非彩色（或称为灰色）两大色系。非彩色和非彩色（或称为灰色）两大色系。非彩色是指黑、白和所有灰色，彩色是指除非彩色是指黑、白和所有灰色，彩色是指除非彩色外所有的颜色。在网页中，如果组成颜色色外所有的颜色。在网页中，如果组成颜色的三种原色数值相等，就显示为灰色。的三种原色数值相等，就显示为灰色。 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（1）1. 1. 色彩的基本知识色彩的

36、基本知识 太阳光是多种彩色混合而成的，按颜色的色调通太阳光是多种彩色混合而成的，按颜色的色调通常将其划分为七种颜色：红、橙、黄、绿、青、蓝、常将其划分为七种颜色：红、橙、黄、绿、青、蓝、紫。紫。 如果将这七种颜色按这个顺序渐变为一条色带的如果将这七种颜色按这个顺序渐变为一条色带的话，越靠近红色，给人的感觉越温暖，越靠近蓝色和话，越靠近红色，给人的感觉越温暖，越靠近蓝色和紫色，给人的感觉越寒冷。所以红、橙、黄的组合又紫色，给人的感觉越寒冷。所以红、橙、黄的组合又称为暖色调，青、蓝、紫的组合又称为冷色调。称为暖色调，青、蓝、紫的组合又称为冷色调。 网页制作与网站设计网页制作与网站设计一、色彩搭配基

37、础（一、色彩搭配基础（1） 除了冷暖的差别外，不同的单个颜色也会给人带除了冷暖的差别外，不同的单个颜色也会给人带来不同的感觉，分述如下。来不同的感觉，分述如下。 是一种激奋的色彩，给人以冲动、愤怒、是一种激奋的色彩，给人以冲动、愤怒、热情和活力的感觉。热情和活力的感觉。 介于冷暖两种色彩的中间，显得和睦、宁介于冷暖两种色彩的中间，显得和睦、宁静、健康、安全。它和金黄、淡白搭配，可以产生优静、健康、安全。它和金黄、淡白搭配，可以产生优雅、舒适的气氛。雅、舒适的气氛。 也是一种激奋的色彩，具有轻快、欢欣、也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨和时尚的效果。热烈、温馨和时尚的效果。 网页制作

38、与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（1）1. 1. 色彩的基本知识色彩的基本知识充满快乐、希望、智慧和轻快，充满快乐、希望、智慧和轻快，它也是最亮的一种颜色。它也是最亮的一种颜色。 是最具凉爽、清新、专业的色彩。是最具凉爽、清新、专业的色彩。它和白色混合，能体现柔顺、淡雅、浪漫的它和白色混合，能体现柔顺、淡雅、浪漫的气氛（如天空的色彩）。气氛（如天空的色彩）。 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（1）1. 1. 色彩的基本知识色彩的基本知识 白色：白色：给人以洁白、明快、纯真和干净给人以洁白、明快、纯真和干净的感觉。的感觉。 通常

39、是深沉、神秘、寂静、悲哀通常是深沉、神秘、寂静、悲哀和压抑的代表。和压抑的代表。 具有中庸、平凡、温和、谦让、具有中庸、平凡、温和、谦让、中立和高雅的感觉，它可以和任何一种颜色中立和高雅的感觉，它可以和任何一种颜色进行搭配。进行搭配。 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（2）2. 网站的色彩搭配网站的色彩搭配 网站的色彩搭配通常分为两个步骤，第网站的色彩搭配通常分为两个步骤，第一步就是为整个网站选取一步就是为整个网站选取种主色调，然后种主色调，然后再为主色调搭配多种适合的颜色。主色调指再为主色调搭配多种适合的颜色。主色调指的是整个网站给人印象最深的颜色，或者

40、说的是整个网站给人印象最深的颜色，或者说除白色之外用得最多的颜色。除白色之外用得最多的颜色。 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（2）2. 网站的色彩搭配网站的色彩搭配 不同的颜色给人的感受是不不同的颜色给人的感受是不样的，所以选取主样的，所以选取主色调最基本的原则就是保证所选的颜色与网站的主题色调最基本的原则就是保证所选的颜色与网站的主题或者形象相符，进一步地，能够通过这种颜色加深用或者形象相符，进一步地，能够通过这种颜色加深用户对网站的印象。户对网站的印象。 如蓝色是一种给人感觉非常专业的颜色，所以许多如蓝色是一种给人感觉非常专业的颜色，所以许多高科技公

41、司都喜欢使用蓝色作为公司网站的颜色。最高科技公司都喜欢使用蓝色作为公司网站的颜色。最典型的当数微软公司（图典型的当数微软公司（图4-134-13）和和IBMIBM公司（图公司（图4-144-14） 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（2）图4-13 Microsoft公司主页图 4-14 IBM公司主页 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（2）红色红色则是热情和活力的象征，北京市政府网站首都之窗则是热情和活力的象征，北京市政府网站首都之窗()正是通过红色来向人们传达了北正是通过红色来向人们传达了北京作为中国首都的气质：大气

42、和热情，如图京作为中国首都的气质：大气和热情，如图4-15所示。所示。 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（2） 易趣是全球最大的中文网上交易平台，它致力于为所有网络用易趣是全球最大的中文网上交易平台，它致力于为所有网络用户建立一个诚信、平等、安全、高效、舒适的网上交易环境，户建立一个诚信、平等、安全、高效、舒适的网上交易环境，而对于这一点，没有比而对于这一点，没有比绿色绿色更为合适的颜色，如图更为合适的颜色，如图4-16所示。所示。 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（2） 选好主色调之后，接下来要考虑的就是在什么地选好

43、主色调之后，接下来要考虑的就是在什么地方使用主色调。方使用主色调。 主色调最常表现在三个位置，首先是头部，也就主色调最常表现在三个位置，首先是头部，也就是网页最上面的部分，通常包含导航条。头部是最能是网页最上面的部分，通常包含导航条。头部是最能体现主色调的地方，所以所有的网站都会在头部表现体现主色调的地方，所以所有的网站都会在头部表现主色调。其次是栏目索引条上，栏目索引条虽然面积主色调。其次是栏目索引条上，栏目索引条虽然面积小，但是出现在网页的各个部位，所以能非常有效地小，但是出现在网页的各个部位，所以能非常有效地渲染主色调。最后是网页上的文字，文字笔画虽细，渲染主色调。最后是网页上的文字，文

44、字笔画虽细，但大面积的文字也能很好地突出主色调。但大面积的文字也能很好地突出主色调。 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（2） 接着要考虑的是别的地方使用什么颜色接着要考虑的是别的地方使用什么颜色去搭配这种主色调，比如背景色、文字颜色、去搭配这种主色调，比如背景色、文字颜色、导航条颜色、插图颜色等都使用什么颜色。导航条颜色、插图颜色等都使用什么颜色。色彩搭配是一项非常精细的工作，因为往往色彩搭配是一项非常精细的工作，因为往往一个细节就会影响整个网页的色彩均衡。一个细节就会影响整个网页的色彩均衡。 色彩搭配没有固定的模式与步骤，先从色彩搭配没有固定的模式与步骤

45、，先从大面积用色，再到小细节去搭配颜色，会使大面积用色，再到小细节去搭配颜色，会使得这项工作变得简单一些。得这项工作变得简单一些。 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（2）（1 1）选取背景色选取背景色 大多数的网站都会选取白色作为背景色。白色使大多数的网站都会选取白色作为背景色。白色使得狭小的屏幕空间显得很大，再多的信息在白色的背得狭小的屏幕空间显得很大，再多的信息在白色的背景下，其排放也可以显得很整齐，其页面也可以显得景下，其排放也可以显得很整齐，其页面也可以显得非常干净和整洁。非常干净和整洁。 如搜狐、网易、新浪、湖南第一师范等网站都采如搜狐、网易、新

46、浪、湖南第一师范等网站都采用白色为背景色。用白色为背景色。 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（2）湖南第一师范学院主页()网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（2）（2 2）导航条的颜色导航条的颜色 导航条是网站栏目的一个索引，常以一个水平长导航条是网站栏目的一个索引，常以一个水平长条形式出现在网页头部的下边（也有的出现在头部下条形式出现在网页头部的下边（也有的出现在头部下左边）。导航条作为头部的一部分，经常采用左边）。导航条作为头部的一部分，经常采用主色调主色调，比首都之窗主页易趣网主页。另一方面，导航条因为比首都之窗主

47、页易趣网主页。另一方面，导航条因为介于网页的头部和内容部分的中间，所以也经常作为介于网页的头部和内容部分的中间，所以也经常作为头部和内容部分的过渡，也可采用头部和内容部分的过渡，也可采用灰色系列灰色系列导航条，导航条，比德德玛网站主页、湖南第一师范主页的导航条。比德德玛网站主页、湖南第一师范主页的导航条。 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（2）（3）栏目索引条的颜色栏目索引条的颜色 栏目索引条因为分布在网页的各个部位，所以经栏目索引条因为分布在网页的各个部位，所以经常采用主色调中不同深度的颜色来烘托整体的效果，常采用主色调中不同深度的颜色来烘托整体的效果，

48、比如图比如图4-14所示的所示的IBM公司主页采用不同的蓝色，图公司主页采用不同的蓝色，图4-15所示的首都之窗主页采用不同的红色。栏目索引所示的首都之窗主页采用不同的红色。栏目索引条也经常使用与主色调非常协调的颜色，比如图条也经常使用与主色调非常协调的颜色，比如图4-16所示的易趣网主页的栏目索引条就使用了浅黄绿色。所示的易趣网主页的栏目索引条就使用了浅黄绿色。另外，为了颜色的过渡，位于网页中间的栏目索引条另外，为了颜色的过渡，位于网页中间的栏目索引条也经常采用浅灰色。也经常采用浅灰色。 网页制作与网站设计网页制作与网站设计一、色彩搭配基础（一、色彩搭配基础（2）（4 4）文字的颜色文字的颜

49、色 文字在文字在个网页上是无处不在的，但是文字的笔个网页上是无处不在的，但是文字的笔画比较单薄，所以文字通常用来进画比较单薄，所以文字通常用来进步突出主色凋，步突出主色凋，或者用来过渡和缓解页面的颜色。文字的颜色主要根或者用来过渡和缓解页面的颜色。文字的颜色主要根据文字的背景色进行搭配，它与背景色应有较大的反据文字的背景色进行搭配，它与背景色应有较大的反差，如白底黑字、蓝底白字等，以便能清楚地显示文差，如白底黑字、蓝底白字等，以便能清楚地显示文字。其次文字的颜色搭配还得兼顾文字周围物体的颜字。其次文字的颜色搭配还得兼顾文字周围物体的颜色。色。 网页制作与网站设计网页制作与网站设计一、色彩搭配基

50、础（一、色彩搭配基础（2）（5）插图的颜色插图的颜色 网页的插图通常尺寸都比较小，所以它的颜色可网页的插图通常尺寸都比较小，所以它的颜色可以绚丽、丰富一些，这样一来可以使页面变得活泼，以绚丽、丰富一些，这样一来可以使页面变得活泼，二来可以点缀整个页面。但在有背景的情况下，插入二来可以点缀整个页面。但在有背景的情况下，插入图片时要特别小心，不要和网页的背景色及图所插区图片时要特别小心，不要和网页的背景色及图所插区域的背景色相冲突。解决这个问题一般有两种方法，域的背景色相冲突。解决这个问题一般有两种方法，一种是采用可透明的一种是采用可透明的GIF图，另一种是将图片的背景图，另一种是将图片的背景色做