网页设计与动态网站开发ppt课件(完整版)

1、1网页设计与动态网站开发2模块01 网页赏析模块引导网页设计作为一种视觉语言，特别讲究编排、布局和色彩，虽然主页的设计不等同于平面设计，但它们有许多相近之处。版式设计通过文字图形的空间组合，表达出和谐与美。为了达到最佳的视觉表现效果，设计者需要反复推敲整体布局和色彩匹配的合理性，使浏览者有一个流畅的视觉体验。本模块主要通过对网页界面布局、网页界面色彩的赏析，了解网站风格及创意的重要性，以及有关网页界面布局、网页界面色彩的基础知识，为后续学习打下基础。34学习目标能力目标1. 能够分析页面结构图。2. 能够绘制网页布局。知识目标1.了解版面布局的特点。2. 掌握常见的版面布局形式。课时分配1课时

2、（授课0.5课时，实践0.5课时）。5应知技能欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣。分析优秀网页的布局结构、视觉效果，留下直观的第一印象，为学习制作网页奠定基础。对网页的组成元素有一个初步印象。学习创建网站、制作网页之前，我们先浏览几个典型页面布局，对这些网站的主页进行分析，了解典型的网页的布局结构。网页界面布局6应知技能国字型布局一般最上面是网站标题及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种布局的优点是充分利用版面，信息量大，与其他页面的链接切换方便，缺点是页面拥挤

3、，四面封闭，广告占面积大，令人感到憋气。7应知技能T字型布局页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以最大可能性获取，而且很方便，其次是页面结构清晰，主次分明。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。8应知技能三字型布局这是一种简洁明快的网页布局，在高校中用得比较多。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与大图片。如图所示即是一种三字形布局的网页。9应知技能川字型布局“川”字

4、形布局：整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能，一般适用在栏目较多的网站里。10应知技能封面型布局这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 11应知技能“国”字型布局“厂”字型布局“框架”型布局“封面”型布局“Flash”型布局为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。12模拟任务任务背景 从网页的界面设计

5、布局特色、风格、实用性、与网页所承载内容的匹配性以及其他方面对典型网站页面作出详细评析，总结其优点和不足。任务要求 必须结合具体网站进行，网站自选，要求至少对三个网站进行布局赏析，并且所选择的三个网站必须包括该网站的主页，主页的布局必须是比较常用布局，报告中需写明所选择网站主页的地址，例如，某同学若选择年代网网站。 对所选择的网站进行布局赏析，主要从文字、图像、版式、视觉流程、布局等方面介绍网站设计的基本构成与创意思维。任务1 网页界面布局13知识拓展网页布局设计黄金分割使用黄金分割是非常简单的。例如找到页面中Main Content主要内容和sidebar列表的宽度900px。使用内容区域总

6、的宽度除以1.618，然后得到556.24px。不需要很精确，就用556px。现在就能知道主要内容元素是556px的宽度，sidebar是344px。也可以使用黄金分割到其他元素的宽度和高度。14独立实践任务背景 阿里巴巴中国站（）被google收录的中文网页数量要远远高于同类网站的平均水平，更重要的是，阿里巴巴的网页质量比较高，潜在用户更容易通过搜索引擎检索发现发布在阿里巴巴网站的商业信息，阿里巴巴也因此获得更大的网站访问量和更多的用户。任务要求对阿里巴巴的网页设计布局，从下面5个方面进行分析。从整体结构看从页面的相互关系看页面分割的角度看从页面对比的角度看从页面和谐的角度看任务2 界面布局

7、分析学习目标15能力目标1. 了解色彩基本理论。2. 了解色彩搭配的技巧。知识目标1.掌握网页常用的配色。2. 网页中的色彩设计。课时分配1课时（授课0.5课时，实践0.5课时）。应知技能161.公司类网站赏析该首页给人以清新、爽朗的感受，首页的整体布局为“上、中、下”三个版块，中间的主体内容又分为“左、中、右”三个版块。颜色对比较为强烈，重点突出主要采用浅灰和玫瑰红为主，浅灰色给人柔和、高雅的感受，玫瑰红给人温馨、浪漫的感受。首页题头的动画效果体现了海尔集团的理念和品质，让人既想到家的感觉又能记住该品牌。导航栏的颜色鲜明，文字与背景色对比强烈，引人注目。二级导航采用横式排列，其优点是不会遮住

8、下面正文的内容。应知技能172.旅游类网站赏析欣赏“凤凰古城旅游网”，网址是：。该首页给人的视觉效果是一种古朴的气息迎面扑来，整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。主页题头的凤凰古城图片恰到好处，突出了主题，同时也起到了广告作用。导航栏的文字颇具特色。首页的模块划分采用的是左右两大模块，内容划分清晰。应知技能183.体育类网站赏析欣赏“中国大众体育网”，网址是：该网站整体视觉感受简洁、现代感较强。顶部导航和banner用了大块的红色，刺激性很强，给人兴奋、激动、紧张的感觉。左侧的图片有很强的视觉冲击效果。左侧导航红黄色渐变与banner色彩过渡协调一致。整体颜色采用红黄

