第2章 网页整体规划与设计ppt课件（完整版）.pptx

《第2章 网页整体规划与设计ppt课件（完整版）.pptx》由会员分享，可在线阅读，更多相关《第2章 网页整体规划与设计ppt课件（完整版）.pptx（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第2章 网页整体规划与设计ppt课件（完整版）第2章 网页整体规划与设计网页整体规划与设计第 2 章本书编写组网页设计与制作（微课版第3 版）第2章 网页整体规划与设计2.1网页设计基础2.2网站与网页的设计流程及主题的确定2.3需求分析与内容组织2.4色彩基础知识2.5网站中的色彩应用2.6 综合实训案例5.7 5.8 5.9 第2章 网页整体规划与设计学习目标 了解网页设计的基础知识；了解网页设计的基础知识； 了解网站需求分析和内容组织；了解网站需求分析和内容组织； 了解色彩基础知识。了解色彩基础知识。 随着随着国内互联网开发理论的发展，越来越多的网站开始更加注重网国内互联网开发理论的发展

2、，越来越多的网站开始更加注重网页的页面设计，优秀的页面设计可以为用户提供视觉享受。本章主要介页的页面设计，优秀的页面设计可以为用户提供视觉享受。本章主要介绍在网页设计初期一些必备的基础知识及准备工作，包括网页的布局、绍在网页设计初期一些必备的基础知识及准备工作，包括网页的布局、网站的前期规划和内容组织、色彩基础知识等。网站的前期规划和内容组织、色彩基础知识等。第2章 网页整体规划与设计2.1网页设计基础2.1.1 2.1.1 网页布局网页布局类型类型网页布局类型有很多，大致可分为一字型结构、左右型结构、川字型网页布局类型有很多，大致可分为一字型结构、左右型结构、川字型结构、二字型结构、三字型结

3、构、厂字型结构、匡字型结构、同字型结构、二字型结构、三字型结构、厂字型结构、匡字型结构、同字型结构及回字型结构等，下面介绍几种常见的类型结构及回字型结构等，下面介绍几种常见的类型。1 1一字型一字型结构结构一字型结构是最简单的网页布局类型，无论是从纵向上看还是从横向一字型结构是最简单的网页布局类型，无论是从纵向上看还是从横向上看都只有一栏，常常居中显示，它是其他布局类型的基础。上看都只有一栏，常常居中显示，它是其他布局类型的基础。第2章 网页整体规划与设计2.1网页设计基础2.1.1 2.1.1 网页布局网页布局类型类型2 2左右型左右型结构结构左右型结构是将网页在垂直方左右型结构是将网页在垂

4、直方向上分割为左、右两栏，两栏向上分割为左、右两栏，两栏的宽度不同的宽度不同，由，由左右两栏构成，左右两栏构成，一边是导航链接，一边是正文。一边是导航链接，一边是正文。这种结构的网页内容非常清晰，这种结构的网页内容非常清晰，一目了然。一目了然。第2章 网页整体规划与设计2.1网页设计基础2.1.1 2.1.1 网页布局网页布局类型类型3 3川字型川字型结构结构川字型结构是将网页在垂直方向上分割为左、中、右川字型结构是将网页在垂直方向上分割为左、中、右3 3栏，左右两栏的栏，左右两栏的宽度较小，中栏的宽度宽度较小，中栏的宽度较大。较大。网页的内容按栏目分布在这网页的内容按栏目分布在这3 3列中，

5、能最列中，能最大限度地突出主页的导航功能。大限度地突出主页的导航功能。第2章 网页整体规划与设计2.1网页设计基础2.1.1 2.1.1 网页布局网页布局类型类型4 4二字型二字型结构结构二字型结构将网页在水平方向上分割二字型结构将网页在水平方向上分割为上、下两栏，两栏的高度为上、下两栏，两栏的高度不同。不同。这这种结构的网页上面往往是标题，下面种结构的网页上面往往是标题，下面是正文，一些展示文章的网页或注册是正文，一些展示文章的网页或注册页面等就是这种页面等就是这种类型。类型。第2章 网页整体规划与设计2.1网页设计基础2.1.1 2.1.1 网页布局网页布局类型类型5 5三字型三字型结构结

