FrontPage网页制作教案(18课时).doc

FrontPage网页制作教案（18课时）学期教学计划一、教材简析本学期使用的计算机教材是江苏科学技术出版社出版的初中信息技术教科书。同时，由于配合高中阶段选修网络课程，增加部分网络知识。本教材主要内容如下：、网络基础知识、网页的建立、网页图片的处理、网页框架的设计、网页表格的制作、网页表单的制作、创建超链接、动态网页的制作、网站的建立二、学情评价、学生学习网络和网页制作的兴趣浓厚，热情较高、学生的计算机基础知识掌握不够牢、学生运用电脑的能力较差、部分学生上机行为不够规范、有些学生键盘操作不熟练，用一只手操作键盘现象较严重二、目的要求、提高学生学习计算机网络知识的兴趣，注重动手能力、规范学生上机行为，养成良好的习惯、掌握基本的网络知识和网上获取信息的能力、对学生适时进行爱国主义教育、成绩指标：平均分80，及格率98，高分率80三、教学措施、认真钻研，精心备课、仔细讲授、耐心辅导、严格要求学生四、教学进度序次 课题：（内容） 课时 周次 序次 课题：（内容） 课时 周次1 机房常规教育和课程安排 1 1 10 练习、实践 102 网络基础知识，制作工具 1 2 11 动态网页制作 113 网页的建立、网页属性设置 1 3 12 网站建立 124 网页图片的处理 1 4 13 设置单元格式 135 练习、实践 1 5 14 开始6 网页框架的设计 1 6 分组做网站7 网页表格的制作 1 7 8 网页表单的制作 1 8 9 创建超链接 1 9 第一节 网页制作基础知识教学目标：1、了解网站、网页、主页和HTML的基本概念 2、了解常见的网页制作工具 3、掌握Frontpage的启动和退出教学手段：教师讲解与学生演示相结合教学过程：一 讲课：一、网页及其组成通过浏览器在WWW上所看到的每一幅画面都是一个网页（Web Page）。网页是全球广域网上的基本文档，用HTML语言编写。网页中所的元素主要有文字、图片、声音、动画、影像以及链接等，通过这些元素的有机组合，就形成了包含各种信息的网页。其中，文字是网页中最常用的元素；图片可以给人以生动直观的视觉印象，适当运用图片，可以美化网页；链接的设计，可以使我们进行选择性的浏览；随着动态HTML技术的发展，人们在网页中加入声音、动画等多媒体信息，使网页更加丰富多彩。 二、常用的网页制作工具最初，人们利用HTML语言在文本编辑器中制作网页。HTML语言是超文本标记语言（Hypertext Markup Language）的缩写，用来描述网页的结构，但不能直观的描述网页在浏览器中的效果。因此，只有熟练掌握HTML语言的专业人员才能用它制作网页。后来出现了一些网页制作工具（如CDIDA软件），降低了对HTML语言的要求，但是要实现某些功能，还必须输入相应的HTML代码。FrontPage系列软件的问世，才将人们从HTML代码中解放出来。用FrontPage软件制作网页就象在文字处理软件中编排多媒体文档一样，具有“所见即所得”的特性，而真正描述网页结构的HTML代码，则由FrontPage在幕后自动生成。这样，大家都可以方便地制作自己的网页。目前，使用较多的网页制作软件有：FrontPage、Flash、Dreamweaver等。三、FrontPage2000的启动和退出1 启动 方法：单击“开始”按钮，拖动鼠标指针依次指向“程序（P）”“Microsoft FrontPage”，并单击，即可启动FrontPage2000。2 FrontPage2000的视图方式在FrontPage 2000视图栏中，有页面、文件夹、报表、导航、超链接、任务等六种视图方式，在网页制作和网站管理中，分别代表六种不同的工作模式。 （1）页面：用来编辑网页。（2）文件夹：用于管理站点中的文件和文件夹。（3）报表：用来了解整个网站的状况，报告站点中文件和超链接的状态。（4）导航：用于帮助设计网站结构图，网页会依据结构图的形式自动产生链接。（5）超链接：显示来自和指向站点中每一个网页的所有超级链接。（6）任务：列出站点中要完成的任务。根据需要，单击视图栏中的按钮，来切换不同的视图方式。如图5-2中，在页面视图下，可以直接进行网页的编辑和制作。3 FrontPage2000的退出单击“关闭”按钮即可。练习：1 什么叫网页？2 一般情况下，网页由哪几种元素组成？3 FrontPage 2000有几种视图方式？每种视图方式各有什么功能？第二节 网页的建立教学目标：使学生掌握网页建立的方法和网站建立的方法教学难点：网站的建立教学手段：多媒体演示教学过程：讲课一、 网站的建立1启动FrontPage 2000，依次单击“文件（F）”菜单中的“新建（N）”“站点（W）”命令，弹出“新建”对话框，如图所示。 2单击“空站点”，然后指定新站点的位置，系统默认的位置类似于“C：My Documentsmy Websmyweb1”，也可以自己指定网站所在的文件夹，最后单击“确定”按钮即可。 例 在“我的文档”中“My webs”文件夹下建立一个名为“huanbao”的网站。操作步骤： （1）启动FrontPage 2000。 （2）依次单击“文件（F）”菜单中的“新建（N）”“站点（W）”命令，在弹出的“新建”对话框中单击“空站点”，在“指定新站点的位置”下方的文本框中输入 “C：My Documentsmy Webshuanbao”，最后单击“确定”按钮。FrontPage 2000将自动在指定位置建立一个站点，首先建立 “C：My DocumentsMy webshuanbao”文件夹，然后在此文件夹下，再建立一组文件夹，其中可见文件夹包括：_private和Images（存放图形文件），其余文件夹被隐藏起来二、网页的制作因为FrontPage2000默认的视图方式是“网页”，可以直接进行网页的编辑工作。网页编辑窗口的左下角有普通、HTML、预览三个标签，单击“普通”标签，可以直观地进行网页的编排；单击“HTML”标签，可以直接编辑HTML代码，或者输入FrontPage2000所不支持的HTML新代码，以实现动态网页的最新效果；单击“预览”标签，可以观看网页在浏览器中的情形。虽然FrontPage2000 具有“所见即所得”的功能， 在 “huanbao”网站中建立第一个网页取名为welcome.htm。操作步骤：1 文字编辑2 插入图片插入图片可使网页丰富多彩。在网页中可以使用的图片类型有多种，但最常用的是GIF和JPG格式的图片，因为这两种图片的文件长度较小，有利于提高网页的浏览速度。所以，插入其他格式的图片后，在页面存储时，系统会自动将图片格式转换成GIF或JPG格式。3 插入动画在网页制作中，经常使用一些小动画，使页面生动活泼，这些小动画文件用专门的工具制作，也以GIF作为文件的扩展名。操作步骤： （1）依次单击“插入（I）” 菜单中的“图片（P）” 、“来自文件（F）”命令，打开“图片”对话框，单击“浏览”按钮，打开“图片”对话框，单击“浏览”按钮， 从“选择文件”对话框中选择所需图片“diqiu1.gif”，单击“确定”按钮，插入动画。 （2）拖动动画到标题下方适当位置即可。4 插入水平线水平线是贯穿网页宽度的细灰条，用来分隔文本成加着重符。插入水平线可以帮助我们将各类相关信息组合到一起，但同一个页面中水平线不宜过多。调整水平线的宽度、高度、对齐方式以及颜色，就可以改变它的外观。5 设置背景（1）单击“格式（O）”菜单中的“背景（K）”命令，出现“页面属性”对话框，且“背景”标签已被打开。（2）单击“浏览（B）”按钮，在“选择文件”对话框中浏览文件夹内容，从中搜索到所需背景图案后，单击“确定”按钮，关闭“选择文件”对话框，再单击“确定”按钮，关闭“页面属性”对话框，背景图案即可插入页面。页面制作完成，可以单击“预览”标签，观察一下效果。三、网页的保存单击“文件（F）”菜单中的“保存文件（S）”命令，弹出“另存为”对话框.在“文件名（N）”列表框中输入“welcome”后，单击“保存（S）”按钮。如果要保存的页面含有图片、动画、声音等元素，FrontPage还会继续询问是否保存这些嵌入的文件，如图5-11所示。此时最好将这些文件保存起来，以保持它们在网页中的位置，否则，当网站发生迁移时，可能因找不到这些图片、动画等文件而无法显示。另外，最好将它们保存到Images文件夹中，使网站保持清洁，便于管理和维护。练习：1 在设计网页过程中，定义字体时要注意哪些问题？2 为什么在网页中通常都使用GIF或JPG格式的图片文件？设置网页的背景时，可不可以使用较大的图片？有什么缺点？制作“自我简介” 制作“自我简介”一、 教学目标1、 让学生熟悉FrontPage 2000的界面。2、 学会制作网页标题。3、 学会在网页中插入美丽的图片。4、 学会在FrontPage 2000中使用表格。二、 重、难点使用表格三、 教学方法演示法、讲授法、实践操作法、比较讨论法四、 教学类型新授课五、 教学过程导入前面大家了解因特网的神奇世界，畅游了丰富多彩的网站，欣赏了精美华丽的网页。看到这么多漂亮的网页，同学们是否也想自己在网上建立一个自己的“家园”？现在我们将学习如何利用FrontPage 2000在因特网上安一个自己的“家”。 在因特网上安“家”的一般步骤大致可分为网站规划、网页制作和上传发布三个阶段。本章创建的整个网站主要由“自我简介”、“成长之路”、“兴趣特长”和“网上交流”等网页构成。讲授创建网上家园，首先应将自己的有关情况展示出来，让来访者对自己有一个大概的了解。这里，先来看一个同学制作好的“自我简介”网页。这个网页包含有图片、表格和相关文字等，下面学着制作这个网页。每个网页都有一个标题，让来访者一目了然。在“自我简介”网页中用“自我简介”几个文字来作为这个网页的标题。演示1、 单击屏幕左下角的“开始”按钮，在“开始”菜单中选择“程序”“Microsoft FrontPage”菜单命令，进入FrontPage 窗口。2、在网页编辑工作区输入文字“自我简介”，单击“格式”工具栏上“居中”按钮，将文字居中。3、选中文字“自我简介”，通过“格式”工具栏的“字体”下拉列表，选择“楷体_GB2312”。4、在“格式”工具栏选择“字号”为“24磅”，“颜色”为“粉红色”5、单击“常用”工具栏上的“保存”按钮，弹出 “另存为”对话框。6、在“文件名”中输入文件名“简介”后，单击“保存”按钮，保存网页。实践操作1、 使用“格式”“字体”菜单命令也可以方便地设置字体。启动FrontPage，在编辑工作区中输入文字“兴趣爱好”，使用菜单命令改变字体。2、 单击“HTML”标签，观察编辑工作区的变化。提醒在网页设计中，对于非Windows自带的字体尽量少用，以免造成别人浏览此网页时无法显示这种字体，影响网页整体效果。讲授1、 FrontPage启动后，会自动打开一个新的空白网页窗口。FrontPage窗口与前面所学的Word窗口类似，由标题栏、菜单栏、工具栏、编辑区和状态栏组成。2、 网页文件实际上是一个按HTML语言规则编写的文本文件。我们看到的网页是浏览器对HTML文件进行逐条解释，再显示出来的结果。HTML是英文Hyper Text Markup Language的缩写，意为“超文本标记语言”。这种语言用“”来标记网页中对象的格式和有关参数。网页中除了文字保存在HTML文件中外，其他对象（如声音、图象、动画等）在HTML文件中只是保存了相应的标识和有关参数，真正是内容还在这些对象的文件中。因此，这些对象的文件如果被删除或改变了位置，就不能在浏览器中正确显示出来。讨论如果在两个文字之间增加了一个空格后，间距又显得太大，此时应怎样调整才能得到合适的间距呢？实践操作启动FrontPage，分别建立主题为“兴趣特长”和“成长之路”的两个网页，并保存为xingqu.htm和chengzhang.htm讲述你在因特网上漫游时，精彩生动的图片会使人流连忘返。在自己的网页上添加美丽的图片，一定也会增加吸引力。演示1、 打开网页jianjie.htm，选择“插入”“换行符”菜单命令，弹出 “换行符属性”对话框，选择“普通换行符”，单击“确定”按钮，将光标下移一行。3、 单击“常用”工具栏上的“插入文件中的图片”按钮，弹出 “图片”对话框。4、 单击“剪贴画”按钮，弹出“剪贴画库”窗口，在“比喻”类别中找到剪贴画图片，将此图片插入到网页中。5、 调整图片的大小，并居中放置。 插入图片讲授1、 使用回车键换行时，行距较大，而采用普通换行符来换行，行距为0。2、 FrontPage中可以插入的图片文件格式很多，如GIF、JPEG、PNG和BMP等。其中BMP格式的图片是未经过压缩的，文件较大，一般很少使用；而GIF、JPEG、PNG格式的图片都是压缩过的，文件较小，便于在网页中浏览和下载，所以经常使用。实践操作1、 在已建立的网页“成长之路”中，选择“插入”“图片”菜单命令，加入合适的图片，并调整图片的位置和大小。2、 在已建立的“兴趣特长”网页中，使用“常用”工具栏上的“插入文件中的图片”按钮，加入合适的图片，并调整图片的位置和大小。3、 选择“格式”“背景”菜单命令在网页中加入背景图片 以图片为背景的网页讲解在FrontPage中使用表格，可以整齐地排列文本，有效地组织数据，使整个网页看起来简洁清晰。我们下面来使用表格制作出自我情况介绍。 网页中的“自我简历表”演示1、 单击“常用”工具栏上的“插入表格”按钮，制作出一个6行2列的表格。2、 在第一行第二列中，单击鼠标右键，在弹出的快捷菜单中，选择“拆分单元格”命令，弹出 “拆分单元格”对话框。3、 选取“拆分为列”选项，在“列数”框中输入3，单击“确定”按钮，将此单元格分为三列。4、输入表格中相应的文字。5、 按住Ctrl键，单击表格的第一列和