网页设计建立链接

合集下载

《第1章 第4节 建立网页间的超链接》作业设计方案-初中信息技术河大版23第二册自编模拟

《第1章 第4节 建立网页间的超链接》作业设计方案-初中信息技术河大版23第二册自编模拟

《建立网页间的超链接》作业设计方案(第一课时)一、作业目标通过本次作业,学生将掌握建立网页间超链接的基本操作,包括了解超链接的概念、掌握在不同网页间创建链接的方法、熟悉链接属性的设置等。

通过实践操作,提高学生的动手能力和信息素养。

二、作业内容1. 作业任务:为学校网站上的各个网页创建超链接,将首页与其他页面建立链接,如“新闻中心”、“教师风采”等。

2. 作业要求:(1) 每个学生需独立完成作业,不得抄袭。

(2) 确保每个链接都能够正常跳转,且链接地址准确无误。

(3) 尽量使用书签或锚点对链接进行分类管理,方便日后维护。

3. 作业分工:学生可自愿分组,共同完成整个学校网站的超链接建立工作。

每组需指定一名组长,负责组织分工和进度管理。

4. 作业时间:共需完成三个课时,每课时约45分钟。

三、作业评价1. 评价方式:学生提交作业后,教师进行批改,检查学生是否按照要求完成了作业任务。

2. 评价标准:以链接的正确性、规范性及组织管理情况为评价标准。

3. 评价结果:对于优秀的学生,给予表扬和鼓励;对于存在问题的学生,进行个别辅导和指导,帮助其改进。

四、作业反馈1. 学生反馈:学生在完成作业过程中,如遇到问题,可向教师请教或与其他同学讨论解决。

教师会在课堂上及时回答学生的问题,提供帮助。

同时,学生需定期提交作业进度报告,以便教师了解学生的作业情况。

2. 教师反馈:教师将在批改学生作业后,将评价结果反馈给学生。

对于普遍存在的问题,教师将在课堂上集中讲解;对于个别学生的问题,教师将进行个别辅导。

此外,教师还将根据学生的作业情况,对教学方法和内容进行反思和改进。

3. 家长反馈:家长可定期收到孩子信息技术课程的作业反馈,了解孩子的学习情况和进度,共同关注孩子的学习成长。

通过本次作业,学生将更好地掌握建立网页间超链接的基本操作,提高动手能力和信息素养,为后续的网页制作打下坚实的基础。

作业设计方案(第二课时)一、作业目标:1. 学生能够熟练掌握在不同网页间建立超链接的方法。

网页设计基础-文本格式与超链接

网页设计基础-文本格式与超链接

第2章文本格式与超链接(1)段落格式本章目标•掌握段落标记符p、断行标记符br、标题标记符h1~h6、水平线标记符hr的用法。

•理解物理字符样式和逻辑字符样式。

•掌握使用ol/ul 和 li 标记符创建列表。

•掌握使用 a 标记符创建页面链接和锚点链接。

段落格式•段落格式是指针对 HTML 文档中的段落所设置的格式,例如段落的对齐方式。

•还有哪些段落格式?•首行缩进是不是段落格式?段间距呢?分段标记符•分段标记符用于将文档划分为段落,标记为<p></p>。

•换行标记符用于在文档中强制断行,标记为一个单独的<br />。

标题样式•hn 标记符 = 各级标题•n 是1至6的数字;h1表示最大的标题,h6表示最小的标题。

•注意:使用标题时应按照其逻辑含义,而不是按照其显示效果!添加水平线•添加水平线的标记符为hr,它包括以下属性:–size (粗细)–width (长度)–noshade (实线)align 属性•align 属性用于设置段落的对齐格式,取值:right(右对齐)、left(左对齐)、center(居中对齐)和 justify(两端对齐)。

•align 属性可应用于多种标记符,例如p、hn(标题标记符)、hr 等。

•注意:在学习了CSS技术之后应避免使用align属性。

