下载文档原格式
公开课教案课程名称《网页制作》教程课题名称：Dreamweaver中超链接的应用授课班级：任课教师：授课时间：时间分配教学内容及过程教学方法及教学内容的拾漏补遗17’第三环节：教师演示、讲解操作步骤 Dreamweaver中超链接的应用一、超链接的含义超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点。
二、超链接的分类1、按照源端点的不同，可以将超链接分为文本链接、图像链接和表单链接3种。
文本链接：是指以文字作为超链接源端点的链接。
图像链接：是指以图像作为源端点的超链接。
表单链接：需要与表单结合使用，当用户单击表单中的按钮时，会自动跳转至相应页面。
2、根据目标端点的不同，超链接可分为内部链接、外部链接、锚点链接和电子邮件链接4种。
内部链接：其目标端点是本站点中的其他网页或文件。
外部链接：指链接的目标端点与源端点不在同一个站点中。
锚点链接：如果网页太长，可用锚点链接实现跳转到当前网页或其他网页中的某一指定位置。
电子邮件链接：单击电子邮件链接，将打开系统默认的电子邮件收发程序。
三、设置链接属性在没有选中任何对象的前提下，单击“属性”面板上的“页面属性”按钮，打开“页面属性”对话框，首先在左侧列表中选择“链接”选项，然后在右侧设置各项链接属性。
演示提问讨论讲授、演示、讨论时间分配教学内容及过程教学方法及教学内容的拾漏补遗30’四、设置常规超链接常规超链接包括内部超链接和外部超链接，内部超链接是指目标文件位于站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。
1．内部超链接内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以在“属性”面板上的“链接”编辑框中直接输入要链接对象的相对路径；也可以通过单击“属性”面板上“链接”编辑框右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择链接对象。
2．外部超链接外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板上的“链接”编辑框中直接输入要链接网页的网址。
《企业、政府网站设计与制作——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为班级画地图——制作图像映射
一教学目标
1．掌握制作图像映射的具体方法
2．熟练根据需要对热点进行编辑和调整，
3．进一步感受对网页制作的兴趣。
二教学重难点
1、制作图像映射的具体步骤
2、如何根据需要对热点进行编辑和调整
三教学过程
（一）导入
我们确定学校的所在区域，怎么建立与数字地图的链接呢？
（二）新授
1、如何创建热点：首先需要得到图片，打开“请多指教”网页，找到学校所在的位置。
利用图片工具栏上的“多边形热点”绘制。
然后理解在网页设计视图下。
理解热点形状有长方形、椭圆形、多边形。
注意：热点必须是一个闭合区域，否则不能建立超链接。
2、绘制热点后，系统立刻弹出“编辑超链接”对话框，通过对话框设置热点超链接目标。
在“地址”文本框中输入相应的链接目标
3、单击“确定“按钮，对话框消失。
切换到预览试图下左键单击热点区域，显示结果。
4.热点创建的两种方式：一种运用图盘工具栏中的热点按钮子在图像上几何区域描绘，然后建立超链接;另一种是在“图片上创建文本热点。
（三）小结
本届学习了悬着图片工具栏中的热点按钮在一个图像上绘制不同的热点，设置多个连接，建立图像中各个区域的对应关系，使访问者能够清晰地辨别连接目标，更方便地浏览网页
（四）巩固与练习
四课后反思。
谈谈超级链接的种类及建立方法超链接是中一个页面到另一个页面的链接关系。
链接的目标通常是另一个网页，但也可以是图片、电子邮件地址、多媒体文件，甚至是一个程序。
超链接能使任何页面与其他页面之间相互链接，而不用知道这些页面的具体存放位置。
超大型链接给出了页面之间相互联系的情况，而且它能使页面保持动态、有生命力的特性。
中链接的这些特性是它得以广泛应用的主要原因。
这里的“超链接”指的是一种对象，它“隐藏”在页面文字或图形之中。
如果将鼠标指向或点击它，就相当于指示浏览器跳转到一个新的地方。
单击超级链接以后，浏览器才能接收到一个名为“统一资源定位”()的地址，随后，浏览器就会打开位于那个地址的网页。
这个网页可以是当前的站点的一部分，也可以是同一台服务器内的另一个站点的一部分，还可以是中的任何位置、任何站点内的任何一部分。
当这些超链接所指向的内容在同一站点内时用相对地址，当这些链接所指向的内容在站点之外时用绝对地址。
从本质上讲，超级链接属于页面的一部分，它是一种允许我们与其他网页相互链接的元素，各个网页链接到一起以后，才能真正构成一个站点。
超级链接为站点提供了第一级、也是最重要的一级交互措施。
用户在浏览器中所看到的超级链接，通常采用与普通文本不同的形式表现显示。
如通过特殊的高亮文本(而且加上了下划线)、一幅图画、一个微标或者一张相片来显示，当鼠标移到一个超链接上面时，便会变成一个手掌形状。
同时，与该超链接对应的将会在窗口底部的状态栏中显示出来。
访问以后的超级链接颜色会变化。
但是在超链接的幕后却是代码。
超链接为浏览器提供了一个，作为的目标地址。
当访问者单击超链接时，浏览器就会跳转到这个目标地址的页面。
下面从超级链接的内容和外部表现形式来说说超链接的种类。
从超链接的内容在网站之外和网站之内来看可分为内部超链接、外部超链接和书签链接三种：内部超链接是指在同一个站点内的不同页面之间相互联系的超链接；外部链接是指把站点中的一个页面与另一个站点外的其他页面联系的超链接。
