《金花的故乡-大理(一)》名师教案

学而优教有方2/2课题金花的故乡—大理（一）单元第二单元学科信息技术年级六年级学习目标1、学会打开站点。2、学会使用布局表格和单元格规划网顶布局。3、学会表格嵌套的操作。4、学会制作导航栏。重点使用表格布局设计网站的首页布局。难点学会制作导航栏。教学过程教学环节教师活动学生活动设计意图导入新课同学们，你知道什么是页面布局吗？

网页各式各样的布局格式听讲，思考通过日常图片方式引入吸引学生的学习兴趣。讲授新课跟我做访问者浏览网站的第一页就是首页。

首页在设计上要美观大方、清楚简洁;在内容上要组织严密;在形式上要图文并茂，动静结合，这样才能更好地吸引访问者。接下来我们一起来设计网站的首页吧！

1.打开网站①启动FrntPage2003，单击菜单栏中的“文件”菜单，然后单击“打开网站”命令。

②在对话框的“查找范围”栏内找到自己的文件夹，在列表区选择“我的站点”单击“打开”按钮。这样就打开了我们创建的站点，如图9-1。

2.规划网页布局我们要对首页进行编辑，首页的文件名是index.htm。只要双击index.htm文件，打开网页编辑区后就可以编辑网页了。

（1）使用布局表格和单元格为了方便编辑网页，可以关闭窗口左边的“文件夹列表”，方法是单击“文件夹列表”窗口上标有“x”的按钮。接下来，我们用“布局表格”来规划网页布局。

①单击“表格”菜单，选择“布局表格和单元格”命令，这时右侧的任务窗格显示的是“布局表格和单元格”，如图9-2。

②任务窗格中有系统预设的“表格布局”，可以从中选择一种自己喜欢的布局方式，对齐方式选择“水平居中”，如图9-3。

（2）调整行高、列宽在表格布局界面，单元格行高、列宽都用数字标明，可以根据实际情况调整布局表格的行高、列宽。

①单击表格边框，或单击标签，选中整个表格。②把鼠标移到边框上的小菱形上，根据需要调整行高和列宽，如图9-4。

（3）删除表格布局如果想删除刚才使用的表格布局，只要单击右侧任务窗格中“表格布局”栏里的“没有布局”格式即可。

（4）表格的嵌套如果表格边框是虛线，则预览网页时边框是不显示的。设计首页时，表格第一行通常放置网站的Lg（徽标）、Flash动画标语、导航栏等信息。第二行放置有关网页栏目的一些内容。为了更好地规划网页布局，方便我们编辑表格中的单元格，我们可以运用表格嵌套的方法，即在表格里插入表格。

①把光标放在第一行单元格里，单击工具栏上的“插人表格”按钮，选择“3乘1表格”。

②在表格内右击鼠标，在快捷菜单中单击“表格属性”命令。在弹出的“表格属性对话框中，设置表格大小为2行2列，把单元格衬距、单元格间距、边框粗细都修改为0，这是为了实现单元格之间无缝连接。如图9-5。

在表格第-行放网站徽标（Logo），第二行放Flash动画标语，第三行放导航栏。

3.制作网站徽标在此使用艺术字来制作网站徽标。（1）插入艺术字①把光标放在左上角单元格里，执行“插入→图片→艺术字”命令。

②在弹出的“艺术字库”对话框中，选择一种艺术字样式，单击“确定”按钮。

③在弹出的“编辑‘艺术字’文字”对话框中，输入网站的标题，根据需要修改字体、字号，单击“确定”按钮，如图9-6。

（2）设置艺术字格式①选中艺术字并右击鼠标，在弹出的菜单中，单击“设置艺术字格式”命令。如图9-7所示。

②使用同样的方法，可以继续添加其他艺术字。

③选中艺术字，在艺术字上端有一个绿色的小圆形，这是旋转点，拖动旋转点可以调整艺术字的角度，如图9-9。

4.制作导航栏导航栏的作用是为了方便访问者在网页之间轻松自由地跳转。下面，我们一起学习导航栏和超链接的制作。

（1）插入导航栏①把光标定位在需要放导航栏的单元格里，打开“插入’菜单，单击“导航”选项，在弹出的“插入Web组件”对话框中，左侧选中“链接栏'，右侧选中“包含自定义链接的链接栏”，单击“下一步”按钮。如图9-10。

②选择一种样式，并单击“下一步”按钮。如图9-11所示。

③可以根据网页布局的需要选择网页方向，本例选择水平方向，单击完成”按钮，如图9-12所示。

④在弹出的“链接栏属性”对话框中，单击“添加新名称”按钮，在新弹出的“插入新的链接栏”对话框中，给链接栏输入一个名称，单击“确定’按钮，如图9-13。

⑤在“链接栏属性”对话框中，单击“添加链接”按钮，如图9-14。

⑥在弹出的“添加到链接栏”对话框中，选择需要链接的网页，例如：jingdian\jingdian.htm，在“要显示的文字”后的文本框中输入大理景点”，单击“确定”按钮，这样一个超链接就建立起来了，如图9-15。

重复步骤⑤、⑥的操作，继续添加“大理民俗”、“大理美食”、“大理特色”等链接。如果在网页中需要有“主页”的链接，就选中附加链接中的“主页”复选框。如图9-16。单击“确定”按钮后，网页上就自动添加了导航栏，如图9-17所示。

（2）修改导航栏双击导航栏就能打开“链接栏属性”对话框，可以修改链接。也可以单击“样式”选项卡，修改导航栏样式，如图9-18。

5.设置版权信息栏在第三行单元格中输人网站的一些版权信息。（1）插入水平线①把光标定位在第三行单元格里，打开“插入”菜单，单击“水平线”选项，在网页中插入水平线。

②双击水平线，在弹出的“水平线属性”对话框中，可以根据网站的主色调修改水平线颜色，如图9-19所示。

（2）输人版权信息在水平线后按回车键，就可以输入网页的版权信息了，包括制作者、建议浏览器分辨率、建站时间等，最终的网页效果如图9-20所示。别忘记保存！

使用“表格布局”和“表格嵌套”规划网站首页布局，插入相应的网站徽标、导航栏和版权信息。了解、掌握了解及掌握了解、掌握掌握了解听讲及掌握理解了解、掌握了解掌握掌握了解、掌握了解掌握操作了解掌握掌握通过教师讲解使用首页设计。了解“我的站点的步骤和方法。规划网页布局、使用布局表格和单元格的方法。通过教师讲解了解“布局表格和单元格”的方法调整行高、列宽掌握删除表格布局的方法。编辑表格的嵌套的方法与步骤。了解表格嵌套单元格衬距、单元格间距、边框粗细的方法与步使用艺术字来制作网站徽标。设置艺术字格式制作导航栏“插入Web组件”“插入新的链接栏”修改导航栏的方法。设置版权信息栏的步骤课堂小结1、访问者浏览网站的第一页就是首页。2、首页的文件名是index.htm。3、用“布局表格”来