Dreamweaver 4 简明教程(六、建立超级链接)

dreamweaver|教程|链接

六、建立超级链接

  超级链接(Link),简称链接,是页面与页面之间一个单向的关联关系。通过点击链接,我们可以从一个页面跳到另一个页面。我们可以在文字、图片建立链接。

1、文字链接

  在页面中选取需要建立链接的文字,如下图:

  在属性面板的Link一项,填写链接地址,当浏览者点击该链接的时候,浏览器就回跳转到该页面,例如这里填写的是:http://www.goeway.com

  如果你希望该页面是在一个新窗口打开,可以在Target中选择“_balnk”。
  如果要链接到网站内的文件,可以点击

  上图中,我们是将文字链接到index2.htm这个文件,特别注意的是最底的Relative To的选项,意思是选择相对路径的形式,默认是Document,也可以选择Site Root,区别在于,Document是指相对路径是从本页开始计算,而Site Root是从根目录开始计算(即“/”),如下图:

  另外,如果使用Site Root的模式做成的链接,在本地硬盘直接打开页面浏览通常会出错,但在Dreamweaver的预浏模式和上传上服务器后,都不会有问题。
2、图片链接

  图片链接的建立过程与文字链接相似,就不多作介绍了。但特别要提出的是,某些图片,在加上链接后,会出现一个蓝色的边框,要将边框去掉,将Border设为0即可。