第2章文本格式与超链接(2)字体格式与列表字体格式•字体格式/字符格式是指针对段落中的部分文字所设置的格式,通常包括:字体样式、字号、文字颜色等。

•注意:字体格式属于显示效果的设置,因此应主要使用CSS技术来实现。

物理字符样式•物理字符样式是指标记符本身说明了所修饰的效果。

•常用物理字符样式标记符有:–黑体标记<b></b>–斜体标记<i></i>–下划线标记<u></u>逻辑字符样式•逻辑字符样式是指标记符本身说明了所修饰效果的逻辑含义,例如address标记符。

在网页中建立各种超级链接

在网页中建立各种超级链接

在网页中建立各种超级链接实训目标1.掌握内部、外部超级链接的创建方法;2.掌握E-mail链接的创建方法;3.掌握锚点链接的制作方法;4.掌握链接颜色的设置方法;5.了解图像映射的制作方法;6.了解跳转菜单、翻转图像实例、导航栏的制作方法。

实训内容准备工作本实训所需的网页及图象文件均在实训二课件的“实训\materials”文件夹下。

1、解压文件解压文件“实训二在网页中建立各种超级链接.rar”,请将“课堂实训”文件夹中的“materials”文件夹复制到D盘根目录下,并将其重命名为“future”。

2.新建站点新建网站“畅想未来”,将站点和个人文件夹future建立一一对应的关系。

任务一、在网页中建立各种超级链接设计目标在实训一完成的index.htm页面中,制作一个具有超级链接的网页。

其浏览效果见“实训\result”文件夹中的index4.html文件所示。

当鼠标移到栏目标题文本上时就会变成手形,同时在浏览器下方的状态栏中显示链接地路径,单击时便会跳转到相应的链接内容。

2、页面分析该页面包含了内部超级链接、外部超级链接、空链接和脚本链接、Email超级链接等。

页面效果请参见实训二课件中“实训\result”文件夹下的index4.html文件。

3.制作步骤说明:请在完成下面操作前,先将所有的素材文件放置在对应的文件夹下;在Dreamweaver 中本地站点future 中打开index.html 页面,依次按照下述内容在页面中创建各种超级链接。

(1)创建内部超级链接内部超级链接:就是在同一个站点内的不同页面之间建立超级链接关系; ☞ 为“未来都市”文本创建超级链接在网页中选定文本“未来都市”,在“属性“面板中单击“浏览文件”,在打开的“选择文件”对话框中选择需要的网页文件(ex4_city.html );☞在“目标”选择框中选择“_blank ”,以确保在新的浏览窗口中打开连接文件;☞使用相同的方法分别为“未来旅游”和“科幻小说”创建超级链接;对应的网页文件分别为ex4_travel.html、ex4_novel.html;(2)创建外部超级链接外部超级链接:链接目标在网站之外,即与网站之外的文件链接;如果按照使用对象的不同,网页中的链接又可以分为:文本超链接、图像超链接、E-mail 链接、锚点链接、多媒体文件链接、空链接等 (3)创建空链接和脚本链接空链接是一个未指定目标的链接,在属性面板中的“链接”栏中输入一个数值符“#”即可。

《第1章 第4节 建立网页间的超链接》作业设计方案-初中信息技术河大版23第二册自编模拟

《第1章 第4节 建立网页间的超链接》作业设计方案-初中信息技术河大版23第二册自编模拟

《建立网页间的超链接》作业设计方案(第一课时)一、作业目标:通过本次作业,学生应掌握如何在网页中建立超链接,包括文本超链接和图片超链接。

同时,学生应能够理解超链接的基本概念和工作原理,并能够在实际操作中应用。

二、作业内容:1. 建立文本超链接:学生需要选择一个网页中的文本,并将其链接到另一个网页或同一网页的相同位置。

要求学生在操作过程中理解超链接的工作原理,并能正确设置链接目标。

2. 建立图片超链接:学生需要选择一张网页中的图片,并将其链接到另一个网页或同一网页的相同位置。

