Dreamweaver CS3网页设计培训教程电子教案06.ppt

1、第6课 建立链接,本课要点 具体要求 本课导读 上机练习,本课要点,使用网页链接 网页链接分类,具体要求,了解网页链接 掌握插入链接的基本方法 熟悉各种链接的概念,本课导读,网页链接能丰富网页的内容和功能，带给网站访问者极大的方便。很难想像一个没有链接的网站会是什么样子：浏览者每读一篇文章或查看一件商品的详细信息，都要从浏览器中输入准确的一串网络地址，这种情况是让人无法接受的。何况，没有网站的导航链接，事先很难知道网页信息的具体地址。网页链接就像网站的骨架，将网页和其他资源有序地整合起来，是网页中不可缺少的一部分。,6.1 使用网页链接,链接和文本、图像等一样，是网页的主体，是连接网页和其他资

2、源的桥梁。通过链接，浏览者能顺利访问网站的信息资源。本节主要介绍怎样在网页中使用链接，并对链接进行简单的属性设置。,6.1 使用网页链接,6.1.1 知识讲解 6.1.2 典型案例制作“古诗欣赏”网页,6.1.1 知识讲解,链接能够实现页面之间的跳转，从而有机地将网站中的各个页面联系起来，是网页中至关重要的元素。制作网页时，可以通过将链接加在图像和文字等上面来实现资源的连接。,6.1.1 知识讲解,1.了解网页中的链接 2.插入网页链接 3.设置链接样式,1.了解网页中的链接,链接由源端点和目标端点两部分组成，有链接的一端称为链接的源端点（鼠标光标移到其上时通常会变为形状），提供链接资源的一端

3、称为目标端点，即Internet地址，通常称之为URL。URL是英文“Uniform Resource Locator”的缩写，其含义为“统一资源定位符”，它定义了一种统一的网络资源寻找方法，网络上的所有资源（如网页、音频、视频、Flash动画和压缩文件等）均可以通过这种方法访问。URL的基本格式是“访问方案:/服务器:端口/路径/文件#锚记”，例如“http:/bk. :80/view/262.htm#11” 。,2.插入网页链接,网页链接通常添加在文本或图像上，可以通过【属性】面板快速添加。 1）添加文本链接 2）创建普通图像链接 3）创建图像热点链接,3.设置链接样式,默认的页面链接样式

4、很可能与页面的风格不协调，如颜色和字体等，可以根据需要预先进行链接样式的设置。具体操作步骤如下： （1）选择【修改】【页面属性】命令（或单击【属性】面板下方的【页面属性】按钮），打开【页面属性】对话框。 （2）在左边的【分类】列表框中选择【链接】选项，将对话框切换到该分类。在该对话框中进行相应的设置，然后单击【确定】按钮，关闭对话框。,6.1.2 典型案例制作“古诗欣赏”网页,案例目标 本案例将练习在网页中添加图像和文本链接，并设置页面链接样式。,6.1.2 典型案例制作“古诗欣赏”网页,操作思路 （1）设置页面属性和链接样式。 （2）插入表格并设置表格样式，利用表格进行网页布局。 （3）插入

5、嵌套表格。 （4）添加相应文本和图像。 （5）在文本和图像上添加链接。,6.1.2 典型案例制作“古诗欣赏”网页,操作步骤 具体操作步骤请教师参照软件和书中内容进行讲解。,6.1.2 典型案例制作“古诗欣赏”网页,案例小结 本案例通过制作“古诗欣赏”网页演示了创建及设置文本链接和图像链接的方法，读者一定要掌握这些知识。,6.2 链接分类,在网页中，除了指向页面的链接外，还有文件链接、脚本链接、电子邮件链接、空链接和命名锚记等比较常见的链接类型。另外，链接还可分为相对链接和绝对链接两类。本节将详细介绍各种链接。,6.2 链接分类,6.2.1 知识讲解 6.2.2 典型案例完善版权信息,6.2.1