6、构三字型结构是将网页在水平方向三字型结构是将网页在水平方向上分割为上、中、下上分割为上、中、下3 3栏，上下栏，上下两栏的高度较小，中栏的高度两栏的高度较小，中栏的高度较较大。大。这种布局的特点是简洁明了，这种布局的特点是简洁明了，在网页中用横向两条色块将网页在网页中用横向两条色块将网页整体分割为整体分割为3 3部分，两条色块中部分，两条色块中主要放置广告条、更新和版权主要放置广告条、更新和版权提提示。示。第2章 网页整体规划与设计2.1网页设计基础2.1.1 2.1.1 网页布局网页布局类型类型6 6厂字型厂字型结构结构厂字型结构是将网页在水平方向上分割为上、下两栏，下栏又分为左右两厂字型结

7、构是将网页在水平方向上分割为上、下两栏，下栏又分为左右两栏。栏。厂字型结构的网页顶部即上栏常常为厂字型结构的网页顶部即上栏常常为“标志标志+ +广告条广告条”，下栏的左侧，下栏的左侧为主菜单，下栏的右侧显示正文为主菜单，下栏的右侧显示正文内容。内容。这是网页设计中使用非常广泛的一这是网页设计中使用非常广泛的一种布局类型，一般用于企事业网站中的二级页面。这种布局的优点是页面种布局类型，一般用于企事业网站中的二级页面。这种布局的优点是页面结构清晰、主次分明，使初学者容易上手。结构清晰、主次分明，使初学者容易上手。第2章 网页整体规划与设计2.1网页设计基础2.1.1 2.1.1 网页布局网页布局类

8、型类型7 7匡字型匡字型结构结构匡字型结构是将网页分割为上、匡字型结构是将网页分割为上、中、下中、下3 3栏，中栏又分为左右两栏，中栏又分为左右两栏。栏。这种布局的顶部即上栏常常这种布局的顶部即上栏常常是标题及广告；中栏的左侧是链是标题及广告；中栏的左侧是链接，中栏的右侧是正文；下栏是接，中栏的右侧是正文；下栏是网站的辅助网站的辅助信息。信息。第2章 网页整体规划与设计2.1网页设计基础2.1.1 2.1.1 网页布局网页布局类型类型8 8同字型同字型结构结构同字型结构是将网页分割为上、同字型结构是将网页分割为上、下两栏，下栏又分为左、中、右下两栏，下栏又分为左、中、右3 3栏。栏。第2章 网

9、页整体规划与设计2.1网页设计基础2.1.1 2.1.1 网页布局网页布局类型类型9 9回字型回字型结构结构回字型结构是将网页分割为上、中、下回字型结构是将网页分割为上、中、下3 3栏，中栏又分为左、中、右栏，中栏又分为左、中、右3 3栏。栏。回字型回字型网页顶部即上栏常常是网站的标志、广网页顶部即上栏常常是网站的标志、广告及导航栏；中栏是网站的主要内容，告及导航栏；中栏是网站的主要内容，左右分别列出一些栏目，中间是主要部左右分别列出一些栏目，中间是主要部分；下栏是网站的一些基本信息、联系分；下栏是网站的一些基本信息、联系方式、版权声明等。这种结构是一些大方式、版权声明等。这种结构是一些大中型

10、网站常见的布局中型网站常见的布局类型。类型。其优点是充其优点是充分利用版面，信息量大；缺点是页面显分利用版面，信息量大；缺点是页面显得拥挤，不够灵活。得拥挤，不够灵活。第2章 网页整体规划与设计2.1网页设计基础2.1.2 2.1.2 网页整体网页整体造型造型 网页网页整体造型是指页面的整体形象设计，这种形象是图形与文本整体造型是指页面的整体形象设计，这种形象是图形与文本的组合。页面元素的基本形状有矩形、圆形、三角形、菱形等，利用的组合。页面元素的基本形状有矩形、圆形、三角形、菱形等，利用这些形状可以塑造出丰富的页面形象这些形状可以塑造出丰富的页面形象。使用。使用形状时，往往要考虑形状形状时，

