第四次课建立网页链接ppt课件

第四单元建立网页链接 本章重点 内部链接 外部链接 锚点链接 E mail链接的创建方法 第四单元建立网页链接 4 1超链接概述4 2文本及图片超链接 时尚精品4 3其他超链接4 4实战演练 上网导航 4 1超链接概述 4 1 1超链接的类型 按源端点不同 文本超链接以文本作为超链接源端点图像超链接以图像作为超链接源端点表单超级链接以表单作为源端点 4 1超链接概述 4 1 1超链接的类型 按目标端点不同 内部链接这种链接的目标端点是本站中的其他文档 利用这种链接 可以跳转到本站点其他的页面上 外部链接这种链接的目标端点是本站点之外的站点或文档 利用这种链接 可以跳转到其他的网站上 4 1超链接概述 4 1 1超链接的类型Email链接单击这种链接 可以启动电子邮件程序书写邮件 并发送到指定的地址 锚点链接这种链接的目标端点是文档中的命名锚记 利用这种链接 可以跳转到当前文档中的某一指定位置上 也可以跳转到其他文档中的某一指定位置上 4 1超链接概述 4 1 2链接路径 1 绝对路径 如果在链接中使用完整的URL地址 这种链接路径就称作绝对路径 路径同链接的源端点无关 2 相对路径 相对路径可以表述源端点同目标端点之间的相互位置 它同源端点的位置密切相关 3 基于目录的路径 所有的路径都是从站点的根目录开始的 它同源端点的位置无关 通常用一个斜线 表示根目录 4 1超链接概述 4 1 3创建超链接在文档窗口中选中想作为链接的文本或图片在属性面板链接一项的空白处填入链接的路径 或者单击图标 在弹出的 选择文件 对话框中 选定要链接的文档及采用哪种方式表达路径 链接的对象可以是多样的 如图片文件 电子表格 或者某个网站 4 2文本及图片超链接 时尚精品 4 2 1案例综述 素材 超链接的制作 4 2文本及图片超链接 时尚精品 4 2 1案例分析为实现网页的跳转 将创建 到网站内页面的超链接 内部链接 到网站外页面的超链接 外部链接 链接的源点为文本和图像 4 2文本及图片超链接 时尚精品 4 2 1实现步骤一 准备网页内容步骤1创建一个站点 步骤2将素材文件夹中的相关文档复制到站点文件夹下 二 创建超链接 1 创建内部链接 网站内部页面之间创建相互链接关系步骤1选中页面中的文字或图像 在属性面板中单击 链接 文本框右侧的文件夹图标 以通过浏览选择一个文件步骤2从 目标 下拉菜单中 选择文档的打开位置 blank 新打开的空窗口 parent 如果是嵌套的框架 则在父框架中打开 self 会在当前网页所在的窗口或框架中打开 top 会在完整的浏览器窗口中打开 4 2文本及图片超链接 时尚精品 2 创建外部链接 创建链接到绝对地址的外部链接选中文字或图像之后 直接在属性面板的 链接 文本框中输入外部的链接地址 如然后在 目标 下拉菜单中设置这个链接的目标窗口 4 2文本及图片超链接 时尚精品 4 3 1案例综述 4 3其他超链接 电子邮件超链接 素材 制作特殊的文本超级链接 创建E mail链接 当浏览者单击电子邮件链接时 可即时打开浏览器默认的电子邮件程序处理程序 方法 选中文本和图像插入栏 常用 电子邮件链接 输入邮件地址或在属性面板的链接栏中直接输入mailto 邮件地址 4 3其他超链接 电子邮件超链接 4 3 1案例综述 4 3其他超链接 图像地图 素材 单击特定部分时可以移动的图像映射 创建图片热点 当浏览者单击图片某一处时 可即时链接到其他页面 方法 选中图像 点击属性面板中热点工具按钮按住鼠标左键在图片上绘制出一个区域或在属性面板的链接栏中设置链接地址 目标窗口和替换文本 4 3其他超链接 图像地图 案例综述 4 3其他超链接 锚记超链接 素材 可以移动到希望位置的锚记功能 锚点链接 是指同一个页面中的不同位置链接 分为两步 创建命名锚记 就是在文档中设置位置标记 并给该位置一个名称 以便引用 创建到命名锚记的链接 4 3其他超链接 锚记超链接 创建命名锚记将光标定位在要设置标记的位置 插入栏 命名锚记 输入锚记名称 注意 区分大小写 创建到命名锚记的链接选择要创建链接的文本或图像在属性面板的链接文本框中 键入 号和锚记名称或在浏览对话框中 选中要链接的文件后加 和锚记名称 4 3其他超链接 锚记超链接 4 3其他超链接 空链接和脚本链接 案例综述 素材 创建空链接和脚本链接 创建空链接空链接用来激活页面中的对象或文本 当文本或对象被激活后 可以为之添加行为 方法 选中要制作空链接的对象 在链接文本框中直接输入 在一般站点首页的导航栏中的首页链接 就可以是一个空链接创建脚本链接JavaScript代码p90 4 3其他超链接 空链接和脚本链接 4 3其他超链接 鼠标经过图像 案例综述 素材 鼠标滑过时发生变化的滚动菜单 鼠标经过图像图片随着鼠标的移动发生变化方法 1 插入 常用 鼠标经过图像2 在插入鼠标经过图像对话框中选择原始图像和鼠标经过图像以及替换文本 3 输入按下时 前往的URL 4 3其他超链接 鼠标经过图像 插入导航条导航条中按钮图像的状态根据浏览者的鼠标动作而改变 方法 1 将光标放到要插入导航条的位置 2 选择插入 图像对象 导航条