甘肃少年儿童版小学信息技术第三册第七章网站制作入门教案

巡山小妖精
766次浏览
2020年08月02日 06:48
最佳经验
本文由作者推荐

以真为话题的作文-保安年终总结




第七章 网站制作入门

第1课 小小网页设计师
教学目的:欣赏网站,并尝试规划、设计自己的网站。

教学重点:确定网站主题,收集加工素材。

教学时间:
1
课时

教学过程:

一、名站欣赏:

访问下面的网站,说一说你最喜欢哪一个,为什么?

红泥巴村:

甘肃少年儿童出版社:

北京动物园:

CCTV
纯真年代:

站点一般简写为“
Web
”,实际上 就是把一些信息通过
Web
网页的方式相互链
接起来,存放在一台被称为“服务器”的 计算机中,别人可以通过
Web
浏览器查看
网页信息。站点一般以国际通用的
Internet
地址来表示,例如:
http:

http:
等, 进入某个站点所见到的第一页一般称为“
HomePage
”,中
文的意思是“主页” 。一般认为某个站点的第一个网页叫做主页,也就是在
Web

览器“地址”栏内输入 一个网址后,用户浏览到的第一个网页。用户再通过该主页
的链接可以浏览到其他网页信息。

二、确定网站主题:

如何设计制作自己的网站呢?在动手制作之前我们首先要确定这 个网站的主
题,以及网站的主要内容,最后还要给网站起一个醒目的名字。

三、收集、加工素材:

建立一个网站需要的素材是多样的,一个仅仅版面美观但缺少 内容的网站是无
法留住网友的。文字、图片和声音往往是网站中不可缺少的素材,我们可以利用相
机、扫描仪、麦克风等,从报纸、书刊、电视、网络等渠道收集素材。在创建、发
布网站时一定要注意 不要侵犯了他人的著作权。

四、课后练习:练习
P5
练习内容。






第2课 认识FrontPage 2003
教学目的:

1
、认识
FrontPage 2003


2
、学会利用向导创建网站。

教学重难点:创建站点。

教学时间:
2
课时

教学过程:

第一课时

一、网页制作工作——
FrontPage 2003
二、启动
FrontPage 2003
1
、启动
FrontPage 2003
单击任务栏上的“开始”按钮
,
从“程序”

菜单中选择“
Microsoft FrontPage

单击。

2

FrontPage 2003
的界面说明

FrontPage 2003
的界面可以分成菜单栏、工具栏、视图栏和主编辑窗口
4
大部
分。

①、菜单栏包括【文件】、【编辑】、【查看】、【插入】、【格式】、 【工
具】、【表格】、【框架】、【窗口】、【帮助】等
10
个菜单。

②、工具栏单击【查看】菜单,选择【工具栏】,

在出现的下拉菜单中列出了
几种不同的工具栏,如果菜单项前面有一个对钧号“√”,表明在界在上已显示此
菜单项。如果再单击 一下,将取消这一项的显示。

③、视图栏中摆列着各种管理器的图标,这些管理器包括网页管 理器、文件夹
管理器、报表管理器、导航管理器、超链接管理器和任务管理器等。单击管理器图
标以切换到相应的管理器。

④、主编辑窗口在编辑网页时,在
FrontPage< br>编辑窗口的左下角有四个视图标签:
设计、折分、代码、预览,可以方便我们在不菲同的页面之间 进行切换。

三、练一练

1
、打开
FrontPage 2003
,熟悉
FrontPage 2003
的界面。

2
、练习
P8
练一练中的内容。

第二课时





一、新建站点

任务
1
:新建一个个人网站。

操作步骤:

(< br>1
)打开【文件】菜单,选择【新建】菜单项,在子菜单中选择【站点】菜单
项,出现一 个【新建】对话框,在对话框的【指定新站点的位置】项中输入新站点
的存放位置。


2
)单击【确定】按钮。此时
FrontPage
会自动以新站点名建立一 个站点,并
显示一个正在创建站点的提示对话框,之后该站点很快便创建好了。

新建 的站点只有一个主页

文件,该主页还是空的,需要对它进行编辑
添加内容。同时也可以 添加一些网页到该站点中去。此外,我们发现该站点中包含
有两个子文件夹。一个是
_priv ate
文件夹,一般用来存放一些私人的文件,这些文件
不会被别人看到。另一个是
i mages
文件夹,是
FrontPage
专门创建用来存放图像文
件的文件 夹,因为
FrontPage
扩展服务器的图像文件的默认目录为
images


任务
2:
打开导航视图,观察个人网站的结构,并预览。

二、规划调整网站结构