3、热区链接

  前面介绍的图片链接,一张图只能对应一个链接,能不能一张图对应多个链接呢?答案是可以的,选取一张图片后,可以在属性面板看到Map选项:

  其中: 创建矩形热区, 创建原形热区, 创建多边形热区。例如我们现在点 ,光标变成一个十字,此时可以在图片上画出一个蓝色矩形的热区:

  此时对应的属性面板为:

  同样地,在Link输入链接地址(“#”表示一个空链接),而Alt则为当鼠标指向热区时所显示的文字,与图片的Alt相似。我们可以通过 选择不同的热区,并通过调整热区四个角的控制点调整热度的大小。通过热区,我们可以在猩猩的眼睛做一个链接,同时又在嘴巴上做一个链接,分别链接到不同的页面。
关于链接的提示

  1、如果要链接到一个E-mail地址,则在Link处填写:“mailto:地址”,例如mailto:help@goeway.com,那么点击该链接的时候,就回打开默认的E-mail程序,例如Outlook,发送E-mail到help@goewa.com这个地址。

  2、如果链接到浏览器无法打开的文件,例如exe、Zip等文件,那么浏览者在点击这个链接的时候,就会弹出对话框,询问是将文件保存到硬盘的什么地方,这就实现了文件下载的功能。

时间: 2024-11-01 23:15:37

Dreamweaver 4 简明教程(六、建立超级链接)的相关文章

教程/dreamweaver/入门 Dreamweaver 4 简明教程9(建立超级链接)

dreamweaver|教程|链接 超级链接(Link),简称链接,是页面与页面之间一个单向的关联关系.通过点击链接,我们可以从一个页面跳到另一个页面.我们可以在文字.图片建立链接. 1.文字链接 在页面中选取需要建立链接的文字,如下图: 在属性面板的Link一项,填写链接地址,当浏览者点击该链接的时候,浏览器就回跳转到该页面,例如这里填写的是:http://www.goeway.com 如果你希望该页面是在一个新窗口打开,可以在Target中选择"_balnk". 如果要链接到网站内

教程/dreamweaver/入门 Dreamweaver 4 简明教程4(从最简单的网页开始)

dreamweaver|教程|网页 新建页面 一般推荐大家在站点窗口完成新建网页文件的操作,这样有助大家清楚新建的页面在整个网站的具体位置: 方法一:选择菜单上的 File > New File 方法二:在本地目录选中需要新建页面的目录,单击右键,选择 New File 在Dreamweaver UltraDev中,新建页面的文件名默认为untitled.asp.我们要给这个页面重新起一个名字,例如是"index.htm".改名的方法是在文件名上缓慢地点击两下(如下图),不要太快

Dreamweaver 4 简明教程(四、从最简单的网页开始)

dreamweaver|教程|网页 四.从最简单的网页开始 新建页面 一般推荐大家在站点窗口完成新建网页文件的操作,这样有助大家清楚新建的页面在整个网站的具体位置: 方法一:选择菜单上的 File > New File 方法二:在本地目录选中需要新建页面的目录,单击右键,选择 New File 在Dreamweaver UltraDev中,新建页面的文件名默认为untitled.asp.我们要给这个页面重新起一个名字,例如是"index.htm".改名的方法是在文件名上缓慢地点击

教程/dreamweaver/入门 Dreamweaver 4 简明教程6(让你的网页更漂亮)

dreamweaver|教程|网页 假设现在我们插入的是如下这张图片: 点选该图片,打开属性面板(Ctrl+F3),可看到如下图的状态: 1.图片的缩略图及图片的大小. 2.图片的长宽,如果图片长于宽跟原图的大小不一致的话,这里的数字会用粗体显示:点取一张图片,你可以看到图片会被套上一个框和三个点,三个点分别代表将图片向三个不同的方向拉伸,从而达到放大和缩小的效果:在拉伸过程中,按着Shift键,再拖动角上的点,可以使图片保持宽高比例拉伸,如下图.如果要将图片恢复为原始大小,可以按属性面板右下角

Dreamweaver 4 简明教程(五、让你的网页更漂亮之二)

dreamweaver|教程|网页 图片的处理 假设现在我们插入的是如下这张图片: 点选该图片,打开属性面板(Ctrl+F3),可看到如下图的状态: 1.图片的缩略图及图片的大小. 2.图片的长宽,如果图片长于宽跟原图的大小不一致的话,这里的数字会用粗体显示:点取一张图片,你可以看到图片会被套上一个框和三个点,三个点分别代表将图片向三个不同的方向拉伸,从而达到放大和缩小的效果:在拉伸过程中,按着Shift键,再拖动角上的点,可以使图片保持宽高比例拉伸,如下图.如果要将图片恢复为原始大小,可以按属

Dreamweaver 4 简明教程(八、为网页增添互动效果3)

dreamweaver|教程|网页 八.为网页增添互动效果 举例:如何打开一个没有工具栏的浏览窗口 在文字或图片的链接中,只要把Target设为"_blank"就可是使链接到的网页在一个新窗口中打开.但你是不是见过看到有的网页,开启的新窗口是不含工具栏,状态栏,网址栏的?这样的窗口是怎么做的呢? 先将光标选定在一个链接上(可以是图片链接,也可以是文字链接),按行为面板上的 按钮,选择:Open Browser Window,如下图: 接着看到如下对话框: 举例:如何打开一个没有工具栏的

教程/dreamweaver/入门 Dreamweaver 4 简明教程3(定义网站)

dreamweaver|教程 在正式开始制作网页之前,最好先定义一个新网站,这是为了更好地利用站点窗口对站点文件进行管理. 定义的方法 方法一:在站点窗口的下拉菜单选择最后一项Define Sites,如下图. 此时会弹出一个新的对话框,点击New按钮是定义一个新网站,如果日后需要对旧有网站重新定义,可以在左边的网站列表中选中你需要重新定义的网站,然后点击 Edit 按钮便可. 方法二:选择命令菜单 Site > New Site 选项. 基本设置 在接着看到的对话框中,要进行以下三步简单的设置

教程/dreamweaver/入门 Dreamweaver 4 简明教程14(互动效果)

dreamweaver|教程 制作简单的互动效果 在网页上经常看到这样的效果,当鼠标移到一张图片上的时候,原来的图片就切换为另一张图片,鼠标移开后,又恢复原来的模样,是怎么做的呢?在开篇的时候,提到Dreamweaver比Frontpage优胜的其中一个地方是Dreamweaver能做出能具互动性的网页.现在,我们就利用Dreamweaver制作这个最简单的互动效果--变换图片. 准备两张大小相同的图片,一张是鼠标还没有移上的状态,另一张是鼠标移上去后的图片,例如以下两图,左图是一个凸起的按钮,

教程/dreamweaver/入门 Dreamweaver 4 简明教程15(互动效果)

dreamweaver|教程 制作更复杂的互动效果 在Dreamweaver中,更复杂的效果是通过一个叫Behaviors的功能实现的,Behaviors的从字面上理解是"行为",我们又称为事件的响应.通过网页元素的变化,如鼠标的移动.点击等"事件" (Events),触发弹出窗口,关闭页面等"响应"(Actions),就是一个事件的响应.而值得高兴的是,"行为"的制作过程几乎是傻瓜式的. 按Shift+F3,打开行为面板,如