网页设计与制作教程

网页设计与制作教程前言随着计算机网络的广泛应用，网站技术不断发展完善，网页设计与制作与网站开发技术是目前非常流行的计算机网络技术之一，其中网页设计与制作更是热中之热。社会对网站开发技术人才的需求非常迫切。在目前的网站开发技术中，都需要将网页制作作为基础，目前该课程也是计算机专业甚至非计算机专业必开的课程之一，同时由于该课程能够和实际应用紧密结合，又是一门实践性很强的课程，非常受学生的欢迎。本书编写指导思想是仅完成网站制作技术系列课程的一部分，即静态网页制作技术培养。只作为网站技术课程的基础，而不涉及动态网页内容。下一页返回前言针对高等职业技术的特点，本书更注重实践操作，同时要和实际的工作相结合，使学生能够在做中学，教师在做中教，为此本教材更加突出如下特点:1.实践型的教材编写模式:本书编写以大量网页的设计与制作实践为基础，实践经验丰富，在教材素材、实例的选取上能够更加贴近实际需求。2.项目导向型的教材定位:本书以一个校企合作项目开发网站建设为例，按照项目进程安排章节，每一章节的实例不仅介绍必须的知识，而且每个实例都是项目中的元素，并为后继章节所用，既相互独立，又紧密联系，能上一页下一页返回前言够使学生对于项目有一个完整的认识和深刻的体会。3.实际应用为主体的内容体系:本教材打破了理论介绍和实例教学相分离的传统的课程分配方式，使学生在学习实例之前先了解必须的相关知识点，再通过具体的实例加强实践能力，并且改变以往实例仅仅是为了介绍相关知识，没有一定的内在联系，加强了课程的条理性。4.立体化的教材服务:为了更好地辅助学生实践，推出了一套多元化的教学服务产品，包括图书正文、素材库、实例源文件、电子教案等。本书根据网页设计制作项目的特点和发展现状与趋势，对网页布局与策划、网页平上一页下一页返回前言面效果设计、网页动画技术处理、网页制作等问题做了系统的分析和阐述。全书以一个实际项目为主线，按照项目的进程将其分成网页策划、网页平面制作、网页动画制作、网页测试发布4个主要部分。本书定位于职业教育，主要面向高职高专院校，同时也适合于同等学历的职业教育和继续教育。本书可作为高等职业技术院校电子商务专业、计算机信息管理、广告设计专业等专业的教材，也可作为广大网页设计制作人员的参考书和自学读物。本书由刘蓓、孔东阳主编，李静媛、上一页下一页返回前言赵海亮、王皑、崔鹏宇副主编，其中学习情境一、学习情境五由李静媛、孔东阳老师编写，学习情境二由吴冰、刘蓓老师编写，学习情境三由李颖、赵海亮老师编写，学习情境四由王茜、王皑老师编写，参加本书编写的还有史振兴、柳忠平、侯广珊、周益卫老师。本书的编写工作得到了北京理工大学出版社的大力支持，在此表示衷心的感谢。由于编者的水平有限，书中难免有不当之处，敬请广大读者和专家批评指正。作者E-mail:1iu73419@163.com编者上一页返回第1章网页策划1.1实例介绍1.2相关知识1.3知识拓展1.1实例介绍“康达电器网站”是一个小型家用电器类的网站。网站的建立主要具有介绍公司产品，扩大企业知名度、为广大顾客服务等功能。我们以设计建立一个这样的网站为例来学习，不仅要学习网页设计的工具，更要注重项目的总体开发流程及每个步骤的具体细节。1.网站的设计流程图1.1的开发流程比较好地体现了网站开发的整个环节。从流程图中我们可以看出本流程主要涉及网站开发的前台开发，主要就是网页的设计与制作，这也是本教材的重点。下一页返回1.1实例介绍2.网站目录结构网站的目录结构是指网站组织和存放站内所有文档目录设置的情况。一个良好的网站目录结构对于站点维护、内容扩充和移植有着重要的影响。如大型网站的目录数量多、层次深、关系复杂，在网站设计中更需要合理定义目录结构和组织好所有文档。下面介绍一些在设计中行之有效的做法。第1种:不要将网站中所有文件都存放在一个目录下。尽可能减少网站根目录下存放文件数，网站根目录只存放index.html或index.asp等首页文件，以及其他必须的系统文件。上一页下一页返回1.1实例介绍第2种:一般按照网站的主菜单栏目结构，给每个栏目建立一个目录。如果这个栏目的内容特别多，又分出很多下级栏目，则可以再增设相应的了目录。例如，根据需要在每个栏目的目录中建立images和media的了目录，独立存放此栏目专有的图片和多媒体文件。第3种:在网站根目录中常包含的目录有以下几类。Images目录存放网站所有页面都要用到的公共图片；Style目录存放CSS样式表文件;Js目录存放JavaScript脚本文件;Media目录存放flash,avi,rm等多媒体文件;Temp目录存放搜集的各类文字图片等原始资料;Templates目录存放网站模板文件。上一页下一页返回1.1实例介绍第4种:网站如有多个语言版本，每个语言版本应存放于独立的目录中。3.布局与界面设计(1)网页布局本项目所采用的页面布局使用了经典的结构，如图1.2所示。(2)网站的标准色设计“标准色彩”是指能体现网站形象和延仲内涵的色彩。网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，上一页下一页返回1.1实例介绍并可能影响到访问者的情绪。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。标准色彩要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。至于其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。一个网站不可能单一地运用一种颜色，让人感觉单调、乏味，但是也不可能将所有的颜色都运用到网站中，这样会让人感觉轻浮、花哨。一个良好的网站必须有1种或2种主题色，这样不至让客户迷失方向，也不至单调、乏味。所以确定网站的主题色是设计者必须考虑的重要问题之一。一个页面尽量不要超过4种色彩，用太多的色彩会让人没有方向、没有侧重。上一页下一页返回1.1实例介绍当主题色确定好以后，考虑其他配色时，一定要考虑其他配色与主题色的关系，以及要体现什么样的效果。另外要考虑哪种因素占主要地位，是明度、纯度，还是色相。对于不同类型的网站主题色的制定还有不同的要求。如果是非商业，企业类型的网站主题色的确定是较灵活和自由的，相反的话就必须考虑到更多的其他因素。如主题色是否考虑到商业机构或企业的标志色、标准色、行业色等特殊因素的影响。(3)设计网站的标准字体和标准色彩一样，标准字体是指用于标志、标题和主菜单的特有字体。一般来说，'常见网页默认的字体为宋体。上一页下一页返回1.1实例介绍为了体现站点的“与众不同”和特有风格，我们可以根据需要选择一些特别字体。(4)网页CI设计所谓CI是企业形象识别系统的总称。CI(corporateidentity)意思是通过视觉来统一企业的形象。作为一个系统，它主要由MI(企业理念)、BI(企业行为)和VI(企业视觉识别)3个部分所组成。我们所熟悉的企业标志(logo、企业标准字、企业专有色都是属于VI的范畴，也是网页美化所主要关注的部分。上一页下一页返回1.1实例介绍(5)设计网站的图像与图标一个好的站点，不但要有精彩的内容，还需要有一个美观的页面。谈到美观就离不开图片，在页面中适当地用一些精美的图片作为点缀，会使你的网页大放异彩。但是，有些图片如果不加修饰，直接摆放在网页中，效果也许会适得其反。设计图片时首先要选好图片格式。一般情况下选择GIF格式与JPEG格式。其次是采用合理的图片处理技术，如用Photoshop的样式加阴影，用双层错位放置充当阴影、图片加边框、图片渐变等。上一页返回1.2相关知识1.网页布局的基本概念(1)页面尺寸由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留给你的页面范围就变得越来越小。浏览器的工具栏也是影响页面尺寸的原因。一般来说，目前的浏览器的工具栏都可以取消或者增加，那么当显示全部的工具栏和关闭全部工具栏时，页面的尺寸是不一样的。在网页设计过程中，向下拖动页面是唯一给网页增加更多内容(尺寸)的方法。下一页返回1.2相关知识(2)页头页头又可称之为页眉，其作用是定义页面的主题。(3)页脚页脚是放置制作者或者公司信息的地方。2.网页布局的主要元素(1)网站标识Logo(2)广告(3)导航栏(4)图标和按钮上一页下一页返回1.2相关知识(5)文字(6)图像(7)多媒体3.网页版面布局(1)“国”字形(2)拐角型(3)标题正文型(4)左右框架型(5)上下框架型上一页下一页返回1.2相关知识(6)综合框架型(7)封面型(8)Flash型(9)变化型4.网站命名规范第1点:所有文件、目录的命名统一成小写的英文字母、数字和下画线的组合。尽量用最少的字母达到最容易理解的意义。第2点:文件命名最好用代表其含义的英文单词或缩写，不容易翻译成英文的，用关键字的汉语拼音表示。上一页下一页返回1.2相关知识第3点:图片的命名一般用表示图片性质的英文单词或缩写。5.网页布局的规律(1)比例网页界面的版式设计，其比例关系一般体现在:页面空间长宽比、页面被分割的比例、实体与空白的面积比、图文的关系以及造型元素内部的比例等形式上的数量关系。确立良好的比例关系，能使页面各部分之间易于产生相互联系，使版式设计和谐匀称。页眉部分左边的Logo和右边的banner采用了接近黄金矩形的比例，视觉上极为舒适。上一页下一页返回1.2相关知识(2)重复与渐变重复是相同或相似的形态连续而有规律地反复出现。重复的特点是以单纯的手法求得整体形象的秩序和统一，具有节奏美，让人产生清晰、连续、和平、安定、无限之感。渐变是形态有规律地连续变化，它通过类似的形态获得了形式的统一。渐变能让相互对立的两极形成过渡，从而达到统一。渐变体现了形态的发展变化过程，让人感觉含蓄、柔和，具有强烈的时间和空间特征。上一页下一页返回1.2相关知识(3)对称与均衡对称是指形态以某一点为中心，其左右或者上下因同等、同量、同形而形成的平衡，对称存在于很多自然形态中。对称有以中轴线为轴的左右对称，以水平线为轴的上下对称和以中心点为基准的放射对称。对称的版式设计稳定、庄严、整齐、秩序、安宁、沉静。为避免对称产生的单调和呆板，可以在对称中略带变化。均衡是指版面以某一点为中心，左右或者上下等量不等形的配置。均衡是一种造型上有变化的平衡状态，具有变化的统一性。它揭示了形式内在的、含蓄的秩序和平衡，体现了造型动与静相结合的动态之美。均衡的形式灵活而富于变化，易于产生现代感。上一页下一页返回1.2相关知识对称与均衡都是平衡的，这是一种心理上的平衡，平衡使人产生稳定、平静、安全、信任的心理感受，而不平衡则给人以危机感和不信任感，给统一的整体造成局部的干扰。(4)节奏与韵律视觉艺术中的节奏和韵律来自音乐的概念。一般来说，节奏感和韵律感同时存在，但细分起来，节奏较多地强调“节拍”，韵律较多地强调“变化”。节奏是指单体按照一定的条理、秩序，重复连续地排列，形成一种律动形式。在版式设计中同样的形态、同样的色彩变化、同样的明暗对比以重复、渐变的方式出现，使人体会到一种类似上一页下一页返回1.2相关知识音乐中的节奏，从而产生美学体验。韵律是一种规律性的变化，它是节奏更高一级的律动。视觉艺术的韵律，有造型元素的有规律的节奏变化形式。在网页界面中，图形图像、文字、色彩等视觉要素，在组织上合乎某种规律时，在视觉和心理上便产生节奏性的韵律感觉。版面的韵律建立在形象的点线构成、字体或图形图像的组合，靠比例、轻重、缓急、反复、渐变等规律形式来体现。运用节奏与韵律的形式法则，能创造出形象鲜明、形式独特的活力与魅力。变幻的曲线、文字和方形图案的巧妙结合，使页面产生轻快的节奏和韵律。上一页下一页返回1.2相关知识(5)对比与统一对比是指将性质相异的形态要素直接或间接地配置在一起，相异的特点因比较而更加鲜明，使人产生强烈的紧张感。在网页界面中，文字与文字、图形与图形、实体与空白间处处都存在着对比关系。在一个页面中，通常是多种对比关系同时并存，以产生多姿多彩的表现效果。统一就是指性质相同或类似的形态要素并置在一起，形成一种一致或趋向于一致的感觉。统一并不是设计形式的单一化，而是使用多种多样变化的因素具有条理性和规律性，使各个局部相互联系。为了获得版面的整体效果，我们常用各种乎法来取得统一，如在页面的不同位上一页下一页返回1.2相关知识置运用相同的字体、相同的色调，出现相同特征和形状的造型因素等，使版面各处陇调一致。对比和统一既相互矛盾，又相辅相成，当它们达到“平衡”状态时，人们会在精神上产生一种高层次的审美感，这就是美学中“多样的统一”。6.网页布局技术(1)层叠样式表的应用(2)表格布局(3)框架布局上一页返回1.3知识拓展1.网页色彩设计(1)色彩的作用色彩是一种奇怪的东西，它是美丽而丰富的，能唤起人类的心灵感知。一般来说红色是火的颜色，热情、奔放;也是血的颜色，可以象征生命。黄色是明度最高的颜色，显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁、和平与安全，如绿色食品。紫色象征高贵，有庄重感。白色能给人以纯洁与清白的感觉，表示和平与圣洁。色彩的魅力是无限的，它可以让本身很平淡无味的东西，瞬间就能变得漂亮起来。下一页返回1.3知识拓展(2)认识色彩最基本的颜色有3种(红、黄、蓝)，其他的色彩都可以由这3种色彩调和而成。我们称这3种色彩为“三原色”。现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其他的色彩都属于彩色。任何一种彩色都具备3个特征:色相、明度和纯度。其中非彩色只有明度属性。色相，指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。比如说紫色、绿色、黄色等都代表了不同的色相。同一色相的色彩，调整一下亮度或者纯度，很容易搭配，比如，深绿、暗绿、草绿、亮绿。上一页下一页返回1.3知识拓展明度，也叫亮度，指的是色彩的明暗程度，明度越大，色彩越亮。纯度，指色彩的鲜艳程度，纯度高的色彩纯而鲜亮。纯度底的色彩暗淡、含灰色。相近色指色环中相邻的颜色。相近色的搭配给人的视觉效果很舒适、很自然。所以相近色在网站设计中极为常用。互补色，指色环中相对的两种色彩。暖色，跟黑色调和可以达到很好的效果。冷色，一般跟白色调和可以达到一种很好的效果。色彩均衡，网站让人看上去舒适、协调，除了文字、图上一页下一页返回1.3知识拓展片等内容的合理排版，色彩的均衡也是相当重要的一个部分。比如一个网站不可能单一地运用一种颜色，所以色彩的均衡问题是设计者必须要考虑的问题。色彩的均衡，包括色彩的位置、每种色彩所占的比例、面积等。比如鲜艳明亮的色彩面积应小一点，让人感觉舒适、不刺眼。这就是一种均衡的色彩搭配。(3)色彩的应用色彩在人们的生活中都是有丰富的感情和含义的。比如红色让人联想到玫瑰，联想到喜庆，联想到兴奋;白色联想到纯洁、十净、简洁;紫色象征着女性化，高雅、浪漫;蓝色象征高科技，稳重、理智;橙色代表了欢快、甜美、上一页下一页返回1.3知识拓展收获;绿色代表充满青春的活力，舒适、希望等。当然不是说某种色彩一定代表了什么含义，而是在特定的场合下，同种色彩可以代表不同的含义。在各种色彩中，黑白灰的应用是很特殊的，这是因为黑白灰又被称为“万能色”，可以跟任意一种色彩搭配。当需要选择用某种色彩来进行搭配却没有较满意的色彩时候，可以尝试黑白灰中的一种。当觉得两种色彩的搭配不陇调，可尝试加入黑色，或者灰色，会有意想不到的效果。深灰色(也可以是含有一定倾向色彩的灰色)或接近于黑色的色彩作为大面积的页面背景使用时能够比其他色彩方案更容易集中浏览者的注意力，但另一方面如果是接近于纯黑色的背上一页下一页返回1.3知识拓展景色则容易影响浏览者的情绪，网页的主题和内容、图片等也会受到一些限制。白色是网站用得最普遍的一种颜色。很多网站甚至留出大块的白色空间作为网站的一个组成部分，这就是留白艺术。很多设计性网站较多地运用留白艺术。留白，给人一个遐想的空间，让人感觉心情舒适、畅快。恰当的留白对于陇调页面的均衡起到相当大的作用。对一些明度较高的网页，配以黑色，可以适当地降低其明度。纯度较高的颜色应该尽量避免被作为大面积的页面背景来使用，因为纯度较高的颜色浏览时间过长，很容易使人感觉到视觉疲劳。另外纯度较高的颜色作为背景时很难与其他色彩相搭配，搭配起来容易造成凌乱的印象。上一页返回图1.1开发流程返回图1.2网页布局返回第2章photoshop2.1网页标志的制作2.2网页素材处理2.3网页页面的规划与制作2.4其他页面的处理2.5图片切割导成网页格式2.1网页标志的制作2.1.1实例介绍1.新建文件打开【文件】菜单，单击【新建】命令，弹出如图2.1所示的【新建】对话框。设定文件名“logo”，尺寸:C500×300，分辨率:72等信息。一般图像分辨率设定为每英寸72线(约28像素/厘米)。在“模式”中设定为彩色模式类型。在“文档背景”中，设定新建文件的背景颜色。白色即背景为白色;背景色即以“色板”调板中的背景色作为背景的颜色;透明即尤色背景。下一页返回2.1网页标志的制作(1)新建图层打开【窗口】菜单，选择【图层】选项，调出【图层】、【通道】、【路径】和【历史纪录】活动面板。在【图层面板】，创建一个透明图层。如图2.2所示。(2)设定颜色打开【窗口】菜单调出【工具】活动面板，设置前景色为“RGB红”。如图2.3所示。(3)画矩形并用前景色填充在【工具】活动面板上选取【矩形选框工具】在透明图层上画出一个矩形选择区。如图2.4所示。上一页下一页返回2.1网页标志的制作使用【编辑】菜单中的【填充】命令进行前景色填充(前景色填充快捷键:Alt+Del)。取消选择区域(快捷键:Ctrl+D)如图2.5所示。3.画一个红色的菱形(1)新建图层。(2)使用【工具箱】中的【多边形套索工具】，画出一个菱形(画直线击同时按住Shift键)。如图2.6所示。(3)使用前景色填充，取消选取。如图2.7所示。4.绘制红色字母D(1)新建一个图层。上一页下一页返回2.1网页标志的制作(2)画一个红色的矩形。(3)将矩形右侧修整成圆角。在矩形外围画一个椭圆，【选择】菜单【反选】，按Del。如图2.8所示。(4)取消选取，在图形内部画一个小矩形，按Del。如图2.9所示。5.绘制红色飘带(1)新建图层。(2)使用钢笔路径工具绘制飘带。使用【工具箱】中的【钢笔工具】。在绘制飘带起点处单击，以定义第一个锚点。在适当位置单击鼠标左键不上一页下一页返回2.1网页标志的制作放并向右侧拖动以定义第一个锚点;以同样方法定义第二个锚点，单击定义第四个锚点(不需要拖动鼠标)，继续用单击并用拖动的方法定义第五个和第六个锚点，最后在第一个锚点处单击并拖动完成整个飘带路径的绘制。(3)将路径作为选取载入。(4)调出路径调板，选择刚才绘制完的工作路径并单击下方的将路径作为选取载入图标。(5)填充红色。6.画出红色文字框(1)画一个矩形，如图2.13所示。上一页下一页返回2.1网页标志的制作(2)【编辑】菜单中的描边命令，宽度为10像素。7.绘制标志右上角的注册标记“R"(1)新建图层。(2)用椭圆选框工具画一个圆，按住Shift+椭圆选框工具。(3)【编辑】菜单中的描边命令，宽度为4像素。(4)用文字命令写一个字母R，并移动放置到圆内。效果如图2.16所示。8.输入红色文字(1)使用文字工具输入【黑体】字，调整合适字号。上一页下一页返回2.1网页标志的制作(2)【图层】菜单中【文字】中的【消除锯齿强】命令，强化文字边缘。(3)使用移动工具到合适的位置，效果如图2.17所示。9.图形整理和保存(1)删除背景图层(2)合并可见图层(3)保存文件2.1.2相关知识1.Photoshop的基本知识(1)认识Photoshop基本界面如图2.20所示。上一页下一页返回2.1网页标志的制作(2)本章可以参考使用的快捷键删除选框中的图案或选取的路径DEL用背景色填充所选区域或整个图层Ctrl+BackSpace或Ctrl+De1用前景色填充所选区域或整个图层Alt+BackSpace或Alt+De1全部选取Ctrl+A取消选择Ctrl+D重新选择Ctrl+Shift+D羽化选择Ctrl+Alt+D上一页下一页返回2.1网页标志的制作反向选择Ctrl+Shift+l路径变选区数字键盘的Enter2.1.3知识拓展1.Photoshop软件版本说明本例所使用的软件版本为PhotoshopCS，本教材编写时的最新版本为PhotoshopCS3。2.常用图像格式介绍(1)PSDPhotoshop格式(PSD)是默认的文件格式，它允许保存图层等一些信息。上一页下一页返回2.1网页标志的制作(2)BMPBMP是DOS和Windows兼容计算机上的标准Windows图像格式。(3)GIF图形交换格式(GIF是在WorldWideWeb及其他联机服务上常用的一种文件格式，用于显小超文本标记语言(HTML)文档中的索引颜色图形和图像。(4)JPEG联合图像专家组(JPEG)格式是在WorldWideWeb及其他联机服务上常用的一种格式，用于显小超文本标记语言(HTML)文档中的照片和其他连续色调图像。上一页下一页返回2.1网页标志的制作(5)PDF便携文档格式(PDF)是一种灵活的、跨平台、跨应用程序的文件格式。基于PostScript成像模型，PDF文件精确地显示并保留字体、页面版式以及矢量和位图图形。(6)TIFF标记图像文件格式(TIFF用于在应用程序和计算机平台之间交换文件。TIFF是一种灵活的位图图像格式，所有的绘画、图像编辑和页面排版应用程序都可以支持。上一页下一页返回2.1网页标志的制作(7)PNG便携网络图形(PNG)格式是作为GIF的尤专利替代品开发的，用于尤损压缩和显小Web上的图像。与GIF不同，PNG支持24位图像并产生尤锯齿状边缘的背景透明度。但是，某些Web浏览器不支持PNG图像。上一页返回2.2网页素材处理2.2.1实例介绍(1)新建一个大小为600×90像素的页面，命名为menu的文件。(2)背景色图层渐变效果的设置。在前景色上双击，设置【拾色器】中的值为R:219，G:236，B:193。设置背景色为白色。选取工具箱中的渐变工具按住左键，从矩形选区的左侧边缘拖拽到右侧边缘，实现渐变填充效果。完成效果如图2.24所示。下一页返回2.2网页素材处理(3)文本框制作。①新建textbox图层，使用工具箱中的【矩形选框工具】画出一长条形选区，填充选区为白色。②取消选取后双击textbox图层会弹出【图层样式】窗口，在其样式选项上选择【投影】中的【内阴影】，将两者的距离和大小的像素值都设为1。接着在【外发光】选项上将距离和大小值也都设为“1”。单击【好】按钮。(4)图片按钮的制作①新建go图层。②使用【工具箱】中的【椭圆选框工具】，在页面画出一个正圆形(需同时按住Shift键)。上一页下一页返回2.2网页素材处理③将选区填充色设置为R:120，G:118，B:117，进行填充。④在go图层上双击，将图层样式中的【投影】选项打开，设置距离和扩展选项值均为1，大小值为2，其他值不变。再将【外发光】选项打开，设置大小值为1，其他值不变。单击【好】。⑤将前景色设置为白色，使用文字工具输入英文Go，选择合适的字型和字号后防置在相应位置。(5)菜单项的制作①新建heading图层②用矩形选框工具在参考线交义点位置画出一小段长条形选区，填充25%的灰色。上一页下一页返回2.2网页素材处理③选择动作调板下创建新图层后，返回图层调板将刚才绘制的矩形拖拽到创建新图层的图标上④移动新复制出的图层到适当位置⑤再次返回动作调板，单击停止记录后，再重复单击播放选区，复制出相应数量的图形⑥用文字工具输入文字(整行输入后按空格键，间隔出词距离)，移动到适当位置。完成效果如图2.34所示。2.banner制作(1)新建一个大小为585×105像素，命名为banner的文件。(2)新建图层1。上一页下一页返回2.2网页素材处理(3)调整前景色为白色，背景色为:R:248，G:213(4)使用渐变工具在图层1上从左向右填充透明渐变。(5)在弹出的渐变编辑器中单击【不透明性色标】滑块，将色标选项中【不透明度】设定为0%，单击【好】，完成编辑。(6)打开保存在光盘素材中的tree.jpeg文件，将它拖拽到文件上，再将其图层位置移动到透明渐变图层之下。使用【缩放】命令调整到合适的大小，移动到画面的相应位置。(7)将当前图像的窗口最大化，使用椭圆选框工具在tree层上画出椭圆形选区，执行【选择】→【反选】命令，将上一页下一页返回2.2网页素材处理选择区反向选择。再执行【选择】→【羽化】命令将羽化值设定为50。按键盘中的Delete键3次。完成后效果如图2.39所示。3.images操作(1)打开保存在光盘素材中的产品文件SG-208.jpeg，此时的图片整体效果较灰暗，可以执行菜单栏中的【图像】→【调整】→【曲线】命令适当调节图片整体效果。(2)使用菜单栏中的【图像】→【图像大小】命令调节图片的尺寸。将约束比例关闭，修改像素大小的宽度为600像素，高度为450像素。单击【好】。上一页下一页返回2.2网页素材处理(3)使用文字工具输入相应的文字。(4)新建一个图层，使用文字工具下的圆角矩形工具在图像上画出一带圆角的矩形，再切换到路径调板，单击将路径作为选区载入。(5)执行菜单栏中的【选择】→【反选】命令。使用浅红橙色作为前景色进行填充。取消选择区，双击图层调板上的当前图层，在弹出的图层样式窗口中选择【斜面和浮雕】选项，将方向修改为“下”，暗调颜色值为R:147，G:91，B:2。再选择【描边】选项，调整颜色为白色，大小为2像素，完成设置。(6)使用菜单栏中的【图像】→【图像大小】命令调节图上一页下一页返回2.2网页素材处理片的尺寸。将约束比例打开，修改像素大小的宽度为190像素，单击【好】。(7)将文件另存为SL-280G.jpeg。(8)使用同样方法将其他5个产品的图片修改并保存，以备随后使用。完成效果如图2.43所示。4.middle制作(1)创建大小为480×44像素，文件名为“middle”的文件。(2)创建相应图层制作文字框和Go搜索按钮(创建方法参照导航栏制作)。(3)制作下拉菜单标记:上一页下一页返回2.2网页素材处理①新建一图层，命名为“square”。②使用【矩形选框工具】配合键盘上的shift键在文字框的右侧画出一矩形选区，用25%的灰色进行填充。③双击“square”图层，在弹出的【图层样式】菜单中点选【斜面和浮雕】选项，将其中【大小】值子选项设置为“1”像素。再选择【颜色叠加】选项，在其拾色器中设置颜色为R:210，G:210，B:210。单击【好】按钮，结束编辑。⑦使用【矩形选框工具】框选【arrow图形上半部后按键盘上的Delete键删除。⑧取消选区后将其向下移动到适当位置。上一页下一页返回2.2网页素材处理⑨保存文件为middle.jpeg，以备后面使用。5.content制作(1)创建大小为290×185像素，文件名为“content”的文件。(2)打开保存在光盘素材中的产品文件leaf.jpeg，拖拽到content窗口中，移动到适当位置。(3)使用工具栏中的【钢笔工具】在图像上画出波浪状封闭路径。(4)使用【路径选择工具】选择路径，移动到适当位置后将路径作为选区载入。上一页下一页返回2.2网页素材处理(5)使用菜单栏中的【编辑】→【拷贝】后再使用【粘贴】命令进行粘贴。(6)调整图层的不透明度为80%。(7)单击【路径调板】，单击【从选区生成工作路径】。对路径上的锚点作一些位置的修改，使其与上次编辑的路径有所不同。(8)修改结束后移动整个路径在图像上的上下位置。使用【路径调板】中的【将路径作为选区载入】，复制并粘贴选区。(9)将粘贴的新图层移动到适当位置，调整图层的不透明度为40%。上一页下一页返回2.2网页素材处理(10)使用菜单栏中的【编辑】→【粘贴】命令进行粘贴，调整图层的不透明度为23%。使用【编辑】→【变换】→【垂直翻转】命令进行位置调整。(11)在【路径调板】上单击【工作路径】。使用文字工具在路径的适当位置单击鼠标，输入文字。(12)文字输入后删除工作路径，移动文字到适当位置。(13)双击文字图层调出【图层样式】菜单。选择【外发光】选项，调整【扩展】为40%,【大小】为6像素。(14)打开保存在光盘素材中的fruitl.jpeg文件，将该图像拖拽到编辑画面中，放置到适当位置。如图2.55所示。上一页下一页返回2.2网页素材处理(15)合并所有图层后保存文件为content.jpeg，以备后面使用。6.foot制作(1)创建大小为800×80像素，文件名为“foot”的文件。(2)设置前景色为55%的灰色，使用文字工具在页脚底部输入企业和网站的相关信息，并选好位置。如图2.56所示。(3)创建一个新图层。使用工具箱上的【单行选框工具】在图像最顶部边缘单击会出现一个高为1个像素的选区，用25%的灰色进行填充。(4)确保当前选区状态，单击一下键盘的向下移动键。仍然使用25%的灰色进行填充。上一页下一页返回2.2网页素材处理(5)使用【矩形选框工具】从灰色线的左右各选取一部分删除掉。(6)打开保存在光盘素材中的map.jpeg文件，将该图像拖曳到编辑画面中，缩放适当大小后放置到适当位置。(7)将前景色设为红色，使用文字工具输入相关文字，调整其在地图上的大小和位置。完成效果如下如图2.60所示。(8)合并所有图层后保存文件为foot.jpeg，以备后面使用。2.2.2相关知识1.渐变工具渐变工具可以创建多种颜色间的逐渐混合，可以从预设上一页下一页返回2.2网页素材处理渐变填充中选取或创建自己的渐变。通过在图像中拖移用渐变填充区域。起点(按下鼠标处)和终点(松开鼠标处)会影响渐变外观，具体取决于所使用的渐变工具。【渐变编辑器】对话框可用于通过修改现有渐变的拷贝来定义新渐变。还可以向渐变添加中间色，在2种以上的颜色间创建混合。2.钢笔工具钢笔工具可以创建更为精确的直线和平滑流畅的曲线，钢笔工具提供了最佳的绘图控制和最高的绘图准确度。3.文字工具当使用文字工具在图像上输入文字时，可以使用【图层】上一页下一页返回2.2网页素材处理→【文字】→【消除锯齿方式为无】的命令来使文字边缘清晰，这样可以使图像上的小文字看起来更清晰。2.2.3知识拓展1.色彩模式当新建一个photoshop文档时可以为该文档设定一种色彩模式(默认状态下为RGB颜色);打开一幅图像后也可以通过使用菜单命令中的【图像】→【模式】来重新设定一种色彩模式。通‘常清况下制作网页效果应使用RGB颜色模式，但有些时候根据特殊效果的击要，还可以使用其他的色彩模式。上一页下一页返回2.2网页素材处理2.钢笔工具“钢笔工具”常被用来从一幅图像中“抠出”主体物，它比【磁性套索工具】和【魔棒工具】抠图效果都要完美。但灵活使用该工具是击要勤加练习的。上一页返回2.3网页页面的规划与制作2.3.1实例介绍1.新建主页文件打开【文件】菜单，单击【新建】命令。设定文件名"index"、尺寸:800×1020像素、分辨率:72像素等信息。设定新建文件的背景颜色为白色。2.利用标尺和参考线对首页页面进行版面规划设计(1)调出标尺，显小参考线(2)设定参考线根据页面版面规划需要来设定所需的参考线，以为下一步进行各种页面素材的摆位与制作作准备。将鼠标左键下一页返回2.3网页页面的规划与制作放在当前页面窗口的标尺位置向内拖动即可定义一条参考线。(3)根据页面素材关系创建相应的图层组图层组的作用是方便对繁多的图层素材进行有序地管理和操作。3.将相应素材打开，使用拖曳的方法加入到对应的图层组中完成后效果如图2.67所示。上一页下一页返回2.3网页页面的规划与制作2.3.2相关知识1.使用参考线与网格参考线是浮在整个图像上但不打印出来的线条，可以移动或删除参考线，也可以锁定参考线，以免不小心移动它。2.使用【对齐】命令对齐有助于精确放置选区边缘、裁切选框、切片、形状和路径。2.3.3知识扩展1.网格上一页下一页返回2.3网页页面的规划与制作网格对于对称地布置图素很有用。网格在默认情况下显小为不打印出来的线条，但也可以显小为点。2.参考线和网格的特性相似拖移选区、选区边框和工具时，如果拖移距离小于8个解幕(不是图像)像素，则它们将与参考线或网格对齐。参考线移动时也与网格对齐，可以打开或关闭此功能。参考线间距、是否能够看到参考线和网格，以及对齐方式均因图像而异。网格间距、参考线和网格的颜色及样式对于所有的图像都是相同的。3.设置参考线和网格预置在Windows中，选取【编辑】→【预置】→【参考线、网上一页下一页返回2.3网页页面的规划与制作格和切片】。【颜色】，是为参考线、网格或两者选取一种颜色。如果选取了【自定】，清单击颜色框，选取一种颜色，然后单击【好】按钮。【样式】，是为参考线、网格或两者选取一个显小选项。【网格线间隔】，输入网格间距的值。【子网格】，是指输入划分网格的值。如果愿意，可更改此选项的单位。【百分比】选项创建均匀划分图像的网格。上一页返回2.4其他页面的处理2.4.1实例介绍1.新建售后服务的子页文件打开【文件】菜单，单击【新建】命令。设定文件名"register"，尺寸:800×1020像素、分辨率:72像素等信息。设定新建文件的背景颜色为白色。2.将首页原文件中可用的素材导入到新页面(1)将做完首页原文件index.psd打开，将其图层调板中的"menu"，"foot"和"logo"图层组拖拽入新页面中，移动到与主页相同的位置。(2)选择“menu”图层组中的“background”，使用菜单栏中下一页返回2.4其他页面的处理的【图像】→【调整】→【色相/饱和度】命令进行色彩的调整。(3)选择“menu图层组中的“heading”，同样使用菜单栏中的【图像】→【调整】→【色相/饱和度】命令进行色彩的调整。调整后的效果如图2.69所示。3.利用标尺和参考线对当前页面进行版面规划设计4.banner及左侧图片处理(1)新建“banner”图层组。(2)使用菜单栏中的【窗口】→【信息】命令调出信息调板。上一页下一页返回2.4其他页面的处理(3)使用【矩形选框工具】利用辅助线选择指定的选区。(4)查看信息调板中右下角选择区域的宽度和高度值。(5)根据信息调板中看到的数值新建一图像。(6)打开素材文件夹中的work.jpeg文件。使用菜单栏中的【编辑】→【变换】→【水平翻转】命令水平翻转图形，接着拖曳到刚建立的空白图像中并调整缩放到适当位置。(7)新建一个宽度为1像素，高度为2像素的图像。(8)使用【缩放工具】满画布显示该图像。接着使用【矩形选框工具】选择图像上部的一个像素后填充颜色为R:247，G:181，B:220。上一页下一页返回2.4其他页面的处理(9)使用菜单栏中【选择】→【全选】命令全选该图像。(10)执行【编辑】→【定义图案】命令，将选区定义为图案。(11)切换到需要编辑的图像窗口。创建一新图层后，使用菜单栏中【编辑】→【填充】命令调出填充窗口，选择相应选项完成填充。(12)使用菜单栏中的【图像】→【调整】→【色彩平衡】命令对“人像”图层进行色彩倾向的调整。(13)选择底纹图层，使用渐变工具，调整为白色透明渐变。按住shift键后单击鼠标左键从下向上拖动，填充白色透明渐变。上一页下一页返回2.4其他页面的处理(14)使用【裁切工具】将裁切框框选整个图相后双击鼠标完成裁切。(15)将处于锁定状态的白色背景图层删除，余下的两个图层使它们之间处于链接关系。(l6)将图层拖曳入“register”图像中并调整位置。将拖曳入的图层放置在“banner”图层组中。调整位置如图2.81所示。5.绘制表单内容框(1)在“form”图层组中创建一图层，命名为“line”。(2)使用【矩形选框工具】框选出图像中部辅助线围出的上一页下一页返回2.4其他页面的处理区域，执行【编辑】→【描边】命令对选区进行1个像素的描边。6.制作标题色带(1)在“form”图层组中创建一图层，命名为“title”。(2)设置填充前景色为R:247，G:181，B:220，背景色为白色。(3)使用【矩形选框工具】在中部辅助线围出的区域画出一矩形选区，使用【渐变工具】进行填充。(4)执行【全选】命令，再使用【描边】命令作1个像素的描边。上一页下一页返回2.4其他页面的处理(5)在图层调板上将“title”复制出副本，移动到适当的位置。7.制作按钮(1)在“form”图层组中创建一图层，命名为“push”。(2)使用【圆角矩形工具】，调整圆角半径为3个像素。在表单内容框的右下角位置画出一个圆角矩形。(3)设置前景色为20%的灰色，背景色为白色。(4)在路径调板中选择当前的工作路径，单击下面的【将路径作为选区载入】。(5)使用“渐变工具”进行填充。上一页下一页返回2.4其他页面的处理(6)在“push”图层上双击，在弹出的【图层样式】选择【内发光】和【描边】选项，设置描边大小为1像素，颜色为灰色。(7)复制"push"图层，移动到适当位置。8.输入文本信息(1)在“form”图层组中使用文字工具在相应位置输入文本信息。(2)选择文本信息图层，使用菜单栏中【图层】→【文字】→【消除锯齿无】。9.绘制文本输入框、匀选框和点选圈上一页下一页返回2.4其他页面的处理(1)在“form”图层组中新建“frame”图层，使用【矩形选框工具】绘制矩形选选区，接着再使用55%的灰色进行描边。复制出其他的文本输入框，在图像上排列好位置。(2)在“form”图层组中新建“gx”图层，使用【矩形选框工具】配合Shift键绘制出等边矩形选区，接着再使用55%的灰色进行描边。复制出其他的勾选框，在图像上排列好位置。(3)在“form“图层组中新建“round”图层，使用【椭圆选框工具】配合Shift键绘制出正圆形选区，接着再使用55%的灰色进行描边。复制出其他的勾选框，在图像上排列好位置。上一页下一页返回2.4其他页面的处理(4)在“form”图层组中新建“textbox”图层，使用【矩形选框工具】在【意见和建议】下边绘制矩形选区，接着再使用55%的灰色进行描边，调整位置。2.4.2知识拓展1.定义图案使用【编辑】→【定义图案】命令可以创建个性化图案作为页面背景的底纹。2.信息调板使用【窗口】→【信息】命令，信息调板可显小以下信息:上一页下一页返回2.4其他页面的处理(1)当使用【选框工具】时，【信息】调板会随着您拖移鼠标显小指针位置的x坐标和y坐标以及选框的宽度(W)和高度(H)。(2)在使用【裁切工具】、【形状工具】、【切片工具】和【缩放工具】时，随拖移变化的选区的宽度(W)和高度(H)。该调板还显示裁切选框的旋转角度。(3)使用【变换】或者【自由变换】命令时，宽度(W)和高度(H)的变化白分比、旋转角度(A)以及水平切线(H)或垂直切线(V)的角度。上一页返回2.5图片切割导成网页格式2.5.1实例介绍1.打开制作完成的网站首页图像，如图2.87所示，设置和显示参考线2.使用【切片工具】按照【参考线】规划出的区域对页面进行切片处理(1)在【工具】活动面板上点选【切片工具】，在展开的项目中选择【切片工具】。(2)使用菜单栏下方的【切片工具】选项栏中的【基于参考线的切片】，让软件自动对当前图像进行一次切片。(3)按照自己的规划意图，在“参考线”的交义区域使用“切下一页返回2.5图片切割导成网页格式片工具”工具在需要进行切片的图像区域的对角上单击左键拖动鼠标，切出区域(在切出的区域边缘会有蓝色线框和左上角切片编号的显示)，实现更为精确的二次切片。切片后效果如图2.90所示。3.保存已经完成的切片(1)使用菜单命令【文件】一【存储为Web所用格式】，在出现的窗口中单击【存储】。(2)保存的文件名为“index”，保存类型为“HTML和图像”。(3)退出软件。2.5.2相关知识1.使用切片工具创建切片上一页下一页返回2.5图片切割导成网页格式(1)选择【切片工具】，任何现有切片自动显示在文档窗口中。(2)选取选项栏中的样式设置。(3)在要创建切片的区域上拖移。2.从参考线创建切片(1)向图像中添加参考线。(2)选择切片工具，然后在选项栏中单击【基于参考线的切片】。2.5.3知识拓展1.图像切片的作用上一页下一页返回2.5图片切割导成网页格式切片的作用是为方便地在“Dreamwear”中制作网页，因为在网页设计中表格布局是很常用的方法，有的重复性图片可以切一块最小单位下来，然后在表格里设置为背景平铺就可以了，同时切片技术更利于网页框架的规划设计，使用“Dreamwear”进行编辑时可以很方便地对图像进行“一次插入”。另外一个好处是有利于提高图片在网络上的传输和下载速度。2.ImageReadylmageReady设计用于专业的Web页版面。你可以更轻松地对图层进行选择、编组、对齐和排列等处理，就好像它们是独立的对象。另外，lmageReady还包括用于高级上一页下一页返回2.5图片切割导成网页格式Web处理和创建动态Web图像(如动画和翻转)的工具和调板。(1)翻转lmageReady中的“Web内容”调板使您可以跟踪切片及其翻转状态。例如，你可以钊‘对某个Web页创建这样一个按钮:只要用户将指针放置在该按钮上，该按钮就会发光。并目，你可以管理按钮的状态以及这些状态中的活动。上一页下一页返回2.5图片切割导成网页格式(2)动画对于简单Web动画的创建，lmageReady提供“动画”调板，从而能够逐帧确定可以作为动态GIF或SWF文件导出的动画的外观。也可以结合切片组、嵌套表、百分比宽度表以及远程翻转(将鼠标放置在某幅图像时会变为另一幅图像)来创建动画。上一页返回图2.1“新建文件”对话框返回图2.2“创建图层”返回图2.3工具面板返回图2.4选择【矩形选框工具】返回图2.5填充返回图2.6选择【多边形套索工具】返回图2.7填充菱形返回图2.8画椭圆返回图2.9画矩形返回图2.13画矩形返回图2.16绘制注册标志“R”返回图2.17输入红字返回图2.20基本界面图返回图2.24效果图返回图2.34输入文字返回图2.39缩放效果图返回图2.43制作效果图返回图2.55拖动图片返回图2.56置入文字返回图2.60完成效果图返回图2.67效果图返回图2.69调整后的效果图返回图2.81调整图层位置返回图2.87设置和显示参考线返回图2.90按规划意图切片返回第3章flash3.1广告条动画3.2联系地图动画3.3公告栏动画3.4商品宣传广告动画3.1广告条动画3.1.1实例介绍1.打开制作软件并建立文件(1)打开制作软件—flash8(2)建立banner.fla文件我们现在看到的文件叫做“未命名-1”，单击属性设置面板中的【大小】，根据我们的制作广告条的实际尺寸，在文档属性中更改舞台尺寸为宽:556px,高110px。更改好以后，单击【确定】。我们将会看到舞台尺寸己经改变为我们想要的宽556px,高110px。单击【文件】菜单→【另存为】。将弹出另存为窗口，在窗口中的【保存类型】下一页返回3.1广告条动画位置，选取“flash8文档(*.fla)”;在窗口中的“文件名”位置，输入我们要为文件起的名字“banner.fla”;在窗口中的【保存在】位置，选取我们要把该文件保存的位置，在此我们可以在任意盘符下新建一个名为广告条的文件夹来保存我们的文件，单击【确定】。我们将看到名为“未命名-1”的文件己经变成我们想要的“banner.fla”文件。单击【文件】菜单→【导入】→【导入到库】，将弹出【导入到库】窗口，在窗口中的【查找范围】中，选取素材图片所在文件夹“第一部分flash”文件夹中的“所用图片”文件夹，选择“beijing0l.jpg”文件，单击【打开】。在库面板中将会看到名称为“beijing0l.jpg”的位图。在导入上一页下一页返回3.1广告条动画过程中，除了【导入到库】还有【导入到舞台】选项，但是我们一般都会选择【导入到库】选项，这样便于更改和使用素材图片。左键双击【时间轴窗口】中的“图层1”3个字，将图层名称“图层1”更改为“背景”。左键单击【时间轴窗口】中，“背景”图层第1帧，表示要在该帧上填入内容。我们在单击前看到第1帧上有一个空心的圆，表示空白关键帧。帧就是在动画最小时间单出现的画面。Flash8制作的动画是以时间轴为基础的动画，由先后排列的一系列帧组成。帧的数量和帧率决定了动画播放的时间，同时帧还决定上一页下一页返回3.1广告条动画了动画的时间与动作之间的关系。为了帮助大家学习先简单介绍一下“帧”，然后在相关知识中我们再详细介绍。在时间线上，实心圆点表示关键帧，空心圆点表示空白关键帧。创建一个新图层时，每一图层的首帧将自动被设置为关键帧。若帧被设置成关键帧，而该帧又没有任何对象时，它就是一个空白关键帧。拖动“库”面板中的“beijing0l.jpg”到舞台。很多时候我们导入的图片的大小和形状，并不能满足我们的要求，所以我们要调整图片的大小和形状以使图片满足我们制作的要求。当图片拖动到舞台后，我们会看到“背景”图层第1帧由原上一页下一页返回3.1广告条动画来的空心圆圈，变成了黑色实心圆圈，黑色的实心圆圈就表示关键帧，表示己经添加了内容。单击已经拖动到舞台的“beijing01.jpg”，然后单击【窗口】菜单→【对齐】，调用对齐面板。一般对齐面板出现在右侧中间部位，也可以根据自己的习惯放置。单击【对齐】面板中的【相对于舞台】按钮，表示对于“beijing01.jpg”相对于舞台进行对齐调整。依次单击【对齐】面板中的【水平中齐】、【垂直居中分布】、【匹配宽度】、【匹配高度】。相应调整以后，我们会发现，图片“beijing01.jpg”和舞台完全重合。上一页下一页返回3.1广告条动画右键单击“背景”图层第70帧，插入关键帧。随便单击“背景”图层任意两帧，这里我们选取第25帧和第43帧，可以发现这样通过第1帧和第70帧两个关键帧就可以实现，在“背景”图层1～70帧内都有“beijing01.jpg”背景图片。单击“背景”图层后面第2个圆点，圆点会变成锁的形状，这样就锁定图层。当完成一个图层后，我们经常会锁定图层，然后再插入新的图层进行制作，这样就不会在制作新图层时，影响到已经完成的图层。如果还击要再更改已经锁定的图层，只击要在此单击就可以解锁，锁的形状又变成圆点。上一页下一页返回3.1广告条动画3.文字制作及逐帧动画在“背景”图层上右键单击，插入新图层，把新图层改名为“文字”(1)文字制作右键单击“文字”图层第5帧，单击【插入关键帧】单击“文字”图层第5帧，表示我们下面的制作将在“文字”图层第5帧内。单击【工具箱】中的【文本工具】设置属性面板中的相关项:文本类型为静态文字;字体为TimesNewRoman;字体大小为23;文本(填充)颜色为蓝色;对齐方式为左对齐;字母间距为0;字符位置为一般;字体呈上一页下一页返回3.1广告条动画现方法为可读性消除锯齿。并目自动调整字距。左键在舞台区域按下，保持按下状态并拖动出文字输入区域。抬起左键，在拖曳的区域内输入“我们用康达电器，”单击【工具箱】中的【选择工具】，就可以退出文字的输入状态我们还可以在上图的状态下，在【属性面板】中，更改X,Y的值。在这单我们取X:238.1，Y:14.3在更改了文字的一些基本属性的基础上，可以为文字加一些特殊效果，以起到美化文字的作用。我们单击【属上一页下一页返回3.1广告条动画性面板】中【属性】右侧的【滤镜】，打开滤镜面板。单击“+”为文字添加滤镜效果，在滤镜效果中可以根据不同需要添加一种或多种效果。在这单我们添加发光效果，单击【发光】，弹出选项，选择模糊X:5;模糊Y:5;强度:100%;品质:低;颜色:红色。选好以后效果如图3.28所示。(2)逐帧动画制作在文字制作好以后我们在“文字”图层上添加关键帧，单击“文字”图层第10帧，按“F6”功能键插入一个关键帧，然后依次在第15帧、第20帧、第25帧、第30帧、第35帧上插入一个关键帧。上一页下一页返回3.1广告条动画单击“文字”图层第5帧，舞台中显示文字为“我们用康达电器，我们做健康达人!”，在不改变文字位置及样式的情况下，留下第一句中的“我”字，第一句中的“我”字，其他文字删除。单击“文字”图层第10帧，舞台中显示文字为“我们用康达电器，我们做健康达人!”，在不改变文字位置及样式的情况下，留下第一句中的“我们”字，第一句中的“我们”字，其他文字删除。按以此方式大家制作第15帧、第20帧、第25帧、第30帧、第35帧。上一页下一页返回3.1广告条动画单击“文字”图层第70帧，按F6插入一个关键帧。按下回车键，会看到舞台中的文字活动起来了，这就是逐帧动画。通过更改帧中的舞台内容来制作动画，最适合制作复杂的动画。要创建逐帧动画，需要将每个帧都定义为关键帧，然后给每个帧创建不同的图像。每个新关键帧最初包含的内容和它前面的关键帧是一样的，因此可以递增地修改动画中的帧。4.补间动画及引导动画的制作右键单击“文字”图层，选择插入图层，或者单击时间轴面板左边图层区中的【插入图层】。将新建图层改名为“图标移动”，右键单击该图层，在弹出菜单中选择【添上一页下一页返回3.1广告条动画加引导层】，单击【文件】→【导入】→【导入到库】，将“所用文件”文件夹中的“logo.gif”文件导入到库中。单击“引导层:图标移动”第1帧，单击【工具箱】中的【铅笔工具】，选择【工具箱】中【选项】中的【平滑】。在属性面板中选择“笔触颜色”为黑色，“笔触高度”为1,“笔触样式”为实线，“笔触平滑度”为50。在舞台中绘制一条曲线，单击“引导层:图标移动”第35帧，按下F6插入一个关键帧，使曲线的作用范围从第帧到第35帧。上一页下一页返回3.1广告条动画单击“图标移动”第1帧，从库中将“logo.glf”图片移动到舞台上。单击该图片，打开【变形】面板更改该图片大小，在线板中选择水平宽度为30.0%，垂直宽度为30.0%，旋转0.0度。锁定除“图标移动”图层以外的各个图层，单击“图标移动”图层第1帧，单击“logo.gif”图片，并将图片移动到曲线上的靠上位置。单击“图标移动”图层第35帧，按F6插入一个关键帧，单击“logo.gif”图片，并将图片移动到曲线上的水平末端位置。上一页下一页返回3.1广告条动画单击“图标移动”图层第1帧，在属性面板中，选择“补间:动画”将属性面板中的各项进行调整，“缓动”改为50;“旋转”改为顺时针，次数为10;将“调整到路径”、“同步”、“对齐”3项前面的方框中打钩。同时在时间轴“图标移动”图层上，会形成一个从第1帧指向第35帧的箭头，说明补间动画创建成功。单击回车键，会看到“logo.gif”图片，顺时针按所画曲线路径，从上到下运动，说明引导动画创建成功。单击“图标移动”图层上第50帧，按F6插入一个关键帧，制作从第35—第50帧的一个补间动画效果，属性面板参数如图3.53所示。上一页下一页返回3.1广告条动画制作好后的时间轴如图3.54所示。单击“图标移动”图层上第70帧，按F6插入一个关键帧。5.元件及补间形状的制作插入一个新图层，命名为“星星”。单击【插入】→【插入新元件】，或者使用快捷键Ctrl+F8创建一个新的元件将名称改为“星星”，类型为“影片剪辑”，单击【确定】。这时会出现一个新的界面，称为元件编辑界面。左键按住【工具箱】中的【矩形工具】，在【矩形工具】出现选项时，选择【多角星形工具】，选择好以后，更改“属性”面板中的相应设置，如图3.60所示。上一页下一页返回3.1广告条动画更改属性面板中“笔触颜色”为无;“填充颜色”为彩虹色选择属性面板中的【选项】，弹出【工具设置】窗口，将样式设置为星形，边数为8，星形顶点大小为0.20，单击【确定】。在元件编辑界面的舞台中，左键单击并按住进行拖曳，绘制一个适合大小的星星。选中所画星星，单击【工具箱】中的【任意变形工具】在【工具箱】中的【选项】单分别单击【扭曲】和【缩放】，调整星星的形状及大小。在元件界面“图层一”中，分别在第15帧和第30帧上，按上一页下一页返回3.1广告条动画F6各插入一个关键帧。单击第巧帧，用【任意变形工具】调整星星，将星星缩小。在元件界面“图层一”中，单击第1帧，在属性面板中，将“补间:无”改为“补间:形状”:单击第15帧，在属性面板中，将“补间:无”改为“补间:形状”。这时元件界面“图层一”中，第1一第15帧将出现箭头连接，第15一第30帧也出现箭头连接，说明“补间形状”建立成功。“补间形状”和“补间动画”在时间轴中很直观地可以看出，它们的起始帧与终止帧间的颜色是不一样的，“补间形状”两帧之间是绿色的。单击回车键，星星会从大到小又从小到大变化。上一页下一页返回3.1广告条动画单击图层上方的按钮“场景1”，回到主编辑界面。单击“星星”图层第1帧，将“库”中的“星星”元件拖曳到舞台中连续拖曳3个“星星”元件，放入舞台，并调整大小单击“星星”图层，第35帧，按F6插入关键帧，选中舞台中的任意一个“星星”元件，按住Shift键，左键单击另两个“星星”元件，选好后，将星星“元件”移动到图3.72所示的位置。上一页下一页返回3.1广告条动画单击“星星”图层第70帧，按F6插入关键帧。6.测试及导出单击【控制】菜单→【测试影片】命令，或者使用Ctrl+Enter快捷键测试动画。影片测试成功后，单击【文件】菜单→【导出】→【导出影片】命令击【导出影片】命令后，会出现【导出影片】窗口，将文件名命名为“banner.swf”并保存在相应位置。3.1.2相关知识1.逐帧动画上一页下一页返回3.1广告条动画逐帧动画更改每一帧中的舞台内容，它最适合于每一帧中的图像都在更改而不是仅仅简单地在舞台中移动的复杂动画。逐帧动画增加的文件大小的速度比补间动画快得多。在逐帧动画中，Flash会保存每个完整帧的值。要创建逐帧动画，需要将每个帧都定义为关键帧，然后给每个帧创建不同的图像。每个新关键帧最初包含的内容和它前面的关键帧是一样的，因此可以递增地修改动画中的帧。2.补间动画要补间实例、组和类型的属性的更改，可以使用补间动画。Flash可以补间实例、组和类型的位置、大小、旋转上一页下一页返回3.1广告条动画和倾斜。另外，Flash可以补间实例和类型的颜色、创建渐变的颜色切换或使实例淡入或淡出。要补间组或类型的颜色，必须把它们变为元件。要使文本块中的单个字符分别动起来，可以将每个字符放在独立的文本块中。如果应用补间动画，然后改变两个关键帧之间的帧数，或移动任一关键帧中的组或元件，Flash会自动重新补间帧。3.补间形状动画通过补间形状，可以创建类似于形变的效果，使一个形状看起来随着时间变成另一个形状。Flash也可以补间形状的位置、大小、颜色和不透明度。一次补间一个形状上一页下一页返回3.1广告条动画通常可以获得最佳效果。如果一次补间多个形状，则所有的形状必须在同一个图层上。要对组、实例或位图图像应用补间形状，首先必须分离这些元素。要对文本应用补间形状，必须将文本分离两次，从而将文本转换为对象。4.引导层动画基本的动画补间动画只能使对象产生直线方向的移动，而对于一个曲线运动，就必须不断的设置关键帧，为运动指定路线。为此Flash提供了一个自定义运动路径的功能。这个功能可以在运动对象的上方添加一个运动路径的层，然后用户可以在该层中绘制对象的运动路线，让上一页下一页返回3.1广告条动画对象掩盖路线运动。在播放时，该层是隐藏的。运用引导层可以绘制路径，补间实例、组或文本块均可以沿着这些路径运动。也可以将多个层链接到一个运动引导层，使多个对象沿同一路径运动。3.1.3知识拓展1.动画的分类动画大体上可以按照以下方式分类:(1)按照播放的媒体，动画可以分为TV动画、OVA动画、剧场动画、实验动画。(2)按照制作动画的技术和手段，动画可分为以手绘为主的传统动画和以计算机制作为主的计算机动画。上一页下一页返回3.1广告条动画(3)按照空间的视觉效果，动画可分为平面一维动画和二维动画。(4)按照动作的表现形式，动画可分为接近自然动作的完善动画(动画电视)和采用简化、夸张表现手法的局限动画(幻灯片动画)。(5)按照播放效果，动画可分为顺序动画(连续动作)和交互式动画(反复动作)。(6)按照每秒播放的画面幅数，动画可以分为全动画(24幅/s)和半动画(少于24幅/s)。2.动画的创作流程一般动画的创作流程大致分为如下3个阶段。上一页下一页返回3.1广告条动画(1)准备素材(2)设计动画(3)输出动画3.常用的平面动画制作软件(1)Flash(2)Retas(3)Pegs(4)AnimatorStudio上一页返回3.2联系地图动画3.2.1实例介绍1.建立文件打开制作软件一flash8，单击【创建新项目】→【Flash文档】。单击属性设置面板中的【大小】，根据制作广告条的实际尺寸，在文档属性中更改舞台尺寸为:宽120px,高85px。单击【文件】菜单→【另存为】。将弹出另存为窗口，在窗口中的【保存类型】位置，选取“flash8文档(*.fla)”;在窗口中的【文件名】位置，输入我们要为文件起的名字“map.fla”;下一页返回3.2联系地图动画在窗口中的【保存在】位置，选取要把该文件保存的位置，在此可以在任意盘符下新建一个名为地图的文件夹来保存我们的文件，单击【确定】。2.导入素材图片单击【文件】菜单→【导入】→【导入到库】，将弹出【导入到库】窗口，在窗口中的【查找范围】中，选取素材图片所在文件夹“第一部分flash”文件夹中的“所用图片”文件夹，选择“earch.jpg”文件，单击【打开】。在库面板中将会看到名称为“earch.jpg”的位图。左键双击【时间轴窗口】中的，“图层1”3个字，将图层名称“图层1”更改为“地图”。左键单击【时间轴窗口】中，“地图”图层上一页下一页返回3.2联系地图动画第1帧。拖动【库】面板中的“earch.jpg”到舞台当图片拖动到舞台后，我们会看到“地图”图层第1帧由原来的空心圆圈，变成了黑色实心圆圈，黑色的实心圆圈就表示关键帧，表示己经添加了内容。单击己经拖动到舞台的“earch.jpg”，然后单击【窗口】菜单→【对齐】，调用对齐面板。单击【对齐】面板中的【相对于舞台】按钮，表示对于“earch.jpg”相对于舞台进行对齐调整。依次单击【对齐】面板中的【水平中齐】、【垂直居中分布】、【匹配宽度】、【匹配高度】。相应调整以后，我们会发现，图片“earch.jpg”和舞台完全重合。上一页下一页返回3.2联系地图动画右键单击“地图”图层第146帧，插入关键帧。这样就可以实现，在第1～第146帧都有“earch.jpg”为背景。这样“地图”图层就制作完毕了，锁定图层。3.元件及时间轴特效制作插入一个新图层，命名为“红点”。单击【插入】→【插入新元件】，或者使用快捷键Ctrl+F8创建一个新的元件将名称改为“红点”，类型为“影片剪辑”，单击【确定】。这时会出现元件编辑界面。单击【工具箱】中的【椭圆工具】上一页下一页返回3.2联系地图动画选择好以后，更改“属性”面板中的相应设置更改属性面板中“笔触颜色”为无;“填充颜色”为红色。在元件编辑界面的舞台中，按住Shift键，左键单击并按住进行拖曳，绘制一个适合大小的圆形。选中所画红点，单击【窗口】→【变形】，调出【变形】面板。运用“变形”面板中的，百分比变化，更改红点大小。选中己经更改好的“红点”，单击【插入】菜单→【时间轴特效】→【效果】→【模糊】。打开“模糊”窗口，选择“效果持续时间”16帧;“分辨率”15;“缩放比例”0.25;“允许水平模糊”、“允许垂直模糊”;“移动方向”正中，单击【确定】。上一页下一页返回3.2联系地图动画确定后自动返回元件编辑界面，单击回车键，会发现红点出现模糊效果，这样时间轴特效中的模糊效果就制作成功了。单击图层上方的按钮“场景1”，回到主编辑界面。单击“红点”图层第1帧，将【库】中的“红点”元件拖曳到舞台中，可以比对地图再次使用“变形”面板调整红点大小。依次拖曳8个“红点”元件，到“红点”图层第1帧。选中“红点”图层第146帧，插入关键帧。这样就可以实现，在“红点”图层第1～第146帧都有这些“红点”元件了，锁定“红点”图层。4.遮罩层动画制作右键单击“红点”图层，插入一个新的图层。然后右键单击新图层，在弹出菜单中选择遮罩层。上一页下一页返回3.2联系地图动画选择遮罩层后，单击“图层5”的“锁头”按钮，解除图层锁定，在“图层5”第30帧插入关键帧，单击“图层5”第30帧后，在舞台内绘制一个略大于红点的圆形。在“属性”面板中，选择黑色笔触及黑色填充色，将黑色圆形拖曳到一个红点的上方，并完全遮盖住红点，在“图层5”第42帧插入关键帧，在“图层5”第43帧插入关键帧，单击“图层5”第43帧后，将黑色圆形拖曳到另一个红点的上方，并完全遮盖住红点。如图3.103所示。上一页下一页返回3.2联系地图动画在“图层5”第57帧插入关键帧，在“图层5”第58帧插入关键帧，重复上面的步骤，单击“图层5”第58帧后，将黑色圆形拖曳到另一个红点的上方，并完全遮盖住红点。如图3.106所示。在“图层5”第72帧、第73帧、第87帧、第88帧、第102帧、第103帧、第117帧、第118帧、第131帧、第132帧、第146帧分别插入关键帧。重复上面的制作过程。然后将“图层5”锁定。5.文字层的制作右键单击“图层5”，插入一个新的图层，命名为“文字”图层。单击“文字”图层第1帧，选择“文本工具”，更改“属性”上一页下一页返回3.2联系地图动画面板。“文本类型”为静态文