网页设计与制作(第二版)第一节-网页设计基础课件.ppt

1、第第1节节 网页设计基础网页设计基础 1、网页基本概念、网页基本概念1 1网页：采用了超文本传输协议的文件网页：采用了超文本传输协议的文件 ，每个网页文，每个网页文件都有一个地址（统一资源定位器件都有一个地址（统一资源定位器URLURL）2 2URLURL：通过其在网络上来识别存与存取信息：通过其在网络上来识别存与存取信息3 3超文本传输协议（超文本传输协议（HTTPHTTP）：）：HTTPHTTP是一个用于在客户端是一个用于在客户端和服务器间请求和应答的协议。和服务器间请求和应答的协议。4 4超文本（超文本（HypertextHypertext）：超文本）：超文本(Hypertext)(Hy

2、pertext)是一类电是一类电子储藏文本，其允许子储藏文本，其允许“点进点进”通过编码链接通过编码链接(超链接超链接)接入到其它的文本。接入到其它的文本。5 5浏览器浏览器 ：用于浏览访问网页的工具软件。：用于浏览访问网页的工具软件。6 6WebWeb服务器服务器 ：用于存放网页文件的服务器。：用于存放网页文件的服务器。、网站与网页网站与网页n通常我们看到的网页，都是以通常我们看到的网页，都是以.html.html为后缀的文件，俗为后缀的文件，俗称称HTMLHTML文件。不同的后缀，分别代表不同类型的网页文件。不同的后缀，分别代表不同类型的网页文件，例如以文件，例如以.cgicgi，.asp

3、.asp，.phpphp，.jspjsp为后缀名。为后缀名。n网站是指存放在网络服务器上的完整信息的集合体，网站是指存放在网络服务器上的完整信息的集合体，它包含一个或多个网页，这些页以超链接方式连接在它包含一个或多个网页，这些页以超链接方式连接在一起，形成一个整体，描述一组完整的信息。一起，形成一个整体，描述一组完整的信息。n网站主要由主机、域名、网页等组成。建设网站，就网站主要由主机、域名、网页等组成。建设网站，就是在自己的计算机上安装是在自己的计算机上安装WebWeb服务器，设计制作自己的服务器，设计制作自己的网页并且发布出去。网页并且发布出去。3、网页风格、网页风格n 网站的风格可以从以

4、下几个方向来探讨网站的风格可以从以下几个方向来探讨p 色彩的搭配：网页的底色、文字字型、图片的色系、颜色等。色彩的搭配：网页的底色、文字字型、图片的色系、颜色等。p 版面的排列：表格、框架的应用，文字缩排、段落等。版面的排列：表格、框架的应用，文字缩排、段落等。p 导航的设计：导航窗口效果、导航效时等。导航的设计：导航窗口效果、导航效时等。p 程序的选择：网页制作程序，如程序的选择：网页制作程序，如ASP，PHP，XML，CGI等。等。p 特效的应用：让网页看起来生动活泼的各种特殊应用，如特效的应用：让网页看起来生动活泼的各种特殊应用，如Flash、Java script，Java apple

5、ts，DHTML等。等。p 架构的层次：目录的规划、层次的架构等。架构的层次：目录的规划、层次的架构等。p 内容的选取：网站主题、整体实用性、文件关联性、内容切内容的选取：网站主题、整体实用性、文件关联性、内容切合度等。合度等。p 发展与规划：对于网站的未来规划，网站整体内容发展方向发展与规划：对于网站的未来规划，网站整体内容发展方向等。等。、常见网页版面格式、常见网页版面格式经常用到的版面布局形式有：经常用到的版面布局形式有：“T”T”结构布局、结构布局、“口口”型型布局、布局、“田田”型布局、型布局、“三三”型布局、对称对比布局、型布局、对称对比布局、POPPOP布局等。布局等。T型布局型

