第4章 图片和表格.pptVIP

* 网页设计与制作教程(第2版) 机械工业出版社同名教材配套电子教案 第4章 图片和表格 4.1 加入图片 4.1.1 图片文件的格式 4.1.2 设置网页的背景 4.1.3 图片标记 4.1.4 设定图片的布局 4.1.5 用图片作为超链接 4.2 加入表格 4.2.1 建立简单表格 4.2.2 给表格加上标题 4.2.3 跨多行、多列的表项 4.2.4 表格在页面中的属性 4.2.5 表格的分组显示 4.2.6 对齐表项 习题4 4.1 加入图片 4.1.1 图片文件的格式 1. GIF格式文件的特点 2. JPEG格式文件的特点 4.1.2 设置网页的背景 1. 设置背景色 格式为： BODY bgcolor=颜色值 “颜色值”可以为颜色的英文名或相应十六进制值。 2. 用图片作为背景 格式为： BODY background=图片文件名 4.1.3 图片标记 格式为： IMG src=图片文件名 alt=简单说明 width=图片的宽度 height=图片的高度 border=边框宽度 hspace=水平方向空白 vspace=垂直方向空白 align=对齐方式 【例4-2】设置图片的尺寸。 HTML HEAD TITLE设定图片的尺寸/TITLE /HEAD BODY H4 align=center《计算机基础及应用教程》内容简介/H4 FONT size=2 nbsp;nbsp;nbsp;nbsp;本书根据最新“普通高等院校计算机基础教育教学大纲”要求编写。…BR IMG src=jsjjc.jpg alt=封面原始大小 IMG src=jsjjc.jpg width=18% height=40%宽18%，高40% IMG src=jsjjc.jpg alt=封面 width=85 height=120宽85，高120BR nbsp;nbsp;nbsp;nbsp;本书把理论与实践相结合，图文并茂、内容实用…BR /FONT /BODY /HTML 在浏览器中的显示效果如图4-2所示。 4.1.4 设定图片的布局 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 4.1.5 用图片作为超链接 格式为： A href=链接到的文件名 IMG src=图片文件名 /A 4.2 加入表格 4.2.1 建立简单表格 格式为： TABLE border=n width=x或x% height=y或y% cellspacing=i cellpadding=j TR TH表头1/THTH表头2/THTH…/THTH表头n/TH TR TD表项1/TDTD表项2/TDTD…