网页设计ppt电子课件教案第14章创建页面的热点区域和切片

《网页设计ppt电子课件教案第14章创建页面的热点区域和切片》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第14章创建页面的热点区域和切片教学内容：在Fireworks中，为图像设置链接区域是靠“切片”或“热点”工具来完成。因此“切片”或“热点”区域又被称为链接区域。它们不是以图像的形式存在，而是在图像导出成网页格式后，以HTML代码的形式出现。教学重点掌握切割工具的使用掌握图像的输出与优化掌握图像热区的创建教学目标和基本要求_________________________________________________________________________________________________________教学时间：本章共分_______课

2、时教学方法案例教学多媒体教学理论面授教学素材课程范例文件：sample第14章练习文件：exercise第14章本章各节课时分配及链接14.1任务56切割公司首页——（）课时14.2任务57为图像添加热点——（）课时14.3综合实训——使用热点绘制网站封面页面——（）课时本章小结思考与练习14.1任务56切割公司首页如果网页上的图片较大，浏览器下载整个图片的话需要花很长的时间。切片的使用，使得整个图片可以分为多个不同的小图片分开下载，这样下载的时间就大大缩短了。在目前互联网带宽还受到条件限制的情况下，运用切片来减少网页下载时间而又不影响图片的效果。14.

3、1.1简单讲评切片就是将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来，成为一幅完整的图像。这样做可以减小图像的大小，减少网页的下载时间，还能将图像的一些区域用html来代替。14.1.2核心知识——切片工具的使用切片是Fireworks中十分有特色的一个部分。切片将图像分割成多个小部分、并将每部分导出为单独的文件。14.1.3实际操作步骤2选择工具箱中“切片”工具。步骤3将光标置于要创建切片的位置，按住鼠标左键拖动，绘制切片。步骤5选择“窗口>优化”命令，打开“优化”面板。步骤6在“优化”面板中选择文

4、件格式，如图14-9所示，此时应根据文件类型选择不同的文件格式。步骤8选择“文件>导出”命令，弹出“导出”对话框，在“导出”右边的下拉列表中选择HTML和图像。14.2任务57为图像添加热点有时候在页面上显示一幅较大的完整图像同时将整幅图像中的不同区域分别映射到不同的链接上，这时使用传统的超链接设置方法就无法满足要求。这时可以在图像上创建热点，之后将热点分别同不同的链接相关联即可实现。14.2.1简单讲评一般来说，一幅图像只能有一个超级链接目标，同一个图像的不同部分也可以链接到不同的文档，这就是热点链接。要使图像特定部分成为超级链接，就要在图像中设置“热点”。可

5、以在一个较大的图像上建立多个热点区域，以链接到文本文件、图像等。14.2.2核心知识--图像热点工具的使用从工具箱中的“Web”部分选择“矩形热点”工具或“圆形热点”工具，拖动热点工具，在图形的某个区域上绘制热点。按住Alt键可从中心点开始绘制。14.2.3实际操作步骤2选择工具箱中的“矩形热点”工具。步骤3在要创建热点的位置按住鼠标左键拖动形成一个矩形选区。步骤4拖动到合适的大小，释放鼠标。步骤5在热点属性面板中出现热点属性设置选项。在文本框中输入URL地址，即单击该热点就会链接到该URL地址。在“替代”文本框中输入对该热点链接的说明。14.3综合实训——使用

6、热点绘制网站封面页面热点的作用是当光标经过热点区时，指针会变为手形，单击热点会打开相关的链接网页。这样的效果在浏览网页时是十分常见的。下面使用热点绘制网站封面页。步骤2单击工具箱中的“文本”工具，添加文本“爵士岛咖啡，传承欧洲咖啡文化的精髓”，设置字体为隶书，“大小”为25，填充颜色为#FF6600。步骤3单击工具箱中的“矩形热点”工具，绘制一个热点。步骤4选中热点区域，在属性面板中出现热点属性设置选项。步骤8分别在热点属性选项中的“替代”文本框中输入“合作流程”、“市场定位”、“加盟爵士岛”、“在线申请”，并且添加上链接。本章小结在网页设计中热点被广泛的使用，

7、热点是图像上带有超级链接的一块区域，同一幅图上可以有几个热点链接到不同的地址。切片可以将一幅大的图片分割开来，这样可以减小图像的大小，并且能创造交互的效果，还能将图像的一些区域用html来代替。思考与练习1．填空题（1）在Fireworks中，为图像设置链接区域是靠________或________工具来完成。（2）在目前互联网带宽还受到条件限制的情况下，运用________来减少网页下载时间而又不影响图片的效果。（3）如果切片大小不合适，可以使用工具箱中的________工具拖动切片引导线来调整切片大小。2．判断题（1）如果网页上的图片较大，浏览器下载整个图片

8、的话需要花很长的时间。热