新编Dreamweaver CS3动态网页设计与制作教程第7章.ppt

1、7.1项目1:文本超连结7.2项目2:电子邮件链接7.3项目3:锚点链接7.4空链接和脚本链接7.5项目4:作为热点的图像超连结7.6课堂综合培训7.7摘要练习，第7章超链接，每个站点页面都包含多个页面，必须通过网页之间的链接进行连接，站点之间也可以通过超链接进行连接。超链接是浏览器和服务器之间交互的主要手段。超链接本质上是网页之一，是可以与其他网页或站点相关联的元素类型。超链接是从一个网页指向一个目标的连接关系，牙齿目标是另一个网页，同一网页的另一个位置，图片，电子邮件地址，档案，甚至是一个应用程序节目。网页过程中用于超链接的对象可以是文本或图片。如果浏览器单击连接的文本或图片，链接目标将显

2、示在浏览器中，并且打开或运行，具体取决于目标类型。网页超链接通常分为三种茄子类型。第一个是指向绝对统一资源定位器(URL)的超链接。URL是统一资源定位器，即网络上的一个网站和网页的完整路径(例如)。绝对路径是完整路径(包括服务器规范)，无论源文件的位置如何，都可以通过绝对路径准确定位，并且除非目标文档的位置发生更改，否则链接不会失败。由于链接到其它站点上的文档需要使用绝对路径，因此在使用绝对路径的站点上测试链接的有效性需要在网络服务器端测试链接。第二个是指向相对URL的超链接。例如，将自己网页上的文字或标题链接到同一网站的其他网页上。相对路径在文档与链接文档位于同一文件夹时特别有用。相对路径

3、使用档案层次结构指定从当前文档到链接文档的路径，将当前页面链接到其他文件夹中的文档。也有相同的网页超链接，也称为书签。超链接也可以分为动态超链接和静态超链接。动态超链接是可以通过更改HTML代码动态更改的超链接。例如，可以将鼠标移动到文字链接。文字可以像动画一样移动或改变颜色的效果。此外，在鼠标图像上移动会使图像产生反色或模糊的效果。静态超链接顾名思义，是没有动态效果的超链接。可以在“属性”面板中设置Dreamweaver CS3中的各种链接。建立文字超连结时，请选取要套用连结的文字，然后设定单击文字时要连结的网页。1.设置过程文本超链接的具体过程如下：(1)在Dreamweaver CS3中

4、打开现有文件，然后单击“属性”面板中的“页面属性”按钮(请参阅图7.1)。或者，运行菜单“修改”“页面属性”命令。7.1项目1:文本超连结，图7.1“属性”面板，(2)在“页面属性”对话框弹出窗口中，在“分类”中选择“链接”项目，在右侧的“链接”属性面板中显示链接的相关属性(3) 默认值为相同的页面字体。单击“选择颜色”按钮时，颜色选择器弹出，光标变为下落的管状体。婓森揭扢离晇伎耀宒瞰“蝈诿晇伎”“扷梓幂彻蝈诿”“眒湿恀蝈诿”睿“魂雄蝈诿”。在“下划线样式”列中，选择所需的样式。最后，按单击“确定”按钮。(4)在图7.3所示的素材中，选择“脚本也可以生成单独的精灵软件”的文本。，添加图7.2的

5、“页面属性”对话框，应用图7.3链接文本选择，(5)添加“属性”面板中的“链接”文本框/qmacro /mymacro.htm链接，如图7.4所示。(6)在单击文档窗口的其他位置取消选择文本会将选定文本的字体更改为带下划线的蓝色字体，然后添加超链接，如图7.5所示。图7.4“属性”面板中输入链接地址，图7.5链接后添加文本，(7)保存文档，在浏览器中预览，转到鼠标文本“脚本”后，还将创建单独的向导软件“牙齿手的形状”，链接颜色变为深红色，单击鼠标后，链接将返回到橙色红色，原始档案页面，发现链接文本将变为暗红色，表示链接已访问(8)要删除已创建的文本链接，可以选择文本链接，然后运行“修改”“删除