9、白三色搭配，既统一又有变化，主体突出。应知技能194.教育培训类网站赏析欣赏新东方教育网站，网址是：其首页主要列出了导航菜单和网站地图，简洁明了、排列整齐。颜色的搭配主要采用黄、绿色调，采用了类似色的搭配，给人以清新、和谐的视觉美感。该网页给人的视觉感受是和谐美观，在模块的划分上比较明显，采用“左、中、右”三个板块每个内容板块都采用了不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。应知技能205.班级网站赏析欣赏海事二班的网站，网址是：该网站首页给人的感觉是重彩型视觉感受强烈。整个页面色彩运用大面积的蓝色渐变为底色，使文字内容不多的页面显得不空洞，整个色彩运用蓝色和绿色为主的搭配

10、，类似色的运用给人以和谐统一的视觉效果。题头采用简单清晰的图片，给人以清新、大气、和谐的简单之美。模块划分也清晰，其中也采用了动画画面，从静态中突出灵动感。整体给人温馨、和谐梦幻的感觉。应知技能JPEG格式适合于照片图像，GIF格式适合于包含纯色的图像，例如插图和线条图。利用图像编辑软件来放大或缩小图像屏幕显示图像的分辨率一般为72dpi。制作图像时，不必使用比此再高的分辨率。如果建立的图像中只有黑色和白色，处理时可将它保存为黑白图像格式，这样可以减少图像文件的大小。如果设计的GIF格式图像包含了渐变和直线，应尽量使得它们水平，因为GIF格式以每条水平线为基础来压缩。尝试各种不同的JPEG压缩

11、率使用合适的色彩模式。慎用动画。21网页上使用图像要注意的问题网页制作基本流程应知技能 22规划网站内容整理素材制作网页测试站点发布网站23模拟任务任务背景给一个网站选择配色方案并不容易，很考验设计师的想象力跟创意。设计人员还是需要去经历和亲眼去发现一些美，只有这样才能开拓你新的思路和想法。任务要求 必须结合具体网站进行，网站自选，要求至少对三个网站进行色彩赏析，并且所选择的三个网站必须包括该网站的主页，报告中需写明所选择网站主页的地址，例如，某同学若选择搜狐网站。任务1 网页界面色彩24知识拓展HTML简介：HTML（Hyper Text Markup Language）又称超文本标识语言，

12、是一种标识性的语言，是网页设计的最初语言。文件的扩展名:“html”或“htm”。HTML文档的基本结构：文件开始 标头区开始 .标题区 标头区结束 文件主体内容开始 文件主体内容 文件主体内容结束 文件结束其中之间表示这是个网页文件，是必有的标记。一个HTML文件总是由文件头（HEAD）和文件体（BODY）两部分组成。标记和用来说明本文件是一个HTML文件。25知识拓展简单的HTML例子欢迎光临无名的主页这就是我我常去的网站, Yahoo! HTML在浏览器中被解释知识拓展26欢迎光临无名的主页欢迎光临无名的主页样 例标记需要放在中标记中有很多是成对出现，一头一尾（结束标记前要加“/”）所有

13、标记中的字母不区分大小写通常以“.html”或“htm”为文件后缀标记的书写格式如下： 文件内容HTML特点 HyperText Markup Language 独立实践27任务背景在开始设计我们的第一个网站之前，首先要收集资料，学习、借鉴其他网站的精彩创意。任务要求访问家教类的网站，了解网站色彩匹配、栏目的设置、网站的风格、页面布局、设计风格及组成元素。/shanghai/任务2访问Internet上的家教类网站 28下次再见！29模块02 网页动画应用模块引导Flash和Fireworks都能做动画，而且他们现在都同属Adobe公司，大多数网页动画都是用Flash这个软件做的，因为该软件做

14、出来的动画文件很小，下载和打开的速度快。他们两个各有各的优势，Flash是专业做动画的，可以制作一幅幅生动的Flash动画放置在网页中，使枯燥的网页变得生动活泼起来，使网页更加有吸引力，更增加了与浏览者的互动性。Fireworks的动画是GIF图片格式的，做出来的动画文件也很小，Fireworks的切片功能，可以使动画的交互制作变得更方便，相对于Flash而言，并不需要很高的技术，很容易实现对图片的动画展示。本模块主要介绍网页设计中动画的几种经典表现，图片动画展示、GIF动画设计的基本方法和典型实例的制作。学习者可以根据自己专业的特点，对本模块的内容进行选择。3031学习目标能力目标1. 灵活

15、运用遮罩动画，制作特殊动画效果。2. 掌握网页图片展示中经典表现形式其制作方法。知识目标1. 掌握动作脚本添加的方式。2. 掌握按钮在交互动画中的简单脚本编写。课时分配4课时（授课2课时，实践2课时）。应知技能1.Flash具有亲和力强、动感互动等多媒体的特性，可以把界面，按钮等制作得非常动感。2. FLASH本身导出的文件小，但表现的动画角色非常形象生动，适合网络传输；3. FLASH的AS代码非常强大，交互性强，并能与其它程序语言灵活读取；4.不利于搜索引擎识别，不利于搜索引擎对网站的收录。5.兼容性不好，访问者的浏览器的具体情况不一，导致部分访问者不能正常浏览网页。6.不利于网站内容的维

16、护和更新。7.网站中的flash动画会影响网站访问速度。一个FLASH小有一两百K，多则几M。Flash在网页制作中的特点33应知技能1. Flash动画基本以图形和动画为主，所以比较适合做那些文字内容不太多，以平面、动画效果为主的应用。如：企业品牌推广、特定网上广告、交互动画、图片展示、网络游戏、导航栏等。2.拥有更多声效、动画、流媒体剪辑、美术效果及兼顾互动性等特征，非常适合公司作在线产品展示。3.在一个静态页面中，添加Flash动画元素不宜太多、太花，应适当分散放置，不要过于集中，动画效果的设计也要得体，否则，就会事与愿违。Flash在网页设计中的应用34模拟任务任务背景 游戏，承载着我

