网页设计模块四 插入网页元素及超链接
合集下载
《网页设计与制作》课程标准
《网页设计与制作》课程标准【课程名称】《网页设计与制作》【适用专业】中等职业学校计算机应用专业办公自动化技术1.前言1.1课程性质本课程是中等职业学校计算机应用专业的一门专业核心课程。
通过本课程的学习, 要求学生掌握网页设计的基本概念, 学会使用常用的网页设计工具和常用脚本语言, 能够设计制作常见的静态和动态网页, 具备网站的建立和维护能力。
同时通过本课程的学习, 培养学生的综合职业能力、创新精神和良好的职业道德。
1.2设计思路本课程的设计“以能力为本位、以职业实践为主线、以项目课程为主体”, 整个《网页设计与制作》课程共分为四大模块, 它们分别是: 网页基础知识、DreamWeaver的使用、HTML语言、ASP动态网页设计。
教学时各模块既有独立性, 又有关联性。
独立性是指各模块设计案例、组织教学、突出重点时应该相互独立, 学生应该一个模块一个模块地掌握其知识点；关联性是指各模块间存在相互关系, 在重难点设计上应该加以配合, 如HTML语言模块着重基本代码的熟记和编写, 对于较难编写代码的“框架”、“层”、“数据链接”等内容则放到DreamWeaver的使用模块中重点介绍。
《网页设计与制作》课程与计算机基础、Flash动画、PhotoShop图像处理、计算机网络技术、数据库等课程互相联系、互相补充。
本课程作为计算机专业的一门主干专业课程, 一般在2.3年级开设, 此时学生已经具备一定的计算机基础知识和动手能力, 能较快地掌握网页设计的各种知识, 并运用所学知识做出具有特色的网站, 使学生能够得到全面的培养, 成为社会所需专用人才。
2. 课程目标总目标：使学生掌握常用的网页设计工具, 熟练运用多种网页设计技术, 具备Web网页设计、制作及站点管理的基本知识和基本技能, 学生能够独立制作中小型的网站。
1.了解WWW、HTTP、HTML、CSS的定义、概念和作用；2.理解服务器、客户端、浏览器的概念和作用； 3.理解HTML语言中的各种文本格式、字符格式、段落设置、列表、标记的作用；4.熟练操作DreamWeaver；5.理解CSS样式表的作用和意义；6.深入理解HTML语言的各种功能和应用；7.深入理解表格、框架、表单的作用；8.深入理解层的作用；9.初步了解面向对象程序设计思想。
网页制作与开发教程_第4章建立超链接ppt课件
图4-3 调用不同文件夹中的文件
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
【例4-2】 路径示例 <html>
<head> <title>超链接</title>
</head> <body>
【例4-3】 超链接颜色设置示例 <html>
<head> <title>链接颜色的变化</title>
</head> <body text=blue alink=red vlink=yellow link=green>
注意<a href=1.html>颜色</a>的变化 </body> </html>
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
4.5
实践与练习：导航条
小结
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
4.2 使用Dreamweaver 8设置超链接
4.2.1 文字超链接 使一些文字成为超链接的方法非常简
单。用鼠标选中要变成超链接的文字，再 在“属性”面板的“链接”输入框中输入 要跳转到的目标页面，也可以按下输入框 旁边的文件夹图标，选择要跳转的文件。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
【例4-2】 路径示例 <html>
<head> <title>超链接</title>
</head> <body>
【例4-3】 超链接颜色设置示例 <html>
<head> <title>链接颜色的变化</title>
</head> <body text=blue alink=red vlink=yellow link=green>
注意<a href=1.html>颜色</a>的变化 </body> </html>
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
4.5
实践与练习：导航条
小结
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
4.2 使用Dreamweaver 8设置超链接
4.2.1 文字超链接 使一些文字成为超链接的方法非常简
单。用鼠标选中要变成超链接的文字，再 在“属性”面板的“链接”输入框中输入 要跳转到的目标页面，也可以按下输入框 旁边的文件夹图标，选择要跳转的文件。
《网页设计》课程教学建设探讨与实践
第１ ９卷 第 ６期
２ ０１ １年 ｌ ２月
电 脑 与 信 息 技 术
Ｃ ｍｐ ｔｒ ａ ｄ Ｉｆｒ ｔ ｎ Ｔ ｃ ｎ ｌｇ ｏ ｕｅ ｎ ｎｏｍａｉ ｅ ｈ ｏｏ ｙ ｏ
Ｖ０ ．９ Ｎ ． １ ｏ６ １ Ｄｅ ． ０ Ｉ ｅ ２ １
文 章 编 号 ：０ ５ １２ （ ０ ）６ ０ ５ — ４ １０ — ２ ８２ １ ０ — ０ ７ ０ １
（） ２课程结构模块化 ； （） ３ 任务驱动教学方法 ； （ ）形成性” ４“ 考核模式 ； （） ５ 立体化教学资源 ； （） ６ 实践训练层次化等全方位立体化解决方案 ， 为
计算机应用基础 、ｃ 语言 、平面设计 （ｈｔ ｈｐ Ｐｏ ｓｏ） ｏ
图 ２ 前 后 续 课 程
１２ 网页 设计课 程 开发思 路与步 骤 ．
《 网页设计》 课程教学建设探讨与实践
王春 红
（ 内蒙古财经学院， 呼和浩特 ０ ０５ ） １０ １
摘
要 ：网页设计》 《 是计算机应 用 术专业课程体 系中的主干课程之一。 技 文章对《 网页设计》 课程在课程设置、 教学方法和
教 学手段等教学建设方面进行 了有益探 索与实践 ， 对适应项 目 针 任务教 学模式 的教 学方 法和评价模式进行探讨 ， 于 有利
的关键职业能力之一 ，并且毕业生一部分从事网站建 设与维护方面的工作 ，因此本课程的就业岗位定位于 网站建设岗位群 ，培养能在各企事业单位从事利用计 算机系统及 网络熟练进行网站建设与管理维护、中小
网站作为教学内容。 这些网页都来 自真实的网站 ， 经过 对网页的教学化处理 ，它们都较好 的体现 了学习内容 的工学结合特征， 使学生在有限的学习时间内， 得到具 有代表性网页设计与制作能力 的培养 ，较好地满足工
２ ０１ １年 ｌ ２月
电 脑 与 信 息 技 术
Ｃ ｍｐ ｔｒ ａ ｄ Ｉｆｒ ｔ ｎ Ｔ ｃ ｎ ｌｇ ｏ ｕｅ ｎ ｎｏｍａｉ ｅ ｈ ｏｏ ｙ ｏ
Ｖ０ ．９ Ｎ ． １ ｏ６ １ Ｄｅ ． ０ Ｉ ｅ ２ １
文 章 编 号 ：０ ５ １２ （ ０ ）６ ０ ５ — ４ １０ — ２ ８２ １ ０ — ０ ７ ０ １
（） ２课程结构模块化 ； （） ３ 任务驱动教学方法 ； （ ）形成性” ４“ 考核模式 ； （） ５ 立体化教学资源 ； （） ６ 实践训练层次化等全方位立体化解决方案 ， 为
计算机应用基础 、ｃ 语言 、平面设计 （ｈｔ ｈｐ Ｐｏ ｓｏ） ｏ
图 ２ 前 后 续 课 程
１２ 网页 设计课 程 开发思 路与步 骤 ．
《 网页设计》 课程教学建设探讨与实践
王春 红
（ 内蒙古财经学院， 呼和浩特 ０ ０５ ） １０ １
摘
要 ：网页设计》 《 是计算机应 用 术专业课程体 系中的主干课程之一。 技 文章对《 网页设计》 课程在课程设置、 教学方法和
教 学手段等教学建设方面进行 了有益探 索与实践 ， 对适应项 目 针 任务教 学模式 的教 学方 法和评价模式进行探讨 ， 于 有利
的关键职业能力之一 ，并且毕业生一部分从事网站建 设与维护方面的工作 ，因此本课程的就业岗位定位于 网站建设岗位群 ，培养能在各企事业单位从事利用计 算机系统及 网络熟练进行网站建设与管理维护、中小
网站作为教学内容。 这些网页都来 自真实的网站 ， 经过 对网页的教学化处理 ，它们都较好 的体现 了学习内容 的工学结合特征， 使学生在有限的学习时间内， 得到具 有代表性网页设计与制作能力 的培养 ，较好地满足工
网页制作-超链接
建立图形地图，使一个图形指向多个链接目标 。单击 图片的不同部分时，就可以跳到页面的不同部分 。 首先，要在图形上绘制热点： 绘图工具栏有按钮可以添加热点。 这个可以添加矩形热点，我们用的就是它。 这个用来添加圆形热点， 这个可以添加不规则热点。 接下来 我们按下“矩形热点”按钮，在图片的某一部分 上拖一个框，接着就会弹出“创建超链接”对话框。还 可以拖动热点框调整位置，也可以拖动热点框的小黑点 改变框的大小。
在默认情况下，超链接是蓝色的，以与未访问已经 访问过的超链接一般用不同的颜色过的相区别。 我们可以改变这些颜色。首先在网页上单击鼠标右 键，选择“网页属性”，进入“网页属性”对话框，选 择“背景”选项卡，你可以改变一般的、已访问的和当 前的超链接的颜色，这里我们单击“超链接”下拉列表 框，选择绿色，单击“确定”按钮，超链接的颜色就改 变了。
建立到书签的链接
选中文字或图片，把它作为超链接标志，单击“常用”工具栏 “超链接”按钮，在可选组框里书签下拉列表中选择相应的书签，单 击“确定”。“书签名称”就变为超链接了。 修改书签：选择“插入”菜单的“书签”命令，在对话框中选中 你要修改的书签，选择“转到”，跳到相应位置，这时可以直接修改 书签名称，也可以单击“清除”按钮删除书签。
定义书签
书签可以是字符串，也可以 是光标所在位置。我们选中“默 认名称”四个字，选择“插入” 菜单“书签”命令，书签名称就 是选择的文本名称。我们可以直 接修改书签名称 。当你的书签 名为空时，你还要自己输入一个 名称。现在我们单击“确定”按 钮，在普通视图里“默认名称” 被加了下划虚线，表示这儿有一 个书签。
还有一种超链接，可以链接电子邮件。这样可以使你 的网上朋友通过Email及时与你联系，这是一个网站站长 和网友交流的重要手段。 首先选中要作为超链接的文本和图片，一般文本 就是你的邮箱地址，单击“超链接”按钮，单击“信 封”按钮 ，输入你的邮箱地址：
网页设计实用教程第4章超链接ppt课件
网页设计实用教程第4章超链接 ppt课件
目录
• 引言 • 超链接的基本概念 • 如何创建超链接 • 超链接的使用场景 • 超链接的优化技巧 • 总结与展望
01 引言
课程简介
本章将介绍超链接在网页设计中的重 要性和应用，帮助读者掌握如何创建 和管理超链接，提高网页的交互性和 用户体验。
学习目标：了解超链接的概念、类型 和创建方法；掌握如何设置链接颜色 、下划线样式等样式属性；理解相对 路径和绝对路径的区别和应用场景。
链接的命名规范
总结词：统一规范
详细描述：超链接的命名应该统一规范，保持一致的风格和格式。这有助于提高网站的规范性和专业 性，同时也有利于网站的SEO优化。
链接的颜色和字体设置
总结词：突出重点
详细描述：为了突出重点，超链接的颜色和字体设置应该 与普通文本有所区别。通常，超链接会以醒目的颜色和不 同的字体样式显示，以吸引用户的注意力。
详细描述：超链接的交互设计应该提供易于返回的功能 ，方便用户返回上一个页面或回到主页。这有助于提高 用户体验，降低用户的操作成本。
06 总结与展望
超链接的重要性
导航功能
超链接是网页导航的核心，通过 超链接，用户可以方便地跳转到 其他页面或网站，提高浏览体验。
信息关联
超链接可以将不同页面或网站的内 容关联起来，形成知识网络，方便 用户获取更全面的信息。
02 超链接的基本概念
什么是超链接
总结词
超链接是网页中非常重要的元素之一，它允许用户通过点击文本、图片或其他 网页元素，从一个网页跳转到另链接，用户可以通过点击超链接来访问不同的网页 或网站。超链接使用户能够方便地浏览和获取信息，是互联网中不可或缺的组 成部分。
总结词
目录
• 引言 • 超链接的基本概念 • 如何创建超链接 • 超链接的使用场景 • 超链接的优化技巧 • 总结与展望
01 引言
课程简介
本章将介绍超链接在网页设计中的重 要性和应用，帮助读者掌握如何创建 和管理超链接，提高网页的交互性和 用户体验。
学习目标：了解超链接的概念、类型 和创建方法；掌握如何设置链接颜色 、下划线样式等样式属性；理解相对 路径和绝对路径的区别和应用场景。
链接的命名规范
总结词：统一规范
详细描述：超链接的命名应该统一规范，保持一致的风格和格式。这有助于提高网站的规范性和专业 性，同时也有利于网站的SEO优化。
链接的颜色和字体设置
总结词：突出重点
详细描述：为了突出重点，超链接的颜色和字体设置应该 与普通文本有所区别。通常，超链接会以醒目的颜色和不 同的字体样式显示，以吸引用户的注意力。
详细描述：超链接的交互设计应该提供易于返回的功能 ，方便用户返回上一个页面或回到主页。这有助于提高 用户体验，降低用户的操作成本。
06 总结与展望
超链接的重要性
导航功能
超链接是网页导航的核心，通过 超链接，用户可以方便地跳转到 其他页面或网站，提高浏览体验。
信息关联
超链接可以将不同页面或网站的内 容关联起来，形成知识网络，方便 用户获取更全面的信息。
02 超链接的基本概念
什么是超链接
总结词
超链接是网页中非常重要的元素之一，它允许用户通过点击文本、图片或其他 网页元素，从一个网页跳转到另链接，用户可以通过点击超链接来访问不同的网页 或网站。超链接使用户能够方便地浏览和获取信息，是互联网中不可或缺的组 成部分。
总结词
模块四 插入网页元素及超链接
任务二 创建基本文本网页
步骤： 步骤1 步骤 运行Dreamweaver CS3，在“开始页”中选择“新建”下的“THML”， 新建一个网页文档。 步骤2 步骤 在文档窗口中单击，出现闪烁光标。选择合适的输入法，在光标处输 入文字。如图4-6所示。
图 4-6 直接输入文字
任务二 创建基本文本网页
步骤７ 步骤７ 选择““跟踪图像”选项卡。如图4-5所示。 “跟踪图像”是用于网页中元素定位的图像，该图像只是在编辑网页时提供参照， 起到辅助编辑的作用，最终不会显示在浏览器中，所以，并不能等同于背景图像。
图4-5 跟踪图像选项卡
任务一 设置页面的相关属性
信息卡 选择跟踪图像时，可以单击后面的〖浏览〗按钮，从系统中寻找图像 文件作为跟踪图像。 还可以设置跟踪图像的透明度，滚动条最左端是透明，最右端是不透 明，可以用鼠标拖动滑块来进行调整。
任务三
知识导读
创建基本图文混排网页
一个仅有文本的网页不会引起浏览者的好奇。网民们不难发现，网 络上的大多数网页都是由图象和多媒体来点缀整个页面。因为图象和多 媒体直观和生动，不受语言、人种、地域等差异限制，使得网页能被更 多浏览者关注并接受。合理地使用图像，可以让网页看起来更加美观、 赏心悦目，更加充满生命力。 图像与文本的完美结合可以提升网页的美观性，从而吸引更多 人的关注 此外，网页文件的大小，也影响着网页被关注的程度。如 果网页太大，在浏览的过程中用户会失去等待的耐心，无论网页多 么精彩，用户都会放弃它。而网页的大小关键就在于网页中图像的 大小。所以处理图像时要尽可能使其变得更小，使它能够在狭窄的 网络带宽中快速传递；但质量又不能太差，要显示它应有的效果。 这就要求设计者既要选择合适的图像格式，又要作相应的调整。
添加超链接和多媒体元素
2023-10-31CATALOGUE 目录•添加超链接•添加图片和形状•添加音频和视频•添加动画效果•添加超链接和多媒体元素的注意事项01添加超链接超链接是网页之间连接的桥梁，它允许用户从一个页面跳转到另一个页面，或者从页面跳转到特定的部分。
超链接可以是一个文本、图像或按钮，当用户点击它们时，就会导航到新的页面或打开一个链接。
什么是超链接添加超链接的方法在HTML中，超链接使用`<a>`标签来定义，`href`属性用于指定链接的目标地址。
除了指定URL，还可以使用相对路径来链接到同一网站的不同页面。
例如：`<a href=".example">Visit Example</a>`例如：`<ahref="about.html">AboutUs</a>`超链接常用于网站的主页和子页面之间的导航。
导航用户可以通过超链接快速跳转到页面的特定部分。
跳转超链接还可以用于连接到其他网站或资源。
外部链接在长文档中，超链接可以用于内联链接，以方便用户在长文中快速导航。
内联链接超链接的用途02添加图片和形状使用菜单插入在大多数软件中，可以通过点击菜单栏中的“插入”或“对象”选项，然后选择“图片”或“形状”来插入图片或形状。
使用快捷键插入在某些软件中，可以使用快捷键来快速插入图片或形状。
例如，在Microsoft Word中，按下“Alt+F9”组合键可以快速插入图片。
插入图片和形状的方法可以通过拖动图片或形状的边缘来调整其大小。
也可以通过在属性栏或对话框中输入尺寸值来精确调整大小。
调整大小可以通过拖动图片或形状来调整其位置。
也可以通过在属性栏或对话框中输入坐标值来精确调整位置。
调整位置调整图片和形状的大小和位置设置图片和形状的样式设置图片样式可以设置图片的边框、阴影、透明度等样式。
这些设置通常可以在属性栏或对话框中找到。
网页制作ppt课件第4章超链接
超链接的重要性
总结词
超链接在网页制作中起着至关重要的作用，它能够提高用户体验、增强网站导航、增加网站流量和提升搜索引擎 排名。
详细描述
超链接是网页中不可或缺的一部分，它能够提高用户体验，使用户能够方便地浏览和获取信息。通过设置合理的 超链接，可以增强网站的导航结构，使用户更容易找到所需内容。同时，超链接还可以增加网站的外部链接数量， 提高网站的权重和流量，从而提升搜索引擎排名。
问。
图片链接
总结词
图片链接是指将一张图片设置为超链接 ，当用户点击这张图片时，会跳转到指 定的片链接，首先需要插入一 张图片，然后选中这张图片，选择“插入 ”菜单中的“超链接”选项。在弹出的对 话框中，输入要链接到的网址或文件路径 ，并设置好显示的文字和颜色等属性。点 击确定后，选中的图片就会变成超链接， 用户可以直接点击访问。
确保超链接指向的内容合法、合规， 不涉及任何违法、侵权或不良信息。
避免在超链接中传递任何误导、虚假 或欺诈信息，以免引起法律纠纷和不 良后果。
在使用外部链接时，尊重原网站的版 权和隐私政策，避免侵犯他人的权益。
06
案例分析
优秀超链接案例一
01
案例名称
旅游网站导航栏
02 03
描述
该网站通过超链接将各个旅游景点的页面相互连接，使用户可以轻松跳 转到感兴趣的景点页面，同时每个景点页面都提供了返回主页的超链接， 方便用户浏览。
使用链接管理工具或插件来检 测和清除死链，提高网站的用 户体验和搜索引擎优化效果。
优化用户体验
确保超链接的文本清晰、简洁， 易于理解，避免使用过于复杂或
难以理解的链接描述。
合理规划超链接的位置和布局， 使其符合用户的浏览习惯和阅读
网页设计与制作(Dreamweaver)《插入网页基本要素之图像与超链接》
插入网页基本要素之图像与超链接
超链接
超级链接是网页中的精华部分，当光标移至浏览器中的超级链接时，光
标会变成一只手的形状，此时单击链接便可以打开链接所指向的目标网
页。
没有它每个网页都要输入很长的URL地址。没有超链接，就无法通过单击的方式 遨游Web世界，而如果没有了单击的功能，Web就会是死水一潭。
在左边选择文件类型，右边单击左上方的加号图像编辑器
设置及启用外部图像编辑器：
设置不同类型图像文件编辑器：选择“编辑／ 首选参数／文件类型/编辑器”…… 通过外部图像编辑器对图像文件进行修改:
启用图像编辑器：选取图像→单击属性面板中 的“编辑”按钮即可启动相应编辑器，并打开 图像文件，进行修改。
插入网页基本要素之图像与超链接
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 给图片增加提示：选中图像→在属性面板的“替代”中输入提示文字，在浏览器中，鼠标指向这个图片时，就会出现文字提示。 另外，有时，不显示图片后，可以显示该说明文字。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
插入网页基本要素之图像与超链接
超链接的类型
1 页间链接：利用该链接可 以跳转到其他文档或文件，如图 形、电影、PDF或声音文件。
2 页内链接：也被称为锚记链接，利用它 可以跳转到本站点指定文档的位置。
4 空链接及脚本链接
它允许用户附加行为至对象或创 建 一 个 执 行 JavaScript 代 码 的 链 接。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 放大、缩小图像大小：拖动控制点或直接在属性面板中输入宽度与高度的像素值； 等比例放大、缩小图像大小：按住Shift同时拖动右下角控制点； 恢复图像大小：删除其属性面板中的宽度、高度值，即可恢复到原来的大小。 “边框”是以像素为单位的图像边框的宽度。默认为无边框，相当于加一个相框。 “编辑”启动在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。
超链接
超级链接是网页中的精华部分，当光标移至浏览器中的超级链接时，光
标会变成一只手的形状，此时单击链接便可以打开链接所指向的目标网
页。
没有它每个网页都要输入很长的URL地址。没有超链接，就无法通过单击的方式 遨游Web世界，而如果没有了单击的功能，Web就会是死水一潭。
在左边选择文件类型，右边单击左上方的加号图像编辑器
设置及启用外部图像编辑器：
设置不同类型图像文件编辑器：选择“编辑／ 首选参数／文件类型/编辑器”…… 通过外部图像编辑器对图像文件进行修改:
启用图像编辑器：选取图像→单击属性面板中 的“编辑”按钮即可启动相应编辑器，并打开 图像文件，进行修改。
插入网页基本要素之图像与超链接
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 给图片增加提示：选中图像→在属性面板的“替代”中输入提示文字，在浏览器中，鼠标指向这个图片时，就会出现文字提示。 另外，有时，不显示图片后，可以显示该说明文字。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
插入网页基本要素之图像与超链接
超链接的类型
1 页间链接：利用该链接可 以跳转到其他文档或文件，如图 形、电影、PDF或声音文件。
2 页内链接：也被称为锚记链接，利用它 可以跳转到本站点指定文档的位置。
4 空链接及脚本链接
它允许用户附加行为至对象或创 建 一 个 执 行 JavaScript 代 码 的 链 接。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 放大、缩小图像大小：拖动控制点或直接在属性面板中输入宽度与高度的像素值； 等比例放大、缩小图像大小：按住Shift同时拖动右下角控制点； 恢复图像大小：删除其属性面板中的宽度、高度值，即可恢复到原来的大小。 “边框”是以像素为单位的图像边框的宽度。默认为无边框，相当于加一个相框。 “编辑”启动在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。
网页设计实用教程 第4章 超链接.
(6) 一个图像热区链接创建完成，单击【保存】按钮，按 F12按钮预览网页。
4.2.5
创建锚链接
超链接除了可以链接到文件外，还可以链接到本页中的 任意位置，这种链接方式称为“锚链接”。当一个网页的主 题或文字较多时，为了方便用户浏览，可以在网页内的某些 分项内容上建立多个标记点，将超链接指定到这些标记点上， 使用户能快速找到要阅读的内容。我们将这些标记点称为锚 点（Anchor）
图4-3 电子邮件链接对话框
4.2.3
创建E-mail链接
(3) 对话框中“文本”指在网页上显示的文本， “ E-mail”指需要链接到的邮箱地址，这里输入 “wysj@” ，单击【确定】按钮完成Email链接的设置。 也可以在属性面板的“链接”文本框中输入 “mailto:”和邮箱地址，这里是“mailto: wysj@”。 (4) 一个E-mail链接创建完成，单击【保存】按钮， 按 F12按钮预览网页。
4.2典例剖析—信息导航列表
本节将通过建立一个信息导航网页的实例来讲解超链接的使 用。本节操作任务： （1）在“Mystuhome”下建立文件夹“超链接”，在 “超链 接”文件夹下建立网页“index.html”和文件夹“image” （2）在网页中创建链接。 （3）在网页中创建E-mail链接。 （4）在网页中制作图像映射，设置图像热点的超链接。
4.4
习 题
三、上机实践 1. 在超链接文件夹下创建“名站收藏..html”网页文档，在网页 中列举自己经常访问的网站名称，为他们建立到网站网址的 超链接。 2. 在超链接文件夹下创建“相册..html”网页文档，在网页中插 入图片，在图片上建立热区图像链接。 3. 为网页“相册.html”建立到底端和到顶端的锚链接。
4.3《网页制作—超链接设置》教学案
4.3《网页制作—超链接设置》
【教材分析】
本节教学内容选自广东教育出版社选修3《网络技术应用》中的第四章第三节网页制作中的插入超链接。
超链接是网页制作中相当重要的一个知识点，也是学业水平考试的考点，要求每位学生都要掌握，它可以实现网站中各个网页之间的相互连接，把网页构成整体。
【学情分析】
高一年级的学生已经拥有相当水平的计算机操作能力了，这一章的学习要求每个学生都完成一个网站作品，自己确定主题，确定风格，确定版面样式，选择素材进行网页制作，经过几节课的学习探究很多同学都完成了网站中的几个网页制作，并且也掌握了网页制作的基本知识点，他们都迫切希望能通过链接把网页构成一个整体，相互之间能够实现访问。
【教学目标】
1、知识与技能：掌握超链接的创建方法以及编辑超链接
2、过程与方法：通过学生自主学习和合作探究，学会创建超链接，编辑超链接
3、情感态度价值观：通过师生的相互交流和学生之间的协作学习，体验探究问题和学习的乐趣
【教学重点】
超链接的创建及编辑
【教学难点】
创建电子邮件超链接
【教学方法】
激发兴趣，任务驱动，自主探究
【教学准备】
多媒体网络教室，教学课件，导学案
【教学过程】。
第4章 在网页中建立各种超级链接
网页设计与制作
许多网站提供了文件下载的功能，实现文件 下载的功能很简单，就是建立一个到文件的超级 链接！（下载的文件和其它网页文件都放在本地 站点中。）
网页设计与制作
二、创建外部超级链接
所谓外部超级链接：即链接了本地站点以外 的网页文件。我们平时常见的“友情链接”就是 外部超级链接，当单击“友情链接”中的某个链 接时，浏览器将打开相应网站。
例如， 设计目标：在网页中为“与我联系”文本创建 E-mail链接，其E-mail地址为yiiz@
网页设计与制作
实现步骤：
（1）添加“与我联系”文本。 （2）选中文本 （3）添加链接的方法 A、插入浮动面板常用电子邮件链接图标 B、菜单栏插入（insert）Email link打开 “insert Email link(插入E-mail链接)”对 话 框进行设置 C、在文本属性面板上link文本框中直接输入： “mailto:yiiz@” 网页设计与制作
网页设计与制作
创建空链接的步骤如下：
（1）选择需要创建链接的文本或图像 （2）在属性面板中的“Link”文本框中输入空链接符号 “#”， 即创建了一个空链接
创建空链接
网页设计与制作
四、创建脚本链接
利用脚本链接可以执行JavaScript代码或者 调用JavaScript函数。当来访者单击了某个指定 项目时，脚本链接也可以用于执行计算、表单确 认和其它任务。
设置链接目标
网页设计与制作
说明： 在“Target（目标）”文本框的下拉列表中 “_blank”表示在新的未命名的浏览器窗口中打 开链接文档。 “_parent”、 “_self”、 “_top”选项的含义与 框架有关。
网页设计与制作
Dreamweaver网页设计之：建立超链接
2013-7-26
29
4.2 使用Dreamweaver 8设置超链接
文本链接的状态 一个未被访问过的链接文字与一个被访问过的链 接文字在形式上是有所区别的，以提示浏览者链 接文字所指示的网页是否被看过。 如果要修改超链接的文本颜色： 修改->页面属性
2013-7-26
30
4.2 使用Dreamweaver 8设置超链接
2013-7-26
6
4.1从HTML的角度理解超链接
2．超级链接的分类 （1）按链接载体分类，把链接分为文本链接与图像链接两大类。 文本链接：用文本作链接载体，简单实用。 图像链接：用图像作为链接载体能使网页美观、生动活泼，它既 可以指向单个的链接，也可以根据图像不同的区域建立多个链接。 （2）按链接目标分类，将超级链接分为以下几种类型： 内部链接：同一网站内文档之间的链接。 外部链接：不同网站文档之间的链接。 锚点链接：同一网页或不同网页中指定位置的链接。 E-mail链接：发送电子邮件的链接，可直接点击发送电子邮件。 执行文件链接：链接站点空间里的可执行程序，用于下载在线运 行。
下载文件链接 浏览网站的目的往往是查找并下载资料，下载文 件可利用下载文件链接来实现。建立下载文件链 接的步骤如同创建文字链接，区别在于所链接的 文件不是网页文件而是其他文件， 如.exe、.zip、.rar等文件。
b.使用属性面板的“指向文件”图标创建链接
“指向文件”链接
2013-7-26
在视图中链接其他网页
27
4.2 使用Dreamweaver 8设置超链接
c．使用“超级链接”对话框创建链接 选择菜单 “插入→超级链接”命令，或单击 “常用”插入工具栏上的“超级链接”按 钮，弹出“超级链接”对话框
教案-模块4 制作网站的最新动态页面4-超链接
模块4 创建网站最新动态页面
课程名称Web编程基础课时2课时
授课班级软件技术、计算机应用、移动开发专业
授课地点一体化教室授课形式做学教一体教学单元模块4-4 超链接
教学目标知识目标
掌握超链接的设置；
掌握CSS设置超链接各状态样式的方法。
能力目标能够设置超链接，运用CSS修饰超链接伪类素质目标
激发学生学习兴趣
引导学生团队合作
教学重点难点及措施教学重难点：
设置各种类型超链接，以及使用CSS修饰超链接的伪类样式。
措施：
通过上机操作加强学习和补充案例进行巩固。
教学方法做学教一体任务驱动线上线下混合教学教学任务制作条目的超链接
任务1：创建超链接教学
环节
教学内容
教学
方式
学生
活动
新课
引入
通过启发、提问、设问等教学方法，导入新知讲授
思考
参与
讨论。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
任务一 设置页面的相关属性
步骤4 选择“链接”选项卡。如图4-2 所示。
图4-2 链接选项卡
任务一 设置页面的相关属性
信息卡
(1)“链接字体”：设置链接文字的默认字体，设置方法与页面字体 的设置方法相同。 (2)“大小”：设置链接文字的大小，与页面文字的大小设置方法完 全相同。 (3)“链接颜色”、“交换图像链接”、“已访问链接”、“活动链 接”：设置链接4种不同状态的颜色。这4种状态分别是：正常状态、 鼠标滑过状态、访问过的状态、鼠标单击时的状态。 (4)“下划线样式”：设置链接文字下面的下划线样式。系统提供了4 种样式，分别是“始终有下划线”、“始终无下划线”、“仅在变 换图像时显示下划线”、“变换图像时隐藏下划线”。
任务一 设置页面的相关属性
步骤5 选择“标题”选项卡。如图4-3所示。 “标题”选项卡中可以定义应用在具体文档中各级不同标题上的一种“标题字 体样式”。而不是指页面的标题内容。在分类中可以定义“标题字体”及6 种 预定义的标题字体样式，包括粗体、斜体、大小和颜色等。操作步骤同前面类 似，在此不再叙述。
步骤７ 选择““跟踪图像”选项卡。如图4-5所示。 “跟踪图像”是用于网页中元素定位的图像，该图像只是在编辑网页时提供参照， 起到辅助编辑的作用，最终不会显示在浏览器中，所以，并不能等同于背景图像。
图4-5 跟踪图像选项卡
任务一 设置页面的相关属性
信息卡
选择跟踪图像时，可以单击后面的〖浏览〗按钮，从系统中寻找图像 文件作为跟踪图像。 还可以设置跟踪图像的透明度，滚动条最左端是透明，最右端是不透 明，可以用鼠标拖动滑块来进行调整。
图4-3 标题选项卡
任务一 设置页面的相关属性
步骤６ 选择“标题/编码”选项卡。如图4-4所示。 这里的“标题”是页面的标题内容，可输入和首页相关的文字内容，它将
显示在浏览器的标题栏中。“编码”即文档编码，可以直接选中“简体中文 (GB2312)”。
图4-4 标题/编码选项卡
任务一 设置页面的相关属性
步骤：
• 步骤1 打开网页。 • 步骤２ 选择【修改】→【页面属性】命令，打开如图4-1 所示的
“页面属性”对话框。在“页面属性”对话框中，左侧显示“分 类”列表框，其中包括“外观”、“链接”、“标题”、“标题/ 编码”、“跟踪图像”5 个项目，右侧区域则显示各分类中可以 设置的项目，下面将分别对每个类别进行介绍。
模块四 插入网页元素及超链接
任务一 设置页面的相关属性 任务二 创建基本文本网页 任务三 创建基本图文混排网页 任务四 图像在网页中的应用 任务五 插入多媒体内容 任务六 创建背景音乐 任务七 使用超级链接
学材小结
任务一 设置页面的相关属性
知识导读 网页属性包括网页标题、网页中文本的颜色、网页的背景颜色及背 景图片、网页边距等。设置网页属性通过设置“页面属性”完成， 另外系统还自带了许多种网页样式，用户也可以直接应用这些样式。 设置页面属性的具体操作步骤如下：
模块四 插入网页元素及超链接
• 本模块导读 网页是构成网站的基本元素。而文字、图片、多媒体和超级链接等又是网页最基本
的元素。这些基本元素的使用不但是制作网页最基本的技术，同时也是创建一个美观、 形象和生动网页的基础。通过本模块的学习，用户可以掌握添加和编辑网页中各种元素 的方法，以制作出丰富多彩的的网页。 • 本模块要点 • 设置网页的页面属性 • 制作纯文本网页 • 制作图文混排的网页 • 图片在网页中的各种应用方式 • 制作带多媒体效果的动感网页 • 制作带音乐的网页 • 制作带超级链接的网页
任务一 设置页面的相关属性
图4-1 页卡。
信息卡
(1)“页面字体”：设置页面文档中默认的文字字体。按钮：加粗设置，可以将页面文字的默 认格式设置为粗体。按钮：倾斜设置，可以将页面文字的默认格式设置为斜体。 (2)“大小”：设置页面中文字的默认大小。在右边的列表中选择数字或一些标准来表示文字 的大小，也可手动输入数字，输入数字后，后面的文字大小单位列表就会变成可编辑状态。 表示数字的单位，可以选择“像素”、“点数”、“英寸”、“厘米”、“毫米”等。 (3)“文本颜色”：设置页面中文字的默认颜色。单击颜色块后，会调出颜色面板，可以从颜 色面板中选择一种所需要的颜色，或者在后面的文本框中输入所需要的十六进制颜色值。 (4)“背景颜色”：设置当前网页的背景颜色，设置方法同文字颜色的设置方法，调出颜色面 板，选择一种颜色，确定后该颜色就会成为整个网页的背景颜色。 (5)“背景图像”：设置当前网页的背景图像。可以在文本框中输入用做背景图像的路径和文 件名称，也可单击文本框后面的〖浏览〗(是否应统一为实心括号，下同)按钮，从系统中寻 找图像文件作为当前网页的背景图像。 (6)“重复”：选择页面背景的多种重复模式。有四种页面背景重复模式可供选择：重复、不 重复、水平重复、垂直重复。 (7)“左边距”、“右边距”、“上边距”、“下边距”：设置当前网页中左、右、上、下边 界留出的空白像素数。
任务二 创建基本文本网页
步骤： 步骤1 运行Dreamweaver CS3，在“开始页”中选择“新建”下的“THML”， 新建一个网页文档。 步骤2 在文档窗口中单击，出现闪烁光标。选择合适的输入法，在光标处输 入文字。如图4-6所示。
图 4-6 直接输入文字
任务二 创建基本文本网页
信息卡
网页中，文本换行按<Shift>+<Enter>键，而分段直接按<Enter>键。 换行还可以点击菜单【插入记录】→【HTML】→【特殊字符】→ 【换行符】来实现。
任务二 创建基本文本网页
知识导读 文字是网页中最基本的信息载体，大多数的网页都要通过文字来表现其内容
，合理的文本编辑可以丰富网页的内容并增强网页的视觉性。
子任务１ 编辑文本格式
网页中插入文本，一般通过以下两种方式来插入。一种是在网页编辑窗口中 直接用键盘输入文本，这是文字输入最基本的方式。另一种是通过复制文本的 方式，如果所需要插入的文本在其他的文档中或是网站的页面中，可以直接使 用复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作。