《设置超链接》PPT课件.ppt

第六章 创建超级链接 （一）,主讲人：陈恒岳,新课导入,同学们有没有看过“天龙八部”啊？ 那还记得“天龙八部”中段誉会的那种武功吗？,凌波微步的特点：快速从一个地方到另一个地方。,“凌波微步”,超级链接,设置超级链接,本节课任务,巩固表格布局方法。 理解链接的概念，包括URL、绝对路径和相对路径。 掌握文档或图片链接、空链接、脚本链接的创建方法。 掌握超级链接的目标窗口及文本提示的设置方法。,作用：超级链接将许许多多毫无关联的网页通过文字、图片、flash等元素联系起来。用户只需轻点鼠标便可访问链接的网页。 类型：按照链接目标路径分为：外部链接和内部链接。 文档、图片链接：实现页面的跳转； 书签链接：可以根据用户需求只浏览其感兴趣的内容，而不是浏览 页面中的所有内容； 电子邮件链接：可以添加在图片上或文本上，方便用户直接打开电子邮件应用程序，如outlook。并在收件人位置上显示设置好的地址，方便用户发送邮件，建立联系。 空链接：它不会跳转到其他页面，但可以读取某些javascript事件，或当网页内容较多时，可以为网页添加“返回页首”的链接。 脚本链接：通过执行javascript代码或调用javascript函数，实现表单验证等任务。,超级链接简介（演示案例）,内部链接,URL（统一资源定位符）地址解析,同学们，老师要是要你们打开咱们学校的网址，你会怎么做？ 做法：百度中搜索“中山中专”或直接在浏览器地址栏中输入http:/zszz.zszz/client/web1/index.ASP URL格式：:/:/,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)按住属性面板中的“指向文件”，拖动到站点窗口的目标文件。,超级链接的目标窗口,_blank：在新的窗口中打开 _parent：如果是嵌套的框架，链接会在父框架或窗口中打开，如果不是嵌套的框架，就等于_top，在整个浏览器中显示目标网页。 _self：在当前框架或窗口打开，浏览器默认值。 _top：取消所有框架，将网页在整个窗口中打开。 说明：后三种在第七章我们学习框架后，大家会更好的理解其含义及效果。,超级链接的文本提示,“文本提示”就是当用户鼠标移到某个超级链接上，会弹出的文本。 添加方法：选中文本或图片，按住ctrl+T打开标签编辑器，选择“编辑标签”模式，如果不是，可按住ctrl+T进行切换，在标签a后面添加title属性，输入“title=相应文本提示”,活动二：巧用无址链接和脚本链接,任务一：为页面jdjs.html中“返回”设置空链接，实现返回页首效果。 方法：选中“返回”，在属性面板中“链接”域中输入“#”，“目标”下来菜单中选取“_top”。 任务二：为页面index.html设置脚本链接，实现点击logo弹出对话框“欢迎光临四川旅游网”。 方法：选中logo“四川旅游网”，在属性面板的“链接”域中输入“javascript:alert(欢迎光临四川旅游网)”,课堂练习,选择题： 制作外部链接，使用（ ）； 制作内部链接，使用（ ）。 A 绝对路径；B 相对路径 填空题：/CLIENT/WEB1/sub_zsjy/index.asp，该URL的协议是_计算机名是_，文件路径是_，文件名是_,A,B,http,,CLIENT/WEB1/sub_zsjy,index.asp,课堂练习,操作题： 1、 在首页index.html中右上方输入“关闭窗口”，通过设置脚本链接关闭窗口，关闭窗口的代码：“javascript:window.close()” 2、 完善四川旅游网中的空白页内容，并完成未完成的链接。并上交作业。,小结,超级链接作用：将网站中的各个组成部分链接成一个整体 URL格式：:/:/ 绝对路径：是包含服务器协议的完全路径 相对路径：一般的，站点内的链接都是使用相对路径 各种相对路径引用方法： 同一个目录的文件，直接写引用文件名即可。 如何表示上级目录 /表示源文件所在目录的上一级目录，/表示源文件所在目录的上上级目录，以此类推。 如何表示下级目录：直接写下级目录文件的路径即可。 链接创建方法 目标窗口及文本提示的设置方法 无址链接与脚本链接设置方法,活动三：给网页添加邮件链接和书签链接,邮件链接设置方法（教师演示） 方法一：选取该文本执行“插入/电子邮件链接”命令，在打开的对话框中输入Email地址，单击“确定”按钮。 方法二：选中文本或图片，在属性面板中“链接”栏中输入“mailto:Email地址”。 “mailto:?subject=你好&cc=”。 subject=邮件主题； cc=要抄送的电子邮件地址； 其中？表示分隔符，&表示连接。,活动三：给网页添加邮件链接和书签链接,书签链接设置方法（教师演示） 方法步骤： scjd.html页面中的操作：定位插入/命名锚记命名锚记选中标题在属性面板的“链接”域中输入“#书签名” index.html 页面中：选中景点设置矩形热点在属性面板的“链接”域中输入files/jdjs.html#书签名 【小贴士】设置链接页面时，当前网页与链接页面不在同一路经时，输入格式为“路径+文件名+#+书签名”，为了避免错误，可以先利用“浏览文件”按钮，现在链接文件，然后在文件名后加上“#书签名”即可。,活动三小结：,【小贴士】 在制作邮件链接时，注意链接的书写格式为“mailto:邮件地址?subject=邮件主题&cc=抄送地址”。 在制作锚点链接时，注意链接的书写格式为“路径+文件名+#+书签名”。,活动四：管理站点链接资源,掌握站点链接资源的管理方法。,教学目标：,知识要点:,选项、“收藏”选项。,准备知识： （1）“站点”选项 （2）“收藏”选项,“资源”面板,刷新站点列表,“收藏”选项,活动四：管理站点链接资源,活动引导： 一、“站点”选项的设置 二、“收藏”选项的设置,活动四：管理站点链接资源,活动小结: 在本活动中我们对站点中的链接通过“资源”面板进行了编辑、管理。通过本活动主要让我们对“资源”面板中的一些常用按钮有所熟悉。,活动四：管理站点链接资源,为某网页中的文字设置邮件链接，并链接“”。 要求：为某网页中的文字设置邮件链接，并链接，同时自动填写主题“咨询问题”。 问：创建不同锚点链接的步骤是什么： 答： 在原始页面创建命名锚点 进入目标页面 创建到命名锚点的链接,第六章