要求学生在操作过程中理解图片超链接的工作原理,并能正确设置链接目标。

3. 作业提交:学生需将完成的作业以图片或PDF的形式提交,并附上关于如何建立超链接的文字说明,包括链接目标的描述、操作步骤等。

三、作业要求:1. 作业应独立完成,不得抄袭。

2. 提交的图片或PDF文件应清晰、易于阅读。

3. 文字说明应简洁明了,能清楚地描述链接目标的地址和操作步骤。

4. 作业应在规定时间内完成,具体时间请参照课程安排。

四、作业评价:1. 评价标准将基于作业完成质量、提交的及时性和准确性。

2. 评价结果将作为平时成绩的一部分,记入最终总成绩。

3. 教师将对所有提交的作业进行批改,对于普遍存在的问题,将在课堂上进行讲解和答疑。

五、作业反馈:1. 学生可在作业提交后的几日内进行修改和完善,再次提交。

2. 教师将定期公布优秀作业名单,激励学生积极投入学习。

3. 对于未能在规定时间内完成作业的学生,教师将进行个别指导,帮助其克服困难。

在本次作业中,学生需要运用所学知识完成实际操作,这将有助于巩固和加深他们对超链接概念和操作的理解。

同时,通过独立完成作业,学生将学会如何将理论知识应用于实践中,提高他们的信息技术技能。

作业的评价和反馈环节也将为学生提供了一个自我检查和改进的机会,促进他们的学习进步。

作业设计方案(第二课时)一、作业目标通过本次作业,学生将巩固和理解建立网页间超链接的基本知识和技能,包括了解超链接的作用,掌握创建超链接的方法,能够解决实际操作中可能出现的问题。

网页设计与制作_第05章创建和设置超级链接ppt课件

网页设计与制作_第05章创建和设置超级链接ppt课件

装备一个铸造车间,需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清 能形成 生产能 力。
装备一个铸造车间,需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械,通 风除尘 设备等 。只有 设备配 套,才 能形成 生产能 力。
装备一个铸造车间,需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械,通 风除尘 设备等 。只有 设备配 套,才 能形成 生产能 力。
文本超级链接 图像超级链接 图像地图 电子邮件超级链接 锚记超级链接 空链接 鼠标经过图像 导航条 Flash文本 Flash按钮 脚本链接
装备一个铸造车间,需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械,通 风除尘 设备等 。只有 设备配 套,才 能形成 生产能 力。
(2) 根据目标端点的不同,超级链接可分为内部超级链接、外部超 级链接、电子邮件超级链接和锚记超级链接。
装备一个铸造车间,需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械,通 风除尘 设备等 。只有 设备配 套,才 能形成 生产能 力。
5.2 创建超级链接
装备一个铸造车间,需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械,通 风除尘 设备等 。只有 设备配 套,才 能形成 生产能 力。
5.1.3 链接目标
链接目标用于设置单击某个链接时,被链接文件打开的位置。 通常,链接目标有以下4种形式。
【_blank】:将链接的文档载入一个新的浏览器窗口。 【_parent】:将链接的文档载入该链接所在框架的父框架或 父窗口。如果包含链接的框架不是嵌套框架,则所链接的文档 载入整个浏览器窗口。 【_self】:将链接的文档载入链接所在的同一框架或窗口。 此目标是默认的,因此通常不需要特别指定。 【_top】:将链接的文档载入整个浏览器窗口,从而删除所有 框架。

网页设计实用教程 第4章 超链接.

网页设计实用教程 第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”建立到底端和到顶端的锚链接。

网页设计实验报告(学生)

网页设计实验报告(学生)

实验报告2011 至 2012 学年度第一学期课程名称:网页设计系别班级: 10 数本学号: 1006131031 姓名:陶士林授课老师:丁邦旭指导老师:丁邦旭目录实验项目一:创建站点和管理站点实验项目二:在网页中建立各种超链接实验项目三:利用表格设计和制作网页实验项目四:应用框架技术制作网页实验项目五:应用层技术制作网页实验项目六:用表单收集数据实验项目名称:一、创建和管理站点实验地点:实验楼C407日期:2011年9月26日实验内容1、建立本地站点。

