Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务3-图像和超链接课件_第1页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务3-图像和超链接课件_第2页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务3-图像和超链接课件_第3页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务3-图像和超链接课件_第4页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务3-图像和超链接课件_第5页
已阅读5页，还剩33页未读， 继续免费阅读

下载本文档

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

文档简介

任务3图像和超链接第二单元HTML5语言基础任务3图像和超链接第二单元HTML5语言基础1锚点标签图像标签绝对路径和相对路径超链接标签掌握学习目标锚点标签图像标签绝对路径和相对路径超链接标签掌握学习目标2网页中常用的图片格式了解:学习目标网页中常用的图片格式了解:学习目标3实战演练——制作网页技术介绍页面任务目标实战演练——制作网页技术介绍页面任务目标4强化训练——制作“文章故事网”页面任务目标强化训练——制作“文章故事网”页面任务目标51.图像标签语法格式：<imgsrc="url"alt="some_text">图像标签的属性：属性描述属性描述src规定显示图像的URL。alt图像不能显示时的替换文本。align规定如何根据周围的文本来排列图像。（不推荐使用）border定义图像周围的边框。（不推荐使用）height定义图像的高度。width设置图像的宽度。hspace定义图像左侧和右侧的空白。（不推荐使用）vspace定义图像顶部和底部的空白。（不推荐使用）title光标停留在图像上时，显示提示文字。知识准备1.图像标签语法格式：<imgsrc="url"alt6示例：在网页中插入图像<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>无标题文档</title></head><body><center><imgsrc="images/1.gif"alt="女孩"title="女孩"><imgsrc="images/2.gif"width="240"height="320"><imgsrc="images/3.gif"border="1"><imgsrc="images/4.gif"></center></body></html>知识准备示例：在网页中插入图像<!DOCTYPEhtml>知识准备72.绝对路径和相对路径绝对路径：指文件或目录在硬盘上真正的路径。比如，图像top.jpg存放在c盘的images文件夹下，那么该图像的绝对路径表示方法为c:\images\top.jpg。相对路径：相对于当前文件的路径。网页中的图片、超链接等一般都使用相对路径来表示。知识准备2.绝对路径和相对路径绝对路径：指文件或目录在硬盘上真正的82.绝对路径和相对路径相对路径常见的表示方法Html文档的位置图像的位置相对路径情形说明c:\democ:\demo<imgsrc="top.jpg">图文均在同一目录c:\democ:\demo\images<imgsrc="images/top.jpg">图在网页下一层目录c:\democ:\<imgsrc="../top.jpg">图在网页上一层c:\democ:\images<imgsrc="../images/top.jpg">图文在同一层但不同目录提示：“../”指回到上一层目录，“images/”指进入下一层目录images，“../images/”指回到上一层目录，然后再进入目录images中。知识准备2.绝对路径和相对路径相对路径常见的表示方法Html文档的9示例：绝对路径和相对路径<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>无标题文档</title></head><body><center><imgsrc="../images/1.gif"title="图片1"alt="图片1"><imgsrc="2.gif"title="图片2"alt="图片2"width="240"height="320"border="1"><imgsrc="../3.gif"title="图片3"alt="图片3"><imgsrc="images/4.gif"alt="图片4"title="图片4"></center></body></html>知识准备示例：绝对路径和相对路径<!DOCTYPEhtml>知识准103.超链接标签语法格式：<ahref="url"target="目标窗口的弹出方式">链接文本</a>href属性：描述链接的地址target属性：描述链接页面的打开方式_self：默认值，表示在原网页窗口中打开链接_blank：在新窗口中打开链接知识准备3.超链接标签语法格式：<ahref="url"tar11示例：在网页中插入超链接<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>无标题文档</title></head><body><ahref=""target="_self">百度主页，原窗口打开</a><br><ahref=""target="_blank">新浪主页，新窗口打开</a><br><ahref=""title="百度"target="_blank"><imgsrc="images/baidu.png"width="270"height="129"></a></body></html>提示：href属性的内容可以是站点内网页文件的相对路径，也可以是网页的网址等。知识准备示例：在网页中插入超链接<!DOCTYPEhtml>提示：124.锚点标签锚点链接：可以帮助浏览者快速定位网页内的目标内容，实现网页内的链接跳转。创建方法：第一步：使用<aname="锚点名称"></a>创建目标位置的锚点名称第二步：使用<ahref="#锚点名称">链接文本</a>创建锚点链接这样，鼠标点击链接文本，网页窗口即可定位到目标位置。知识准备4.锚点标签锚点链接：可以帮助浏览者快速定位网页内的目标内13示例：在网页中插入锚点链接（因篇幅有限，仅列出部分代码和效果截图）…………<p><aname="menu"></a><ahref="#item1">节气谣谚诗歌</a><br><ahref="#item2">节气分类</a><br><ahref="#item3">节气的安排及含义</a><br><ahref="#item4">二十四番花信风</a><br><ahref="#item5">各地有关节气的谚语</a><br></p>…………<aname="item1">节气谣谚诗歌</a>…………<palign="right"><ahref="#menu">回到菜单</a></p>创建锚点链接创建目标位置的锚点名称创建目标位置的锚点名称创建锚点链接知识准备示例：在网页中插入锚点链接（因篇幅有限，仅列出部分代码和效果14案例描述：设计并制作网页技术介绍页面，单击index.html页面中的图片时，跳转显示page1.html页面，网页效果如下。制作网页技术介绍页面index.htmlpage1.htmlpage2.html实战演练案例描述：设计并制作网页技术介绍页面，单击index.htm15案例描述：设计并制作“文章故事网”页面，网页效果如下。制作“文章故事网”页面强化训练案例描述：设计并制作“文章故事网”页面，网页效果如下。制作“1601图像标签02绝对路径和相对路径03超链接标签04锚点标签任务小结01图像02绝对路径和相对路径03超链接标签04锚点任务小结17设计并制作旅游景点网页面，效果如图所示。课后实训设计并制作旅游景点网页面，效果如图所示。课后实训18谢谢观看谢谢观看19任务3图像和超链接第二单元HTML5语言基础任务3图像和超链接第二单元HTML5语言基础20锚点标签图像标签绝对路径和相对路径超链接标签掌握学习目标锚点标签图像标签绝对路径和相对路径超链接标签掌握学习目标21网页中常用的图片格式了解:学习目标网页中常用的图片格式了解:学习目标22实战演练——制作网页技术介绍页面任务目标实战演练——制作网页技术介绍页面任务目标23强化训练——制作“文章故事网”页面任务目标强化训练——制作“文章故事网”页面任务目标241.图像标签语法格式：<imgsrc="url"alt="some_text">图像标签的属性：属性描述属性描述src规定显示图像的URL。alt图像不能显示时的替换文本。align规定如何根据周围的文本来排列图像。（不推荐使用）border定义图像周围的边框。（不推荐使用）height定义图像的高度。width设置图像的宽度。hspace定义图像左侧和右侧的空白。（不推荐使用）vspace定义图像顶部和底部的空白。（不推荐使用）title光标停留在图像上时，显示提示文字。知识准备1.图像标签语法格式：<imgsrc="url"alt25示例：在网页中插入图像<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>无标题文档</title></head><body><center><imgsrc="images/1.gif"alt="女孩"title="女孩"><imgsrc="images/2.gif"width="240"height="320"><imgsrc="images/3.gif"border="1"><imgsrc="images/4.gif"></center></body></html>知识准备示例：在网页中插入图像<!DOCTYPEhtml>知识准备262.绝对路径和相对路径绝对路径：指文件或目录在硬盘上真正的路径。比如，图像top.jpg存放在c盘的images文件夹下，那么该图像的绝对路径表示方法为c:\images\top.jpg。相对路径：相对于当前文件的路径。网页中的图片、超链接等一般都使用相对路径来表示。知识准备2.绝对路径和相对路径绝对路径：指文件或目录在硬盘上真正的272.绝对路径和相对路径相对路径常见的表示方法Html文档的位置图像的位置相对路径情形说明c:\democ:\demo<imgsrc="top.jpg">图文均在同一目录c:\democ:\demo\images<imgsrc="images/top.jpg">图在网页下一层目录c:\democ:\<imgsrc="../top.jpg">图在网页上一层c:\democ:\images<imgsrc="../images/top.jpg">图文在同一层但不同目录提示：“../”指回到上一层目录，“images/”指进入下一层目录images，“../images/”指回到上一层目录，然后再进入目录images中。知识准备2.绝对路径和相对路径相对路径常见的表示方法Html文档的28示例：绝对路径和相对路径<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>无标题文档</title></head><body><center><imgsrc="../images/1.gif"title="图片1"alt="图片1"><imgsrc="2.gif"title="图片2"alt="图片2"width="240"height="320"border="1"><imgsrc="../3.gif"title="图片3"alt="图片3"><imgsrc="images/4.gif"alt="图片4"title="图片4"></center></body></html>知识准备示例：绝对路径和相对路径<!DOCTYPEhtml>知识准293.超链接标签语法格式：<ahref="url"target="目标窗口的弹出方式">链接文本</a>href属性：描述链接的地址target属性：描述链接页面的打开方式_self：默认值，表示在原网页窗口中打开链接_blank：在新窗口中打开链接知识准备3.超链接标签语法格式：<ahref="url"tar30示例：在网页中插入超链接<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>无标题文档</title></head><body><ahref=""target="_self">百度主页，原窗口打开</a><br><ahref=""target="_blank">新浪主页，新窗口打开</a><br><ahref=""title="百度"target="_blank"><imgsrc="images/baidu.png"width="270"height="129"></a></body></html>提示：href属性的内容可以是站点内网页文件的相对路径，也可以是网页的网址等。知识准备示例：在网页中插入超链接<!DOCTYPEhtml>提示：314.锚点标签锚点链接：可以帮助浏览者快速定位网页内的目标内容，实现网页内的链接跳转。创建方法：第一步：使用<aname="锚点名称"></a>创建目标位置的锚点名称第二步：使用<ahref="#锚点名称">链接文本</a>创建锚点链接这样，鼠标点击链接文本，网页窗口即可定位到目标位置。知识准备4.锚点标签锚点链接：可以帮助浏览者快速定位网页内的目标内32示例：在网页中插入锚点链接（因篇幅有限，仅列出部分代码和效果截图）…………<p><aname="menu"></a><ahref="#item1">节气谣谚诗歌</

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

温馨提示

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

最新文档

评论

0/150

提交评论