11、往往要考虑形状的基本特性，从而根据页面的作用或主题来选择不同的形状。如矩形的基本特性，从而根据页面的作用或主题来选择不同的形状。如矩形代表着正式、规则，很多政府网页都是以矩形为页面整体造型；圆形代表着正式、规则，很多政府网页都是以矩形为页面整体造型；圆形代表着柔和、团结、温暖、安全等，因此许多时尚站点喜欢以圆形为代表着柔和、团结、温暖、安全等，因此许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量、权威、牢固、侵略等，许多大型页面整体造型；三角形代表着力量、权威、牢固、侵略等，许多大型的商业站点为显示它的权威性，常以三角形为页面整体造型；菱形代的商业站点为显示它的权威性，常以三角形为页面整

12、体造型；菱形代表着平衡、协调、公平，一些交友网站常以菱形为页面整体造型。实表着平衡、协调、公平，一些交友网站常以菱形为页面整体造型。实际多数网页是利用多个形状并结合动态网站设计技巧加以设计的。际多数网页是利用多个形状并结合动态网站设计技巧加以设计的。第2章 网页整体规划与设计2.1网页设计基础2.1.3 2.1.3 网页设计网页设计要素要素1 1内容内容网页必须有实质性的信息，并且能恰当、完全地将这些信息展示出来网页必须有实质性的信息，并且能恰当、完全地将这些信息展示出来。2 2美观美观网页的外观是用户的第一印象，一个设计美观的网页能给用户带来愉网页的外观是用户的第一印象，一个设计美观的网页能

13、给用户带来愉悦的悦的体验。体验。但美观不等于花哨，有时简朴的设计也能给人享受。但美观不等于花哨，有时简朴的设计也能给人享受。3 3简单简单复杂复杂的设计会给用户带来糟糕的体验，使用户迷失方向，不知道如何的设计会给用户带来糟糕的体验，使用户迷失方向，不知道如何操作，从而产生挫败感，造成用户的反感。操作，从而产生挫败感，造成用户的反感。4 4高效高效好的好的网页要求能高效地被浏览器解释执行，网页不能以牺牲用户浏览、网页要求能高效地被浏览器解释执行，网页不能以牺牲用户浏览、操作的时间来换取界面的美观操作的时间来换取界面的美观效果。效果。第2章 网页整体规划与设计2.2网站与网页的设计流程及主题的确定

14、2.2.1 2.2.1 网站与网页的设计网站与网页的设计流程流程1 1网站的前期策划和搜集资料网站的前期策划和搜集资料2 2根据网站的模式、特点及制作规范定制出最适当的标准样式根据网站的模式、特点及制作规范定制出最适当的标准样式3 3设计人员进行二级页面设计工作设计人员进行二级页面设计工作4 4制作人员开始制作工作制作人员开始制作工作（1 1）定义站点）定义站点（2 2）建立网站结构）建立网站结构（3 3）设计和制作首页）设计和制作首页（4 4）设计与制作其他页面）设计与制作其他页面（5 5）完成）完成5 5测试与测试与维护维护第2章 网页整体规划与设计2.2网站与网页的设计流程及主题的确定2

15、.2.2 2.2.2 网站主题的网站主题的确定确定 互联网互联网上具有相似性质、共同内容的一组信息资源就是一个网站，上具有相似性质、共同内容的一组信息资源就是一个网站，构成网站的基本元素是文件及存放文件的文件夹。构成网站的基本元素是文件及存放文件的文件夹。 网站网站选题的主要工作是根据网站的建设目标和访问网站的用户群选题的主要工作是根据网站的建设目标和访问网站的用户群来确立网站的主题，并给网站起一个简明的名称，然后围绕这个主题来确立网站的主题，并给网站起一个简明的名称，然后围绕这个主题搜集素材和相关资料，并把它们通过网页的形式呈现出来。个人网站搜集素材和相关资料，并把它们通过网页的形式呈现出来

