第第第第2 2章章章章 网页设计基础网页设计基础网页设计基础网页设计基础 2.1 网页设计基础网页设计基础 2.1.1 2.1.1 网页风格网页风格 n网站的风格可以从以下几个方向来探讨网站的风格可以从以下几个方向来探讨p 色彩的搭配：网页的底色、文字字型、图片的色系、颜色等。色彩的搭配：网页的底色、文字字型、图片的色系、颜色等。p 版面的排列：表格、框架的应用，文字缩排、段落等。版面的排列：表格、框架的应用，文字缩排、段落等。p 导航的设计：导航窗口效果、导航效时等。导航的设计：导航窗口效果、导航效时等。p 程序的选择：网页制作程序，如程序的选择：网页制作程序，如ASP，PHP，XML，CGI等。等。p 特效的应用：让网页看起来生动活泼的各种特殊应用，如特效的应用：让网页看起来生动活泼的各种特殊应用，如Flash、Java script，Java applets，DHTML等。等。p 架构的层次：目录的规划、层次的架构等。架构的层次：目录的规划、层次的架构等。p 内容的选取：网站主题、整体实用性、文件关联性、内容切内容的选取：网站主题、整体实用性、文件关联性、内容切合度等。合度等。p 发展与规划：对于网站的未来规划，网站整体内容发展方向发展与规划：对于网站的未来规划，网站整体内容发展方向等。等。 2024/9/182网页设计与制作（第二版）2.1.2 2.1.2 网页版面网页版面 经常用到的版面布局形式有：经常用到的版面布局形式有：“T”T”结构布局、结构布局、“口口”型型布局、布局、“田田”型布局、型布局、“三三”型布局、对称对比布局、型布局、对称对比布局、POPPOP布局等。布局等。 2024/9/183网页设计与制作（第二版）图图2-1 T型布局型布局 2024/9/184网页设计与制作（第二版）图图2-2 “口口”型布局型布局 2024/9/185网页设计与制作（第二版）图图2-3 “田田”型布局型布局 2024/9/186网页设计与制作（第二版）图图2-4 “三三”型布局型布局 2024/9/187网页设计与制作（第二版）图图2-5 POP布局布局 2024/9/188网页设计与制作（第二版）v网页作为一种版面，既有文字，又有图片。文字网页作为一种版面，既有文字，又有图片。文字有大小区别，文档有标题和正文之分，图片也有有大小区别，文档有标题和正文之分，图片也有大小和横竖之别。网页版面应该具有如下特点。大小和横竖之别。网页版面应该具有如下特点。 （1 1）主次分明，中心突出。）主次分明，中心突出。 （2 2）大小搭配，相互呼应。）大小搭配，相互呼应。 （3 3）图文并茂，相得益彰。）图文并茂，相得益彰。 （4 4）动静有度，平衡对称。）动静有度，平衡对称。 2024/9/189网页设计与制作（第二版）图图2-6 整体风格简洁实用，中心突出整体风格简洁实用，中心突出 2024/9/1810网页设计与制作（第二版）图图2-7 大图小图相互呼应大图小图相互呼应 2024/9/1811网页设计与制作（第二版）图图2-8 图文并茂图文并茂 2024/9/1812网页设计与制作（第二版）图图2-9 动静结合动静结合 2024/9/1813网页设计与制作（第二版）图图2-10 对称的示例对称的示例 2024/9/1814网页设计与制作（第二版）图图2-11 布局对称布局对称 2024/9/1815网页设计与制作（第二版）图图2-12 典型辐射平衡典型辐射平衡 2024/9/1816网页设计与制作（第二版）2.1.3 网页构图网页构图 网页设计要有内容、形式、功能以及目标。点、线、网页设计要有内容、形式、功能以及目标。点、线、面是视觉语言中的基本元素，进行网页设计时应面是视觉语言中的基本元素，进行网页设计时应使用点、线、面的互相穿插，互相衬托构成最佳使用点、线、面的互相穿插，互相衬托构成最佳的页面效果，组合成各种各样的视觉形象，千变的页面效果，组合成各种各样的视觉形象，千变万化的视觉空间，表达完美的设计意境。万化的视觉空间，表达完美的设计意境。 （1 1）点的应用。）点的应用。 （2 2）直线的应用。）直线的应用。 （3 3）曲线的应用。）曲线的应用。 （4 4）曲线、直线的综合应用。）曲线、直线的综合应用。 （5 5）面的应用。）面的应用。 2024/9/1817网页设计与制作（第二版）图图2-13 点的应用点的应用 2024/9/1818网页设计与制作（第二版）图图2-14 线的应用线的应用 2024/9/1819网页设计与制作（第二版）图图2-15 曲线的应用曲线的应用 2024/9/1820网页设计与制作（第二版）图图2-16 曲线、直线的综合应用曲线、直线的综合应用 2024/9/1821网页设计与制作（第二版）图图2-17 点、线的综合应用点、线的综合应用 2024/9/1822网页设计与制作（第二版）图图2-18 IBM网站网站 2024/9/1823网页设计与制作（第二版）图图2-19 面的示例面的示例 2024/9/1824网页设计与制作（第二版）图图2-20 线、面的示例线、面的示例 2024/9/1825网页设计与制作（第二版）图图2-21 点、线、面的结合示例点、线、面的结合示例 2024/9/1826网页设计与制作（第二版）2.1.4 网页色彩网页色彩 v色彩是人的视觉最敏感的东西，它是美丽而丰富色彩是人的视觉最敏感的东西，它是美丽而丰富的，能唤起人类的心灵感知。网页的色彩处理得的，能唤起人类的心灵感知。网页的色彩处理得好，可以锦上添花，达到事半功倍的效果。为了好，可以锦上添花，达到事半功倍的效果。为了把握好色彩的应用，我们应首先了解一下色彩的把握好色彩的应用，我们应首先了解一下色彩的一些基本概念。一些基本概念。 v计算机屏幕是由电子枪投射到屏幕来产生色光。计算机屏幕是由电子枪投射到屏幕来产生色光。电子枪射到屏幕可以产生电子枪射到屏幕可以产生3 3种颜色：红、绿、蓝。种颜色：红、绿、蓝。我们把这我们把这3 3种色称为原色，常称为三原色。由这种色称为原色，常称为三原色。由这3 3种色光，计算机屏幕可制作出完整的光谱。这也种色光，计算机屏幕可制作出完整的光谱。这也就是就是RGBRGB色系。色系。 2024/9/1827网页设计与制作（第二版）v以上颜色可总结为如下色调。以上颜色可总结为如下色调。 （1 1）暖色调：即红色、橙色、黄色、褐色等色彩的搭配。）暖色调：即红色、橙色、黄色、褐色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。氛围。（2 2）冷色调：即青色、绿色、紫色等色彩的搭配。这种）冷色调：即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。色调的运用，可使主页呈现宁静、清凉、高雅的氛围。（3 3）对比色调：即把色调完全相反的色彩搭配在同一个）对比色调：即把色调完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色空间里。例如：红与绿、黄与紫、橙与蓝等。这种色调的搭配，可以产生强烈的视觉效果，给人亮丽、鲜调的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。最后，还要考虑页面的底色（背景艳、喜庆的感觉。最后，还要考虑页面的底色（背景色）的深、浅，这里借用摄影中的一个术语，就是色）的深、浅，这里借用摄影中的一个术语，就是“高调高调”和和“低调低调”，底色浅的称为低调。，底色浅的称为低调。 2024/9/1828网页设计与制作（第二版）2.1.5 网页配色技巧网页配色技巧 v根据网站所要传达的为信息和品牌选择颜色。根据网站所要传达的为信息和品牌选择颜色。 v 要根据访问对象选择颜色。要根据访问对象选择颜色。 v不要使用过多的颜色。不要使用过多的颜色。 v在阅读的部分使用对比色。在阅读的部分使用对比色。 v用灰阶来测试对比。用灰阶来测试对比。 v选择颜色要注意时效性。选择颜色要注意时效性。 v选择色盘时应考虑功能性的颜色。选择色盘时应考虑功能性的颜色。 v注意网站色差问题。注意网站色差问题。 2024/9/1829网页设计与制作（第二版）图图2-22 圣诞节网站圣诞节网站 2024/9/1830网页设计与制作（第二版）图图2-23 色彩实例色彩实例 2024/9/1831网页设计与制作（第二版）v在网页的色彩应用中应注意如下问题。在网页的色彩应用中应注意如下问题。 （1 1）运用相同色系色彩。）运用相同色系色彩。 （2 2）运用对比色或互补色。）运用对比色或互补色。 （3 3）使用过渡色。）使用过渡色。 2024/9/1832网页设计与制作（第二版）图图2-24 黑白对比黑白对比 2024/9/1833网页设计与制作（第二版）2.1.6 2.1.6 网页图像网页图像 2024/9/1834网页设计与制作（第二版）2.2 网页设计原则网页设计原则 2.2.1 2.2.1 网页设计的基本原则网页设计的基本原则 网页设计是有原则的，无论用什么样的方法，都要网页设计是有原则的，无论用什么样的方法，都要遵循一些基本原则，这些基本原则是：统一、连遵循一些基本原则，这些基本原则是：统一、连贯、分割、对比、和谐、易读、易找、清晰、精贯、分割、对比、和谐、易读、易找、清晰、精选。选。 n统一：是指设计的整体性、一致性。统一：是指设计的整体性、一致性。 n连贯：是指要注意页面的相互关系。连贯：是指要注意页面的相互关系。 n分割：是指将页面分成若干小块，小块之间有视觉上分割：是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。分割是对网页的的不同，这样可以使观者一目了然。分割是对网页的页面内容分类归档。页面内容分类归档。 2024/9/1835网页设计与制作（第二版）图图2-25 统一的示例统一的示例 2024/9/1836网页设计与制作（第二版）图图2-26 连贯的示例连贯的示例 2024/9/1837网页设计与制作（第二版）图图2-27 分割分割 2024/9/1838网页设计与制作（第二版）n对比：是指通过矛盾和冲突，使设计更加富有生气。对比：是指通过矛盾和冲突，使设计更加富有生气。其常用的方法有：多与少、长与短、粗与细、主与次、其常用的方法有：多与少、长与短、粗与细、主与次、美与丑等。美与丑等。 n 和谐：是指整个页面符合美的法则，浑然一体。网页和谐：是指整个页面符合美的法则，浑然一体。网页的和谐不仅要看其结构形式，而且要看其所形成的视的和谐不仅要看其结构形式，而且要看其所形成的视觉效果能否与人的视觉感受相沟通，产生共鸣。觉效果能否与人的视觉感受相沟通，产生共鸣。 n易读：是指网页让人看起来不费力，视觉效果好，符易读：是指网页让人看起来不费力，视觉效果好，符合大众的阅读习惯。合大众的阅读习惯。 n易找：是指网页的宣传和推广，如索引擎、目录指南、易找：是指网页的宣传和推广，如索引擎、目录指南、导航站点、交换链接等。导航站点、交换链接等。 2024/9/1839网页设计与制作（第二版）2024/9/1840网页设计与制作（第二版）图图2-29 和谐和谐 2024/9/1841网页设计与制作（第二版）图图2-30 易读易读 2024/9/1842网页设计与制作（第二版）图图2-31 易找易找 2024/9/1843网页设计与制作（第二版）n清晰：是指网站的导航要清晰，让人看得清楚，查找清晰：是指网站的导航要清晰，让人看得清楚，查找方便快捷。方便快捷。 n精选：是指内容要精选，页面容量要精选，使浏览者精选：是指内容要精选，页面容量要精选，使浏览者打开网页的速度要快。从某种角度来讲，页面容量越打开网页的速度要快。从某种角度来讲，页面容量越小越好，小越好， 2024/9/1844网页设计与制作（第二版）图图2-32 清晰（清晰（1） 2024/9/1845网页设计与制作（第二版）图图2-33 清晰（清晰（2） 2024/9/1846网页设计与制作（第二版）图图2-34 精选精选 2024/9/1847网页设计与制作（第二版）2.2.2 2.2.2 网页设计的基本因素网页设计的基本因素 （1 1）设计网站的标志（）设计网站的标志（LOGOLOGO） （2 2）设计网站的标准色彩）设计网站的标准色彩 （3 3）设计网站的标准字体）设计网站的标准字体 （4 4）设计网站的宣传标语）设计网站的宣传标语 2024/9/1848网页设计与制作（第二版）2.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 网页的版面布局合理安排网页的版面布局合理安排 1 1网页草图网页草图 2 2粗略布局粗略布局 3 3定案定案 2.3.5 2.3.5 网页的创意设计新颖大方网页的创意设计新颖大方 2.3.6 2.3.6 网页的素材收集全面、具体网页的素材收集全面、具体 2.3.7 2.3.7 选择网页制作工具及语言选择网页制作工具及语言 2024/9/1849网页设计与制作（第二版）2.3.8 2.3.8 网页的制作与测试网页的制作与测试 2.3.9 2.3.9 网页的上传与网页宣传网页的上传与网页宣传 2.3.10 2.3.10 网站的维护与管理网站的维护与管理 2024/9/1850网页设计与制作（第二版）