《第4章图片和表格.ppt》由会员分享，可在线阅读，更多相关《第4章图片和表格.ppt（28页珍藏版）》请在三一文库上搜索。
1、网页设计与制作教程 (第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 图片文件的格式 GIF格式文件的特点 2. JPEG格式文件的特点,4.1.2 设置网页的背景 1. 设置背景色 格式为： “颜色值”可以为颜色的英文名或
2、相应十六进制值。 2. 用图片作为背景 格式为： 例4-1,4.1.3 图片标记 格式为： 属性： alt=“简单说明” width=“图片的宽度” height=“图片的高度” border=“边框宽度” hspace=“水平方向空白” vspace=“垂直方向空白” align=“对齐方式“,【例4-2】设置图片的尺寸。 设定图片的尺寸 计算机基础及应用教程内容简介 本书根据最新“普通高等院校计算机基础教育教学大纲”要求编写。 原始大小 宽18%，高40% 宽85，高120,本书把理论与实践相结合，图文并茂、内容实用 在浏览器中的显示效果如图4-2所示。,4.1.4 设定图片的布局 1.
3、设置图片的对齐方式 图片可放在页面的左边（left）、中间（center）和右边（right）。 (1) 居中 实现图片居中的方法有两种： 一是使用标记； 二是使用标记的align属性。格式分别为： 或 ,(2) 居左或居右 使用标记的align属性可实现图片的居左和居右。格式为： 例4-3,2. 设置图片与文本间的关系 可以设置图文的混排版面，如其间的空白、图文的对齐、文本环绕图片等。 (1) 设置图片与文本之间的空白 适当在图片与文本之间留下空白，可使页面看起来不至于太紧密。利用标记的hspace和vspace属性可实现该功能。 例4-4,(2) 文本与图片在垂直方向上的对齐 图片与文本混
4、合排放时，利用标记的align属性可设定它们在垂直方向的对齐。 格式为： 文本 文本 其中align的值可取： top 文本与图片的顶部对齐。 middle 文本与图片的中央对齐。 bottom 文本与图片的底部对齐。 例4-5,(3) 文本环绕图片 如果不设置文本对图片的环绕，图片在页面会占一片空白。利用标记的属性，可以使文本环绕图片。格式为： 其中align的值可取： left 图片在左边。 right 图片在文本的右边。 解除文本环绕的格式为： 例4-6,4.1.5 用图片作为超链接 格式为： 例4-7,4.2 加入表格,4.2.1 建立简单表格 格式为： ,也可在第一列加表头，其格式为
5、： ,4.2.2 给表格加上标题 用标记给表格加标题，其格式为： 标题 其中： Align = left | center | right | top | bottom Valign = top | bottom,4.2.3 跨多行、多列的表项 使用、标记的colspan和rowspan属性，可以分别制作跨多行（合并行）和跨多列（合并列）的表格。 1. 跨多列表项 跨多列表项的格式为： 表项 或 表项 或 表项 其中，x表示合并的列数。,2. 跨多行表项 跨多行表项的格式为： 表项 或 表项 或 表项 其中，y表示合并的行数。,3. 同时跨多列多行表项 P66 4-12 在中同时使用colsp
6、an和rowspan属性可制作多重表头。格式为： 其中，rowspan设置表头跨过x列，colspan设置表头跨过y行。,4.2.4 表格在页面中的属性 1. 设定表格在页面中的位置 格式为： ,4.2.5 表格的分组显示 1. 按行分组 格式为： 题头 表尾 表体1 表体n ,2. 按列分组 格式为： 格式为： ,4.2.6 对齐表项 1. 水平对齐 2. 垂直对齐 习题4 4.1 图片在网页中的对齐方式有哪几种？图片与文本之间的对齐及环绕方式有哪几种？ 4.2 分别制作如图4-23、图4-24所示的网页，单击小图片，将显示放大的图片。,4.3 制作具有彩色框线和多种单元格背景的表格，如图4-25所示。,4.4 表格在页面中的应用，制作如图4-26所示的网页。,4.5 分别制作如图4-27所示的网页，单击小图片或“详细”，将显示详细内容。,作 业 评 讲,习题4-2 用表格的单元格来布局所有的元素 图片作链接 ,习题4-5 文在图右 “详细”的代码 详细 ,