欢迎来到天天文库
浏览记录
ID:58664160
大小:1.14 MB
页数:73页
时间:2020-10-05
《网页设计与制作第七章ppt课件.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、第七章切割与按钮制作主要内容7.1图片的切割7.2热区7.3创建按钮7.1图片的切割一个网页的浏览速度,直接影响到该网页的受欢迎程度,为了获得较高的下载速度,可以将网页中存在的较大图片切分为多个小图片即切片,然后在网页中通过表格,重新将切片拼接成完整的图片。这样在下载网页时对整幅图片的下载,就变为对多幅小图片的下载,虽然图片本身不变,但是下载速度会明显加快。便于构建图片链接。由于已经将图片真正切分为多个图片文件,所以可以直接将链接同每个图片切片相关联。对于一幅图片,在分割为多个切片之后,可以将图片切片中包含细腻
2、图片内容的图片文件以JPEG格式保存,而将包含有大片单色区域的切片以GIF格式保存,这将比对整幅图片优化后生成的文件要小得多。利用分割图片的技术,还可以实现在网页中重复使用一些相同的图形部分,通过仅仅替换包含个别内容的切片能够快速对网站进行更新。利用给切片添加行为,可以制作图片切换,但是切片也是存在缺陷的,那就是:在一般情况下它必须使用矩形,不仅将图片切分后生成的切片是矩形的,而且用于摆放切片的表格也是矩形的。切片在一般情况下不能覆盖。优缺点一.切片的创建要创建切片就必须学习创建切片的工具,它位于网页工具部分。
3、“切片工具”:该工具可以直接在图片上,创建各种大小的矩形切片。使用方法是:在“网页”工具箱中选取矩形切片工具,在图片上按下鼠标左键并拖动鼠标,勾绘出一个矩形区域,即可生成矩形切片。绘制的切片区域被半透明绿色所覆盖,称作切片对象。同时,FireworksMX2004会根据切片对象的位置对图像进行分割,分割线呈现红色,称作“切片准线”制作矩形切片利用此工具制作的切片只能是矩形,不能是其他形状。如果想创建多边形的切片,就需要用到“多边形切片工具”。该工具的使用方法是:选择多边形切片工具,在图片上使用鼠标左键点击,勾绘
4、出一个多边形的区域,即可生成多边形切片。制作多边形切片注:应该将“切片文件”和“切片对象”在概念上区别开来,切片文件是导出操作之后生成的文件,而切片对象是在文档中利用切片工具绘制的对象.切片文件始终是矩形的,而切片对象则可以是矩形,也可以是多边形。如果切片对象是多边形,则对应的图像文件的矩形大小就是该多边形外切矩形的大小。二.编辑切片对象初次创建的切片对象很可能不符合要求,例如,可能过大、过小、形状不对,或是同需要的区域不相匹配等。FireworksMX2004允许在创建切片对象之后,继续对切片对象进行编辑,使
5、其最终符合要求。1.选择切片对象选择切片对象的方法同选择普通对象的方法一样,只要从工具箱中选取“选择工具”,然后单击要选择的切片对象即可。2.移动切片对象选中切片对象后,用鼠标拖动切片对象,即可将其在文档中移动。实际上,这时改变的是切片对象在图片上的位置。3.调整切片对象的形状选中切片对象后,利用子“选择工具”拖动切片对象边框上的控点,即可调整切片对象的形状。对于矩形切片来说,拖动边框上的控点调整切片对象形状时仍然会保持矩形,只是矩形的大小被改变。如果拖动的是多边形切片对象边框上的控点,则可以任意改变切片对象的
6、形状。选择了切片之后,属性栏上就回呈现出切片的属性:“名称设置栏”如果要为切片起一个自定义的名称,可以在“切片”下面的文本框输入切片的文件名称。“颜色设置栏”:默认状态下,切片对象显示为半透明的绿色,并覆盖在图片上。为了便于观察,可以根据需要在此栏中改变切片对象的颜色。具体操作是:选中要改变颜色的一个或多个切片对象,点击颜色栏下方的小三角标志,在打开的颜色设置窗口中,选择适当的切片颜色。“链接和替代设置栏”:给切片设置链接的方法就是:选择切片,在属性栏中的“链接”旁边的输入框中输入URL地址。如图示链接和替代设
7、置栏:如果要给该切片添加一个解释说明的文字,可以在“替代”文本框中键入相应的内容,此时,在网页上浏览,如果网速比较慢,切片不能立刻下载,切片位置就会先出现输入的说明文字,或者当鼠标放到该切片位置的时候,也会出现说明文字。“目标窗口”:如果需要设置连接页面的目标窗口,可以从该目标列表中选择某个预设值,也可键入名称,默认是重新打开一个页面来打开链接。“导出设置栏”:想要保存所选择切片的图片格式,可以点击该设置栏右侧的小三角标志,在其中选择适当的网页格式。三.利用切片制作交换图像在Dreamweaver中制作动画时,
8、通过建立多个帧,并且利用帧的显示和隐藏来制作动画,交换图像效果也是同样的道理。创建交换图像的步骤①新建一个黑色背景的图像,使用矩形工具在图像上制作三个矩形,并分别填充不同的渐变颜色。为了增加矩形的立体感,分别给矩形添加内侧发光效果,发光的颜色根据按钮颜色来定义。再分别给按钮添加“鲜花”“房间”“建筑”文字。制作好的按钮②把这三个按钮全部选中,并在任意一个按钮上点击鼠标右键,然后从弹出菜
此文档下载收益归作者所有