下载文档原格式
公开课教案课程名称《网页制作》教程课题名称：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.热点创建的两种方式：一种运用图盘工具栏中的热点按钮子在图像上几何区域描绘，然后建立超链接;另一种是在“图片上创建文本热点。
（三）小结
本届学习了悬着图片工具栏中的热点按钮在一个图像上绘制不同的热点，设置多个连接，建立图像中各个区域的对应关系，使访问者能够清晰地辨别连接目标，更方便地浏览网页
（四）巩固与练习
四课后反思。
谈谈超级链接的种类及建立方法超链接是中一个页面到另一个页面的链接关系。
链接的目标通常是另一个网页，但也可以是图片、电子邮件地址、多媒体文件，甚至是一个程序。
超链接能使任何页面与其他页面之间相互链接，而不用知道这些页面的具体存放位置。
超大型链接给出了页面之间相互联系的情况，而且它能使页面保持动态、有生命力的特性。
中链接的这些特性是它得以广泛应用的主要原因。
这里的“超链接”指的是一种对象，它“隐藏”在页面文字或图形之中。
如果将鼠标指向或点击它，就相当于指示浏览器跳转到一个新的地方。
单击超级链接以后，浏览器才能接收到一个名为“统一资源定位”()的地址，随后，浏览器就会打开位于那个地址的网页。
这个网页可以是当前的站点的一部分，也可以是同一台服务器内的另一个站点的一部分，还可以是中的任何位置、任何站点内的任何一部分。
当这些超链接所指向的内容在同一站点内时用相对地址，当这些链接所指向的内容在站点之外时用绝对地址。
从本质上讲，超级链接属于页面的一部分，它是一种允许我们与其他网页相互链接的元素，各个网页链接到一起以后，才能真正构成一个站点。
超级链接为站点提供了第一级、也是最重要的一级交互措施。
用户在浏览器中所看到的超级链接，通常采用与普通文本不同的形式表现显示。
如通过特殊的高亮文本(而且加上了下划线)、一幅图画、一个微标或者一张相片来显示，当鼠标移到一个超链接上面时，便会变成一个手掌形状。
同时，与该超链接对应的将会在窗口底部的状态栏中显示出来。
访问以后的超级链接颜色会变化。
但是在超链接的幕后却是代码。
超链接为浏览器提供了一个，作为的目标地址。
当访问者单击超链接时，浏览器就会跳转到这个目标地址的页面。
下面从超级链接的内容和外部表现形式来说说超链接的种类。
从超链接的内容在网站之外和网站之内来看可分为内部超链接、外部超链接和书签链接三种：内部超链接是指在同一个站点内的不同页面之间相互联系的超链接；外部链接是指把站点中的一个页面与另一个站点外的其他页面联系的超链接。
《网页设计与制作——D r e a m w e a v e r8》期末模拟试题一一、选择题1、打开Dreamweaver 8窗口后，如果没有出现属性面板。
可执行__C_____菜单中的“属性”命令将其打开。
A、插入B、修改C、窗口D、命令2．在站点中建立一个文件，他的扩展名应是_____D__。
A、DOCB、PPTC、XLSD、HTM3．设置一个没有超链接功能的图像变化（即当鼠标指向页面中的图像时显示另外的图像，当鼠标离开页面中的图像时显示原图像），应使用Dreamweaver 8的____B___功能。
A、导航图像B、翻转图像C、轮换图像D、预载图像4．在___ D____文本框中输入数据后，数据以*号显示。
A、单行文本框B、多行文本框C、数值文本框D、密码文本框5．按住___C____键的同时拖拽鼠标绘制直线，可以绘制水平、垂直或增量为45度角的直线。
A、CtrlB、AltC、ShiftD、Ctrl+Shift6、网站首页的名字通常是（D）A、Index.htmB、Index.htmlC、WWWD、A或B7、在Dreamweaver网页设计中，关于框架的说法正确的是：（C）A、框架将浏览窗口划分为若干区域，分别显示一个网页的不同部分。
B、单击名字为“Insert Left Frame”的图标，可以将一个框架拆分为上下两部分。
C、通过按下鼠标左键进行拖动，可以直接改变框架高度。
D、框架之间不能实现链接。
8、利用Dreamweaver8中的（C）技术，可以让网页上的内容随心所欲地放置在任何位置上。
A、表单（Forms）B、框架（Frames）C、层（Layer）D、图像（Image）9、某用户在用模板做的页面无法插入层，其原因可能是： BA、层不可能插入用模板做的页面B、该用户没有定义可编辑区域C、只能先插入表格，再将表格转换成层D、该用户没有定义锁定区域A、Shift + F3B、Alt + F3C、F3D、Ctrl + F3二、填空题1．在表格的____单元格_____中可以插入另一个表格，这称为表格的嵌套。
HTML图像的热区链接知识及实例代码除了对整幅图像设置超链接外，还可以将图像划分为若干区域，这叫做"热区"，每个区域可设置不同的超链接。
此时，包含热区的图像可以称为映射图像。
要进行热区设置，首先需要在图像文件中设置映射图像名，格式为：<img src = 图像文件地址 usemap = 映射图像名称>也就是说，此时需要使用<img>标记的usemap属性，定义图像的映射图像名。
然后，就要在图像中定义各个热区以及超链接了，主要语法为：<map name = 映射图像名称><area shape = 热区形状1 coords = 热区坐标1 href = 链接地址1><area shape = 热区形状2 coords = 热区坐标2 href = 链接地址2>……<area shape = 热区形状n coords = 热区坐标n href = 链接地址n></map>在该语法中又引入了两个标记：<map>和<area>。
<map>、</map>标记用于包含多个<area>标记，其中的"映射图像名称"就是在<img>标记中定义的名称。
<area>标记则用于定义各个热区和超链接，它有两个重要属性：（1）shape属性：用来定义热区形状，它有三个值：●default：默认值，为整幅图像。
●rect：矩形区域。
●circle：圆形区域。
●poly：多边形区域。
（2）coords属性：用来定义矩形、圆形或多边形区域的坐标。
它的格式如下：●如果shape = "rect"，则coords包含四个参数，分别为left、top、right和bottom，也可以将这四个参数看成矩形左上角和右下角顶点的坐标。
PS软件中如何应用图像自动色调映射功能在图像处理的领域中，Photoshop（简称 PS）软件一直是专业人士和爱好者们的得力工具。
其中，图像自动色调映射功能是一项非常实用但又常常被忽视的强大功能。
它能够帮助我们在处理图像时，快速而有效地调整色调，让图像呈现出更加出色的视觉效果。
首先，让我们来了解一下什么是图像自动色调映射功能。
简单来说，它是一种根据图像的亮度和颜色分布，自动调整对比度、亮度和色彩平衡的功能。
这对于那些不太熟悉手动调整参数或者想要快速获得较好效果的用户来说，无疑是一个巨大的福音。
那么，如何在 PS 中找到并启用这个功能呢？打开 PS 软件后，导入您想要处理的图像。
然后，在菜单栏中选择“图像”选项，在下拉菜单中找到“调整”，在“调整”的子菜单中，您就能够看到“自动色调”这一选项。
点击它，PS 软件就会自动为您的图像应用色调映射的调整。
然而，自动色调映射功能并不是万能的，它可能无法完全满足您对图像的特定需求。
在很多情况下，我们还需要对其结果进行进一步的微调。
比如，如果自动调整后的图像显得过于明亮或者过于暗淡，我们可以通过“亮度/对比度”调整来进行修正。
同样在“图像” “调整”菜单中，选择“亮度/对比度”，然后通过拖动滑块来增加或减少亮度和对比度的值，直到图像达到您满意的效果。
另外，色彩平衡的调整也是非常重要的。
有时候自动色调映射可能会导致某些颜色过于鲜艳或者过于暗淡。
这时，我们可以选择“色彩平衡”选项（同样在“图像” “调整”菜单中），通过调整“阴影”、“中间调”和“高光”的色彩平衡，来让图像的颜色更加自然和协调。
在使用自动色调映射功能时，我们还需要考虑图像的类型和用途。
例如，如果是一张风景照片，可能需要强调天空的蓝色和草地的绿色，以使画面更加生动和美丽。
而对于一张人物照片，重点可能在于肤色的自然和柔和，避免出现颜色失真的情况。
对于一些复杂的图像，可能需要结合其他工具和调整选项来达到最佳效果。
如何为图⽚添加热点链接？（map+area） 所谓图⽚热点链接就是为图⽚指定⼀个或多个区域以实现点击跳转到指定的页⾯。
简单来说就是点击某⼀区域就能跳转到相应的页⾯，⽽⽆需点击整个图⽚才能跳转。
说到图⽚热点链接，我⾸先想到了map + area，当然了，可能还有其他⽅法也能实现。
以前只是知道有这个功能，但是具体如何实现却没有去真正的了解。
由于⼯作需要，今天稍微了解了下，发现这个功能其实蛮实⽤的，尤其是在⽹页banner⼴告位中想实现点击指定区域或链接以实现跳转是⾮常有⽤的。
⾸先说下map，map的作⽤是定义⼀个图像映射。
所谓图像映射，是指带有可点击区域的⼀幅图像。
然⽽光有map是不够的，还需要配合area标签来使⽤，area元素永远嵌套在 map 元素内部。
area 元素可定义图像映射中的区域，也就是指定的点击区域。
说了这么多，还是直接上代码吧：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box{width:1024px;margin:10px auto;}img{width:1024px;height:200px;}#mapArea{outline:none;}</style></head><body><div class="box"><img src="adver_xmb.png" alt="" usemap="#planetmap"><map name="planetmap" id="planetmap"><area shape="rect" coords="248,45,403,65" href ="" target ="_blank" alt="Venus" id="mapArea" /></map></div></body></html> 实现效果如下： 点击图中的链接实现跳转链接对应的⽹站，由于热点链接点击过后默认会有⼀个边框，这⾥我们可以给area元素设置样式：outline:none即可实现点击后⽆边框 ps:<img>中的 usemap 属性可引⽤ <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
网站建设与网页制作步骤：1.规划阶段（网站策划）2.设计阶段（页面美工）3.实施阶段（网页制作）详细流程：1.站点策划2.构思草图3.美工设计4.图形制作5.脚本编程6.图形页面整合7.测试发布一．创建站点创建新站点、添加已完成站点（文件面板→管理站点→新建→命名→定义路径（前者为自定义后者为文件存储路径））规划站点结构的原则（分类保存、合理的文件名称（全英文名）、首页名称（index）、本地与远程结构要相同）建站点文档（添加文件和文件夹（通过鼠标右键新建）、文件的管理）二．页面制作1. HTML代码的基本结构（头部（head）包含字符集（meta语句）、标题，主体（body））<html><head>Meta语句，标题</head><body>......</body></html>2.设定meta内容（通用头元素的设置、添加meta元素、设置关键字和描述文字、刷新网页设置）插入→HTML→文件头标签→meta→设定meta值不会在浏览器前端显示插入→HTML→文件头标签→关键字→设定关键字→方便用户搜索到自己的网站插入→HTML→文件头标签→说明→设定说明语句→对网站的描述，方便用户搜索到自己的网站插入→HTML→文件头标签→刷新→设定刷新语句→对于网页的更新的操作（尤其网页更新比较快的情况）（刷新当前页面，刷新跳转到其他页面）3.设定页面属性（标题、背景图像、背景色、文本颜色、边距）空白处右键页面属性添加文本（插入特殊字符、设定文本属性、改变字体和尺寸）插入特殊字符：插入→文本→插入特殊字符......设定文本属性：插入→文本→属性插入→属性设置4.插入图像（浏览器支持的影像格式：GIF、JPEG、JPG、PNG）插入→常用→图像（替换文本（鼠标在图片上方悬停时显示的文字））图像属性设置：选中图片右键属性，图片大小设置好后重新取样；左右对齐，边距设置；图像编辑（选中图像点击属性在属性面板中编辑图像属性必要时可调用PS 软件、Fireworks软件等（调用方法选中图片→右键→编辑以））5. 图文混排（资源面板包含有站点下所有图像，音频，视频文件等）插入日期（插入→常用→日期）插入水平线（插入→HTML→水平线）（分割线，颜色默认灰色，设置水平线颜色：属性面板→快速颜色编辑器）注释（插入→常用→注释（不会显示））6.插入Flash动画（Flash动画、Flash按钮与文字、Flash图片播放器、FlashPaper 文件）插入→常用→flashFlash设置：属性面板里设置Flash源代码<object（对象标记）>ID序列号，插件下载地址，宽度和高度<param(参数)>flash影片路径<param(参数)>显示品质（高或低品质)<param(参数)>......<embed>动画嵌入浏览器</emmbed></object>插入flash按钮：插入→常用→按钮（选择样式，编辑文本，字体，大小，（链接），（目标），背景色，另存为(站点media文件夹下)时注意扩展名后缀为.swf）效果鼠标指上按键时变色...插入flash文本：插入→常用→flash文本（字体，大小，颜色，转滚颜色，文本，（链接），（目标），（背景色），另存为(站点media文件夹下)时注意扩展名后缀为.swf）效果鼠标指上文字变色的动态文字...Flash图片播放器：将要播放图片拷贝到站点image文件夹下插入→flash元素→保存后缀.swf→flash元素面板中设置（重新定义imageUVL浏览选择站点目录下要播放的图片，删除imageLink（图片链接），删除imagelink Target（图片链接目标），编辑标题，是否自动播放，播放是否循环等等。
