DW中建立超链接

超链接的使用
知识点：
●一般超链接插入方法
●电子邮件链接
●Javascript脚本链接
●命名锚记链接
●热区
操作步骤：
1.插入链接
目标：
Blank：在新窗口打开链接Self：在目前显示窗口打开链接Parent：在父级窗口打开链接Top：在顶级窗口打开链接
2.插入日期
3.插入电子邮件链接
格式：javascript:alert(‘需要显示的文字’)
●构建目录
●输入相应的诗的内容
在每首诗所在的相应位置插入命名锚记，并为命名锚记取名（任何英文名），该名称即
超链接寻找的目标
回到目录部分，选择相应的诗的题目，添加命名锚记链接，格式：#命名锚记名称
●其他命名锚记设置同上
6.热区
●页面中插入地图
●选择相应的热点工具在需要链接的地图部分绘制相应热区
●选中该热区，并添加链接地址
其他热区添加方法同上。

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。

上面做的工作仅仅是使网页中可以显示文本和图像，虽说是“图文并茂”了，但这对于网页来说还很不够，为了使网站中的众多网页构成一个整体，必须使各网页通过超链接的方式联系起来，也就是说，使访问者能够在各个页面之间跳转。

超链接就是当用鼠标单击一些文字、图片或其他网页元素时，浏览器就会根据其指示载入一个新的页面或跳转到页面的其他位置。

与超链接相关的一个概念是定位点（也称锚点），它指明了网页中一个确定的位置，以便超链接跳转时定位。

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”就是一个路径，直接使用文件名表示这个文件和原来的网页文件在同一个文件夹中。

如果链接到的网页不和原网页在同一个文件夹中，就不能这样写了。

大家在做海报时，一张图片只能加一个链接，用Photoshop切片的方法又太麻烦。

在这里我教大家另外一个方法。

1、首先，在百度上下载Dreamweaver软件(我给大家示范的是Dreamweaver8版本)，并安装。

安装完成后，就可以打开Dreamweaver软件。

2、打开之后会出现这个界面，之后按HTML就可以了。

3、接着是代码这个界面，可以看到标题处有“无标题文档”这几个字，把这几个字删除即可。

4、按“设计”按钮，接下来就可以给图片加多个链接了。

5、在给图片加超链接之前，要先把图片先上传到我们的图片空间里，并复制链接(这里说的链接也就是图片的地址URL，右键-属性里也看以看到)。

6、我们再按Dreamweaver的菜单栏的“插入”-“图像”。

7、将URL处的文字删掉，并粘贴我们之前那张图片的链接(也就是图片的地址/URL)，按确定，之后有弹出图像标签辅助功能属性的框，继续按右侧的确定即可。

这样子我们要处理的这张图片就出现了。

8、按菜单栏下方的按钮(有小倒三角形的地方)，会出现“绘制矩形热点”、“绘制椭圆热点”、“绘制多边形热点”。

在这里我给大家只示范“绘制矩形热点”，其他热点也是同样的方法，只是形状不一样而已。

9、按绘制矩形热点，拖动鼠标，选出图片中要加宝贝链接的一个区域。

做完这个步骤后，图片上就出现了这样一块区域。

此时可以在下方属性栏将宝贝链接加在链接处，将目标处改为“_blank”。

10、第二、第三个区域方法也是一样的，大家可以先把去去画好，再点各个区域，分别加链接，把属性栏“目标”处都改为“_blank”。

11、接下来切换到代码这里，可以看到一大串代码，我们要将这里的代码全部复制。

（为避免广告嫌疑，我已经用红色线把宝贝链接划掉）12、之后我们再打开店铺首页装修，添加自定义模块，按“源码”按钮，将代码复制到空白处，复制好后再按一次“源码”按钮，就会出现这张图，看起来超赞的哦！(这种方法可以加在店铺首页，也可以加在宝贝详情页中)。

实验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、按F12预览网页。

在浏览器里光标移到超级链接的地方就会变成手型。

 〖提示〗你也可以手工在链接输入框中输入地址。

给图片加上超级链接的方法和文字完全相同。

 如果超级链接指向的不是一个网页文件。

而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。

 超级链接也可以直接指向地址而不是一个文件，那幺单击链接直接跳转到相应的地址。

例如，在链接框里写上oldkids/那幺，单击链接就可以跳转到老小孩网站。

 【邮件地址的超级连接】 在网页制作中，还经常看到这样的一些超级链接。

单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。

这也是一种超级链接。

制作方法是：在编辑状态下，先选定要链接的图片或文字(比如：欢迎您来信赐教!)，在插入栏点 或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。

  提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。

 (如下图) 创建完成后，保存页面，按F12预览网页效果。

 【制作图片上的超级链接】 注意，我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。

比如一张中国地图的图片，单击了不同的省跳转到不同的网页。

可点的区域就是热区。

为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。

鼠标移动到省份的热区，会显示提示，如果有预先设置的网站，点击会进入对方的网站。

 【制作方法】 1、首先插入图片。

单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。