网页制作与网站建设完全学习手册(txt+pdf+epub+mobi电子书下载)


发布时间:2020-08-20 18:52:51

点击下载

作者:徐曦

出版社:清华大学出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

网页制作与网站建设完全学习手册

网页制作与网站建设完全学习手册试读:

前言

随着网络信息技术的广泛应用,互联网作为重要的媒体使全球信息共享成为现实,它正逐渐改变着人们的生活和工作方式。面对扑面而来的网络浪潮,个人、企业等纷纷建立自己的网站,利用网站来宣传自己,提高知名度,寻找新的商机。同时,网页设计行业也迎来了更大的机遇,需要大量设计人才。

制作一个网站需要很多技术,包括图像设计和处理、网页动画的制作和网页版面的布局编辑等。随着网页制作技术的不断发展和完善,产生了众多网页制作与网站建设软件。但是目前使用最多的是Photoshop、Dreamweaver、Flash这3个软件,这3个软件的组合能高效地实现网页的各种功能,所以称这3个软件的组合为黄金搭档。它们已经成为网页制作的梦幻工具组合,以其强大的功能和易学易用的特性,赢得了广大网页制作与网站建设人员的青睐。本书主要内容

本书以目前最受大众欢迎的Dreamweaver、Flash、Photoshop软件的CS5版本为工具,详细介绍了网页设计与网页制作的原理和常用技巧方法。全书共分22章,主要包括以下部分:

第1~11章为Dreamweaver CS5网页制作篇,主要内容包括网页制作入门基础、Dreamweaver CS5创建基本文本网页、使用图像和多媒体制作丰富动感的网页、创建网页链接、使用表格和框架排版布局网页、使用DIV和CSS美化布局网页、使用模板和库提高网页制作效率、利用行为和脚本制作动感特效网页、设计动态数据库网页等。

第12~16章为Flash CS5网页动画设计篇,主要包括Flash CS5网站动画设计基础、绘制图形和编辑对象、使用元件、实例和库、创建基本网页动画、制作交互动画。

第17~19章为Photoshop CS5网页图像设计篇,主要内容包括使用Photoshop CS5绘制图像、网页切片输出与动画制作、设计网页中的图像。

第20章为HTML 5与CSS 3部分,讲述了HTML 5的特点、HTML 5的基本布局、CSS 3的发展历史、CSS 3新增特性、CSS3的使用实例。

第21~22章为综合实例部分,从综合运用方面讲述了企业网站和购物网站的建设全过程。第1章网页制作与网站建设基础

为了能够使网页初学者对网页制作有个总体的认识,在创建网页前,介绍网页制作的基础知识。本章首先介绍网页的基本知识,接着介绍网页的基本构成元素,最后简单介绍网页制作常用工具Dreamweaver、Flash和Photoshop。通过本章的学习,可以为后面制作更复杂的网页打下良好的基础。

本章重点◎网页制作基础◎网站开发常用语言◎网站的类型与特点◎网站维护◎常用网页制作软件◎网页色彩搭配知识◎网站建设流程概述◎网站的推广1.1 网页制作基础

在学习网页制作之前,先来了解一下网页中的基本概念。1.1.1 什么是网页

网页又称HTML文件,是一种可以在WWW上传输,能被浏览器认识和翻译,并用页面形式显示出来的文件。网页分为静态网页和动态网页。

静态网页是网站建设初期经常采用的一种形式。网站建设者把内容设计成静态网页,访问者只能被动地浏览网站建设者提供的网页内容。如图1-1所示为静态网页,用于展示内容。图1-1 静态的内容展示网页

静态网页特点如下。● 网页内容不会发生变化,除非网页设计者修改了网页的内容。● 不能和用户进行交互。信息流向是单向的,即从服务器到浏览器。

服务器不能根据用户的选择调整返回更新的内容。

所谓动态网页是指网页文件里包含了程序代码,通过后台数据库与Web服务器的信息交互,由后台数据库提供实时数据更新和数据查询服务。这种网页的后缀名称一般根据不同的程序设计语言而不同,常见的有.asp、.jsp、.php、.perl、.cgi等。动态网页能够根据不同时间和不同访问者而显示不同内容。如常见的新闻发布系统、聊天系统和购物系统通常用动态网页实现。如图1-2所示为动态网页。图1-2 动态网页

动态网页制作比较复杂,需要用到ASP、PHP、JSP和ASP.NET等专门的动态网页设计语言。动态网页的一般特点如下。● 动态网页以数据库技术为基础,可以大大降低网站维护的工作

