《网页设计与制作第二版》第2章网页设计基础

1、? ?网页设计与制作第二网页设计与制作第二版版? ?第第2 2章网页设计根章网页设计根底底2022-5-4?网页设计与制作第二版?22.1 网页设计根底网页设计根底 2.1.1 2.1.1 网页风格网页风格 网站的风格可以从以下几个方向来探讨网站的风格可以从以下几个方向来探讨 色彩的搭配：网页的底色、文字字型、图片的色系、颜色色彩的搭配：网页的底色、文字字型、图片的色系、颜色等。等。 版面的排列：表格、框架的应用，文字缩排、段落等。版面的排列：表格、框架的应用，文字缩排、段落等。 导航的设计：导航窗口效果、导航效时等。导航的设计：导航窗口效果、导航效时等。 程序的选择：网页制作程序，如程序的选

2、择：网页制作程序，如ASPASP，PHPPHP，XMLXML，CGICGI等。等。 特效的应用：让网页看起来生动活泼的各种特殊应用，如特效的应用：让网页看起来生动活泼的各种特殊应用，如FlashFlash、Java scriptJava script，Java appletsJava applets，DHTMLDHTML等。等。 架构的层次：目录的规划、层次的架构等。架构的层次：目录的规划、层次的架构等。 内容的选取：网站主题、整体实用性、文件关联性、内容内容的选取：网站主题、整体实用性、文件关联性、内容切合度等。切合度等。 开展与规划：对于网站的未来规划，网站整体内容开展方开展与规划：对于网

3、站的未来规划，网站整体内容开展方向等。向等。 2022-5-4?网页设计与制作第二版?5图图2-2 “口型布局口型布局 2022-5-4?网页设计与制作第二版?6图图2-3 “田型布局田型布局 2022-5-4?网页设计与制作第二版?7图图2-4 “三型布局三型布局 2022-5-4?网页设计与制作第二版?8图图2-5 POP布局布局 2022-5-4?网页设计与制作第二版?9v网页作为一种版面，既有文字，又有图片。文字网页作为一种版面，既有文字，又有图片。文字有大小区别，文档有标题和正文之分，图片也有有大小区别，文档有标题和正文之分，图片也有大小和横竖之别。网页版面应该具有如下特点。大小和横

4、竖之别。网页版面应该具有如下特点。 v1 1主次清楚，中心突出。主次清楚，中心突出。 v2 2大小搭配，相互照应。大小搭配，相互照应。 v3 3图文并茂，相得益彰。图文并茂，相得益彰。 v4 4动静有度，平衡对称。动静有度，平衡对称。 2022-5-4?网页设计与制作第二版?10图图2-6 整体风格简洁实用，中心突出整体风格简洁实用，中心突出 2022-5-4?网页设计与制作第二版?11图图2-7 大图小图相互照应大图小图相互照应 2022-5-4?网页设计与制作第二版?12图图2-8 图文并茂图文并茂 2022-5-4?网页设计与制作第二版?13图图2-9 动静结合动静结合 2022-5-4

5、?网页设计与制作第二版?14图图2-10 对称的例如对称的例如 2022-5-4?网页设计与制作第二版?15图图2-11 布局对称布局对称 2022-5-4?网页设计与制作第二版?16图图2-12 典型辐射平衡典型辐射平衡 2022-5-4?网页设计与制作第二版?172.1.3 网页构图网页构图 网页设计要有内容、形式、功能以及目标。点、线、网页设计要有内容、形式、功能以及目标。点、线、面是视觉语言中的根本元素，进行网页设计时应面是视觉语言中的根本元素，进行网页设计时应使用点、线、面的互相穿插，互相衬托构成最正使用点、线、面的互相穿插，互相衬托构成最正确的页面效果，组合成各种各样的视觉形象，千

6、确的页面效果，组合成各种各样的视觉形象，千变万化的视觉空间，表达完美的设计意境。变万化的视觉空间，表达完美的设计意境。 1 1点的应用。点的应用。 2 2直线的应用。直线的应用。 3 3曲线的应用。曲线的应用。 4 4曲线、直线的综合应用。曲线、直线的综合应用。 5 5面的应用。面的应用。 2022-5-4?网页设计与制作第二版?18图图2-13 点的应用点的应用 2022-5-4?网页设计与制作第二版?19图图2-14 线的应用线的应用 2022-5-4?网页设计与制作第二版?20图图2-15 曲线的应用曲线的应用 2022-5-4?网页设计与制作第二版?21图图2-16 曲线、直线的综合应