2、搭建站点结构。

3、管理和维护站点。

实验目的1、掌握站点的总体规划方法。

2、掌握本地站点的定义方法。

3、掌握站点结构的搭建方法。

4、掌握站点的管理与维护方法。

实验具体操作过程1、创建本地站点(1)在菜单栏中选择“站点”—>“新建站点”命令。

在文本框中输入网站的名称“畅想未来”。

站点的URL可以暂时不输入,到上传网站的时候再添加。

(2)单击“下一步”按钮,设置站点需要使用服务器端技术。

由于此时新建的是静态站点,并不需要相关技术,所以选择“否,我不想使用服务器技术”单选按钮。

(3)单击“下一步”按钮,设置站点的编辑方式和存储位置。

大多数情况下,用户都是先在自己的计算机上编辑网页,然后通过FTP上传到远程服务器上,因此选择第一个选项。

在文本框中直接输入“D:\furture”。

(4)单击“下一步”按钮,设置计算机与服务器的链接方式,这里在下拉列表框中选择“无”选项。

(5)单击“下一步”按钮,Dreamweaver列出前面设置的各项信息以供用户检查。

(6)在确认无误后,单击“完成”按钮。

系统会在D盘的根目录下自动创建“furture”文件夹,同时“文件”面板显示出刚才新建的站点。

2、搭建站点结构(1)在“文件”面板中,单击文件下拉列表框,从中选择“畅想未来”,打开“畅想未来”站点。

(2)右键单击站点根文件夹,从弹出的快捷菜单中选择“新建文件夹”命令,在本地站点的根文件夹下创建一个新文件夹。

第4章 在网页中建立各种超级链接

第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”选项的含义与 框架有关。
网页设计与制作

《第1章 第4节 建立网页间的超链接》作业设计方案-初中信息技术河大版23第二册自编模拟

《第1章 第4节 建立网页间的超链接》作业设计方案-初中信息技术河大版23第二册自编模拟

《建立网页间的超链接》作业设计方案(第一课时)一、作业目标本次作业旨在帮助学生掌握建立网页间超链接的基本方法,提高他们的网页制作技能。

通过完成作业,学生将能够:1. 了解超链接的基本概念和作用;2. 学习并掌握在网页中创建超链接的方法;3. 学会在不同网页之间建立链接。

二、作业内容1. 任务一:创建文本超链接a. 在指定的网页上,选择一段文本或图片,为其创建超链接;b. 链接目标可以是同一网页内的其他位置,也可以是其他网页;c. 确保链接正确有效,可正常跳转。

2. 任务二:制作锚点超链接a. 在一个网页中创建一个锚点(使用<a>标签的name属性),例如“[更多信息](link)”;b. 在其他网页中,找到合适的位置创建对该锚点的超链接;c. 确保链接返回到正确的位置,且具有清晰的描述。

3. 任务三:交叉链接测试a. 在本班同学的网页中创建超链接,链接到其他同学的网页;b. 检查链接是否可用,是否能够正常跳转;c. 互相帮助,共同发现问题,解决问题。

三、作业要求1. 独立完成:学生需独立完成作业,不得抄袭;2. 正确性:确保每个超链接都正确有效,可正常跳转;3. 多样性:学生可以选择不同的网页,创建不同类型的超链接,以展示自己的创意和技能;4. 规范性:提交作业时,请确保提交的网页格式正确,文件名清晰地标识出任务类型。

四、作业评价1. 评价标准:评价学生作业的完成情况、正确性和创新性;2. 评价方式:教师评价与同学互评相结合,根据评价标准给出相应的分数或反馈;3. 评价时间:作业提交后,将在下次上课时进行作业评价和反馈。