量。● 采用动态网页技术的网站可以实现更多的功能,如用户注册、用

户登录、搜索查询、用户管理、订单管理等。● 动态网页并不是独立存在于服务器上的网页文件,只有当用户请

求时服务器才返回一个完整的网页。1.1.2 Web标准的概念

Web标准是由W3C和其他标准化组织制定的一套规范集合,Web标准的目的在于创建一个统一的用于Web表现层的技术标准,以便于通过不同浏览器或终端设备向最终用户展示信息内容。

Web标准由一系列规范组成,目前的Web标准主要由3大部分组成:结构(Structure)、表现(Presentation)、行为(Behavior)。真正符合Web标准的网页设计是指能够灵活使用Web标准对Web内容进行结构、表现与行为的分离。1. 结构(Structure)

结构对网页中用到的信息进行分类与整理。在结构中用到的技术主要包括HTML、XML和XHTML。2. 表现(Presentation)

表现用于对信息进行版式、颜色、大小等形式控制。在表现中用到的技术主要是CSS层叠样式表。3. 行为(Behavior)

行为是指文档内部的模型定义及交互行为的编写,用于编写交互式的文档。在行为中用到的技术主要包括DOM和ECMAScript。

● DOM(Document Object Model)文档对象模型

DOM是浏览器与内容结构之间的沟通的接口,读者可以通过它访问页面上的标准组件。

● ECMAScript脚本语言

ECMAScript是标准脚本语言,用于实现具体界面上对象的交互操作。1.1.3 网页设计师应该具备的素养

网页设计是一门新兴行业,在网络产生以后应运而生。网页如门面,小到个人,大到大公司、政府部门以及国际组织等在网络上无不以网页作为自己的门面。当单击进入网站时,首先映入眼帘的是该网页的界面设计,如内容的介绍、按钮的摆放、文字的组合、色彩的应用等。这一切都是网页设计的范畴,都是网页设计师的工作。作为一个网页设计师应该具备哪些素养呢?(1)作为一名网页设计师,首先要具备较强的审美能力和美术功底。

如果没有,那么一定想办法加强这两个方面的能力。如果确实没办法提高这两方面的能力,那就很难成为一名优秀网页设计师。(2)优秀网页设计师应该是合理地利用技术,在尽量不影响美观的条件下,找到一个结合点做出美观而又实用的网页。(3)作为一名优秀设计师应该时时关注软件的新的发展,适应新的功能,以提高工作的效率,很多设计师只重视网页制作软件的使用,而忽视一些内部技术方面的知识。这也不行的,例如,如果不掌握ASP技术,网页设计师的知识是不完善的,就不能做一些动态系统,还要掌握HTML、JavaScript和CSS等技术。(4)作为合格的网页设计师,一定的文化素质是不可少的。好的文案,不仅仅让人对你所做的网页回味无穷,也可使自己的网页平添几分艺术特色。文化素质不仅仅包括文学修养,还有音乐和绘画等方面的修养。只有具备一定的这些方面的修养,才能够使自己网页达到一定的水准,才能够让浏览者欣赏到好的网页制作。(5)作为一名从事网页设计的人来说,经常上网去看别人怎么做的,吸收一些好的经验,杜绝一些常犯的毛病。了解到网页风格的发展,跟上时代潮流。1.2 常用网页制作软件

如果你对网页设计已经有了一定的基础,对HTML语言又有一定的了解,那么可以选择下面的几种软件来设计网页,它们一定会为你的网页添色不少。1.2.1 网页编辑排版软件Dreamweaver CS5

近年来,随着网络信息技术的广泛应用,互联网正逐步改变着人们的生活和工作方式。越来越多的个人、企业纷纷建立自己的网站,利用网站来宣传和推广自己。这样,就出现了很多的网页制作软件,如Adobe公司的Dreamweaver无疑是其中使用最为广泛的一个,它以强大的功能和友好的操作界面受到了广大网页设计者的欢迎,成为设计者制作网页的首选软件。特别是最新版本的Dreamweaver CS5软件新增了许多功能,可以帮助用户在更短的时间内完成更多的工作。如图1-3所示为网页制作软件Dreamweaver CS5的操作界面。图1-3 网页制作软件Dreamweaver CS51.2.2 网页动画制作软件Flash CS5