6、布局“口口”型布局型布局“田田”型布局型布局“三三”型布局型布局 POP布局布局 v网页作为一种版面，既有文字，又有图片。文字网页作为一种版面，既有文字，又有图片。文字有大小区别，文档有标题和正文之分，图片也有有大小区别，文档有标题和正文之分，图片也有大小和横竖之别。网页版面应该具有如下特点。大小和横竖之别。网页版面应该具有如下特点。（1 1）主次分明，中心突出。）主次分明，中心突出。（2 2）大小搭配，相互呼应。）大小搭配，相互呼应。（3 3）图文并茂，相得益彰。）图文并茂，相得益彰。（4 4）动静有度，平衡对称。）动静有度，平衡对称。整体风格简洁实用，中心突出整体风格简洁实用，中心突出 大

7、图小图相互呼应大图小图相互呼应 图文并茂图文并茂 动静结合动静结合 对称的示例对称的示例 布局对称布局对称 典型辐射平衡典型辐射平衡 网页构图网页构图 网页设计要有内容、形式、功能以及目标。点、线、网页设计要有内容、形式、功能以及目标。点、线、面是视觉语言中的基本元素，进行网页设计时应面是视觉语言中的基本元素，进行网页设计时应使用点、线、面的互相穿插，互相衬托构成最佳使用点、线、面的互相穿插，互相衬托构成最佳的页面效果，组合成各种各样的视觉形象，千变的页面效果，组合成各种各样的视觉形象，千变万化的视觉空间，表达完美的设计意境。万化的视觉空间，表达完美的设计意境。（1 1）点的应用。）点的应用。

8、（2 2）直线的应用。）直线的应用。（3 3）曲线的应用。）曲线的应用。（4 4）曲线、直线的综合应用。）曲线、直线的综合应用。（5 5）面的应用。）面的应用。点的应用点的应用 线的应用线的应用 曲线的应用曲线的应用 曲线、直线的综合应用曲线、直线的综合应用 点、线的综合应用点、线的综合应用 IBM网站网站 面的示例面的示例 线、面的示例线、面的示例 点、线、面的结合示例点、线、面的结合示例 网页色彩网页色彩 v色彩是人的视觉最敏感的东西，它是美丽而丰富色彩是人的视觉最敏感的东西，它是美丽而丰富的，能唤起人类的心灵感知。网页的色彩处理得的，能唤起人类的心灵感知。网页的色彩处理得好，可以锦上添花

9、，达到事半功倍的效果。为了好，可以锦上添花，达到事半功倍的效果。为了把握好色彩的应用，我们应首先了解一下色彩的把握好色彩的应用，我们应首先了解一下色彩的一些基本概念。一些基本概念。v计算机屏幕是由电子枪投射到屏幕来产生色光。计算机屏幕是由电子枪投射到屏幕来产生色光。电子枪射到屏幕可以产生电子枪射到屏幕可以产生3 3种颜色：红、绿、蓝。种颜色：红、绿、蓝。我们把这我们把这3 3种色称为原色，常称为三原色。由这种色称为原色，常称为三原色。由这3 3种色光，计算机屏幕可制作出完整的光谱。这也种色光，计算机屏幕可制作出完整的光谱。这也就是就是RGBRGB色系。色系。v以上颜色可总结为如下色调。以上颜色

10、可总结为如下色调。（1 1）暖色调：即红色、橙色、黄色、褐色等色彩的搭配。）暖色调：即红色、橙色、黄色、褐色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。氛围。（2 2）冷色调：即青色、绿色、紫色等色彩的搭配。这种）冷色调：即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。色调的运用，可使主页呈现宁静、清凉、高雅的氛围。（3 3）对比色调：即把色调完全相反的色彩搭配在同一个）对比色调：即把色调完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色空间里。例如：红与绿、黄与紫、橙

11、与蓝等。这种色调的搭配，可以产生强烈的视觉效果，给人亮丽、鲜调的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。最后，还要考虑页面的底色（背景艳、喜庆的感觉。最后，还要考虑页面的底色（背景色）的深、浅，这里借用摄影中的一个术语，就是色）的深、浅，这里借用摄影中的一个术语，就是“高调高调”和和“低调低调”，底色浅的称为低调。，底色浅的称为低调。网页配色技巧网页配色技巧 v根据网站所要传达的为信息和品牌选择颜色。根据网站所要传达的为信息和品牌选择颜色。v 要根据访问对象选择颜色。要根据访问对象选择颜色。v不要使用过多的颜色。不要使用过多的颜色。v在阅读的部分使用对比色。在阅读的部分使用对

