HTML5+CSS3网页设计与制作课件：添加超链接_第1页
HTML5+CSS3网页设计与制作课件：添加超链接_第2页
HTML5+CSS3网页设计与制作课件：添加超链接_第3页
HTML5+CSS3网页设计与制作课件：添加超链接_第4页
HTML5+CSS3网页设计与制作课件：添加超链接_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5+CSS3网页设计与制作添加超链接项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。项目目标D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件,旨在协助您完成待办事务比如生日提醒,旅行安排,会议准备等以便更好的进行时间和事项管理。为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。项目情境图1-1-1项目移动端和电脑端页面截图网页制作的一般流程如下：项目分析项目发布需求分析规划设计实施测试交付根据“移动优先”原则，我们需要制定项目完成的计划：项目分析时间段1时间段2时间段3时间段4时间段5分析规划实施阶段1移动端内容制作阶段2移动端格式制作阶段3响应式制作测试与交付D清单前端开发甘特图时间进度任务制作网页内容能够表述超链接的两种常见用法。能够识别和编写网页中的超链接。能够应用不同的超链接方式完成D清单网页菜单栏等内容的超链接制作。任务目标

添加超链接本次任务要求分析D清单网页中超链接内容，在的基础上添加D清单网页的超链接。完成后的部分效果图如图1-5所示。任务描述图1-5添加超链接后的网页效果图

添加超链接要完成D清单网页中超链接的制作，需要：学习HTML超链接标签的用法、语法；学习HTML超链接标签的href、name、target属性；分析D清单页面中的超链接内容，正确运用超链接标签完成D清单网页中的超链接制作。D清单网页效果图的超链接内容分析，如图1-5-1所示（红色框部分），包括菜单栏超链接、按钮超链接、下载文件超链接等内容。任务分析

添加超链接任务分析图1-5-1D清单网页效果中的超链接内容分析

添加超链接知识与技能准备超链接标签<a>的两种使用方式：使用href属性创建指向另一个文档的链接来跳转到新的文档。使用name属性创建文档内的书签来跳转到文档中的某个部分。1、超链接的用法网页中使用超级链接来跳转到新的文档或者当前文档中的某个部分。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。知识与技能准备超链接标签<a>是给文本内容加修饰标签，添加后默认链接样式为蓝色文字，有下划线。其语法形式如下：2、超链接的语法<ahref=”链接地址”>超链接文本内容</a>知识与技能准备href属性的值可以是任何有效文档的相对或绝对URL。（1）绝对URL绝对URL是一般指向另一个站点。这种方式通常用于链接文档的位置与目前浏览的网页位于不同的服务器。（2）相对URL相对URL是指向站点内的某个文件。（3）锚URL锚URL是指向页面中的锚点。锚点能完成页面的跳转。3、超链接的href属性打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-5-1给文字添加超链接1234<p><ahref="test.html">本相对链接</a>是一个指向本网站中的一个页面的链接。</p><p><ahref="

">本绝对链接</a>是一个指向万维网上的页面的链接。</p>显示效果如下：课堂练习1-5-1给文字添加超链接图1-5-2给文字添加超链接知识与技能准备name属性规定锚的名称。有些HTML页面中会有书签，在网页中称为锚点，命名锚有两个方法，分别是：（1）name命名锚（2）id命名锚id属性相当于在文档中放置了一个标识，而href属性就可以直接链接到这个标识中。注意：锚的名称是由用户自行命名的，但是要注意锚点名称不能使用数字开头，要使用英文开头。4、超链接的name属性<aname=”锚点名称”>锚点所在位置文字</a><aid=”锚点名称”>锚点所在位置文字</a>打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-5-2为页面添加锚点1234567891011121314151617<p><aid="top">唐诗三百首</a></p><p><a>出塞</a></p><p><a>春晓</a></p><p><a>寻隐者不遇</a></p><p><aname="sec1">《出塞》</a></p><h5>[唐]王昌龄</h5><p>秦时明月汉时关，万里长征人未还。</p><p>但使龙城飞将在，不教胡马度阴山。</p><p><aname="sec2">《春晓》</a></p><h5>[唐]孟浩然</h5><p>春眠不觉晓，处处闻啼鸟。</p><p>夜来风雨声，花落知多少。</p><p><aname="sec3">《寻隐者不遇》</a></p><h5>[唐]贾岛</h5><p>松下问童子，言师采药去。</p><p>只在此山中，云深不知处。</p><p><a>回到顶部</a></p>显示效果如下：课堂练习1-5-2为页面添加锚点图1-5-3为页面添加锚点从图1-5-3中可以看到加入锚点后页面中是没有任何变化的，而且书签要实现跳转就要配合href属性一起使用，要在href属性中指定对应的锚点名称，并在名称前加一个“#”符号。打开课堂练习1-5-2的代码，在<body>标签中输入如下代码：课堂练习1-5-3在练习1.5-2基础上修改代码实现锚点的跳转1234567891011121314151617<p><aid="top">唐诗三百首</a></p><p><ahref="#sec1">出塞</a></p><p><ahref="#sec2">春晓</a></p><p><ahref="#sec3">寻隐者不遇</a></p><p><aname="sec1">《出塞》</a></p><h5>[唐]王昌龄</h5><p>秦时明月汉时关，万里长征人未还。</p><p>但使龙城飞将在，不教胡马度阴山。</p><p><aname="sec2">《春晓》</a></p><h5>[唐]孟浩然</h5><p>春眠不觉晓，处处闻啼鸟。</p><p>夜来风雨声，花落知多少。</p><p><aname="sec3">《寻隐者不遇》</a></p><h5>[唐]贾岛</h5><p>松下问童子，言师采药去。</p><p>只在此山中，云深不知处。</p><p><ahref="#top">回到顶部</a></p>显示效果如下：课堂练习1-5-2为页面添加锚点图1-5-4为页面添加锚点知识与技能准备如果不使用href属性，则不可以使用target如属性，target属性是让用户定义被链接的文档在何处显示的。默认情况下，超链接打开的新页面的方式是在当前页面打开，用户也可自行修改打开方式，其语法形式如下：5、target属性<ahref=”链接地址”target=”目标页面打开方式的值”>链接文字内容</a>值意义_blank在新窗口中打开目标页面_self默认值，在当前页面打开目标页面_parent在父框架中打开目标页面_top在整个窗口中打开目标页面表1-5-2属性值的取值及其意义打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-5-4在新窗口中打开页面1<ahref="1.5-3.html"target="_blank">在新窗口中打开1.5-3.html文档</a>显示效果如下：图1-5-5在新窗口中打开页面任务实施1、打开中的index.html文件。2、完成D清单网页中菜单栏超链接代码。参考代码如下：3、参照步骤2的方法，完成正文中包含超链接的内容。123456789101112<header><nav><ul><li><ahref="#home">首页</a></li><li><ahref="#about">功能介绍</a></li><li><ahref="#apply">下载应用</a></li><li><ahref="#member">高级会员</a></li><li><ahref="#help">帮助中心

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论