任务
1:
更改网站主页标题:
< br>单击编辑栏中的“网站”,选择“导航”视图,选择导航视图中需要改变标题
的网页,“重命名” 主页标题。

任务
2:
删除网页“反馈”

阅读教材
P11
删除网页“反馈”内容,按照“跟我学”中的步骤自主学习。

三、练习

1
、打开
FrontPage2003
窗口,切 换网页、文件夹等不同视图方式,观察屏幕的
变化。

2
、根据自己的网站设计,绘制出一个网站导航结构图。


第3课 设置网页格式
教学目的:

1
、学会应用主题模板设计网页。

2
、尝试用表格布置网页版面,并编辑表格内容。

教学重点:用表格布置网页版面,并编辑表格内容。





教学时间:
2
课时

教学过程:

第一课时

一、打开网页



我们建立好网站后,每个网页都会对应一个网页文件,要对网页进行编辑,
可以打开文件夹列表中的网页文件,也可以双击导航视图中的网页名称。

二、用主题模板设计网页

在用
FrontPage 2003
创建 网站的过程中,我们可以像在
PowerPoint
中一样,通
过应用主题模板来为站 点中的网页制作统一风格。

任务:在网站中应用“常青树”主题模板。

1
、双击打开“西西家园”中的网页。

2
、选择“格式”菜单——“主题”。

3
、在右边任务窗格中选择主题“常青树”。

4
、单击编辑栏下方视图标签“预览”,观察网站效果。

5
、选择其他主题模板应用到网页中。

三、练习

第二课时

一、用表格组织网页版面


FrontPage 2003
中为了更好地安排网页布局,定位文字和图形,人们 常常使
用表格进行版面布置,这样做出的网页更加规整有序富于变化。

二、编辑表格

任务:在网页中插入
2

1
列的表 格,对比与
Word
中插入表格的异同。

如何设计由一个表格所组织的网页,其操作步骤如下:


1
)在空 白网页中插入一个
2
×
1
的表格,将表格的边界大小设置为
0



2
)在表格第一行的单元格中输入内容;


3
)在表格中第二行的单元格中插入图片;


4
)将表格框线的粗细设为
0,
得最后的效果。

三、设置表格属性


1
)选定要设置属性的单元格(如果只须设置 某个单元格的属性,只需将光标
移到该单元格内,无需选定该单元格);






2
)单击【表格】菜单,选择【属性】,然后 单击【单元格】选项,或单击鼠
标右键,选择【单元格属性】选项,将会出现一个对话框。


3
)在单元格属性对话框中,我们可以设置单元格的多种属性。


4
)设置完毕后,单击【应用】按钮,可以预览一下设置效果。


5
)单击【确定】按钮,设置结束。


在这个对话框中 ,我们可以设置单元格的属性有:单元格布局、边框、背景等。
四、练习:


第4课 网页中的文字处理
教学目的:

1
、能够在网页中输入文字、设置合理的字体格式。

2
、能够在网页中插入、删除表格,并进行保存。

教学重点:文字的设置
,
在网页中插入、删除表格。

教学时间:
1
课时

教学过程:

一、输入文字

任务:在首页中输入文字,并设置文字格式。

在设 计视图中,打开首页文件,在编辑区单元格中输入文字内容。选中文字,
单击“格式”菜单——“字体” ,设置字体格式。

1
、修饰文字:是指文字的字体、字型、大小(字号)、颜色、效果的设置。

①单击【格式】菜单项,选择【字体】后出现字体对话框;

②或单击鼠标右键,在弹出的对话框中单击【字体】选项,也将出现字体对话
框。

③这时在对话框中的字体设为“隶书”,字型为“加粗”,大小为“
6

2 4
磅)”,
颜色为“红色”,效果为默认。单击【确定】按钮即可完成文字修饰。例中其他字< br>体修饰的操作也类似进行。

二、保存网页

单击常规工具栏上的保存 按钮或单击【文件】菜单再选择【保存文件】,就可
以把正在编辑的网页保存起来。或直接按
C trl+S
键也可以保存网页。

如果你是在修改已经保存过的网页,修改过的网页将被重新保存。但如果是新




建的网页,单击“保存”后会出现对话框。

