当前位置：文档之家 › Dreamweaver网页设计之建立超链接

Dreamweaver网页设计之建立超链接

  • 格式：pptx
  • 大小：1.09 MB
  • 文档页数：45

下载文档原格式

  / 45

合集下载

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章

中文版 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网页超链接教学设计

Dreamweaver8网页超链接教学设计

ｐａｔｒ ｎｄ ｐｐｉａｉｎ ｓ ｆｗａ ｅ ａ ｈ ａｒｅ．Ｗ ｉｈ ｔ ｅ ” ｂ ｌｎ ｓ ａ ｘ ｍｐ ｅ ｏ ｔ ｓｇ ｔｅ ｃ ｕ ｓ ａ ｅ ｏ ｓｕ ｎ ｓ ｔ ｎ ａ ａ ｌ ｔ ｏ ｔ ｒ ｓ ｔｅ ｃ ｒｉｒ ｅ ｃ ｏ ｔ ｈ ｗｅ ｉ ｋ ” ｓ ｅ ａ ｌ ．ｈ ｗ ｏ ｄｅｉｎ ｈ ｏ ｒｅ ｂ ｓ ｄ ｎ ｔｄｅ ｔ
３ 教 学策 略
本 课 内 容 的 学 习是 一 种 自我 需 求 下 的 获 取 ，所 以 关 键 在 于 学 习 方 法 、学 习 习 惯 的 培 养 。平 时 授 课 巾就
要 注 重 倡 导 学 生 自主 学 习 ，碰 到 困 难 要 想 办 法 ，通 过
Ｔｅ ｃ ｉ ｓｇ ｏ ｈｅ Ｄ ｒ ａ ｗｅ ｖ ｒ Ｗ ｅ ｎ ａ ｈ ｎｇ Ｄｅ ｉ ｎ ｆ ｔ ｅ ｍ ａｅ ８ ｂ Ｌｉ ｋｓ
ＧＵＡＮ Ｌｌ ｉ ｉ
（ ｉ ｎｊ ｎ ｉ ｌＨ ｓａ ｄｙ ＆ Ｖｅｅ ｎ ｒ ｏ ａｉｎ ｌＣ ｌ ｇ，Ｈｅｌｎ ｊ ｎ １０ １ Ｈｅｌ ｇｉ ｇ Ａｎｍａ ｕ ｂ ｎ ｒ ｏ ａ ｔｒ ａ Ｖ ｃｔ ａ ｏｌ ｅ ｉ ｙ ｏ ｅ ｉ ｇｉ ｇ ５ １ ） ｏ ａ １
完 成 对 知 识 点 的学 习 与 掌 握 ．增 强 主动 学 习 、探 究 的
意识 。
信 息 链 接 实 现 的 方 法 ， 让 基 础 一 般 的 学 生 能 对
Ｄ ｅ ｍｗ ａ ｅ８ 中创 建 超 链 接 的 几 种 方 法 有 个 全 面 了 ｒａ ｅ ｖ ｒ
解 ，能掌 握 其 巾的 部 分 内容 ，学 会 学 习 方 法 ，为 以 后
２１ ０ １年 第 ２期
Ｄｒａ ｍｗｅ ｖ ｒ ｅ ａ ｅ８网 页 超 链 接 教 学 设 计

Dreamweaver中超链接的应用教案

Dreamweaver中超链接的应用教案

公开课教案课程名称《网页制作》教程课题名称：Dreamweaver中超链接的应用授课班级：任课教师：授课时间：时间分配教学内容及过程教学方法及教学内容的拾漏补遗17’第三环节：教师演示、讲解操作步骤 Dreamweaver中超链接的应用一、超链接的含义超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点。

二、超链接的分类1、按照源端点的不同，可以将超链接分为文本链接、图像链接和表单链接3种。

文本链接：是指以文字作为超链接源端点的链接。

图像链接：是指以图像作为源端点的超链接。

表单链接：需要与表单结合使用，当用户单击表单中的按钮时，会自动跳转至相应页面。

2、根据目标端点的不同，超链接可分为内部链接、外部链接、锚点链接和电子邮件链接4种。

内部链接：其目标端点是本站点中的其他网页或文件。

外部链接：指链接的目标端点与源端点不在同一个站点中。

锚点链接：如果网页太长，可用锚点链接实现跳转到当前网页或其他网页中的某一指定位置。

电子邮件链接：单击电子邮件链接，将打开系统默认的电子邮件收发程序。

三、设置链接属性在没有选中任何对象的前提下，单击“属性”面板上的“页面属性”按钮，打开“页面属性”对话框，首先在左侧列表中选择“链接”选项，然后在右侧设置各项链接属性。

演示提问讨论讲授、演示、讨论时间分配教学内容及过程教学方法及教学内容的拾漏补遗30’四、设置常规超链接常规超链接包括内部超链接和外部超链接，内部超链接是指目标文件位于站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。

1．内部超链接内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以在“属性”面板上的“链接”编辑框中直接输入要链接对象的相对路径；也可以通过单击“属性”面板上“链接”编辑框右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择链接对象。

2．外部超链接外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板上的“链接”编辑框中直接输入要链接网页的网址。

DW课程第04讲添加超链接和多媒体元素

DW课程第04讲添加超链接和多媒体元素
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”键，预览网页，链接的三种状态通 过不同的颜色区别开来。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
【例】 超链接颜色设置示例 <html>
<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”，也就是要先向 上后退一级目录，再向下一级目录找 到要链接的网页。