第四章 图片和表格
矢量图与位图
4.1加入图片
常用的 Web网页图像格式包括：
?GIF
?JPEG
?PNG
GIF
GIF（ Graphics Interchange Format）格式的
特点：
?无损压缩
?最多 256色
?能够使用透明色
?交错式 Gif（ interlaced gif）
?动画 Gif
演示 —— 透明 GIF效果
JPEG
JPEG（ Joint Photographic Expert Group）格
式的特点：
?有损压缩
?没有颜色限制
?可以控制压缩比
?渐进式 JPEG（ progressive JPEG）
演示 —— 不同质量的 JPEG
PNG
PNG（ Portable Network Graphics）格式
的特点：
?无损压缩
?没有颜色限制
?支持透明度
常用图像处理软件
?Windows 画图
?照片编辑器
?PhotoShop
?Paint Shop Pro
?PhotoDraw
?Fireworks
?Freehand
?CorelDraw
?Illustrator
?Cool 3D
?Flash
?Visio
使用网页图像的要点
?确保文件较小
?使图像具有所需的像素大小
?采用正确的格式进行优化处理
?控制图像的数量和质量
?合理使用动画
4.1.2设置网页的背景
?使用 <BODY>标记符中不同的属性
1.背景颜色
?在 <BODY>标记符中使用 BGCOLOR属
性可以为网页设置背景颜色。
?在 HTML 中，除了使用颜色名称以外，
还可以用格式 #RRGGBB 来表示颜色。
演示 —— 设置网页背景颜色
背景图案
?使用 BODY 标记符的 BACKGROUND
属性可以设置背景图案。 HTML语句为：
?<BODY BACKGROUND =,image.gif”>
?图像水印效果,bgproperties属性。
演示 —— 设置网页背景图案
4.1.3 插入图像
?IMG 标记符
?Src 属性用于指定要插入的图像的文件名
（包括路径）
?Alt 属性表示图像的简单文本说明
演示 —— 插入图像
设置图像属性
?IMG 标记符
?WIDTH 和 HEIGHT 属性指定图像的显示
大小
?BORDER 属性指定图像的边框
演示 —— width和 height属性
设置图像属性
?IMG 标记符
?align属性设置对齐方式
?hspace属性设置水平方向的空白
?vspace属性设置垂直方向的空白
演示 —— hspace和 vspace属性
使用动画 gif
?什么是动画 gif
?一系列的图像按累进顺序排列，每个图像
的显示与前面一个图像有所不同，当这些
图像连续显示时，动画效果就产生了。
?在网页中插入动画 gif
?与插入普通图片一样用 IMG标记符
演示 —— 动画 gif的效果
4.1.5用图片作为超链接
?演示 ——图像链接
4.2加入表格
?在网页中可以使用多种方式进行版式
设计，以形成一个统一的站点风格并
获得需要的效果。表格和框架是常用
的两种方式，在 Dreamweaver网站制
作工具中还可以使用层。
创
建
表
格
所
需
的
标
记
符
?表格标记符 table
?表格标题 caption
?表格行 tr （ table row）
?表格数据 td （ table data）
?表格表头 th （ table heading）
演示 —— 表格示例
4.2.1建立简单表格
合并单元格
?在 TH 或 TD 标记符中使用 rowspan 属
性进行行合并
?在 TH 或 TD 标记符中使用 colspan 属
性进行列合并
演示 —— 表格的行列合并
边框与分隔线
?Frame属性
?Rules属性
?Border属性
演示 —— 边框与分隔线
控制单元格空白
?Cellspacing属性
?Cellpadding属性
演示 —— 控制单元格空白
表格对齐
?表格的页面对齐 <table align>
?表格内容的对齐
?水平对齐 (align)
?垂直对齐 (valign)
演示 —— 表格的对齐
?表格的页面对齐
?内容的水平对齐
?内容的垂直对齐
使用表格排版
?页面布局
?划分页面区域
?背景色的设置
?嵌套表格
?特殊排版效果 ——表格细线的实现
演示 —— 划分页面区域
?强调：如果要将某网页元素（例如一幅
图像）放到特定位置，首先应想到使用
表格！
演示 —— 表格背景的设置
?Bgcolor设置背景色
?Background设置背景图像
演示 —— 使用嵌套表格
?复杂的网页布局需要借助嵌套表格！
?嵌套表格的方法很简单，只要将表格作
为一个单元格的内容，放置在 <TD>之
后即可。
表格布局综合应用
?综合应用表格的各种属性，可以创建一
些常用的网页效果，例如：网页细线
（大致分为两类：一是表格框线，二是
各种横竖分隔线）。
演示 —— 表格框线
演示 —— 横竖分隔线
演示 —— 综合实例１
演示 —— 综合实例２
演示 —— 综合实例３
演示 —— 综合实例４
演示 —— 综合实例５
?课后习题
?P76-77 1-5题
矢量图与位图
4.1加入图片
常用的 Web网页图像格式包括：
?GIF
?JPEG
?PNG
GIF
GIF（ Graphics Interchange Format）格式的
特点：
?无损压缩
?最多 256色
?能够使用透明色
?交错式 Gif（ interlaced gif）
?动画 Gif
演示 —— 透明 GIF效果
JPEG
JPEG（ Joint Photographic Expert Group）格
式的特点：
?有损压缩
?没有颜色限制
?可以控制压缩比
?渐进式 JPEG（ progressive JPEG）
演示 —— 不同质量的 JPEG
PNG
PNG（ Portable Network Graphics）格式
的特点：
?无损压缩
?没有颜色限制
?支持透明度
常用图像处理软件
?Windows 画图
?照片编辑器
?PhotoShop
?Paint Shop Pro
?PhotoDraw
?Fireworks
?Freehand
?CorelDraw
?Illustrator
?Cool 3D
?Flash
?Visio
使用网页图像的要点
?确保文件较小
?使图像具有所需的像素大小
?采用正确的格式进行优化处理
?控制图像的数量和质量
?合理使用动画
4.1.2设置网页的背景
?使用 <BODY>标记符中不同的属性
1.背景颜色
?在 <BODY>标记符中使用 BGCOLOR属
性可以为网页设置背景颜色。
?在 HTML 中，除了使用颜色名称以外，
还可以用格式 #RRGGBB 来表示颜色。
演示 —— 设置网页背景颜色
背景图案
?使用 BODY 标记符的 BACKGROUND
属性可以设置背景图案。 HTML语句为：
?<BODY BACKGROUND =,image.gif”>
?图像水印效果,bgproperties属性。
演示 —— 设置网页背景图案
4.1.3 插入图像
?IMG 标记符
?Src 属性用于指定要插入的图像的文件名
（包括路径）
?Alt 属性表示图像的简单文本说明
演示 —— 插入图像
设置图像属性
?IMG 标记符
?WIDTH 和 HEIGHT 属性指定图像的显示
大小
?BORDER 属性指定图像的边框
演示 —— width和 height属性
设置图像属性
?IMG 标记符
?align属性设置对齐方式
?hspace属性设置水平方向的空白
?vspace属性设置垂直方向的空白
演示 —— hspace和 vspace属性
使用动画 gif
?什么是动画 gif
?一系列的图像按累进顺序排列，每个图像
的显示与前面一个图像有所不同，当这些
图像连续显示时，动画效果就产生了。
?在网页中插入动画 gif
?与插入普通图片一样用 IMG标记符
演示 —— 动画 gif的效果
4.1.5用图片作为超链接
?演示 ——图像链接
4.2加入表格
?在网页中可以使用多种方式进行版式
设计，以形成一个统一的站点风格并
获得需要的效果。表格和框架是常用
的两种方式，在 Dreamweaver网站制
作工具中还可以使用层。
创
建
表
格
所
需
的
标
记
符
?表格标记符 table
?表格标题 caption
?表格行 tr （ table row）
?表格数据 td （ table data）
?表格表头 th （ table heading）
演示 —— 表格示例
4.2.1建立简单表格
合并单元格
?在 TH 或 TD 标记符中使用 rowspan 属
性进行行合并
?在 TH 或 TD 标记符中使用 colspan 属
性进行列合并
演示 —— 表格的行列合并
边框与分隔线
?Frame属性
?Rules属性
?Border属性
演示 —— 边框与分隔线
控制单元格空白
?Cellspacing属性
?Cellpadding属性
演示 —— 控制单元格空白
表格对齐
?表格的页面对齐 <table align>
?表格内容的对齐
?水平对齐 (align)
?垂直对齐 (valign)
演示 —— 表格的对齐
?表格的页面对齐
?内容的水平对齐
?内容的垂直对齐
使用表格排版
?页面布局
?划分页面区域
?背景色的设置
?嵌套表格
?特殊排版效果 ——表格细线的实现
演示 —— 划分页面区域
?强调：如果要将某网页元素（例如一幅
图像）放到特定位置，首先应想到使用
表格！
演示 —— 表格背景的设置
?Bgcolor设置背景色
?Background设置背景图像
演示 —— 使用嵌套表格
?复杂的网页布局需要借助嵌套表格！
?嵌套表格的方法很简单，只要将表格作
为一个单元格的内容，放置在 <TD>之
后即可。
表格布局综合应用
?综合应用表格的各种属性，可以创建一
些常用的网页效果，例如：网页细线
（大致分为两类：一是表格框线，二是
各种横竖分隔线）。
演示 —— 表格框线
演示 —— 横竖分隔线
演示 —— 综合实例１
演示 —— 综合实例２
演示 —— 综合实例３
演示 —— 综合实例４
演示 —— 综合实例５
?课后习题
?P76-77 1-5题
