网页设计ppt电子课件教案第3章使用表格布局网页

《网页设计ppt电子课件教案第3章使用表格布局网页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第3章使用表格布局网页教学内容：表格是网页布局设计的常用工具，表格在网页中不仅可以用来排列数据，而且可以对页面中的图像、文本等元素进行准确的定位，使页面显得更加整齐有序。使用表格排版的页面在不同平台、不同分辨率的浏览器中都能保持布局和对齐，所以表格是网页布局中的最常用的工具。教学重点掌握表格的创建方法掌握表格属性的设置掌握合并、拆分单元格教学难点掌握排序表格掌握利用表格布局网页教学目标和基本要求__________________________________________________________

2、_______________________________________________教学时间：本章共分_______课时教学方法案例教学多媒体教学理论面授教学素材课程范例文件：sample第3章练习文件：exercise第3章本章各节课时分配及链接3.1任务8利用表格制作学生成绩表——（）课时3.2任务9制作细线表格——（）课时3.3综合实训——使用表格布局网站主页——（）课时本章小结思考与练习3.1任务8利用表格制作学生成绩表使用表格都可以清晰地显示列表数据，可以将各种数据排成行和列，从而

3、更容易阅读信息。3.1.1简单讲评表格是设计和制作网页时必不可少的元素，它在网页中有两个作用：一是显示表格数据，如产品销售等，二是用作网页对象定位。表格由行、列和单元格三部分组成。如图3-2所示表格主要有3个基本组成部分。（1）行：表格中的水平间隔。（2）列：表格中的垂直间隔。（3）单元格：表格中一行与一列相交所产生的区域。3.1.2核心知识创建表格时可以制定表格的基本属性，如果在表格创建完成后，可以根据需要在“属性”面板中重新指定。要设置表格的属性首先应选中该表格。3.1.3实际操作利用表格制作学生成绩表，

4、具体操作步骤如下。步骤2将光标置于文档中相应的位置，选择“插入>表格”命令。弹出“表格”对话框。步骤3在“表格”对话框中，将“行数”设置为6，“列数”设置为7，“表格宽度”设置为500像素，单击“确定”按钮，插入表格。步骤4打开“属性”面板，将“边框”设置为1，“填充”设置为3，“间距”设置为2，“对齐”设置为“居中对齐”。步骤5在单元格中输入相应的文字。3.2任务9制作细线表格细线表格是网页上常见的表格形式，细线表格看起来更加精致美观。3.2.1简单讲评有些读者可能会说，这不就是加了边框颜色的表格，把边框宽

5、度设成最小的值1嘛，有什么新鲜的。没关系，你可以试一下，就算你把边框宽度设成最小的值1，可以说它也不是真正的细线表格。真正的细线表格不是通过设置边框来制作的。边框为1的表格在浏览器中看起来还是有些蠢笨，虽然它已经是最小值了，实际应用中基本上没有人会去使用这种表格，可以说网页上很多的表格都是细线表格，因此读者也一定要熟练掌握。3.2.2核心知识将插入点放置在要拆分的单元格中，选择“修改>表格>拆分单元格”命令，弹出“拆分单元格”对话框。3.2.3实际操作插入细线表格具体操作步骤如下。步骤2将光标置于文档中相应的

6、位置，选择“插入>表格”命令，弹出“表格”对话框，将“行数”设置为6，“列数”设置为4，单击“确定”按钮，插入表格。步骤3在属性面板中，将“对齐”设置为“居中对齐”，“间距”设置为1。步骤4单击“拆分按钮”，切换至“拆分视图”，在

7、1列单元格中，按住鼠标左键向右拖动至第6行第4列单元格中，在属性面板中将“背景颜色”设置为#FFFBF0。步骤7在单元格中分别输入相应的文字。3.3综合实训——使用表格布局网站主页下面使用表格布局网站页面。步骤1选择“文件>新建”命令，弹出“新建文档”对话框。步骤2选择“插入>表格”命令，弹出“表格”对话框，在对话框中设置表格的行数、列数、宽度和其他属性。步骤3将光标置于第1列单元格中，选择“插入>图像”命令，弹出“选择图像源文件”对话框，在对话框中选择图像logo.gif。本章小结本章主要讲述了制作学生成绩

8、表、制作细线表格、布局网站的主页等，通过本章的学习，读者应了解设置表格和单元格属性，对单元格进行剪切、粘贴、复制、拆分和合并以及添加与删除行或列，之后还涉及到了表格的具体应用，通过对本章的学习可以更加深刻地体会到表格在网页设计中的重要作用。思考与练习1．填空题（1）表格是设计和制作网页时必不可少的元素，它在网页中有两个作用：一是________，二是__________。（2）当需要把其他应用程序（