网页设计与制作第七章ppt课件.ppt

《网页设计与制作第七章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、通过建立多个帧，并且利用帧的显示和隐藏来制作动画，交换图像效果也是同样的道理。创建交换图像的步骤①新建一个黑色背景的图像，使用矩形工具在图像上制作三个矩形，并分别填充不同的渐变颜色。为了增加矩形的立体感，分别给矩形添加内侧发光效果，发光的颜色根据按钮颜色来定义。再分别给按钮添加“鲜花”“房间”“建筑”文字。制作好的按钮②把这三个按钮全部选中，并在任意一个按钮上点击鼠标右键，然后从弹出菜