在 对话框中的【文件名】栏内输入网页的文件名(如“
First
”),单击【保存】
按 钮,该网页就会保存到当前的站点上。
FrontPage 2000
保存文件的类型主要有网 页
文件(
.htm
)、
FrontPage
模板(
.tem
)、文本文件(
.txt
)、超文本模板文件(
.htt

等。

三、浏览网页


网页编辑完成后,可以用浏览器预览一下网 页的效果。有两种预览网页的方式:
一种是单击
FrontPage 2000
主编辑 窗口下面的【预览】标签,就打开一个
FrontPage
编辑器自带的浏览器,看完之后,单 击【普通】标签,又切换到编辑状态。

另一种是单击【常规】工具栏的“

”图标按钮(或直接按
Ctrl+Shift+B
键,或
单击【文件】菜单并选择【在 浏览器中预览】菜单项),将启动已安装好的浏览器
并打开该网页。如果在预览之前没有把修改后的或新 建的网页保存起来,则将弹出
一个对话框提示你应该首先保存该网页。

注意:在预览 窗口中看到的是网页在发布后的大致样式。要看到网页在
WWW
浏览器中的真实情形,必须使用 【在浏览器预览】菜单项查看。而且,即使是在
WWWW
浏览器中浏览通过,不同的浏览器产生 的效果不一样。在发布到
Internet

的前后,最好使用不同的浏览器多浏览几 次。

四、练习


第5课 网页图片编辑
教学目的:

1
、能够在网页中插入图片。

2
、能够对网页中插入的图片进行调整大小、环绕样式等设置。

教学重点:图片属性的设置。

教学时间:
1
课时

教学过程:

一、插入图片


1
)新建一个空白网页,把光标定位到要插入图片的地方。

(< br>2
)单击【插入】菜单,选择【图片】菜单项,在子菜单中单击【来自文件】
选项,在出 现一个【图片】对话框的同时,还弹出一个【选择文件】对话框。






3
)在【选择文件】对话框的“搜寻”栏内选 定图片的存放位置,然后从文件
列表中双击某个图片文件(或选定图片文件),单击【确定】按钮,则图 片插入到
网页中。

任务:在首页中插入图片

二、编辑图片

在网页中插入图片后,我们还要对图片的某些属性进行设置。


1
)在某个图片上单击鼠标右键后,弹出一个快捷菜单,选择图片属性。


2
)单击【图片属性】菜单项,出现图片属性对话框。在图片属性对话框中,
我们可以设置图片的各种属性:

1
、常规属性

【图片源】:指 图片的存放位置。如果要重新选择其他一幅图片时,单击【浏
览】按钮。如果要修改这幅图片,可以单击 【编辑】按钮,启动自带的
Image Composer
软件,修改完图片后,只要退出该软件,网页图片就会自动更新。

【类型】:我们可以选择图片的类型,
GIF
或者是
JPEG


在“质量”栏内一
般设定为
70-80
就行了。

2
、图像的外观

单击【图片属性】对话框中的【外观】选项卡。在这个对话 框中,我们可以设
置图片与文本之间的对齐方式、图片的边框粗细以及图片的大小等。

布局栏:单击【对齐方式】下拉箭头,出现一个下拉菜单,有多种对齐方式,
在图文混排时非常有用, 大家可以试试看。

利用【边框粗细】可以在图片周围加上一个指定宽度的边框。值为
0
时,边框
不显示。

设置【水平间距】和【垂直间距】的值,可以改变图片 与相邻内容(如文字)
之间的距离。

默认情况下,浏览器中显示的网页图片是实际大 小的图片。如果要改变图片的
大小,则在对话框的【大小】栏中调整“宽度”、“高度”的值(单位为像 素或百
分比)。选择“保持纵横比”选项是防止尺寸修改后的图片出现太扁或太长的“变
形”现 象。

图片的定位,可以单击图片工具栏的图片定位按钮。图片可以随便移动,但在
预 览时常会与实际不一致。





三、练习:

在网页中插入合适的图片,并进行编辑。

第6课 为网页锦上添花
教学目的:

1
、学会为网页添加字幕,使网页更美观、生动。

2
、给网站添加背景音乐。

教学重点:网页设置。

教学时间:
2
课时

教学过程:

第一课时

一、创建字幕

在浏览网页时,我们经常会看到一些滚动 发布的通知和提示信息,这种滚动的
文字我们称为“字幕”。

任务:在网页中插入滚动字幕

1
、单击“插入”菜单——“
Web
组件”命令。

2、在弹出的“插入
Web
组件”对话框中选择“动态效果”——“字幕”——“完
成”。

3
、在“字幕属性”窗口——“文本”中输入滚动文字。

4
、设置字幕的滚动方向、速度、背景等。

5
、如果还需要改变字 幕文本的格式,单击“字幕属性”窗口左下角的“样式”
按钮,进行设置。

6
、单击“确定”并预览字幕效果。

