高中信息技术 44运用表格布局和美化网页教案 粤教版选.doc

4.4运用表格布局和美化网页学习目的：1、掌握运用表格来布局和美化网页的方法与技巧。 2、培养学生自主学习的能力和小组合作的力。 3、培养学生美化网页的能力，提高学生审美能力。重点难点：掌握运用表格来布局和美化网页的方法与技巧。学习方式：情景设置法 任务驱动法 学习任务：对自己小组的网页进行布局设计划成本 学习内容：一、表格的使用 表格是网页的一个非常重要元素，因为HTML本身并没有提供更多的排版手段，我们往往就要借助表格实现网页的精细排版。可以说表格的是网页制作中最为重要的一个技巧，表格运用得好坏，直接反映了了网页设计师的水平。 点击对象面板的 ，看到如下的对话框： Rows：表格的行数；Columns：表格的列数； Width：表格的宽度，单位可以是Pixels（像数）或Percent（百分比）。按像素定义的表格大小是固定的，而按百分比定义的表格，会按照浏览器的大小而变化。后面会继续深入讲解两种定义方法的区别； Border：表格线的宽度； Cell Padding：单元格间距；Cell Spacing：单元格边距。所谓的单元格，就是表格里面的每一小格。 按照如图的设置后，就得到下面这个表格： 在表格线上点一下，可以全选整个表格，此时可在属性面板看到： Rows，Cols：表格的行和列； W，H：表格的宽和高，通常情况下，我们都不会定义表格的高度； CellPad，CellSpace：单元格间距和单元格边距；Border：表格线的宽度； Ailgn：表格的对齐方式，可以将表格靠左（Left）、置中（Center）、靠右（Right） ：消除行的高度设置； ：消除列的宽度设置； ：将表格宽度的设置由百分比转换为像素； ：将表格宽度的设置由像素转换为百分比； Bg Color：设置表格的背景颜色； Brdr Color：设置表格线的颜色； Bg Image：设置表格的背景图，如果设置了背景图，背景颜色就失效了；点击后面的公文包按钮选择背景图； 如果我们把光标移到其中一个单元格，此时看到的属性面板又有所不同： ：合并单元格（之前要先选择相应的需要合并单元格）； ：拆分单元格，拆分为多行或多列； Horz：单元格内部的水平对齐方式，作用与 类似； Vert：单元格内部的纵向对齐方式； W，H：单元格的宽度与高度； Bg：单元格背景图； Bg：单元格背景颜色； Brdr：单元格边框颜色。表格的使用之二 根据上面对表格和单元格的参数，我们可以做出以下的表格： 以上是一个32的表格，表格宽度为350个像素，每个单元格的宽度为33%，即占表格的三分之一，其中单元格1和单元格4 已经合并；单元格边距、单元格间距、表格线宽度都为10；表格的底色为灰色，单元格5的边框颜色为红色，单元格6的底色为绿色； 在上面的例子，我们将表格线宽度设置为0，在编辑状态下，看到的表格是： 宽度为0的边框线，在编辑状态下会以虚线表示，而实际的浏览效果为： 可见，宽度为0的表格线就不会在浏览器显示。其实所谓的利用表格进行排版，就是使用表格线为0的表格，将页面划分为多个区域，从而达到定位排版的效果。另外，表格与表格是可以嵌套的，例如在上面表格中，在单元格2里再插入一个表格宽度为100%，表格线宽度为0的表格，并分别为单元格设置不同的背景色，在编辑状态下可以看到： 而实际的浏览效果为： 表格的嵌套在网页制作中被经常使用到，尤其是在新浪、搜狐、网易等门户网站中，为了使大量的信息整齐地展