17、们童年时代的快乐和温馨。很单纯，也很灿烂。剪刀、石头、布，你输了，让我刮刮你的鼻梁。剪刀、石头、布，我赢了，让我拍拍你的手心。一种规则，百变的花样，乐此不彼。如今的孩子，玩过许多高档的玩具，也玩过许多现代的网络游戏，可谁又能肯定，他们真的比那时的我们开心快乐？下图是为年代网网站设计儿时游戏场景动画的效果图。任务要求 图片不间断滚动是Flash动画常用的效果，也是在网页中较为常见的动画效果。当舞台的胶片环移出舞台时候，后面的胶片环即时跟进。滚动时要求无缝连接。任务1 匀速滚动胶片动画35模拟任务任务背景 校园是一处惹人顾盼的好地方，处处洋溢着青春与朝气，让人尽收希望之景，也时刻体验轻盈之感。有绿

18、树小径的校园，褪色的未名湖畔，大抵看得清是晚霞下的湖光塔景。 为年代网网站设计校园风光图片切换动画，效果下所示。任务要求 图片切换动画是网页中最为常见的效果，一般的广告牌都是通过图片切换制作的。本任务可用Flash实现百叶窗的图片切换效果，遮罩动画可用来制作美观的轮显动画效果。将图片素材导入到库，将图片分别转化成为图形元件。设置补间形状动画；利用线形工具和长方形工具制作图形，进行遮罩动画的设置。任务2 图片切换动画36模拟任务任务背景 网页上经常出现根据用户鼠标点击序号按钮进行显示图片的Flash动画效果。即当鼠标移动到某一序号上时，显示这一序号对应的图片。动画效果如图所示。任务要求 在动画中

19、实现鼠标通过序号按钮对图片的显示进行控制。通过这个任务，学习并掌握按钮控制图片展示的基本原理，熟练掌握按钮的制作与交互控制方法。任务3 轮播显示动画37知识拓展1OBJECT标签2 EMBED标签网页中插入Flash的HTML代码38知识拓展3OBJECT+EMBED标签若要同时使用两种标签，请将Embed 标签放在Object 结束标签之前。网页中插入Flash的HTML代码39独立实践任务背景 我们就去郊游，远离喧嚣的城市，到郊外去，到田野中去，到大自然的怀抱里去。去寻找变作小伞的蒲公英种子、黑黑的牵牛花种子和许许多多不知名的草种。在寻找中真正地了解一点大自然的知识，感受一点大自然的神韵，

20、哪怕只有短短的一天。为年代网网站设计一个旅游风光多图切换动画，制作效果如下图所示。任务要求 利用Flash制作图片切换效果，在四幅图片之间切换，利用遮罩动画等表现形式，图片切换自然，美观。任务4 多图切换动画40独立实践任务背景 我们这一代人的童年时代，没有四驱车、卡通片、变形金钢和电脑、电子游戏，但我们有爬树、打泥仗、射弹弓、玩火柴枪、游泳，简直数不胜数，再重拾这夕落的朝花，这不仅是抚摸我们的心灵家园，也为将这些弥足珍贵的儿时玩乐画面，留存于不仅在老一代的记忆之中，下图是为年代网网站设计儿时游戏场景动画的效果图。任务要求 图片不间断滚动是Flash动画常用的效果，也是在网页中较为常见的动画效

21、果。当鼠标移动到某一图片上时，滚动停止，当鼠标移开时，滚动继续。任务5 变速滚动胶片动画41独立实践任务背景 还记得那些美好的名字如城南旧事、红高粱、铁道游击队那些黑白的，经典的影片吗？已经是那些青春岁月里最为动心的回忆了。为年代网网站经典影视栏目设计经典影视回顾Flash动画，制作效果如图所示任务要求利用XML和Flash制作图片之间的轮流显示。任务6 多图轮显动画学习目标能力目标1. 编辑动画元件及动画元件的属性设置。2. 掌握制作GIF动画的基本操作及导出动画的步骤。知识目标1. GIF动画图片制作方法。2. GIF动态广告制作方法。课时分配2课时（授课1课时，实践1课时）。42应知技能

22、漂亮的闪图动画应用范围非常广，不仅可以在相册、动态表情里使用，还可以在QQ空间、论坛签名、各类回贴和博客中使用。那么这种炫彩字是如可制作出来的呢？其实制作炫彩字并不难，我们在Fireworks中用闪底素材+粘贴于内部的制作方法，可以去相当大的工作量，是一种别出心裁的方法。输入的文本一般总是位于一个矩形的文本框中，很多情况下我们需要绘出动态的文本。为达到这个效果，我们可以绘制一条路径，然后将文本附着于路径之上，文本将随着路径的改变而改变。不过此时路径又失去了笔触、描边、填充等路径属性。43闪图动画应知技能Banner，一般翻译为旗帜广告、横幅广告等。Banner是网站用来作为盈利或者是发布一些重