7、用曲线、直线的综合应用 2022-5-4?网页设计与制作第二版?22图图2-17 点、线的综合应用点、线的综合应用 2022-5-4?网页设计与制作第二版?23图图2-18 IBM网站网站 2022-5-4?网页设计与制作第二版?24图图2-19 面的例如面的例如 2022-5-4?网页设计与制作第二版?25图图2-20 线、面的例如线、面的例如 2022-5-4?网页设计与制作第二版?26图图2-21 点、线、面的结合例如点、线、面的结合例如 2022-5-4?网页设计与制作第二版?272.1.4 网页色彩网页色彩 v色彩是人的视觉最敏感的东西，它是美丽而丰富色彩是人的视觉最敏感的东西，它是

8、美丽而丰富的，能唤起人类的心灵感知。网页的色彩处理得的，能唤起人类的心灵感知。网页的色彩处理得好，可以锦上添花，到达事半功倍的效果。为了好，可以锦上添花，到达事半功倍的效果。为了把握好色彩的应用，我们应首先了解一下色彩的把握好色彩的应用，我们应首先了解一下色彩的一些根本概念。一些根本概念。 v计算机屏幕是由电子枪投射到屏幕来产生色光。计算机屏幕是由电子枪投射到屏幕来产生色光。电子枪射到屏幕可以产生电子枪射到屏幕可以产生3 3种颜色：红、绿、蓝。种颜色：红、绿、蓝。我们把这我们把这3 3种色称为原色，常称为三原色。由这种色称为原色，常称为三原色。由这3 3种色光，计算机屏幕可制作出完整的光谱。这

9、也种色光，计算机屏幕可制作出完整的光谱。这也就是就是RGBRGB色系。色系。 2022-5-4?网页设计与制作第二版?28v以上颜色可总结为如下色调。以上颜色可总结为如下色调。 v1 1暖色调：即红色、橙色、黄色、褐色等色彩暖色调：即红色、橙色、黄色、褐色等色彩的搭配。这种色调的运用，可使主页呈现温馨、的搭配。这种色调的运用，可使主页呈现温馨、温暖、热情的气氛。温暖、热情的气氛。v2 2冷色调：即青色、绿色、紫色等色彩的搭配。冷色调：即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高这种色调的运用，可使主页呈现宁静、清凉、高雅的气氛。雅的气氛。v3 3比照色调：即把色调

10、完全相反的色彩搭配在比照色调：即把色调完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色调的搭配，可以产生强烈的视觉效果，等。这种色调的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。最后，还要考虑给人亮丽、鲜艳、喜庆的感觉。最后，还要考虑页面的底色背景色的深、浅，这里借用摄影页面的底色背景色的深、浅，这里借用摄影中的一个术语，就是中的一个术语，就是“高调和高调和“低调，底色低调，底色浅的称为低调。浅的称为低调。 2022-5-4?网页设计与制作第二版?292.1.5 网页配色技巧网页配色技巧 v根据网站所要传达的为信息

11、和品牌选择颜色。根据网站所要传达的为信息和品牌选择颜色。 v 要根据访问对象选择颜色。要根据访问对象选择颜色。 v不要使用过多的颜色。不要使用过多的颜色。 v在阅读的局部使用比照色。在阅读的局部使用比照色。 v用灰阶来测试比照。用灰阶来测试比照。 v选择颜色要注意时效性。选择颜色要注意时效性。 v选择色盘时应考虑功能性的颜色。选择色盘时应考虑功能性的颜色。 v注意网站色差问题。注意网站色差问题。 2022-5-4?网页设计与制作第二版?30图图2-22 圣诞节网站圣诞节网站 2022-5-4?网页设计与制作第二版?31图图2-23 色彩实例色彩实例 2022-5-4?网页设计与制作第二版?32

