FrontPage网页制作教案18课时Word下载.docx
《FrontPage网页制作教案18课时Word下载.docx》由会员分享,可在线阅读,更多相关《FrontPage网页制作教案18课时Word下载.docx(8页珍藏版)》请在冰豆网上搜索。
平均分80,及格率98%,高分率80%
三、教学措施
1、认真钻研,精心备课2、仔细讲授3、耐心辅导4、严格要求学生
四、教学进度
序次课题:
(内容)课时周次
序次课题:
(内容)课时周次
1
机房常规教育和课程安排
1
10练习、实践
110
2
网络基础知识,制作工具
2
11动态网页制作
111
3
网页的建立、网页属性设置
3
12网站建立
112
4
网页图片的处理
4
13设置单元格式
113
5
练习、实践
5
14开始
6
网页框架的设计
6
分组做网站
7
网页表格的制作
7
8
网页表单的制作
8
9
创建超链接
9
第一节
网页制作基础知识
教学目标:
1、了解网站、网页、主页和HTML的基本概念
2、了解常见的网页制作工具
3、掌握Frontpage的启动和退出
教学手段:
教师讲解与学生演示相结合
教学过程:
一.讲课:
一、网页及其组成
通过浏览器在WWW上所看到的每一幅画面都是一个网页(WebPage)。
网页是全球广域网上的基本文档,用HTML语言编写。
网页中所的元素主要有文字、图片、声音、动画、影像以及链接等,通过这些元素的有机组合,就形成了包含各种信息的网页。
其中,文字是网页中最常用的元素;
图片可以给人以生动直观的视觉印象,适当运用图片,可以美化网页;
链接的设计,可以使我们进行选择性的浏览;
随着动态HTML技术的发展,人们在网页中加入声音、动画等多媒体信息,使网页更加丰富多彩。
二、常用的网页制作工具
最初,人们利用HTML语言在文本编辑器中制作网页。
HTML语言是超文本标记语言(HypertextMarkupLanguage)的缩写,用来描述网页的结构,但不能直观的描述网页在浏览器中的效果。
因此,只有熟练掌握HTML语言的专业人员才能用它制作网页。
后来出现了一些网页制作工具(如CDIDA软件),降低了对HTML语言的要求,但是要实现某些功能,还必须输入相应的HTML代码。
FrontPage系列软件的问世,才将人们从HTML代码中解放出来。
用FrontPage软件制作网页就象在文字处理软件中编排多媒体文档一样,具有“所见即所得”的特性,而真正描述网页结构的HTML代码,则由FrontPage在幕后自动生成。
这样,大家都可以方便地制作自己的网页。
目前,使用较多的网页制作软件有:
FrontPage、Flash、Dreamweaver等。
三、FrontPage2000的启动和退出
1.启动
方法:
单击“开始”按钮,拖动鼠标指针依次指向“程序(P)”“MicrosoftFrontPage”,并单击,即可启动FrontPage2000。
2.FrontPage2000的视图方式
在FrontPage2000视图栏中,有页面、文件夹、报表、导航、超链接、任务等六种视图方式,在网页制作和网站管理中,分别代表六种不同的工作模式。
(1)页面:
用来编辑网页。
(2)文件夹:
用于管理站点中的文件和文件夹。
(3)报表:
用来了解整个网站的状况,报告站点中文件和超链接的状态。
(4)导航:
用于帮助设计网站结构图,网页会依据结构图的形式自动产生链接。
(5)超链接:
显示来自和指向站点中每一个网页的所有超级链接。
(6)任务:
列出站点中要完成的任务。
根据需要,单击视图栏中的按钮,来切换不同的视图方式。
如图5-2中,在页面视图下,可以直接进行网页的编辑和制作。
3.FrontPage2000的退出
单击“关闭”按钮即可。
练习:
1.什么叫网页?
2.一般情况下,网页由哪几种元素组成?
3.FrontPage2000有几种视图方式?
每种视图方式各有什么功能?
第二节
网页的建立
使学生掌握网页建立的方法和网站建立的方法
教学难点:
网站的建立
多媒体演示
讲课
一、网站的建立
1.启动FrontPage2000,依次单击“文件(F)”菜单中的“新建(N)”“站点(W)”命令,弹出“新建”对话框,如图所示。
2.单击“空站点”,然后指定新站点的位置,系统默认的位置类似于“C:
\MyDocuments\myWebs\myweb1”,也可以自己指定网站所在的文件夹,最后单击“确定”按钮即可。
[例]
在“我的文档”中“Mywebs”文件夹下建立一个名为“huanbao”的网站。
操作步骤:
(1)启动FrontPage2000。
(2)依次单击“文件(F)”菜单中的“新建(N)”“站点(W)”命令,在弹出的“新建”对话框中单击“空站点”,在“指定新站点的位置”下方的文本框中输入“C:
\MyDocuments\myWebs\huanbao”,最后单击“确定”按钮。
FrontPage2000将自动在指定位置建立一个站点,首先建立“C:
\MyDocuments\Mywebs\huanbao”文件夹,然后在此文件夹下,再建立一组文件夹,其中可见文件夹包括:
_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、让学生熟悉FrontPage2000的界面。
2、学会制作网页标题。
3、学会在网页中插入美丽的图片。
4、学会在FrontPage2000中使用表格。
二、重、难点使用表格
三、教学方法演示法、讲授法、实践操作法、比较讨论法
四、教学类型新授课
五、教学过程
[导入]前面大家了解因特网的神奇世界,畅游了丰富多彩的网站,欣赏了精美华丽的网页。
看到这么多漂亮的网页,同学们是否也想自己在网上建立一个自己的“家园”?
现在我们将学习如何利用FrontPage2000在因特网上安一个自己的“家”。
在因特网上安“家”的一般步骤大致可分为网站规划、网页制作和上传发布三个阶段。
本章创建的整个网站主要由“自我简介”、“成长之路”、“兴趣特长”和“网上交流”等网页构成。
[讲授]创建网上家园,首先应将自己的有关情况展示出来,让来访者对自己有一个大概的了解。
这里,先来看一个同学制作好的“自我简介”网页。
这个网页包含有图片、表格和相关文字等,下面学着制作这个网页。
每个网页都有一个标题,让来访者一目了然。
在“自我简介”网页中用“自我简介”几个文字来作为这个网页的标题。
[演示]1、单击屏幕左下角的“开始”按钮,在“开始”菜单中选择“程序”→“Microsoft
FrontPage”菜单命令,进入FrontPage窗口。
2、在网页编辑工作区输入文字“自我简介”,单击“格式”工具栏上“居中”按钮,将文字居中。
3、选中文字“自我简介”,通过“格式”工具栏的“字体”下拉列表,选择“楷体”。
4、在“格式”工具栏选择“字号”为“24磅”,“颜色”为“粉红色”
5、单击“常用”工具栏上的“保存”按钮,弹出“另存为”对话框。
6、在“文件名”中输入文件名“简介”后,单击“保存”按钮,保存网页。
[实践操作]
1、使用“格式”→“字体”菜单命令也可以方便地设置字体。
启动FrontPage,在编辑工作区中输入文字“兴趣爱好”,使用菜单命令改变字体。
2、单击“HTML”标签,观察编辑工作区的变化。
[提醒]在网页设计中,对于非Windows自带的字体尽量少用,以免造成别人浏