《第5章 使用超链接教学课件 网页制作基础教程(Dreamweaver CS6 第2版) .pptx》由会员分享,可在线阅读,更多相关《第5章 使用超链接教学课件 网页制作基础教程(Dreamweaver CS6 第2版) .pptx(22页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第5章 使用超链接教学课件 网页制作基础教程(Dreamweaver CS6 第2版)工信版主 编 黄洪杰 电子工业出版社电子工业出版社网页制作基础教程网页制作基础教程(Dreamweaver CS6(Dreamweaver CS6 第第2 2版版)电子教案电子教案第第5 5章章 使用超链接使用超链接根据链接的范围,超链接可以分为内部超链接、外部超链接和锚记超链接。内部超链接是指打开的超链接对象在本网站内;外部超链接是指打开的超链接对象在WWW的其他网站中;而锚记超链接可以链接到同一网页中的不同位置,类似于书签。根据建立超链接的不同对象,超链接又可以分为文本超链接和图片超链接。项目项目1 1
2、创建文本超链接创建文本超链接子项目子项目1 1 创建网站内文本超链接创建网站内文本超链接创建文本超链接的一项重要工作就是选择合适的热区文本。选取热区文本。单击“属性”面板中的“浏览文件”按钮,打开“选择文件”对话框,选取文件,单击“确定”。子项目子项目1 1 创建网站内文本超链接创建网站内文本超链接还可以使用拖拽的方法:选中热区文本,在“属性”面板中单击锚记标记,拖拽到右面“文件”面板中的网页上,松开鼠标,即完成超链接的建立。子项目子项目2 2 创建网站外文本超链接创建网站外文本超链接选中热区文字,然后在“属性”面板的“链接”栏中输入网址,即可。子项目子项目3 3 创建电子邮件超链接创建电子邮
3、件超链接拖动鼠标,选择热区文本。单击菜单栏上的“插入”菜单,在弹出的下一级子菜单中选择“电子邮件链接”命令,打开“电子邮件链接”对话框。输入电子邮件地址。子项目子项目3 3 创建电子邮件超链接创建电子邮件超链接若直接在“属性”面板的“链接”栏中输入“mailto:”,也可以达到同样的效果。注意,“mailto:”与电子邮件地址(此处为)之间不能有空格。子项目子项目4 4 修改超链接修改超链接在编辑窗口中选中需要修改的超链接的热区文本,然后在“属性”面板的“链接”文本栏中便可以进行修改,修改完后用鼠标在任意区域单击即可。也可以单击“修改”菜单,在弹出的菜单中单击“更改链接”命令。子项目子项目5
4、5 创建打开一个新窗口的创建打开一个新窗口的超链接超链接在编辑窗口中,建立超链接以后,选取热区文本,在“属性”面板中单击“目标”,在下拉菜单中选择“_blank”。子项目子项目5 5 创建打开一个新窗口的创建打开一个新窗口的超链接超链接除了_blank 以外,目标还有三个选项,这三个选项都与框架有关。_parent 表示在显示链接框架的父框架集中打开链接的文档,同时替换整个框架集,也就是说整个框架文件被覆盖。_self 表示在当前框架中打开链接,同时替换该框架中的内容。_top 表示在当前浏览器窗口中打开链接的文档,同时替换所有框架。项目项目2 2 创建图片超链接创建图片超链接子项目子项目1
5、1 创建整个图片的超链接创建整个图片的超链接选中图片,然后在“属性”面板的“链接”栏中输入网址或者用锚记超链接连接到网页上,保存网页。这样就为图片文件建立了超链接。子项目子项目2 2 创建图片热区超链接创建图片热区超链接为图片的不同位置建立不同的超链接。这种超链接叫做图片热区超链接。选中整个图片,用鼠标单击“属性”面板的“矩形热点工具”按钮,在被选中的整个图片上拖动鼠标指针,画一个虚框将“好书推介”四个字框中,可以发现被选区域变虚。子项目子项目2 2 创建图片热区超链接创建图片热区超链接单击“属性”面板中的“浏览文件”按钮,打开“选择文件”对话框,在“选择文件”对话框中,选择网页文件,单击“确
6、定”。子项目子项目3 3 鼠标经过图像鼠标经过图像鼠标经过图像可以实现这样的效果:在网页上有一幅静态的图片,当鼠标移动到这幅图片上时,该图片变成另一幅图片,来提醒浏览者这一幅图片存在超链接。单击鼠标,打开一个网页。要想实现鼠标经过图像功能,要事先准备两幅图片,和一个准备打开的网页。子项目子项目3 3 鼠标经过图像鼠标经过图像单击鼠标确定光标的位置。然后单击“插入”菜单,在弹出的菜单中选择“图像对象”下的“鼠标经过图像”命令,在“插入鼠标经过图像”对话框中,输入图像名称,然后单击“原始图像”后面的“浏览”按钮,然后找到事先准备好的第一幅图片,单击“确定”按钮。子项目子项目3 3 鼠标经过图像鼠标
7、经过图像在返回的“插入鼠标经过图像”对话框中单击“确定”按钮,这时,在网页的确定位置出现第一幅图像。预览网页,将鼠标移动到刚插入的图片上,可以发现,图片变成另一幅图片,同时鼠标指针变成手型。项目项目3 3 创建锚记超链接创建锚记超链接锚记超链接,即网页中所谓的书签,就是到达网页中某个具体位置的链接。当网页内容过长时,使用书签可以快速地浏览到所关心的信息。子项目子项目1 1 命名锚记命名锚记单击菜单栏上的“插入”,在弹出的下拉菜单中选择“命名锚记”,也可以单击“插入”面板“常规”选项卡的“命名锚记”按钮。在打开的“命名锚记”对话框中输入作为锚记的名称,单击“确定”按钮。则在刚才选中的文字旁边出现一个锚记的标记。子项目子项目2 2 创建锚记超链接创建锚记超链接选中热区文本,用鼠标拖动“属性”面板中超链接标记到锚记标记上。这时,可以发现“属性”面板的“链接”栏中出现“#锚记名称”。松开鼠标,网页顶端的热区文字变成蓝色并带有下划线。