五、作业反馈1. 学生将收到关于自己作业的反馈和改进建议;2. 对于在作业中遇到困难的学生,教师将提供额外的辅导和支持;3. 鼓励学生在小组内互相交流和分享经验,共同提高。

通过本次作业,学生将能够掌握建立网页间超链接的基本方法,提高他们的网页制作技能。

同时,通过独立完成作业、互相交流和评价,学生将更好地理解和掌握相关知识,培养团队合作精神和问题解决能力。

网页设计与制作项目7超链接

网页设计与制作项目7超链接

鼠标指向导航图像
7.2 网页制作
步骤 10 重复同样的操作,插入鼠标经过图像,在 图像名称的文本输入框中输入“酒店机票”,用与设置 “首页”相同的方法选择所需要的图像,【插入鼠标经过 图像】对话框中的参数设置如图所示。
【插入鼠标经过图像】对话框参数设置
7.2 网页制作
7.2.2 创建文本与图片超链接 步骤1 创建文本超级链接。在【属性】面板上单击 “页面属性”按钮 ,设置文本链接的属性,参数设置如 图所示。 步骤2 在“目的地”页面中选择文本“预订酒店”, 如图所示;在【属性】面板上单击“链接(L)”右侧的 “浏览文件”按钮 。
步骤7 单击“预览”按钮 ,当鼠标指向 文本“黄山”图片时,单击即可跳转到“黄山” 页面上。 步骤8 按照相同的操作,可以完成图片 “苏州园林”、“桂林”的超级链接。
7.2 网页制作
7.2.3 创建图像映像超链接 步骤1 在“目的地”页面上单击“地图”图片,在 【属性】面板单击“矩形热点工具”按钮 ,在地图上的 “北京”处绘制“矩形”,如图所示。 步骤2 在【属性】面板上单击“链接(L)”右侧的 “浏览文件”按钮 ,或直接输入超级链接的目标文件名, 如图所示。
“目的地”页面效果
7.2 网页制作
7.2.1 设置导航条超链接 步骤1 启动Dreamweaver CS6后,在letuweb 站点中创建新文档,命名为“destination.html”。 步骤2 在destination文档中绘制表格布局页面,输 入相应的文字、选择图像等素材,插入页面顶部LOGO及其 他元素,如图所示。
7.2 网页制作
步骤3 在表格的第3行定位光标,执行【插入】| 【图像对象】|【鼠标经过图像】菜单命令,弹出【插 入鼠标经过图像】对话框,如图所示。

《第四单元 第13课 制作网站 一、 创建站点》作业设计方案-初中信息技术人教版七年级上册自编模拟

《第四单元 第13课 制作网站 一、 创建站点》作业设计方案-初中信息技术人教版七年级上册自编模拟

《创建站点》作业设计方案(第一课时)一、作业目标本次作业旨在帮助学生掌握创建站点的基本知识和技能,包括站点的规划、网页的设计和布局、图片和文字的编辑等。

通过作业,学生将能够独立完成一个简单的个人网站,提高他们的信息技术应用能力和创新能力。

二、作业内容1. 站点规划:学生需要首先进行站点的规划,包括确定网站的主题、内容、功能和布局等。

要求他们使用思维导图或流程图等工具,清晰地表达出自己的规划思路。

2. 网页设计:学生需要使用网页编辑器(如Dreamweaver)设计一个网页,包括标题、段落、图片、链接等基本元素。

要求他们合理布局,突出主题,使用合适的字体和颜色。

3. 图片编辑:学生需要使用图片编辑软件(如Photoshop)对网页中的图片进行编辑,包括调整大小、裁剪、滤镜效果等。

要求他们合理使用编辑工具,使图片符合网页风格。

4. 文字编辑:学生需要使用文字编辑软件(如Word)编写网站介绍、版权声明等内容。

要求他们使用合适的字体、字号和颜色,使文字易于阅读。

5. 整合与测试:学生需要将各个部分整合在一起,进行测试和调试,确保网站能够正常运行,并能够正确链接和显示图片等。