23、要的信息的工具。Banner是网站盈利或者发布重要信息的工具。它一般以GIF格式的图片形式横向贯穿整个页面的顶部。Banner在设计上应该要做到制作美观、方便点击、与网页协调和整体构成合理。44Banner广告模拟任务45任务背景闪烁的文字，最美好的问候在传递！灵巧手指在键盘上游走，一份祝福就此沿着虚拟的网络传递！为“上海蓝天家教”网站设计网站文字，效果如图所示。任务要求文字效果明显，文字闪烁，造型简洁，效果要求与网上流行一种超炫的闪彩文字及签名相似，在QQ空间，论坛签名以及各类回帖和博客里都有炫彩闪字的身影。任务1 闪烁文字模拟任务46任务背景Banner指的是网页中的横幅广告，一般翻译为旗

24、帜广告、横幅广告灯，是网站盈利或者发布重要信息的工具。它一般以GIF格式的图片形式横向贯穿整个页面的顶部。为上海蓝天家教网站制作Banner动画，效果如图所示。任务要求绘制一个Banner动画，要求与网页协调、整体结构合理、动作连贯，起到一个很好的提示和宣传主题的作用任务2 动态Banner广告模拟任务47任务背景还记得儿时倾心的电影吗？还记得孩提时代不知疲倦的弄堂游戏吗？还记得依偎在妈妈身边百唱不厌的童谣吗？年代网给您打开了时光大门，让你穿越时光的隧道，回到那不能忘怀的年代。也许，岁月的风早已把我们送到了天涯海角；也许，陪伴我们的只是老树昏鸦。知否，知否，年代网圆梦在天涯。根据这个任务背景为

25、年代网设计一个电影照片连续滚动的动画效果，如图所示。任务要求以胶片形式的动态影视，循环播放儿时倾心的老电影照片。任务3 匀速滚动胶片动画知识拓展虽然我们能够利用FW制作出很酷炫的动画效果，但它毕竟不是一个专业制作GIF动画的软件，所以纯软件生成的效果非常简单。大致可以分为以下两个类别：1、基本运动：直线运动：它包含了垂直、竖直、倾斜这三种运动情况。渐变运动：FW只支持两种渐变运动，一是大小渐变运动，二是可见性渐变运动，可见性即指透明度的变化，其中还包括运动过程中符号的旋转。2、特效运动特效运动只有一种，即“遮照类”动画，遮照类动画有两种生成的方法，其一是利用共享文件夹（Share Across

26、 Frames）功能创造遮照的效果。二是真正的利用遮照功能（Paste as mask or Group as mask）通过被遮照物体的运动而生成遮照动画。FW做的GIF动画，需要导出为GIF动画格式，并且要注意到输出GIF动画格式时要选取好播放循环次数，在网页中要插入导出的GIF文件而不是FW制作时的PNG文件，这样才能够在网页中播放动画。48FW动画类型画知识拓展一个漂亮的Logo，或一个有创意的Logo，要能够充分体现网站的核心理念，并且设计要求动感、活力、简约、大气、高品位、色彩搭配合理美观，给人的印象要深刻。网站Logo设计有以下标准：（1）Logo大要好看 （2）Logo小要好看

27、 （3）Logo黑白要好看 （4）Logo可以有各种颜色 （5）Logo可以轻易的画出来 （6）Logo在CMYK与RGB都很好看 （7）Logo能够做成动画 （8）Logo具有国际画质感（9）Logo代表的是企业精神 （10）Logo具有广泛的应用性 （11）让人想穿在身上（12）不要在设计Logo之前太在意你Logo要包含什么寓意49Logo设计规范：独立实践50任务背景Logo是网站特色和内涵的集中表现，是互联网上各个网站用来与其他网站链接的图形标志。一个好的Logo往往会放映网站某些信息，年代网网站Logo的设计要求能反映出这个网站的类型，或者内容，与网站的颜色、字体相协调。任务要求年

28、代网网站的Logo采用年轮的低温加上飘逸的彩带，同时散发着光晕，寓意着人生的舞台。年代网3个字采用圆弧的转角形式，象征着同乡不同年代的时空隧道，整个logo布局饱满，色彩鲜明，生动而不失沉稳。任务4 Logo动画独立实践51任务背景为上海蓝天家教网站制作Banner广告动画，效果如图所示。任务要求Banner动画尺寸为58050像素，共包含3种状态。任务5 Banner动画52下次再见！53模块03 Fireworks切片应用模块引导Fireworks在网页切片制作方面有很强的优势，Fireworks的切片功能可以制作各种交互效果。例如导航按钮、导航菜单的制作。网页中的图像交换展示，这种状态其

29、实最后导出的文件实质上就是不同状态的切片。完整的图像只能使用一种文件格式，应用一种优化方式，而对于作为切片的各幅小图片我们可以分别对其优化，并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量，有能够使得图片变小。切片制作好了之后，就可以对不同的切片制作不同的链接了，而不需要在大的图片上创建热区了。本模块主要介绍网页设计中的导航按钮和菜单，图像交换展示的制作。学习者可以根据自己专业的特点，对本模块的内容进行选择。5455学习目标能力目标1. 熟悉按钮元件及其实例。2. 熟悉导航栏和弹出菜单的功能。知识目标1. 掌握按钮元件的制作。2. 掌握导航栏的制作。3. 掌握弹出菜单的制作

30、。课时分配2课时（授课1课时，实践1课时）。56应知技能导航条实际上是一组互斥的按钮，因此，快速制作导航条的方法，就是先创建一个按钮元件，然后，在文档中多次应用，并对实例进行简单编辑。在 Fireworks 中，可以使用按钮编辑器快速创建一个按钮元件，从库面板中，克隆多个按钮元件，就可以制作成导航栏。创建带有样式的按钮使用“按钮按钮编辑器”创建按钮，为了美化按钮，可以应用样式面板中的样式，还可以应用“属性面板”上的各种效果。输入清晰的按钮文字在网页图象中，如果使用较小的中文字体，例如12象素，可以使用“不消除锯齿”的宋体。使用更大的其它字体时，就需要消除锯齿了。导航条应知技能弹出菜单通常是在W

