《网页设计与制作》课件-项目四 任务一 网页中常见的超级链接

Dreamweaver网页制作基础教程项目四为新闻页添加链接核心技术了解网页中各种链接形式掌握各种链接的创建方法任务目标任务一：网页中常见的超级链接任务二：创建不同的超级链接任务三：管理站点导航资源能力目标

网页中各种链接形式各种链接的创建方法不同类型的超级链接代码项目背景某公司招聘网页设计师，需要经过技能考试竞争上岗，要求利用Dreamweaver软件完成“校园新闻”及“校园之星”网页的制作。“校园新闻”网页要求图文并茂，可实现网页之间的跳转。各位应聘人员在规定的时间内完成本项目制作，择优录用。项目分析本项目包含了各种超级链接，如内部超级链接、外部超级链接、空链接和脚本链接、E-mail链接等。（1）内部超级链接：文本链接的网页文件均在本地站点下，这就需要为文本添加内部超级链接。在Internet上最常见的就是这种内部超链接。（2）外部超级链接：将“友情链接”模块下的内容链接到相应的网站。由于这些网站的首页不属于本地站点，所以需要通过外部超级链接来实现。（3）空链接和脚本链接。（4）E-mail链接：当单击“联系我们”时，便打开了OutlookExpress。收件人地址shxzgl@163.com已自动出现在收件人的地址栏中，浏览者只需要输入信件的主题和内容即可。任务一网页中常见的超级链接任务描述在学校的网站中需要一个新闻页面，现在需要为新闻页面设置相应的超级链接。在加入动态网站和数据库的链接前，需要制作带有超级链接的静态页面，以便查看网站的浏览效果。为构建好的校园网制作超级链接，以实现各个页面之间的跳转。知识准备超级链接是网页间联系的桥梁，浏览者通过它可以跳转到其他页面。一般来说，超级链接包含以下几种类型。文件链接：链接到其他文件，最常见。书签链接：链接到相同文件或其他文件的书签位置。电子邮件链接：创建允许用户给网页制作人员发送邮件的链接。空链接：不会跳转到任何位置，用于附加Dreamweaver行为。脚本链接：执行JavaScript代码或调用JavaScript函数。在Dreamweaver中提供非常简便的超级链接的创建方法，可以轻松地将文字、图片、Flash等网页元素设置为链接对象，实现网页间的跳转功能。任务实施使用多种方法设置超级链接1）文本链接（1）链接到网页：打开网页，选取“学校放假时间通知”，单击常用工具栏上的超级链接按钮，会出现“超级链接”对话框，如图4.1.2和图4.1.3所示。单击“链接”右侧的“浏览文件”按钮，选取链接的网页。图4.1.2常用工具栏图4.1.3设置超级链接在弹出的对话框内选择“项目4\tongZhi.html”文件，并单击“确定”按钮，如图4.1.4所示。图4.1.4选择文件单击文件工具栏上的“浏览”按钮，选择一个浏览器测试刚才制作的超级链接的效果，如图4.1.6所示。图4.1.6文件工具栏（2）链接到图片：选择“学校图片展示”文字，单击鼠标右键，从弹出的快捷菜单中选择“属性”选项，在属性面板内，选择“链接”右侧的“浏览文件”按钮，如图4.1.7所示。浏览文件图4.1.7浏览文件将当前链接指向“项目4/素材/riZhao01.jpg”文件。单击键盘上的“F12”键，在主浏览器内浏览文件，测试制作的链接效果。（3）链接到可下载的文件：选择“学校招生简章下载”文字，单击“浏览文件”按钮，将链接指向“项目4/素材/招生简章.doc”文件。在浏览器中浏览并测试链接的效果。当单击此链接时会显示“文件下载”对话框，如图4.1.9所示。图4.1.9“文件下载”对话框2）图像链接（1）图像链接：打开或者制作如图4.1.10所示的网页（示例网页为“项目4/star.html”）。在网页中除了文本可以制作链接外，图片也可以制作链接。一般矩形的链接区域可以直接使用图片来进行，但对于非矩形区域的链接，或链接区域与图片实际大小不相符的情况，只能通过热点的方式来建立链接。图4.1.10网页效果图步骤1：选择张影上面的图片。步骤2：在属性面板中单击“浏览文件”按钮。步骤3：将图片链接到“项目4/zhangying.html”。步骤4：在star.html网页中，将李明丽上方的图片链接到“项目4/limingli.html”。步骤5：根据limingli.html制作其他三个人的个人简介网页，并链接到相应的网页。（2）热点链接，步骤如下。步骤1：打开limingli.html文件，选择网页最上面的图片，如图4.1.11所示。图4.1.11网页顶部步骤2：在属性面板选择“多边形热点工具”按钮，如图4.1.12所示。图4.1.12多边形热点工具步骤3：制作多边形热区，如图4.1.13所示。步骤4：将热区的链接地址设为“项目4/star.html”，如图4.1.14所示。图4.1.13制作多边形热区图4.1.14设置热区的链接地址步骤5：在浏览器中测试limingli.html文件，当鼠标移到图片区域时，鼠标形状会发生变化，单击鼠标时会跳转到明星页面。［提示1］矩形的热区和圆形的热区操作方法与多边形热区的操作相似。［提示2］只有在选择的图片上才能建立热区，网页中的背景图片不能够建立热区。知识拓展删除链接（1）把链接的地址改为“#”，也就是更改链接为空链接。这种方式可以保证链接区域的样式不会因为链接的删除而发生改变，尤其是在有CSS样式表存在的情况下。（2）在属性面板把链接的地址全部删除，则对应此部分的超级链接的代码会自动删除。（3）用鼠标右键单击需要删除链接的文字或图片，在弹出的快捷菜单中选择“移除链接”选项，如图4.1.15所示。图4.1.15删除链接电子邮件链接：电子邮件链接是一种比较特殊的链接方式。使用电子邮件链接可以打开本机的Outlook，并向链接的目标邮件地址发送邮件。例如，选择文本或图像，在“E-mail”文本框中输入mailto:abc@123.com。或者单击常用工具栏上的电子邮件按钮，输入文本和电子邮件的地址，如图4.1.16和图4.1.17所示。图4.1.16常用工具栏图4.1.17电子邮件链接任务总结本任务主要是对超级链接有一个初步的认识，使用超级链接可以打开新的窗口。不仅可以链接到本网站中的其他页面，还可以链接到其他网站的相关页面。除链接到网站或网页的地址外，还可以链接图片、动画、视频、音频等媒体文件。对