三、作业要求1. 独立完成:学生需要独立完成作业,不能抄袭或使用他人作品。

2. 质量要求:要求学生在作业中体现出良好的信息技术应用能力和创新能力,符合网站的基本规范和要求。

3. 时间安排:学生需要在规定的时间内完成作业,建议学生在第一课时完成规划,第二课时完成网页设计和图片编辑,第三课时完成文字编辑和整合测试。

4. 反馈与指导:教师将在作业评价部分提供反馈和建议,帮助学生改进和完善作业。

如有需要,学生可在此环节向教师咨询和求助。

四、作业评价本次作业的评价将综合考虑以下因素:1. 网站的规划是否清晰、合理;2. 网页的设计和布局是否符合要求;3. 图片编辑的效果是否符合网站风格;4. 文字编辑是否规范、易于阅读;5. 网站的整合和测试是否正常。

DW网页设计教学—单元3 创建超级链接与导航栏

DW网页设计教学—单元3 创建超级链接与导航栏

教学目标
教学方法 课时建议
任务驱动法、理论实践一体化、讲练结合 8课时(包含考核评价)
【3.1
操作准备】
在本地硬盘(例如D盘)中创建一个文件夹 “网页设计与制作案例”,将光盘中的“单元3” (包括所有子文件夹以及文件)拷贝到该文件夹中。 使用创建站点向导创建名称为“单元3”的本地 站点。 打开文件夹“3-1”中的网页文档0303.html, 在该网页的“<head>”与“</head>”之间添加以下 代码,链接外部样式文件。
保存网页0302.html,然后按快捷键F12浏览其 效果,如图3-12所示,单击各个链接,观察其链接效 果是否正确。
【3.3
技术提升】
【任务3-6】创建下拉菜单和自动展开菜单 【任务描述】 (1)创建纵向下vaScript代码,实现菜单的展开与收 缩功能。
图3-12 网页0302.html的浏览效果
【任务实施】


1.创建图片形式的内部链接 2.创建电子邮件链接 3.创建锚点链接
(1)插入一个命名锚记 (2)创建锚点链接

4.创建图像热点链接


(1)选中绘制热点区域的图像 (2)绘制矩形热点区域
5.为“设为首页”和“收藏易购”设置链接
【任务实施】

1.创建左侧帮助导航栏 2.创建文本形式的超链接

(1)使用【指向文件】按钮创建超链接 (2)使用【属性】面板定义超链接 (3)使用菜单命令和对话框定义超链接
使用类似方法创建其他15个超链接。


3.查看左侧帮助导航栏的HTML代码 4.保存网页与浏览网页效果
保存网页0303.html,然后按快捷键F12,左侧帮助 导航栏的浏览效果如图3-10所示。

网页设计与制作 项目 5使用超链接

网页设计与制作  项目 5使用超链接
(2)在“文本”文本框中显示了链接的 源文本内容,在E-mail文本框中输入目 标电子邮箱的完整地址,单击“确定”
注意:在创建E-mail链接时,mailto:和 “@”是必不可少的
5.2.5 创建空链接
空链接实际上是一个未指派目标的链接,利用 空链接可以激活网页上的对象或文本。
(1)打开HTMI,选择文字或图片

