Dreamweaver网页设计之建立超链接
dreamweaver添加超链接的方法
dreamweaver添加超链接的方法dreamweaver添加超链接的方法Dreamweaver CS6怎么制作超级链接?超链接是每个网站不看缺少的。
很多新手在使用Dreamweaver的时候不知道怎么添加超级链接?大家知道dreamweaver怎么添加超链接吗?下面我们就给大家详细介绍一下吧!1、需要添加超链接的文字，选择“插入”菜单中的“超级链接”选项。
2、“超级链接”对话框中，点击链接后的“文件夹”图标。
3、择想要链接的'网页文件后点击“确定”按钮。
4、点击“确定”按钮后就可以成功添加超链接了。
拓展：Adobe Dreamweaver常用快捷键大全1 文件菜单新建文档 Ctrl+N打开一个HTML文件 Ctrl+O 或者将文件从[文件管理器]或[站点]窗口拖动到[文档]窗口中在框架中打开 Ctrl+Shift+O关闭 Ctrl+W保存 Ctrl+S另存为 Ctrl+Shift+S检查链接 Shift + F8退出 Ctrl+Q2 编辑菜单撤消 Ctrl+Z重复 Ctrl+Y 或 Ctrl+Shift+Z剪切 Ctrl+X 或Shift+Del拷贝 Ctrl+C 或Ctrl+Ins粘贴 Ctrl+V 或Shift+Ins清除 Delete全选 Ctrl+A选择父标签 Ctrl+Shift+<选择子标签 Ctrl+Shift+>查找和替换 Ctrl+F查找下一个 F3缩进代码 Ctrl+Shift+]左缩进代码 Ctrl+Shift+[平衡大括弧Ctrl+’启动外部编辑器 Ctrl+E参数选择 Ctrl+U3 页面视图标准视图 Ctrl+Shift+F6布局视图 Ctrl+F6工具条 Ctrl+Shift+T4 查看页面元素可视化助理 Ctrl+Shift+I标尺 Ctrl+Alt+R显示网格 Ctrl+Alt+G靠齐到网格 Ctrl+Alt+Shift+G 头内容 Ctrl+Shift+W页面属性 Ctrl+J5 代码编辑切换到下一个设计页面 Ctrl+Tab 打开快速标签编辑器 Ctrl+T选择父标签 Ctrl+Shift+<平衡大括弧Ctrl+’全选 Ctrl+A拷贝 Ctrl+C查找和替换 Ctrl+F查找下一个 F3替换 Ctrl+H粘贴 Ctrl+V剪切 Ctrl+X重复 Ctrl+Y撤消 Ctrl+Z切换断点 Ctrl+Alt+B向上选择一行 Shift+Up向下选择一行 Shift+Down选择左边字符 Shift+Left选择右边字符 Shift+Right向上翻页 Page Up向下翻页 Page Down向上选择一页 Shift+Page Up向下选择一页 Shift+Page Down选择左边单词 Ctrl+Shift+Left选择右边单词 Ctrl+Shift+Right移到行首 Home移到行尾 End移动到代码顶部 Ctrl+Home移动到代码尾部 Ctrl+End向上选择到代码顶部 Ctrl+Shift+Home向下选择到代码顶部 Ctrl+Shift+End6 编辑文本创建新段落 Enter插入换行 Shift+Enter插入不换行空格 Ctrl+Shift+Spacebar拷贝文本或对像到页面其他位置 Ctrl+拖动选取项目到新位置将选定项目添加到库 Ctrl+Shift+B在设计视图和代码编辑器之间切换 Ctrl+Tab打开和关闭[属性]检查器 Ctrl+Shift+J检查拼写 Shift+F77 格式化文本缩进 Ctrl+]左缩进 Ctrl+[格式>无 Ctrl+0 (零)段落格式 Ctrl+Shift+P应用标题1到6到段落 Ctrl+1 到 6对齐>左对齐 Ctrl+Shift+Alt+L对齐>居中 Ctrl+Shift+Alt+C对齐>右对齐 Ctrl+Shift+Alt+R加粗选定文本 Ctrl+B倾斜选定文本 Ctrl+I编辑样式表 Ctrl+Shift+E8 查找和替换文本查找 Ctrl+F查找下一个/再查找 F3替换 Ctrl+H9 处理表格选择表格(光标在表格中) Ctrl+A移动到下一单元格 T ab移动到上一单元格 Shift+Tab插入行(在当前行之前) Ctrl+M在表格末插入一行在最后一个单元格 T ab删除当前行 Ctrl+Shift+M插入列 Ctrl+Shift+A删除列 Ctrl+Shift+ - (连字符)合并单元格 Ctrl+Alt+M拆分单元格 Ctrl+Alt+S更新表格布局(在“快速表格编辑”模式中强制重绘) Ctrl+Spacebar10 处理框架选择框架框架中Alt+点击选择下一框架或框架页 Alt+右方向键选择上一框架或框架页 Alt+左方向键选择父框架 Alt+上方向键选择子框(网页设计培训)架或框架页 Alt+下方向键添加新框架到框架页 Alt+从框架边界拖动使用推模式添加新框架到框架页 Alt+Ctrl+从框架边界拖动11 处理层选择层 Ctrl+Shift+点击选择并移动层 Shift+Ctrl+拖动从选择中添加或删除层 Shift+点击层以像素为单位移动所选层上方向键按靠齐增量移动所选层 Shift+方向键以像素为单位调整层大小 Ctrl+方向键以靠齐增量为单位调整层大小 Ctrl+Shift+方向键将所选层与最后所选层的顶部/底部/左边/右边对齐Ctrl+上/下/左/右方向键统一所选层宽度 Ctrl+Shift+[统一所(网页设计培训)选层高度 Ctrl+Shift+]创建层时切换嵌套设置 Ctrl+拖动切换网格显示 Ctrl+Shift+Alt+G靠齐到网格 Ctrl+Alt+G12 处理时间轴,图像添加对像到时间轴 Ctrl+Alt+Shift+T添加关键帧 Shift+F9删除关键帧 Delete改变图像源文件属性 Double+点击图像在外部编辑器中编辑图像 Ctrl+双击图像13 管理超链接创建超链接(选定文本) Ctrl+L删除超链接 Ctrl+Shift+L拖动并投放以从文档创建超链接(网页设计培训)选取文本，图像或对像，然后Shift+拖动选择到[站点]窗口中的文件拖动并投放以使用[属性]检查器创建超链接选取文本，图像或对像，然后拖动[属性]检查器的指向文件图表到[站点]窗口的文件在Dreamweaver打开链接文档 Ctrl+双击链接检查选定链接 Shift+F8检查整个站点中的链接 Ctrl+F814 在浏览器中定位和预览在主浏览器中预览 F12在次要浏览器中预览 Ctrl+F1215 在浏览器中调试在主浏览器中调试 Alt+F12在次要浏览器中调试 Ctrl+Alt+F1216 站点管理和FTP创建新文件 Ctrl+Shift+N创建新文件夹 Ctrl+Shift+Alt+N打开选定 Ctrl+Shift+Alt+O从远程FTP站点下载选定文件或文件夹 Ctrl+Shift+D或将文件从[站点]窗口的[远程]栏拖动到[本地]栏将选定文件或文件夹上载到远程FTP站点 Ctrl+Shift+U或将文件从[站点]窗口的[本地]栏拖动到[远程]栏取出 Ctrl+Shift+Alt+D存回 Ctrl+Shift+Alt+U查看站点地图 Alt+F8刷新远端站点 Alt+F517 站点地图查看站点文件 F8刷新本地栏 Shift+F5设为根 Ctrl+Shift+R链接到现存文件 Ctrl+Shift+K改变链接 Ctrl+L删除链接 Delete显示/隐藏链接 Ctrl+Shift+Y显示页面标题 Ctrl+Shift+T重命名文件 F2放大站点地图 Ctrl+ + (plus)缩小站点地图 Ctrl+ - (hyphen)18 播放插件播放插件 Ctrl+Alt+P停止插件 Ctrl+Alt+X播放所有插件 Ctrl+Shift+Alt+P停止所有插件 Ctrl+Shift+Alt+X19 处理模板创建新的可编辑区域 Ctrl+Alt+V20 插入对像任何对像(图像，Shockwave影片等) 文件从[资源管理器]或[站点]窗口拖动到[文档]窗口图像 Ctrl+Alt+I表格 Ctrl+Alt+TFlash影片 Ctrl+Alt+FShockwave和Director影片 Ctrl+Alt+D命名锚记 Ctrl+Alt+A21 历史纪录面板打开[历史纪录]面板 Shift F10开始/停止录制命令 Ctrl+Shift+X播放录制好的命令 Ctrl+P22 打开和关闭面板对像 Ctrl+F2属性 Ctrl+F3站点文件 F5站点地图 Ctrl+F5资源 F11CSS样式 Shift+F11HTML样式 Ctrl+F11行为 Shift+F3历史纪录 Shift+F10时间轴 Shift+F9代码检查器 F10框架 Shift+F2层 F2参考Ctrl+Shift+F1显示/隐藏浮动面板 F4最小化所有窗口 Shift+F4最大化所有窗口 Alt+Shift+F4 23 获得帮助使用Dreamweaver[帮助主题] F1 参考Shift+F1 Dreamweaver支持中心 Ctrl+F1 下载全文。
中文版 Dreamweaver CS6网页设计教程 第3章
22
3.6 认识超链接
在创建超链接之前，首先得清楚文档的链接路径。概 括起来，文档的链接路径主要有绝对路径、相对路径、 根目录相对路径等三种形式。
绝对路径：一般指服务器上的文件，是完整的文件路径，包含 其应用协议，例如/daquan/intro.htm。 相对路径：本地站点内常用的文件路径，如果文件都在同一个 目录中，使用相对路径则极为有效。如果要链接同一文件夹中 的文档，则只需要输入文件名，例如cursor.htm；如果要链接 同一目录下其他子文件夹中的文档，则需要输入文件夹名称和 斜杠(/)，然后输入文件名，例如document/cursor.htm；如果要 链接上一层文件夹中的文档，则需要在文件名称前面添加../， 例如../cursor.htm。 根目录相对路径：使用多个服务器的大型站点会用到这种文档 路径，而对于一般的Web站点没有必要在页面中插入文本内容，一般可以通过以下两 种方式来进行：一种是在网页编辑窗口中直接 用键盘输入文本，这是文字输入最基本的方式。 另一种是复制文本的方式，如果需要插入其他 文档中或是网站页面中的文本，可以直接使用 “复制”功能，将大段的文本内容复制到网页 的编辑窗口来进行排版的工作，如图3-1所示。
30
3.8.1 添加链接
如果要添加超链接，则可使用下面的操作步骤。 (1) 在站点管理窗口中单击选定文件，在其左上角出现 图标。 (2) 执行下列操作之一可添加链接。
23
3.7 创建超链接
网页中的链接形态多种多样，根据 链接对象的不同，可将其分为文本 链接、图像链接、邮件链接、锚点 链接。此外，还有图像映射、空链 接、脚本链接等几种链接形式。本 节中对这些链接的创建方法进行介 绍。
24
3.7.1 创建文本链接
Dreamweaver8网页超链接教学设计
ｐａｔｒ ｎｄ ｐｐｉａｉｎ ｓ ｆｗａ ｅ ａ ｈ ａｒｅ．Ｗ ｉｈ ｔ ｅ ” ｂ ｌｎ ｓ ａ ｘ ｍｐ ｅ ｏ ｔ ｓｇ ｔｅ ｃ ｕ ｓ ａ ｅ ｏ ｓｕ ｎ ｓ ｔ ｎ ａ ａ ｌ ｔ ｏ ｔ ｒ ｓ ｔｅ ｃ ｒｉｒ ｅ ｃ ｏ ｔ ｈ ｗｅ ｉ ｋ ” ｓ ｅ ａ ｌ ．ｈ ｗ ｏ ｄｅｉｎ ｈ ｏ ｒｅ ｂ ｓ ｄ ｎ ｔｄｅ ｔ
３ 教 学策 略
本 课 内 容 的 学 习是 一 种 自我 需 求 下 的 获 取 ，所 以 关 键 在 于 学 习 方 法 、学 习 习 惯 的 培 养 。平 时 授 课 巾就
要 注 重 倡 导 学 生 自主 学 习 ，碰 到 困 难 要 想 办 法 ，通 过
Ｔｅ ｃ ｉ ｓｇ ｏ ｈｅ Ｄ ｒ ａ ｗｅ ｖ ｒ Ｗ ｅ ｎ ａ ｈ ｎｇ Ｄｅ ｉ ｎ ｆ ｔ ｅ ｍ ａｅ ８ ｂ Ｌｉ ｋｓ
ＧＵＡＮ Ｌｌ ｉ ｉ
（ ｉ ｎｊ ｎ ｉ ｌＨ ｓａ ｄｙ ＆ Ｖｅｅ ｎ ｒ ｏ ａｉｎ ｌＣ ｌ ｇ，Ｈｅｌｎ ｊ ｎ １０ １ Ｈｅｌ ｇｉ ｇ Ａｎｍａ ｕ ｂ ｎ ｒ ｏ ａ ｔｒ ａ Ｖ ｃｔ ａ ｏｌ ｅ ｉ ｙ ｏ ｅ ｉ ｇｉ ｇ ５ １ ） ｏ ａ １
完 成 对 知 识 点 的学 习 与 掌 握 ．增 强 主动 学 习 、探 究 的
意识 。
信 息 链 接 实 现 的 方 法 ， 让 基 础 一 般 的 学 生 能 对
Ｄ ｅ ｍｗ ａ ｅ８ 中创 建 超 链 接 的 几 种 方 法 有 个 全 面 了 ｒａ ｅ ｖ ｒ
解 ，能掌 握 其 巾的 部 分 内容 ，学 会 学 习 方 法 ，为 以 后
２１ ０ １年 第 ２期
Ｄｒａ ｍｗｅ ｖ ｒ ｅ ａ ｅ８网 页 超 链 接 教 学 设 计
Dreamweaver中超链接的应用教案
公开课教案课程名称《网页制作》教程课题名称：Dreamweaver中超链接的应用授课班级：任课教师：授课时间：时间分配教学内容及过程教学方法及教学内容的拾漏补遗17’第三环节：教师演示、讲解操作步骤 Dreamweaver中超链接的应用一、超链接的含义超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点。
二、超链接的分类1、按照源端点的不同，可以将超链接分为文本链接、图像链接和表单链接3种。
文本链接：是指以文字作为超链接源端点的链接。
图像链接：是指以图像作为源端点的超链接。
表单链接：需要与表单结合使用，当用户单击表单中的按钮时，会自动跳转至相应页面。
2、根据目标端点的不同，超链接可分为内部链接、外部链接、锚点链接和电子邮件链接4种。
内部链接：其目标端点是本站点中的其他网页或文件。
外部链接：指链接的目标端点与源端点不在同一个站点中。
锚点链接：如果网页太长，可用锚点链接实现跳转到当前网页或其他网页中的某一指定位置。
电子邮件链接：单击电子邮件链接，将打开系统默认的电子邮件收发程序。
三、设置链接属性在没有选中任何对象的前提下，单击“属性”面板上的“页面属性”按钮，打开“页面属性”对话框，首先在左侧列表中选择“链接”选项，然后在右侧设置各项链接属性。
演示提问讨论讲授、演示、讨论时间分配教学内容及过程教学方法及教学内容的拾漏补遗30’四、设置常规超链接常规超链接包括内部超链接和外部超链接，内部超链接是指目标文件位于站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。
1．内部超链接内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以在“属性”面板上的“链接”编辑框中直接输入要链接对象的相对路径；也可以通过单击“属性”面板上“链接”编辑框右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择链接对象。
2．外部超链接外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板上的“链接”编辑框中直接输入要链接网页的网址。
DW课程第04讲添加超链接和多媒体元素
典型案例——制作“江南旅游” 网首页
第四行按钮参数 输入版权，调整 文本样式
DW课程第04讲添加超链接和多媒体 元素
插入Shockwave影片
Shockwave影片具有文件小、下载速度快，被目前主 流的浏览器所支持等优点，是使用Director制作的多 媒体影片文件。 插入记录->媒体->Shockwave
在第二行插入插件（影片），宽800，高500
设置第三行高50，水平垂直方向都为居中对齐输入 “申明：本网站所有资源均来自互联网，资源所有权 归原发行商所有，供广大爱好者学习交流之用，不做 任何商业用途， 请用户下载后于24小时内自觉删除， 谢谢！”，文本颜色为“#999999”
DW课程第04讲添加超链接和多媒体 元素
超链接的种类
锚链接语法
<HTML>
<HEAD>
<TITLE>链接到其他2页、面链<接/T到ITL锚E标> 记所在位置
</HEAD>
<BODY>
<A href="#helpme">[新人上路]</A>
……
<A name="helpme">新人上路指南</A>
……
</BODY> </HTML>
1、定义锚标记
插入插件
插件包括的范围很广，如：视频文件、音乐文件、动 画文件等。 插入记录->媒体->插件 如果计算机中安装了文件格式的插件，就可以在网页 中播放该视频文件
DW课程第04讲添加超链接和多媒体 元素
创建超链接实验报告
一、实验目的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. 超链接的基本概念和作用。
《Dreamweaver 网页设计与制作》实训教学计划2011.7
安装过Dreamweaver软件的计算机
2
4
图像的处理
图像的处理，设定和应用背景图案、图形、图象及其超链接等
了解图像的处理，包括背景图案、图形、图象及其超链接等的设定和应用
安装过Dreamweaver软件的计算机
2
5
列表项目
列表项目，使用各种列表美化网页
掌握列表的各种使用
安装过Dreamweaver软件的计算机
2.表单的设计（二），与表格相结合制作完美的表单页面
掌握表单在网页中的应用
安装过Dreamweaver软件的计算机
8
学年
学期
序号
课题名称
课题内容
目的与要求
设备、工具和材料
学时
总学时
第
三
学
年
第
一
学
期
8
网页的动态效果
网页的动态效果，在网页中加入各种动态效果，如滚动的文字，多媒体加入网页，Flash动画
掌握如何在网页中加入各种动态效果
2.创建站点，在Dreamweaver软件中创建站点，通过修改元素属性设置美化网页。
掌握Dreamweaver软件的基本结构，并基本学会使用Dreamweaver软件
安装过Dreamweaver软件的计算机
8
学年
学期
序号
课题名称
课题内容
目的与要求
设备、工具和材料
学时
总学时
第
三
学
年
第
一
学
期
13
制作个人网站
2.CSS的属性（二），综合应用CSS的各种属性
掌握CSS的各种属性应用
安装过Dreamweaver软件的计算机
dreamweaver cs5 第三章 超链接
三、小结及作业
1、设置外部链接时，链接对象应该按( ) 格式书写。 2、当链接的对象为锚点时，应该在锚点的 名称前面加( )符号 3、当链接的对象为( )类型文件、 ( ) 类型文件和( )类型文件时，可以实现 文件的下载 4、网站首页导航栏上的“首页”按钮，一 般情况下要将其作为( )链接，其设置 方法为( )
二、超链接的类型
7、图像热像 在图像属性面板中，使用热区工具（矩形、椭圆、 多边形），在图像上划分热区。 为绘制的每一个热区设置不同的链接地址和替代 文字。
二、超链接的类型
8、鼠标经过图像链接—导航栏 方法：插入=>图像对象=>鼠标经过图像 9、跳转菜单链接 方法：表单=>跳转菜单=>添加链接地址
超链接的应用
一、了解超链接
1）什么是超链接 超链接是网页的最基本元素，网站里的所 有内容分均通过超链接联系到网页中。
二、超链接的类型
1、内部链接――到网站内页面的超链接 方法：手动录入及鼠标指向 2、外部――链接到网站外页面的超链接 方法： 3、 锚点链接――到网页某一特定位置的超链接 方法：步骤1 建立锚点，并命名 步骤2 选中所要链接的文字或热点，在属性 面板的链接栏中直接输入 “# 锚点名”
二、超链接的类型
10、脚本链接 1. 添加到收藏夹： javascript:window.external.addFavorite('http://www. ','我的足球网') 2. 表示关闭窗口：javascript:window.close() 3. 表示弹出一个提示对话框：javascript:alert(‘你的 电脑已经中毒’) 4. 设置为默认主页：（需通过空链接#触发onClick 事件） onClick="this.style.behavior='url(#default#homepage )';this.setHomePage('/')
《用Dreamweaver制作网页六》实现网页间跳转(超链接)学案
《用Dreamweaver制作网页五》学案——实现网页间跳转（超链接）1课时学习目标：1、各小组完善首页和栏目网页。
2、实现网页间跳转（超链接的使用）资源平台：1、Dreamweaver 8.02、上节课收集的图片和文本素材、老师准备的网页素材、网上素材3、老师课前准备的信息技术学科资源网观看老师演示：1、如何实现网页间跳转（超链接的使用）前面我们已经做好了网站首页、栏目网页，并将它们都保存在了小组站点文件夹中，然而一个网站不仅仅只有一张网页，而是有很多张网页组成，并且各网页之间就是通过超级链接连在一起，那么Dreamweaver中如何来建立网页的超链接呢？超链接的标志：在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。
操作方法如下：1、在网页中选中要做超级链接的文字或者图片。
2、在属性面板中单击“链接”栏后的黄色文件夹按钮，在弹出的对话框里选中相应的网页文件就完成了。
做好超级链接属性面板出现链接文件显示。
（如下图）3、保存文件，按F12预览网页。
在浏览器里光标移到超级链接的地方就会变成手型。
〖提示〗你也可以手工在链接输入框中输入地址。
给图片加上超级链接的方法和文字完全相同。
扩展：如果超级链接指向的不是一个网页文件。
而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。
超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。
例如，在链接框里写上/那么，单击链接就可以跳转到网站制作教程网站。
【邮件地址的超级连接】在网页制作中，还经常看到这样的一些超级链接。
单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。
这也是一种超级链接。
制作方法是：在编辑状态下，先选定要链接的图片或文字（比如：欢迎您来信赐教！），在插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。
提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。
在网页中使用超链接
2．链接锚点
创建锚点后，还必须链接锚点。选择想要链接到锚点的文字或 图片，然后按如下方法中的任意一种进行操作。 ·在属性面板上的“Link”文本框中输入符号 # 和锚点名称。 · 选择文字或图片后，按住Shift键，然后拖动鼠标指向锚点。在属 性面板上的“Link”文本框中将自动出现符号#和该锚点的名称。 · 按住属性面板上的“Point to File（指向文件）”按钮，并拖动鼠 标指向锚点，属性面板上的“Link”文本框中自动出现符号 # 和该 锚点的名称。
7.2 创建超链接的其他方法
7.2.1利用HTML创建超链接
1．页面链接
用HTML创建超链接需要使用A标记符（结束标记符<／A>不 能省略），它的最基本属性是href，用于指定超链接的目标。通 过为href指定不同的值，可以创建出不同类型的超链接。另外， 在<A>和<／A>之间可以用任何可单击的对象作为超链接的源， 例如文字或图像。 例如： <A href="../外国的教师节.htm" target="_parent">外国的教师 节</A> <A href="老师，您辛苦了！！.htm" target="_blank"><IMG border=0 height=113 src="园丁乐园.files/31.jpg"width=146></A>
（2）编辑文本超链接
①设置文本链接的状态 一个未被访问过的链接与一个被激活的链接在形式上肯定会有 所区别，链接被访问过了也会发生变化，提示用户这是一个已经点 击过的链接，所有这些都是链接的状态。通过设置不同的文本颜色 可以使各个状态区别开来。 设置不同的文本颜色的具体步骤如下： · 打开包含文本链接的文档“园丁乐园”，选择主菜单中的“Modify （修改）”|“Page Properties（页面属性）”命令，打开“Page Properties（页面属性）”对话框； · 单击“Links（链接）”项右边的图标，打开调色板，选取一种颜 色； · 同样为“Visited Links（访问过的链接）”、“Active（活动链 接）”项设置不同的颜色； · 单击“Ok”按钮，完成设置。 设置完成之后，按下“F12”键，预览网页，链接的三种状态通 过不同的颜色区别开来。
网页设计实用教程 第4章 超链接.
(6) 一个图像热区链接创建完成，单击【保存】按钮，按 F12按钮预览网页。
4.2.5
创建锚链接
超链接除了可以链接到文件外，还可以链接到本页中的 任意位置，这种链接方式称为“锚链接”。当一个网页的主 题或文字较多时，为了方便用户浏览，可以在网页内的某些 分项内容上建立多个标记点，将超链接指定到这些标记点上， 使用户能快速找到要阅读的内容。我们将这些标记点称为锚 点（Anchor）
图4-3 电子邮件链接对话框
4.2.3
创建E-mail链接
(3) 对话框中“文本”指在网页上显示的文本， “ E-mail”指需要链接到的邮箱地址，这里输入 “wysj@” ，单击【确定】按钮完成Email链接的设置。 也可以在属性面板的“链接”文本框中输入 “mailto:”和邮箱地址，这里是“mailto: wysj@”。 (4) 一个E-mail链接创建完成，单击【保存】按钮， 按 F12按钮预览网页。
4.2典例剖析—信息导航列表
本节将通过建立一个信息导航网页的实例来讲解超链接的使 用。本节操作任务： （1）在“Mystuhome”下建立文件夹“超链接”，在 “超链 接”文件夹下建立网页“index.html”和文件夹“image” （2）在网页中创建链接。 （3）在网页中创建E-mail链接。 （4）在网页中制作图像映射，设置图像热点的超链接。
4.4
习 题
三、上机实践 1. 在超链接文件夹下创建“名站收藏..html”网页文档，在网页 中列举自己经常访问的网站名称，为他们建立到网站网址的 超链接。 2. 在超链接文件夹下创建“相册..html”网页文档，在网页中插 入图片，在图片上建立热区图像链接。 3. 为网页“相册.html”建立到底端和到顶端的锚链接。
DW超级链接
2020/11/14
*
6.2超级链接的路径
• 相同文件夹只提供“文件 名”；
• 与位于当前文档所在文件夹的 子文件夹中的文件链接时要提 供“子文件夹名/文件名”；
• 与位于当前文档所在文件夹的 父文件夹中文件链接时要提供 “../文件名”。
2020/11/14
*
6.2超级链接的路径
3.站点根目录相对路径 站点根目录相对路径是指从站点跟文件夹到被链 接文档经由的路径；以一个正斜杠开始，该正斜 杠表示站点根文件夹。
*ห้องสมุดไป่ตู้
6.5几种特殊的超级链接的创建
（2）链接锚记 在同一文档中创建时，选择想要链接到锚记的文字 或图片，然后按如下方法中的任意一种进行操作。
（1）在属性面板上的“链接”文本框中输入符号# 和锚记名称。 （2）按住属性面板上的“指向文件”按钮，并拖动 鼠标指向锚记。 （3）选择文字或图片后，按住Shift键，然后拖动 鼠标指向锚记。
（1）将光标置于网页中要添加E-mail链接的地方，或 选中文字，通过插入“常用”面板上的“电子邮件 链接”按钮，或通过主窗口菜单“插入”|“电子邮 件链接”命令，将弹出 “电子邮件链接”对话框。 完成该对话框的设置即可。
2020/11/14
*
6.5几种特殊的超级链接的创建
（2）在属性面板的链接文本框中直接输入“mailto： E-mail地址”可。
【注】：创建空链接时，这里的冒号与分号不能省略。 为文本建立空链接的目的就是为了应用行为。当链 接载体不是文本时，不需添加空链接就可以应用行 为。
2020/11/14
*
6.创建脚本链接
（1）创建弹出对话框的脚本链接，具体操作：
在“文档”窗口的“设计”视图中选择文本、图 像或对象。
在网页中插入各种超级链接
在网页中插入各种超级链接第四章在网页中建立各种超链接上一讲回顾：（5分钟）回顾上一讲内容，展示、交流、评价上次课布置的课题“制作一个简单的网页”，让大家评比一下谁做的最好，并掌声鼓励。
通过点评作品让学生增强荣誉感。
课程导入：（5分钟）进入本校网站，告诉学生什么是超链接，让同学们在浏览本校网站的同时，提出问题。
提问：让学生把在本校网站上见过的超链接指出来，让老师分析这是什么超链接。
活跃学习气氛，让同学们对新课内容产生兴趣。
介绍本节课素材及设计目标：（5分钟）说明素材所在路径，并确立设计目标。
4.1超链接应用实例4.1.1 设计目标制作一个具有超链接的网页。
其浏览效果如图4.1所示。
4.1.2 页面分析（1）内部超链接（2）外部超链接（3）空链接和脚本链接（4）E-mail超链接（5）设置超链接颜色4.1.3 实训引导制作网页前素材的准备。
4.1.4 制作步骤（1）创建内部超链接（2）创建外部超链接（3）创建空链接和脚本链接（4）创建E-mail超链接（5）设置链接颜色重点：（10分钟）讲解锚点的含义、制作步骤、返回首链接。
边讲解边演示，在让学生自己动手制作锚点链接及返回顶部时，可把课件里制作步骤那一部分投影到大屏幕上；让学习能力差的学生照着步骤制作。
4.3 创建锚点链接锚点(也称作锚记、书签)常用于包含大量文本信息的网页，通过在网页上设置锚点，再通过锚点链接，就可以直接浏览到相应的网页内容。
大大加快了浏览速度。
锚点链接：同一网页或不同网页的指定位置的链接。
4.3.1 锚点链接应用实例1、设计目标、制作一个如图2所示的锚点链接。
2、实训引导制作网页前素材的准备。
3、制作步骤（1）在页面中插入锚点（2）为锚点建立链接4.3.2 插入命名锚点命名锚点简称为锚点，在网页中用于标记和链接的跳转位置，以便引用。
●在菜单栏中选择“插入”→“命名锚记”命令●在“锚记名称”文本框中，输入锚记的名称，单击“确定”按钮。
网页中使用超链接
第五章网页中使用超超是的魅力所在。
为了把Internet上众多分散的的网页联系起来,构成一个有机的整体,就是在网页上加入。
通过点击网页上的,才能真正实现网络无国界,我们才可以在信息海洋中尽情遨游。
Macromedia Dreamweaver 8提供多种创建超文本的方法,可创建到文档、图像、多媒体文件或下载软件的,可以建立到文档内任意位置的任何文本或图像〔包括标题列表、表、层或框中的文本或图像〕的。
本章主要介绍利用Dresmweaver 创建的编辑各种超的方法。
通过本章的学习,读者应该掌握以下内容；●认识超●掌握利用Dreamweaver创建各种超的方法●掌握利用Dreamweaver编辑各种超的方法●管理超下的方法5.1超基础5．1．1超的种类超为畅游网络提供了方便,它是网页制作中使用比较多的一种技术。
超是用预先准备的好文本、按钮、图像等对象与其他对象建立的一种,也就是源端和目标端点之间的建立一种。
源端点是超的超始端点,也称为源锚；目标端点是的像,也签名为目标锚。
超按源端点的划分,可分为超文本和非超文本两类。
超文本的源锚文本下方有下划线,而非超文本是用除文本之外的其他对象构建的,其源锚可以是图像、表格、列表、表单、多媒体等对象。
超按目标端点的划分,可分为外部、内部、电子、局部、脚本等。
5．1．2文档路径类型掌握从作为起点的文档到作为目标文档之间的文件路径,对于创建至关重要。
文档路径类型有绝对路径和相对路径两种。
1.绝对路径绝对路径是包括服务器协议〔本例中为〕的完全路径,比发如"洪恩在线——电脑乐园",完全路径为; honggen /pe/index..htm.如果要当前站点之外的文档,就必须使用绝对路径。
每个网页都有一个惟一的地址,称为统一资源定位器<URL>。
绝对路径提供文档的完整URL,包括使用的协议<对于网页通常是>。
例如, macromedia /support/dreamweaver/contents.html 就是一个绝对路径。
第4章 在网页中建立各种超级链接
网页设计与制作
许多网站提供了文件下载的功能，实现文件 下载的功能很简单，就是建立一个到文件的超级 链接！（下载的文件和其它网页文件都放在本地 站点中。）
网页设计与制作
二、创建外部超级链接
所谓外部超级链接：即链接了本地站点以外 的网页文件。我们平时常见的“友情链接”就是 外部超级链接，当单击“友情链接”中的某个链 接时，浏览器将打开相应网站。
例如， 设计目标：在网页中为“与我联系”文本创建 E-mail链接，其E-mail地址为yiiz@
网页设计与制作
实现步骤：
（1）添加“与我联系”文本。 （2）选中文本 （3）添加链接的方法 A、插入浮动面板常用电子邮件链接图标 B、菜单栏插入（insert）Email link打开 “insert Email link(插入E-mail链接)”对 话 框进行设置 C、在文本属性面板上link文本框中直接输入： “mailto:yiiz@” 网页设计与制作
网页设计与制作
创建空链接的步骤如下：
（1）选择需要创建链接的文本或图像 （2）在属性面板中的“Link”文本框中输入空链接符号 “#”， 即创建了一个空链接
创建空链接
网页设计与制作
四、创建脚本链接
利用脚本链接可以执行JavaScript代码或者 调用JavaScript函数。当来访者单击了某个指定 项目时，脚本链接也可以用于执行计算、表单确 认和其它任务。
设置链接目标
网页设计与制作
说明： 在“Target（目标）”文本框的下拉列表中 “_blank”表示在新的未命名的浏览器窗口中打 开链接文档。 “_parent”、 “_self”、 “_top”选项的含义与 框架有关。
网页设计与制作
网页设计与制作项目7超链接
鼠标指向导航图像
7.2 网页制作
步骤 10 重复同样的操作，插入鼠标经过图像，在 图像名称的文本输入框中输入“酒店机票”，用与设置 “首页”相同的方法选择所需要的图像，【插入鼠标经过 图像】对话框中的参数设置如图所示。
【插入鼠标经过图像】对话框参数设置
7.2 网页制作
7.2.2 创建文本与图片超链接 步骤1 创建文本超级链接。在【属性】面板上单击 “页面属性”按钮 ，设置文本链接的属性，参数设置如 图所示。 步骤2 在“目的地”页面中选择文本“预订酒店”， 如图所示；在【属性】面板上单击“链接（L）”右侧的 “浏览文件”按钮 。
步骤7 单击“预览”按钮 ，当鼠标指向 文本“黄山”图片时，单击即可跳转到“黄山” 页面上。 步骤8 按照相同的操作，可以完成图片 “苏州园林”、“桂林”的超级链接。
7.2 网页制作
7.2.3 创建图像映像超链接 步骤1 在“目的地”页面上单击“地图”图片，在 【属性】面板单击“矩形热点工具”按钮 ，在地图上的 “北京”处绘制“矩形”，如图所示。 步骤2 在【属性】面板上单击“链接（L）”右侧的 “浏览文件”按钮 ，或直接输入超级链接的目标文件名， 如图所示。
“目的地”页面效果
7.2 网页制作
7.2.1 设置导航条超链接 步骤1 启动Dreamweaver CS6后，在letuweb 站点中创建新文档，命名为“destination.html”。 步骤2 在destination文档中绘制表格布局页面，输 入相应的文字、选择图像等素材，插入页面顶部LOGO及其 他元素，如图所示。
7.2 网页制作
步骤3 在表格的第3行定位光标，执行【插入】| 【图像对象】|【鼠标经过图像】菜单命令，弹出【插 入鼠标经过图像】对话框，如图所示。
网页设计与制作 项目 5使用超链接
注意：在创建E-mail链接时，mailto:和 “@”是必不可少的
5.2.5 创建空链接
空链接实际上是一个未指派目标的链接，利用 空链接可以激活网页上的对象或文本。
（1）打开HTMI，选择文字或图片
页
Javascript：window.close()：关闭窗口
任务2 管理超链接
5.3.1 链接检查器的使用
在DreamweaverCS4中可以使用链接检查器来 管理当前站点的超链接，帮助站点制作者检查站 点的链接是否有效，统计有效连接、无效链接、 断开连接和外部链接的个数，修改断开或无效的 链接。
2.图像地图
图像地图，也称为图像热区、图像热点，在“属 性”面板上的矩形、圆形和多边形热点工具建立 需要的热点区域
5.2.3 创建锚点连接
1.创建目标在本页上的锚点链接
（1）打开HTML，光标定位在热字前面， “插入”——“命名锚记”命令，或者在“常 用”选项卡中单击“命名锚记”按钮
（2）在“锚记名称”文本框中输入锚记的 名称abc，单击“确定
（2）在“属性”面板“链接”下拉列表中输入 “javascript:;”或输入“#”就可以了
5.2.6 创建文件下载链接
选择需要创建文件下载链接的源文本，在 “属性”面板“链接”下拉列表输入目标文件的 URL
5.2.7 创建脚本链接
网站中的超链接不但可以实现网页页面之间的跳转， 还可以直接调用Javascript代码，这种超链接就成为脚本 链接或Javascript链接。 （1）选定文字或图片，在“属性”面板“链接”下拉列表 中输入“Javascript ：”，然后输入一些Javascript代码 或函数调用即可
超级链接的建立实训报告
一、实训目的随着互联网的快速发展，超级链接（Hyperlink）已经成为网络信息传递和导航的重要手段。
通过本次实训，旨在使学生掌握超级链接的基本概念、建立方法及其在网页设计中的应用，提高学生的网络信息处理能力和网页设计水平。
二、实训内容1. 超级链接的基本概念超级链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是同一网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件或一个应用程序。
超级链接是网页之间相互连接的桥梁，使网络成为一个有机的整体。
2. 超级链接的建立方法（1）文本链接文本链接是最常见的超级链接形式，通过将一段文字设置为超链接，实现网页之间的跳转。
具体步骤如下：① 选择要设置超链接的文本。
② 右击选中的文本，选择“超链接”选项。
③ 在弹出的“设置超链接”对话框中，输入链接目标地址，可以是网页地址、电子邮件地址或同一网页中的位置。
④ 点击“确定”按钮，完成文本链接的设置。
（2）图片链接图片链接是指将一张图片设置为超链接，实现网页之间的跳转。
具体步骤如下：① 选择要设置超链接的图片。
② 右击选中的图片，选择“图片另存为”选项，将图片保存到本地。
③ 返回图片所在网页，右击图片，选择“超链接”选项。
④ 在弹出的“设置超链接”对话框中，选择“链接到文件或网页”，然后点击“浏览”按钮，找到已保存的图片。
⑤ 点击“确定”按钮，完成图片链接的设置。
（3）电子邮件链接电子邮件链接是指将一段文字或图片设置为超链接，实现电子邮件的发送。
具体步骤如下：① 选择要设置超链接的文字或图片。
② 右击选中的文字或图片，选择“超链接”选项。
③ 在弹出的“设置超链接”对话框中，选择“电子邮件地址”。
④ 输入收件人的电子邮件地址，点击“确定”按钮，完成电子邮件链接的设置。
3. 超级链接在网页设计中的应用（1）导航栏设计在网页设计中，导航栏是必不可少的元素。
通过设置超级链接，可以实现网页之间的快速跳转。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<head> <title>链接颜色的变化</title>
</head> <body text=blue alink=red vlink=yellow link=green>
注意<a href=1.html>颜色</a>的变化 </body> </html>
烟台南山学院-----计算机应用技术学院
第四章
建立超链接
2019/12/25
第4章 建立超链接
4.1 从HTML的角度理解超链接
4.2 使用Dreamweaver 8设置超链接 4.3 实践与练习：为文字添加超链接
4.4 实践与练习：鼠标经过图像
4.5
实践与练习：导航条
小结
2019/12/25
2
第4章 建立超链接
与超链接相关的一个概念是定位点（也称锚 点），它指明了网页中一个确定的位置，以便超 链接跳转时定位。
2019/12/25
5
4.1从HTML的角度理解超链接
4.1.1 理解路径的概念 1、超级链接及路径的概念
超级链接是指站点内不同网页之间、站点与Web之间的链接 关系，它可以使站点内的网页成为有机的整体，还能够使不 同站点之间建立联系。例如，当浏览者单击已经链接的文字 或图像时，链接目标将显示在浏览器上，并且根据目标的类 型来打开或运行。
/index.asp
绝对路径指的是精确位置，如果目标文件被移到其 他位置，则超级链接无效。如果用户要创建的是外 部链接，即创建不同网站文档之间的链接，则必须 使用绝对路径。
2019/12/25
9
4.1从HTML的角度理解超链接
（2）文件相对路径
文件相对路径是指和当前文档所在 的文件夹相对的路径。
2019/12/25
3
第4章 建立超链接
主要内容：
了解超链接的概念和路径知识; 掌握超级链接的基本概念和创建方法； 从HTML的角度理解超链接; 使用Dreamweaver 8设置超链接.
2019/12/254来自第4章 建立超链接超链接就是当用鼠标单击一些文字、图片或 其他网页元素时，浏览器就会根据其指示载入一 个新的页面或跳转到页面的其他位置。
4.1 从HTML的角度理解超链接
文字超链接预览
2019/12/25
14
4.1 从HTML的角度理解超链接
4.1.3 设置文字链接的颜色 超链接可以通过设置链接的颜色来表示链 接是否已经被单击，注意这是在<body>标 签中设置的，而不是在<a>标签中。
2019/12/25
15
4.1 从HTML的角度理解超链接
本章简介：
前面两章中所做的工作仅仅是使网页中可以 显示文本和图像，虽说是“图文并茂”了，但这 对于网页来说还很不够。为了使网站中的众多网 页构成一个整体，必须使各网页通过超链接的方 式联系起来，也就是说，使访问者能够在各个页 面之间跳转。
网络中的每个网页都是通过超链接的形式关 联在一起的，超链接是网页中最重要、最根本的 元素之一。浏览者可以通过鼠标单击网页中的某 个元素，轻松的实现网页之间的转换或下载文件、 收发邮件等。
2019/12/25
12
4.1 从HTML的角度理解超链接
文字超链接示例 <html>
<head> <title>超链接</title>
</head> <body>
单击<a href=1.html>这里</a>链接到一个 图片网页超链接的建立
</body> </html>
2019/12/25
13
若要创建从站点根目录的 index.htm到list.htm的链接， 链接路径为“list.htm”。
若要创建从list.htm到help目 录下的help.htm的链接，链接 路径为“help/help.htm”。
2019/12/25
10
4.1从HTML的角度理解超链接
（2）文件相对路径
2019/12/25
6
4.1从HTML的角度理解超链接
2．超级链接的分类 （1）按链接载体分类，把链接分为文本链接与图像链接两大类。 文本链接：用文本作链接载体，简单实用。 图像链接：用图像作为链接载体能使网页美观、生动活泼，它既
可以指向单个的链接，也可以根据图像不同的区域建立多个链接。 （2）按链接目标分类，将超级链接分为以下几种类型： 内部链接：同一网站内文档之间的链接。 外部链接：不同网站文档之间的链接。 锚点链接：同一网页或不同网页中指定位置的链接。 E-mail链接：发送电子邮件的链接，可直接点击发送电子邮件。 执行文件链接：链接站点空间里的可执行程序，用于下载在线运
2019/12/25
11
4.1 从HTML的角度理解超链接
4.1.2 文字超链接 建立超链接所使用的HTML标签为<a>和</a>。 在“<a>”标签中，“href”属性是必要属性，
用来放置超链接的目标地址，该目标可以 是本机上的某个HTML文件，也可以是其他 网站上的URL地址。 “<a>” 和“</a>”之间的内容为超链接名 称。
行。
2019/12/25
7
4.1从HTML的角度理解超链接
3、链接路径
路径的作用就是定位一个文件的位置，使用过 Windows的用户都会了解文件夹和子文件夹，这 本身就是路径的概念。 例如：链接到的“1.html”就是一个路径，直接 使用文件名表示这个文件和原来的网页文件在同 一个文件夹中。如果链接到的网页不和原网页在 同一个文件夹中，就不能这样写了。
2019/12/25
8
4.1从HTML的角度理解超链接
（1）绝对路径
绝对路径是指某个文件在网络上的完整路径，包括 协议、Web服务器、路径和文件名等。简单地说，如 果在浏览器地址栏中输入就能直接访问的文件地址， 就可以看作是绝对路径。例如，下面的地址就是绝 对路径：
若要创建从help目录下的help.htm 到站点根目录下的list.htm的链接， 链接路径为“../list.htm”。 若要创建从product01.htm到help目 录下的help.htm的链接，链接路径为 “../help/help.htm”，也就是要先向 上后退一级目录，再向下一级目录找 到要链接的网页。