网页设计与动态网站开发.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第六级,第七级,第八级,2021/12/15,1,网页设计与动态网站开发,2,模块,01,网页赏析,模块引导,网页设计作为一种视觉语言，特别讲究编排、布局和色彩，虽然主页的设计不等同于平面设计，但它们有许多相近之处。,版式设计通过文字图形的空间组合，表达出和谐与美。为了达到最佳的视觉表现效果，设计者需要反复推敲整体布局和色彩匹配的合理性，使浏览者有一个流畅的视觉体验。,本模块主要通过对网页界面布局、网页界面色彩的赏析，了解网站风格及创意的重要性，以及有关网页界面布局、网页界面色彩的基础知识，为后续学习打下基础。,3,4,学习目标,能力目标,1.,能够分析页面结构图。,2.,能够绘制网页布局。,知识目标,1.,了解版面布局的特点。,2.,掌握常见的版面布局形式。,课时分配,1,课时（授课,0.5,课时，实践,0.5,课时）。,5,应知技能,欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣。,分析优秀网页的布局结构、视觉效果，留下直观的第一印象，为学习制作网页奠定基础。,对网页的组成元素有一个初步印象,。,学习创建网站、制作网页之前，我们先浏览几个典型页面布局，对这些网站的主页进行分析，了解典型的网页的布局结构。,网页界面布局,6,应知技能,国字型布局,一般最上面是网站标题及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。,这种布局的优点是充分利用版面，信息量大，与其他页面的链接切换方便，缺点是页面拥挤，四面封闭，广告占面积大，令人感到憋气。,7,应知技能,T,字型布局,页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。,这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以最大可能性获取，而且很方便，其次是页面结构清晰，主次分明。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。,8,应知技能,三字型布局,这是一种简洁明快的网页布局，在高校中用得比较多。这种布局的特点是在页面上由横向两条色块将网页整体分割为,3,部分，色块中大多放置广告条与大图片。如图所示即是一种三字形布局的网页。,9,应知技能,川字型布局,“川”字形布局：整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能，一般适用在栏目较多的网站里。,10,应知技能,封面型布局,这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在个人主页，如果说处理的好，会给人带来赏心悦目的感觉。,11,应知技能,“,国”字型布局,“,厂”字型布局,“,框架”型布局,“,封面”型布局,“Flash,”型布局,为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。,12,模拟任务,任务背景,从网页的界面设计布局特色、风格、实用性、与网页所承载内容的匹配性以及其他方面对典型网站页面作出详细评析，总结其优点和不足。,任务要求,必须结合具体网站进行，网站自选，要求至少对三个网站进行布局赏析，并且所选择的三个网站必须包括该网站的主页，主页的布局必须是比较常用布局，报告中需写明所选择网站主页的地址，例如，某同学若选择年代网网站。,对所选择的网站进行布局赏析，主要从文字、图像、版式、视觉流程、布局等方面介绍网站设计的基本构成与创意思维。,任务,1,网页界面布局,13,知识拓展,网页布局设计黄金分割,使用黄金分割是非常简单的。例如找到页面中,Main Content,主要内容和,sidebar,列表的宽度,900px,。使用内容区域总的宽度除以,1.618,，然后得到,556.24px,。不需要很精确，就用,556px,。现在就能知道主要内容元素是,556px,的宽度，,sidebar,是,344px,。也可以使用黄金分割到其他元素的宽度和高度。,14,独立实践,任务背景,阿里巴巴中国站（,）被,google,收录的中文网页数量要远远高于同类网站的平均水平，更重要的是，阿里巴巴的网页质量比较高，潜在用户更容易通过搜索引擎检索发现发布在阿里巴巴网站的商业信息，阿里巴巴也因此获得更大的网站访问量和更多的用户。,任务要求,对阿里巴巴的网页设计布局，从下面,5,个方面进行分析。,从整体结构看,从页面的相互关系看,页面分割的角度看,从页面对比的角度看,从页面和谐的角度看,任务,2,界面布局分析,学习目标,15,能力目标,1.,了解色彩基本理论。,2.,了解色彩搭配的技巧。,知识目标,1.,掌握网页常用的配色。,2.,网页中的色彩设计。,课时分配,1,课时（授课,0.5,课时，实践,0.5,课时）。,应知技能,16,1.,公司类网站赏析,该首页给人以清新、爽朗的感受，首页的整体布局为“上、中、下”三个版块，中间的主体内容又分为“左、中、右”三个版块。,颜色对比较为强烈，重点突出,主要采用浅灰和玫瑰红为主，浅灰色给人柔和、高雅的感受，玫瑰红给人温馨、浪漫的感受。,首页题头的动画效果体现了海尔集团的理念和品质，让人既想到家的感觉又能记住该品牌。,导航栏的颜色鲜明，文字与背景色对比强烈，引人注目。二级导航采用横式排列，其优点是不会遮住下面正文的内容。,应知技能,17,2.,旅游类网站赏析,欣赏“凤凰古城旅游网”，网址是：,。,该首页给人的视觉效果是一种古朴的气息迎面扑来，整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。,主页题头的凤凰古城图片恰到好处，突出了主题，同时也起到了广告作用。,导航栏的文字颇具特色。,首页的模块划分采用的是左右两大模块，内容划分清晰。,应知技能,18,3.,体育类网站赏析,欣赏“中国大众体育网”，网址是：,该网站整体视觉感受简洁、现代感较强。,顶部导航和,banner,用了大块的红色，刺激性很强，给人兴奋、激动、紧张的感觉。左侧的图片有很强的视觉冲击效果。,左侧导航红黄色渐变与,banner,色彩过渡协调一致。,整体颜色采用红黄白三色搭配，既统一又有变化，主体突出。,应知技能,19,4.,教育培训类网站赏析,欣赏新东方教育网站，网址是：,www.neworiental.org,其首页主要列出了导航菜单和网站地图，简洁明了、排列整齐。,颜色的搭配主要采用黄、绿色调，采用了类似色的搭配，给人以清新、和谐的视觉美感。,该网页给人的视觉感受是和谐美观，在模块的划分上比较明显，采用“左、中、右”三个板块,每个内容板块都采用了不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。,应知技能,20,5.,班级网站赏析,欣赏海事二班的网站，网址是：,该网站首页给人的感觉是重彩型视觉感受强烈。,整个页面色彩运用大面积的蓝色渐变为底色，使文字内容不多的页面显得不空洞，整个色彩运用蓝色和绿色为主的搭配，类似色的运用给人以和谐统一的视觉效果。,题头采用简单清晰的图片，给人以清新、大气、和谐的简单之美。,模块划分也清晰，其中也采用了动画画面，从静态中突出灵动感。整体给人温馨、和谐梦幻的感觉。,应知技能,JPEG,格式适合于照片图像，,GIF,格式适合于包含纯色的图像，例如插图和线条图。,利用图像编辑软件来放大或缩小图像,屏幕显示图像的分辨率一般为72,dpi。,制作图像时，不必使用比此再高的分辨率。,如果建立的图像中只有黑色和白色，处理时可将它保存为黑白图像格式，这样可以减少图像文件的大小。,如果设计的,GIF,格式图像包含了渐变和直线，应尽量使得它们水平，因为,GIF,格式以每条水平线为基础来压缩。,尝试各种不同的,JPEG,压缩率,使用合适的色彩模式。,慎用动画。,21,网页上使用图像要注意的问题,网页制作基本流程,应知技能,22,规划网站内容,整理素材,制作网页,测试站点,发布网站,23,模拟任务,任务背景,给一个网站选择配色方案并不容易，很考验设计师的想象力跟创意。设计人员还是需要去经历和亲眼去发现一些美，只有这样才能开拓你新的思路和想法。,任务要求,必须结合具体网站进行，网站自选，要求至少对三个网站进行色彩赏析，并且所选择的三个网站必须包括该网站的主页，报告中需写明所选择网站主页的地址，例如，某同学若选择搜狐网站。,任务,1,网页界面色彩,24,知识拓展,HTML,简介：,HTML（Hyper Text Markup Language）,又称超文本标识语言，是一种标识性的语言，是网页设计的最初语言。文件的扩展名:“,html”,或“,htm”。,HTML,文档的基本结构：,文件开始,标头区开始,.,标题区,标头区结束,文件主体内容开始,文件主体内容,文件主体内容结束,文件结束,其中,之间表示这是个网页文件，是必有的标记。,一个,HTML,文件总是由,文件头,（,HEAD,）和,文件体,（,BODY,）两部分组成。标记,和,用来说明本文件是一个,HTML,文件。,25,知识拓展,简单的,HTML,例子,欢迎光临无名的主页,这就是我,我常去的网站,Yahoo!,HTML,在浏览器中被解释,知识拓展,26,欢迎光临无名的主页,欢迎光临无名的主页,样 例,标记需要放在,中,标记中有很多是成对出现，一头一尾（结束标记前要加“,/”,）所有标记中的字母不区分大小写,通常以“,.html”,或“,htm”,为文件后缀,标记的书写格式如下：,文件内容,HTML,特点,H,yper,T,ext,M,arkup,L,anguage,独立实践,27,任务背景,在开始设计我们的第一个网站之前，首先要收集资料，学习、借鉴其他网站的精彩创意。,任务要求,访问家教类的网站，了解网站色彩匹配、栏目的设置、网站的风格、页面布局、设计风格及组成元素。,FLASH,本身导出的文件小，但表现的动画角色非常形象生动，适合网络传输；,3.FLASH,的,AS,代码非常强大，交互性强，并能与其它程序语言灵活读取；,4.,不利于搜索引擎识别，不利于搜索引擎对网站的收录。,5.,兼容性不好，访问者的浏览器的具体情况不一，导致部分访问者不能正常浏览网页。,6.,不利于网站内容的维护和更新。,7.,网站中的,flash,动画会影响网站访问速度。一个,FLASH,小有一两百,K,，多则几,M,。,Flash,在网页制作中的特点,33,应知技能,1.Flash,动画基本以图形和动画为主，所以比较适合做那些文字内容不太多，以平面、动画效果为主的应用。如：企业品牌推广、特定网上广告、交互动画、图片展示、网络游戏、导航栏等。,2.,拥有更多声效、动画、流媒体剪辑、美术效果及兼顾互动性等特征，非常适合公司作在线产品展示。,3.,在一个静态页面中，添加,Flash,动画元素不宜太多、太花，应适当分散放置，不要过于集中，动画效果的设计也要得体，否则，就会事与愿违。,Flash,在网页设计中的应用,34,模拟任务,任务背景,游戏，承载着我们童年时代的快乐和温馨。很单纯，也很灿烂。剪刀、石头、布，你输了，让我刮刮你的鼻梁。剪刀、石头、布，我赢了，让我拍拍你的手心。一种规则，百变的花样，乐此不彼。如今的孩子，玩过许多高档的玩具，也玩过许多现代的网络游戏，可谁又能肯定，他们真的比那时的我们开心快乐？下图是为年代网网站设计儿时游戏场景动画的效果图。,任务要求,图片不间断滚动是,Flash,动画常用的效果，也是在网页中较为常见的动画效果。当舞台的胶片环移出舞台时候，后面的胶片环即时跟进。滚动时要求无缝连接。,任务,1,匀速滚动胶片动画,35,模拟任务,任务背景,校园是一处惹人顾盼的好地方，处处洋溢着青春与朝气，让人尽收希望之景，也时刻体验轻盈之感。有绿树小径的校园，褪色的未名湖畔，大抵看得清是晚霞下的湖光塔景。,为年代网网站设计校园风光图片切换动画，效果下所示。,任务要求,图片切换动画是网页中最为常见的效果，一般的广告牌都是通过图片切换制作的。本任务可用,Flash,实现百叶窗的图片切换效果，遮罩动画可用来制作美观的轮显动画效果。将图片素材导入到库，将图片分别转化成为图形元件。设置补间形状动画；利用线形工具和长方形工具制作图形，进行遮罩动画的设置。,任务,2,图片切换动画,36,模拟任务,任务背景,网页上经常出现根据用户鼠标点击序号按钮进行显示图片的,Flash,动画效果。即当鼠标移动到某一序号上时，显示这一序号对应的图片。动画效果如图所示。,任务要求,在动画中实现鼠标通过序号按钮对图片的显示进行控制。通过这个任务，学习并掌握按钮控制图片展示的基本原理，熟练掌握按钮的制作与交互控制方法。,。,任务,3,轮播显示动画,37,知识拓展,1,OBJECT,标签,2,EMBED,标签,网页中插入,Flash,的,HTML,代码,38,知识拓展,3,OBJECT+EMBED,标签,若要同时使用两种标签，请将,Embed,标签放在,Object,结束标签之前。,网页中插入,Flash,的,HTML,代码,39,独立实践,任务背景,我们就去郊游，远离喧嚣的城市，到郊外去，到田野中去，到大自然的怀抱里去。去寻找变作小伞的蒲公英种子、黑黑的牵牛花种子和许许多多不知名的草种。在寻找中真正地了解一点大自然的知识，感受一点大自然的神韵，哪怕只有短短的一天。,为年代网网站设计一个旅游风光多图切换动画，制作效果如下图所示。,任务要求,利用,Flash,制作图片切换效果，在四幅图片之间切换，利用遮罩动画等表现形式，图片切换自然，美观。,任务,4,多图切换动画,40,独立实践,任务背景,我们这一代人的童年时代，没有四驱车、卡通片、变形金钢和电脑、电子游戏，但我们有爬树、打泥仗、射弹弓、玩火柴枪、游泳，简直数不胜数，再重拾这夕落的朝花，这不仅是抚摸我们的心灵家园，也为将这些弥足珍贵的儿时玩乐画面，留存于不仅在老一代的记忆之中，下图是为年代网网站设计儿时游戏场景动画的效果图。,任务要求,图片不间断滚动是,Flash,动画常用的效果，也是在网页中较为常见的动画效果。当鼠标移动到某一图片上时，滚动停止，当鼠标移开时，滚动继续。,任务,5,变速滚动胶片动画,41,独立实践,任务背景,还记得那些美好的名字如城南旧事、红高粱、铁道游击队那些黑白的，经典的影片吗？已经是那些青春岁月里最为动心的回忆了。,为年代网网站经典影视栏目设计经典影视回顾,Flash,动画，制作效果如图所示,任务要求,利用,XML,和,Flash,制作图片之间的轮流显示。,任务,6,多图轮显动画,学习目标,能力目标,1.,编辑动画元件及动画元件的属性设置。,2.,掌握制作,GIF,动画的基本操作及导出动画的步骤。,知识目标,1.GIF,动画图片制作方法。,2.GIF,动态广告制作方法。,课时分配,2,课时（授课,1,课时，实践,1,课时）。,42,应知技能,漂亮的闪图动画应用范围非常广，不仅可以在相册、动态表情里使用，还可以在,QQ,空间、论坛签名、各类回贴和博客中使用。那么这种炫彩字是如可制作出来的呢？其实制作炫彩字并不难，我们在,Fireworks,中用闪底素材,+,粘贴于内部的制作方法，可以去相当大的工作量，是一种别出心裁的方法。,输入的文本一般总是位于一个矩形的文本框中，很多情况下我们需要绘出动态的文本。为达到这个效果，我们可以绘制一条路径，然后将文本附着于路径之上，文本将随着路径的改变而改变。不过此时路径又失去了笔触、描边、填充等路径属性。,43,闪图动画,应知技能,Banner,，一般翻译为旗帜广告、横幅广告等。,Banner,是网站用来作为盈利或者是发布一些重要的信息的工具。,Banner,是网站盈利或者发布重要信息的工具。它一般以,GIF,格式的图片形式横向贯穿整个页面的顶部。,Banner,在设计上应该要做到制作美观、方便点击、与网页协调和整体构成合理。,44,Banner,广告,模拟任务,45,任务背景,闪烁的文字，最美好的问候在传递！灵巧手指在键盘上游走，一份祝福就此沿着虚拟的网络传递！为“上海蓝天家教”网站设计网站文字，效果如图所示。,任务要求,文字效果明显，文字闪烁，造型简洁，效果要求与网上流行一种超炫的闪彩文字及签名相似，在,QQ,空间，论坛签名以及各类回帖和博客里都有炫彩闪字的身影。,任务,1,闪烁文字,模拟任务,46,任务背景,Banner,指的是网页中的横幅广告，一般翻译为旗帜广告、横幅广告灯，是网站盈利或者发布重要信息的工具。它一般以,GIF,格式的图片形式横向贯穿整个页面的顶部。为上海蓝天家教网站制作,Banner,动画，效果如图所示。,任务要求,绘制一个,Banner,动画，要,求与网页协调、整体结构合理,、动作连贯，起到一个很好的,提示和宣传主题的作用,任务,2,动态,Banner,广告,模拟任务,47,任务背景,还记得儿时倾心的电影吗？还记得孩提时代不知疲倦的弄堂游戏吗？还记得依偎在妈妈身边百唱不厌的童谣吗？年代网给您打开了时光大门，让你穿越时光的隧道，回到那不能忘怀的年代。,也许，岁月的风早已把我们送到了天涯海角；也许，陪伴我们的只是老树昏鸦。知否，知否，年代网圆梦在天涯。,根据这个任务背景为年代网设计一个电影照片连续滚动的动画效果，如图所示。,任务要求,以胶片形式的动态影视，循环播放儿时倾心的老电影照片。,任务,3,匀速滚动胶片动画,知识拓展,虽然我们能够利用,FW,制作出很酷炫的动画效果，但它毕竟不是一个专业制作,GIF,动画的软件，所以纯软件生成的效果非常简单。大致可以分为以下两个类别：,1,、基本运动：,直线运动：它包含了垂直、竖直、倾斜这三种运动情况。,渐变运动：,FW,只支持两种渐变运动，一是大小渐变运动，二是可见性渐变运动，可见性即指透明度的变化，其中还包括运动过程中符号的旋转。,2,、特效运动,特效运动只有一种，即“遮照类”动画，遮照类动画有两种生成的方法，其一是利用共享文件夹（,Share Across Frames,）功能创造遮照的效果。二是真正的利用遮照功能（,Paste as mask or Group as mask,）通过被遮照物体的运动而生成遮照动画。,FW,做的,GIF,动画，需要导出为,GIF,动画格式，并且要注意到输出,GIF,动画格式时要选取好播放循环次数，在网页中要插入导出的,GIF,文件而不是,FW,制作时的,PNG,文件，这样才能够在网页中播放动画。,48,FW,动画类型画,知识拓展,一个漂亮的,Logo,，或一个有创意的,Logo,，要能够充分体现网站的核心理念，并且设计要求动感、活力、简约、大气、高品位、色彩搭配合理美观，给人的印象要深刻。网站,Logo,设计有以下标准：,（,1,）,Logo,大要好看,（,2,）,Logo,小要好看,（,3,）,Logo,黑白要好看,（,4,）,Logo,可以有各种颜色,（,5,）,Logo,可以轻易的画出来,（,6,）,Logo,在,CMYK,与,RGB,都很好看,（,7,）,Logo,能够做成动画,（,8,）,Logo,具有国际画质感,（,9,）,Logo,代表的是企业精神,（,10,）,Logo,具有广泛的应用性,（,11,）让人想穿在身上,（,12,）不要在设计,Logo,之前太在意你,Logo,要包含什么寓意,49,Logo,设计规范：,独立实践,50,任务背景,Logo,是网站特色和内涵的集中表现，是互联网上各个网站用来与其他网站链接的图形标志。一个好的,Logo,往往会放映网站某些信息，年代网网站,Logo,的设计要求能反映出这个网站的类型，或者内容，与网站的颜色、字体相协调。,任务要求,年代网网站的,Logo,采用年轮的低温加上飘逸的彩带，同时散发着光晕，寓意着人生的舞台。年代网,3,个字采用圆弧的转角形式，象征着同乡不同年代的时空隧道，整个,logo,布局饱满，色彩鲜明，生动而不失沉稳。,任务,4 Logo,动画,独立实践,51,任务背景,为上海蓝天家教网站制作,Banner,广告动画，效果如图所示。,任务要求,Banner,动画尺寸为,58050,像素，共包含,3,种状态。,任务,5 Banner,动画,52,下次再见！,53,模块,03 Fireworks,切片应用,模块引导,Fireworks,在网页切片制作方面有很强的优势，,Fireworks,的切片功能可以制作各种交互效果。例如导航按钮、导航菜单的制作。网页中的图像交换展示，这种状态其实最后导出的文件实质上就是不同状态的切片。,完整的图像只能使用一种文件格式，应用一种优化方式，而对于作为切片的各幅小图片我们可以分别对其优化，并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量，有能够使得图片变小。,切片制作好了之后，就可以对不同的切片制作不同的链接了，而不需要在大的图片上创建热区了。,本模块主要介绍网页设计中的导航按钮和菜单，图像交换展示的制作。学习者可以根据自己专业的特点，对本模块的内容进行选择。,54,55,学习目标,能力目标,1.,熟悉按钮元件及其实例。,2.,熟悉导航栏和弹出菜单的功能。,知识目标,1.,掌握按钮元件的制作。,2.,掌握导航栏的制作。,3.,掌握弹出菜单的制作。,课时分配,2,课时（授课,1,课时，实践,1,课时）。,56,应知技能,导航条实际上是一组互斥的按钮，因此，快速制作导航条的方法，就是先创建一个按钮元件，然后，在文档中多次应用，并对实例进行简单编辑。,在,Fireworks,中，可以使用按钮编辑器快速创建一个按钮元件，从库面板中，克隆多个按钮元件，就可以制作成导航栏。,创建带有样式的按钮,使用“按钮按钮编辑器”创建按钮，为了美化按钮，可以应用样式面板中的样式，还可以应用“属性面板”上的各种效果。,输入清晰的按钮文字,在网页图象中，如果使用较小的中文字体，例如,12,象素，可以使用“不消除锯齿”的宋体。使用更大的其它字体时，就需要消除锯齿了。,导航条,应知技能,弹出菜单通常是在,Web,页中由鼠标来触发的一种菜单导航效果，当鼠标移动到导航菜单上触发条件满足，就会显示出弹出菜单。当鼠标从导航菜单上移开，弹出菜单自动消失。触发条件既可以是鼠标通过（,OnMouseOver,），也可以是鼠标单击（,OnClick,），这种结构的菜单使我们能更加灵活地组织我们的菜单结构，而且下载时间又比较迅速。弹出菜单结构非常类似于一个表格，每一个导航菜单条目就好比一个单元格。,57,弹出菜单,模拟任务,58,任务背景,导航是指位于网页中水平或垂直排列的导航按钮，它起着链接网站各个页面的作用，设计的年代网导航栏效果图如图所示。,任务要求,不管用户在网站上的什么位置，都能依靠导航栏到达希望到达的地方。当鼠标单击按钮“首页”，按钮状态文字改为“年代首页”，单击按钮“影视”，按钮状态文字改为“经典影视”，单击按钮“照片”，按钮状态文字改为“老照片”，单击按钮“童谣”，按钮状态文字改为“儿时童谣”，单击按钮“游戏”，按钮状态文字改为“童年游戏”，按钮离开时，按钮状态恢复初始状态。,任务,1,创建导航栏,模拟任务,59,任务背景,弹出菜单在网页制作中是一种非常常用的菜单方式，使用,Fireworks,制作弹出菜单不但制作简单，而且效果也很好。年代网的导航栏弹出菜单效果所示。,任务要求,站点里的导航信息必须非常的简练和实用，只有那些最重要的信息才出现在导航条中，而更多的导航和内容信息通常都隐藏起来。弹出菜单要求有,2,级级联菜单，美观且具有交互性。,任务,2,创建弹出菜单,知识拓展,切片的作用是将一个大图象切割成许多小图象，然后导出到,DW,中，再加工为网页，浏览的时候可以分片下载，提高速度，对于在,PS,、,ILLUSTRATOR,中设计网页的人尤其有用，你可以在,FW,（,PS,也有此功能）中将设计的页面进行合理的切割，然后导出全部页面到,DW,中进行再加工，导出的格式最好为,JPG,，,GIF,有些不保真。,热区在,DW,中也有，但后者的热区准确率不高，因为在,DW,中不能随便放大或缩小页面，而在,FW,中，你可以用此工具任意地慢慢设置热区，也可以在,FW,中直接添加链接，再导出图片和相关代码到,DW,中，需要注意的是，如果一个图片已经用切片工具切割了，就不能再用热区工具了，热区在已切片区域上不起作用。,Fireworks,对网页进行切片输出的时候，一般都用普通的切片工具进行输出。但是如果遇到导航很多，切片重叠时候，用一般的方法就无法进行处理，这时多变形切片工具的好处就显现出来了。,需要注意的问题：,多边形切片工具不能切出圆形切片，如原图比较复杂，可多切几个边，或在,DW,中在进行热区形状编辑。,多边形工具的边数多少决定生成文件的大小，所以除非特殊需要，尽量控制多边形的边数。,60,热区和切片的作用,独立实践,61,任务背景,年代网网站有个父亲节的栏目，,90,后甚至是,10,后都讲究创意和个性，即将到来的父亲节里，为年代网父亲节栏目设计一款个性电子打火机动画，效果如图所示。,任务要求,画布【大小】为“,200,像素,400,像素”，,用按钮控制打火机的开关,任务,3,打火机动画,独立实践,62,任务背景,那些属于,90,后出生的一代，当回首往事，回忆童年的美好时光，总是记得那些欢声笑语，那些逝去的岁月，那些最天真的小伙伴！让我们在这些经典图片中，重温美好岁月！为年代网设计童年游戏导航菜单。年代网的导航栏菜单效果图所示。,任务要求,站点里的导航信息必须非常的简练和实用，只有那些最重要的信息才出现在导航条中，而更多的导航和内容信息通常都隐藏起来。弹出菜单要求有,2,级联菜单，美观且具有交互性。,任务,4,创建导航菜单,学习目标,能力目标,1.,掌握“切片”工具的使用。,2.,掌握“热点”工具的使用。,知识目标,1.,了解图像变换的概念。,2.,掌握利用行为实现网页图像变换的制作方法。,课时分配,2,课时（授课,1,课时，实践,1,课时）。,63,应知技能,64,Fireworks,的图像交互是通过切片或热区实现，切片就成为了创建交互性网页的一个基本方法，现在利用切片就可以实现交互功能。切片就是将图像切成很多不同的部分，它是一种网页对象，不是以图像形式存在，而是以,HTML,代码的形式出现。,Photoshop,也有切片功能，但相比,Fireworks,来说，无论在操作上和功能上都有一定的差距。,使用,Fireworks,都不仅可以轻松地制作出十分动感的,GIF,动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，,Fireworks,将是最大的功臣。,利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。,切片与热区,模拟任务,65,任务背景,为年代网的首页设计,2,个广告图像的变换，效果如图所示。,任务要求,当用户浏览网页时，鼠标指针滑过一个广告图像，该图像变化成另一个广告图像。,任务,1,使用行为交换图像,模拟任务,66,任务背景,回到了童年去过的地方，也是一件非常有趣味的玩法，为年代网重温儿时的记忆栏目设计一个动物观赏大图片显示动画，效果如图所示。,任务要求,当鼠标移动到任意一个小动物时，在中心位置显示该动物的大图片。,任务,2,使用切片交换图像,模拟任务,67,任务背景,家庭养花，陶冶性情，为花卉网站网设计一个经典花卉展示，效果如图所示。,任务要求,当鼠标移动到任意一个数字序号时候，在中心位置显示该序号的图片。,任务,3,使用热区交换图像,知识拓展,68,Dreamweaver,调用,Fireworks,图像,Dreamweaver,和,Fireworks,识别和共享许多相同的文件编辑结果，其中包括对链接、图像映射、切片、导航栏、弹出菜单等的更改。这两个应用程序共同为在,HTML,页面中编辑、优化和放置网页图形文件提供了一个优化的工作流程。,可以在,Photoshop,、,Fireworks,页面布局中，为图像交换、导航栏定义好大小和位置，也可以直接在,Dreamweaver,中，使用图像占位符、,CSS+DIV,，为图像交换、导航栏定义好大小和位置，该位置允许用户指定,Dreamweaver,中将来放置的,Fireworks,图像的大小和位置。,1,使用,Dreamweaver,占位符调用,Fireworks,图像,2,将,Fireworks HTML,复制到剪贴板在,Dreamweaver,中使用,独立实践,69,任务背景,曾经，我们在回家时候总想着那些游戏明天可以继续，蓦然回首，那些都已经是记忆的碎片。童年的游乐不是一辈子的游戏，童年是短暂的，它晃眼即逝，留下的只有温暖的回忆。,为年代网设计儿时游戏场景动画，效果如图所示。,任务要求,当鼠标移动到任意一个儿时游戏小图片，在中心位置显示该游戏的大图片。,任务,4,童年的游戏,独立实践,70,任务背景,一首童谣、一部电影、一种游戏，甚至是一张时隔多年的泛黄的老照片，就是人们的怀旧情结。它总是零零散散地让人们感念自己所处的年代和时光，因此，年代网便应运而生。今天，在向前奔成为生活主旋律的时代，谁不渴望寻找到心灵的净土？谁不想找回往日的温馨？谁不想找到灵魂的栖息地？。,为年代网经典影视栏目设计,60,年代、,70,年代、,80,年代、,90,年,代经典影视回顾，效果如图所示。,任务要求,分别给每一个年代设计一个导航栏按钮，鼠标划过按钮，在中心区域显示该年代经典电影,4,部。,任务,5,经典影视展示,71,下次再见！,72,模块,04,网页界面切图,模块引导,如果网页上的图片较大，浏览器下载整个图片需要花很长时间。“切片”工具可以将整个图片分为多个不同的小图片，从而实现分开下载，这样下载的时间就大大缩短了。,Photoshop,专注于设计，切片的话，用,Freworks,更专业，切片将,Fireworks,文档分割成多个较小的部分，并将每部分导出为单独的文件。导出时，,Fireworks,还创建一个包含表格代码的,HTML,文件，切片最终是以,HTML,代码的形式出现的网页对象，而不是以图像的形式存在，通过【层】面板中的“网页层”查看、选择和重命名切片，浏览器中通过没有间距和宽度的表格重新将这些小的图像没有缝隙地拼接起来，成为一幅完整的图像。,73,74,学习目标,能力目标,1.,了解切图的基本方法。,2.,了解“网页层”的作用。,知识目标,1.,掌握图像的优化。,2.,掌握,Firewors,与,Dreamweaver,的相互配合。,课时分配,2,课时（授课,1,课时，实践,1,课时）。,75,应知技能,如果网页上的图片较大，浏览器下载整个图片需要花很长时间。“切片”工具可以将整个图片分为多个不同的小图片，从而实现分开下载，这样下载的时间就大大缩短了。,Photoshop,专注于设计，切片的话，用,Freworks,更专业，切片将,Fireworks,文档分割成多个较小的部分，并将每部分导出为单独的文件。导出时，,Fireworks,还创建一个包含表格代码的,HTML,文件，切片最终是以,HTML,代码的形式出现的网页对象，而不是以图像的形式存在，通过【层】面板中的“网页层”查看、选择和重命名切片，浏览器中通过没有间距和宽度的表格重新将这些小的图像没有缝隙地拼接起来，成为一幅完整的图像。,Fireworks,切图技术,模拟任务,76,任务背景,用户在浏览网页时，总希望它尽可能地呈现在眼前，减少等等时间，请将“,60,年代主页面”中“经典影视”“童谣”“老照片”“游戏”栏目页面进行切割。,任务要求,切割时要优化图像，以获得最快的下载速度，易于更新，适用于经常更改的网页部分，避免无谓的全盘改动。,任务,1,切割年代网,60,年代主页面,模拟任务,77,任务背景,年代网老照片回忆栏目为你展示的那一张张熟悉而陌生的照片，模糊了岁月的面貌，裹挟着经年的风霜，愈发出时代的迷人的光辉。,任务要求,网站页面【大小】为“,1003,像素,800,像素”，各年代板块的图片能通过鼠标单击图片序号进行展示，效果如图,4-5,所示。,任务,2,制作年代网老照片展示页面,78,知识拓展,一般的网站制作步骤大体上为：设计效果图，然后切图，再制作静态,html,模板，最后嵌套至,CMS,（内容管理系统），其中，切图虽然是很简单的一个步骤，但其中也有很多技巧。,图切得越小越好，图切得越少越好。,对于一整张图来说，同时达到以上两个目标是矛盾的。针对这点，一般将一个网页切成,20,30,个图加载速度是不受影响的。,一行一行地切，背景图切成小条。,能用背景平铺的则就切成,1,个像素或相对适合的像素大小，不要使用整张图片做背景，不能分开的不要切分。,按颜色来区分来切图,一个区域颜色少的话就切分一块，颜色复杂的区域再切分一块，依次类推。然后就可以将颜色少的块指定文件类型为,GIF,格式，颜色复杂的指定为,JPG,格式，尽量让出纯色的区域，可以在,HTML,里实现。,Fireworks,切图原则,79,能用,CSS,写的颜色，坚决不要用图片,如果能把纯色的部分用,CSS,来写，而不因为省事直接切图，就会极大提高网站的运行效率。,比如，如果仅仅只有背景色的导航条，而没有栏目，不建议将导航条的背景直接切成图片，可以用,div,定义好宽和高设置背景色和边框，一行代码就搞定。如果遇到有渐变色的背景，可以沿着与渐变色相同方向切一个像素的条纹，用,CSS,中,background,的,repeat-x,或,repeat-y,来自动填充。,文字不要切成图片,一般情况下都不会把文字切成图，除非用到比较特殊字体。,尽量使用有透明效果的存储格式,如果图片中使用了透明效果，要存储成,PNG-8,的格式，,PNG,的其他格式要么不支持透明，要么保存时文件要大很多，,PNG-8,是“性价比”最高的。,Fireworks,切图原则,知识拓展,80,适宜的图像尺寸,千万不能不压缩图片直接放上去，然后靠,width,和,height,来进行限制，这样做是自欺欺人，浏览器会先把大图片下载到本地，然后用样式强制将它压缩，显示不但不会更清楚，反而会失真，一定要对图片尺寸进行处理后再上传，一般处理图片的宽度为,500-600,像素之间，高度自动等比例即可。图片质量一般不用太高，,JPEG,格式的保持在,60,就可以。,切图命名规范,切好图片的命名也要养成良好的习惯，最好的命名习惯就是见名知意，对于一个扩展性强的网站来说，在进行改版和维护的时候，如果要更换某些网站图片，就需要一个一个从浏览器中右键查看图片地址，记下每一个长长的没有规律的图片名称，这会让技术人员十分崩溃，所以，在保存图片时就给它写上有意义的名字是很必要的。,Fireworks,切图原则,知识拓展,独立实践,81,任务背景,在教师节来临之际，您是否想到如何为老师的默默耕耘送上自己的一份感恩，为老师送上一份贴心的教师节礼物？如今花成为教师节必备的礼物，那么教师节送什么样的花比较好呢？下面花卉网站将为大家介绍几种今年比较流行的花。参考效果如图所示。,任务要求,网站页面【大小】为,“,1000,像素,800,像素”，网站,包括页眉、用户登录和导航,、主要内容和页脚等部分。,其中，页眉又包括,Logo,、,Banner,、导航和弹出菜单等；,主要内容部分包括动画和切片等。,任务,3,制作花卉网站主页,学习目标,能力目标,1.,了解切图的基本方法。,2.,掌握单层切片的导出。,知识目标,1.,掌握存储为,Web,所用格式的面板功能设置。,2.,掌握,Photoshop,与,Dreamweaver,的相互配合。,课时分配,2,课时（授课,1,课时，实践,1,课时）。,82,应知技能,83,切图，是一种网页制作技术，它是将美工效果图转换为页面效果图的重要技术。,Photoshop,、,Fireworks,等软件提供了切图技术，切图后可以直接导出为网页格式。切片，是切图的直接结果，切图实际上就将图切分为一系列的切片。,PS,和,FW,均可以用于切图