12、v在网页的色彩应用中应注意如下问题。在网页的色彩应用中应注意如下问题。 v1 1运用相同色系色彩。运用相同色系色彩。 v2 2运用比照色或互补色。运用比照色或互补色。 v3 3使用过渡色。使用过渡色。 2022-5-4?网页设计与制作第二版?33图图2-24 黑白比照黑白比照 2022-5-4?网页设计与制作第二版?342.1.6 2.1.6 网页图像网页图像 2022-5-4?网页设计与制作第二版?352.2 网页设计原那么网页设计原那么 2.2.1 2.2.1 网页设计的根本原那么网页设计的根本原那么 网页设计是有原那么的，无论用什么样的方法，都网页设计是有原那么的，无论用什么样的方法，都

13、要遵循一些根本原那么，这些根本原那么是：统要遵循一些根本原那么，这些根本原那么是：统一、连贯、分割、比照、和谐、易读、易找、清一、连贯、分割、比照、和谐、易读、易找、清晰、精选。晰、精选。 统一：是指设计的整体性、一致性。统一：是指设计的整体性、一致性。 连贯：是指要注意页面的相互关系。连贯：是指要注意页面的相互关系。 分割：是指将页面分成假设干小块，小块之间有视分割：是指将页面分成假设干小块，小块之间有视觉上的不同，这样可以使观者一目了然。分割是觉上的不同，这样可以使观者一目了然。分割是对网页的页面内容分类归档。对网页的页面内容分类归档。 2022-5-4?网页设计与制作第二版?36图图2-

14、25 统一的例如统一的例如 2022-5-4?网页设计与制作第二版?37图图2-26 连贯的例如连贯的例如 2022-5-4?网页设计与制作第二版?38图图2-27 分割分割 2022-5-4?网页设计与制作第二版?39n比照：是指通过矛盾和冲突，使设计更加富有生气。比照：是指通过矛盾和冲突，使设计更加富有生气。其常用的方法有：多与少、长与短、粗与细、主与次、其常用的方法有：多与少、长与短、粗与细、主与次、美与丑等。美与丑等。 n 和谐：是指整个页面符合美的法那么，浑然一体。网和谐：是指整个页面符合美的法那么，浑然一体。网页的和谐不仅要看其结构形式，而且要看其所形成的页的和谐不仅要看其结构形式

15、，而且要看其所形成的视觉效果能否与人的视觉感受相沟通，产生共鸣。视觉效果能否与人的视觉感受相沟通，产生共鸣。 n易读：是指网页让人看起来不费力，视觉效果好，符易读：是指网页让人看起来不费力，视觉效果好，符合群众的阅读习惯。合群众的阅读习惯。 n易找：是指网页的宣传和推广，如索引擎、目录指南、易找：是指网页的宣传和推广，如索引擎、目录指南、导航站点、交换链接等。导航站点、交换链接等。 2022-5-4?网页设计与制作第二版?402022-5-4?网页设计与制作第二版?41图图2-29 和谐和谐 2022-5-4?网页设计与制作第二版?42图图2-30 易读易读 2022-5-4?网页设计与制作第

16、二版?43图图2-31 易找易找 2022-5-4?网页设计与制作第二版?44n清晰：是指网站的导航要清晰，让人看得清楚，查找清晰：是指网站的导航要清晰，让人看得清楚，查找方便快捷。方便快捷。 n精选：是指内容要精选，页面容量要精选，使浏览者精选：是指内容要精选，页面容量要精选，使浏览者翻开网页的速度要快。从某种角度来讲，页面容量越翻开网页的速度要快。从某种角度来讲，页面容量越小越好，小越好， 2022-5-4?网页设计与制作第二版?45图图2-32 清晰清晰1 2022-5-4?网页设计与制作第二版?46图图2-33 清晰清晰2 2022-5-4?网页设计与制作第二版?47图图2-34 精选精选 2022-5-4?网页设计与制作第二版?482.2.2 2.2.2 网页设计的根本因素网页设计的根本因素 1 1设计网站的标志设计网站的标志LOGOLOGO 2 2设计网站的标准色彩设计网站的标准色彩 3 3设计网站的标准字体设计网站的标准字体 4 4设计网站的宣传标语设计网站的宣传标语 2022-5-4?网页设计与制作第二版?492.3 网页设计步骤网页设计步骤 2.3.1 2.3.1 建站前进行需求分析建站前进行需求分析 2.3.2 2.3.2 建网站时确定主题建网站时确定主题 2.3.3 2.3.3 网页结构仔细规划网页结构仔细规划 2.3.4 2.3.4 网页的版面布局合