网页设计与制作案例教程—Dreamweaver cs6电子教案-第4章.pptx

网页设计与制作案例教程

电子教案

;本章学习目标;教学案例：制作“个人网站”;案例制作

1.制作电子邮件链接

步骤1：选择菜单栏“文件”→“打开”命令，在弹出的“打开”对话框中选择云盘中的“素材”文件夹→第4章→个人网站→index.html文件，单击“打开”按钮打开文件。;单击“插入”面板“常用”→“电子邮件链接”按钮，在“电子邮件链接”对话框中进行设置，单击“确定”按钮，效果如图所示。;单击“确定”按钮，将“index.html”文件链接到文本框中，在“目标”选项的下拉列表中选择“_self”选项。;步骤3保存文档，按【F12】键预览效果。;知识讲解;链接路径就是人们通常所说的URL（统一资源定位符），路径的作用就是定位一个文件的位置。超级链接路径有绝对路径和相对路径两种。

1.绝对路径

绝对路径是指某个文件在网络上的完整URL地址，包括协议、服务器域名、路径和文件名等。例如，/support/dreamweaver/contents.html。

绝对路径有以下几种情况：

网站间的链接，例如：；

FTP链接，例如：1；

文件链接，例如：file://d:/网站/web/index.html。

;2.相对路径

相对路径是指当前文件所在位置的相对位置，用于在本地站点中的文档间建立连接。

相对路径分两种情况：

一是相对于当前页面的，本级目录直接写文件名，每向上进一级目录就要使用一次../，每向下一级目录使用一次“文件夹名/”。

例如，路径1.html表示和当前页面同一目录下的1.html页面；../1.html表示当前页面所在目录的上一级目录下的1.html，aaa/1.html表示当前页面所在目录中的aaa目录下的1.html。

二是相对于网站根目录来说的，是以/开头的，例如/1.html，/aaa/1.html分别表示根目录下的1.html，根目录下的aaa目录下的1.html。;1.创建文本超链接

指定链接文件的方法有3种。

（1）选中要添加链接对象的文本，然后在其“属性”面板“链接”选项的文本框中直接输入要链接文件的路径和文件名。;在“相对于”下拉列表中有两个选项，选择“文档”选项表示使用文档相对路径来链接；选择“站点根目录”选项，表示使用站点根目录相对路径来链接。在“URL”选项的文本框中，输入链接目标的相对路径或绝对路径。;（3）使用“文件”按钮左边的的“指向文件”按钮拉向所要链接的文件。;2．设置文本链接;步骤2：选择“分类”→“链接（CSS）”选项。

单击“链接颜色”选项右侧的图标，打开调色板，选择一种颜色来设置链接文字的颜色。

单击“已访问链接”选项右侧的图标，打开调色板，选择一种颜色来设置访问过的链接文字的颜色。

单击“交换图像连接”选项右侧的图标，打开调色板，选择一种颜色来设置鼠标指针悬停时链接文字的颜色。

单击“活动链接”选项右侧的图标，打开调色板，选择一种颜色来设置鼠标指针按下时链接文字的颜色。

在“下划线样式”选项的下拉列表中设置链接文字是否加下划线。;四、图像超链接;在“替换”文本框中输入替换文字。设置替换文字后，当图片由于网络等原因不能加载时，会在图片的位置上显示替换文字。此功能也可为借助工具阅读网页的有视觉障碍的用户提供帮助。;2.图像地图;图像地图创建步骤

步骤1选择要创建图像地图的图片。

步骤2在“属性”面板中，单击右下角的展开按钮。;步骤4创建“矩形”热点后，出现热点属性面板。在“链接”框中，输入其链接路径。在“目标”文本框中输入其名称，在“替换”框中输入替换文本。;调整热点大小

①使用指针热点工具选择一个热点。

②拖动热点选择器手柄，更改热点的大小或形状。;步骤4：“锚记名称”文本框中输入锚记名称，如“JianJie”,然后单击【确定】按钮建立锚点标记。

步骤5：重复步骤1～步骤4，在不同的主题内容处建立不同的锚点标记。;2．建立锚点链接;步骤3：为文档中为不同的对象建立锚点链接。;六、创建电子邮件链接;七、下载链接;八、空链接;九、脚本链接;十、创建鼠标经过图像;步骤3：单击“浏览”按钮，在“原始图像”文本框内插入主图像；在“鼠标经过图像”文本框内插入次图像，也可在“替换文本”框内输入替换的文本，在“按下时，前往的URL”框内输入链接地址。单击“确定”按钮。;十一、管理超链接;2.在整个站点范围内更改链接

除移动或重命名文件时让Dreamweaver自动更新链接之外，还可手动更改所有链接（包括电子邮件链接、FTP链接、空链接和脚本链接），使其指向其他某处。

操作步骤：

步骤1：在“文件”面板的“本地”视图中选择一个要替换掉的文件。如果更改的是电子邮件链接、FTP链接、空链接或脚本链接，则不需要选择文件。

步骤2：选择“站点”→