Flash是一款非常流行的平面动画制作软件,被广泛应用于网站制作、游戏制作、影视广告、电子贺卡、电子杂志、MV制作等领域。它的优点是体积小,可边下载边播放,这样就避免了用户长时间的等待。用户可以用其生成动画,还可在网页中加入声音,就能生成多媒体的图形和界面。Flash CS5 Professional是目前Flash的新版本,如图1-4所示为网页动画制作软件Flash CS5的操作界面。图1-4 网页动画制作软件Flash CS51.2.3 网页图像设计软件Photoshop CS5

Photoshop是被业界公认的图形图像处理专家,也是全球性的专业图像编辑行业标准。Photoshop CS5是Adobe公司的图像编辑软件,它提供了高效的图像编辑和处理功能、人性化的操作界面,深受美术设计人员的青睐。Photoshop CS5集图像设计、合成以及高品质输出等功能于一身,广泛应用于平面设计和网页美工、数码照片后期处理、建筑效果后期处理等诸多领域。该软件在网页前期设计中,无论是色彩的应用、版面的设计、文字特效、按钮的制作以及网页动画,均占有重要地位。如图1-5所示为网页图像设计软件Photoshop CS5的操作界面。图1-5 网页图像设计软件Photoshop CS51.3 网站开发常用语言

仅仅学会了网页制作工具,是不能制作出动态网站的,还需要了解网站开发语言,如网页标记语言HTML、网页脚本语言JavaScript和VBScript、动态网页编程语言ASP等。1.3.1 网页标记语言HTML

网页文档主要是由HTML构成。HTML全名是Hyper Text Markup Language,即超文本标记语言,是用来描述WWW上超文本文件的语言。用它编写的文件扩展名是.html或.htm。

HTML不是一种编程语言,而是一种页面描述性标记语言。它通过各种标记描述不同的内容,说明段落、标题、图像、字体等在浏览器中的显示效果。浏览器打开HTML文件时,将依据HTML标记去显示内容。

HTML能够将Internet上不同服务器上的文件连接起来,可以将文字、声音、图像、动画、视频等媒体有机组织起来,展现给用户五彩缤纷的画面。此外,它还可以接受用户信息,与数据库相连,实现用户的查询请求等交互功能。

HTML的任何标记都由“<”和“>”围起来,如、。在起始标记的标记名前加上符号“/”便是其终止标记,如,夹在起始标记和终止标记之间的内容受标记的控制,例如幸福永远,夹在标记i之间的“幸福永远”将受标记i的控制。

下面讲述HTML的基本结构。

HTML标记

标记用于HTML文档的最前边,用来标识HTML文档的开始。而标记恰恰相反,它放在HTML文档的最后边,用来标识HTML文档的结束,两个标记必须一起使用。

Head标记

和构成HTML文档的开头部分,在此标记对之间可以使用等标记对,这些标记对都是描述HTML文档相关信息的标记对,标记对之间的内容不会在浏览器的框内显示出来,两个标记必须一起使用。

Body标记

是HTML文档的主体部分,在此标记对之间可包含


等众多的标记,它们所定义的文本、图像等将会在浏览器内显示出来,两个标记必须一起使用。

Title标记

使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息,而这些信息一般是网页的“标题”,要将网页的标题显示到浏览器的顶部其实很简单,只要在标记对之间加入要显示的文本即可。1.3.2 网页样式表CSS

CSS是英语Cascading Style Sheets(层叠样式表)的缩写,它可以与HTML或XHTML超文本标记语言配合来定义网页的外观。

当熟练掌握了Dreamweaver的基本功能后,可能会发现制作的网页有些问题,例如文字不能添加在图片上,段落之间不能设置行距。有时即使懂得一些HTML标记,但是还不能随意改变网页元素的外观,无法随心所欲的编排网页。因此W3C协会颁布了一套CSS语法,用来扩展HTML语法的功能。CSS是网页设计的一个突破,它解决了网页界面排版的难题。可以这么说,HTML的标记主要是定义网页的内容,而CSS决定这些网页内容如何显示。

在网页设计中通常需要统一网页的整体风格,统一的风格大部分涉及到网页中文字属性、网页背景色以及链接文字属性等,如果我们应用CSS来控制这些属性,会大大提高网页设计速度,更加统一网页总体效果。例如图1-6和图1-7所示的网页分别为使用CSS前后的效果。图1-6 使用CSS前图1-7 使用CSS后1.3.3 网页脚本语言JavaScript