31、eb页中由鼠标来触发的一种菜单导航效果，当鼠标移动到导航菜单上触发条件满足，就会显示出弹出菜单。当鼠标从导航菜单上移开，弹出菜单自动消失。触发条件既可以是鼠标通过（OnMouseOver），也可以是鼠标单击（OnClick），这种结构的菜单使我们能更加灵活地组织我们的菜单结构，而且下载时间又比较迅速。弹出菜单结构非常类似于一个表格，每一个导航菜单条目就好比一个单元格。57弹出菜单模拟任务58任务背景导航是指位于网页中水平或垂直排列的导航按钮，它起着链接网站各个页面的作用，设计的年代网导航栏效果图如图所示。任务要求不管用户在网站上的什么位置，都能依靠导航栏到达希望到达的地方。当鼠标单击按钮“首页

32、”，按钮状态文字改为“年代首页”，单击按钮“影视”，按钮状态文字改为“经典影视”，单击按钮“照片”，按钮状态文字改为“老照片”，单击按钮“童谣”，按钮状态文字改为“儿时童谣”，单击按钮“游戏”，按钮状态文字改为“童年游戏”，按钮离开时，按钮状态恢复初始状态。任务1 创建导航栏模拟任务59任务背景弹出菜单在网页制作中是一种非常常用的菜单方式，使用Fireworks制作弹出菜单不但制作简单，而且效果也很好。年代网的导航栏弹出菜单效果所示。任务要求站点里的导航信息必须非常的简练和实用，只有那些最重要的信息才出现在导航条中，而更多的导航和内容信息通常都隐藏起来。弹出菜单要求有2级级联菜单，美观且具有交

33、互性。任务2 创建弹出菜单知识拓展切片的作用是将一个大图象切割成许多小图象，然后导出到DW中，再加工为网页，浏览的时候可以分片下载，提高速度，对于在PS、ILLUSTRATOR中设计网页的人尤其有用，你可以在FW（PS也有此功能）中将设计的页面进行合理的切割，然后导出全部页面到DW中进行再加工，导出的格式最好为JPG，GIF有些不保真。热区在DW中也有，但后者的热区准确率不高，因为在DW中不能随便放大或缩小页面，而在FW中，你可以用此工具任意地慢慢设置热区，也可以在FW中直接添加链接，再导出图片和相关代码到DW中，需要注意的是，如果一个图片已经用切片工具切割了，就不能再用热区工具了，热区在已切

34、片区域上不起作用。Fireworks对网页进行切片输出的时候，一般都用普通的切片工具进行输出。但是如果遇到导航很多，切片重叠时候，用一般的方法就无法进行处理，这时多变形切片工具的好处就显现出来了。需要注意的问题：多边形切片工具不能切出圆形切片，如原图比较复杂，可多切几个边，或在DW中在进行热区形状编辑。多边形工具的边数多少决定生成文件的大小，所以除非特殊需要，尽量控制多边形的边数。60热区和切片的作用独立实践61任务背景年代网网站有个父亲节的栏目，90后甚至是10后都讲究创意和个性，即将到来的父亲节里，为年代网父亲节栏目设计一款个性电子打火机动画，效果如图所示。任务要求画布【大小】为“200像

35、素400像素”，用按钮控制打火机的开关任务3 打火机动画独立实践62任务背景那些属于90后出生的一代，当回首往事，回忆童年的美好时光，总是记得那些欢声笑语，那些逝去的岁月，那些最天真的小伙伴！让我们在这些经典图片中，重温美好岁月！为年代网设计童年游戏导航菜单。年代网的导航栏菜单效果图所示。任务要求站点里的导航信息必须非常的简练和实用，只有那些最重要的信息才出现在导航条中，而更多的导航和内容信息通常都隐藏起来。弹出菜单要求有2级联菜单，美观且具有交互性。任务4 创建导航菜单学习目标能力目标1. 掌握“切片”工具的使用。2. 掌握“热点”工具的使用。知识目标1. 了解图像变换的概念。2. 掌握利用

36、行为实现网页图像变换的制作方法。课时分配2课时（授课1课时，实践1课时）。63应知技能64Fireworks的图像交互是通过切片或热区实现，切片就成为了创建交互性网页的一个基本方法，现在利用切片就可以实现交互功能。切片就是将图像切成很多不同的部分，它是一种网页对象，不是以图像形式存在，而是以HTML代码的形式出现。Photoshop也有切片功能，但相比Fireworks来说，无论在操作上和功能上都有一定的差距。使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。利用可视

37、化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。切片与热区模拟任务65任务背景为年代网的首页设计2个广告图像的变换，效果如图所示。任务要求当用户浏览网页时，鼠标指针滑过一个广告图像，该图像变化成另一个广告图像。任务1 使用行为交换图像模拟任务66任务背景回到了童年去过的地方，也是一件非常有趣味的玩法，为年代网重温儿时的记忆栏目设计一个动物观赏大图片显示动画，效果如图所示。任务要求当鼠标移动到任意一个小动物时，在中心位置显示该动物的大图片。任务2 使用切片交换图像模拟任务67任务背景家庭养花，陶冶性情，为花卉网站网设计一个经典花卉展示，效果如图所示。任务要求当鼠

