《网络设计完整版ppt课件全套电子教案整套教学教程(最新).ppt》由会员分享，可在线阅读，更多相关《网络设计完整版ppt课件全套电子教案整套教学教程(最新).ppt（323页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网页设计与制作网页设计与制作教程教程前言前言l随着计算机网络的广泛应用，网站技术不断发展完善，网随着计算机网络的广泛应用，网站技术不断发展完善，网页设计与制作与网站开发技术是目前非常流行的计算机网页设计与制作与网站开发技术是目前非常流行的计算机网络技术之一，其中网页设计与制作更是热中之热。社会对络技术之一，其中网页设计与制作更是热中之热。社会对网站开发技术人才的需求非常迫切。在目前的网站开发技网站开发技术人才的需求非常迫切。在目前的网站开发技术中，都需要将网页制作作为基础，目前该课程也是计算术中，都需要将网页制作作为基础，目前该课程也是计算机专业甚至非计算机专业必开的课程之一，同时由于该课机专
2、业甚至非计算机专业必开的课程之一，同时由于该课程能够和实际应用紧密结合，又是一门实践性很强的课程，程能够和实际应用紧密结合，又是一门实践性很强的课程，非常受学生的欢迎。本书编写指导思想是仅完成网站制作非常受学生的欢迎。本书编写指导思想是仅完成网站制作技术系列课程的一部分，即静态网页制作技术培养。只作技术系列课程的一部分，即静态网页制作技术培养。只作为网站技术课程的基础，而不涉及动态网页内容。为网站技术课程的基础，而不涉及动态网页内容。下一页返回前言前言l针对高等职业技术的特点，本书更注重实践操作，同时要针对高等职业技术的特点，本书更注重实践操作，同时要和实际的工作相结合，使学生能够在做中学，教
3、师在做中和实际的工作相结合，使学生能够在做中学，教师在做中教，为此本教材更加突出如下特点教，为此本教材更加突出如下特点: :l1.1.实践型的教材编写模式实践型的教材编写模式: :本书编写以大量网页的设计与本书编写以大量网页的设计与制作实践为基础，实践经验丰富，在教材素材、实例的选制作实践为基础，实践经验丰富，在教材素材、实例的选取上能够更加贴近实际需求。取上能够更加贴近实际需求。l2.2.项目导向型的教材定位项目导向型的教材定位: :本书以一个校企合作项目开发本书以一个校企合作项目开发网站建设为例，按照项目进程安排章节，每一章节的实例网站建设为例，按照项目进程安排章节，每一章节的实例不仅介绍
4、必须的知识，而且每个实例都是项目中的元素，不仅介绍必须的知识，而且每个实例都是项目中的元素，并为后继章节所用，既相互独立，又紧密联系，能并为后继章节所用，既相互独立，又紧密联系，能上一页 下一页返回前言前言l够使学生对于项目有一个完整的认识和深刻的体会。够使学生对于项目有一个完整的认识和深刻的体会。l3.3.实际应用为主体的内容体系实际应用为主体的内容体系: :本教材打破了理论介绍和本教材打破了理论介绍和实例教学相分离的传统的课程分配方式，使学生在学习实实例教学相分离的传统的课程分配方式，使学生在学习实例之前先了解必须的相关知识点，再通过具体的实例加强例之前先了解必须的相关知识点，再通过具体的
5、实例加强实践能力，并且改变以往实例仅仅是为了介绍相关知识，实践能力，并且改变以往实例仅仅是为了介绍相关知识，没有一定的内在联系，加强了课程的条理性。没有一定的内在联系，加强了课程的条理性。l4.4.立体化的教材服务立体化的教材服务: :为了更好地辅助学生实践，推出了为了更好地辅助学生实践，推出了一套多元化的教学服务产品，包括图书正文、素材库、实一套多元化的教学服务产品，包括图书正文、素材库、实例源文件、电子教案等。本书根据网页设计制作项目的特例源文件、电子教案等。本书根据网页设计制作项目的特点和发展现状与趋势，对网页布局与策划、网页平点和发展现状与趋势，对网页布局与策划、网页平上一页 下一页返
6、回前言前言l面效果设计、网页动画技术处理、网页制作等问题做了系面效果设计、网页动画技术处理、网页制作等问题做了系统的分析和阐述。全书以一个实际项目为主线，按照项目统的分析和阐述。全书以一个实际项目为主线，按照项目的进程将其分成网页策划、网页平面制作、网页动画制作、的进程将其分成网页策划、网页平面制作、网页动画制作、网页测试发布网页测试发布l4 4个主要部分。个主要部分。l本书定位于职业教育，主要面向高职高专院校，同时也适本书定位于职业教育，主要面向高职高专院校，同时也适合于同等学历的职业教育和继续教育。本书可作为高等职合于同等学历的职业教育和继续教育。本书可作为高等职业技术院校电子商务专业、计
7、算机信息管理、广告设计专业技术院校电子商务专业、计算机信息管理、广告设计专业等专业的教材，也可作为广大网页设计制作人员的参考业等专业的教材，也可作为广大网页设计制作人员的参考书和自学读物。本书由刘蓓、孔东阳主编，李静媛、书和自学读物。本书由刘蓓、孔东阳主编，李静媛、上一页 下一页返回前言前言l赵海亮、王皑、崔鹏宇副主编，其中学习情境一、学习情赵海亮、王皑、崔鹏宇副主编，其中学习情境一、学习情境五由李静媛、孔东阳老师编写，学习情境二由吴冰、刘境五由李静媛、孔东阳老师编写，学习情境二由吴冰、刘蓓老师编写，学习情境三由李颖、赵海亮老师编写，学习蓓老师编写，学习情境三由李颖、赵海亮老师编写，学习情境四
8、由王茜、王皑老师编写，参加本书编写的还有史振情境四由王茜、王皑老师编写，参加本书编写的还有史振兴、柳忠平、侯广珊、周益卫老师。本书的编写工作得到兴、柳忠平、侯广珊、周益卫老师。本书的编写工作得到了北京理工大学出版社的大力支持，在此表示衷心的感谢。了北京理工大学出版社的大力支持，在此表示衷心的感谢。l由于编者的水平有限，书中难免有不当之处，敬请广大读由于编者的水平有限，书中难免有不当之处，敬请广大读者和专家批评指正。者和专家批评指正。l作者作者E-mail:E-mail:l编者编者上一页返回目录目录第第1章章 网页策划网页策划第第2章章 pbotosbop第第3章章 flash第第4章章 网页制
9、作网页制作第第5章章 网页测试发布网页测试发布第第1章章 网页策划网页策划1.1 实例介绍实例介绍1.2 相关知识相关知识1.3 知识拓展知识拓展1.1 实例介绍实例介绍l“康达电器网站康达电器网站”是一个小型家用电器类的网站。网站的是一个小型家用电器类的网站。网站的建立主要具有介绍公司产品，扩大企业知名度、为广大顾建立主要具有介绍公司产品，扩大企业知名度、为广大顾客服务等功能。我们以设计建立一个这样的网站为例来学客服务等功能。我们以设计建立一个这样的网站为例来学习，不仅要学习网页设计的工具，更要注重项目的总体开习，不仅要学习网页设计的工具，更要注重项目的总体开发流程及每个步骤的具体细节。发流
10、程及每个步骤的具体细节。1.网站的设计流程网站的设计流程l图图1.1的开发流程比较好地体现了网站开发的整个环节。的开发流程比较好地体现了网站开发的整个环节。从流程图中我们可以看出本流程主要涉及网站开发的前台从流程图中我们可以看出本流程主要涉及网站开发的前台开发，主要就是网页的设计与制作，这也是本教材的重点。开发，主要就是网页的设计与制作，这也是本教材的重点。下一页返回1.1 实例介绍实例介绍2.网站目录结构网站目录结构l网站的目录结构是指网站组织和存放站内所有文档目录设网站的目录结构是指网站组织和存放站内所有文档目录设置的情况。一个良好的网站目录结构对于站点维护、内容置的情况。一个良好的网站目
11、录结构对于站点维护、内容扩充和移植有着重要的影响。如大型网站的目录数量多、扩充和移植有着重要的影响。如大型网站的目录数量多、层次深、关系复杂，在网站设计中更需要合理定义目录结层次深、关系复杂，在网站设计中更需要合理定义目录结构和组织好所有文档。下面介绍一些在设计中行之有效的构和组织好所有文档。下面介绍一些在设计中行之有效的做法。做法。l第第1种种:不要将网站中所有文件都存放在一个目录下。尽可不要将网站中所有文件都存放在一个目录下。尽可能减少网站根目录下存放文件数，网站根目录只存放能减少网站根目录下存放文件数，网站根目录只存放index.html或或index.asp等首页文件，以及其他必须的系
12、统等首页文件，以及其他必须的系统文件。文件。上一页 下一页返回1.1 实例介绍实例介绍l第第2种种:一般按照网站的主菜单栏目结构，给每个栏目建立一般按照网站的主菜单栏目结构，给每个栏目建立一个目录。如果这个栏目的内容特别多，又分出很多下级一个目录。如果这个栏目的内容特别多，又分出很多下级栏目，则可以再增设相应的了目录。例如，根据需要在每栏目，则可以再增设相应的了目录。例如，根据需要在每个栏目的目录中建立个栏目的目录中建立images和和media的了目录，独立存放的了目录，独立存放此栏目专有的图片和多媒体文件。此栏目专有的图片和多媒体文件。l第第3种种:在网站根目录中常包含的目录有以下几类。在
13、网站根目录中常包含的目录有以下几类。Images目录存放网站所有页面都要用到的公共图片；目录存放网站所有页面都要用到的公共图片；Style目录目录存放存放CSS样式表文件样式表文件;Js目录存放目录存放JavaScript脚本文脚本文件件;Media目录存放目录存放flash,avi,rm等多媒体文件等多媒体文件;Temp目录存目录存放搜集的各类文字图片等原始资料放搜集的各类文字图片等原始资料;Templates目录存放网目录存放网站模板文件。站模板文件。上一页 下一页返回1.1 实例介绍实例介绍l第第4种种:网站如有多个语言版本，每个语言版本应存放于独网站如有多个语言版本，每个语言版本应存放
14、于独立的目录中。立的目录中。3.布局与界面设计布局与界面设计l(1)网页布局网页布局l本项目所采用的页面布局使用了经典的结构，如本项目所采用的页面布局使用了经典的结构，如图图1.2所所示。示。l(2)网站的标准色设计网站的标准色设计l“标准色彩标准色彩”是指能体现网站形象和延仲内涵的色彩。网是指能体现网站形象和延仲内涵的色彩。网站给人的第一印象来自视觉冲击，确定网站的标准色彩是站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，相当重要的一步。不同的色彩搭配产生不同的效果，上一页 下一页返回1.1 实例介绍实例介绍l并可能影响到访问者的情绪。一般来说
15、，一个网站的标准并可能影响到访问者的情绪。一般来说，一个网站的标准色彩不超过色彩不超过3种，太多则让人眼花缭乱。标准色彩要用于种，太多则让人眼花缭乱。标准色彩要用于网站的标志、标题、主菜单和主色块，给人以整体统一的网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。至于其他色彩也可以使用，只是作为点缀和衬托，感觉。至于其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。一个网站不可能单一地运用一种颜色，绝不能喧宾夺主。一个网站不可能单一地运用一种颜色，让人感觉单调、乏味，但是也不可能将所有的颜色都运用让人感觉单调、乏味，但是也不可能将所有的颜色都运用到网站中，这样会让人感觉轻浮、花哨。
16、一个良好的网站到网站中，这样会让人感觉轻浮、花哨。一个良好的网站必须有必须有1种或种或2种主题色，这样不至让客户迷失方向，也不种主题色，这样不至让客户迷失方向，也不至单调、乏味。所以确定网站的主题色是设计者必须考虑至单调、乏味。所以确定网站的主题色是设计者必须考虑的重要问题之一。一个页面尽量不要超过的重要问题之一。一个页面尽量不要超过4种色彩，用太种色彩，用太多的色彩会让人没有方向、没有侧重。多的色彩会让人没有方向、没有侧重。上一页 下一页返回1.1 实例介绍实例介绍l当主题色确定好以后，考虑其他配色时，一定要考虑其他当主题色确定好以后，考虑其他配色时，一定要考虑其他配色与主题色的关系，以及要
17、体现什么样的效果。另外要配色与主题色的关系，以及要体现什么样的效果。另外要考虑哪种因素占主要地位，是明度、纯度，还是色相。对考虑哪种因素占主要地位，是明度、纯度，还是色相。对于不同类型的网站主题色的制定还有不同的要求。如果是于不同类型的网站主题色的制定还有不同的要求。如果是非商业，企业类型的网站主题色的确定是较灵活和自由的，非商业，企业类型的网站主题色的确定是较灵活和自由的，相反的话就必须考虑到更多的其他因素。如主题色是否考相反的话就必须考虑到更多的其他因素。如主题色是否考虑到商业机构或企业的标志色、标准色、行业色等特殊因虑到商业机构或企业的标志色、标准色、行业色等特殊因素的影响。素的影响。l
18、(3)设计网站的标准字体设计网站的标准字体l和标准色彩一样，标准字体是指用于标志、标题和主菜单和标准色彩一样，标准字体是指用于标志、标题和主菜单的特有字体。一般来说，的特有字体。一般来说，常见网页默认的字体为宋体。常见网页默认的字体为宋体。上一页 下一页返回1.1 实例介绍实例介绍l为了体现站点的为了体现站点的“与众不同与众不同”和特有风格，我们可以根据和特有风格，我们可以根据需要选择一些特别字体。需要选择一些特别字体。l(4)网页网页CI设计设计l所谓所谓CI是企业形象识别系统的总称。是企业形象识别系统的总称。CI(corporateidentity)意思是通过视觉来统一企业的形象。作为一个
19、系统，它主意思是通过视觉来统一企业的形象。作为一个系统，它主要由要由MI(企业理念企业理念)、BI(企业行为企业行为)和和VI(企业视觉识别企业视觉识别) 3个部分所组成。我们所熟悉的企业标志个部分所组成。我们所熟悉的企业标志(logo、企业标准、企业标准字、企业专有色都是属于字、企业专有色都是属于VI的范畴，也是网页美化所主的范畴，也是网页美化所主要关注的部分。要关注的部分。上一页 下一页返回1.1 实例介绍实例介绍l(5)设计网站的图像与图标设计网站的图像与图标l一个好的站点，不但要有精彩的内容，还需要有一个美观一个好的站点，不但要有精彩的内容，还需要有一个美观的页面。谈到美观就离不开图片
20、，在页面中适当地用一些的页面。谈到美观就离不开图片，在页面中适当地用一些精美的图片作为点缀，会使你的网页大放异彩。但是，有精美的图片作为点缀，会使你的网页大放异彩。但是，有些图片如果不加修饰，直接摆放在网页中，效果也许会适些图片如果不加修饰，直接摆放在网页中，效果也许会适得其反。设计图片时首先要选好图片格式。一般情况下选得其反。设计图片时首先要选好图片格式。一般情况下选择择GIF格式与格式与JPEG格式。其次是采用合理的图片处理技格式。其次是采用合理的图片处理技术，如用术，如用Photoshop的样式加阴影，用双层错位放置充当的样式加阴影，用双层错位放置充当阴影、图片加边框、图片渐变等。阴影、
21、图片加边框、图片渐变等。上一页返回1.2 相关知识相关知识1.网页布局的基本概念网页布局的基本概念l(1)页面尺寸页面尺寸l由于页面尺寸和显示器大小及分辨率有关系，网页的局限由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留给你的页面范围就变得越来越小。浏览占去不少空间，留给你的页面范围就变得越来越小。浏览器的工具栏也是影响页面尺寸的原因。一般来说，目前的器的工具栏也是影响页面尺寸的原因。一般来说，目前的浏览器的工具栏都可以取消或者增加，那么当显示全部的浏览器的工具栏都可以取消或
22、者增加，那么当显示全部的工具栏和关闭全部工具栏时，页面的尺寸是不一样的。在工具栏和关闭全部工具栏时，页面的尺寸是不一样的。在网页设计过程中，向下拖动页面是唯一给网页增加更多内网页设计过程中，向下拖动页面是唯一给网页增加更多内容容(尺寸尺寸)的方法。的方法。下一页返回1.2 相关知识相关知识l(2)页头页头l页头又可称之为页眉，其作用是定义页面的主题。页头又可称之为页眉，其作用是定义页面的主题。l(3)页脚页脚l页脚是放置制作者或者公司信息的地方。页脚是放置制作者或者公司信息的地方。2.网页布局的主要元素网页布局的主要元素l(1)网站标识网站标识Logol(2)广告广告l(3)导航栏导航栏l(4
23、)图标和按钮图标和按钮上一页 下一页返回1.2 相关知识相关知识l(5)文字文字l(6)图像图像l(7)多媒体多媒体3.网页版面布局网页版面布局l(1)“国国”字形字形l(2)拐角型拐角型l(3)标题正文型标题正文型l(4)左右框架型左右框架型l(5)上下框架型上下框架型上一页 下一页返回1.2 相关知识相关知识l(6)综合框架型综合框架型l(7)封面型封面型l(8)Flash型型l(9)变化型变化型4.网站命名规范网站命名规范l第第1点点:所有文件、目录的命名统一成小写的英文字母、数所有文件、目录的命名统一成小写的英文字母、数字和下画线的组合。尽量用最少的字母达到最容易理解的字和下画线的组合
24、。尽量用最少的字母达到最容易理解的意义。意义。l第第2点点:文件命名最好用代表其含义的英文单词或缩写，不文件命名最好用代表其含义的英文单词或缩写，不容易翻译成英文的，用关键字的汉语拼音表示。容易翻译成英文的，用关键字的汉语拼音表示。上一页 下一页返回1.2 相关知识相关知识l第第3点点:图片的命名一般用表示图片性质的英文单词或缩写。图片的命名一般用表示图片性质的英文单词或缩写。5.网页布局的规律网页布局的规律l(1)比例比例l网页界面的版式设计，其比例关系一般体现在网页界面的版式设计，其比例关系一般体现在:页面空间页面空间长宽比、页面被分割的比例、实体与空白的面积比、图文长宽比、页面被分割的比
25、例、实体与空白的面积比、图文的关系以及造型元素内部的比例等形式上的数量关系。确的关系以及造型元素内部的比例等形式上的数量关系。确立良好的比例关系，能使页面各部分之间易于产生相互联立良好的比例关系，能使页面各部分之间易于产生相互联系，使版式设计和谐匀称。页眉部分左边的系，使版式设计和谐匀称。页眉部分左边的Logo和右边和右边的的banner采用了接近黄金矩形的比例，视觉上极为舒适。采用了接近黄金矩形的比例，视觉上极为舒适。上一页 下一页返回1.2 相关知识相关知识l(2)重复与渐变重复与渐变l重复是相同或相似的形态连续而有规律地反复出现。重复重复是相同或相似的形态连续而有规律地反复出现。重复的特
26、点是以单纯的手法求得整体形象的秩序和统一，具有的特点是以单纯的手法求得整体形象的秩序和统一，具有节奏美，让人产生清晰、连续、和平、安定、无限之感。节奏美，让人产生清晰、连续、和平、安定、无限之感。l渐变是形态有规律地连续变化，它通过类似的形态获得了渐变是形态有规律地连续变化，它通过类似的形态获得了形式的统一。渐变能让相互对立的两极形成过渡，从而达形式的统一。渐变能让相互对立的两极形成过渡，从而达到统一。渐变体现了形态的发展变化过程，让人感觉含蓄、到统一。渐变体现了形态的发展变化过程，让人感觉含蓄、柔和，具有强烈的时间和空间特征。柔和，具有强烈的时间和空间特征。上一页 下一页返回1.2 相关知识
27、相关知识l(3)对称与均衡对称与均衡l对称是指形态以某一点为中心，其左右或者上下因同等、对称是指形态以某一点为中心，其左右或者上下因同等、同量、同形而形成的平衡，对称存在于很多自然形态中。同量、同形而形成的平衡，对称存在于很多自然形态中。对称有以中轴线为轴的左右对称，以水平线为轴的上下对对称有以中轴线为轴的左右对称，以水平线为轴的上下对称和以中心点为基准的放射对称。对称的版式设计稳定、称和以中心点为基准的放射对称。对称的版式设计稳定、庄严、整齐、秩序、安宁、沉静。为避免对称产生的单调庄严、整齐、秩序、安宁、沉静。为避免对称产生的单调和呆板，可以在对称中略带变化。均衡是指版面以某一点和呆板，可以
28、在对称中略带变化。均衡是指版面以某一点为中心，左右或者上下等量不等形的配置。均衡是一种造为中心，左右或者上下等量不等形的配置。均衡是一种造型上有变化的平衡状态，具有变化的统一性。它揭示了形型上有变化的平衡状态，具有变化的统一性。它揭示了形式内在的、含蓄的秩序和平衡，体现了造型动与静相结合式内在的、含蓄的秩序和平衡，体现了造型动与静相结合的动态之美。均衡的形式灵活而富于变化，易于产生现代的动态之美。均衡的形式灵活而富于变化，易于产生现代感。感。上一页 下一页返回1.2 相关知识相关知识l对称与均衡都是平衡的，这是一种心理上的平衡，平衡使对称与均衡都是平衡的，这是一种心理上的平衡，平衡使人产生稳定
29、、平静、安全、信任的心理感受，而不平衡则人产生稳定、平静、安全、信任的心理感受，而不平衡则给人以危机感和不信任感，给统一的整体造成局部的干扰。给人以危机感和不信任感，给统一的整体造成局部的干扰。l(4)节奏与韵律节奏与韵律l视觉艺术中的节奏和韵律来自音乐的概念。一般来说，节视觉艺术中的节奏和韵律来自音乐的概念。一般来说，节奏感和韵律感同时存在，但细分起来，节奏较多地强调奏感和韵律感同时存在，但细分起来，节奏较多地强调“节拍节拍”，韵律较多地强调，韵律较多地强调“变化变化”。节奏是指单体按照。节奏是指单体按照一定的条理、秩序，重复连续地排列，形成一种律动形式。一定的条理、秩序，重复连续地排列，形
30、成一种律动形式。在版式设计中同样的形态、同样的色彩变化、同样的明暗在版式设计中同样的形态、同样的色彩变化、同样的明暗对比以重复、渐变的方式出现，使人体会到一种类似对比以重复、渐变的方式出现，使人体会到一种类似上一页 下一页返回1.2 相关知识相关知识l音乐中的节奏，从而产生美学体验。韵律是一种规律性的音乐中的节奏，从而产生美学体验。韵律是一种规律性的变化，它是节奏更高一级的律动。视觉艺术的韵律，有造变化，它是节奏更高一级的律动。视觉艺术的韵律，有造型元素的有规律的节奏变化形式。在网页界面中，图形图型元素的有规律的节奏变化形式。在网页界面中，图形图像、文字、色彩等视觉要素，在组织上合乎某种规律时
31、，像、文字、色彩等视觉要素，在组织上合乎某种规律时，在视觉和心理上便产生节奏性的韵律感觉。版面的韵律建在视觉和心理上便产生节奏性的韵律感觉。版面的韵律建立在形象的点线构成、字体或图形图像的组合，靠比例、立在形象的点线构成、字体或图形图像的组合，靠比例、轻重、缓急、反复、渐变等规律形式来体现。运用节奏与轻重、缓急、反复、渐变等规律形式来体现。运用节奏与韵律的形式法则，能创造出形象鲜明、形式独特的活力与韵律的形式法则，能创造出形象鲜明、形式独特的活力与魅力。变幻的曲线、文字和方形图案的巧妙结合，使页面魅力。变幻的曲线、文字和方形图案的巧妙结合，使页面产生轻快的节奏和韵律。产生轻快的节奏和韵律。上一
32、页 下一页返回1.2 相关知识相关知识l(5)对比与统一对比与统一l对比是指将性质相异的形态要素直接或间接地配置在一起，对比是指将性质相异的形态要素直接或间接地配置在一起，相异的特点因比较而更加鲜明，使人产生强烈的紧张感。相异的特点因比较而更加鲜明，使人产生强烈的紧张感。在网页界面中，文字与文字、图形与图形、实体与空白间在网页界面中，文字与文字、图形与图形、实体与空白间处处都存在着对比关系。在一个页面中，通常是多种对比处处都存在着对比关系。在一个页面中，通常是多种对比关系同时并存，以产生多姿多彩的表现效果。统一就是指关系同时并存，以产生多姿多彩的表现效果。统一就是指性质相同或类似的形态要素并置
33、在一起，形成一种一致或性质相同或类似的形态要素并置在一起，形成一种一致或趋向于一致的感觉。统一并不是设计形式的单一化，而是趋向于一致的感觉。统一并不是设计形式的单一化，而是使用多种多样变化的因素具有条理性和规律性，使各个局使用多种多样变化的因素具有条理性和规律性，使各个局部相互联系。为了获得版面的整体效果，我们常用各种乎部相互联系。为了获得版面的整体效果，我们常用各种乎法来取得统一，如在页面的不同位法来取得统一，如在页面的不同位上一页 下一页返回1.2 相关知识相关知识l置运用相同的字体、相同的色调，出现相同特征和形状的置运用相同的字体、相同的色调，出现相同特征和形状的造型因素等，使版面各处陇
34、调一致。对比和统一既相互矛造型因素等，使版面各处陇调一致。对比和统一既相互矛盾，又相辅相成，当它们达到盾，又相辅相成，当它们达到“平衡平衡”状态时，人们会在状态时，人们会在精神上产生一种高层次的审美感，这就是美学中精神上产生一种高层次的审美感，这就是美学中“多样的多样的统一统一”。6.网页布局技术网页布局技术l(1)层叠样式表的应用层叠样式表的应用l(2)表格布局表格布局l(3)框架布局框架布局上一页返回1.3 知识拓展知识拓展1.网页色彩设计网页色彩设计l(1)色彩的作用色彩的作用l色彩是一种奇怪的东西，它是美丽而丰富的，能唤起人类色彩是一种奇怪的东西，它是美丽而丰富的，能唤起人类的心灵感知
35、。一般来说红色是火的颜色，热情、奔放的心灵感知。一般来说红色是火的颜色，热情、奔放;也也是血的颜色，可以象征生命。黄色是明度最高的颜色，显是血的颜色，可以象征生命。黄色是明度最高的颜色，显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁、和平与安全，如绿色食品。紫纯自然和生长，象征安宁、和平与安全，如绿色食品。紫色象征高贵，有庄重感。白色能给人以纯洁与清白的感觉，色象征高贵，有庄重感。白色能给人以纯洁与清白的感觉，表示和平与圣洁。色彩的魅力是无限的，它可以让本身很表示和平与圣洁。色彩的魅力是无限的，它可以让本身很平淡无味
36、的东西，瞬间就能变得漂亮起来。平淡无味的东西，瞬间就能变得漂亮起来。下一页返回1.3 知识拓展知识拓展l(2)认识色彩认识色彩l最基本的颜色有最基本的颜色有3种种(红、黄、蓝红、黄、蓝)，其他的色彩都可以由，其他的色彩都可以由这这3种色彩调和而成。我们称这种色彩调和而成。我们称这3种色彩为种色彩为“三原色三原色”。现。现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其他的色彩都属于彩色。任何一种彩色都具非彩色系列。其他的色彩都属于彩色。任何一种彩色都具备备3个特征个特征:色相、明度和纯度。其中非彩色只有明度属性。色相、明度和纯度
37、。其中非彩色只有明度属性。l色相，指的是色彩的名称。这是色彩最基本的特征，是一色相，指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。比如说紫色、种色彩区别于另一种色彩的最主要的因素。比如说紫色、绿色、黄色等都代表了不同的色相。同一色相的色彩，调绿色、黄色等都代表了不同的色相。同一色相的色彩，调整一下亮度或者纯度，很容易搭配，比如，深绿、暗绿、整一下亮度或者纯度，很容易搭配，比如，深绿、暗绿、草绿、亮绿。草绿、亮绿。上一页 下一页返回1.3 知识拓展知识拓展l明度，也叫亮度，指的是色彩的明暗程度，明度越大，色明度，也叫亮度，指的是色彩的明暗程度，明度越大，色彩越
38、亮。彩越亮。l纯度，指色彩的鲜艳程度，纯度高的色彩纯而鲜亮。纯度纯度，指色彩的鲜艳程度，纯度高的色彩纯而鲜亮。纯度底的色彩暗淡、含灰色。相近色指色环中相邻的颜色。相底的色彩暗淡、含灰色。相近色指色环中相邻的颜色。相近色的搭配给人的视觉效果很舒适、很自然。所以相近色近色的搭配给人的视觉效果很舒适、很自然。所以相近色在网站设计中极为常用。在网站设计中极为常用。l互补色，指色环中相对的两种色彩。互补色，指色环中相对的两种色彩。l暖色，跟黑色调和可以达到很好的效果。暖色，跟黑色调和可以达到很好的效果。l冷色，一般跟白色调和可以达到一种很好的效果。冷色，一般跟白色调和可以达到一种很好的效果。l色彩均衡，
39、网站让人看上去舒适、协调，除了文字、图色彩均衡，网站让人看上去舒适、协调，除了文字、图上一页 下一页返回1.3 知识拓展知识拓展l片等内容的合理排版，色彩的均衡也是相当重要的一个部片等内容的合理排版，色彩的均衡也是相当重要的一个部分。比如一个网站不可能单一地运用一种颜色，所以色彩分。比如一个网站不可能单一地运用一种颜色，所以色彩的均衡问题是设计者必须要考虑的问题。色彩的均衡，包的均衡问题是设计者必须要考虑的问题。色彩的均衡，包括色彩的位置、每种色彩所占的比例、面积等。比如鲜艳括色彩的位置、每种色彩所占的比例、面积等。比如鲜艳明亮的色彩面积应小一点，让人感觉舒适、不刺眼。这就明亮的色彩面积应小一
40、点，让人感觉舒适、不刺眼。这就是一种均衡的色彩搭配。是一种均衡的色彩搭配。l(3)色彩的应用色彩的应用l色彩在人们的生活中都是有丰富的感情和含义的。比如红色彩在人们的生活中都是有丰富的感情和含义的。比如红色让人联想到玫瑰，联想到喜庆，联想到兴奋色让人联想到玫瑰，联想到喜庆，联想到兴奋;白色联想白色联想到纯洁、十净、简洁到纯洁、十净、简洁;紫色象征着女性化，高雅、浪漫紫色象征着女性化，高雅、浪漫;蓝蓝色象征高科技，稳重、理智色象征高科技，稳重、理智;橙色代表了欢快、甜美、橙色代表了欢快、甜美、上一页 下一页返回1.3 知识拓展知识拓展l收获收获;绿色代表充满青春的活力，舒适、希望等。当然不绿色代
41、表充满青春的活力，舒适、希望等。当然不是说某种色彩一定代表了什么含义，而是在特定的场合下，是说某种色彩一定代表了什么含义，而是在特定的场合下，同种色彩可以代表不同的含义。在各种色彩中，黑白灰的同种色彩可以代表不同的含义。在各种色彩中，黑白灰的应用是很特殊的，这是因为黑白灰又被称为应用是很特殊的，这是因为黑白灰又被称为“万能色万能色”，可以跟任意一种色彩搭配。当需要选择用某种色彩来进行可以跟任意一种色彩搭配。当需要选择用某种色彩来进行搭配却没有较满意的色彩时候，可以尝试黑白灰中的一种。搭配却没有较满意的色彩时候，可以尝试黑白灰中的一种。当觉得两种色彩的搭配不陇调，可尝试加入黑色，或者灰当觉得两种
42、色彩的搭配不陇调，可尝试加入黑色，或者灰色，会有意想不到的效果。深灰色色，会有意想不到的效果。深灰色(也可以是含有一定倾也可以是含有一定倾向色彩的灰色向色彩的灰色)或接近于黑色的色彩作为大面积的页面背或接近于黑色的色彩作为大面积的页面背景使用时能够比其他色彩方案更容易集中浏览者的注意力，景使用时能够比其他色彩方案更容易集中浏览者的注意力，但另一方面如果是接近于纯黑色的背但另一方面如果是接近于纯黑色的背上一页 下一页返回1.3 知识拓展知识拓展l景色则容易影响浏览者的情绪，网页的主题和内容、图片景色则容易影响浏览者的情绪，网页的主题和内容、图片等也会受到一些限制。等也会受到一些限制。l白色是网站
43、用得最普遍的一种颜色。很多网站甚至留出大白色是网站用得最普遍的一种颜色。很多网站甚至留出大块的白色空间作为网站的一个组成部分，这就是留白艺术。块的白色空间作为网站的一个组成部分，这就是留白艺术。很多设计性网站较多地运用留白艺术。留白，给人一个遐很多设计性网站较多地运用留白艺术。留白，给人一个遐想的空间，让人感觉心情舒适、畅快。恰当的留白对于陇想的空间，让人感觉心情舒适、畅快。恰当的留白对于陇调页面的均衡起到相当大的作用。对一些明度较高的网页，调页面的均衡起到相当大的作用。对一些明度较高的网页，配以黑色，可以适当地降低其明度。纯度较高的颜色应该配以黑色，可以适当地降低其明度。纯度较高的颜色应该尽
44、量避免被作为大面积的页面背景来使用，因为纯度较高尽量避免被作为大面积的页面背景来使用，因为纯度较高的颜色浏览时间过长，很容易使人感觉到视觉疲劳。另外的颜色浏览时间过长，很容易使人感觉到视觉疲劳。另外纯度较高的颜色作为背景时很难与其他色彩相搭配，搭配纯度较高的颜色作为背景时很难与其他色彩相搭配，搭配起来容易造成凌乱的印象。起来容易造成凌乱的印象。上一页返回图图1.1 开发流程开发流程返回图图1.2 网页布局网页布局返回第第2章章 photoshop2.1 网页标志的制作网页标志的制作2.2 网页素材处理网页素材处理2.3 网页页面的规划与制作网页页面的规划与制作2.4 其他页面的处理其他页面的处
45、理2.5 图片切割导成网页格式图片切割导成网页格式2.1 网页标志的制作网页标志的制作2.1.1实例介绍实例介绍l1.新建文件新建文件l打开【文件】菜单，单击【新建】命令，弹出如打开【文件】菜单，单击【新建】命令，弹出如图图2.1所所示的【新建】对话框。示的【新建】对话框。l设定文件名设定文件名“logo”，尺寸，尺寸:C500300，分辨率，分辨率:72等信息。等信息。一般图像分辨率设定为每英寸一般图像分辨率设定为每英寸72线线(约约28像素像素/厘米厘米)。在。在“模式模式”中设定为彩色模式类型。在中设定为彩色模式类型。在“文档背景文档背景”中，设中，设定新建文件的背景颜色。白色即背景为白
46、色定新建文件的背景颜色。白色即背景为白色;背景色即以背景色即以“色板色板”调板中的背景色作为背景的颜色调板中的背景色作为背景的颜色;透明即尤色背透明即尤色背景。景。下一页返回2.1 网页标志的制作网页标志的制作l(1)新建图层新建图层l打开【窗口】菜单，选择【图层】选项，调出【图层】、打开【窗口】菜单，选择【图层】选项，调出【图层】、【通道】、【路径】和【历史纪录】活动面板。在【图层【通道】、【路径】和【历史纪录】活动面板。在【图层面板】，创建一个透明图层。如面板】，创建一个透明图层。如图图2.2所示。所示。l(2)设定颜色设定颜色l打开【窗口】菜单调出【工具】活动面板，设置前景色为打开【窗口
47、】菜单调出【工具】活动面板，设置前景色为“RGB红红”。如。如图图2.3所示。所示。l(3)画矩形并用前景色填充画矩形并用前景色填充l在【工具】活动面板上选取【矩形选框工具】在透明图层在【工具】活动面板上选取【矩形选框工具】在透明图层上画出一个矩形选择区。如上画出一个矩形选择区。如图图2.4所示。所示。上一页 下一页返回2.1 网页标志的制作网页标志的制作l使用【编辑】菜单中的【填充】命令进行前景色填充使用【编辑】菜单中的【填充】命令进行前景色填充(前前景色填充快捷键景色填充快捷键:Alt+Del)。l取消选择区域取消选择区域(快捷键快捷键:Ctrl+D)如如图图2.5所示。所示。l3.画一个
48、红色的菱形画一个红色的菱形l(1)新建图层。新建图层。l(2)使用【工具箱】中的【多边形套索工具】，画出一个使用【工具箱】中的【多边形套索工具】，画出一个菱形菱形(画直线击同时按住画直线击同时按住Shift键键)。如。如图图2.6所示。所示。l(3)使用前景色填充，取消选取。如使用前景色填充，取消选取。如图图2.7所示。所示。l4.绘制红色字母绘制红色字母Dl(1)新建一个图层。新建一个图层。上一页 下一页返回2.1 网页标志的制作网页标志的制作l(2)画一个红色的矩形。画一个红色的矩形。l(3)将矩形右侧修整成圆角。在矩形外围画一个椭圆，将矩形右侧修整成圆角。在矩形外围画一个椭圆，【选择】菜
49、单【反选】，按【选择】菜单【反选】，按Del。如。如图图2.8所示。所示。l(4)取消选取，在图形内部画一个小矩形，按取消选取，在图形内部画一个小矩形，按Del。如。如图图2.9所示。所示。l5.绘制红色飘带绘制红色飘带l(1)新建图层。新建图层。l(2)使用钢笔路径工具绘制飘带。使用钢笔路径工具绘制飘带。l使用【工具箱】中的【钢笔工具】。在绘制飘带起点处单使用【工具箱】中的【钢笔工具】。在绘制飘带起点处单击，以定义第一个锚点。在适当位置单击鼠标左键不击，以定义第一个锚点。在适当位置单击鼠标左键不上一页 下一页返回2.1 网页标志的制作网页标志的制作l放并向右侧拖动以定义第一个锚点放并向右侧拖
50、动以定义第一个锚点;以同样方法定义第二以同样方法定义第二个锚点，单击定义第四个锚点个锚点，单击定义第四个锚点(不需要拖动鼠标不需要拖动鼠标)，继续用，继续用单击并用拖动的方法定义第五个和第六个锚点，最后在第单击并用拖动的方法定义第五个和第六个锚点，最后在第一个锚点处单击并拖动完成整个飘带路径的绘制。一个锚点处单击并拖动完成整个飘带路径的绘制。l(3)将路径作为选取载入。将路径作为选取载入。l(4)调出路径调板，选择刚才绘制完的工作路径并单击下调出路径调板，选择刚才绘制完的工作路径并单击下方的将路径作为选取载入图标。方的将路径作为选取载入图标。l(5)填充红色。填充红色。l6.画出红色文字框画出