16、。个人网站的选题可以涉及学习、生活、社会等各个方面，企业型的网站应该选的选题可以涉及学习、生活、社会等各个方面，企业型的网站应该选择贴近企业发展的主题。网站名称的确定是在建立网站过程中非常重择贴近企业发展的主题。网站名称的确定是在建立网站过程中非常重要的一环，名字需要切题，这样容易令人印象深刻，好的网站名称可要的一环，名字需要切题，这样容易令人印象深刻，好的网站名称可以是精练的、想象力丰富的、别具一格的，不但能反映出网站的主题，以是精练的、想象力丰富的、别具一格的，不但能反映出网站的主题，而且能吸引更多用户。而且能吸引更多用户。第2章 网页整体规划与设计2.3需求分析与内容组织2.3.1 2.

17、3.1 网站的网站的需求分析需求分析网站需求分析的主要目的是搞清楚网站要做什么，从而确定网站的主网站需求分析的主要目的是搞清楚网站要做什么，从而确定网站的主题及实现细节。需求分析的主要任务有如下几方面。题及实现细节。需求分析的主要任务有如下几方面。1 1确定对网站的综合要求确定对网站的综合要求2 2分析网站的数据要求分析网站的数据要求3 3导出网站的逻辑模型导出网站的逻辑模型4 4修正网站开发修正网站开发计划计划第2章 网页整体规划与设计2.3需求分析与内容组织2.3.2 2.3.2 网站的内容网站的内容组织组织在明确网站的需求之后，接下来的工作就是网站制作。首先需要了解在明确网站的需求之后，

18、接下来的工作就是网站制作。首先需要了解网站的总体设计和内容组织情况，如主要的栏目排版等。网站的总体设计和内容组织情况，如主要的栏目排版等。1 1规划草图规划草图2 2规划页面结构规划页面结构3 3规划站点结构规划站点结构4 4网站内容的网站内容的组织组织第2章 网页整体规划与设计2.4 色彩基础知识2.4.1 2.4.1 色彩色彩理论理论1 1色彩基本色彩基本概念概念（1 1）色相）色相色相（色相（huehue）也称色泽，是颜色的基本特征，反映了颜色的基本相貌。）也称色泽，是颜色的基本特征，反映了颜色的基本相貌。色相是在色相是在0 0360360的标准色轮上，按位置度量的。在通常的使用过的标准

19、色轮上，按位置度量的。在通常的使用过程中，色相由颜色名称标识，如红色、绿色或橙色等。程中，色相由颜色名称标识，如红色、绿色或橙色等。（2 2）饱和度）饱和度饱和度（饱和度（saturationsaturation）也称纯度，指颜色的纯洁程度。饱和度表示色）也称纯度，指颜色的纯洁程度。饱和度表示色相中彩色成分所占的比例，用相中彩色成分所占的比例，用0 0（灰）（灰）100%100%（完全饱和）进行度量。（完全饱和）进行度量。（3 3）明度）明度明度（明度（brightnessbrightness、lightnesslightness或或luminosityluminosity）也称亮度，指颜色的

20、）也称亮度，指颜色的深浅程度，通常用深浅程度，通常用0 0（黑）（黑）100%100%（白）进行度量（白）进行度量。第2章 网页整体规划与设计2.4 色彩基础知识2.4.1 2.4.1 色彩色彩理论理论2 2色彩的三原色色彩的三原色计算机屏幕的色彩是由计算机屏幕的色彩是由RGBRGB（红、绿、蓝）（红、绿、蓝）3 3种色光所合成的，可通过种色光所合成的，可通过调整这调整这3 3种基色来调配出其他的颜色。许多图像处理软件都提供了色彩种基色来调配出其他的颜色。许多图像处理软件都提供了色彩调配功能，可输入红、绿、蓝调配功能，可输入红、绿、蓝3 3种基色的数值来调配颜色，也可直接根种基色的数值来调配颜

21、色，也可直接根据软件提供的调色板来选择颜色。据软件提供的调色板来选择颜色。 全彩。全彩（全彩。全彩（fullcolorfullcolor）是指）是指RGBRGB三色光能显示的所有颜色，每三色光能显示的所有颜色，每一种色光以一种色光以8 8位表示，各有位表示，各有256256种阶调，三色光交互增减，可以显示种阶调，三色光交互增减，可以显示2424位的位的16 777 21616 777 216种颜色（种颜色（256256256256256=16 777 216256=16 777 216），这是计算机），这是计算机所能显示的最多色彩，也就是一般所说的所能显示的最多色彩，也就是一般所说的RGBRG