38、标移动到任意一个数字序号时候，在中心位置显示该序号的图片。任务3 使用热区交换图像知识拓展68Dreamweaver 调用Fireworks图像Dreamweaver和Fireworks识别和共享许多相同的文件编辑结果，其中包括对链接、图像映射、切片、导航栏、弹出菜单等的更改。这两个应用程序共同为在HTML页面中编辑、优化和放置网页图形文件提供了一个优化的工作流程。可以在Photoshop、Fireworks页面布局中，为图像交换、导航栏定义好大小和位置，也可以直接在Dreamweaver中，使用图像占位符、CSS+DIV，为图像交换、导航栏定义好大小和位置，该位置允许用户指定Dreamwea

39、ver中将来放置的Fireworks图像的大小和位置。1使用Dreamweaver占位符调用Fireworks图像2将Fireworks HTML复制到剪贴板在Dreamweaver中使用独立实践69任务背景曾经，我们在回家时候总想着那些游戏明天可以继续，蓦然回首，那些都已经是记忆的碎片。童年的游乐不是一辈子的游戏，童年是短暂的，它晃眼即逝，留下的只有温暖的回忆。为年代网设计儿时游戏场景动画，效果如图所示。任务要求当鼠标移动到任意一个儿时游戏小图片，在中心位置显示该游戏的大图片。任务4 童年的游戏独立实践70任务背景一首童谣、一部电影、一种游戏，甚至是一张时隔多年的泛黄的老照片，就是人们的怀旧

40、情结。它总是零零散散地让人们感念自己所处的年代和时光，因此，年代网便应运而生。今天，在向前奔成为生活主旋律的时代，谁不渴望寻找到心灵的净土？谁不想找回往日的温馨？谁不想找到灵魂的栖息地？。为年代网经典影视栏目设计60年代、70年代、80年代、90年代经典影视回顾，效果如图所示。任务要求分别给每一个年代设计一个导航栏按钮，鼠标划过按钮，在中心区域显示该年代经典电影4部。任务5 经典影视展示71下次再见！72模块04 网页界面切图模块引导如果网页上的图片较大，浏览器下载整个图片需要花很长时间。“切片”工具可以将整个图片分为多个不同的小图片，从而实现分开下载，这样下载的时间就大大缩短了。Photos

41、hop专注于设计，切片的话，用Freworks更专业，切片将Fireworks文档分割成多个较小的部分，并将每部分导出为单独的文件。导出时，Fireworks还创建一个包含表格代码的HTML文件，切片最终是以HTML代码的形式出现的网页对象，而不是以图像的形式存在，通过【层】面板中的“网页层”查看、选择和重命名切片，浏览器中通过没有间距和宽度的表格重新将这些小的图像没有缝隙地拼接起来，成为一幅完整的图像。7374学习目标能力目标1. 了解切图的基本方法。2. 了解“网页层”的作用。知识目标1. 掌握图像的优化。2. 掌握Firewors与Dreamweaver的相互配合。课时分配2课时（授课1

42、课时，实践1课时）。75应知技能如果网页上的图片较大，浏览器下载整个图片需要花很长时间。“切片”工具可以将整个图片分为多个不同的小图片，从而实现分开下载，这样下载的时间就大大缩短了。Photoshop专注于设计，切片的话，用Freworks更专业，切片将Fireworks文档分割成多个较小的部分，并将每部分导出为单独的文件。导出时，Fireworks还创建一个包含表格代码的HTML文件，切片最终是以HTML代码的形式出现的网页对象，而不是以图像的形式存在，通过【层】面板中的“网页层”查看、选择和重命名切片，浏览器中通过没有间距和宽度的表格重新将这些小的图像没有缝隙地拼接起来，成为一幅完整的图像

43、。Fireworks切图技术模拟任务76任务背景用户在浏览网页时，总希望它尽可能地呈现在眼前，减少等等时间，请将“60年代主页面” 中“经典影视”“童谣”“老照片”“游戏”栏目页面进行切割。任务要求切割时要优化图像，以获得最快的下载速度，易于更新，适用于经常更改的网页部分，避免无谓的全盘改动。任务1 切割年代网60年代主页面模拟任务77任务背景年代网老照片回忆栏目为你展示的那一张张熟悉而陌生的照片，模糊了岁月的面貌，裹挟着经年的风霜，愈发出时代的迷人的光辉。任务要求网站页面【大小】为“1003像素800像素”，各年代板块的图片能通过鼠标单击图片序号进行展示，效果如图4-5所示。任务2 制作年代

44、网老照片展示页面78知识拓展一般的网站制作步骤大体上为：设计效果图，然后切图，再制作静态html模板，最后嵌套至CMS（内容管理系统），其中，切图虽然是很简单的一个步骤，但其中也有很多技巧。 图切得越小越好，图切得越少越好。对于一整张图来说，同时达到以上两个目标是矛盾的。针对这点，一般将一个网页切成2030个图加载速度是不受影响的。 一行一行地切，背景图切成小条。能用背景平铺的则就切成1个像素或相对适合的像素大小，不要使用整张图片做背景，不能分开的不要切分。 按颜色来区分来切图一个区域颜色少的话就切分一块，颜色复杂的区域再切分一块，依次类推。然后就可以将颜色少的块指定文件类型为GIF格式，颜色