12、比色。v用灰阶来测试对比。用灰阶来测试对比。v选择颜色要注意时效性。选择颜色要注意时效性。v选择色盘时应考虑功能性的颜色。选择色盘时应考虑功能性的颜色。v注意网站色差问题。注意网站色差问题。圣诞节网站圣诞节网站 色彩实例色彩实例 v在网页的色彩应用中应注意如下问题。在网页的色彩应用中应注意如下问题。（1 1）运用相同色系色彩。）运用相同色系色彩。（2 2）运用对比色或互补色。）运用对比色或互补色。（3 3）使用过渡色。）使用过渡色。黑白对比黑白对比、网页设计原则、网页设计原则 网页设计的基本原则网页设计的基本原则 网页设计是有原则的，无论用什么样的方法，都要网页设计是有原则的，无论用什么样的方

13、法，都要遵循一些基本原则，这些基本原则是：统一、连遵循一些基本原则，这些基本原则是：统一、连贯、分割、对比、和谐、易读、易找、清晰、精贯、分割、对比、和谐、易读、易找、清晰、精选。选。n统一：是指设计的整体性、一致性。统一：是指设计的整体性、一致性。n连贯：是指要注意页面的相互关系。连贯：是指要注意页面的相互关系。n分割：是指将页面分成若干小块，小块之间有视觉上分割：是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。分割是对网页的的不同，这样可以使观者一目了然。分割是对网页的页面内容分类归档。页面内容分类归档。统一的示例统一的示例 连贯的示例连贯的示例 分割分割 n对比：

14、是指通过矛盾和冲突，使设计更加富有生气。对比：是指通过矛盾和冲突，使设计更加富有生气。其常用的方法有：多与少、长与短、粗与细、主与次、其常用的方法有：多与少、长与短、粗与细、主与次、美与丑等。美与丑等。n 和谐：是指整个页面符合美的法则，浑然一体。网页和谐：是指整个页面符合美的法则，浑然一体。网页的和谐不仅要看其结构形式，而且要看其所形成的视的和谐不仅要看其结构形式，而且要看其所形成的视觉效果能否与人的视觉感受相沟通，产生共鸣。觉效果能否与人的视觉感受相沟通，产生共鸣。n易读：是指网页让人看起来不费力，视觉效果好，符易读：是指网页让人看起来不费力，视觉效果好，符合大众的阅读习惯。合大众的阅读习

15、惯。n易找：是指网页的宣传和推广，如索引擎、目录指南、易找：是指网页的宣传和推广，如索引擎、目录指南、导航站点、交换链接等。导航站点、交换链接等。和谐和谐 易读易读 易找易找 n清晰：是指网站的导航要清晰，让人看得清楚，查找清晰：是指网站的导航要清晰，让人看得清楚，查找方便快捷。方便快捷。n精选：是指内容要精选，页面容量要精选，使浏览者精选：是指内容要精选，页面容量要精选，使浏览者打开网页的速度要快。从某种角度来讲，页面容量越打开网页的速度要快。从某种角度来讲，页面容量越小越好，小越好，清晰（清晰（1）清晰（清晰（2）精选精选 网页设计的基本因素网页设计的基本因素 （1 1）设计网站的标志（）

16、设计网站的标志（LOGOLOGO）（2 2）设计网站的标准色彩）设计网站的标准色彩 （3 3）设计网站的标准字体）设计网站的标准字体 （4 4）设计网站的宣传标语）设计网站的宣传标语 、网页设计步骤、网页设计步骤 1 1 建站前进行需求分析建站前进行需求分析 2 2 建网站时确定主题建网站时确定主题 3 3 网页结构仔细规划网页结构仔细规划 4 4 网页的版面布局合理安排网页的版面布局合理安排 1 1网页草图网页草图 2 2粗略布局粗略布局 3 3定案定案 5 5 网页的创意设计新颖大方网页的创意设计新颖大方 6 6 网页的素材收集全面、具体网页的素材收集全面、具体 7 7选择网页制作工具及语言选择网页制作工具及语言8 8 网页的制作与测试网页的制作与测试 9 9 网页的上传与网页宣传网页的上传与网页宣传 10 10 网站的维护与管理网站的维护与管理