实训三 超级链接建立.doc

实训三　超级链接的建立 课时：3 班级：12计算机班 实训日期：2013-3-18 编写时期：2013-3-8 一、实训目的 1、掌握超链接的基本概念和种类文本和图片超链接 2、hunyin.html效果图如图所示，图a是网页上半部分的效果图，图b是网页下半部分的效果图，单击“再看一遍”能返回到“中华人民共和国婚姻法”，该法规内容在fa.txt中，单击右下角的“返回首页”能够返回首页。 图a 图b 三、知识点分解 1、在该页面正中间有一张图像，图像显示了边框，当鼠标移到文字“情感美文”时会显示提示文字“情感美文”。 2、文字以表格的形式显示在网页上的，此时注意不是在网页中绘制表格，把文字录入进去，而是采用导入fa.txt文件，使他以“表格式数据”显示出来，“再看一遍”采用了锚链接，“返回首页”采用文字链接，两个链接都无下划线。 四、实训步骤 内容1的实训步骤： 1、新建4个HTML文档，将其分别保存为index.html，meiwen.html，aiqing.html，hunyin.html。 将光标定位到要插入图像的位置。 执行如下方法之一： 选择[插入]/[图像]菜单命令，打开“选择图像源”文件对话框； 单击“插入”面板的“常用”选项卡中的 按钮，打开如图所示的“选择图像源文件”对话框； 按【Ctrl+Alt+I】键打开“选择图像源文件”对话框。 在“选择文件名自”栏中选中单选项，在“查找范围”下拉列表框中指定要插入图像的路径并在文件列表中选择需要的文件名称（*.gif、*.jpeg和*.png） 在“相对于”下拉列表框中选择“站点根目录”选项。 单击“确定”按钮，弹出如图所示的“图像标签辅助功能属性”对话框。 在“替换文本”下拉框中输入想要说明的文字，这样的话当鼠标移动到图像上就会出现“替换文本”下拉框中输入的文字。 单击“确定”按钮。 如果所选择的图像文件不在定义的本地站点中，系统会打开如图所示的询问对话框，询问是否保存到本地站点目录下。 在提示对话框中单击按钮，打开“复制文件为”对话框，在该对话框中选择保存路径，并在“文件名”文本框中更改图像的名称。 单击“确定”按钮即可将所选的图像插入到网页中指定的位置。 选中该图像，打开“属性面板”，将图像的高度改为“700”，边框改为“1”，选择“居中对齐”按钮。 选取要添加热区的图片，此时属性面板中出现4个热点工具，单击“矩形热点工具”，在图像上“情感美文”绘制热区后，自动打开“热区”属性面板，如图所示。 在“属性面板”中将“链接”改为meiwen.html，在“替换”中输入“情感美文”，在“目标”下拉列表框中选择“_blank”. 用同样的方法绘制其他热点，并设置相应的链接。 热点链接完成后按【F12】键预览页面，当鼠标移至热区上时即可看到手形图标下面有一个提示文本。 在建立“与我联系”链接时，则要创建电子邮件链接。创建电子邮件链接有两种方法。 方法一： (1) 在“文档”窗口的“设计”视图中，选择“与我联系”热区。 (2) 执行下列操作之一插入该链接： 选择[插入]([电子邮件链接]菜单命令； 在“插入”栏的“常用”选项中，单击“插入电子邮件链接”按钮 。 (3) 打开“电子邮件链接”对话框，如图所示。 在“文本”文本框中输入显示在Web页面中的链接文本，如“与我联系”。 在“E-Mail”文本框中输入要链接到的电子邮箱地址，如“csygold@163.com”。 单击“确定”按钮。 方法二： 使用“属性面板创建电子邮件链接，具体操作如下。 (1) 在“文档”窗口的“设计”视图中选择要建立电子邮件链接的文本或图像，如“与我联系”。 (2) 在属性面板的“链接”文本框中，输入“mailto:”，然后在它后面输入电子邮件地址，如“sunnyboy338168@163.com”，在IE浏览器中单击该链接的显示效果。 18、按【F12】键，预览。 注意：此时电子邮件的发送是采用OutExpress或者是OutLook发送的。所以单击“与我联系”时，会自动创建OutExpress连接向导。 内容2的实训步骤: 打开“hunyin.html”页面，选择[文件]\[导入]\[表格式数据]，弹出如图所示的“导入表格式数据”对话框。 单击“数据文件”后面的按钮，选择“fa.txt”文件，定界符选择“Tab”，单击“确定”按钮。 在Dreamweaver 8中还可以建立命名锚记的链接，也就是锚链接。使用命名锚记的链接可以跳转至文档内的特定位置。建立锚链接分为创建命名锚记和创建到该命名锚记的链接两部分。 创建命名锚记：将插入点放在需要命名锚记的地方，如本例