45、复杂的指定为JPG格式，尽量让出纯色的区域，可以在HTML里实现。Fireworks切图原则79 能用CSS写的颜色，坚决不要用图片如果能把纯色的部分用CSS来写，而不因为省事直接切图，就会极大提高网站的运行效率。比如，如果仅仅只有背景色的导航条，而没有栏目，不建议将导航条的背景直接切成图片，可以用div定义好宽和高设置背景色和边框，一行代码就搞定。如果遇到有渐变色的背景，可以沿着与渐变色相同方向切一个像素的条纹，用CSS中background的repeat-x或repeat-y来自动填充。 文字不要切成图片一般情况下都不会把文字切成图，除非用到比较特殊字体。 尽量使用有透明效果的存储格式如果

46、图片中使用了透明效果，要存储成PNG-8的格式，PNG的其他格式要么不支持透明，要么保存时文件要大很多，PNG-8是“性价比”最高的。Fireworks切图原则知识拓展80 适宜的图像尺寸千万不能不压缩图片直接放上去，然后靠width和height来进行限制，这样做是自欺欺人，浏览器会先把大图片下载到本地，然后用样式强制将它压缩，显示不但不会更清楚，反而会失真，一定要对图片尺寸进行处理后再上传，一般处理图片的宽度为500-600像素之间，高度自动等比例即可。图片质量一般不用太高，JPEG格式的保持在60就可以。 切图命名规范切好图片的命名也要养成良好的习惯，最好的命名习惯就是见名知意，对于一个

47、扩展性强的网站来说，在进行改版和维护的时候，如果要更换某些网站图片，就需要一个一个从浏览器中右键查看图片地址，记下每一个长长的没有规律的图片名称，这会让技术人员十分崩溃，所以，在保存图片时就给它写上有意义的名字是很必要的。Fireworks切图原则知识拓展独立实践81任务背景在教师节来临之际，您是否想到如何为老师的默默耕耘送上自己的一份感恩，为老师送上一份贴心的教师节礼物？如今花成为教师节必备的礼物，那么教师节送什么样的花比较好呢？下面花卉网站将为大家介绍几种今年比较流行的花。参考效果如图所示。任务要求网站页面【大小】为“1000像素800像素”，网站包括页眉、用户登录和导航、主要内容和页脚等

48、部分。其中，页眉又包括Logo、Banner、导航和弹出菜单等；主要内容部分包括动画和切片等。任务3 制作花卉网站主页学习目标能力目标1. 了解切图的基本方法。2. 掌握单层切片的导出。知识目标1. 掌握存储为Web所用格式的面板功能设置。2. 掌握Photoshop与Dreamweaver的相互配合。课时分配2课时（授课1课时，实践1课时）。82应知技能83切图，是一种网页制作技术，它是将美工效果图转换为页面效果图的重要技术。Photoshop、Fireworks等软件提供了切图技术，切图后可以直接导出为网页格式。切片，是切图的直接结果，切图实际上就将图切分为一系列的切片。PS和FW均可以用

49、于切图，但二者有些区别，FW可以导出PNG32，而PS只能导出PNG8和PNG24，PNG8有兼容问题，不常用，PNG24不支持Alpha，只有PNG32是支持Alpha常用的。切片用Fireworks方便，而且切片有尺寸，而PS切片不可少设置尺寸，切片精确性没有Fireworks 高，FW能很方便的定位边缘，PS就很难，就算放到最大倍数也很难点准。网页效果图肯定都是一块一块地拼上去的，是多个矢量图和位图的组合。现在大多数WEB网页设计师都会选择在Photoshop、AI创建网页，完成美术视觉上的设计排版等，然后用Photoshop去切图，再去敲代码。PS切图技术应知技能84这种设计的优势是：

50、其一，设计布局灵活。而Dreamweaver等软件给设计者提供的自由度低很多，其效果也会大打折扣。其二，修改方便，网站建设前期首先要与客户签定合同，签定合同时客户最关心的是自己的网站是什么样子，这时设计者不可能拿出建好的网站给客户演示，这样一是成本太高，合同能否签定还不一定。其三。保护知识产权，有的客户拿走设计方案交给别的公司去做，自己岂不成了给别人做嫁衣裳。最好的办法是拿出在Photoshop中做出的效果图给客户看。一般情况下，客户一次满意率非常低，总会提出修改意见，这时我们就可以利用Photoshop的强大功能按客户的要求方便地进行修改和优化，直到客户满意为止。PS切图技术模拟任务85任务

51、背景根据给定的界面原型设计界面效果图，进行切图制作。最终生成HTML代码任务要求切图是网页设计中非常重要的一环，它可以很方便的为我们标明哪些是图片区域，哪些是文本区域。另外，合理的切图还有利于加快网页的下载速度、设计复杂造型的网页以及对不同特点的图片进行分格式压缩等优点。任务1 切割新亚房产主页面知识拓展86Photoshop切图原则 必须依靠参考线设计时用到参考线，切图时更要用好参考线。参考线能保证我们切出图在同一表格中的尺寸统一协调，有效避免“留白”和“爆边”。 Logo和Banner必切如果效果图中存在Logo和Banner，我们必须切片这部分，主要是为预先设计的Logo和Banner留

