使用热点和图像映射
使用热点和图像映射
创建矩形或圆形热点
如果要创建矩形或圆形
热点，则首先从工具箱 的Web工具区选择【热 点】工具，快捷键是J， 记忆手势是食指伸出， 带弯曲，其余四指握拳， 拇指搭在中指上，手心 向前偏左。 拖动热点工具，在图形 的某个区域上进行绘制， 按住换档键可以从中心 点开始绘制。
用热点创建图像映射
如果要导出图像映射或把它复制到 剪贴板中，则首先对图形进行优化， 使其做好导出准备，接着单击【文 件】菜单中的【导出】命令，然后 指定要存放HTML文件的文件夹， 为文件命名后，在【导出】下拉列 表中，选择【HTML和图像】，在 【HTML】下拉列表中选择一个选 项（导出HTML文件和复制到剪贴 板）。前者生成HTML文件和图形 文件，后者可以把HTML文件复制 到剪贴板中。 设置完成后，单击【浏览】按钮， 选择适当的文件夹，最后单击【保 存】按钮，关闭【导出】对话框。
创建非常规形状热点
如果要创建非常规形状热点，可以选择
【多边形热点】工具，以放置矢量点。这 与使用【钢笔】工具绘制直线段类似，不 管路径是开口的还是闭合的，填充都可以 定义热点区域。
通过跟踪选定对象创建热点
如果要通过跟踪几个选定
对象创建热点，单击【编 辑】菜单里的【插入】子 菜单下的【热点】命对象 的单个矩形热点，还是要 创建几个热点，其中一个 对象对应一个热点。 可以通过单击【单一】或 【多重】按钮，在网页层 中显示新的热点。
用热点创建变换图像
可以使用拖放变换图像的方法向热点附加
不相交的变换图像效果，但是目标区域必 须由切片定义。把变换图像效果应用于切 片的方式是相同的。
一个热点只能触发一个不相交的变换图像， 但不能是来自其它热点或者切片的变换图 像的目标。在用热点创建了不相交的变换
图像之后，只有在选择了这个热点时，才 能看到蓝的链接线。
在切片上使用热点
在对一个图形创建切片后，如果图形面积很大，
只希望把其中很小一部分用作某个动作的触发器， 可以把热点放在切片上以触发一个动作或行为。 如果要使用切片上的热点创建图像效果的触发器， 则首先把一个切片插入到要交换出去的图像上， 在帧面板中创建一个新的帧，然后插入要用作被 交换图像的图像，把它放在刚插入的切片下方。 把一条行为线从热点拖到包含要交换图像的切片 上，打开【交换图像】对话框。 在【交换图像自】下拉列表中选择保存有变换图 像的帧，最后单击【确定】按钮。
编辑热点
在属性检查器中，可以通
过更改数据和更改热点的 位置和大小，以及通过 【形状】下拉列表更改热 点的形状，有【矩形】、 【圆形】和【多边形】三 个选项。 在属性检查器中，还可以 为热点指定URL、替换文 本、目标和自定义名称。 指定热点属性的操作方法 与指定切片属性的操作方 法相同。
使用热点和图像映射
使用热点和图像映射
创建矩形或圆形热点
▪ 假如要创建矩形或圆形 热点，则首先从工具箱 旳Web工具区选择【热 点】工具，快捷键是J， 记忆手势是食指伸出， 带弯曲，其他四指握拳， 拇指搭在中指上，手心 向前偏左。
▪ 拖动热点工具。
▪ 把一条行为线从热点拖到包括要互换图像旳切片 上，打开【互换图像】对话框。
▪ 在【互换图像自】下拉列表中选择保存有变换图 像旳帧，最终单击【拟定】按钮。
▪ 设置完毕后，单击【浏览】按钮， 选择合适旳文件夹，最终单击【保 存】按钮，关闭【导出】对话框。
用热点创建变换图像
▪ 能够使用拖放变换图像旳措施向热点附加 不相交旳变换图像效果，但是目旳区域必 须由切片定义。把变换图像效果应用于切 片旳方式是相同旳。
▪ 一种热点只能触发一种不相交旳变换图像， 但不能是来自其他热点或者切片旳变换图 像旳目旳。在用热点创建了不相交旳变换 图像之后，只有在选择了这个热点时，才 干看到蓝旳链接线。
▪ 在属性检查器中，还可觉 得热点指定URL、替换文 本、目标和自定义名称。
▪ 指定热点属性旳操作方法 与指定切片属性旳操作方 法相同。
用热点创建图像映射
▪ 假如要导出图像映射或把它复制到 剪贴板中，则首先对图形进行优化， 使其做好导出准备，接着单击【文 件】菜单中旳【导出】命令，然后 指定要存储HTML文件旳文件夹， 为文件命名后，在【导出】下拉列 表中，选择【HTML和图像】，在 【HTML】下拉列表中选择一种选 项（导出HTML文件和复制到剪贴 板）。前者生成HTML文件和图形 文件，后者能够把HTML文件复制 到剪贴板中。
在切片上使用热点
▪ 在对一种图形创建切片后，假如图形面积很大， 只希望把其中很小一部分用作某个动作旳触发器， 能够把热点放在切片上以触发一种动作或行为。
Dreamweaver中超链接的应用教案
公开课教案课程名称《网页制作》教程课题名称：Dreamweaver中超链接的应用授课班级：任课教师：授课时间：时间分配教学内容及过程教学方法及教学内容的拾漏补遗17’第三环节：教师演示、讲解操作步骤 Dreamweaver中超链接的应用一、超链接的含义超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点。
二、超链接的分类1、按照源端点的不同，可以将超链接分为文本链接、图像链接和表单链接3种。
文本链接：是指以文字作为超链接源端点的链接。
图像链接：是指以图像作为源端点的超链接。
表单链接：需要与表单结合使用，当用户单击表单中的按钮时，会自动跳转至相应页面。
2、根据目标端点的不同，超链接可分为内部链接、外部链接、锚点链接和电子邮件链接4种。
内部链接：其目标端点是本站点中的其他网页或文件。
外部链接：指链接的目标端点与源端点不在同一个站点中。
锚点链接：如果网页太长，可用锚点链接实现跳转到当前网页或其他网页中的某一指定位置。
电子邮件链接：单击电子邮件链接，将打开系统默认的电子邮件收发程序。
三、设置链接属性在没有选中任何对象的前提下，单击“属性”面板上的“页面属性”按钮，打开“页面属性”对话框，首先在左侧列表中选择“链接”选项，然后在右侧设置各项链接属性。
演示提问讨论讲授、演示、讨论时间分配教学内容及过程教学方法及教学内容的拾漏补遗30’四、设置常规超链接常规超链接包括内部超链接和外部超链接，内部超链接是指目标文件位于站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。
1．内部超链接内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以在“属性”面板上的“链接”编辑框中直接输入要链接对象的相对路径；也可以通过单击“属性”面板上“链接”编辑框右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择链接对象。
2．外部超链接外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板上的“链接”编辑框中直接输入要链接网页的网址。
设置热点和命名锚记链接及管理链接
测试链接
创建好一个站点后，由于一个网站中的链接数量比较多，在上 传之前必须先检查站点中所有的链接。 若发现站点中存在中断的链接，需要修复后才能上传到服务器。 超链接的测试必须在浏览器中进行。 操作步骤： 打开要测试的文档。 选择“文件”下的“检查页”下的“链接”命令，若有断开的 链接，则会以列表的形式在窗口的底部列出。
选中要链接到命名锚记的文本或图像（小手），在属性检查器 上链接编辑框输入“#锚记名称”（#a2）。 保存并预览。单击小手图标，可直接跳转到插入命名标记的位 置（博客排行榜）。 注意：命名锚记链接与常规链接不同的地方，是要在链接的锚 记名称前输入符号“#”，它表示当前页。
管理链接
当用户在本地站点中移动或重命名文档时，Dreamweaver CS5可以更新选定文档中或指向选定文档的链接。 若用户将整个站点都存放在本地磁盘上时，该特性可以发挥最 大的作用。 Dreamweaver CS5不会对远程站点做任何修改，除非用户向 远程服务器存回或取出文件。 管理链接包括：更新链接和测试链接。
更新链接
三种方法： 在“属性”面板的“链接”文本框中直接修改。 选定超链接，选择“修改”下的“更改链接”。
在超链接上单击右键，在弹出的快捷菜单中选择“更改链接”。
自动更新链接
当用户在“文件”面板中移动或修改存储在本地的整个站点或 站点中的某个完整的部分时，Dreamweaver CS5将自动更新 该文档的相关链接。 操作方法： 选择“编辑”菜单下的“首选参数”。
设置热点、命名锚记链接及管理链接
上课要求
课前预习
将手机调到静音
认真做笔记 及时完成作业
Dreamweaver MX 网页设计与制作教案DW (5)
6.F12查看生成网页
7.层和表格之间转换
电子教案
课程
DreamweaverＭＸ网页设计与制作
任课教师
课
题
图像映射、层的使用
班级
16电商
人数
19
课堂类型
实践
教学方法
多媒体与课堂讲授相结合，讲练结合。
授课时间
年月日星期第节教学周第周课时节
教学目的
【知识目标】
1.掌握图像映射的原理和使用
2.掌握热点的使用
3.使学生掌握层的使用
4.使学生掌握层和表格的相互Dreamweaver，新建一个网页，将图片插入到页面中。
3.【地图工具】单击鼠标左键点击图片，这时候软件下方的属性面板就会变成和图片相关的属性。
注：如果没有上图显示的热点地图工具，是地图工具属性隐藏了，可以点击属性面板右侧的三角符号打开。
4.绘制热点：注意方块、圆形、多边形三个小图标，它们就是我们要用的“图片热点”工具，不同的热点工具可以绘制出不同形状的热点区域。
“替换”就是鼠标悬浮在该区域时提示的文字。一般使用"_blank"，指超链接将在新窗口打开。
6.修改热点：对热点区域进行拖动或者局部调整，如果需要修改热点区域，或者需要进行微调。点击热点区域，热点区域四周会出现浅蓝色的点。光标放在浅蓝色的点，点击鼠标左键，即可调整热点区域的大小。
7.多个图片添加热点：
Dreamweaver MX 2004可以利用层来建立自己的结构，然后将它们转换为表格。
第12课：切片、变换图像和热点
创建和编辑切片
切片将 Fireworks 文档分割成多个较小的部分并将每部分导出为单独的文件。导出时， Fireworks 还创建一个包含表格代码的 HTML 文件，以便在浏览器中重新组合图形。
切片将一个文档分割成多个部分，它们都以单独文件的形式导出。 将图像切片至少有三个主要优点： “优化” 网页图形设计的挑战之一是在确保图像快速下载的同时保证质量。切片 使您可以使用最适合的文件格式和压缩设置来优化每个独立切片。有关更多信息， 请参阅优化和导出。 “交互性” 您可以使用切片来创建响应鼠标事件的区域。有关如何使切片具有交 互性的信息，请参阅使切片交互。 “更新网页的某些部分” 切片使您可以轻松地更新网页中经常更改的部分。例如， 贵公司的网页中可能包含每月更改一次的“本月雇员”部分。切片使您可以快速 更改雇员的姓名和照片而不用更换整个网页。
创建 HTML 切片
HTML 切片指定浏览器中出现普通 HTML 文本的区域。HTML 切片 不导出图像，它导出出现在由切片定义的表格单元格中的 HTML 文 本。 若要创建 HTML 切片：
1. 2. 3. 4.
5.
绘制切片对象并将其保留为选定状态。 在“属性”检查器中，从“类型”弹出菜单中选择“HTML”。 单击“编辑”。 在“编辑 HTML 切片”窗口中键入文本，如果需要，通过添加 HTML 文 本格式设置标记来设置文本的格式。 注意：或者，可以在使用文本编辑 器或 HTML 编辑器（如 Macromedia Dreamweaver）导出 HTML 后，将 HTML 文本格式设置标记添加到 HTML。 单击“确定”以应用更改并关闭“编辑 HTML 切片”窗口。 您输入的文 本和 HTML 标记以原始 HTML 代码的形式出现在 Fireworks PNG 文件中 切片的正文上。 注意：在不同的浏览器以及不同的操作系统中查看 HTML 文本切片时， 它们的外观可能会有所变化，这是因为浏览器中可以设置字体大小和类 型。
dw考试题 5套
《企业、政府网站设计与制作——Dreamweaver8》期末模拟试题（一）一、选择题1、打开Dreamweaver 8窗口后，如果没有出现属性面板。
可执行_______菜单中的“属性”命令将其打开。
A、插入B、修改C、窗口D、命令2．在站点中建立一个文件，他的扩展名应是_______。
A、DOCB、PPTC、XLSD、HTM3．设置一个没有超链接功能的图像变化（即当鼠标指向页面中的图像时显示另外的图像，当鼠标离开页面中的图像时显示原图像），应使用Dreamweaver 8的_______功能。
A、导航图像B、翻转图像C、轮换图像D、预载图像4．在_______文本框中输入数据后，数据以*号显示。
A、单行文本框B、多行文本框C、数值文本框D、密码文本框5．按住_______键的同时拖拽鼠标绘制直线，可以绘制水平、垂直或增量为45度角的直线。
A、CtrlB、AltC、ShiftD、Ctrl+Shift6、网站首页的名字通常是（）A、Index.htmB、Index.htmlC、WWWD、A或B7、在Dreamweaver网页设计中，关于框架的说法正确的是：（）A、框架将浏览窗口划分为若干区域，分别显示一个网页的不同部分。
B、单击名字为“Insert Left Frame”的图标，可以将一个框架拆分为上下两部分。
C、通过按下鼠标左键进行拖动，可以直接改变框架高度。
D、框架之间不能实现链接。
8、利用Dreamweaver8中的（）技术，可以让网页上的内容随心所欲地放置在任何位置上。
A、表单（Forms）B、框架（Frames）C、层（Layer）D、图像（Image）9、某用户在用模板做的页面无法插入层，其原因可能是：（）A、层不可能插入用模板做的页面B、该用户没有定义可编辑区域C、只能先插入表格，再将表格转换成层D、该用户没有定义锁定区域10、使用什么快捷键可以打开行为面板？（）A、Shift + F3B、Alt + F3C、F3D、Ctrl + F3二、填空题1．在表格的中可以插入另一个表格，这称为表格的嵌套。
创建超链接实验报告
一、实验目的1. 理解超链接的概念和作用。
2. 掌握在网页中创建超链接的方法。
3. 学会使用不同类型的超链接，如文本超链接、图像超链接等。
4. 熟悉超链接属性设置，提高网页设计水平。
二、实验环境1. 操作系统：Windows 102. 浏览器：Chrome3. 网页制作软件：Dreamweaver CC三、实验内容1. 超链接的基本概念超链接（Hyperlink）是网页中的一种重要元素，用于连接不同的网页或页面元素。
通过超链接，用户可以轻松地在不同的页面之间进行跳转，提高浏览体验。
2. 创建文本超链接（1）打开Dreamweaver CC，创建一个新的HTML文档。
（2）在“设计”视图中，选中要设置为超链接的文本。
（3）在“属性”面板中，找到“链接”属性，输入目标网页的URL。
（4）点击“保存”按钮，保存网页。
3. 创建图像超链接（1）打开Dreamweaver CC，创建一个新的HTML文档。
（2）在“设计”视图中，选中要设置为超链接的图像。
（3）在“属性”面板中，找到“链接”属性，输入目标网页的URL。
（4）点击“保存”按钮，保存网页。
4. 创建锚点超链接（1）打开Dreamweaver CC，创建一个新的HTML文档。
（2）在需要创建锚点的位置，插入一个锚点标记（在“插入”面板中找到“常用”类别，选择“锚点”）。
（3）在“属性”面板中，为锚点设置一个ID，例如“top”。
（4）在目标位置，创建一个文本超链接，在“链接”属性中输入锚点的ID，如“#top”。
5. 设置超链接属性（1）在“属性”面板中，可以设置超链接的以下属性：- 链接目标：选择在新窗口中打开链接，或在当前窗口中打开链接。
- 图像映射：为图像创建热点区域，实现多个链接。
- 替换文本：为超链接设置鼠标悬停时的提示文本。
- 转换效果：设置超链接的显示效果，如边框、颜色等。
（2）根据实际需求，设置超链接属性，提高网页美观度。
四、实验结果与分析通过本次实验，我们掌握了以下内容：1. 超链接的基本概念和作用。
3.2制作图像映射
3.2为班级画地图——制作图像映射
一教学目标
1．掌握制作图像映射的具体方法
2．熟练根据需要对热点进行编辑和调整，
3．进一步感受对网页制作的兴趣。
二教学重难点
1、制作图像映射的具体步骤
2、如何根据需要对热点进行编辑和调整
三教学过程
（一）导入
我们确定学校的所在区域，怎么建立与数字地图的链接呢？
（二）新授
1、如何创建热点：首先需要得到图片，打开“请多指教”网页，找到学校所在的位置。
利用图片工具栏上的“多边形热点”绘制。
然后理解在网页设计视图下。
理解热点形状有长方形、椭圆形、多边形。
注意：热点必须是一个闭合区域，否则不能建立超链接。
2、绘制热点后，系统立刻弹出“编辑超链接”对话框，通过对话框设置热点超链接目标。
在“地址”文本框中输入相应的链接目标
3、单击“确定“按钮，对话框消失。
切换到预览试图下左键单击热点区域，显示结果。
4.热点创建的两种方式：一种运用图盘工具栏中的热点按钮子在图像上几何区域描绘，然后建立超链接;另一种是在“图片上创建文本热点。
（三）小结
本届学习了悬着图片工具栏中的热点按钮在一个图像上绘制不同的热点，设置多个连接，建立图像中各个区域的对应关系，使访问者能够清晰地辨别连接目标，更方便地浏览网页
（四）巩固与练习
四课后反思。
第4章 超级链接
4.4 实训
4.4.2 实训二：制作爱家美食网站“美味靓汤”系列页面 实训二：制作爱家美食网站“美味靓汤” 【实训综述】本实训通过“美味靓汤”系列页面的制作，进 实训综述】本实训通过“美味靓汤”系列页面的制作， 一步加强读者综合利用各种形式的超链接的能力， 一步加强读者综合利用各种形式的超链接的能力，为以后的 网站设计打好基础。 网站设计打好基础。 【实训展示】本实训中的素材包括6幅图片和2个下载压缩包 实训展示】本实训中的素材包括6幅图片和2 文件，制作爱家美食网站“美味靓汤”栏目的系列页面， 文件，制作爱家美食网站“美味靓汤”栏目的系列页面，效 果如图4 26所示 所示。 果如图4-26所示。
4.3 创建其他类型超链接
4.3.4 下载链接 如果链接到的文件不是HTML文件 则该文件作为下载文件， 文件， 如果链接到的文件不是HTML文件，则该文件作为下载文件， 下载链接的格式为： 下载链接的格式为： <a herf= “下载文件名” >热点文本</a> “下载文件名 >热点文本 下载文件名” 热点文本</a> 可以使用属性面板的链接文本框创建下载链接。 可以使用属性面板的链接文本框创建下载链接。创建下载链接 的方法如下： 的方法如下： 1）在“文档”窗口的设计视图中选择要从其创建链接的文字或 文档” 图像。 图像。 2）打开“属性”面板，在“链接”文本框中输入下载文件的名 打开“属性”面板， 链接” 称。
4.3 创建其他类型超链接
4.3.2 E-mail超链接 E-mail超链接 在很多网页中会看到网站管理员或公司的E-mail邮件超 链接，单击指向E-mail邮件的链接，将打开缺省的电子邮件 程序，如FoxMail、Outlook Express等，并自动填写邮件地址。 指向电子邮件链接的格式为： <a href="mailto:E-mail地址"> 热点文本 </a> 例如，E-mail地址是zhby1972@，建立如下链接： 信箱:<a href="mailto: zhby1972@">和我联系</a> 可以使用属性面板的链接文本框创建E-mail超链接。创建Email超链接的方法是： ① 在文档窗口的设计视图中选择要从其创建链接的文字或图 像。 ② 打开属性面板，在“链接”文本框中输入mailto: E-mail地址。
谈谈超级链接的种类及建立方法
谈谈超级链接的种类及建立方法超链接是中一个页面到另一个页面的链接关系。
链接的目标通常是另一个网页，但也可以是图片、电子邮件地址、多媒体文件，甚至是一个程序。
超链接能使任何页面与其他页面之间相互链接，而不用知道这些页面的具体存放位置。
超大型链接给出了页面之间相互联系的情况，而且它能使页面保持动态、有生命力的特性。
中链接的这些特性是它得以广泛应用的主要原因。
这里的“超链接”指的是一种对象，它“隐藏”在页面文字或图形之中。
如果将鼠标指向或点击它，就相当于指示浏览器跳转到一个新的地方。
单击超级链接以后，浏览器才能接收到一个名为“统一资源定位”()的地址，随后，浏览器就会打开位于那个地址的网页。
这个网页可以是当前的站点的一部分，也可以是同一台服务器内的另一个站点的一部分，还可以是中的任何位置、任何站点内的任何一部分。
当这些超链接所指向的内容在同一站点内时用相对地址，当这些链接所指向的内容在站点之外时用绝对地址。
从本质上讲，超级链接属于页面的一部分，它是一种允许我们与其他网页相互链接的元素，各个网页链接到一起以后，才能真正构成一个站点。
超级链接为站点提供了第一级、也是最重要的一级交互措施。
用户在浏览器中所看到的超级链接，通常采用与普通文本不同的形式表现显示。
如通过特殊的高亮文本(而且加上了下划线)、一幅图画、一个微标或者一张相片来显示，当鼠标移到一个超链接上面时，便会变成一个手掌形状。
同时，与该超链接对应的将会在窗口底部的状态栏中显示出来。
访问以后的超级链接颜色会变化。
但是在超链接的幕后却是代码。
超链接为浏览器提供了一个，作为的目标地址。
当访问者单击超链接时，浏览器就会跳转到这个目标地址的页面。
下面从超级链接的内容和外部表现形式来说说超链接的种类。
从超链接的内容在网站之外和网站之内来看可分为内部超链接、外部超链接和书签链接三种：内部超链接是指在同一个站点内的不同页面之间相互联系的超链接；外部链接是指把站点中的一个页面与另一个站点外的其他页面联系的超链接。