创建页面的热点区域和切片

1、创建页面的热点区域和切片第1页，共28页，2022年，5月20日，20点1分，星期一 教学重点掌握切割工具的使用 掌握图像的输出与优化 掌握图像热区的创建 第2页，共28页，2022年，5月20日，20点1分，星期一教学目标和基本要求_教学时间：本章共分_课时教学方法案例教学多媒体教学理论面授教学素材课程范例文件：sample第14章练习文件：exercise第14章第3页，共28页，2022年，5月20日，20点1分，星期一本章各节课时分配及链接14.1 任务56切割公司首页（ ）课时14.2任务57 为图像添加热点（ ）课时14.3综合实训使用热点绘制网站封面页面（ ）课时本 章 小 结思

2、考与练习第4页，共28页，2022年，5月20日，20点1分，星期一14.1 任务56切割公司首页 如果网页上的图片较大，浏览器下载整个图片的话需要花很长的时间。切片的使用，使得整个图片可以分为多个不同的小图片分开下载，这样下载的时间就大大缩短了。在目前互联网带宽还受到条件限制的情况下，运用切片来减少网页下载时间而又不影响图片的效果。第5页，共28页，2022年，5月20日，20点1分，星期一14.1.1 简单讲评切片就是将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来，成为一幅完整的图像。这样做可以减小图像的大小，减少网页的下载时间

3、，还能将图像的一些区域用html来代替。 第6页，共28页，2022年，5月20日，20点1分，星期一14.1.2 核心知识切片工具的使用切片是Fireworks中十分有特色的一个部分。切片将图像分割成多个小部分、并将每部分导出为单独的文件。第7页，共28页，2022年，5月20日，20点1分，星期一14.1.3 实际操作 步骤2 选择工具箱中“切片”工具。第8页，共28页，2022年，5月20日，20点1分，星期一 步骤3 将光标置于要创建切片的位置，按住鼠标左键拖动，绘制切片。第9页，共28页，2022年，5月20日，20点1分，星期一 步骤5 选择“窗口优化”命令，打开“优化”面板。第1

4、0页，共28页，2022年，5月20日，20点1分，星期一 步骤6 在“优化”面板中选择文件格式，如图14-9所示，此时应根据文件类型选择不同的文件格式。 第11页，共28页，2022年，5月20日，20点1分，星期一 步骤8 选择“文件导出”命令，弹出“导出”对话框，在“导出”右边的下拉列表中选择HTML和图像。第12页，共28页，2022年，5月20日，20点1分，星期一14.2任务57 为图像添加热点 有时候在页面上显示一幅较大的完整图像同时将整幅图像中的不同区域分别映射到不同的链接上，这时使用传统的超链接设置方法就无法满足要求。这时可以在图像上创建热点，之后将热点分别同不同的链接相关联

5、即可实现。第13页，共28页，2022年，5月20日，20点1分，星期一 14.2.1 简单讲评 一般来说，一幅图像只能有一个超级链接目标，同一个图像的不同部分也可以链接到不同的文档，这就是热点链接。要使图像特定部分成为超级链接，就要在图像中设置“热点”。可以在一个较大的图像上建立多个热点区域，以链接到文本文件、图像等。第14页，共28页，2022年，5月20日，20点1分，星期一14.2.2 核心知识-图像热点工具的使用 从工具箱中的“Web”部分选择“矩形热点”工具或“圆形热点”工具，拖动热点工具，在图形的某个区域上绘制热点。按住Alt键可从中心点开始绘制。第15页，共28页，2022年，

6、5月20日，20点1分，星期一14.2.3 实际操作步骤2 选择工具箱中的“矩形热点”工具。第16页，共28页，2022年，5月20日，20点1分，星期一 步骤3 在要创建热点的位置按住鼠标左键拖动形成一个矩形选区。第17页，共28页，2022年，5月20日，20点1分，星期一步骤4 拖动到合适的大小，释放鼠标。第18页，共28页，2022年，5月20日，20点1分，星期一 步骤5 在热点属性面板中出现热点属性设置选项。在文本框中输入URL地址，即单击该热点就会链接到该URL地址。在“替代”文本框中输入对该热点链接的说明。第19页，共28页，2022年，5月20日，20点1分，星期一14.3综

7、合实训使用热点绘制网站封面页面 热点的作用是当光标经过热点区时，指针会变为手形，单击热点会打开相关的链接网页。这样的效果在浏览网页时是十分常见的。下面使用热点绘制网站封面页。第20页，共28页，2022年，5月20日，20点1分，星期一 步骤2 单击工具箱中的“文本”工具，添加文本“爵士岛咖啡，传承欧洲咖啡文化的精髓”，设置字体为隶书，“大小”为25，填充颜色为#FF6600。第21页，共28页，2022年，5月20日，20点1分，星期一 步骤3 单击工具箱中的“矩形热点”工具，绘制一个热点。第22页，共28页，2022年，5月20日，20点1分，星期一 步骤4 选中热点区域，在属性面板中出现

8、热点属性设置选项。第23页，共28页，2022年，5月20日，20点1分，星期一 步骤8 分别在热点属性选项中的“替代”文本框中输入“合作流程”、“市场定位”、“加盟爵士岛”、“在线申请”，并且添加上链接。第24页，共28页，2022年，5月20日，20点1分，星期一本 章 小 结在网页设计中热点被广泛的使用，热点是图像上带有超级链接的一块区域，同一幅图上可以有几个热点链接到不同的地址。切片可以将一幅大的图片分割开来，这样可以减小图像的大小，并且能创造交互的效果，还能将图像的一些区域用html来代替。第25页，共28页，2022年，5月20日，20点1分，星期一思考与练习1填空题（1）在Fireworks中，为图像设置链接区域是靠_或_工具来完成。（2）在目前互联网带宽还受到条件限制的情况下，运用_来减少网页下载时间而又不影响图片的效果。（3）如果切片大小不合适，可以使用工具箱中的_工具拖动切片引导线来调整切片大小。第26页，共28页，2022年，5月20日，20点1分，星期一2判断题（1）如果网页上的图片较大，浏览器下载整个图片的话需要花很长的时间。热点的使用，使得整个图片可以分为多个不同的小图片分开下载，这样下载的时间就大大缩短了。（ ）（2）使用工具箱中的“指针”工具，可以移动图像上的切片对象。（ ）（3）在源图形中标识出可作为导航点的区域后，就可以创建热点，然后为它们