二、给网页添加背景音乐
< br>修改背景音乐。单击【背景音乐】区域的【浏览】按钮,出现对话框,在硬盘
目录下选择一个Wav
声音文件。本例使用“
C:windowsMedia
”目录下的“


文件,大家也可以自己选择其他的声音文件作为背景音乐。缺省状态下背景声音的
设置为始终有声音。

三、练习

第二课时

在网页中单击 鼠标右键,从弹出的菜单中单击【网页属性】选项,出现网页属
性对话框。在这个对话框中我们除了强以 添加背景音乐外,还可以修改网页的多种




属性。

一、网页属性的设置:

1
、常规属性设置。在这 个对话框中共有
5
个选项卡。其中,在【常规】选项卡
中我们可以修改网页的标题、背 景音乐等。

2
、背景色设置。单击网页属性对话框的【背景】选项卡,就可以设置网 页的背
景色和图片等。

①修改网页的背景色。单击对话框中【颜色】区域内的“背景 ”项下拉选择箭
头,并从颜色框中选择一种颜色,然后单击【确定】按钮,这时网页的背景颜色就
变成了刚才选择的颜色。

②设置背景图片。(
1
)重新单击鼠标右键,选 择【网页属性】进入对话框并单
击【背景】选项卡。(
2
)然后单击在【格式】区域内 的“背景图片”选择框,选中
后下面的“水印”选择项、文本框都不再变灰。(
3
)这 时再单击【浏览】按钮进入
网页背景图片选择对话框。(
4
)单击对话框右下角的【剪 贴画】按钮,就会弹出【剪
贴画库】。单击【
Web
背景】选项从中选择一种图案作为 背景,选中后单击“

”插
入剪辑按钮。(
5
)然后单击网页属性对 话框的【确定】按钮。这时网页背景已变成
了刚才选择的图案。

二、练习


第7课 穿梭网际的超链接
教学目的:

1
、学习超链接的制作方法。掌握超链接的设置技巧。

2
、学会创建发送电子邮件的超链接。

教学重点:超链接的制作方法,超链接的设置技巧。

教学时间:
2
课时

教学过程:

第一课时

每当我们在浏览网页时,都会发现当鼠标指针移动到某些文字或图片时,就 会
变成一只手掌“

”的样子,这时只需单击鼠标左键就可以打开另一网页了。这就是
我们将要讲述的网页“超链接”方式。正是由于有了“超链接”,因特网才会如此
神奇和流行! 网页上的超链接主要有三种:一种是相对网址的超链接;第二种是与




绝对网址(如
http:
)的超链接;第三种是指在同一网页内的超链接。

一、创建发送电子邮件的超链接:

任务:在首页下文创建电子邮箱的超链接。

在首页下方输入邮箱名称,选定文字“< br>E-mail:xixi@
”,单击超链接按钮,
出现“编辑超链接”对话框。然后单击 “

插入超链接”按钮(在对话框“
URL
”栏
右边),出现“创建 电子邮件超链接”对话框。在文字框内输入邮箱地址(如
E-mail:xixi@
),连续单 击【确定】按钮,就可以创建一个超链接到邮箱地
址。

二、练习

第二课时

一、网页间的超链接

其操作步骤如下:

1
)创建一个新网站,并在网站内新建几个网页文件:主页“

”、兴< br>趣“

”、相册“

”、喜爱站点“

”等文件。


2
)打开主页文件“

”,输入文字内容,并单击插入图片按钮,从 “剪
贴画库→学院”中插入图片。


3
)选定网页内的文字“兴趣”,单击“

”超链接工具按钮,出 现【编辑超
链接】对话框。在对话框的文件列表中选择“

”网页文件。

4
)与(
3
)操作类似,对文字“相册”、“喜爱站点”分别设置超链 接到文
件“

”、“

”。

二、绝对网址的超链接

其操作步骤如下:


1
)在上例所创建的网站中,打开喜爱站点“

”网页文件。


2
)输入标题“我喜爱的站点”,“文字链接:”,按回车键。


3
)单击“

”工具按钮,建立项目符号列表。

4
)文字上的超链接:输入“中文搜狐”,选定这段文字,然后单击超链接工
具 按钮,在所出现的对话框“
URL
”栏内输入“
http:
”,最后单击【确
定】按钮。就可以创建了文字上的超链接;


5
)图片上的超链接:

选定刚插入的图片

,单击“

”超链接工具按钮,在
出现的对话框中的“
URL
”栏内输入网址“
http:
”。单击【确




定】按钮。这样,也就创建了一个图片上的超链接。

三、练习






第七章 网站制作入门

