007超级链接和站点导航

Dreamweaver——《Dreamweaver

8

实训教程》讲义第7章超级链接和站点导航重点内容：

超级链接的创建CSS样式改变超级链接样式添加导航条1Dreamweaver应用技术——《Dreamweaver

8

实训教程》讲义一、超级链接的创建：1.创建文本超级链接默认情况下，为文字设置链接属性后，该文字的颜色会变为蓝色，且被添加下画线。2Dreamweaver应用技术——《Dreamweaver

8

实训教程》讲义一、超级链接的创建：1.创建文本超级链接

在Dreamweaver中为文字添加超链接的方法有以下3种：（1）直接在【链接】文本框中输入链接目标。（2）单击【链接】文本框右侧的文件夹图标，从弹出的对话框中选择链接目标。（3）将【链接】文本框右侧的【指向文件】图标拖动至【文件】面板中要链接的对象上，然后松开鼠标键。3Dreamweaver应用技术——《Dreamweaver

8

实训教程》讲义一、超级链接的创建：2.创建图像超级链接为选定的整幅图像创建单独的超级链接：（1）在属性检查器的【链接】文本框中输入链接目标。（2）单击【链接】文本框右侧的文件夹图标，从弹出的对话框中选择链接目标。（3）将【链接】文本框右侧的【指向文件】图标拖动至【文件】面板中要链接的对象上。4Dreamweaver应用技术——《Dreamweaver

8

实训教程》讲义一、超级链接的创建：2.创建图像超级链接为图像的一部分添加超级链接：先用属性检查器中的热点工具为图像区域设置热点，然后用属性检查器为热点设置超级链接。（1）椭圆形热点（2）矩形热点（3）不规则形状热点5Dreamweaver应用技术——《Dreamweaver

8

实训教程》讲义一、超级链接的创建：3.创建E-mail超级链接将插入点放置在所需位置，或者选择相应的载体，然后单击【插入】工具栏【插入】类别中的【电子邮件链接】按钮，弹出【电子邮件链接】对话框，输入链接文本（如果没有事先选中的话）和自己的E-mail地址。【电子邮件链接】对话框6Dreamweaver应用技术——《Dreamweaver

8

实训教程》讲义一、超级链接的创建：4.使用锚记创建锚记单击【插入】工具栏【常用】类别中的【命名锚记】按钮，或者选择【插入】|【命名锚记】命令，弹出【命名锚记】对话框。在【锚记名称】文本框中输入锚记的名称。【命名锚记】对话框7Dreamweaver应用技术——《Dreamweaver

8

实训教程》讲义一、超级链接的创建：4.使用锚记锚记的命名规则（1）锚记名称的第1个字符最好是英文字母，一般不要以数字作为开头（如果服务器支持的话，锚记名称也可以使用中文）。（2）锚记名称区别英文字母的大小写。（3）锚记名称中不能含有空格，也不能含有特殊字符。8Dreamweaver应用技术——《Dreamweaver

8

实训教程》讲义一、超级链接的创建：4.使用锚记链接锚记（1）选择要链接到锚记的文字或图片，拖动属性检查器中的【指向文件】按钮，指向已创建的锚记。（2）在属性检查器中的【链接】文本框中输入“#锚记名称”。9Dreamweaver应用技术——《Dreamweaver

8

实训教程》讲义一、超级链接的创建：4.使用锚记创建锚记时的注意事项（1）若要链接到当前文档中某个锚记，应输入“#锚记名”，其中#为半角数字符号，且在#和锚记名之间不存在空格。（2）若要链接到同一文件夹内其他文档中的某个锚记，应输入“文档名#锚记名”。（3）若要链接到父目录中文件的某个锚记，使用相对路径就可以实现，即输入“../文件名#锚记名”。（4）若要链接到某根目录下的文件中的某个锚记，需要使用绝对路径，即输入“驱动器/文件名#锚记名”。10Dreamweaver应用技术——《Dreamweaver

8

实训教程》讲义二、通过CSS样式改变超级链接样式：

选择【文本】|【CSS样式】|【新建】命令，弹出【新建CSS规则】对话框，在【选择器类型】选项组中单击【高级】单选按钮，然后在【选择器】下拉列表框中选择要设置的文本超级链接的状态，单击【确定】按钮后，即可在弹出CSS样式定义对话框中指定文字超级链接的CSS样式。【新建CSS规则】对话框11Dreamweaver应用技术——《Dreamweaver

8

实训教程》讲义三、添加导航条：

1.插入导航条选择【插入】|【图像对象】|【导航条】命令，或者单击【插入】工具栏【常规】类别中的【图像】按钮，从弹出的下拉菜单中选择【导航条】命令，弹出【插入导航条】命令，根据需要设置其中的选项，即可创建导航条。12Dreamweaver应用技术——《Dreamweaver

8