52、下空间，在DreamWeaver整合时最好不用Logo和Banner的切片，而是直接用Logo和Banner原文档，这是提高Logo和Banner效果的需要。 虚线和转角形状必切虚线和转角形状在DreamWeaver 不能实现，只能使用Photoshop切片。 渐变必切这也是Dream Weaver实现不了的。知识拓展87Photoshop切图原则 大图必切大的图像必须切分成均匀图，这样可以提高网页下载速度。 特殊文字效果必切除黑体和宋体外，其他字体必须切片。DreamWeaver下最有效的字体只有宋体和黑体，其它字体浏览器也要能不兼容。 导航条必切一般情况下导航条都是特别设计的，其效果在Dr

53、eamWeaver下不能实现，因此必须形成切片供后期使用。 有效存储切片存储切片的文件夹必须位于站点的根目录下，文件夹名必须是英文名字。存储切片时用“文件存储为WEB所用格式”命令。切片存储格式要求一般存为Gif格式。Gif占用体积小。要求较高的图像存储为JPEG格式，JPG格式显示更多的图片细节。独立实践88任务背景根据给定的界面原型设计界面效果图，并根据确认过的页面效果图进行切图制作。任务要求最终提交HTML、CSS、JS代码。完成时限：7天，服务商要求：有手机端应用界面设计优先报价可以是总共价格也可以是页面单价。任务2 手机App界面设计与切图89下次再见！90模块05 网页布局模块引导

54、网页的精彩与否的因素是什么呢？“用户界面”与“用户体验”是两个较为重要的环节，是满足浏览者需求、提升网站浏览量与使用满意度的重要因素。“用户体验”如色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，要给用户留下深刻印象的，还有一个非常重要的因素“用户界面”网页页面布局设计。采用DIV+CSS制作方法制作页面有很多的优势：使页面载入得更快，降低流量费用，修改设计时更有效率，保持视觉的一致性，更好地被搜索引擎收录。本模块的所有情境都围绕网站页面的整体设计来开展，从页面整体设计到局部样式的处理，每个情境都细化分解指导操作。各专业可以根据自己专业的特点，对本模块的内容进行有选择教学。91

55、92学习目标能力目标1. 了解盒状模型。 2. 了解元素的间距计算。 3. 了解块级元素。 4.掌握使用DIV+CSS控制页面文档流的各种方法。知识目标1.掌握DIV的自然布局方法。 2.掌握DIV的浮动布局方法。 3.掌握DIV的精确布局方法。 4.掌握CSS标签选择器的使用。课时分配4课时（授课2课时，实践2课时）。应知技能一、基本概念CSS（Cascading Style Sheet）层叠样式表，用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。二、CSS选择器1、标记选择器（body等）2、类别选择器（以“.”作为标记）3、ID选择器（以“#”作为标记）4、复合选择器（多

56、种选择器的组合）三、基本语法93CSS概念及基本语法h1 color:red;font-size:25px;选择器属性:值;属性:值;应知技能一、块级元素与内联元素块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签“P”；内联元素一般都是基于语义级的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。二、盒状模型用于块元素内部或块元素之间关系描述94盒状模型模拟任务95任务背景一般个人主页的都偏向图像、文字元素较多，往往只需要将这些元素有效的排布，就能向大众展现自我的风采，因此，采用简单的DIV元素堆叠的方式布局HTML元素，再使用CSS控制HTML

57、元素，就能实现这类网页的基本功能。基本布局完成效果所示。任务要求将HTML元素合理的分配，布局结构清晰，效果明显造型简洁。任务1 DIV自然布局模拟任务96任务背景控制文档流的走向使用“float”属性，可以实现图文混排。效果图如图所示。任务要求在用户浏览网页中，鼠标指针滑过图像时换成另外一幅图像，离开时恢复原始图像。任务2 DIV浮动布局模拟任务97任务背景当所要的页面元素不能仅仅局限于原来的文档流中，需要和其他元素有交叉重叠时，通常使用浮动与定位结合，调整Div的层叠次序，为较好的表达主题的起到补充作用。效果图如图所示。任务要求背景图片和数字选项按钮较好的融合，并呈现层叠效果。任务3 精确

58、定位布局知识拓展1定位（1）绝对定位（absolute）应用了绝对定位的元素将被不留痕迹地从常规文档流中完全移除，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位, 如果不存在这样的父对象，则依据body对象定位。其层叠通过z-index属性定义。（2）相对定位（relative）这个属性值保持对象所在文档流中的位置，它同样占有在文档流中的固定位置，后面的对象不会侵占或覆盖。设置了relative的对象，可以通过top,left,right,bottom属性设定自己的新显示位置，这4个属性的取值是相对于文档流的前一个对象的，你可以自由设置

59、这4个属性偏移到新的位置而不对文档流中的其他对象产生任何影响，原来的页面呈现仍然会我行我素。如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响。 2浮动定位子块级元素流集合面向父级元素的定位，定位的关键词使用margin、padding】。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染，可以重叠，原位置被清空。98定位和浮动的区别知识拓展1ID标签和类的使用区别ID只能在页面中对应一个元素，就像我们的身份证号一样，每个人的都不一样；class为

60、类，可以对应多个元素。2取消Class和ID前的元素设定当给一个元素定义Class或ID时，可以省略前面的元素限定，因为ID在一个页面里是唯一的，Class可以在页面中多次使用。但是为了CSS结构清晰，也可以适当的添加前导元素进行申明。3默认值设定通常padding的默认值为0，background-color的默认值为transparent，但是不同的浏览器默认值可能不同，如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding的值均为0。99CSS常用技巧独立实践100任务背景么有效的在页面上反应网站的众多内容，让用户能一目了然呢？图文混排是一个有效果的办法。合理的利