切片项目十五公司主页——网页切片应用

1

项目十五公司主页——网页切片应用

一、新课引入

当网页上的图片较大时浏览器下载整个图片需要花费很长的时间。切片技术可以把大图片分为多个小图片从而大大缩短下载页面的时间特别是对于大而复杂的背景图片而言利用网页切片的方式是必要的 同时切片技术也是将美工效果图转换为页面效果图的重要方法。通常设计一个网页时常用Fireworks设计版面并切片用Flash制作网页动画然后导入Dreamweaver中实现。本项目将学习网页切片技术、网页动画与Dreamw eaver的综合应用。

二、新课教学

活动一使用Fi reworks的切片技术制作输出网页文件教师布置任务根据相关学习资料 了解Fireworks软件的窗口组成切片工具的基本使用方法完成下图的切片并导出。

2

学生讨论练习 自行探索、讨论完成上述任务。

教师讲解分析讲解操作要点先使用切片工具切割图片切割时注意切片大小和位置然后将使用“文件”菜单下的“导出”命令将各切片导出HT ML和图像注意观察导出的HT ML和图像文件。活动二在FLASH软件中制作FLASH。

教师布置任务启动FLASH查找相关资料熟悉其窗口组成制作如下图所示网页广告FLASH。

3

学生练习学生自行探索学习操作完成FLASH的制作并生成相应

的S WF格式的动画文件。

教师讲解讲解学生操作过程中的问题操作方法参照相关知识相应内容。

活动三修改导出的网页文件插入FLASH添加链接并浏览。

教师布置任务启动Dreamweaver在其中编辑生成的HTML文件将制作好的FLASH动画文件插入到网页中相应位置添加链接可设置为空链接浏览网页效果。

学生练习学生自行探索学习完成FLASH的插入操作添加超链接。

教师讲解讲解学生操作过程中的问题。

4

教学评价表

三、复习巩固

小结本项目学习了网页切片技术、网页动画在网页设计中的综合应用。在进行网页切片时要注意将不同颜色切在不同片中切片大小要根据需要尽量保证一个完整的部分切在同一个切片内 防止遇到特殊情况时只显示一部分 圆角表格部分要根据显示区域的大小来切控制好边缘和边角颜色单一过渡少的应该导出为GIF颜色过渡比较多颜色丰富的应该导出为JPG有动画的部分应该导出为GIF动画切出来的切片并不是直接插入到Dreamweaver就可以用还需要在Dreamweaver中进行编辑 比如有的图片应设置为背景等。

5

思考 由于导航条要设置超链接如何对导航条合理切片你觉得本项目中导航条的切片是否合理如不合理应当怎么切片请你试一试