第8节 网页布局 教案

11、网页布局
教学目标
1、以主页和浏览图片的网页为例，使用表格实现网页的布局方法；
2、实现网页的图文混排，掌握美化网页方法；
3、教者演示网页布局的步骤，让学生对表格布局网页有粗略的了解；学生合作完成任务，以便学以致用，熟记知识要点；
4、培养学生归纳知识、运用知识、合作学习、实践操作的能力，提搞学生的审美观。
教学重点
对网页布局和图文混排等方法的掌握。
教学难点
如何插入表格、设计表格来规划网页，规范网页版面布局。
教具准备
电脑，Frontpage软件
教学过程
一、导入新课
（一）欣赏本课任务网页的效果图，并引导学生分析其特点。
1、有插图、有正文、有导航栏、有LOGO图片；
2、版面规范、段落文字左右对齐。
二）我们在平时浏览网站会发现，很多网站的网页图文混排、版面整齐规范，问：这是怎样实现的呢？
二、初涉新知
学生阅读P72—P81，归纳标记知识要点。
三、新知传授（示范教学）
在网页制作中，使用表格来布局网页中的内容非常方便，可以确保图文混排整齐，可以通过拆分或合并单元各、嵌套表格来实现各种布局。
（一）利用表格实现网页布局
分析P73图2—12中的网页效果图，可以把该布局以图2—13的表格来实现：5个栏目，外加一个首页，导航栏分6格。
1、设置网页显示宽度——插入一行一列的表格：
（1）插入表格：执行“表格”——“插入”——“表格”命令；
（2）设置表格属性：按P74图2—14所示设置行数、列数、对齐方式、指定宽度后确定。
2、在表格内插入横幅图片。
3、在表格肉建立导航：
（1）插入表格，1*6表格；
（2）设置表格属性：边框粗细、背景颜色、指定宽度后确定；
（3）设置单元格属性：先中6个单元格，设置水平对齐方式、指定宽度、背景颜色后确定；
（4）输入文字。
4、图文混排：
（1）插入表格；（2）设置单元格属性；（3）插入图片；（4）合并单元格；（5）输入文字。
5、设置版权信息：
（1）插入水平线：执行“插入”——“水平线”命令；
（2）输入文字并进行适当的设置。
6、保存网页：以index1.html为名保存到网站文件夹中。注意设置图片保存的位置。
（二）浏览图片的网页
分析P79图2—19的结构，如：图2—201、文字布局
在相应的位置上分别完成横幅、导航、版权说明部分。
2、图片布局（1）插入表格；（2）设置缩略图；
（3）合并最后一行的4个单元格，并在其中输入资料来源处；
（4）保存网页，以wulingyuan.html为名保存。
四、学生上机操作，合作完成任务和目标，教者巡回指导。提示：
1、按书中步骤进行操作；
2、注意主页和图片页面的结构，利用表格来规划。
五、任务完成反馈。
展示优秀学生作品，引导学生分析评价网页是否布局合理、规范、是否美观。
六、总结
让学生归纳本课所需要掌握的知识点，说明任务达成时需要操作的步骤与要求。
课后反思