使用JavaScript等简单易懂的脚本语言,结合HTML代码可快速地完成网站的应用程序。脚本语言(JavaScript,VBScript等)介于HTML和C、C++、Java、C#等编程语言之间。脚本是使用一种特定的描述性语言,依据一定的格式编写的可执行文件,又称作宏或批处理文件。脚本通常可以由应用程序临时调用并执行。各类脚本目前被广泛地应用于网页设计中,因为脚本不仅可以减小网页的规模和提高网页浏览速度,而且可以丰富网页的表现,如动画、声音等。

脚本同VB、C语言的区别主要如下。● 脚本语法比较简单,容易掌握。● 脚本与应用程序密切相关,所以包括相对应用程序自身的功能。● 脚本一般不具备通用性,所能处理的问题范围有限。● 脚本多为解释执行。

下面通过一个简单的实例来熟悉JavaScript的基本使用方法。JavaScript

在代码中加粗部分的代码,就是JavaScript脚本的具体应用,如图1-8所示。图1-8 JavaScript脚本

以上代码是简单的JavaScript脚本,它分为3部分,第一部分是script language="javascript",它告诉浏览器“下面的是JavaScript脚本”。开头使用,它用来告诉浏览器JavaScript脚本到此结束。1.3.4 动态网页编程语言ASP

ASP是Active Server Page的缩写,意为“活动服务器网页”。ASP是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其他程序进行交互,是一种简单、方便的编程工具。ASP的网页文件的格式是.asp,常用于各种动态网站中。ASP是一种服务器端脚本编写环境,可以用来创建和运行动态网页或Web应用程序。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。利用ASP可以向网页中添加交互式内容,也可以创建使用HTML网页作为用户界面的Web应用程序。如图1-9所示为动态ASP网页的工作原理。图1-9 动态网页的工作原理图

与HTML相比,ASP网页具有以下特点。(1)利用ASP可以突破静态网页的一些功能限制,实现动态网页技术。(2)ASP文件是包含在HTML代码所组成的文件中,易于修改和测试。(3)服务器上的ASP解释程序会在服务器端制定ASP程序,并将结果以HTML格式传送到客户端浏览器上,因此使用各种浏览器都可以正常浏览ASP所产生的网页。(4)ASP提供了一些内置对象,使用这些对象可以使服务器端脚本功能更强。例如可以从Web浏览器中获取用户通过HTML表单提交的信息,并在脚本中对这些信息进行处理,然后向Web浏览器发送信息。(5)ASP可以使用服务器端ActiveX组件来执行各种各样的任务,例如访问数据库、收发E-mail或访问文件系统等。(6)由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器,因此用户不会看到ASP所编写的原始程序代码,可防止ASP程序代码被窃取。1.4 网页色彩搭配知识

打开一个网站,给用户留下的第一印象既不是网站丰富的内容,也不是网站合理的版面布局,而是网站的色彩。网页的色彩处理得好,可以锦上添花,达到事半功倍的效果。1.4.1 网页配色基础

为了能更好地应用色彩来设计网页,先来了解一下色彩的一些基本概念。自然界中色彩五颜六色、千变万化,但是最基本的有3种(红、黄、蓝),其他的色彩都可以由这3种色彩调和而成,所以称这3种色彩为“三原色”。平时所看到的白色光,经过分析可以在色带上看到红、橙、黄、绿、青、蓝、紫等7种颜色,各颜色间自然过渡。其中,红、黄、蓝是三原色,三原色通过不同比例的混合可以得到各种颜色。

现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其他的色彩都属于彩色。任何一种彩色具备3个特征:色相,明度,纯度。而非彩色只有明度属性。● 色相:指的是色彩的名称。色相是色彩最基本的特征,是一种色

彩区别于另一种色彩的最主要的因素。如紫色、绿色、黄色等都

代表了不同的色相。同一色相的色彩,调整一下亮度或者纯度,

就很容易搭配,如深绿、暗绿、草绿。

最初的基本色相为:红、橙、黄、绿、蓝、紫。在各色中间加插一两个中间色,其头尾色相,按光谱顺序为:红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、紫、红紫——12基本色相。如图1-10所示。图1-10 12基本色相● 明度:也叫亮度,指的是色彩的明暗程度,明度越大,色彩越亮。

如一些购物、儿童类网站,用的是一些鲜亮的颜色,让人感觉绚

丽多姿,生气勃勃。明度越低,颜色越暗,主要用于一些游戏类

网站,充满神秘感;一些个人站长为了体现自身的个性,也会用

