《我的网页》教案 (6)
图片预览
文档简介
绿色家园网页制作
教学目标：
1.认知目标：通过资料的收集和整理、网站结构的总体规划、网页技巧的运用和实施，能够独立制作有绿色家园为主题的个人网站，让学生在制作过程中能同时了解环境保护对人类的重要性。【来源：21·世纪·教育·网】
2.技能目标：使学生通过学习熟练应用FrontPage 2000中的网页的建立。掌握网页制作的各种技术和方法，包括个人的站点建立、文字处理、图片处理、框架。
3.情感目标：通过学习和时间操作，培养学生的审美能力、创新能力、动手能力和自学能力以及分析能力和解决问题的能力。21教育名师原创作品
教学重点：掌握环境保护的相关知识，灵活运用FrontPage 2000网页技巧制作个人网站
教学手段：多媒体电化教学与实践演练相结合的方法。
教学用具：多媒体网络教室、大屏幕投影仪系统一套。
教学过程：
在制作个人网站之前，应先确定网站的主题。本节课的主题是围绕环境保护对人类的重要性制作一个绿色家园的网站，收集相关的资料，包括文字、图片、动画等。将资料内容分类，规划网站的结构，拟定几个网页主题。借助一些软件制作、处理网页中所需的图片、动画等，利用FrontPage2000等网页制作工具编辑网页，直到完成网站中所有网页。
本节课主要围绕绿色家园为主题建立一个个人网站，如下图所示
一、 新站点的建立
为了有效地发挥FrontPage2000对网页的组织管理功能，通常在制作具体的网页之前，应先创建一个新站点，然后根据网站的具体结构制作网页。【出处：21教育名师】
?[例1-1] 在“My Documents”中的 “My webs”文件夹下建立一个名为“huanbao”的新站点。
操作步骤：
① 单击“开始”按钮，将指针依次指向“程序（P）”“Microsoft FrontPage”，并单击，即可启动FrontPage2000，如图5-2所示。
② 依次单击“文件（F）”菜单中的“新建（N）”“站点（W）”命令，弹出“新建”对话框，如图所示。
③ 在“新建”对话框中单击“空站点”，在“指定新站点的位置（S）”框中输入 “C：My Documentsmy Webshuanbao”，最后单击“确定”按钮。www.21-cn-jy.com
FrontPage 2000将自动在指定位置建立一个站点，首先建立 “C：My DocumentsMy webshuanbao”文件夹，然后在此文件夹下，再建立一组文件夹，其中可见文件夹包括：“_private”和“Images”（存放图形文件），其余文件夹被隐藏起来.2·1·c·n·j·y
二、网页的建立
[例1-2] 在“huanbao”网站中建立第一个网页，页面如图所示，取名为“welcome.htm”。
1．? 文字编辑
文字编辑是制作网页最基本的操作。在网页编辑窗口中，可以像在Word中一样直接输入文字，进行编辑和排版，
操作步骤：
① 选定标题“绿色家园”，进行如下设置：字体为黑体，字号为7号字，颜色为绿色，居中排列。
② 选定正文，并设置如下：采用默认的字体和字号，颜色为黑色，居中排列。
2. 插入图片
插入图片的方法是：将插入点移到要插入图片的位置，依次单击“插入（I）”菜单中的“图片（P）”“来自文件（F）”命令，打开“图片”对话框，如图所示。
如果要插入的图片已经保存在当前的网站中，可以直接在图的列表框中选取，然后单击“确定”按钮。否则，单击“浏览”按钮 ??，从“选择文件”对话框中选择所需图片，单击“确定”按钮，将图片插入到网页中。21·cn·jy·com
在“图片”对话框中，还可以单击“剪贴画（C）”按钮，插入Office剪贴画；单击“扫描（S）”按钮，插入从扫描仪获取的图片。www-2-1-cnjy-com
操作步骤：
??? ① 依次单击“插入（I）”菜单中的“图片（P）”“来自文件（F）”命令，打开“图片”对话框，单击“浏览”按钮，从弹出的“选择文件”对话框中选择所需图片“zhuzi.gif”，单击“确定”按钮，插入图片。
??? ② 拖动图片到页面左侧适当位置。
3. 插入动画
在网页制作中，经常使用一些小动画，使页面生动活泼，这些小动画文件用专门的工具制作，也以GIF作为文件的扩展名。
操作步骤：
① 依次单击“插入（I）” 菜单中的“图片（P）”“来自文件（F）”命令，打开“图片”对话框，单击“浏览”按钮，从“选择文件”对话框中选择所需图片“diqiu1.gif”，单击“确定”按钮，插入动画。21*cnjy*com
② 拖动动画到标题下方适当位置。
4. 插入水平线
水平线是贯穿网页宽度的细灰条，用来分隔文本或加着重符。插入水平线可以帮助我们将各类相关信息组合到一起，但同一个页面中水平线不宜过多。21*cnjy*com
插入水平线的方法是：先将插入点移到目标位置，再单击“插入（I）”、菜单中的“水平线（L）”命令。
如果要设置水平线的外观，可以双击水平线，打开“水平线属性”对话框，如图5-8所示。
调整水平线的宽度、高度、对齐方式以及颜色，就可以改变它的外观。
操作步骤：
① 将插入点移到小动画前。
② 单击“插入（I）” 菜单中的“水平线（L）”命令。
③ 双击水平线，在“水平线属性”对话框中，将宽度设置为50%，其余参数采用默认值，单击“确定”按钮。
5.???? 设置背景
大多数网页都应用背景图案来为网页增色，这些背景可以是一幅大图片，也可以是若干个小图片的重复使用（即“平铺”）。选择背景图案时，要注意与文本相协调，而且背景的应用不要妨碍文本的阅读。另外，背景图案越小，网页的下载速度就越快。21·世纪*教育网
设置背景的操作步骤：
① 单击“格式（O）”菜单中的“背景（K）”命令，出现“页面属性”对话框，且“背景”标签已被打开，如图所示。
② 单击“浏览（B）”按钮，在“选择文件”对话框中浏览文件夹内容，从中搜索到所需背景图案后，单击“确定”按钮，关闭“选择文件”对话框，再单击“确定”按钮，关闭“页面属性”对话框，背景图案即可插入页面。
页面制作完成，可以单击“预览”标签，观察一下效果。
?
6. 网页的保存
单击“文件（F）”菜单中的“保存文件（S）”命令，弹出“另存为”对话框，如图所示。
在“文件名（N）”列表框中输入“welcome”后，单击“保存（S）”按钮。如果要保存的页面含有图片、动画、声音等元素，FrontPage还会继续询问是否保存这些嵌入的文件，如图所示。21世纪教育网版权所有
此时最好将这些文件保存起来，以保持它们在网页中的位置，否则，当网站发生迁移时，可能因找不到这些图片、动画等文件而无法显示。另外，最好将它们保存到Images文件夹中，使网站保持清洁，便于管理和维护。
三、网页图片处理
[例1-3] 在“huanbao”网站中，建立一个新网页，导入现成的文本文件questions.txt，在其中插入两幅图片，设置图文并列的方式，其中图片questions.gif采用左对齐方式，与各小标题并列起来；图片water.gif采用右对齐方式，放置在“水污染”标题下，如图5-13所示，将网页保存为questions.htm。
操作步骤：
① 启动FrontPage2000，打开“huanbao”的站点。
② 单击常用工具栏“新建”按钮，打开一个新的页面。
③ 单击“插入（I）”菜单中的“文件（F）”命令，弹出“选择文件”对话框，从中选择所需的questions.txt文件，单击“确定”按钮，在弹出的“转换文本”对话框中，选择“以HTML方式处理”，再单击“确定”按钮。
④ 依次单击“插入（I）” 菜单中的“图片（P）”“来自文件（F）”命令，插入图片questions.gif和water.gif。
⑤ 右击图片questions.gif，单击快捷菜单中的“图片属性”命令，打开“图片属性”对话框，单击“外观”标签，单击“对齐方式”右边的向下箭头，选择“左对齐”。
⑥ 用同样的方法将图片water.gif定义为右对齐的方式，适当调整两幅图片的位置。
1. 图片的透明处理
[例1-4] 将questions.gif图片背景中的白色变为透明。操作步骤：
单击图片工具栏的“设置透明颜色”按钮，将指针指向该图片中白色背景处单击，即可产生背景透明的效果。
2. 图片的自动缩略
[例1-5]? 将questions.htm网页中water.gif图片制作成自动缩略图。
操作步骤：
① 单击water.gif图片，单击图片工具栏“自动缩略图”按钮。
② 单击 “工具（T）” 菜单中的“网页选项（A）”命令，打开“网页选项”对话框，单击“自动缩略图”标签，再选中“边缘凹凸效果（V）”命令，单击“确定”按钮即可。2-1-c-n-j-y
四、框架的建立
在FrontPage 2000中，可以方便地制作框架。其方法是：依次单击“文件（F）”菜单中的“新建（N）”“网页（P）”命令，打开“新建”对话框，单击“框架网页”标签，对话框中将显示设定好的十种框架形式供选择，如图所示。
单击其中的一种框架，再单击“确定”按钮，即可产生选定的框架类型。
?[例1-6]? 建立一个如图所示的框架页面，整个框架网页取名为knowledge.htm。
操作步骤：
① 依次单击“文件（F）”菜单中的“新建（N）”“网页（P）”命令，打开“新建”对话框，单击“框架网页”标签，在框架列表中单击“标题、页脚和目录”，最后单击“确定”按钮。屏幕显示如图所示的框架结构，在每一个框架中，都有“设置初始页面”和“新建网页”两个按钮。
②???? 击上框中的“新建网页（N）”按钮，在页面中插入图片“biaoti2.gif”。
③???? 击左框中的“新建网页（N）”按钮，在页面中输入相应的文字。
④???? 在“脚注”框中插入动画star2.gif，并输入相应的文字。
⑤ 单击右框（主框）中的“设置初始页面”按钮，在弹出的“创建超链接”窗口选择“welcome.htm”网页文件名，单击“确定”按钮。21cnjy.com
⑤???? 将指针指向各边框线，当指针变成双箭头时拖动，可以改变框架的大小和比例。适当调整边框线，使各框架比例协调。【来源：21cnj*y.co*m】
1. 框架的属性
框架的属性设置包括调整框架大小、设置框架边界、改变边框线的宽度等，以便设计出更独特的框架效果。
[例1-7]??? 将左框边距高度设置为40，宽度设置为8，整个边框线宽度为0，其余采用默认值。操作步骤：
① 单击左框，选定框架，然后单击“框架（R）” 菜单中的“框架属性（P）”命令，打开“框架属性”对话框，在对话框中输入相应的设置。【版权所有：21教育】
②???? 击“框架网页（F）”按钮，将“框架间距”设置为0，最后单击“确定”按钮。
2.? 框架的保存
由于每一个框架都是一个单独的网页，因此，在保存框架网页时，必须根据屏幕提示依次将各框架保存起来。
单击常用工具栏“保存”按钮，弹出“另存为”对话框，在该对话框中显示了各框架的示意图，当上框被蓝框框住时，将文件名命名为top.htm。用相同的方法，将左框命名为left.htm，右框命名为main.htm，脚注框架命名为bottom.htm，整个框架命名为knowledge.htm。
五、课堂小结
? 本节课主要借助FrontPage2000网页制作工具编辑网页，运用其网页的建立，图片处理功能，框架的使用制作出一个生动的绿色家园网站，使学生不仅会做网站，更知道环境保护对人类的重要性。21教育网
六、布置作业
制作一个以环境保护或绿色家园为主题的个人网站
教学目标：
1.认知目标：通过资料的收集和整理、网站结构的总体规划、网页技巧的运用和实施，能够独立制作有绿色家园为主题的个人网站，让学生在制作过程中能同时了解环境保护对人类的重要性。【来源：21·世纪·教育·网】
2.技能目标：使学生通过学习熟练应用FrontPage 2000中的网页的建立。掌握网页制作的各种技术和方法，包括个人的站点建立、文字处理、图片处理、框架。
3.情感目标：通过学习和时间操作，培养学生的审美能力、创新能力、动手能力和自学能力以及分析能力和解决问题的能力。21教育名师原创作品
教学重点：掌握环境保护的相关知识，灵活运用FrontPage 2000网页技巧制作个人网站
教学手段：多媒体电化教学与实践演练相结合的方法。
教学用具：多媒体网络教室、大屏幕投影仪系统一套。
教学过程：
在制作个人网站之前，应先确定网站的主题。本节课的主题是围绕环境保护对人类的重要性制作一个绿色家园的网站，收集相关的资料，包括文字、图片、动画等。将资料内容分类，规划网站的结构，拟定几个网页主题。借助一些软件制作、处理网页中所需的图片、动画等，利用FrontPage2000等网页制作工具编辑网页，直到完成网站中所有网页。
本节课主要围绕绿色家园为主题建立一个个人网站，如下图所示
一、 新站点的建立
为了有效地发挥FrontPage2000对网页的组织管理功能，通常在制作具体的网页之前，应先创建一个新站点，然后根据网站的具体结构制作网页。【出处：21教育名师】
?[例1-1] 在“My Documents”中的 “My webs”文件夹下建立一个名为“huanbao”的新站点。
操作步骤：
① 单击“开始”按钮，将指针依次指向“程序（P）”“Microsoft FrontPage”，并单击，即可启动FrontPage2000，如图5-2所示。
② 依次单击“文件（F）”菜单中的“新建（N）”“站点（W）”命令，弹出“新建”对话框，如图所示。
③ 在“新建”对话框中单击“空站点”，在“指定新站点的位置（S）”框中输入 “C：My Documentsmy Webshuanbao”，最后单击“确定”按钮。www.21-cn-jy.com
FrontPage 2000将自动在指定位置建立一个站点，首先建立 “C：My DocumentsMy webshuanbao”文件夹，然后在此文件夹下，再建立一组文件夹，其中可见文件夹包括：“_private”和“Images”（存放图形文件），其余文件夹被隐藏起来.2·1·c·n·j·y
二、网页的建立
[例1-2] 在“huanbao”网站中建立第一个网页，页面如图所示，取名为“welcome.htm”。
1．? 文字编辑
文字编辑是制作网页最基本的操作。在网页编辑窗口中，可以像在Word中一样直接输入文字，进行编辑和排版，
操作步骤：
① 选定标题“绿色家园”，进行如下设置：字体为黑体，字号为7号字，颜色为绿色，居中排列。
② 选定正文，并设置如下：采用默认的字体和字号，颜色为黑色，居中排列。
2. 插入图片
插入图片的方法是：将插入点移到要插入图片的位置，依次单击“插入（I）”菜单中的“图片（P）”“来自文件（F）”命令，打开“图片”对话框，如图所示。
如果要插入的图片已经保存在当前的网站中，可以直接在图的列表框中选取，然后单击“确定”按钮。否则，单击“浏览”按钮 ??，从“选择文件”对话框中选择所需图片，单击“确定”按钮，将图片插入到网页中。21·cn·jy·com
在“图片”对话框中，还可以单击“剪贴画（C）”按钮，插入Office剪贴画；单击“扫描（S）”按钮，插入从扫描仪获取的图片。www-2-1-cnjy-com
操作步骤：
??? ① 依次单击“插入（I）”菜单中的“图片（P）”“来自文件（F）”命令，打开“图片”对话框，单击“浏览”按钮，从弹出的“选择文件”对话框中选择所需图片“zhuzi.gif”，单击“确定”按钮，插入图片。
??? ② 拖动图片到页面左侧适当位置。
3. 插入动画
在网页制作中，经常使用一些小动画，使页面生动活泼，这些小动画文件用专门的工具制作，也以GIF作为文件的扩展名。
操作步骤：
① 依次单击“插入（I）” 菜单中的“图片（P）”“来自文件（F）”命令，打开“图片”对话框，单击“浏览”按钮，从“选择文件”对话框中选择所需图片“diqiu1.gif”，单击“确定”按钮，插入动画。21*cnjy*com
② 拖动动画到标题下方适当位置。
4. 插入水平线
水平线是贯穿网页宽度的细灰条，用来分隔文本或加着重符。插入水平线可以帮助我们将各类相关信息组合到一起，但同一个页面中水平线不宜过多。21*cnjy*com
插入水平线的方法是：先将插入点移到目标位置，再单击“插入（I）”、菜单中的“水平线（L）”命令。
如果要设置水平线的外观，可以双击水平线，打开“水平线属性”对话框，如图5-8所示。
调整水平线的宽度、高度、对齐方式以及颜色，就可以改变它的外观。
操作步骤：
① 将插入点移到小动画前。
② 单击“插入（I）” 菜单中的“水平线（L）”命令。
③ 双击水平线，在“水平线属性”对话框中，将宽度设置为50%，其余参数采用默认值，单击“确定”按钮。
5.???? 设置背景
大多数网页都应用背景图案来为网页增色，这些背景可以是一幅大图片，也可以是若干个小图片的重复使用（即“平铺”）。选择背景图案时，要注意与文本相协调，而且背景的应用不要妨碍文本的阅读。另外，背景图案越小，网页的下载速度就越快。21·世纪*教育网
设置背景的操作步骤：
① 单击“格式（O）”菜单中的“背景（K）”命令，出现“页面属性”对话框，且“背景”标签已被打开，如图所示。
② 单击“浏览（B）”按钮，在“选择文件”对话框中浏览文件夹内容，从中搜索到所需背景图案后，单击“确定”按钮，关闭“选择文件”对话框，再单击“确定”按钮，关闭“页面属性”对话框，背景图案即可插入页面。
页面制作完成，可以单击“预览”标签，观察一下效果。
?
6. 网页的保存
单击“文件（F）”菜单中的“保存文件（S）”命令，弹出“另存为”对话框，如图所示。
在“文件名（N）”列表框中输入“welcome”后，单击“保存（S）”按钮。如果要保存的页面含有图片、动画、声音等元素，FrontPage还会继续询问是否保存这些嵌入的文件，如图所示。21世纪教育网版权所有
此时最好将这些文件保存起来，以保持它们在网页中的位置，否则，当网站发生迁移时，可能因找不到这些图片、动画等文件而无法显示。另外，最好将它们保存到Images文件夹中，使网站保持清洁，便于管理和维护。
三、网页图片处理
[例1-3] 在“huanbao”网站中，建立一个新网页，导入现成的文本文件questions.txt，在其中插入两幅图片，设置图文并列的方式，其中图片questions.gif采用左对齐方式，与各小标题并列起来；图片water.gif采用右对齐方式，放置在“水污染”标题下，如图5-13所示，将网页保存为questions.htm。
操作步骤：
① 启动FrontPage2000，打开“huanbao”的站点。
② 单击常用工具栏“新建”按钮，打开一个新的页面。
③ 单击“插入（I）”菜单中的“文件（F）”命令，弹出“选择文件”对话框，从中选择所需的questions.txt文件，单击“确定”按钮，在弹出的“转换文本”对话框中，选择“以HTML方式处理”，再单击“确定”按钮。
④ 依次单击“插入（I）” 菜单中的“图片（P）”“来自文件（F）”命令，插入图片questions.gif和water.gif。
⑤ 右击图片questions.gif，单击快捷菜单中的“图片属性”命令，打开“图片属性”对话框，单击“外观”标签，单击“对齐方式”右边的向下箭头，选择“左对齐”。
⑥ 用同样的方法将图片water.gif定义为右对齐的方式，适当调整两幅图片的位置。
1. 图片的透明处理
[例1-4] 将questions.gif图片背景中的白色变为透明。操作步骤：
单击图片工具栏的“设置透明颜色”按钮，将指针指向该图片中白色背景处单击，即可产生背景透明的效果。
2. 图片的自动缩略
[例1-5]? 将questions.htm网页中water.gif图片制作成自动缩略图。
操作步骤：
① 单击water.gif图片，单击图片工具栏“自动缩略图”按钮。
② 单击 “工具（T）” 菜单中的“网页选项（A）”命令，打开“网页选项”对话框，单击“自动缩略图”标签，再选中“边缘凹凸效果（V）”命令，单击“确定”按钮即可。2-1-c-n-j-y
四、框架的建立
在FrontPage 2000中，可以方便地制作框架。其方法是：依次单击“文件（F）”菜单中的“新建（N）”“网页（P）”命令，打开“新建”对话框，单击“框架网页”标签，对话框中将显示设定好的十种框架形式供选择，如图所示。
单击其中的一种框架，再单击“确定”按钮，即可产生选定的框架类型。
?[例1-6]? 建立一个如图所示的框架页面，整个框架网页取名为knowledge.htm。
操作步骤：
① 依次单击“文件（F）”菜单中的“新建（N）”“网页（P）”命令，打开“新建”对话框，单击“框架网页”标签，在框架列表中单击“标题、页脚和目录”，最后单击“确定”按钮。屏幕显示如图所示的框架结构，在每一个框架中，都有“设置初始页面”和“新建网页”两个按钮。
②???? 击上框中的“新建网页（N）”按钮，在页面中插入图片“biaoti2.gif”。
③???? 击左框中的“新建网页（N）”按钮，在页面中输入相应的文字。
④???? 在“脚注”框中插入动画star2.gif，并输入相应的文字。
⑤ 单击右框（主框）中的“设置初始页面”按钮，在弹出的“创建超链接”窗口选择“welcome.htm”网页文件名，单击“确定”按钮。21cnjy.com
⑤???? 将指针指向各边框线，当指针变成双箭头时拖动，可以改变框架的大小和比例。适当调整边框线，使各框架比例协调。【来源：21cnj*y.co*m】
1. 框架的属性
框架的属性设置包括调整框架大小、设置框架边界、改变边框线的宽度等，以便设计出更独特的框架效果。
[例1-7]??? 将左框边距高度设置为40，宽度设置为8，整个边框线宽度为0，其余采用默认值。操作步骤：
① 单击左框，选定框架，然后单击“框架（R）” 菜单中的“框架属性（P）”命令，打开“框架属性”对话框，在对话框中输入相应的设置。【版权所有：21教育】
②???? 击“框架网页（F）”按钮，将“框架间距”设置为0，最后单击“确定”按钮。
2.? 框架的保存
由于每一个框架都是一个单独的网页，因此，在保存框架网页时，必须根据屏幕提示依次将各框架保存起来。
单击常用工具栏“保存”按钮，弹出“另存为”对话框，在该对话框中显示了各框架的示意图，当上框被蓝框框住时，将文件名命名为top.htm。用相同的方法，将左框命名为left.htm，右框命名为main.htm，脚注框架命名为bottom.htm，整个框架命名为knowledge.htm。
五、课堂小结
? 本节课主要借助FrontPage2000网页制作工具编辑网页，运用其网页的建立，图片处理功能，框架的使用制作出一个生动的绿色家园网站，使学生不仅会做网站，更知道环境保护对人类的重要性。21教育网
六、布置作业
制作一个以环境保护或绿色家园为主题的个人网站