欢迎来到天天文库
浏览记录
ID:29306682
大小:101.50 KB
页数:4页
时间:2018-12-18
《高中信息技术 4.4运用表格布局和美化网页教案 粤教版选修3》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、4.4运用表格布局和美化网页学习目的:1、掌握运用表格来布局和美化网页的方法与技巧。 2、培养学生自主学习的能力和小组合作的力。 3、培养学生美化网页的能力,提高学生审美能力。重点难点:掌握运用表格来布局和美化网页的方法与技巧。学习方式:情景设置法任务驱动法学习任务:对自己小组的网页进行布局设计划成本 学习内容: 一、表格的使用 表格是网页的一个非常重要元素,因为HTML本身并没有提供更多的排版手段,我们往往就要借助表格实现网页的精细排版。可以说表格的是网页制作中最为重要的一个技巧,表格运用得好坏,直接反映了了网页设计师的水平。 点击对象面板的,看到如下的对话框:
2、 ①Rows:表格的行数;Columns:表格的列数; ②Width:表格的宽度,单位可以是Pixels(像数)或Percent(百分比)。按像素定义的表格大小是固定的,而按百分比定义的表格,会按照浏览器的大小而变化。后面会继续深入讲解两种定义方法的区别; ③Border:表格线的宽度; ④CellPadding:单元格间距;CellSpacing:单元格边距。所谓的单元格,就是表格里面的每一小格。 按照如图的设置后,就得到下面这个表格: 在表格线上点一下,可以全选整个表格,此时可在属性面板看到: ①Rows,Cols:表格的行和列; ②W,H:表格的宽和高,通常情况下,
3、我们都不会定义表格的高度; ③CellPad,CellSpace:单元格间距和单元格边距;Border:表格线的宽度; ④Ailgn:表格的对齐方式,可以将表格靠左(Left)、置中(Center)、靠右(Right) ⑤:消除行的高度设置; :消除列的宽度设置; :将表格宽度的设置由百分比转换为像素; :将表格宽度的设置由像素转换为百分比; ⑥BgColor:设置表格的背景颜色; ⑦BrdrColor:设置表格线的颜色; ⑧BgImage:设置表格的背景图,如果设置了背景图,背景颜色就失效了;点击后面的公文包按钮选择背景图; 如果我们把光标移到其中一个单元格,
4、此时看到的属性面板又有所不同: ①:合并单元格(之前要先选择相应的需要合并单元格); :拆分单元格,拆分为多行或多列; ②Horz:单元格内部的水平对齐方式,作用与类似; Vert:单元格内部的纵向对齐方式; ③W,H:单元格的宽度与高度; ④Bg:单元格背景图; ⑤Bg:单元格背景颜色; ⑥Brdr:单元格边框颜色。表格的使用之二 根据上面对表格和单元格的参数,我们可以做出以下的表格: 以上是一个3×2的表格,表格宽度为350个像素,每个单元格的宽度为33%,即占表格的三分之一,其中单元格1和单元格4已经合并;单元格边距、单元格间距、表格线宽度都为10;表格的底
5、色为灰色,单元格5的边框颜色为红色,单元格6的底色为绿色; 在上面的例子,我们将表格线宽度设置为0,在编辑状态下,看到的表格是: 宽度为0的边框线,在编辑状态下会以虚线表示,而实际的浏览效果为: 可见,宽度为0的表格线就不会在浏览器显示。其实所谓的利用表格进行排版,就是使用表格线为0的表格,将页面划分为多个区域,从而达到定位排版的效果。另外,表格与表格是可以嵌套的,例如在上面表格中,在单元格2里再插入一个表格宽度为100%,表格线宽度为0的表格,并分别为单元格①②③设置不同的背景色,在编辑状态下可以看到: 而实际的浏览效果为: 表格的嵌套在网页制作中被经常使用到,尤其是在新浪、
6、搜狐、网易等门户网站中,为了使大量的信息整齐地展示在浏览者面前,表格的嵌套就使用得最为频繁。下图是goEway.com的首页在编辑状态下的情况,可以看到,页面密密麻麻地布满了表格线:
此文档下载收益归作者所有