DW中建立超链接
Dreamweaver 8中文版网页制作第5章 创建超级链接
5.2.2
图像和图像热点超级链接
一、图像超级链接 用图像作为链接载体，这就是图像超级链接。 创建图像超级链接的方法是：首先选中图像，然后在 【属性】面板中设置链接地址和目标窗口。
5.2.2
图像和图像热点超级链接
二、图像热点 图像热点（或称图像热区、图像地图）实际上就是为 图像绘制一个或几个特殊区域，并为这些区域添加链接。 创建图像热点超级链接的方法是： （1）使用图像热点工具绘制热点区域。 （2）在【属性】面板中设置链接地址、目标窗口等。
5.1.2
超级链接的分类
根据源端点的不同，超级链接也可分为3种 类型。
文本超级链接：以文本作为超级链接载体。 图像超级链接：以图像作为超级链接载体。 表单超级链接：选择某个选项后会自动跳 转到目标端点，或需要单击相应按钮会自 动跳转到目标端点。
5.2 普通超级链接
本节主要内容： 文本超级链接及其状态 图像和图像热点超级链接 图像地图 电子邮件超级链接 锚记超级链接
5.3.3 脚本链接
创建JavaScript链接的方法是，首先选定文本或 图像，然后在【属性】面板的【链接】文本框中输入 “JavaScript:”，后面跟一些JavaScript代码或函数调 用即可。
5.3.3 脚本链接
经常用到的脚本链接JavaScript代码。
JavaScript:alert('字符串') JavaScript:history.go(1)：前进 JavaScript:history.go(-1)：后退 JavaScript:history.forward(1)：前进 JavaScript:history.back(1)：后退 JavaScript:history.print()：打印 JavaScript:window.external.AddFavorite(‘htt p://’,‘老虎工作室’)：收藏指 定的网页 JavaScript:window.close()：关闭窗口
dreamweaver网页设计-超级连接
使用导航条
导航条是具有站点导航作用的一系列链接。
1、效果 2、设计 选择“插入”>“图像对象”>“导航条”命令。 单击“常用”子工具栏上的“图像”按钮右端的下拉按钮，从下拉列 表中选择“导航条”按钮。 打开“插入导航条”对话框 ，通过该对话框即可设置导航条。
Dreamweaver网页设计
之二
制作内部链接 制作外部链接 电子邮件的链接、空链接 锚点链接、图像映射、使用导航条
制作内部链接
内部链接是链接 ，在属性面板的“链接” 文本框中输入相对路径，或使用“指向文件”和“选择”文件的方法 均可以制作内部链接。
站点内部的文件
1、效果 内部链接位置：车型总汇 2、建立超链接的对象 文本、图象 3、建立超链接的目标 网页、图片、视频、音频、word、exel、ppt、程序等 4、设计
1、效果 电子邮件的链接位置：fly8008@ 2、建立超链接的对象 文本 3、建立超链接的目标
电子邮件
4、设计 选择“插入”>“电子邮件链接”命令。
空链接
空链接是
有超链接行为而无新页面产生的链接。
1、效果 空链接位置：首页 2、设计 创建空链接的操作方法如下： 在属性面板的“链接”文本框中输入“#”。
制作外部链接
外部链接是链接站点外部的链接。 1、效果 外部链接位置：搜狐 2、建立超链接的对象 文本、图象 3、建立超链接的目标 网页、图片、视频、音频、word、exel、ppt、程序等 4、设计 在属性面板上输入：/
电子邮件的链接
Dreamweaver超链接的使用
超链接的使用
知识点：
●一般超链接插入方法
●电子邮件链接
●Javascript脚本链接
●命名锚记链接
●热区
操作步骤：
1.插入链接
目标：
Blank：在新窗口打开链接Self：在目前显示窗口打开链接Parent：在父级窗口打开链接Top：在顶级窗口打开链接
2.插入日期
3.插入电子邮件链接
格式：javascript:alert(‘需要显示的文字’)
●构建目录
●输入相应的诗的内容
在每首诗所在的相应位置插入命名锚记，并为命名锚记取名（任何英文名），该名称即
超链接寻找的目标
回到目录部分，选择相应的诗的题目，添加命名锚记链接，格式：#命名锚记名称
●其他命名锚记设置同上
6.热区
●页面中插入地图
●选择相应的热点工具在需要链接的地图部分绘制相应热区
●选中该热区，并添加链接地址
其他热区添加方法同上。
DW第四讲 超级链接
使用跳转菜单
可以把跳转菜单看作是一种超链接的集合，它以弹出式下拉
菜单的形式在网页中展现出来。 弹出菜单内的链接没有类型上的限制，可以是本地链接，也 可以是到其他网站的链接。主要是到其他网站的链接
网页预 览效果
设计好的跳转菜 单及其属性面板
定时自动跳转页面
自动跳转也叫自动重定向或自动转向，就是指当浏
让网页中的链接更动态
新建CSS规则.在对话框中:“选择器类型”选
择高级。“选择器”选择：a:hover； “定义 在”选择：仅对该文档
a:link 链接普通样式 a:visited 链接访问过后的样式 a:hover 鼠标经过时链接的样式 a:active 鼠标按下去时链接的样式
Dreamweaver课件
任务四
超级链接
课堂讲解
超级链接概念 超级链接分类 创建空链接 创建文本超级链接 创建电子邮件超级链接 创建锚链接 创建脚本链接 使用跳转菜单 创建图像超级链接 创建导航条
超级链接概念
超级链接是指页面对象之间的链接 关系，它是网页的灵魂，能合理、协调 地把网站中的各个元素、页面通过超级 链接构成了一个有机整体，使浏览者能 快速地访问到想要访问的页面。
超级链接
超级链接的创建
2.相对链接:
步骤:1) 选中要设置链接的文本或图象 2) 在属性检查器中,单击“浏览”按钮选择链接的文件. 在属性检查器中,拖拽“指向”按钮在站点列表中选 择链接文件. 按住Shift键拖拽到站点列表中的链接文件。 在属性检查器“链接”文本框中输入相对URL地址。
3.空链接： 步骤:1) 选中要设置链接的文本或图象 2) 在属性检查器中, “链接”文本框中输入# 或者输入javascript:;（javascript 一词后依次接一个冒 号和一个分号）建立空链接的目的只是为了应用行为，其他情况 下不必建立。
DW常用快捷键大全
DW快捷键大全一、常用快捷键1.新建文档：Ctrl+N2.打开一个HTML文件：Ctrl+O3.在框架中打开：Ctrl+Shift+O4.关闭：Ctrl+W5.保存：Ctrl+S6.另存为：Ctrl+Shift+S7.检查链接：Shift +F88.退出：Ctrl+Q二、编辑菜单1.撤消：Ctrl+Z2.重复：Ctrl+Y 或Ctrl+Shift+Z3.剪切：Ctrl+X 或Shift+Del4.拷贝：Ctrl+C 或Ctrl+Ins5.粘贴：Ctrl+V 或Shift+Ins6.清除：Delete7.全选：Ctrl+A8.选择父标签：Ctrl+Shift+<9.选择子标签：Ctrl+Shift+>10.查找和替换：Ctrl+F11.查找下一个：F312.缩进代码：Ctrl+Shift+]13.左缩进代码：Ctrl+Shift+[14.平衡大括弧：Ctrl+’15.启动外部编辑器：Ctrl+E16.参数选择：Ctrl+U三、页面视图1.标准视图：Ctrl+Shift+F62.布局视图：Ctrl+F63.工具条：Ctrl+Shift+T四、查看页面元素1.可视化助理：Ctrl+Shift+I2.标尺：Ctrl+Alt+R3.显示网格：Ctrl+Alt+G4.靠齐到网格：Ctrl+Alt+Shift+G5.头内容：Ctrl+Shift+W6.页面属性：Ctrl+Shift+J五、代码编辑1.切换到设计视图：Ctrl+Tab2.打开快速标签编辑器：Ctrl+T3.选择父标签：Ctrl+Shift+<4.平衡大括弧：Ctrl+’5.全选：Ctrl+A6.拷贝：Ctrl+C7.查找和替换：Ctrl+F8.查找下一个：F39.替换：Ctrl+H10.粘贴：Ctrl+V11.剪切：Ctrl+X12.重复：Ctrl+Y13.撤消：Ctrl+Z14.切换断点：Ctrl+Alt+B15.向上选择一行：Shift+Up16.向下选择一行：Shift+Down17.选择左边字符：Shift+Left18.选择右边字符：Shift+Right19.向上翻页：Page Up20.向下翻页：Page Down21.向上选择一页：Shift+Page Up22.向下选择一页：Shift+Page Down23.选择左边单词：Ctrl+Shift+Left24.选择右边单词：Ctrl+Shift+Right25.移到行首：Home26.移到行尾：End27.移动到代码顶部：Ctrl+Home28.移动到代码尾部：Ctrl+End29.向上选择到代码顶部：Ctrl+Shift+Home30.向下选择到代码顶部：Ctrl+Shift+End六、编辑文本1.创建新段落：Enter2.插入换行：Shift+Enter3.插入不换行空格：Ctrl+Shift+Spacebar4.拷贝文本或对象到页面其他位置：Ctrl+拖动选取项目到新位置5.选取一个单词：双击6.将选定项目添加到库：Ctrl+Shift+B7.在设计视图和代码编辑器之间切换：Ctrl+Tab8.打开和关闭[属性]检查器：Ctrl+Shift+J9.检查拼写：Shift+F7七、格式化文本1.缩进：Ctrl+]2.左缩进：Ctrl+[3.格式>无：Ctrl+04.段落格式：Ctrl+Shift+P5.应用标题1到6到段落：Ctrl+1 到66.对齐>左对齐：Ctrl+Shift+Alt+L7.对齐>居中：Ctrl+Shift+Alt+C8.对齐>右对齐：Ctrl+Shift+Alt+R9.加粗选定文本：Ctrl+B10.倾斜选定文本：Ctrl+I11.编辑样式表：Ctrl+Shift+E八、查找和替换文本1.查找：Ctrl+F2.查找下一个/再查找：F33.替换：Ctrl+H九、处理表格1.选择表格(光标在表格中)：Ctrl+A2.移动到下一单元格：Tab3.移动到上一单元格：Shift+Tab4.插入行(在当前行之前)：Ctrl+M5.在表格末插入一行在最后一个单元格：Tab6.删除当前行：Ctrl+Shift+M7.插入列：Ctrl+Shift+A8.删除列：Ctrl+Shift+-9.合并单元格：Ctrl+Alt+M10.拆分单元格：Ctrl+Alt+S11.更新表格布局(在“快速表格编辑”模式中强制重绘)：Ctrl+Spacebar十、处理框架1.选择框架：Alt+点击2.选择下一框架或框架页：Alt+右方向键3.选择上一框架或框架页：Alt+左方向键4.选择父框架：Alt+上方向键5.选择子框架或框架页：Alt+下方向键6.添加新框架到框架页：Alt+从框架边界拖动7.使用推模式添加新框架到框架页：Alt+Ctrl+从框架边界拖动十一、处理层1.选择层：Ctrl+Shift+点击2.选择并移动层：Shift+Ctrl+拖动3.从选择中添加或删除层：Shift+点击层4.以象素为单位移动所选层：上方向键5.按靠齐增量移动所选层：Shift+方向键6.以象素为单位调整层大小：Ctrl+方向键7.以靠齐增量为单位调整层大小：Ctrl+Shift+方向键8.将所选层与最后所选层的顶部/底部/左边/右边对齐：Ctrl+上/下/左/右方向键9.统一所选层宽度：Ctrl+Shift+[10.统一所选层高度：Ctrl+Shift+]11.添加关键帧：Shift+F912.删除关键帧：Delete13.改变图象源文件属性：Double+点击图象14.在外部编辑器中编辑图象：Ctrl+双击图象十二、管理超链接1.创建超链接(选定文本)：Ctrl+L2.删除超链接：Ctrl+Shift+L3.在Dreamweaver打开链接文档：Ctrl+双击链接4.检查选定链接：Shift+F85.检查整个站点中的链接：Ctrl+F8十三、在浏览器中定位和预览1.在主浏览器中预览：F122.在次要浏览器中预览：Ctrl+F123.创建新文件夹：Ctrl+Shift+Alt+N4.打开选定：Ctrl+Shift+Alt+O5.从远程FTP站点下载选定文件或文件夹：Ctrl+Shift+D或将文件从[站点]窗口的[远程]栏拖动到本地栏6.将选定文件或文件夹上载到远程FTP站点：Ctrl+Shift+U或将文件从[站点]窗口的[本地]栏拖动到[远程]栏7.取出：Ctrl+Shift+Alt+D8.存回：Ctrl+Shift+Alt+U9.查看站点地图：Alt+F810.刷新远端站点：Alt+F5十四、站点地图1.查看站点文件：F82.刷新本地栏：Shift+F53.设为根：Ctrl+Shift+R4.链接到现存文件：Ctrl+Shift+K5.改变链接：Ctrl+L6.删除链接：Delete7.显示/隐藏链接：Ctrl+Shift+Y8.重命名文件：F29.放大站点地图：Ctrl+ +10.缩小站点地图：Ctrl+ -十五、播放插件1.播放插件：Ctrl+Alt+P2.停止插件：Ctrl+Alt+X3.播放所有插件：Ctrl+Shift+Alt+P4.十六、处理模板创建新的可编辑区域：Ctrl+Alt+V十七、插入对象1.任何对象(图象，Shockwave影片等)：文件从[资源管理器]或[站点]窗口拖动到[文档]窗口2.图象：Ctrl+Alt+I3.表格：Ctrl+Alt+T4.Flash影片：Ctrl+Alt+F5.Shockwave和Director影片：Ctrl+Alt+D6.命名锚记：Ctrl+Alt+A十八、历史纪录面板1.打开[历史纪录]面板：Shift+F102.开始/停止录制命令：Ctrl+Shift+X3.播放录制好的命令：Ctrl+P十九、打开和关闭面板1.对象：Ctrl+F22.属性：Ctrl+F33.站点文件：F54.站点地图：Ctrl+F55.资源：F116.CSS样式：Shift+F117.HTML样式：Ctrl+F118.行为：Shift+F39.历史纪录：Shift+F1010.时间轴：Shift+F911.代码检查器：F1012.框架：Shift+F213.层：F214.参考：Ctrl+Shift+F115.最小化所有窗口：Shift+F416.最大化所有窗口：Alt+Shift+F417.停止所有插件：Ctrl+Shift+Alt+X18.显示/隐藏浮动面板：F4二十、站点管理和FTP1.创建新文件：Ctrl+Shift+N2.在主浏览器中调试：Alt+F123.在次要浏览器中调试：Ctrl+Alt+F124.显示页面标题：Ctrl+Shift+T5.创建层时切换嵌套设置：Ctrl+拖动6.切换网格显示：Ctrl+Shift+Alt+G7.靠齐到网格：Ctrl+Alt+G。
dreamweaver第六章 超链接的建立
上面做的工作仅仅是使网页中可以显示文本和图像，虽说是“图文并茂”了，但这对于网页来说还很不够，为了使网站中的众多网页构成一个整体，必须使各网页通过超链接的方式联系起来，也就是说，使访问者能够在各个页面之间跳转。
超链接就是当用鼠标单击一些文字、图片或其他网页元素时，浏览器就会根据其指示载入一个新的页面或跳转到页面的其他位置。
与超链接相关的一个概念是定位点（也称锚点），它指明了网页中一个确定的位置，以便超链接跳转时定位。
6.1 从HTML的角度理解超链接仍然根据本书的原则，先从HTML语言的角度，来介绍超链接。
然后再使用Dreamweaver为网页添加超链接。
下面就来介绍各种超链接的制作方法。
6.1.1 文字超链接建立超链接所使用的HTML标签为<a></a>标签。
观察下面这段网页文档。
<html><head><title>超链接</title></head><body>点击<a href=1.html>这里</a>链接到一个图片网页</body></html>注意代码中以粗体显示的语句。
在这个<a></a>标签中，href属性是必要属性，用来放置超链接的目标，可以是本机上的某个HTML文件，也可以是URL地址。
<a></a>之间的内容为超链接名称。
这个页面显示的效果，单击“这里”两个字以后，就会网页就跳转到了链接的“1.html”页面了。
6.1.2 理解“路径”的概念路径的作用就是定位一个文件的位置，如果使用过Windows都了解文件夹和子文件夹，这本身就是路径的概念。
例如在上面的例子中，链接到的“1.html”就是一个路径，直接使用文件名表示这个文件和原来的网页文件在同一个文件夹中。
如果链接到的网页不和原网页在同一个文件夹中，就不能这样写了。
用DW给一张图片加多个链接
大家在做海报时，一张图片只能加一个链接，用Photoshop切片的方法又太麻烦。
在这里我教大家另外一个方法。
1、首先，在百度上下载Dreamweaver软件(我给大家示范的是Dreamweaver8版本)，并安装。
安装完成后，就可以打开Dreamweaver软件。
2、打开之后会出现这个界面，之后按HTML就可以了。
3、接着是代码这个界面，可以看到标题处有“无标题文档”这几个字，把这几个字删除即可。
4、按“设计”按钮，接下来就可以给图片加多个链接了。
5、在给图片加超链接之前，要先把图片先上传到我们的图片空间里，并复制链接(这里说的链接也就是图片的地址URL，右键-属性里也看以看到)。
6、我们再按Dreamweaver的菜单栏的“插入”-“图像”。
7、将URL处的文字删掉，并粘贴我们之前那张图片的链接(也就是图片的地址/URL)，按确定，之后有弹出图像标签辅助功能属性的框，继续按右侧的确定即可。
这样子我们要处理的这张图片就出现了。
8、按菜单栏下方的按钮(有小倒三角形的地方)，会出现“绘制矩形热点”、“绘制椭圆热点”、“绘制多边形热点”。
在这里我给大家只示范“绘制矩形热点”，其他热点也是同样的方法，只是形状不一样而已。
9、按绘制矩形热点，拖动鼠标，选出图片中要加宝贝链接的一个区域。
做完这个步骤后，图片上就出现了这样一块区域。
此时可以在下方属性栏将宝贝链接加在链接处，将目标处改为“_blank”。
10、第二、第三个区域方法也是一样的，大家可以先把去去画好，再点各个区域，分别加链接，把属性栏“目标”处都改为“_blank”。
11、接下来切换到代码这里，可以看到一大串代码，我们要将这里的代码全部复制。
（为避免广告嫌疑，我已经用红色线把宝贝链接划掉）12、之后我们再打开店铺首页装修，添加自定义模块，按“源码”按钮，将代码复制到空白处，复制好后再按一次“源码”按钮，就会出现这张图，看起来超赞的哦！(这种方法可以加在店铺首页，也可以加在宝贝详情页中)。
Dreamweaver给文本和图像添加超链接
实验7 给文本和图像添加超链接实验要求通过实验，理解链接的概念。
熟悉掌握如何给文本和图像添加超链接，如何添加邮件链接和创建锚记链接。
说明：站点是由繁复的链接组成的。
因为媒体的其他元素都可以按另一种形式进行复制，但是如果没有了链接，也就不会有万维网。
通常，网页设计者需要为短语、单词或者一个图片设置链接，链接到想要到达的地址。
一旦用户创建了链接，就可以在浏览器中预览它，实现在网络上的跳转。
对应知识点：●给文本和图像添加超级链接●添加邮件链接●创建锚记链接实验素材图像和文字制作完成的网页。
实验步骤1.启动Dreamweaver MX 2004程序，选择菜单“文件” “打开”命令，弹出“打开”对话框。
在对话框中，选择本书配套光盘exp7/sucai07文件夹中的网页文件page07.htm。
如图7-1所示。
2.单击“按钮”，打开网页文件编辑窗口。
如图7-2所示。
图７－１“打开”对话框图７－２page07.htm网页编辑窗口说明：此网页主要使用图像和文件制作完成。
其中大量使用了表格布局，读者可以打开网页进行分析，回顾关于图像、文本等实验的学习。
3.首先需要创建本地站点。
选择菜单“站点”→“管理站点”命令，打开“管理站点”对话框。
选择“新建”→“站点”命令，打开“站点定义”对话框。
4.在对话框“站点名称”编辑框中输入“广西行”，单击“本地根文件夹”和“默认文件夹”后面的文件夹，选择网页和图像的位置，确定后如图7-3所示。
5.单击“确定”按钮，返回“管理站点”对话框。
新建站点名称“广西行”显示在站点列表中。
如图7-4所示。
图7-3“站点定义”对话框图7-4“管理站点”对话框图7-5 文件面板6.单击“完成”按钮，本地站点创建完成。
Dreamweaver MX 2004将自动打开“文件”面板，定位到当前站点下。
如图7-5所示。
7.在打开的“page07.htm”文件上制作文字链接。
拖动鼠标，选中“我们的宗旨”图像下的第1个小标题“关于广西的介绍”。
Dreamweaver中如何应用超级链接
本节课通过实例分析了超级链接的：
要求学生掌握：
– Dreamweaver中超级链接的应用
– 常用超级链接的基本语法格式
模仿课堂中讲解的示例在个人网页添加超级
链接，观察各代码所表示的意义。
要求：
（1）创建页面的锚点链接；
（2）包含一个具有下载效果的超级链接；
（3）包含一个电子邮件的超级链接 （4）创建图片的热点链接
在这种效果下隐含了哪些知识点呢？
丰富页面内容
为页面添加超级链接
超级链接的组成
即指向目标的链接
即被指向的目的地
按照链接目标的路径分类：
还可以按照链接目标的对象不同进行分类
常用超级链接的语法格式：
– <a href=“URL”></a>普通连接 – <a href=“mailto:EMAIL”></a>Email链接 – <a name=“NAME”></a> 定义锚点 – <a href=“#NAME”></a>锚点链接
丰富页面内容为页面添加超级链接超级链接的组成即指向目标的链接即被指向的目的地按照链接目标的路径分类
Dreamweaver中如何应用超级链接
超级链接的标记语法格式。
难点
超级链接的标记语法格式
1. 分析平常上网中的超
级链接现象。
2. 分析按例网站的超级
3. 提出问题：
这种效果是如何
Dreamweaver超级链接怎么使用呢
Dreamweaver超级链接怎么使用呢大家知道Dreamweaver超级链接怎幺使用吗?下面我们就给大家详细介绍一下吧!我们积累了一些经验，在此拿出来与大家分享下，请大家互相指正。
1、在网页中选中要做超级链接的文字或者图片。
2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。
做好超级链接属性面板出现链接文件显示。
(如下图) 3、按F12预览网页。
在浏览器里光标移到超级链接的地方就会变成手型。
〖提示〗你也可以手工在链接输入框中输入地址。
给图片加上超级链接的方法和文字完全相同。
如果超级链接指向的不是一个网页文件。
而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。
超级链接也可以直接指向地址而不是一个文件，那幺单击链接直接跳转到相应的地址。
例如，在链接框里写上oldkids/那幺，单击链接就可以跳转到老小孩网站。
【邮件地址的超级连接】 在网页制作中，还经常看到这样的一些超级链接。
单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。
这也是一种超级链接。
制作方法是：在编辑状态下，先选定要链接的图片或文字(比如：欢迎您来信赐教!)，在插入栏点 或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。
提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。
(如下图) 创建完成后，保存页面，按F12预览网页效果。
【制作图片上的超级链接】 注意，我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。
比如一张中国地图的图片，单击了不同的省跳转到不同的网页。
可点的区域就是热区。
为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。
鼠标移动到省份的热区，会显示提示，如果有预先设置的网站，点击会进入对方的网站。
【制作方法】 1、首先插入图片。
单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。
网页制作与网站设计_05Dreamweaver CS3创建超级链接
任务三
任务描述 任务说明
操作步骤
3)按F12键，保存网页文档并在浏览 器中检验该文档。
任务四
任务描述 任务说明 操作步骤
小张想自己设立了一个网页，在
运行过程中可能会出现问题，通过浏
览者能反馈的信息，及时改进，提高 网页的制作水平。
任务四
任务描述 任务说明
在网页上创建E-mail链接，可以使浏
任务一
任务描述
任务说明 操作步骤
“_blank”:在弹出的新窗口中打开所链接 的目标。 “_parent”:如果是嵌套的框架，表示在 父框架 “_self”:浏览器默认的设置，在当前网页 所在的窗口中打开链接的网页。 “_top”:在完整的浏览器窗口的顶层打开 链接目标。
任务一
任务描述
任务说明 操作步骤
任务一
任务描述
任务说明 操作步骤
在“属性”面板中，单击“链接”文
本框右侧的指向文件图标，拖动鼠标时会
出现一条带箭头的细线，指示到链接的文 件后，释放鼠标，可以链接该文件⑻如图
5-4所示。
任务一
任务描述
任务说明 操作步骤
图5-4 创建指向文件图标链接
任务二
任务描述
任务说明 操作步奏
小张在浏览网页时，看见鼠标经过 某些文本时，会出现一个小手，点击后 会出现新的窗口，自己也想试一试。
图5-2 目标选项
任务一
任务描述
任务说明 操作步骤
④“标题”:设置超链接的标题。当鼠 标悬停在超级链接上时出现的说明文字。 ⑤“访问键”:设置键盘快捷键，设置 好后，如果按键盘上的快捷键将选中这个 超级链接。 ⑥“Tab键索引”:设置在网页中用 Tab键选中这个超链接的顺序。 2）完成参数设置后，单击“确定”按钮， 即可完成链接。
第6章_DW中的超链接与图片
图3.5 图像映射效果
4 动态图像效果 通常网页中的动态图像效果需要编写 JavaScript 脚本程序才能获得，不过 Dreamweaver 能够使用户不用编写一行代码，就能生成某些很好的图像效果， 例如鼠标经过图像、网站相册等。 1．制作鼠标经过图像 鼠标经过图像就是指当访问者的鼠标经过图像时，图像变为另一幅图像； 而鼠标离开时，图像又恢复为原始图像。它由两幅图像组成，即首次载入时显 示的图像即原始图像和鼠标经过后翻转的图像即鼠标经过图像。在创建鼠标经 过图像时应使用相同大小的两幅图像，可以使用 Fireworks 或 Photoshop 等 图像处理软件制作出要用的图像。一般鼠标经过图像通常用于按钮导航，图 3.6 所示就是一个鼠标经过图像在按钮导航中的应用效果。
Web 图像的处理流程
1．创建图形图像 2．创建 Web 对象 3．优化图像 4．导出图形
Web 图像使用要点 1．确保文件较小 2．Biblioteka 制图像的数量和质量 3．合理使用动画
在网页中使用图像
1 插入图像 在 Dreamweaver中插入图像的步骤如下。 （1）将光标置于要插入图像的位置，在“插入”栏的“常用”选项卡中 单击“图像”按钮 或选择“插入”菜单中的“图像”命令。 （2）此时将打开“选择图像源”对话框，选取存放在站点中的图像文件 ，最后单击“确认”按钮即可将图片插入到指定区域。 （3）如果所选择的图像文件不是站点中的文件，则将打开 “Macromedia Dreamweaver MX”对话框，如图所示。提示是否将图像 文件保存到根目录下，单击“是”按钮，然后打开“拷贝文件为”对话 框，定位到站点中用于存放图像文件的文件夹，最后单击“保存”按钮 即可。
锚点链接 插入的锚点
输入锚点名
DW网页设计教学—单元3 创建超级链接与导航栏
教学目标
教学方法 课时建议
任务驱动法、理论实践一体化、讲练结合 8课时（包含考核评价）
【3.1
操作准备】
在本地硬盘（例如D盘）中创建一个文件夹 “网页设计与制作案例”，将光盘中的“单元3” （包括所有子文件夹以及文件）拷贝到该文件夹中。 使用创建站点向导创建名称为“单元3”的本地 站点。 打开文件夹“3-1”中的网页文档0303.html， 在该网页的“<head>”与“</head>”之间添加以下 代码，链接外部样式文件。
保存网页0302.html，然后按快捷键F12浏览其 效果，如图3-12所示，单击各个链接，观察其链接效 果是否正确。
【3.3
技术提升】
【任务3-6】创建下拉菜单和自动展开菜单 【任务描述】 （1）创建纵向下vaScript代码，实现菜单的展开与收 缩功能。
图3-12 网页0302.html的浏览效果
【任务实施】
1．创建图片形式的内部链接 2．创建电子邮件链接 3．创建锚点链接
（1）插入一个命名锚记 （2）创建锚点链接
4．创建图像热点链接
（1）选中绘制热点区域的图像 （2）绘制矩形热点区域
5．为“设为首页”和“收藏易购”设置链接
【任务实施】
1．创建左侧帮助导航栏 2．创建文本形式的超链接
（1）使用【指向文件】按钮创建超链接 （2）使用【属性】面板定义超链接 （3）使用菜单命令和对话框定义超链接
使用类似方法创建其他15个超链接。
3．查看左侧帮助导航栏的HTML代码 4．保存网页与浏览网页效果
保存网页0303.html，然后按快捷键F12，左侧帮助 导航栏的浏览效果如图3-10所示。
DW常用快捷键大全
DW快捷键大全一、常用快捷键1.新建文档：Ctrl+N2.打开一个HTML文件：Ctrl+O3.在框架中打开：Ctrl+Shift+O4.关闭：Ctrl+W5.保存：Ctrl+S6.另存为：Ctrl+Shift+S7.检查链接：Shift +F88.退出：Ctrl+Q二、编辑菜单1.撤消：Ctrl+Z2.重复：Ctrl+Y 或Ctrl+Shift+Z3.剪切：Ctrl+X 或Shift+Del4.拷贝：Ctrl+C 或Ctrl+Ins5.粘贴：Ctrl+V 或Shift+Ins6.清除：Delete7.全选：Ctrl+A8.选择父标签：Ctrl+Shift+<9.选择子标签：Ctrl+Shift+>10.查找和替换：Ctrl+F11.查找下一个：F312.缩进代码：Ctrl+Shift+]13.左缩进代码：Ctrl+Shift+[14.平衡大括弧：Ctrl+’15.启动外部编辑器：Ctrl+E16.参数选择：Ctrl+U三、页面视图1.标准视图：Ctrl+Shift+F62.布局视图：Ctrl+F63.工具条：Ctrl+Shift+T四、查看页面元素1.可视化助理：Ctrl+Shift+I2.标尺：Ctrl+Alt+R3.显示网格：Ctrl+Alt+G4.靠齐到网格：Ctrl+Alt+Shift+G5.头内容：Ctrl+Shift+W6.页面属性：Ctrl+Shift+J五、代码编辑1.切换到设计视图：Ctrl+Tab2.打开快速标签编辑器：Ctrl+T3.选择父标签：Ctrl+Shift+<4.平衡大括弧：Ctrl+’5.全选：Ctrl+A6.拷贝：Ctrl+C7.查找和替换：Ctrl+F8.查找下一个：F39.替换：Ctrl+H10.粘贴：Ctrl+V11.剪切：Ctrl+X12.重复：Ctrl+Y13.撤消：Ctrl+Z14.切换断点：Ctrl+Alt+B15.向上选择一行：Shift+Up16.向下选择一行：Shift+Down17.选择左边字符：Shift+Left18.选择右边字符：Shift+Right19.向上翻页：Page Up20.向下翻页：Page Down21.向上选择一页：Shift+Page Up22.向下选择一页：Shift+Page Down23.选择左边单词：Ctrl+Shift+Left24.选择右边单词：Ctrl+Shift+Right25.移到行首：Home26.移到行尾：End27.移动到代码顶部：Ctrl+Home28.移动到代码尾部：Ctrl+End29.向上选择到代码顶部：Ctrl+Shift+Home30.向下选择到代码顶部：Ctrl+Shift+End六、编辑文本1.创建新段落：Enter2.插入换行：Shift+Enter3.插入不换行空格：Ctrl+Shift+Spacebar4.拷贝文本或对象到页面其他位置：Ctrl+拖动选取项目到新位置5.选取一个单词：双击6.将选定项目添加到库：Ctrl+Shift+B7.在设计视图和代码编辑器之间切换：Ctrl+Tab8.打开和关闭[属性]检查器：Ctrl+Shift+J9.检查拼写：Shift+F7七、格式化文本1.缩进：Ctrl+]2.左缩进：Ctrl+[3.格式>无：Ctrl+04.段落格式：Ctrl+Shift+P5.应用标题1到6到段落：Ctrl+1 到66.对齐>左对齐：Ctrl+Shift+Alt+L7.对齐>居中：Ctrl+Shift+Alt+C8.对齐>右对齐：Ctrl+Shift+Alt+R9.加粗选定文本：Ctrl+B10.倾斜选定文本：Ctrl+I11.编辑样式表：Ctrl+Shift+E八、查找和替换文本1.查找：Ctrl+F2.查找下一个/再查找：F33.替换：Ctrl+H九、处理表格1.选择表格(光标在表格中)：Ctrl+A2.移动到下一单元格：Tab3.移动到上一单元格：Shift+Tab4.插入行(在当前行之前)：Ctrl+M5.在表格末插入一行在最后一个单元格：Tab6.删除当前行：Ctrl+Shift+M7.插入列：Ctrl+Shift+A8.删除列：Ctrl+Shift+-9.合并单元格：Ctrl+Alt+M10.拆分单元格：Ctrl+Alt+S11.更新表格布局(在“快速表格编辑”模式中强制重绘)：Ctrl+Spacebar十、处理框架1.选择框架：Alt+点击2.选择下一框架或框架页：Alt+右方向键3.选择上一框架或框架页：Alt+左方向键4.选择父框架：Alt+上方向键5.选择子框架或框架页：Alt+下方向键6.添加新框架到框架页：Alt+从框架边界拖动7.使用推模式添加新框架到框架页：Alt+Ctrl+从框架边界拖动十一、处理层1.选择层：Ctrl+Shift+点击2.选择并移动层：Shift+Ctrl+拖动3.从选择中添加或删除层：Shift+点击层4.以象素为单位移动所选层：上方向键5.按靠齐增量移动所选层：Shift+方向键6.以象素为单位调整层大小：Ctrl+方向键7.以靠齐增量为单位调整层大小：Ctrl+Shift+方向键8.将所选层与最后所选层的顶部/底部/左边/右边对齐：Ctrl+上/下/左/右方向键9.统一所选层宽度：Ctrl+Shift+[10.统一所选层高度：Ctrl+Shift+]11.添加关键帧：Shift+F912.删除关键帧：Delete13.改变图象源文件属性：Double+点击图象14.在外部编辑器中编辑图象：Ctrl+双击图象十二、管理超链接1.创建超链接(选定文本)：Ctrl+L2.删除超链接：Ctrl+Shift+L3.在Dreamweaver打开链接文档：Ctrl+双击链接4.检查选定链接：Shift+F85.检查整个站点中的链接：Ctrl+F8十三、在浏览器中定位和预览1.在主浏览器中预览：F122.在次要浏览器中预览：Ctrl+F123.创建新文件夹：Ctrl+Shift+Alt+N4.打开选定：Ctrl+Shift+Alt+O5.从远程FTP站点下载选定文件或文件夹：Ctrl+Shift+D或将文件从[站点]窗口的[远程]栏拖动到本地栏6.将选定文件或文件夹上载到远程FTP站点：Ctrl+Shift+U或将文件从[站点]窗口的[本地]栏拖动到[远程]栏7.取出：Ctrl+Shift+Alt+D8.存回：Ctrl+Shift+Alt+U9.查看站点地图：Alt+F810.刷新远端站点：Alt+F5十四、站点地图1.查看站点文件：F82.刷新本地栏：Shift+F53.设为根：Ctrl+Shift+R4.链接到现存文件：Ctrl+Shift+K5.改变链接：Ctrl+L6.删除链接：Delete7.显示/隐藏链接：Ctrl+Shift+Y8.重命名文件：F29.放大站点地图：Ctrl+ +10.缩小站点地图：Ctrl+ -十五、播放插件1.播放插件：Ctrl+Alt+P2.停止插件：Ctrl+Alt+X3.播放所有插件：Ctrl+Shift+Alt+P4.十六、处理模板创建新的可编辑区域：Ctrl+Alt+V十七、插入对象1.任何对象(图象，Shockwave影片等)：文件从[资源管理器]或[站点]窗口拖动到[文档]窗口2.图象：Ctrl+Alt+I3.表格：Ctrl+Alt+T4.Flash影片：Ctrl+Alt+F5.Shockwave和Director影片：Ctrl+Alt+D6.命名锚记：Ctrl+Alt+A十八、历史纪录面板1.打开[历史纪录]面板：Shift+F102.开始/停止录制命令：Ctrl+Shift+X3.播放录制好的命令：Ctrl+P十九、打开和关闭面板1.对象：Ctrl+F22.属性：Ctrl+F33.站点文件：F54.站点地图：Ctrl+F55.资源：F116.CSS样式：Shift+F117.HTML样式：Ctrl+F118.行为：Shift+F39.历史纪录：Shift+F1010.时间轴：Shift+F911.代码检查器：F1012.框架：Shift+F213.层：F214.参考：Ctrl+Shift+F115.最小化所有窗口：Shift+F416.最大化所有窗口：Alt+Shift+F417.停止所有插件：Ctrl+Shift+Alt+X18.显示/隐藏浮动面板：F4二十、站点管理和FTP1.创建新文件：Ctrl+Shift+N2.在主浏览器中调试：Alt+F123.在次要浏览器中调试：Ctrl+Alt+F124.显示页面标题：Ctrl+Shift+T5.创建层时切换嵌套设置：Ctrl+拖动6.切换网格显示：Ctrl+Shift+Alt+G7.靠齐到网格：Ctrl+Alt+G。
Dreamweaver中如何应用超级链接
本节课通过实例分析了超级链接的：
要求学生掌握：
– Dreamweaver中超级链接的应用
– 常用超级链接的基本语法格式
模仿课堂中讲解的示例在个人网页添加超级
链接，观察各代码所表示的意义。
要求：
（1）创建页面的锚点链接；
（2）包含一个具有下载效果的超级链接；
（3）包含一个电子邮件的超级链接 （4）创建图片的热点链接
即被指向的目的地
按照链接目标的路径分类：
还可以按照链接目标的对象不同进行分类
常用超级链接的语法格式：
– <a href=“URL”></a>普通连接 – <a href=“mailto:EMAIL”></a>Email链接 – <a name=“NAME”></a> 定义锚点 – <a href=“#NAME”></a>锚点链接
Dreamweaver中如何应用超级链接
超级链接的标记语法格式。
Байду номын сангаас
难点
超级链接的标记语法格式
1. 分析平常上网中的超
级链接现象。
2. 分析按例网站的超级
3. 提出问题：
这种效果是如何制作的哪？
链接现象。
在这种效果下隐含了哪些知识点呢？
丰富页面内容
为页面添加超级链接
超级链接的组成
即指向目标的链接
dw创建链接的方法
dw创建链接的方法
DW是一款常用的网页编辑软件，它可以轻松地创建链接。
以下是使用DW创建链接的步骤：
1. 打开DW软件并打开您想要编辑的网页。
2. 选择要创建链接的文本或图片。
您也可以将光标放在您想要创建链接的位置上。
3. 单击“插入”菜单并选择“超链接”。
4. 在“超链接”对话框中，选择您想要链接到的页面。
您可以选择链接到一个页面、一个文件、一个电子邮件地址或一个网站。
5. 输入您想要显示在链接中的文本。
6. 单击“OK”按钮。
7. 保存您的更改并预览您的网页。
如此简单，您就可以在DW中创建链接了！
- 1 -。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
建立超链接的标签为<A>和</A>
格式为：<A HREF="资源地址" TARGET="窗口名称" TITLE="指向连接显示的文字">超链接名称</A>
说明：标签<A>表示一个链接的开始，</A>表示链接的结束；
属性“HREF”定义了这个链接所指的目标地址；目标地址是最重要的，一旦路径上出现差错，该资源就无法访问
4-2超链接的应用
4-2-1书签链接
链接文档中的特定位置也叫书签链接，在浏览页面时如果页面很长，要不断的拖动滚动条给浏览带来不便，要是浏览者可以从上头阅读到尾，又可以选择自己感兴趣的部分阅读，这种效果就可以通过书签链接来实现，方法是选者一个目标定位点，用来创建一个定位标记，用<a>标签的属性name的值来确定定位标记名<a name="定位标记名">。然后在网页的任何地方建立对这个目标标记的链接"标题"，在标题上建立的链接地址的名字要和定位标记名相同，前面还要加上"#"号，<a href= "#定位标记名">。单击标题就跳到要访问的内容。
</PRE>
<p><a href="4-2-12.html#libai">李白蔑视权贵</a></p>
</BODY>
</HTML>
<html>
<head>
<title>李白</title>
</head>
<body>
<center>
<a href="4-2-11.html#lb"><h1 align="center"><font color="#339933">李白</font></h1></a>
<PRE>
妾髮初覆額，<br>折花門前劇。<br>郎騎竹馬來，<br>遶床弄青梅。<br>同居長干里，<br>兩小無嫌猜。<br>十四為君婦，<br>羞顏未嘗開。<br>低頭向暗壁，<br>千喚不一回。<br>十五始展眉，<br>願同塵與灰。<br>常存抱柱信，<br>豈上望夫臺。<br>十六君遠行，<br>瞿塘灩澦堆。<br>五月不可觸，<br>猿鳴天上哀。<br>門前遲行跡，<br>一一生綠苔。<br>苔深不能掃，<br>落葉秋風早。<br>八月蝴蝶來，<br>雙飛西園草。<br>感此傷妾心，<br>坐愁紅顏老。<br>早晚下三巴，<br>預將書報家。<br>相迎不道遠，<br>直至長風沙。
所谓内部链接，指的是在同一个网站内部，不同的html页面之间的链接关系，在建立网站内部链接的时候，要明确哪个是主链接文件（即当前页），哪个是被链接文件。在前面介绍链接路径时，已经给大家介绍了内部链接概念，内部链接一般采用相对路径链接比较好。下面我们根据如图示，来看看相对路径的具体的链接方法:
在站点内部建立链接
2-1.html
sy.html
<a href="../sy.html">超链接元素</a>
1-1.html
sy.html
<a href="../../sy.html">超链接元素</a>
"超链接名称"是要单击到链接的元素，元素可以包含文本，也可以包含图像。文本带下划线且与其它文字颜色不同，图形链接通常带有边框显示。用图形做链接时只要把显示图像的标志<img>嵌套在<A HREF="URL"></A>之间就能实现图像链接的效果。当鼠标指向"超链接名称"处时会变成手状，单击这个元素可以访问指定的目标文件。
其格式为：通讯协议：//服务器地址：通讯端口/文件位置....../文件名。
lnternet遵循一个重要的协议及HTTP(Hypertext Transfer Protocol)超文本传输协议，http是用于传输Web页的客户端/服务器协议。当浏览器发出Web页请求时,此协议将建立一个与服务器的链接.当链接畅通后,服务器将找到请求页,并将它发送给客户端,信息发送到客户端后,http将释放此链接.这使得此协议可以接受并服务大量的客户端请求.
建立超链接
HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画，通过它们我们可享受丰富多采的多媒体世界。
<a name="lb"><H2>李白</H2></a>
<A href="#T.2" target="_blank">清平調三首</A><br>;/A><br>
<A href="#T.3">月下獨酌</A>
<HR>
<BR><BR>
<H3><A NAME="T.2">清平調三首</A> </H3>
<p>李白性情豪放，<br>喜爱纵横家的作风，<br>爱好任侠之事，轻视财货。<br>早年在蜀中度过。他的父亲是个富商。<br>李白二十五岁开始漫游全国，<br>走过湖北，江西，河南，山东等地.<br></p>
<p><A NAME="libai">李白蔑视权贵</A>，<br>传说他喝醉酒，<br>曾在玄宗面前使高力士给他脱靴。<br>高力士认为这是很大的耻辱，<br>就摘取李白诗句激怒杨贵妃。<br>玄宗每次让李白做官，杨贵妃就加以阻止。<br>李白知道玄宗的亲信对他有意见，<br>于是恳求还家。<br>玄宗赐给他财物，放他开.<br></p>
根路径目录地址的书写也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。
如果根目录要写盘符，就在盘符后使用"│",而不用":"这点与DOS的写法不同。
如：/web/highight/shouey.html
d│/web/highight/shouey.html
也许读者会问，链接本地机器上的文件时，应该使用相对路径还是根路径？在绝大多数情况下使用相对路径比较好，例如，用绝对路径定义了链接，当把文件夹改名或者移动之后，那么所有的链接都要失败，这样就必须对你的所有html文件的链接进行重新编排，而一旦将此文夹件移到网络服务器上时，需要重新改动的地方就更多了，那是一件很麻烦的事情。而使用相对路径，不仅在本地机器环境下适合，就是上传到网络或其他系统下也不需要进行多少更改就能准确链接。
TARGET:该属性用于指定打开链接的目标窗口，其默认方式是原窗口。
建立目标窗口的属性
属性值
描述
_parent
在上一级窗口中打开，一般使用分桢的框架页会经常使用
_blank
在新窗口打开
_self
在同一个桢或窗口中打开，这项一般不用设置
_top
在浏览器的整个窗口中打开，忽略任何框架
TITLE：该属性用于指定指向链接时所显示的标题文字。
雲想衣裳花想容，<br>春風拂檻露華濃。<br>若非群玉山頭見，<br>會向瑤台月下逢。<br>一枝紅艷露凝香，<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似？<br>可憐飛燕倚新妝。<br>名花傾國兩相歡，<br>常得君王帶笑看。<br>解釋春風無限恨，<br>沈香亭北倚闌干。
<H3><A NAME="T.1">長干行</A> </H3>
当前页面
被链接页面
超链接代码
2-1.html
3-1.html
<a href="3-1.html">超链接元素</a>
3-1.html