一些暗色调来表达个人孤僻,或者忧郁等性格。如图1-11所示为

色彩的明度变化。图1-11 色彩的明度变化● 纯度:表示色彩的鲜浊或纯净程度,纯度是表明一种颜色中是否

含有白或黑的成分。假如某色不含有白或黑的成分,便是纯色,

其纯度最高;如果含有越多白或黑的成分,其纯度会下降,如图

1-12所示。

图1-12 色彩的纯度变化● 相近色:色环中相邻的3种颜色。相近色的搭配给人的视觉效果

很舒适,很自然,所以相近色在网站设计中极为常用。如图1-13

中的深蓝色、浅蓝色和紫色。图1-13 相近色● 互补色:色环中相对的两种色彩,如图1-14中的亮绿色跟紫色,

红色跟绿色,蓝色和橙色等。对互补色,调整一下补色的亮度,

有时候是一种很好的搭配。图1-14 互补色● 暖色:如图1-15中的黄色,橙色,红色,紫色等都属于暖色系列。

暖色跟黑色调和可以达到很好的效果。暖色一般应用于购物类网

站、儿童类网站等,用以体现商品的琳琅满目,儿童类网站的活

泼、温馨等效果。图1-15 暖色● 冷色:如图1-16中的绿色,蓝色,蓝紫色等都属于冷色系列。冷

色跟白色调和可以达到一种很好的效果。冷色一般应用于一些高

科技网站,主要表达严肃、稳重等效果。图1-16 冷色1.4.2 各种色彩分析

千万年来的生活实践,人类由鲜血的红色、植物的绿色、稻麦的黄色、海洋的蓝色等各种自然色彩形成了一系列共同的印象,使人们对色彩赋予了特别的象征意义。

红色

红色温暖,性格刚烈而外向,是一种对人刺激性很强的颜色。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人类视觉疲劳的颜色。在众多颜色里,红色是最鲜明生动、最热烈的颜色。因此红色也是代表热情的情感之色。鲜明红色极容易吸引人们的目光。

在网页颜色的应用中,根据网页主题内容的需求,纯粹使用红色为主色调的网站相对较少,多用于辅助色、点睛色,达到陪衬、醒目的效果。这类颜色的组合比较容易使人提升兴奋度,红色特性明显,这一醒目的特殊属性,被广泛地应用于节日节庆、食品、时尚休闲、化妆品、服装等类型的网站,容易营造出娇媚、诱惑、艳丽等气氛。如图1-17所示红色为主的网页。图1-17 以红色为主的网页

黑色

黑色也有很强大的感染力,它能够表现出特有的高贵,黑色还经常用于表现死亡和神秘。在商业设计中,黑色是许多科技产品的用色,如电视、跑车、摄影机、音响、仪器的色彩大多采用黑色。在其他方面,庄严的黑色也常用于一些特殊场合的空间设计。生活用品和服饰设计大多利用黑色来塑造高贵的形象。黑色也是流行的主要颜色,适合与多种色彩搭配。如图1-18所示为以黑色为主的网页。图1-18 以黑色为主的网页

橙色

橙色具有轻快、欢欣、收获、温馨、时尚的效果,是快乐、喜悦、能量的色彩。在整个色谱里,橙色具有兴奋度,是最耀眼的色彩。给人以华贵而温暖,兴奋而热烈的感觉,也是令人振奋的颜色。具有健康、富有活力、勇敢自由等象征意义,能给人以庄严、尊贵、神秘等感觉。橙色在空气中的穿透力仅次于红色,也是容易造成视觉疲劳的颜色。

在网页颜色里,橙色适用于视觉要求较高的时尚网站,属于注目、芳香的颜色,也常被用于味觉较高的食品网站,是容易引起食欲的颜色。如图1-19所示为以橙色为主的网页。图1-19 以橙色为主的网页

灰色

在商业设计中,灰色具有柔和、高雅的意象,而且属于中间性格,男女皆能接受,所以灰色也是流行的主要颜色。许多高科技产品,尤其是和金属材料有关的,几乎都采用灰色来传达高级、技术的形象。使用灰色时,大多利用不同层次的变化组合和与其他色彩搭配,才不会过于平淡、沉闷、呆板、僵硬。如图1-20所示为以灰色为主的网页。图1-20 以灰色为主的网页

黄色

