网页设计与制作教程(第2版)
机械工业出版社同名教材 配套电子教案
第4章图片和表格
加入图片
图片文件的格式
设置网页的背景
图片标记
设定图片的布局
用图片作为超链接
加入表格
建立简单表格
给表格加上标题
跨多行、多列的表项
表格在页面中的属性
表格的分组显示
对齐表项
习题4
加入图片
图片文件的格式
1. GIF格式文件的特点
2. JPEG格式文件的特点
设置网页的背景
1. 设置背景色
格式为:
<BODY bgcolor="颜色值">
“颜色值”可以为颜色的英文名或相应十六进制值。
2. 用图片作为背景
格式为:
<BODY background="图片文件名">
图片标记
格式为:
<IMG src="图片文件名" alt="简单说明" width="图片的宽度" height="图片的高度" border="边框宽度" hspace="水平方向空白" vspace="垂直方向空白" align="对齐方式">
【例4-2】设置图片的尺寸。
<HTML>
<HEAD> <TITLE>设定图片的尺寸</TITLE> </HEAD>
<BODY>
<H4 align=center>《计算机基础及应用教程》内容简介</H4>
<FONT size=2>
本书根据最新“普通高等院校计算机基础教育教学大纲”要求编写。…<BR>
<IMG src="" alt="封面">原始大小
<IMG src="" width=18% height=40%>宽18%,高40%
<IMG src="" alt="封面" width=85 height=120>宽85,高120<BR>
本书把理论与实践相结合,图文并茂、内容实用…<BR>
</FONT>
</BODY>
</HTML>
在浏览器中的显示效果如图4-2所示。
设定图片的布局
1. 设置图片的对齐方式
图片可放在页面的左边(left)、中间(center)和右边(right)。
(1) 居中
实现图片居中的方法有两种:一是使用<CENTER>标记;二是使用<P>标记的align属性。格式分别为:
<CENTER> <IMG src="图片文件名"> </CENTER>
或
<P align=center> <IMG src="图片文件名"> </P>
(2) 居左或居右
使用<P>标记的align属性可实现图片的居左和居右。格式为:
<P align=left或right> <IMG src="图片文件名"> </P>
(2) 文本与图片在垂直方向上的对齐
图片与文本混合排放时,利用<IMG>标记的align属性可设定它们在垂直方向的对齐。格式为:
文本<IMG src="图片文件" align="对齐方式"> 文本
其中align的值可取:
top 文本与图片的顶部对齐。
middle 文本与图片的中央对齐。
bottom 文本与图片的底部对齐。
(3) 文本环绕图片
如果不设置文本对图片的环绕,图片在页面会占一片空白。利用<IMG>标记的属性,可以使文本环绕图片。格式为:
<IMG src="图片文件名" align="环绕方式"> 文本
格式为:
<BR clear=left或right或all>
用图片作为超链接
格式为:
<A href="链接到的文件名"> <IMG src="图片文件名"> </A>
加入表格
建立简单表格
格式为:
<TABLE border=n width=x或x% height=y或y% cellspacing=i cellpadding=j>
<TR> <TH>表头1</TH><TH>表头2</TH><TH>…</TH><TH>表头n</TH>
<TR> <TD>表项1</TD><TD>表项2</TD><TD>…</TD><TD>表项n</TD>
…
<TR> <TD>表项1</TD><TD>表项2</TD><TD>…</TD><TD>表项n</TD>
</TABLE>
也可在第一列加表头,其格式为:
<TABLE border=n width=x或x% height=y或y% cellspacing=i cellpadding=j>
<TR
第4章 图片和表格 来自淘豆网m.daumloan.com转载请标明出处.
