第六章设置超链接.ppt

第六章 创建超级链接 （一） 主讲人：陈恒岳 新课导入 同学们有没有看过“天龙八部”啊？ 那还记得“天龙八部”中段誉会的那种武功吗？ 本节课任务 巩固表格布局方法。 理解链接的概念，包括URL、绝对路径和相对路径。 掌握文档或图片链接、空链接、脚本链接的创建方法。 掌握超级链接的目标窗口及文本提示的设置方法。 超级链接简介（演示案例） 作用：超级链接将许许多多毫无关联的网页通过文字、图片、flash等元素联系起来。用户只需轻点鼠标便可访问链接的网页。 类型：按照链接目标路径分为：外部链接和内部链接。 文档、图片链接：实现页面的跳转； 书签链接：可以根据用户需求只浏览其感兴趣的内容，而不是浏览 页面中的所有内容； 电子邮件链接：可以添加在图片上或文本上，方便用户直接打开电子邮件应用程序，如outlook。并在收件人位置上显示设置好的地址，方便用户发送邮件，建立联系。 空链接：它不会跳转到其他页面，但可以读取某些javascript事件，或当网页内容较多时，可以为网页添加“返回页首”的链接。 脚本链接：通过执行javascript代码或调用javascript函数，实现表单验证等任务。 URL（统一资源定位符）地址解析 同学们，老师要是要你们打开咱们学校的网址，你会怎么做？ 做法：百度中搜索“中山中专”或直接在浏览器地址栏中输入http://zszz.zszz/client/web1/index.ASP URL格式：协议://计算机名:端口/文件目录/文件名 URL各部分含义 以“http://zszz.zszz/client/web1/index.ASP”为例解释各个部分的含义。 协议：指文件访问类型：如http表示超文本协议，ftp表示文件传输协议； 计算机名：web页所在服务器域名，对应本例中的zszz.zszz； 端口：服务器端口，本例中没有就是默认值80； 文件目录：服务器上该网页的路径，对应本例中的/client/web1； 文件名：网页对应的文件名，对应本例中的index.ASP； 【小贴士】站点中的路径和文件名中只能使用字母、数字、连字符和下划线。 绝对路径和相对路径 绝对路径：是包含服务器协议的完全路径。若创建对当前站点以外的文件链接时必须使用绝对路径，例如链接到：http://zszz.zszz/client/web1/index.ASP； 相对路径：一般的，站点内的链接都是使用相对路径，使用相对路径方便站点的移植。 相对路径引用方法 同一个目录的文件引用 如果源文件和引用文件在同一个目录里，直接写引用文件名即可。 如index.html表示当前文件夹中内的页面。 如何表示上级目录 ../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。 如../index.html表示当前文件夹的上级目录下的index.html页面 如何表示下级目录 引用下级目录的文件，直接写下级目录文件的路径即可。 如files/jdjs.html表示当前文件夹下files文件夹中的文档。 活动一：用不同的方式链接网页 活动引导： 一、新建站点及相关网页。 二、通过网页属性，设置链接文字属性。 三、设计网页布局。 四、使用多种方法设置超级链接。 五、设置超级链接的目标窗口和文本提示。 备注：学生自行完成活动的前四个任务 活动一：总结链接创建方法 1）直接点击属性面板中的“浏览文件”按钮，选取链接的网页； 2）选中文字，按住shift键，拖动到站点窗口的目标文件，这种方法只应用于文字，图片链接则不行； 3)按住属性面板中的“指向文件”，拖动到站点窗口的目标文件。 超级链接的目标窗口 超级链接的文本提示 “文本提示”就是当用户鼠标移到某个超级链接上，会弹出的文本。 添加方法：选中文本或图片，按住ctrl+T打开标签编辑器，选择“编辑标签”模式，如果不是，可按住ctrl+T进行切换，在标签a后面添加title属性，输入“title=相应文本提示” 活动二：巧用无址链接和脚本链接 任务一：为页面jdjs.html中“返回”设置空链接，实现返回页首效果。 方法：选中“返回”，在属性面板中“链接”域中输入“#”，“目标”下来菜单中选取“_top”。 任务二：为页面index.html设置脚本链接，实现点击logo弹出对话框“欢迎光临四川旅游网”。 方法：选中logo“四川旅游网”，在属性面板的“链接”域中输入“javascript:alert(‘欢迎光临四川旅游网’)” 课堂练习