第1课 小小网页设计师
教学目的:欣赏网站,并尝试规划、设计自己的网站。

教学重点:确定网站主题,收集加工素材。

教学时间:
1
课时

教学过程:

一、名站欣赏:

访问下面的网站,说一说你最喜欢哪一个,为什么?

红泥巴村:

甘肃少年儿童出版社:

北京动物园:

CCTV
纯真年代:

站点一般简写为“
Web
”,实际上 就是把一些信息通过
Web
网页的方式相互链
接起来,存放在一台被称为“服务器”的 计算机中,别人可以通过
Web
浏览器查看
网页信息。站点一般以国际通用的
Internet
地址来表示,例如:
http:

http:
等, 进入某个站点所见到的第一页一般称为“
HomePage
”,中
文的意思是“主页” 。一般认为某个站点的第一个网页叫做主页,也就是在
Web

览器“地址”栏内输入 一个网址后,用户浏览到的第一个网页。用户再通过该主页
的链接可以浏览到其他网页信息。

二、确定网站主题:

如何设计制作自己的网站呢?在动手制作之前我们首先要确定这 个网站的主
题,以及网站的主要内容,最后还要给网站起一个醒目的名字。

三、收集、加工素材:

建立一个网站需要的素材是多样的,一个仅仅版面美观但缺少 内容的网站是无
法留住网友的。文字、图片和声音往往是网站中不可缺少的素材,我们可以利用相
机、扫描仪、麦克风等,从报纸、书刊、电视、网络等渠道收集素材。在创建、发
布网站时一定要注意 不要侵犯了他人的著作权。

四、课后练习:练习
P5
练习内容。






第2课 认识FrontPage 2003
教学目的:

1
、认识
FrontPage 2003


2
、学会利用向导创建网站。

教学重难点:创建站点。

教学时间:
2
课时

教学过程:

第一课时

一、网页制作工作——
FrontPage 2003
二、启动
FrontPage 2003
1
、启动
FrontPage 2003
单击任务栏上的“开始”按钮
,
从“程序”

菜单中选择“
Microsoft FrontPage

单击。

2

FrontPage 2003
的界面说明

FrontPage 2003
的界面可以分成菜单栏、工具栏、视图栏和主编辑窗口
4
大部
分。

①、菜单栏包括【文件】、【编辑】、【查看】、【插入】、【格式】、 【工
具】、【表格】、【框架】、【窗口】、【帮助】等
10
个菜单。

②、工具栏单击【查看】菜单,选择【工具栏】,

在出现的下拉菜单中列出了
几种不同的工具栏,如果菜单项前面有一个对钧号“√”,表明在界在上已显示此
菜单项。如果再单击 一下,将取消这一项的显示。

③、视图栏中摆列着各种管理器的图标,这些管理器包括网页管 理器、文件夹
管理器、报表管理器、导航管理器、超链接管理器和任务管理器等。单击管理器图
标以切换到相应的管理器。

④、主编辑窗口在编辑网页时,在
FrontPage< br>编辑窗口的左下角有四个视图标签:
设计、折分、代码、预览,可以方便我们在不菲同的页面之间 进行切换。

三、练一练

1
、打开
FrontPage 2003
,熟悉
FrontPage 2003
的界面。

2
、练习
P8
练一练中的内容。

第二课时





一、新建站点

任务
1
:新建一个个人网站。

操作步骤:

(< br>1
)打开【文件】菜单,选择【新建】菜单项,在子菜单中选择【站点】菜单
项,出现一 个【新建】对话框,在对话框的【指定新站点的位置】项中输入新站点
的存放位置。


2
)单击【确定】按钮。此时
FrontPage
会自动以新站点名建立一 个站点,并
显示一个正在创建站点的提示对话框,之后该站点很快便创建好了。

新建 的站点只有一个主页

文件,该主页还是空的,需要对它进行编辑
添加内容。同时也可以 添加一些网页到该站点中去。此外,我们发现该站点中包含
有两个子文件夹。一个是
_priv ate
文件夹,一般用来存放一些私人的文件,这些文件
不会被别人看到。另一个是
i mages
文件夹,是
FrontPage
专门创建用来存放图像文
件的文件 夹,因为
FrontPage
扩展服务器的图像文件的默认目录为
images


任务
2:
打开导航视图,观察个人网站的结构,并预览。

二、规划调整网站结构

任务
1:
更改网站主页标题:
< br>单击编辑栏中的“网站”,选择“导航”视图,选择导航视图中需要改变标题
的网页,“重命名” 主页标题。

任务
2:
删除网页“反馈”

阅读教材
P11
删除网页“反馈”内容,按照“跟我学”中的步骤自主学习。

