第3章 情景—— 建立某公司网站超级链接.ppt

第三章情景三 建立某公司网站超级链接 本章主要介绍了在DreamweaverCS5中如何创建 编辑超级链接 超级链接是网页设计的重要元素之一 通过超级链接用户可随意访问网站内 外的网页 也可以访问Internet网络上的各类信息 本章内容通过完成某公司网站的超级链接任务来学习 具体涉及以下内容 超级链接概念路径和URL超级链接的创建和编辑各类链接的使用 3 1任务一 在网页中使用超级链接 3 1 1知识要点1 超级链接概念超级链接就是实现文件和文件之间的相互访问 通过超级链接可以从一个网页指向另一个目标 超级链接由两部分组成 链接的载体和链接目标 载体可以是文本或媒体 目标可以是网页 图像 邮件地址 word文档或程序 通过超级链接可以将网站内 外的网页链接在一起 2 路径和URL表示链接目标的地址就是路径 超级链接的路径有三种 1 绝对路径 是链接目标的完整路径 包括使用的协议 例如 绝对路径通常用于站点外的文件链接 2 相对路径 是链接目标与源的相对目录关系路径 常用于同一站点内不同文件的链接 是Dreamweaver中默认的链接路径 如图所示 index html和gsjj html在同一级目录内 news html是在下级目录pages内 则index html连接到gsjj html的相对路径就是gsjj html 而index html连接到news html的相对路径就是pages news html news html连接到index html的相对路径就是 index htm 3 站点根目录相对路径 是从站点根目录开始的路径 与链接的源端位置无关 需要先配置站点的HTTP地址 用 表示站点根文件夹 URL UniformResourceLocator 统一资源定位符 是超级链接相互访问时标准的文件定位标示 其概念类似路径 但是它应用于网页的超级链接上 所以其写法有自己的规则 例如 3 创建超级链接链接的形式 链接有多种 按照功能可分为站点内链接 站点外链接 邮件链接 锚链接 热点链接 空链接和脚本链接等 在DreamweaverCS5中创建超级链接 先选择网页中的链接载体 文本或媒体 然后通过以下方法可以完成建立 方法一 在 属性检查器 中点击 链接 属性右面的 浏览文件 按钮 如图所示 在弹出的 选择文件 对话框中选择被链接的文档 如图所示 方法二 在 属性检查器 中直接拖曳 链接 右面的 指向文件 按钮到要链接的文件 如图所示 方法三 在 属性检查器 中的 链接 文本框中直接输入要链接的URL 例如要连接到 百度 网站 则在链接栏中输入 方法四 在 菜单栏 中选择 插入 超级链接 在弹出的 超级链接 对话框中的 文本 中输入的是链接的文字 在 链接 中输入或浏览链接的URL 如图所示 4 超级链接的修改和删除 1 超级链接目标属性链接的 属性检查器 中 目标 设定超级链接打开目标 下拉菜单中有五个选项表示文档打开的位置 如图所示 blank 表示每个链接都在新浏览器窗口打开 new 表示在同一个新的浏览器窗口打开 parent 表示如果有嵌套框架 则在父框架中打开 self 表示在当前网页的浏览器窗口打开 默认方式 top 表示在一个完整的浏览器窗口打开 2 修改超级链接超级链接创建完成后 若需要修改链接 在 修改 菜单中 选择 更改链接 命令 在弹出对话框中重新选择链接对象的路径 也可以在链接属性检查器中的 链接 栏中修改路径 可以选中超级链接 在 属性检查器 中重新设定超级链接 3 删除超级链接若要删除链接 则在 修改 菜单中 选择 删除链接 命令 可直接将链接删除 也可以在链接 属性检查器 中的 链接 属性中把路径删除 3 1 2工作任务与设计效果依据教材提供素材 利用网络资源制作所有 巨鑫房地产公司网站的页面超级链接 网站结构如图3 1 7所示 通过导航栏我们把站点内的网页链接起来 3 1 3建立站内链接先建立一个 巨鑫房产 站点 将教材中 素材3 文件夹中内容复制到站点根目录中 在Dreamweaver中打开网页index html 如图所示 1 设置首页与站点内其他页面的链接在index html页面的导航栏上选中 公司简介 图像 然后在 属性检查器 中拖曳 链接 属性右面的按钮到 文件 面板中的gsjj html网页 如图所示 这样就将公司首页和公司简介两网页链接起来了 按快捷键F12 可以在浏览器中预览链接的效果 用同样的方法可以将网站首页与其他的页面 公司规划 gsgh html 开发项目 kfxm html 企业合作 qyhz html 链接起来 2 设置站点内其他页面与首页的链接在Dreameaver中打开gsjj html 公司简介 页面 选择导航栏中 首页 图像 然后将 属性检查器 中 链接 属性右面的 指向文件 按钮拖曳到 文件 面板中的index html网页如图所示 这样就将公司简介与首页链接起来了 也可用其他两种方法链接 使用同样地方式将每个页面导航栏中的图像都连接到相应的网页 这样就可以从一个网页方便的连接到站点内的任何一个页面 3 1 4建立站外链接打开index html页面 在页脚处设置相关链接 搜狐 百度 网易 1 选中需要设置超级链接的文本 搜狐 2 打开 属性检查器 在 链接 属性中输入前往的URL 注意 书写URL的时候 前边一定要加上http等协议 3 如果需要将打开的超级链接显示到的新窗口中 在 属性检查器 中 目标 属性下 选择 blank 如图所示 使用同样地方法分别选中文本 百度 网易 在链接属性中输入URL 就可以链接到百度和网易网站了 3 1 5建立邮件链接首页页脚需要建立邮件链接 可以通过以下方法建立 方法1 将光标定位到需要插入电子邮件的位置 在 菜单栏 中选择 插入 电子邮件 在打开的对话框中设置文本和Email属性 单击确定按钮 如图所示 方法2 在Dreamweaver中打开index html页面 选中链接载体 导航栏中的 联系我们 在属性检查器的 链接 属性中输入 mailto nmgsm 注意 在邮件地址前加mailto 如图所示 建立邮件链接后 预览index html页面 点击导航栏中的 联系我们 弹出outlook 新邮件 对话框 可直接发邮件 如图所示 3 1 6建立锚链接锚链接是在网页内部不同位置的跳转 也可以链接到其他页面的某个位置 在Dreamweaver中打开news html页面 此页面内容较多 浏览时需要拖动滚动条 很不方便 我们可以在目录和内容之间建立锚链接 想浏览哪部分内容只需在目录上点击就连接到要预览的内容了 以下是具体步骤 1 在需要被链接的内容标题上插入锚点 具体操作在 菜单栏 中选择 插入 命名锚记 Ctrl Alt A 或在 插入栏 中单击命名锚记按钮 在弹出的 命名锚记 对话框中输入锚的名称 如图所示 2 选种目录中标题 链接载体 打开 属性检查器 拖动指向文件按钮 将箭头指向被链接的锚图标 如图3 1 16所示 同理可以将每个内容标题前面都命名一个锚 将他和目录标题都进行锚链接 这样浏览起来很方便 3 1 7超接链接的管理 1 链接内容的修改 选中设置好的超级连接 打开 属性检查器 在 链接 属性的文本框中进行修改 2 超接链接的删除 选中设置好的超级连接 打开 属性检查器 在 链接 属性的文本框中删除文本 当链接修改完之后 保存文件时 Dreamweaver中弹出更新链接的对话框以确保修改后链接的正确性 通常会单击 更新 如图所示 4 超接链接的检查 当链接的文件路径错误或文件丢失时 链接就会断开 Dreamweaver可以检查网页断开的链接并修复 打开 链接检查器 如图所示 点击断开链接文件右面的浏览文件按钮在弹出的对话框中重新选择链接目标 3 1 8工作任务总结在这个任务中利用DreamweaverCS5将已经编辑好的公司网站内的各网页之间链接起来 这个工作是网站编辑制作中最重要的任务之一 通过这个任务能够很好的训练各种超级链接的创建 修改等 3 2任务二 设置超级链接样式 3 2 1知识要点当网页中的内容设置了超级链接后会和普通文本的样式有很大差别 光标移到链接载体上时会变成 手 型 文本默认的超级链接样式是蓝色文字带下划线 拜访过的超级链接变为深紫色文字 这些样式都是可以根据自己的喜好在 页面属性 对话框中修改的 1 链接的四个状态链接颜色 没有被访问过的超级链接的色彩 也没有鼠标对其进行任何操做 变换图像颜色 鼠标放置到超级链接之上显示的色彩 已访问过链接 超级链接被访问过以后显示的色彩 活动链接 在超级链接上单击鼠标显示的色彩 2 下划线样式始终有下划线 始终无下划线 仅在变换图像时显示下划线 鼠标悬停在超级链接之上时显示下划线 在变换图像时隐藏下划线 鼠标悬停在超级链接之上时不显示下划线 3 2 2工作任务和设计效果本节工作任务是为上一节已经创建好超级链接的页面进行超级链接的样式设定 从而给超级链接个性化显示 其效果如图所示 3 2 3设置超级链接样式单击index html页面空白处 在 属性检查器 中单击 页面属性 按钮 在弹出的对话框中中进行设置 链接颜色为 666666 灰色 鼠标放到超级链接之上 颜色变为 ff0000 活动链接的颜色和鼠标经过相同 访问过的颜色为 666666 仅在变换图像时显示下划线样 可分别比对以下其他几种效果 设置完成后在浏览器中我们看到的文本是灰色的 鼠标移动到链接字体上就变成红色的 鼠标也变成 手 型 注意 上面只能设置 文本 的链接样式 若链接载体是图像 可以利用 鼠标经过图像 特效制作导航条 见第二章的插入图像对象内容 更多的链接样式设置在可以使用后续章节中介绍的CSS技术进行设置 3 2 4工作任务总结本节的任务主要训练如何设定网页中超级链接的样式 在网页中有四种状态 链接 link 变换图像 hover 活动 active 访问过 visited 一般设置link状态样式要与hover状态样式有明显区别 才会是浏览器中的链接时具有动态效果 设置好的链接样式可以使导航一目了然 方便用户的使用 3 3其他超接链接1 空链接在 属性检查器 的 链接 属性中输入 空链接是激活网页某对象的 可以为他添加一个链接的动作 在浏览器中点击链接时并不链接到新的网页 一般网站首页导航栏的首页链接就可是空链接 很多情况下不明确的链接目标可以使用空连接临时代替 2 脚本链接在 链接 属性中输入 Javascript 脚本命令 可通过链接触发脚本命令 以下给出了几个常见的脚本链接命令 1 关闭窗口 javascript window close 效果如图所示 2 弹出提示对话框 javascript alert 欢迎光临 效果如图所示 3 添加到收藏夹 javascript window external addFavorite 收藏网页的URL 4 设置为默认主页 通过空链接 触发onclick事件 onclick this style behavior url default homepage this sethomepage 网页的URL 3 热点链接 在图像的 属性检查器 中有矩形 圆形和多边形的热点工具 可以在一张图像上绘制出不同的热点区域 设置多个超级链接 具体设置链接的步骤 1 在 属性检查器 中选择矩形热点工具 在图像上拖曳绘制出热点区域 如图所示 2 选中热点区 在 属性检查器 的 链接 属性中设置 超级链接 路径 如图所示 3 若热点区域