Web前端开发HTML5 CSS3教案HTML图像标记教案.doc

课程名称 WEB前端开发（1） 课次 7 任务、项目、课题名称 HTML超图像标记 课时 2学时 教学内容 HTML图像标记 常用的图像格式 为图像创建超链接 教学目标 理解HTML图像标记的作用、掌握其使用 教学重点 HTML图像标记 常用的图像格式 为图像创建超链接 教学难点 为图像创建超链接 教学活动及主要环节 复习演示： 为页面与页面之间创建超链接？ 导入新课： 图像是所有网站都具有的重要特征，如何在网页中插入图像呢？ 新授： 一．Web页图像格式 常用的有GIF.JPEG.PNG三种标准的位图格式。 GIF格式 Graphic Interchange Format图形交换格式，是在WEB是应用最广泛的图像格式之一。GIF格式可以高度压缩图像，但它只能包含最多256种颜色，不适于表现真彩色照片或具有渐变色的图片。GIF格式可以支持动画效果。 JPEG格式 Joint PhotoGraphics Expert,联合图形专家组图片格式，是另外一种在WEB上应用最广泛的图像格式。它支持的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的照片和图片。 PNG格式 Portable Networks Graphics,可移植的网络图形格式，是近年来新出现的一种图像格式。 二.插入图像 使用标记img在网页中插入图像。 例如，制作如下效果的页面。 HTML代码如下： html head title无标题文档/title /head body img src=Images/mid2.JPG align=left width=150 height=150 border=2 hspace=20 vspace=20 pnbsp;nbsp;nbsp;nbsp;在西藏自助旅行，为高原神奇的风景如痴如醉的同时，恶劣的自然环境也让我们吃。。。。 /body /html 说明属性的含义。 三．建立图像超链接： 使用a标记也可创建图像的超链接。 例如， a href=./image.html img src=Images/mid2.JPG/a 小结： HTML图像标记 常用的图像格式 为图像创建超链接 作业： 实训二