Javascript:window.close():关闭窗口
任务2 管理超链接
5.3.1 链接检查器的使用
在DreamweaverCS4中可以使用链接检查器来 管理当前站点的超链接,帮助站点制作者检查站 点的链接是否有效,统计有效连接、无效链接、 断开连接和外部链接的个数,修改断开或无效的 链接。
2.图像地图
图像地图,也称为图像热区、图像热点,在“属 性”面板上的矩形、圆形和多边形热点工具建立 需要的热点区域
5.2.3 创建锚点连接
1.创建目标在本页上的锚点链接
(1)打开HTML,光标定位在热字前面, “插入”——“命名锚记”命令,或者在“常 用”选项卡中单击“命名锚记”按钮
(2)在“锚记名称”文本框中输入锚记的 名称abc,单击“确定
(2)在“属性”面板“链接”下拉列表中输入 “javascript:;”或输入“#”就可以了
5.2.6 创建文件下载链接
选择需要创建文件下载链接的源文本,在 “属性”面板“链接”下拉列表输入目标文件的 URL
5.2.7 创建脚本链接
网站中的超链接不但可以实现网页页面之间的跳转, 还可以直接调用Javascript代码,这种超链接就成为脚本 链接或Javascript链接。 (1)选定文字或图片,在“属性”面板“链接”下拉列表 中输入“Javascript :”,然后输入一些Javascript代码 或函数调用即可
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
第3章
建立超级链接
3.1 超链接的概念
所谓的超链接是指从一个网页指向一个 目标的连接关系,这个目标可以是另一个网 页,也可以是相同网页上的不同位置,还可 以是一个图片、一个电子邮件地址、一个文 件,甚至是一个应用程序。 而在一个网页中用来超链接的对象,可 以是一段文本或者是一个图片。当浏览者单 击已经链接的文字或图片后,链接目标将显 示在浏览器上,并且根据目标的类型来打开 或运行。
③ vlink属性:已经被访问过的可链接文字的颜色, 默认为粟色(Maroon)。
④ alink属性:正被单击的可链接文字的颜色,
默认为红色(Red)。
超链接的显示效果示例
示例:ห้องสมุดไป่ตู้
<HTML> <HEAD> <TITLE>超文本链接标记实例</TITLE> </HEAD> <BODY vlink=green > 长沙理工大学<br> <a name="A1">跳转锚记1。</a> <br>长<br>沙<br>理<br>工<br>大<br>学<br><br><br><br><br><br> <a href=“a1.html”>在本窗口中打开一个新网页</a><br> <a href=“a1.html” target=“_blank”>在新窗口中打开一个网页</a><br> <a href=“#A1”>向前跳转到锚记1。</a>、 <a href="#A2">向后跳转到锚记2。</a> <br><br><br><br><br><br><br><br> <br>长<br>沙<br>理<br>工<br>大<br>学<br><br><br> <a href=ls.rar>文件下载</a> <br><br> <a name="A2">锚记2。</a><br> <a href=mailto:djs_mail@>请给我写信</a> </BODY> </HTML>
点击“请给我写信”将打开本地的电子邮件客户端
程序,方便用户编写电子邮件。
5)超链接的显示效果
HTML文件中超链接文字颜色的设置,是由<body> 标签中的text、alink、vlink与link属性所控制。其中:
① text属性:非可链接文字的颜色,
默认为黑色(Black)。
② link属性:可链接文字的颜色,默认为蓝色(Blue)。
3)文件下载
• 当超链接目标为浏览器不能识别的
文件格式时,那么就自动生成了文
件下载链接。
• <a href=abc.zip>下载</a>
4)Email链接
• <a href=mailto:i@>Email</a>
• 示例:
<a href=mailto:djs_mail@>请给我写 信</a>
于定位Web上的文档信息。
• 一个 URL 包括四部分:协议、计算机
地址、端口号、文件路径。
协议://计算机:端口号/文件路径
一个典型的URL为:
:80
超链接基础——绝对URL
绝对URL常用于引用另一网络服务器上的链接,它 是指资源的完整地址,包括URL所有四个部分,即:
• 要链接的资源位于下级目录时,需先输入
下级文件夹名,后跟一个“/”号,再输入
文件名,如content/computer.html。
• 当要链接的资源不在当前文件夹时,则需
要添加路径信息。
不同类型的超链接
按照链接路径的不同,网页中超链接一 般分为以下3种类型: 内部链接:即在同一个站点内的不同页面 之间相互联系的超链接。 锚点链接:可以链接到网页中某个特定位 置的链接。 外部链接:把网页与Internet中的目标相 联系的链接。
本章结束!
href = 页面的URL#该文件中的锚点 >link</a>
• <a href= # >blank link</a>
各种常用超文本链接标记应用的实例
<HTML> <HEAD> <TITLE>超文本链接标记实例</TITLE> </HEAD> <BODY> 大<br>家<br>好<br> <a name="A1">跳转锚记1。</a> <br><br><br><br><br> 长<br>沙<br>理<br>工<br>大<br>学<br> <a href=“a1.html”>点击此处将跳转到另一个网页。</a><br> <a href=“a1.html” target=“_blank”>点击此处将在一个新的浏览器窗口打开 另一个网页。 </a><br> <a href="#A1">向前跳转到锚记1。</a>、<a href="#A2">向后跳转到锚记 2。</a> 计<br>算<br>机<br>与<br>通<br>信<br>工<br>程<br>学<br>院 <br><br><br><br> 长<br>沙<br>理<br>工<br>大<br>学<br> <a name="A2">锚记2。</a><br> </BODY> </HTML>
显示的则是一堆乱码,且在为锚记添加链接的时候,
以数字作为锚记名称的开头。
③ 锚记名称区别英文字母的大小写。
④ 锚记名称间不能含有空格,也不能含有特殊字符。
链接锚记时,注意以下事项:
① 在#和锚记名之间不要留有空格,否则链接 会失败。
② 符号#必须是半角符号,而不能为全角符
号。
锚点链接
• 指向其他页面内锚点的超链接:<a
协议://计算机域名/路径/文档名
超链接基础——相对URL
• 相对URL是指网站内部资源相对于当前页 面的地址,它包含从当前页面指向目标页
面位置的路径。
• 如果要链接的资源位于当前文件夹中,就
只要输入文件名即可,如help.html。
• 当要链接的资源不在当前文件夹时,则需
要添加路径信息。
超链接基础——相对URL
• 要链接的资源位于下级文件夹时,需先输 入下级文件夹名,后跟一个“/”号,再输 入文件名,如content/computer.html。 • 要链接的资源在上级文件夹或上级文件夹
的其他下级文件夹中时,可使用“../”表示
上级文件夹路径,后面再跟上具体路径信
息。如 ../index.html,再
超链接基础——相对URL
2)锚点(书签)链接
• 使用页面内的超链接,首先需要定义锚
点,然后在超链接中指向该锚点。 定义
锚点应使用<a name=xxx></a>
• 指向锚点的超链接为: <a href=#xxx>link</a>
锚点命名的注意事项
① 只能使用字母和数字,锚记命名不支持中文。虽然 在插入锚记对话框中能输入中文,但在属性面板上 也无法工作。 ② 锚记名称的第1个字符最好是英文字母,一般不要
Target属性
<a>…</a>标记中的target属性称为目标 属性,用于指定新引用的资源显示在哪一个 窗口中。Target属性取值分为以下两种情况: 如果需要新引用的页面显示在本窗口中, 亦即复盖当前页面的内容,应该不为target 属性赋值。 如果需要另开一个新窗口来显示新引用的 页面,则可为target属性赋值为: target=“window name”。其中,target属性 取值为一个空窗口名“_BLANK”
不同类型的超链接
如果按照使用对象的不同,网页中的 链接又可以分为: 文本超链接 图像超链接 E-mail链接 锚点链接 多媒体文件链接
空链接
3.2 HTML设置超链接
文字超链接 书签链接 文件(下载)链接 Email链接
超链接的显示效果
1)文本超链接标签
1.格式: <a href="链接位置" target="窗口名称">超链接名称 </a> 2.说明: ① 超链接名称就是链接的源点,当鼠标被移到超链接 名称处时会变成手状 。 ② 链接位置就是超链接的目标,可使用URL指定。 URL的格式是由通讯协议、链接地址与文件位置所组成, 语法如下: 通讯协议://链接地址/文件位置.../文件名称 ③ target用于指定打开链接的目标窗口。
相关文档
最新文档