三、练习

1
、打开
FrontPage2003
窗口,切 换网页、文件夹等不同视图方式,观察屏幕的
变化。

2
、根据自己的网站设计,绘制出一个网站导航结构图。


第3课 设置网页格式
教学目的:

1
、学会应用主题模板设计网页。

2
、尝试用表格布置网页版面,并编辑表格内容。

教学重点:用表格布置网页版面,并编辑表格内容。





教学时间:
2
课时

教学过程:

第一课时

一、打开网页



我们建立好网站后,每个网页都会对应一个网页文件,要对网页进行编辑,
可以打开文件夹列表中的网页文件,也可以双击导航视图中的网页名称。

二、用主题模板设计网页

在用
FrontPage 2003
创建 网站的过程中,我们可以像在
PowerPoint
中一样,通
过应用主题模板来为站 点中的网页制作统一风格。

任务:在网站中应用“常青树”主题模板。

1
、双击打开“西西家园”中的网页。

2
、选择“格式”菜单——“主题”。

3
、在右边任务窗格中选择主题“常青树”。

4
、单击编辑栏下方视图标签“预览”,观察网站效果。

5
、选择其他主题模板应用到网页中。

三、练习

第二课时

一、用表格组织网页版面


FrontPage 2003
中为了更好地安排网页布局,定位文字和图形,人们 常常使
用表格进行版面布置,这样做出的网页更加规整有序富于变化。

二、编辑表格

任务:在网页中插入
2

1
列的表 格,对比与
Word
中插入表格的异同。

如何设计由一个表格所组织的网页,其操作步骤如下:


1
)在空 白网页中插入一个
2
×
1
的表格,将表格的边界大小设置为
0



2
)在表格第一行的单元格中输入内容;


3
)在表格中第二行的单元格中插入图片;


4
)将表格框线的粗细设为
0,
得最后的效果。

三、设置表格属性


1
)选定要设置属性的单元格(如果只须设置 某个单元格的属性,只需将光标
移到该单元格内,无需选定该单元格);






2
)单击【表格】菜单,选择【属性】,然后 单击【单元格】选项,或单击鼠
标右键,选择【单元格属性】选项,将会出现一个对话框。


3
)在单元格属性对话框中,我们可以设置单元格的多种属性。


4
)设置完毕后,单击【应用】按钮,可以预览一下设置效果。


5
)单击【确定】按钮,设置结束。


在这个对话框中 ,我们可以设置单元格的属性有:单元格布局、边框、背景等。
四、练习:


第4课 网页中的文字处理
教学目的:

1
、能够在网页中输入文字、设置合理的字体格式。

2
、能够在网页中插入、删除表格,并进行保存。

教学重点:文字的设置
,
在网页中插入、删除表格。

教学时间:
1
课时

教学过程:

一、输入文字

任务:在首页中输入文字,并设置文字格式。

在设 计视图中,打开首页文件,在编辑区单元格中输入文字内容。选中文字,
单击“格式”菜单——“字体” ,设置字体格式。

1
、修饰文字:是指文字的字体、字型、大小(字号)、颜色、效果的设置。

①单击【格式】菜单项,选择【字体】后出现字体对话框;

②或单击鼠标右键,在弹出的对话框中单击【字体】选项,也将出现字体对话
框。

③这时在对话框中的字体设为“隶书”,字型为“加粗”,大小为“
6

2 4
磅)”,
颜色为“红色”,效果为默认。单击【确定】按钮即可完成文字修饰。例中其他字< br>体修饰的操作也类似进行。

二、保存网页

单击常规工具栏上的保存 按钮或单击【文件】菜单再选择【保存文件】,就可
以把正在编辑的网页保存起来。或直接按
C trl+S
键也可以保存网页。

如果你是在修改已经保存过的网页,修改过的网页将被重新保存。但如果是新




建的网页,单击“保存”后会出现对话框。