22、B真彩（真彩（turecolorturecolor）。）。 8 8位色。位色。8 8位色是指有位色是指有256256种阶调或者是种阶调或者是256256种色彩的影像，而常常种色彩的影像，而常常见到的见到的GIFGIF格式的图像文件就是带有格式的图像文件就是带有256256种色彩的图像文件。种色彩的图像文件。第2章 网页整体规划与设计2.4 色彩基础知识2.4.1 2.4.1 色彩色彩理论理论3 3色轮的主要组成色轮的主要组成所有的色彩都能在一个色轮中呈现（读者可自行查阅，观察色彩表现所有的色彩都能在一个色轮中呈现（读者可自行查阅，观察色彩表现形式）。在色轮中，一般把颜色分成三大部分，即原色、辅

23、助色和第形式）。在色轮中，一般把颜色分成三大部分，即原色、辅助色和第三颜色。原色分别是红色、绿色和蓝色，这三颜色。原色分别是红色、绿色和蓝色，这3 3种颜色是基础色，它们能种颜色是基础色，它们能够组成色轮上的所有其他颜色。通过混合原色，可以得到辅助色，它够组成色轮上的所有其他颜色。通过混合原色，可以得到辅助色，它们分别是橙色、绿色和紫色。第三颜色是由中间色组成的，由一个原们分别是橙色、绿色和紫色。第三颜色是由中间色组成的，由一个原色和一个辅助色混合而成，如黄绿色和蓝绿色色和一个辅助色混合而成，如黄绿色和蓝绿色。第2章 网页整体规划与设计2.4 色彩基础知识2.4.1 2.4.1 色彩色彩理论理

24、论4 4颜色的关系颜色的关系色彩中有大量的术语来描述颜色的关系，了解这些术语有助于设计者色彩中有大量的术语来描述颜色的关系，了解这些术语有助于设计者分析色彩、搭配色彩和了解色彩的情感含义。例如，互补色，又叫对分析色彩、搭配色彩和了解色彩的情感含义。例如，互补色，又叫对比色，是互补互调的色彩，它们在色轮上处于相对的位置，如蓝色和比色，是互补互调的色彩，它们在色轮上处于相对的位置，如蓝色和橙色、紫色和黄色，以及红色和绿色。对比色可以产生强烈的视觉效橙色、紫色和黄色，以及红色和绿色。对比色可以产生强烈的视觉效果，给我刺激、亮丽、鲜艳、喜庆的感觉。邻色是色轮上相邻的颜色，果，给我刺激、亮丽、鲜艳、喜庆

25、的感觉。邻色是色轮上相邻的颜色，邻色一起使用是很好的搭配，但不会有明显的对比邻色一起使用是很好的搭配，但不会有明显的对比。第2章 网页整体规划与设计2.4 色彩基础知识2.4.2 2162.4.2 216网页网页安全色安全色216216网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），这些颜色在任何终端显示设备能够正常显示的颜色集合（调色板），这些颜色在任何终端显示设备上的效果都是相同的。使用上的效果都是相同的。使用216216网页安全色进行网页配色可以避免颜色网页安全色进行网页配色可以避免颜色

26、失真的问题。失真的问题。216216网页安全色是根据计算机设备的情况并通过无数次反复分析论证得网页安全色是根据计算机设备的情况并通过无数次反复分析论证得到的结果，这对于网页设计师来说是必备的常识，利用它可以拟定出到的结果，这对于网页设计师来说是必备的常识，利用它可以拟定出更安全、更出色的网页配色方案更安全、更出色的网页配色方案。第2章 网页整体规划与设计2.5网站中的色彩应用2.5.1 2.5.1 网页色彩搭配网页色彩搭配规则规则在网页设计中，大多数企业往往过多地看重网页布局，却忽略了网页在网页设计中，大多数企业往往过多地看重网页布局，却忽略了网页色彩的搭配。网页的色彩搭配其实对用户的浏览体验