黄色是阳光的色彩,具有活泼与轻快的特点,给人十分年轻的感觉。象征光明、希望、高贵、愉快。它的亮度最高,和其他颜色配合很活泼,有温暖感,具有快乐、希望、智慧和轻快的个性,有希望与功名等象征意义。黄色也代表着土地、象征着权力,并且还具有神秘的宗教色彩。如图1-21为以黄色为主的网页。图1-21 以黄色为主的网页

浅黄色系代表明朗、愉快、希望、发展,它的雅致,清爽属性,较适合用于女性及化妆品类网站。中黄色有崇高,尊贵,辉煌、注意、扩张的心理感受。深黄色给人高贵、温和、稳重的心理感受。

绿色

在商业设计中,绿色所传达的是清爽、理想、希望、生长的意象,符合服务业、卫生保健业、教育行业、农业的要求。在工厂中,为了避免操作时眼睛疲劳,许多机械也是采用绿色,一般的医疗机构场所,也常采用绿色来做空间色彩规划。如图1-22为以绿色为主的网页。图1-22 以绿色为主的网页

蓝色

由于蓝色给人以沉稳的感觉,且具有智慧、准确的意象,在商业设计中强调科技、效率的商品或企业形象,大多选用蓝色当标准色、企业色,如电脑、汽车、影印机、摄影器材等。另外,蓝色也代表忧郁和浪漫,常运用在文学作品或感性诉求的商业设计中。如图1-23所示为以蓝色为主的网页。图1-23 以蓝色为主的网页

白色

在商业设计中白色具有洁白、明快、纯真、清洁的意象,通常需要和其他色彩搭配使用。纯白色给人以寒冷、严峻的感觉,所以在使用纯白色时,都会掺一些其他的色彩,如象牙白、米白、乳白等。在生活用品和服饰用色上,白色是流行的主要色,可以和任何颜色搭配。

紫色

由于具有强烈的女性化性格,在商业设计用色中,紫色受到相当的限制,除了和女性有关的商品或企业形象外,其他类的设计不常采用该色为主色。如图1-24所示为以紫色为主的网页。图1-24 以紫色为主的网页1.4.3 常见的几种网页配色方案

色彩搭配既是一项技术性工作,同时也是一项艺术性很强的工作。因此,在设计网页时除了考虑网站本身的特点外,还要遵循一定的艺术规律,从而设计出色彩鲜明、性格独特的网站。

单色

单色配色方案由不同的色调构成,是在特定色调内的阴影色和浅色。这是创建配色方案最简单的方法,因为它们都来自同一色相,很容易创建出一个和谐的方案。如图1-25所示的单色配色方案。图1-25 单色配色方案

这种搭配的优点是易于使网页色彩趋于一致,对于网页设计新手有很好的借鉴作用,这种用色方式容易塑造网页和谐统一的氛围,缺点是容易造成页面的单调。因此,往往利用局部加入对比色来增加变化,如局部对比色彩的图片等。

类比

类比配色方案是仅次于单色的一个易于创建的配色方案。类比方案是由在色轮中相邻的三种颜色创建的。一般来说,类比配色方案都具有相同的色度水平,但通过色调、阴影色和浅色的使用,可以增加这些方案的趣味,并且可以适应我们所设计网站的需要。如图1-26所示为类比色配色方案。图1-26 类比色配色方案

互补

互补配色方案是通过将色轮上对立面的颜色相融合来创建。这些配色方案最基本的形式是仅由两种颜色构成,但是可以很容易地通过色调、浅色和阴影色的形式扩展。互补色可以突出重点,产生强烈的视觉效果,通过合理使用互补色能够使网站特色鲜明、重点突出。如图1-27所示为互补色的配色方案。图1-27 互补色的配色方案

三原配色

三原配色方案由在色轮中具有相等间隔的色相组成。和其他配色方案相比,这种方案稍显不同,如图1-28所示为三原配色方案。图1-28 三原配色方案

在三原配色方案中,使用一种颜色的浅色或深色版本,与另外两种颜色的两种阴影色、色调、浅色一起运用,让这种单一的颜色在配色方案中显得中立,可作为中和色使用。1.5 网站的类型与特点

网站是多个网页的集合,目前没有一个严谨的网站分类方式,只是将网站按照主体性质不同分为门户网站、电子商务网站、娱乐网站、游戏网站、时尚网站、个人网站等。1.5.1 个人网站

个人网站包括博客、个人论坛、个人主页等。个人网站就是自己的心情驿站。有的为了拥有共同爱好的朋友相互交流而创建的网站,也有以自我介绍的简历形式网站,如图1-29所示。

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载