6、链接”命令。2 .相关知识点在文本中创建链接。修改文本链接字体颜色方法添加文本链接下划线方法。在网页上创建电子邮件链接，通过电子邮件为用户提供快速反馈和沟通的平台。单击浏览器单击邮件链接时，客户端浏览器默认电子邮件处理程序(如Outlook Express)将自动打开，收件人的电子邮件地址将自动更新为电子邮件链接中指定的地址。用户无需手动输入地址。1.直接在“属性”面板中创建邮件链接在“属性”面板中创建邮件链接的具体过程如下：(1)在Dreamweaver CS3中打开素材，然后选择光标所选文本“联系人”，如图7.6中所示，可以添加电子邮件链接。7.2项目2:添加电子邮件链接，图7.6链接文本

7、选择，(2)在“属性”面板的“链接”文本框中，输入“Mailto 3360邮件地址”格式的链接(见图7.7)，然后在此处键入Mailto 3330(3)Subject=邮件主题链接，例如mailto:可以快速输入标题为Subject=“密钥向导注册咨询”的电子邮件链接。图7.7在“属性”面板中直接创建邮件链接，2 .使用插入方法创建电子邮件链接和使用插入创建电子邮件链接的具体过程如下：(1)在Dreamweaver CS3中打开素材(如图7.8所示)，然后将光标放在电子邮件图标旁边，可以添加电子邮件链接。添加图7.8邮件链接位置选择，(2)单击“插入”面板“常规”工具栏“电子邮件链接”按钮或“

8、插入唱片”“电子邮件链接”命令，如图7.9中所示，弹出“电子邮件链接”对话框，图7.9“电子邮件链接”(4)您可以看到电子邮件图标旁边添加了文本“contact(联系)”，如图7.10所示。您可以在“属性”面板中以mailto:查看牙齿文本链接。(5)保存更改并在浏览器中预览效果，然后单击“联系我们”链接，浏览器将自动打开Outlook Express中的“新建邮件”对话框文件，如图7.11所示。图7.10电子邮件链接附加效果图，图7.11 新邮件对话框，3 .相关知识点如何在“属性”面板中直接创建邮件链接使用电子邮件链接插入方法创建邮件链接。4 .知识扩展：档案下载链接扩展名。gif或.您可

9、以在浏览器中显示包含jpg等的图像文件，但压缩档案(扩展名。rar，zip)或可执行文件(扩展名：exe)无法在浏览器中显示。无法显示单击链接文件档案下载链接的使用方式与常规链接相同。创建档案下载链接的步骤如下：(1)压缩需要下载的文件，并将压缩包放在网页网站目录中。(2)在Dreamweaver CS3中打开素材，然后选择“立即下载”文本，如图7.12所示。添加图7.12链接文本选择，(3)在“属性”面板的“链接”文本框中，手动输入要下载的档案名称和后缀名称，如图7.13所示。要下载远程服务器上的文件，必须指定路径。(4)保存页面修改，在浏览器中预览，单击“立即下载”文本，将出现“下载档案”

10、对话框弹出窗口。图7.13剪辑链接文本框，建议在制作网页时将相关内容放在同一页上，但这可能会使网页文档内容过长，因此必须移动滚动条找到所需内容。锚点链接也称为书签链接，经常用于内容大而麻烦的网页操作。单击锚点可以快速重定向到网页特定的位置，如快速导航到页眉、页脚或网页文章之一，这样可以更容易地在网页内容中导航。锚点类似于读书时的目录或冗长提示。7.3项目3:锚定连结，1。建立程序锚定连结的程序分为两个步骤：建立锚定和连结至锚定。(1)在Dreamweaver CS3中打开素材，然后将光标放在要创建锚点的位置，如图7.14所示。请注意，不能在AP元素中创建站点。在“会员功能”文本后插入光标。创建

11、图7.14锚点对象选区，(2)运行单击“插入”面板“常规”工具栏“命名锚点(锚点段宜恩)”按钮或“唱片插入”“命名锚点”命令以打开“命名锚点”。(3)在“锚点名称”对话框中，输入要参照的锚点名称。牙齿名称不能包含空格，对大小写入敏感。输入锚点名称“汇源”。(4)按下单击“确定”按钮后，在“会员功能”文本后插入锚点符号，如图7.16所示。可以在图7.15 命名锚对话框、图7.16创建锚段宜恩、(5)选择锚段宜恩、“属性”面板中修改锚名和类，如图7.17所示。(6)在剪辑窗口中，选择要插入锚点的文本对象“会员服务”，在“属性”面板中单击“链接”下拉列表，然后选择#huiyuan，或者在“链接”文本