在 对话框中的【文件名】栏内输入网页的文件名(如“
First
”),单击【保存】
按 钮,该网页就会保存到当前的站点上。
FrontPage 2000
保存文件的类型主要有网 页
文件(
.htm
)、
FrontPage
模板(
.tem
)、文本文件(
.txt
)、超文本模板文件(
.htt

等。

三、浏览网页


网页编辑完成后,可以用浏览器预览一下网 页的效果。有两种预览网页的方式:
一种是单击
FrontPage 2000
主编辑 窗口下面的【预览】标签,就打开一个
FrontPage
编辑器自带的浏览器,看完之后,单 击【普通】标签,又切换到编辑状态。

另一种是单击【常规】工具栏的“

”图标按钮(或直接按
Ctrl+Shift+B
键,或
单击【文件】菜单并选择【在 浏览器中预览】菜单项),将启动已安装好的浏览器
并打开该网页。如果在预览之前没有把修改后的或新 建的网页保存起来,则将弹出
一个对话框提示你应该首先保存该网页。

注意:在预览 窗口中看到的是网页在发布后的大致样式。要看到网页在
WWW
浏览器中的真实情形,必须使用 【在浏览器预览】菜单项查看。而且,即使是在
WWWW
浏览器中浏览通过,不同的浏览器产生 的效果不一样。在发布到
Internet

的前后,最好使用不同的浏览器多浏览几 次。

四、练习


第5课 网页图片编辑
教学目的:

1
、能够在网页中插入图片。

2
、能够对网页中插入的图片进行调整大小、环绕样式等设置。

教学重点:图片属性的设置。

教学时间:
1
课时

教学过程:

一、插入图片


1
)新建一个空白网页,把光标定位到要插入图片的地方。

(< br>2
)单击【插入】菜单,选择【图片】菜单项,在子菜单中单击【来自文件】
选项,在出 现一个【图片】对话框的同时,还弹出一个【选择文件】对话框。






3
)在【选择文件】对话框的“搜寻”栏内选 定图片的存放位置,然后从文件
列表中双击某个图片文件(或选定图片文件),单击【确定】按钮,则图 片插入到
网页中。

任务:在首页中插入图片

二、编辑图片

在网页中插入图片后,我们还要对图片的某些属性进行设置。


1
)在某个图片上单击鼠标右键后,弹出一个快捷菜单,选择图片属性。


2
)单击【图片属性】菜单项,出现图片属性对话框。在图片属性对话框中,
我们可以设置图片的各种属性:

1
、常规属性

【图片源】:指 图片的存放位置。如果要重新选择其他一幅图片时,单击【浏
览】按钮。如果要修改这幅图片,可以单击 【编辑】按钮,启动自带的
Image Composer
软件,修改完图片后,只要退出该软件,网页图片就会自动更新。

【类型】:我们可以选择图片的类型,
GIF
或者是
JPEG


在“质量”栏内一
般设定为
70-80
就行了。

2
、图像的外观

单击【图片属性】对话框中的【外观】选项卡。在这个对话 框中,我们可以设
置图片与文本之间的对齐方式、图片的边框粗细以及图片的大小等。

布局栏:单击【对齐方式】下拉箭头,出现一个下拉菜单,有多种对齐方式,
在图文混排时非常有用, 大家可以试试看。

利用【边框粗细】可以在图片周围加上一个指定宽度的边框。值为
0
时,边框
不显示。

设置【水平间距】和【垂直间距】的值,可以改变图片 与相邻内容(如文字)
之间的距离。

默认情况下,浏览器中显示的网页图片是实际大 小的图片。如果要改变图片的
大小,则在对话框的【大小】栏中调整“宽度”、“高度”的值(单位为像 素或百
分比)。选择“保持纵横比”选项是防止尺寸修改后的图片出现太扁或太长的“变
形”现 象。

图片的定位,可以单击图片工具栏的图片定位按钮。图片可以随便移动,但在
预 览时常会与实际不一致。





三、练习:

在网页中插入合适的图片,并进行编辑。

第6课 为网页锦上添花
教学目的:

1
、学会为网页添加字幕,使网页更美观、生动。

2
、给网站添加背景音乐。

教学重点:网页设置。

教学时间:
2
课时

教学过程:

第一课时

一、创建字幕

在浏览网页时,我们经常会看到一些滚动 发布的通知和提示信息,这种滚动的
文字我们称为“字幕”。

任务:在网页中插入滚动字幕

1
、单击“插入”菜单——“
Web
组件”命令。

2、在弹出的“插入
Web
组件”对话框中选择“动态效果”——“字幕”——“完
成”。

3
、在“字幕属性”窗口——“文本”中输入滚动文字。

4
、设置字幕的滚动方向、速度、背景等。

5
、如果还需要改变字 幕文本的格式,单击“字幕属性”窗口左下角的“样式”
按钮,进行设置。

6
、单击“确定”并预览字幕效果。

二、给网页添加背景音乐
< br>修改背景音乐。单击【背景音乐】区域的【浏览】按钮,出现对话框,在硬盘
目录下选择一个Wav
声音文件。本例使用“
C:windowsMedia
”目录下的“


文件,大家也可以自己选择其他的声音文件作为背景音乐。缺省状态下背景声音的
设置为始终有声音。