6、 知识讲解,不同的链接可以实现不同的功能，下面分别介绍不同链接的功能和创建方法。,6.2.1 知识讲解,1.相对链接 2.绝对链接 3.文件链接 4.空链接 5.电子邮件链接 6.命名锚记,1.相对链接,相对链接在页面制作中最为常见，它只能链接网站内部的页面或资源，是链接目标相对于创建链接的页面的路径。例如，“about.html”表明页面“about.html”和链接所在的页面处于同一个文件夹中；又如，“img/logo.gif”说明图片“logo.gif”在创建链接的页面所处文件夹中的【img】文件夹中，依此类推，以斜线（/）分隔文件夹和文件来表示路径。创建相对链接的具体操作请教师参照软件

7、和书中内容进行讲解 。,2.绝对链接,与相对链接对应的是绝对链接，绝对链接采用严格的寻址标准，包含通信方案、服务器地址和服务端口等，如“ 绝对链接的创建方法和相对链接的创建方法一样，只是链接的地址需要手动输入。,3.文件链接,互联网上的资源丰富多样，除了网页之外，还有音频（如MP3和铃声）、视频、应用软件和小说等，下载这些文件就需要通过文件链接来实现 。文件链接的创建方法和页面链接相同，也包括相对链接和绝对链接两种形式。,4.空链接,为了实现一些自定义的功能或效果，常常要在网页中添加脚本，如JavaScript和VBScript脚本等，而其中许多功能是与访问者互动的，比较常见的是“设为首页”和

8、“加入收藏”等，它们都需要通过空链接来实现。空链接并不实现页面的跳转，而是提供调用脚本的功能。 空链接的地址统一用“#”表示，需要在代码中添加脚本。,5.电子邮件链接,电子邮件链接为浏览者提供了快速创建电子邮件的功能，用户单击此类链接后即可进入电子邮件的创建向导，它的一大特点就是预先设置好了收件人的邮件地址。 电子邮件链接与页面链接的不同之处在于使用的通信方案不同，电子邮件链接的通信方案是SMTP，所以在添加链接地址的时候加上“mailto:”指定通信方案即可，如“mailto:”，后面的“”就是收件人的邮件地址。 创建电子邮件链接的具体操作请教师参照软件和书中内容进行讲解 。,6.命名锚记,

9、当浏览者打开某网页时，默认是从页面顶部开始显示的，如果网页内容超出窗口高度，则需拖动滚动条往下浏览。当网页比较长的时候，这种方式就有些让浏览者费神了，比如一个公司介绍网页，每个部分都有一段较长的图文内容，加在一起网页就比较长了，这时，可以在网页中使用命名锚记，单击指向各命名锚记的链接即可跳到相应的部分去阅读，而不需使用滚动条去寻找。创建命名锚记的过程如下： 在页面某位置插入命名锚记。 在页面中需要跳转到命名锚记的位置插入指向对应锚记的链接。,6.2.2 典型案例完善版权信息,案例目标 本案例将对3.2.2节中制作的“版权2.html”网页进行进一步完善，练习空链接和电子邮件链接的使用方法。,6

10、.2.2 典型案例完善版权信息,操作思路 （1）打开网页文档，在其中添加新的项目并设置格式。 （2）为插入的项目编辑代码，设置链接。,6.2.2 典型案例完善版权信息,操作步骤 具体操作步骤请教参照软件和书中内容进行讲解。,6.2.2 典型案例完善版权信息,案例小结 本案例通过对3.2.2节中制作的“版权2.html”网页进行进一步完善为用户演示了“设为首页”和“加入收藏”等空链接的创建方法以及电子邮件链接的使用方法。创建链接的通用方法是使用【属性】面板输入链接地址，建议读者熟练掌握该方法，其余方法作为辅助即可。,6.3 上机练习,6.3.1 制作网站友情链接栏目 6.3.2 制作“软件下载”网页,6.3.1 制作网站友情链接栏目,根据本课所学知识制作网站中常见的友情链接栏目，其中主要用到了图像和文本链接以及滚动字幕，这些都是网站建设中常用的技术。读者熟练掌握本例之后，举一反三，即可满足多样化的网站需求。,6.3.1 制作网站友情链接栏目,操作思路 新建一个空白网页文档，在其中划分出链接栏，并将需要用到的图像复制到保存网页的文件夹中。 插入图像和文本，并在【属性】面板中设置其属性。 添加各种效果。,6.3.2 制作“软件下载”