网页设计与制作6.ppt

通过本章学习 应该掌握以下内容 认识超链接利用DreamweaverMX创建各种超连接的方法利用DreamweaverMX编辑各种超连接的方法利用HTML创建 编辑超链接的方法利用站点地图管理超链接的方法 第6章在网页中使用超链接 1 利用DreamweaverMX处理超链接2 利用HTML创建超链接3 利用站点地图管理超链接 6 1利用DreamweaverMX处理超链接 6 1 1超链接简介 1 什么是超链接 所谓的超链接是指从一个网页指向一个目标的连接关系 这个目标可以是另一个网页 也可以是相同网页上的不同位置 还可以是一个图片 一个电子邮件地址 一个文件 甚至是一个应用程序 而在一个网页中用来超链接的对象 可以是一段文本或者是一个图片 当浏览者单击已经链接的文字或图片后 链接目标将显示在浏览器上 并且根据目标的类型来打开或运行 按照链接路径的不同 网页中超链接一般分为以下3种类型 内部链接 即在同一个站点内的不同页面之间相互联系的超链接 锚点链接 可以链接到网页中某个特定位置的链接 外部链接 把网页与Internet中的目标相联系的链接 如果按照使用对象的不同 网页中的链接又可以分为 文本超链接 图像超链接 E mail链接 锚点链接 多媒体文件链接 空链接等 合理安排超链接在网页的制作中是非常重要的 采用什么结构的链接会直接影响到网页的布局 建议 避免孤立文件的存在在网页中避免使用过多的超链接网页中的超链接不要超过4层页面较长时可以使用书签设置主页或上一层的链接 2 合理安排超链接 3 文档路径类型 在一个网站中 有绝对路径 和根目录相对路径以及和文档相对路径3种类型的文档路径 绝对路径 是包含服务器协议 对于网页来说通常是http 或ftp 的完全路径 和根目录相对的路径 是从当前站点的根目录开始的路径 站点上所有可公开的文件都存放在站点的根目录下 和文档相对的路径 是指和当前文档所在的文件夹相对的路径 6 1 2创建文本超链接 1 建立文本超链接 在浏览网页时 鼠标指针经过某些文本时 指针的形状发生变化 同时文本也会发生变化 如出现下划线 文本的颜色发生变化 字体发生变化等 提示这是带链接的文本 此时点击鼠标 就会打开所链接的网页 这就是文本超链接 在DreamweaverMX中创建文本超链接的步骤为 1 在网页上选择需要添加超链接的文本 打开文本的属性面板 2 在属性面板上指定文字的链接目标 3 在 目标 下拉列表框中选择目标文件打开的方式 设置结束后 在网页中被选择的文字改变了颜色 且在文字底部出现一条下划线 即文字的超链接设置完成 在键盘上按 F12 键 即可将网页在浏览器中打开 单击链接的文字 即可打开目标文件 2 编辑文本超链接 1 设置文本链接的状态一个未被访问过的链接与一个被激活的链接在形式上肯定会有所区别 链接被访问过了也会发生变化 提示用户这是一个已经点击过的链接 所有这些都是链接的状态 通过设置不同的文本颜色可以使各个状态区别开来 2 删除文本超链接在DreamweaverMX中要删除一个文本超链接很容易 先用鼠标选定文本对象 将光标定位于属性面板的 链接 文本框中 用 BackSpace 键或 Delete 键 将其显示的超链接对象文件名删除 再回车 或选择 修改 移除链接 命令 都可以删除超链接而保留原文本对象 1 创建图像超链接 6 1 3创建图像超链接 给图像添加链接 使其指向其他的网页或者文档 就是图像超链接 1 选中需要建立超链接的图像 此时属性面板显示图像的属性 2 在属性面板中为图像添加文档相对路径的链接 3 按 F12 预览网页 2 删除图像超链接 删除图片超链接与删除文本超链接的方法相同 锚记 也称为书签或锚点 用来标记文档中的特定位置 使用其可以跳转到当前文档或其他文档中的标记位置 免去浏览者翻阅网页寻找信息的麻烦 在网页中加入锚记包括两方面的工作 一是在网页中创建锚记 另一个就是为锚记建立链接 6 1 4创建锚记超链接 创建锚记的步骤如下 1 将光标移到需要加入锚记的地方 一般是将光标放置在一行或是一段文字的开头部分 2 单击插入 常用 面板上的按钮 或是选择主窗口的菜单 插入 命名锚记 命令 将弹出 命名锚记 对话框 3 在对话框的 锚记名称 文本框输入锚记的名称 4 单击 确定 按钮 1 创建锚记 在命名锚记时 必须遵循以下规定 只能使用字母和数字 锚记命名不支持中文 虽然在插入锚记对话框中能输入中文 但在属性面板上显示的则是一堆乱码 且在为锚记添加链接的时候 也无法工作 锚记名称的第1个字符最好是英文字母 一般不要以数字作为锚记名称的开头 锚记名称区别英文字母的大小写 锚记名称间不能含有空格 也不能含有特殊字符 创建锚记后 还必须链接锚记 选择想要链接到锚记的文字或图片 然后按如下方法中的任意一种进行操作 2 链接锚记 1 在属性面板上的 链接 文本框中输入符号 和锚记名称 2 选择文字或图片后 按住Shift键 然后拖动鼠标指向锚记 3 按住属性面板上的 指向文件 按钮 并拖动鼠标指向锚记 在链接锚记时 应注意以下事项 在 和锚记名之间不要留有空格 否则链接会失败 在不同文件夹中为锚记创建链按时 其文件名后缀必定是 htm 而不能写成 html 否则链接也会失败 符号 必须是半角符号 而不能为全角符号 如果希望浏览者在浏览网页时 只要浏览者单击E mail链接时 就会在浏览端自动打开浏览器默认的E mail处理程序 收件人的地址将会被E mail超链接中的指定地址自动装入 无需浏览者输入 就需要创建电子邮件链接 6 1 5创建电子邮件超链接 创建电子邮件链接的步骤如下 1 将光标置于网页中要添加E mail链接的地方 或选中文字 通过插入 常用 面板上的 电子邮件链接 按钮 或通过主窗口菜单 插入 电子邮件链接 命令 将弹出 电子邮件链接 对话框 2 如果未选中文字 可以在 文本 文本框中添加所需文字 如果已经选中超链接文字 将会在 文本 文本框中自动显示 然后在 E mail 文本框中输入E mail地址 单击 确定 按钮 就可以了 如果想让网站提供文件下载的功能 就必须建立下载文件超链接 实现文件下载的功能很简单 只需加入连接到文件的超链接就可以了 连接到网站中下载文件的超链接也算是内部超链接中的一种 创建下载文件超链接的方法如下 首先选择主窗口的菜单 站点 站点文件 命令 打开站点窗口 找到需要链接的目标文件 然后选择网页中需建立超链接的文字 按下 Shift 键拖动鼠标到站点窗口中的目标文件 6 1 6创建下载文件超链接 空链接是一个未指定目标的链接 DreamweaverMX的行为面板中列出了许多行为 这些行为相当于使用JavaScript编写的程序或函数 要想对文本设置行为 首先为文本建立空链接 这样行为才有效 为文本建立空链接时 只要先在文档窗口选定文本 然后在属性面板中的 链接 栏中输入一个数值符 即可 建立空链接的目的就是为了应用行为 其他情况下不必建立空链接 6 1 7创建空链接 用HTML创建超链接需要使用A标记符 结束标记符不能省略 它的最基本属性是href 用于指定超链接的目标 通过为href指定不同的值 可以创建出不同类型的超链接 另外 在和之间可以用任何可单击的对象作为超链接的源 例如文字或图像 链接图像即加入标记 6 2利用HTML创建超链接 6 2 1页面链接 href的值 href的值可以是URL形式 即网址或相对路径 语法为 这就能创建一个超文本链接了 例如 这是我的网站 还具有target属性 此属性用来指明浏览的目标帧如果不使用target属性 当浏览者点击了链接之后将在原来的浏览器窗口中浏览新的Html文档 若target的值等于 blank 点击链接后将会打开一个新的浏览器窗口来浏览新的Html文档 例如 这是我的网站 如果要设置锚记超链接 首先应为页面中需要跳转到的位置命名 命名时应使用A标记符的name属性 在标记符与之间可以包含内容 也可以不包含内容 例如 可以在页面开始处用以下HTML语句进行标记 目录对页面进行标记之后 就可以用A标记符设置指向这些标记位置的超链接 如果在页面开始处标记了 top 则可以用以下HTML语句进行链接 返回目录 6 2 2锚记链接 标记对要结合标记对使用才有效果 标记对用来在Html文档中创建一个标签 即做一个记号 属性name是不可缺少的 它的值也即是标签名 例如 此处创建了一个标签创建标签是为了在Html文档中创建一些链接 以便能够找到同一文档中的有标签的地方 要找到标签所在地 必须使用标记对 例如要找到 标签名 这个标签 编写代码 点击此处将使浏览器跳到 标签名 处注意 href属性赋的值若是标签的名字 必须在标签名前边加一个 号 如果将href属性的取值指定为 mailto 电子邮件地址 那么就可以获得电子邮件链接的效果 例如 使用以下HTML代码可以设置电子邮件超链接 作者邮箱当浏览网页的用户单击了指向电子邮件的超链接后 系统将自动启动邮件客户程序 并将指定的邮件地址填写到 收件人 栏中 用户可以编辑并发送该邮件 6 2 3电子邮件链接 利用站点地图建立网页间的超链接的步骤如下 1 在菜单栏中单击 站点 站点地图 或按Alt F8组合键打开站点窗口 按F8键 可快速打开Site窗口 2 选中需要链接的文件 比如index htm 在鼠标右键快捷菜单中选择 链接到新文件 或 链接到已有文件 即可建立网页间的超链接 6 3利用站点地图管理超链接 6 3 1建立网页间的超链接 对于不需要的链接关系 在站点地图的树状结构上可以非常轻松地解除 解除超链接的步骤如下 1 树状结构上选择要解除链接关系的对象图标 2 在右键快捷菜单中选择 移除链接 命令 即可解除网页间的超链接 6 3 2解除网页间的超链接 在 站点 浮动面板的站点地图上更改文件的名称与Windows下的操作基本相同 1 首先单击选中欲更改名称的文件 2 再次单击该文件的文件名 输入新的文件名后按一下回车键即可 3 当文件被更名后 系统会弹出 更新文件 对话框 询问站点中被链接的网页名称是否也作修改 4 在该对话框中单击 更新 按钮即可完成操作 6 3 3更新超链接 DreamweaverMX提供 结果 浮动面板组 除了具有检查浏览器兼容性 代码兼容性等强大功能外 还可以利用它来检查甚至修改站点中的超链接 6 3 4检查超链接 可以在DreamweaverMX的 站点 浮动面板上选择 文件 检查链接 命令 在打开的下拉菜单中选择 为整个站点检查链接 命令 1 自动对整个站点的超链接情况进行检查 如果在 链接检查器 浮动面板的 显示 标识符后的下拉列表框中选择 断掉的链接 选项 则DreamweaverMX将自动列出网站中所有的断掉的链接 2 修复站点中的超链接 如果在 结果 面板中 链接检查器 选项卡的 显示