27、有着很重要的影色彩的搭配。网页的色彩搭配其实对用户的浏览体验有着很重要的影响，它有一定的规则和技巧。只有熟练掌握这些规则和技巧，才能制响，它有一定的规则和技巧。只有熟练掌握这些规则和技巧，才能制作出一个优秀的网页。作出一个优秀的网页。网页的配色规则是根据网页不同位置、不同功能而设定的。下面将对网页的配色规则是根据网页不同位置、不同功能而设定的。下面将对网页标题、网页标志、网页文字及网页链接依次进行介绍。网页标题、网页标志、网页文字及网页链接依次进行介绍。1 1网页标题网页标题2 2网页网页标志标志3 3网页文字网页文字4 4网页网页链接链接第2章 网页整体规划与设计2.5网站中的色彩应用2.5

28、.2 2.5.2 网页元素之间的色彩网页元素之间的色彩搭配搭配1 1网页色彩搭配的基本原理网页色彩搭配的基本原理 色彩的色彩的鲜明性鲜明性 色彩的色彩的独特性独特性 色彩的匹配色彩的匹配性性 色彩的联想色彩的联想性性2 2黑白灰色彩的应用黑白灰色彩的应用灰色是万能色，可以和任何色彩搭配，在一些色彩明度较高的网站中灰色是万能色，可以和任何色彩搭配，在一些色彩明度较高的网站中配以灰色，可以适当地降低明度配以灰色，可以适当地降低明度。白色。白色是网站中使用最普遍的色彩之是网站中使用最普遍的色彩之一，甚至很多网站用大块的白色空间作为网站的组成部分。留白可以一，甚至很多网站用大块的白色空间作为网站的组成

29、部分。留白可以给人遐想的空间，让人可以充分发挥想象力，网页设计中恰当的留白给人遐想的空间，让人可以充分发挥想象力，网页设计中恰当的留白对协调页面也有相当大的作用。对协调页面也有相当大的作用。第2章 网页整体规划与设计2.5网站中的色彩应用2.5.2 2.5.2 网页元素之间的色彩网页元素之间的色彩搭配搭配3 3确定主色调确定主色调一个网站不能单一地运用一种色彩，否则就会让人感觉单调、乏味，一个网站不能单一地运用一种色彩，否则就会让人感觉单调、乏味，但是如果将所有的色彩都运用到网站中则会给人轻浮、花哨的感觉，但是如果将所有的色彩都运用到网站中则会给人轻浮、花哨的感觉，所以一个网站必须有一种或两种

30、主色调，这样才不会让用户迷失方向，所以一个网站必须有一种或两种主色调，这样才不会让用户迷失方向，网站也不至于单调、乏味。确定网站的主色调有以下几种方法。网站也不至于单调、乏味。确定网站的主色调有以下几种方法。 用一种用一种色彩色彩 用两种用两种色彩色彩 用一个色用一个色系系 根据企业不同的文化背景适当地选择颜色。根据企业不同的文化背景适当地选择颜色。第2章 网页整体规划与设计2.6 综合实训案例：饰品销售网站主页整体设计主页主页整体设计的主要工作是根据网站的主题，确定主页的布局及色彩整体设计的主要工作是根据网站的主题，确定主页的布局及色彩搭配，并结合美工设计效果图，主要工作如下。搭配，并结合美工设计效果图，主要工作如下。1 1网站主题网站主题2 2主页布局主页布局3 3色彩搭配色彩搭配4 4效果图效果图第2章 网页整体规划与设计本章小结在学习设计和制作网页的方法前，需要先了解一些网页设计的相关知在学习设计和制作网页的方法前，需要先了解一些网页设计的相关知识，如网页的设计流程、网页的内容组织、网页的布局方式和网页的识，如网页的设计流程、网页的内容组织、网页的布局方式和网页的色彩搭配等。熟悉这些知识后，就可以开始设计自己的网页作品了。色彩搭配等。熟悉这些知识后，就可以开始设计自己的网页作品了。