湖北职院计科系精品课程
教学项目三 网页中图片的处理及链接的实现
【 基本内容 】
讲解图片的插入、图片的处理、图片的分块链接、区域链接及
利用表格实现对网页结构布局
【 教学要求 】
使学生熟悉熟练掌握图片的插入、图片链接的操作及表格在
网页结构布局中的使用
湖北职院计科系精品课程
一、案例设计 个人音乐网站
湖北职院计科系精品课程
二、图片的处理
1、图片的插入
2、图片的处理
文本：在图像中加入文本
自动缩略图：将选中的图像生成一个图像的缩略图
绝对位置：在定义层时用于设置图像在当前层的绝对位置
上移一层：将图像上移一层
下移一层：将图像下移一层
向左旋转：将图像向左旋转 90度
向左旋转：图像向左旋转 90度
水平翻转：图像沿垂直线对称翻转
垂直翻转：图像沿水平线对称翻转
加大对比度：增加图像前景和背景的对比度
湖北职院计科系精品课程
降低对比度,
增加减低亮度,
剪裁：对图像进行剪裁
设置透明的颜色：将图像中某种颜色变成透明色
黑白模式：彩色图像转换为黑色图像
淡化：图像的颜色进行淡化
凹凸效果：图像变为 3D图像
湖北职院计科系精品课程
案例设计二：图片的常见处理
湖北职院计科系精品课程
案例设计三,图片的分块链接
(一 ) 新建站点，并在站点下新建主页 index.htm,并分别建立网页
1.htm,2.htm,3.htm,4.htm,5.htm,6.htm
(二 )将图片在 Photoshop中分割成六部分,并分别保存,
tp04-01.jpg,tp04-02.jpg,tp04-03.jpg,tp04-04.jpg,tp04-05.jpg、
tp04-06.jpg
步骤,
湖北职院计科系精品课程
(三 ) 在主页插入表格, 在单元格中插入图片, 设定超级链, 在
各子网页中设计返回
主页效果如下, 在不同单元格图片上单击时, 可以打开相应的
超级链接
湖北职院计科系精品课程
链接一,
湖北职院计科系精品课程
链接二,
湖北职院计科系精品课程
链接三,
湖北职院计科系精品课程
链接四,
湖北职院计科系精品课程
链接五,
湖北职院计科系精品课程
链接六,
湖北职院计科系精品课程
案例设计四,图片热区链接的网页
长方形热点：在图像上定义长方形热点, 在热点定义超级链接
圆形热点：在图像中定义圆形热点, 图形热点上定义超级链接
多边形热点：定义多边形热点
突出显示热点：用于在图像中突出显示热点
湖北职院计科系精品课程
步骤,（一）设计站点，并设计网页 jiaoyou.htm
湖北职院计科系精品课程
(二 )在 jiaoyou.htm中将图片中的文字进入和注册区域设定矩形热
区链接与圆形区域链接。单击进入时，打开 jin.htm,单击注册时，
打开 zhuce.htm
湖北职院计科系精品课程
湖北职院计科系精品课程
湖北职院计科系精品课程
【课后小结】
通过本次课的学习，学会利用表格布局网页中的内容，
并能熟练进行图片的插入、处理、分块链接和热区链接操
作。