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

第六章 创建超级链接（一）,主讲人：陈恒岳,新课导入,同学们有没有看过“天龙八部”啊？那还记得“天龙八部”中段誉会的那种武功吗？,凌波微步的特点：快速从一个地方到另一个地方。,“凌波微步”,超级链接,设置超级链接,本节课任务,巩固表格布局方法。理解链接的概念，包括URL、绝对路径和相对路径。掌握文档或图片链接、空链接、脚本链接的创建方法。掌握超级链接的目标窗口及文本提示的设置方法。,作用：超级链接将许许多多毫无关联的网页通过文字、图片、flash等元素联系起来。用户只需轻点鼠标便可访问链接的网页。类型：按照链接目标路径分为：外部链接和内部链接。文档、图片链接：实现页面的跳转；书签链接：可以根据用户需求只浏览其感兴趣的内容，而不是浏览 页面中的所有内容；电子邮件链接：可以添加在图片上或文本上，方便用户直接打开电子邮件应用程序，如outlook。并在收件人位置上显示设置好的地址，方便用户发送邮件，建立联系。空链接：它不会跳转到其他页面，但可以读取某些javascript事件，或当网页内容较多时，可以为网页添加“返回页首”的链接。脚本链接：通过执行javascript代码或调用javascript函数，实现表单验证等任务。,超级链接简介（演示案例）,内部链接,URL（统一资源定位符）地址解析,同学们，老师要是要你们打开咱们学校的网址，你会怎么做？做法：百度中搜索“中山中专”或直接在浏览器地址栏中输入http:/zszz.zszz/client/web1/index.ASPURL格式：:/:/,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 相对路径填空题：，该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）“收藏”选项,“资源”面板,刷新站点列表,“收藏”选项,活动四：管理站点链接资源,活动引导：一、“站点”选项的设置 二、“收藏”选项的设置,活动四：管理站点链接资源,活动小结:在本活动中我们对站点中的链接通过“资源”面板进行了编辑、管理。通过本活动主要让我们对“资源”面板中的一些常用按钮有所熟悉。,活动四：管理站点链接资源,为某网页中的文字设置邮件链接，并链接“”。要求：为某网页中的文字设置邮件链接，并链接，同时自动填写主题“咨询问题”。问：创建不同锚点链接的步骤是什么：答：在原始页面创建命名锚点进入目标页面创建到命名锚点的链接,第六章实验：制作“庐山风景”网站,实验要求：一、建立站点目录mysitelx，并将站点指定至站点目录。二、绘制布局表格和布局单元格。三、制作网页“庐山风景”，在网页中加入相应文字及图像。四、制作网页中的各种链接，其中包括文字链接、图像 链接、锚点链接、邮件链接等。注意：本实验提供的样例仅供参考，也许你能设计出别具一格的网页,第六章实验：制作“庐山风景”网站,网页效果,