第2次课 图像标签和链接标签学习目标
- 会使用图像相关标签实现图文并茂的页面【难点】
- 会使用<a>标签创建超链接、锚链接以及功能性链接【难点】
在浏览网页时，随时都可以看到页面上的各种图像，图像是网页中不可缺少的一种元素，下面介绍常见的图像格式和如何在网页中使用图像
一、 图像标签
在日常生活中，使用比较多的图像格式有四种，即JPG、GIF、BMP、PNG。在网页中使用比较多的是JPG、GIF和PNG,大多数浏览器都可以显示这些图像。
(一) 常见的图像格式
- JPG
JPG格式采用的是有损压缩，会造成图像画面的失真，压缩体积小，比较清晰，比较适合在网页中应用。 - GIF
支持透明色，支持动画 - PNG
支持透明色，有些老的浏览器不支持 - BMP
Win的操作系统，不太适用网页
(二) 图像标签的基本语法 - 基本语法
<img src=”图片地址” alt=”图像的替代文字” title=”鼠标悬停提示文字” width=”图片宽度” height=”图片高度”/> - 说明
src:表示图片路径
alt:表示图片无法显示时，替代显示的文本
title:当鼠标移至图片上时显示提示信息。
width和height两个属性分别表示图片的宽度和高度，如果不设置，则使用图片默认的原始大小。
- 示例：图像
效果
核心代码
<img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>
经验
在实际的网站开发中，通常会把网站应用到的图片统一存放在image或images文件夹中。
二、 链接标签
大家在上网时，经常会通过超链接查看各个页面或不同的网站，因此超链接<a>标签在网页中极为常用，下面介绍超链接的用法和应用场合。
(一) 超链接的基本用法
-
基本语法
<a href=”链接地址“ target=”目标窗口位置”>链接文本或图像</a> -
说明
超链接包含两个部分内容，
一是链接地址，即链接的目标，可以是某个网址或文件的路径，对应的属性是href
二时链接文本或图像，单击该文本或图像，将跳转到href属性指定的链接地址
target：指定链接在哪个窗口打开，常用的取值有：
_self：自身窗口
_blank：新建窗口 -
示例：超链接的应用
需求描述
此示例创建二个超链接，分别是文字超链接和图像超链接，单击这两个超链接能够在一个新的窗口中打开hetao.html.
效果
核心代码
<body>
<a href="hetao.html" target="_blank">无漂白薄皮核桃</a>
<a href="hetao.html" target="_blank"><img src="image/hetao.jpg" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/></a>
</body>
经验
当超链接href链接路径为“#”时，表示空链接。
如<a href=”#”>首页</a>
(二) 相对路径和绝对路径
绝对路径：指向目标地址的完整描述，一般指向本站点外的文件，
比如<a href=”http//www.baidu.com”>百度</a>
相对路径：相对于当前页面的路径，一般指向本站点内文件，所以一般不需要一个URL地址的形式。
比如< a href=” login/login.html”>登录</a>
另外，相对路径还经常用到”../”表示当前目录的上级目录，“../../”表示当前目录的上上级目录。
(三) 超链接的应用场合
大家上网时，会发现不同的链接方式，有的链接到其他页面，有的链接到当前页面，还有单击一个链接直接打开邮件。实际上根据超链接的应用场合，可以分为3类
页面链接链接：A页到B页，最常用，用于网站导航。
锚链接:A页甲位置到A页的乙位置或A页甲位置到B页的乙位置
功能性链接：在页面中调用其他程序功能。如电子邮箱、QQ等。
- 页面间链接
描述
页面间的链接就是从一个页面链接到另一个页面。
示例：页面间链接
需求：
创建一个页面，页面中有二个页面间的超链接，分别指向在线学习平台的首页(index.html)和课程列表页面（courseList.html）。
效果
核心代码
<body>
<p><a href="elearing/index.html" target="_blank">YL在线学习平台</a></p>
<p><a href="elearing/courseList.html" target="_blank">YL在线学习课程列表</a></p>
</body>
- 锚链接
常用于目标页内容很多，需定位到目标页内容中的某个具体位置时。例如，网上常见的新手帮助页面，当单击某个超链接时，将跳转到对应帮助的介绍处。
类型
- 从A页面的甲位置跳转到本页中的乙位置
- 从A页面的甲位置跳转到B页面中的乙位置
创建跳转标记 - 创建跳转标记
<a name="marker">乙位置</a> - 创建跳转链接
<a href="#marker">甲位置</a>
示例：锚链接
- 功能性链接
功能性链接比较特殊，当单击链接时不是打开某个网页，而是启动本机自带的某个应用程序，如网上常见电子邮件、QQ、MSN，下面给大家介绍最常用的电子邮件。
代码
QQ
http://wpa.qq.com/msgrd?v=3&uin=你的QQ号码&site=qq&menu=yes
电子邮件
<a href="mailto:wangsh@nbtvu.net.cn">联系我们</a>
示例：邮件链接
三、 课堂练习
(一) 制作电器排行榜
- 训练要点
- 图片和文字混合排版
- 图像标签、标题标签、水平线标签的应用
-
需求说明
制作京东商城家用电器排行榜页面，标题使用标题标签，商品之间使用水平线分隔 -
效果
-
实现思路
- 家用电器排行榜放在标题<h1>标签中
- 图像使用<img/>标签
- 商品之间使用
标签实现分隔
(二) 制作新手指南页面
- 需求说明
制作聚美优品新手指南页面，图片均要加上alt属性，“常见问题”和“用户协议”设置成空链接，“注册帮助”和“登录帮助”设置本页锚链接，分别链接至本页新用户注册和登录帮助处 - 效果
四、 课后作业
(一) 作业1：聚美优品常见问题页面
- 需求说明
制作聚美优品常见问题页面，页面标题和问题使用标题标签完成，问题答案使用段落标签完成，客服温馨提示部分与问题列表之间使用水平线分隔，完成效果如图所示： - 效果
(二) 作业2：聚美优品帮助中心菜单列表
- 需求说明
制作聚美优品帮助中心菜单列表页面，菜单超链接均空链接，菜单中间使用水平线分隔。 - 效果
(三) 作业3：滚筒洗衣机排行榜
- 需求说明
制作洗衣机销售排行 榜，左侧为图片，右侧为图片说明和价格，商品之间使用水平线分隔。 - 完成效果
网友评论