三、练习

第二课时

在网页中单击 鼠标右键,从弹出的菜单中单击【网页属性】选项,出现网页属
性对话框。在这个对话框中我们除了强以 添加背景音乐外,还可以修改网页的多种




属性。

一、网页属性的设置:

1
、常规属性设置。在这 个对话框中共有
5
个选项卡。其中,在【常规】选项卡
中我们可以修改网页的标题、背 景音乐等。

2
、背景色设置。单击网页属性对话框的【背景】选项卡,就可以设置网 页的背
景色和图片等。

①修改网页的背景色。单击对话框中【颜色】区域内的“背景 ”项下拉选择箭
头,并从颜色框中选择一种颜色,然后单击【确定】按钮,这时网页的背景颜色就
变成了刚才选择的颜色。

②设置背景图片。(
1
)重新单击鼠标右键,选 择【网页属性】进入对话框并单
击【背景】选项卡。(
2
)然后单击在【格式】区域内 的“背景图片”选择框,选中
后下面的“水印”选择项、文本框都不再变灰。(
3
)这 时再单击【浏览】按钮进入
网页背景图片选择对话框。(
4
)单击对话框右下角的【剪 贴画】按钮,就会弹出【剪
贴画库】。单击【
Web
背景】选项从中选择一种图案作为 背景,选中后单击“

”插
入剪辑按钮。(
5
)然后单击网页属性对 话框的【确定】按钮。这时网页背景已变成
了刚才选择的图案。

二、练习


第7课 穿梭网际的超链接
教学目的:

1
、学习超链接的制作方法。掌握超链接的设置技巧。

2
、学会创建发送电子邮件的超链接。

教学重点:超链接的制作方法,超链接的设置技巧。

教学时间:
2
课时

教学过程:

第一课时

每当我们在浏览网页时,都会发现当鼠标指针移动到某些文字或图片时,就 会
变成一只手掌“

”的样子,这时只需单击鼠标左键就可以打开另一网页了。这就是
我们将要讲述的网页“超链接”方式。正是由于有了“超链接”,因特网才会如此
神奇和流行! 网页上的超链接主要有三种:一种是相对网址的超链接;第二种是与




绝对网址(如
http:
)的超链接;第三种是指在同一网页内的超链接。

一、创建发送电子邮件的超链接:

任务:在首页下文创建电子邮箱的超链接。

在首页下方输入邮箱名称,选定文字“< br>E-mail:xixi@
”,单击超链接按钮,
出现“编辑超链接”对话框。然后单击 “

插入超链接”按钮(在对话框“
URL
”栏
右边),出现“创建 电子邮件超链接”对话框。在文字框内输入邮箱地址(如
E-mail:xixi@
),连续单 击【确定】按钮,就可以创建一个超链接到邮箱地
址。

二、练习

第二课时

一、网页间的超链接

其操作步骤如下:

1
)创建一个新网站,并在网站内新建几个网页文件:主页“

”、兴< br>趣“

”、相册“

”、喜爱站点“

”等文件。


2
)打开主页文件“

”,输入文字内容,并单击插入图片按钮,从 “剪
贴画库→学院”中插入图片。


3
)选定网页内的文字“兴趣”,单击“

”超链接工具按钮,出 现【编辑超
链接】对话框。在对话框的文件列表中选择“

”网页文件。

4
)与(
3
)操作类似,对文字“相册”、“喜爱站点”分别设置超链 接到文
件“

”、“

”。

二、绝对网址的超链接

其操作步骤如下:


1
)在上例所创建的网站中,打开喜爱站点“

”网页文件。


2
)输入标题“我喜爱的站点”,“文字链接:”,按回车键。


3
)单击“

”工具按钮,建立项目符号列表。

4
)文字上的超链接:输入“中文搜狐”,选定这段文字,然后单击超链接工
具 按钮,在所出现的对话框“
URL
”栏内输入“
http:
”,最后单击【确
定】按钮。就可以创建了文字上的超链接;


5
)图片上的超链接:

选定刚插入的图片

,单击“

”超链接工具按钮,在
出现的对话框中的“
URL
”栏内输入网址“
http:
”。单击【确




定】按钮。这样,也就创建了一个图片上的超链接。

三、练习



冬青树的作文-北华航天工业学院教务系统


auto是什么-高中教案


小石潭记导游词-初一英语手抄报内容


锦州市公安局-中班上学期幼儿评语


新加坡管理学院-新疆医科大学研究生


宋庆龄资料-关于写事的作文


自荐信怎么写-小学生韵母表


榆林中学-宁夏教育考试院