12、框中输入“#锚点名称”，即可输入(7)保存网页，在浏览器中预览效果，或者，图7.17锚点段宜恩“属性”面板，图7.18锚点链接设置，2 .如何创建相关知识点锚点锚点链接的角色锚点标志符；链接到锚点标志符的方法。3.知识扩展：跳转到页面第一效果的方法如下：(1)在Dreamweaver CS3中，打开素材(如图7.19所示)，将光标放在“按键向导”文本后。创建图7.19锚点对象选区，(2)运行单击“插入”面板“常规”工具栏“命名锚点”按钮或“插入唱片”“命名锚点”命令以打开“命名锚点”对话框(3)单击“确定”，图7.20“命名锚记”对话框，图7.21设置锚记标记，(4)在剪辑窗口中，选择要插入锚

13、记的文本对象“返回顶部”，然后在“属性”面板的“链接”文本框内输入#top，从而在文本中添加锚记标记(5)保存网页，图7.22设置锚点链接，1 .空链接空链接是未指定链接目标的链接。空链接用于将行为附加到页面上的对象或文本。空链接使您可以激活文档中的链接对象和文本，并附加行为，以便在指针滑过链接时交换图像或显示绝对位置元素(AP元素)。这样，您可以：(1)选择要创建空链接的文本或其他对象。(2)在“属性”面板的“链接”文本框中，仅输入#即可创建空链接，如图7.23所示。7.4空链接和脚本链接，图7.23“创建空链接”设置，2 .脚本链接脚本链接还可以执行计算、西餐验证和其他处理任务，方法是运行

14、相应的JavaScript代码或调用JavaScript函数，以便在不离开当前网页的情况下向访问者提供有关项目的其他信息的特殊类型的链接脚本链接。基本语法：以文本链接下图7.24所示的文档为例，说明脚本链接的具体过程。(1)在Dreamweaver CS3中，打开所需的脚本链接文件，然后选择所需任务的文本，如图7.24所示。图7.24创建链接对象选择，(2)在“属性”面板的“链接”文本框中，输入以下格式的语句：“JavaScript:代码或函数”。例如，输入javascript:alert(我是脚本链接)。(3)保存页面更改，在浏览器中预览，单击“脚本链接”文本，出现如图7.26所示的对话框弹

15、出窗口。图7.25创建脚本链接，图7.26脚本链接效果图，从大图像移动到鼠标方向不同的区域时，链接相应地发生变化。牙齿技术称为“热点链接”，也称为图像映射。其他形式的超链接可以指向图像中的其他区域，指向其他URL。图像中的多个分区称为“热点”，具有相同的功能和超链接，单击这些“热点”可以跟踪和访问目标。Dreamweaver CS3提供了“指针热点”工具、“矩形热点”工具、“椭圆热点”工具和“多边形热点”工具，您可以使用它们来创建和调整热点区域。7.5项目4:将超连结添加到图像作为热点，1 .将超链接添加到图像作为过程热点的具体过程如下：(1)在Dreamweaver CS3中，打开素材(如图

16、7.27所示)，然后选择图像。(2)打开“属性”面板，然后打开单击“属性”面板右下角的展开箭头以显示地图创作工具，如图7.28所示。图7.27中选择的热点创建对象，图7.28在“属性”面板中显示地图创建工具，(3)在“地图”文本框中输入热点区域名称软件。如果一页上的图像包含多个热点区域，则必须为每个图像热点区域指定唯一的名称。(4)根据热点的形状，选择不同的热点工具。选择“矩形热点”工具并鼠标移动图像时，光标变为细十字，按键向导图像区域单击，然后拖动鼠标按钮以绘制浅蓝色热点区域，如图7.29所示。图7.29“添加热点区域”窗口，(5)选择热点区域，然后在“属性”面板中输入其内容，如下所示：链接文本框：输入链接的目标页面地址，或单击后打开按钮以选择文件。在牙齿示例中，输入按键向导主页地址目标下拉列表。对于如何打开新页面，请选择_blank以在新窗口中打开链接。“替换”文本框：牙齿热点的文本说明，当您鼠标从浏览器导航到热点区域时，将显