图片和表格
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
且要指出文件存放的路径，可以是相对路径， 也可以是绝对路径。图片文件可为GIF格式 或JPEG格式的文件。
9 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
❖ 在浏览器中，作为背景的图片将按原来的 大小复制，重复铺满整个网页。作为背景的 图片文件，要做的很小，以便加快下载速度。
【例4-l】图片背景。
10 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
4.1.3 图片标记
使用图片标记，可以把一幅图片加入 到网页中。 HTML中的<IMG > 标记的作 用就是将图像显示在网页上。
11 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
<IMG >标记的语法规则为： src 属性指出要加
一般形式 属性
a图中局图b值表框h设右平像v设下slosipp片方片为示定的素定的的rgadanc在式与像图图空向数图对宽空ce属eer属属属页 ， 文 素 像 片 间 空 。 片齐 度 间性性性性/。，面 或 字 值 边 左 水 白 以 上布，
<IMG> SRC=URL ALT=Text WIDTH=Length
4 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
• 由于JPEG格式的文件比GIF格式的文件压缩 率高，从而导致JPEG格式文件的图像质量下 降。
• 虽然JPEG文件较小，可在Internet上迅速传 输，但JPEG格式的文件在解压缩时比GIF格 式的文件解压缩时花费的时间要多。
• JPEG格式的文件没有GIF格式文件的3种（透 明、隔行、动画）特殊效果。
在Internet网页的浏览器中可以显示两 种类型的图像：内连图像和外部图像。 ➢内连图像是指浏览器可以直接从网络文件的 网页上获取并显示的图像。 ➢外部图像是指在下载一个网页时，浏览器不 能直接把图像显示出来，而要借助其它软件 才能显示这个图像。
2 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
3 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
2．JPEG格式文件的特点 JPEG格式文件可以拥有计算机所能提供
的最多种颜色，适合存放高质量的彩色图片、 照片。
大多数新的图像浏览器不用专门的辅助应 用程序，都可以显示JPEG格式的图像文件。
JPEG格式文件的一个显著优势是：它比 GIF格式文件的色彩多（在大多数情况下可达 到1670种颜色），体积小。
❖ 加入网页中的图片，通常使用GIF格式和 JPEG格式。
1．GIF格式文件的特点
任何图像浏览器都可显示GIF格式的图像 文件，不需要额外的其它专门程序来显示这 些图像。
GIF格式文件最多只能显示256种颜色， 这使得它很少用于存储照片。但是，存放图 标、剪贴画和艺术线条等对颜色要求不高的 图片，已经足够了。GIF格式图片的优点在于 制作透明、隔行和动画效果。
4.1.2 设置网页的背景
❖ 网页的背景可以是某种颜色，也可以是图 片。无论是图片，还是背景色，都使用 <BODY>标记，只不过使用不同的属性。
7 制作：计算机学院 色 利用色彩作背景，比较容易在颜色上
协调，而且下载速度比采用图片作为背景快。 网页默认为白色，<BODY>的bgcolor属性 用于设置网页的背景色。 格式为：
入即径a器图位文w图素l图“＼h图素t尚片置字ied片数片图图i片数属gt未 时显 。hh的 或的 片 片的或性t完 ，示属属宽 百文 文 文高百在的全 在性性度 分件 件 件度分浏读 图替（ 数名 的 名（数设设览入 片代像 ）， 路 ”像）定定。。。
HEIGHT=Length
ALIGN=top|middle|bottom |left|right
第二部分 第4章 图片和表格
❖ 标记中的属性说明如下： 通常只设为图片的真实大小以免失
真，若需要改变图片大小最好事先使用 图片编辑工具。
如果不设定图片的尺寸，图片将按 照其本身的大小显示。
14 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
【例4-2】设置图片的尺寸。 补充教材【例2-15】 补充：改变图像的大小。 补充：图像加边框 补充：在网页中把图像分别放在文本的左边、
第二部分 第4章 图片和表格
4.1 加入图片
图像是美化网页的最常用的元素之一。 为使网页浏览后具有图文并茂的屏幕显
示效果，可在网页文本显示的基础上增 加一些色彩绚丽、栩栩如生的图像，这 样就会使我们的网页更加生动、更有吸 引力。
1 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
4.1.1 图片文件的格式
<BODY bgcolor=“ 颜色值” > “颜色值”可以为颜色的英文名或相应十六 进制值。
8 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
2．用图片作为背景 使用<BODY>标记的background属性，
可为网页铺上背景图片。 格式为：
<BODY background="图片文件名" > background取值为一个图片文件名，并
的免空对文白齐字高方 或 度式 其 采。 BORDER=Length
他用图像片素过 作于 单 HSPACE=Pixels
贴位近。。
VSPACE=Pixels
12 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
❖用图片标记可以设置图片的替代文本、尺寸、 布局等属性。 格式为： <IMG src=“图片文件名” alt=“简单说明” width=“图片的宽度” height=“图片的高度” border=“边框宽度” hspace=“水平方向空白” vspace=“垂直方向空白” align=“对齐方 式”> src是source的缩写。 alt是alternative （替代）的缩制作写：计算。机学院 邵黎 13
5 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
总的来说，对于图示、按钮、标题图片、 线条等颜色较少、构图简单的图片，或需 要支持透明色、动画的图片，可采用GIF格 式，而对于颜色多、较能容忍失真现象的 图片（如照片），可采用JPEG格式。
6 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
9 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
❖ 在浏览器中，作为背景的图片将按原来的 大小复制，重复铺满整个网页。作为背景的 图片文件，要做的很小，以便加快下载速度。
【例4-l】图片背景。
10 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
4.1.3 图片标记
使用图片标记，可以把一幅图片加入 到网页中。 HTML中的<IMG > 标记的作 用就是将图像显示在网页上。
11 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
<IMG >标记的语法规则为： src 属性指出要加
一般形式 属性
a图中局图b值表框h设右平像v设下slosipp片方片为示定的素定的的rgadanc在式与像图图空向数图对宽空ce属eer属属属页 ， 文 素 像 片 间 空 。 片齐 度 间性性性性/。，面 或 字 值 边 左 水 白 以 上布，
<IMG> SRC=URL ALT=Text WIDTH=Length
4 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
• 由于JPEG格式的文件比GIF格式的文件压缩 率高，从而导致JPEG格式文件的图像质量下 降。
• 虽然JPEG文件较小，可在Internet上迅速传 输，但JPEG格式的文件在解压缩时比GIF格 式的文件解压缩时花费的时间要多。
• JPEG格式的文件没有GIF格式文件的3种（透 明、隔行、动画）特殊效果。
在Internet网页的浏览器中可以显示两 种类型的图像：内连图像和外部图像。 ➢内连图像是指浏览器可以直接从网络文件的 网页上获取并显示的图像。 ➢外部图像是指在下载一个网页时，浏览器不 能直接把图像显示出来，而要借助其它软件 才能显示这个图像。
2 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
3 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
2．JPEG格式文件的特点 JPEG格式文件可以拥有计算机所能提供
的最多种颜色，适合存放高质量的彩色图片、 照片。
大多数新的图像浏览器不用专门的辅助应 用程序，都可以显示JPEG格式的图像文件。
JPEG格式文件的一个显著优势是：它比 GIF格式文件的色彩多（在大多数情况下可达 到1670种颜色），体积小。
❖ 加入网页中的图片，通常使用GIF格式和 JPEG格式。
1．GIF格式文件的特点
任何图像浏览器都可显示GIF格式的图像 文件，不需要额外的其它专门程序来显示这 些图像。
GIF格式文件最多只能显示256种颜色， 这使得它很少用于存储照片。但是，存放图 标、剪贴画和艺术线条等对颜色要求不高的 图片，已经足够了。GIF格式图片的优点在于 制作透明、隔行和动画效果。
4.1.2 设置网页的背景
❖ 网页的背景可以是某种颜色，也可以是图 片。无论是图片，还是背景色，都使用 <BODY>标记，只不过使用不同的属性。
7 制作：计算机学院 色 利用色彩作背景，比较容易在颜色上
协调，而且下载速度比采用图片作为背景快。 网页默认为白色，<BODY>的bgcolor属性 用于设置网页的背景色。 格式为：
入即径a器图位文w图素l图“＼h图素t尚片置字ied片数片图图i片数属gt未 时显 。hh的 或的 片 片的或性t完 ，示属属宽 百文 文 文高百在的全 在性性度 分件 件 件度分浏读 图替（ 数名 的 名（数设设览入 片代像 ）， 路 ”像）定定。。。
HEIGHT=Length
ALIGN=top|middle|bottom |left|right
第二部分 第4章 图片和表格
❖ 标记中的属性说明如下： 通常只设为图片的真实大小以免失
真，若需要改变图片大小最好事先使用 图片编辑工具。
如果不设定图片的尺寸，图片将按 照其本身的大小显示。
14 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
【例4-2】设置图片的尺寸。 补充教材【例2-15】 补充：改变图像的大小。 补充：图像加边框 补充：在网页中把图像分别放在文本的左边、
第二部分 第4章 图片和表格
4.1 加入图片
图像是美化网页的最常用的元素之一。 为使网页浏览后具有图文并茂的屏幕显
示效果，可在网页文本显示的基础上增 加一些色彩绚丽、栩栩如生的图像，这 样就会使我们的网页更加生动、更有吸 引力。
1 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
4.1.1 图片文件的格式
<BODY bgcolor=“ 颜色值” > “颜色值”可以为颜色的英文名或相应十六 进制值。
8 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
2．用图片作为背景 使用<BODY>标记的background属性，
可为网页铺上背景图片。 格式为：
<BODY background="图片文件名" > background取值为一个图片文件名，并
的免空对文白齐字高方 或 度式 其 采。 BORDER=Length
他用图像片素过 作于 单 HSPACE=Pixels
贴位近。。
VSPACE=Pixels
12 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
❖用图片标记可以设置图片的替代文本、尺寸、 布局等属性。 格式为： <IMG src=“图片文件名” alt=“简单说明” width=“图片的宽度” height=“图片的高度” border=“边框宽度” hspace=“水平方向空白” vspace=“垂直方向空白” align=“对齐方 式”> src是source的缩写。 alt是alternative （替代）的缩制作写：计算。机学院 邵黎 13
5 制作：计算机学院 邵黎
第二部分 第4章 图片和表格
总的来说，对于图示、按钮、标题图片、 线条等颜色较少、构图简单的图片，或需 要支持透明色、动画的图片，可采用GIF格 式，而对于颜色多、较能容忍失真现象的 图片（如照片），可采用JPEG格式。
6 制作：计算机学院 邵黎
第二部分 第4章 图片和表格