项目一 第一阶段 任务5 添加超链接-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用HTML5+CSS3制作响应式网页 项目一 项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。 项目目标 D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件, 旨在协助您完成待办事务比如生日提醒, 旅行安排, 会议准备等以便更好的进行时间和事项管理。 为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。 前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。 项目情境 图1-1-1 项目移动端和电脑端页面截图 网页制作的一般流程如下： 项目分析 项目发布 需求分析 规划设计 实施 测试 交付 根据“移动优先”原则，我们需要制定项目完成的计划： 项目分析 时间段1 时间段2 时间段3 时间段4 时间段5 分析规划 实施 阶段1 移动端内容制作 阶段2 移动端格式制作 阶段3 响应式制作 测试与交付 D清单前端开发甘特图 时间 进度 任务 制作网页内容 第一阶段 能够表述超链接的两种常见用法。 能够识别和编写网页中的超链接。 能够应用不同的超链接方式完成D清单网页菜单栏等内容的超链接制作。 任务目标 任务5 添加超链接 本次任务要求分析D清单网页中超链接内容，在任务4的基础上添加D清单网页的超链接。完成后的部分效果图如图1-5所示。 任务描述 图1-5 添加超链接后的网页效果图 任务5 添加超链接 要完成D清单网页中超链接的制作，需要： 学习HTML超链接标签的用法、语法； 学习HTML超链接标签的href、name、target属性； 分析D清单页面中的超链接内容，正确运用超链接标签完成D清单网页中的超链接制作。 D清单网页效果图的超链接内容分析，如图1-5-1所示（红色框部分），包括菜单栏超链接、按钮超链接、下载文件超链接等内容。 任务分析 任务5 添加超链接 任务分析 图1-5-1 D清单网页效果中的超链接内容分析 任务5 添加超链接 知识与技能准备 超链接标签<a>的两种使用方式： 使用href属性创建指向另一个文档的链接来跳转到新的文档。 使用name属性创建文档内的书签来跳转到文档中的某个部分。 1、超链接的用法 网页中使用超级链接来跳转到新的文档或者当前文档中的某个部分。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 知识与技能准备 超链接标签<a>是给文本内容加修饰标签，添加后默认链接样式为蓝色文字，有下划线。其语法形式如下： 2、超链接的语法 <a href=”链接地址”>超链接文本内容</a> 知识与技能准备 href 属性的值可以是任何有效文档的相对或绝对URL。 （1）绝对URL 绝对URL是一般指向另一个站点。这种方式通常用于链接文档的位置与目前浏览的网页位于不同的服务器。 （2）相对URL 相对URL是指向站点内的某个文件。 （3）锚URL 锚URL是指向页面中的锚点。锚点能完成页面的跳转。 3、超链接的href属性 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-5-1 给文字添加超链接 1 2 3 4 <p><a href="test.html">本相对链接</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="https://hao.360.com/">本绝对链接</a> 是一个指向万维网上的页面的链接。</p> 显示效果如下： 课堂练习1-5-1 给文字添加超链接 图1-5-2给文字添加超链接 知识与技能准备 name属性规定锚的名称。有些HTML页面中会有书签，在网页中称为锚点，命名锚有两个方法，分别是： （1）name命名锚 （2）id命名锚 id属性相当于在文档中放置了一个标识，而href属性就可以直接链接到这个标识中。 注意：锚的名称是由用户自行命名的，但是要注意锚点名称不能使用数字开头，要使用英文开头。 4、超链接的name属性 <a name=”锚点名称”>锚点所在位置文字</a> <a id=”锚点名称”>锚点所在位置文字</a> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-5-2 为页面添加锚点 1 2 3 4 5 6 7 8 9 10 11 1