甘肃少年儿童版小学信息技术第三册第七章网站制作入门教案.docx
- 文档编号:9334934
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:13
- 大小:21.43KB
甘肃少年儿童版小学信息技术第三册第七章网站制作入门教案.docx
《甘肃少年儿童版小学信息技术第三册第七章网站制作入门教案.docx》由会员分享,可在线阅读,更多相关《甘肃少年儿童版小学信息技术第三册第七章网站制作入门教案.docx(13页珍藏版)》请在冰豆网上搜索。
甘肃少年儿童版小学信息技术第三册第七章网站制作入门教案
第七章网站制作入门
第1课小小网页设计师
教学目的:
欣赏网站,并尝试规划、设计自己的网站。
教学重点:
确定网站主题,收集加工素材。
教学时间:
1课时
教学过程:
一、名站欣赏:
访问下面的网站,说一说你最喜欢哪一个,为什么?
红泥巴村:
甘肃少年儿童出版社:
北京动物园:
CCTV纯真年代:
站点一般简写为“Web”,实际上就是把一些信息通过Web网页的方式相互链接起来,存放在一台被称为“服务器”的计算机中,别人可以通过Web浏览器查看网页信息。
站点一般以国际通用的Internet地址来表示,例如:
或等,进入某个站点所见到的第一页一般称为“HomePage”,中文的意思是“主页”。
一般认为某个站点的第一个网页叫做主页,也就是在Web浏览器“地址”栏内输入一个网址后,用户浏览到的第一个网页。
用户再通过该主页的链接可以浏览到其他网页信息。
二、确定网站主题:
如何设计制作自己的网站呢?
在动手制作之前我们首先要确定这个网站的主题,以及网站的主要内容,最后还要给网站起一个醒目的名字。
三、收集、加工素材:
建立一个网站需要的素材是多样的,一个仅仅版面美观但缺少内容的网站是无法留住网友的。
文字、图片和声音往往是网站中不可缺少的素材,我们可以利用相机、扫描仪、麦克风等,从报纸、书刊、电视、网络等渠道收集素材。
在创建、发布网站时一定要注意不要侵犯了他人的著作权。
四、课后练习:
练习P5练习内容。
第2课认识FrontPage2003
教学目的:
1、认识FrontPage2003。
2、学会利用向导创建网站。
教学重难点:
创建站点。
教学时间:
2课时
教学过程:
第一课时
一、网页制作工作——FrontPage2003
二、启动FrontPage2003
1、启动FrontPage2003
单击任务栏上的“开始”按钮,从“程序”菜单中选择“MicrosoftFrontPage”单击。
2、FrontPage2003的界面说明
FrontPage2003的界面可以分成菜单栏、工具栏、视图栏和主编辑窗口4大部分。
①、菜单栏包括【文件】、【编辑】、【查看】、【插入】、【格式】、【工具】、【表格】、【框架】、【窗口】、【帮助】等10个菜单。
②、工具栏单击【查看】菜单,选择【工具栏】,在出现的下拉菜单中列出了几种不同的工具栏,如果菜单项前面有一个对钧号“√”,表明在界在上已显示此菜单项。
如果再单击一下,将取消这一项的显示。
③、视图栏中摆列着各种管理器的图标,这些管理器包括网页管理器、文件夹管理器、报表管理器、导航管理器、超链接管理器和任务管理器等。
单击管理器图标以切换到相应的管理器。
④、主编辑窗口在编辑网页时,在FrontPage编辑窗口的左下角有四个视图标签:
设计、折分、代码、预览,可以方便我们在不菲同的页面之间进行切换。
三、练一练
1、打开FrontPage2003,熟悉FrontPage2003的界面。
2、练习P8练一练中的内容。
第二课时
一、新建站点
任务1:
新建一个个人网站。
操作步骤:
(1)打开【文件】菜单,选择【新建】菜单项,在子菜单中选择【站点】菜单项,出现一个【新建】对话框,在对话框的【指定新站点的位置】项中输入新站点的存放位置。
(2)单击【确定】按钮。
此时FrontPage会自动以新站点名建立一个站点,并显示一个正在创建站点的提示对话框,之后该站点很快便创建好了。
新建的站点只有一个主页index.htm文件,该主页还是空的,需要对它进行编辑添加内容。
同时也可以添加一些网页到该站点中去。
此外,我们发现该站点中包含有两个子文件夹。
一个是_private文件夹,一般用来存放一些私人的文件,这些文件不会被别人看到。
另一个是images文件夹,是FrontPage专门创建用来存放图像文件的文件夹,因为FrontPage扩展服务器的图像文件的默认目录为images。
任务2:
打开导航视图,观察个人网站的结构,并预览。
二、规划调整网站结构
任务1:
更改网站主页标题:
单击编辑栏中的“网站”,选择“导航”视图,选择导航视图中需要改变标题的网页,“重命名”主页标题。
任务2:
删除网页“反馈”
阅读教材P11删除网页“反馈”内容,按照“跟我学”中的步骤自主学习。
三、练习
1、打开FrontPage2003窗口,切换网页、文件夹等不同视图方式,观察屏幕的变化。
2、根据自己的网站设计,绘制出一个网站导航结构图。
第3课设置网页格式
教学目的:
1、学会应用主题模板设计网页。
2、尝试用表格布置网页版面,并编辑表格内容。
教学重点:
用表格布置网页版面,并编辑表格内容。
教学时间:
2课时
教学过程:
第一课时
一、打开网页
当我们建立好网站后,每个网页都会对应一个网页文件,要对网页进行编辑,可以打开文件夹列表中的网页文件,也可以双击导航视图中的网页名称。
二、用主题模板设计网页
在用FrontPage2003创建网站的过程中,我们可以像在PowerPoint中一样,通过应用主题模板来为站点中的网页制作统一风格。
任务:
在网站中应用“常青树”主题模板。
1、双击打开“西西家园”中的网页。
2、选择“格式”菜单——“主题”。
3、在右边任务窗格中选择主题“常青树”。
4、单击编辑栏下方视图标签“预览”,观察网站效果。
5、选择其他主题模板应用到网页中。
三、练习
第二课时
一、用表格组织网页版面
在FrontPage2003中为了更好地安排网页布局,定位文字和图形,人们常常使用表格进行版面布置,这样做出的网页更加规整有序富于变化。
二、编辑表格
任务:
在网页中插入2行1列的表格,对比与Word中插入表格的异同。
如何设计由一个表格所组织的网页,其操作步骤如下:
(1)在空白网页中插入一个2×1的表格,将表格的边界大小设置为0;
(2)在表格第一行的单元格中输入内容;
(3)在表格中第二行的单元格中插入图片;
(4)将表格框线的粗细设为0,得最后的效果。
三、设置表格属性
(1)选定要设置属性的单元格(如果只须设置某个单元格的属性,只需将光标移到该单元格内,无需选定该单元格);
(2)单击【表格】菜单,选择【属性】,然后单击【单元格】选项,或单击鼠标右键,选择【单元格属性】选项,将会出现一个对话框。
(3)在单元格属性对话框中,我们可以设置单元格的多种属性。
(4)设置完毕后,单击【应用】按钮,可以预览一下设置效果。
(5)单击【确定】按钮,设置结束。
在这个对话框中,我们可以设置单元格的属性有:
单元格布局、边框、背景等。
四、练习:
第4课网页中的文字处理
教学目的:
1、能够在网页中输入文字、设置合理的字体格式。
2、能够在网页中插入、删除表格,并进行保存。
教学重点:
文字的设置,在网页中插入、删除表格。
教学时间:
1课时
教学过程:
一、输入文字
任务:
在首页中输入文字,并设置文字格式。
在设计视图中,打开首页文件,在编辑区单元格中输入文字内容。
选中文字,单击“格式”菜单——“字体”,设置字体格式。
1、修饰文字:
是指文字的字体、字型、大小(字号)、颜色、效果的设置。
①单击【格式】菜单项,选择【字体】后出现字体对话框;
②或单击鼠标右键,在弹出的对话框中单击【字体】选项,也将出现字体对话框。
③这时在对话框中的字体设为“隶书”,字型为“加粗”,大小为“6(24磅)”,颜色为“红色”,效果为默认。
单击【确定】按钮即可完成文字修饰。
例中其他字体修饰的操作也类似进行。
二、保存网页
单击常规工具栏上的保存按钮或单击【文件】菜单再选择【保存文件】,就可以把正在编辑的网页保存起来。
或直接按Ctrl+S键也可以保存网页。
如果你是在修改已经保存过的网页,修改过的网页将被重新保存。
但如果是新建的网页,单击“保存”后会出现对话框。
在对话框中的【文件名】栏内输入网页的文件名(如“First”),单击【保存】按钮,该网页就会保存到当前的站点上。
FrontPage2000保存文件的类型主要有网页文件(.htm)、FrontPage模板(.tem)、文本文件(.txt)、超文本模板文件(.htt)等。
三、浏览网页
网页编辑完成后,可以用浏览器预览一下网页的效果。
有两种预览网页的方式:
一种是单击FrontPage2000主编辑窗口下面的【预览】标签,就打开一个FrontPage编辑器自带的浏览器,看完之后,单击【普通】标签,又切换到编辑状态。
另一种是单击【常规】工具栏的“”图标按钮(或直接按Ctrl+Shift+B键,或单击【文件】菜单并选择【在浏览器中预览】菜单项),将启动已安装好的浏览器并打开该网页。
如果在预览之前没有把修改后的或新建的网页保存起来,则将弹出一个对话框提示你应该首先保存该网页。
注意:
在预览窗口中看到的是网页在发布后的大致样式。
要看到网页在WWW浏览器中的真实情形,必须使用【在浏览器预览】菜单项查看。
而且,即使是在WWWW浏览器中浏览通过,不同的浏览器产生的效果不一样。
在发布到Internet上的前后,最好使用不同的浏览器多浏览几次。
四、练习
第5课网页图片编辑
教学目的:
1、能够在网页中插入图片。
2、能够对网页中插入的图片进行调整大小、环绕样式等设置。
教学重点:
图片属性的设置。
教学时间:
1课时
教学过程:
一、插入图片
(1)新建一个空白网页,把光标定位到要插入图片的地方。
(2)单击【插入】菜单,选择【图片】菜单项,在子菜单中单击【来自文件】选项,在出现一个【图片】对话框的同时,还弹出一个【选择文件】对话框。
(3)在【选择文件】对话框的“搜寻”栏内选定图片的存放位置,然后从文件列表中双击某个图片文件(或选定图片文件),单击【确定】按钮,则图片插入到网页中。
任务:
在首页中插入图片
二、编辑图片
在网页中插入图片后,我们还要对图片的某些属性进行设置。
(1)在某个图片上单击鼠标右键后,弹出一个快捷菜单,选择图片属性。
(2)单击【图片属性】菜单项,出现图片属性对话框。
在图片属性对话框中,我们可以设置图片的各种属性:
1、常规属性
【图片源】:
指图片的存放位置。
如果要重新选择其他一幅图片时,单击【浏览】按钮。
如果要修改这幅图片,可以单击【编辑】按钮,启动自带的ImageComposer软件,修改完图片后,只要退出该软件,网页图片就会自动更新。
【类型】:
我们可以选择图片的类型,GIF或者是JPEG。
在“质量”栏内一般设定为70-80就行了。
2、图像的外观
单击【图片属性】对话框中的【外观】选项卡。
在这个对话框中,我们可以设置图片与文本之间的对齐方式、图片的边框粗细以及图片的大小等。
布局栏:
单击【对齐方式】下拉箭头,出现一个下拉菜单,有多种对齐方式,在图文混排时非常有用,大家可以试试看。
利用【边框粗细】可以在图片周围加上一个指定宽度的边框。
值为0时,边框不显示。
设置【水平间距】和【垂直间距】的值,可以改变图片与相邻内容(如文字)之间的距离。
默认情况下,浏览器中显示的网页图片是实际大小的图片。
如果要改变图片的大小,则在对话框的【大小】栏中调整“宽度”、“高度”的值(单位为像素或百分比)。
选择“保持纵横比”选项是防止尺寸修改后的图片出现太扁或太长的“变形”现象。
图片的定位,可以单击图片工具栏的图片定位按钮。
图片可以随便移动,但在预览时常会与实际不一致。
三、练习:
在网页中插入合适的图片,并进行编辑。
第6课为网页锦上添花
教学目的:
1、学会为网页添加字幕,使网页更美观、生动。
2、给网站添加背景音乐。
教学重点:
网页设置。
教学时间:
2课时
教学过程:
第一课时
一、创建字幕
在浏览网页时,我们经常会看到一些滚动发布的通知和提示信息,这种滚动的文字我们称为“字幕”。
任务:
在网页中插入滚动字幕
1、单击“插入”菜单——“Web组件”命令。
2、在弹出的“插入Web组件”对话框中选择“动态效果”——“字幕”——“完成”。
3、在“字幕属性”窗口——“文本”中输入滚动文字。
4、设置字幕的滚动方向、速度、背景等。
5、如果还需要改变字幕文本的格式,单击“字幕属性”窗口左下角的“样式”按钮,进行设置。
6、单击“确定”并预览字幕效果。
二、给网页添加背景音乐
修改背景音乐。
单击【背景音乐】区域的【浏览】按钮,出现对话框,在硬盘目录下选择一个Wav声音文件。
本例使用“C:
\windows\Media”目录下的“Start.wav”文件,大家也可以自己选择其他的声音文件作为背景音乐。
缺省状态下背景声音的设置为始终有声音。
三、练习
第二课时
在网页中单击鼠标右键,从弹出的菜单中单击【网页属性】选项,出现网页属性对话框。
在这个对话框中我们除了强以添加背景音乐外,还可以修改网页的多种属性。
一、网页属性的设置:
1、常规属性设置。
在这个对话框中共有5个选项卡。
其中,在【常规】选项卡中我们可以修改网页的标题、背景音乐等。
2、背景色设置。
单击网页属性对话框的【背景】选项卡,就可以设置网页的背景色和图片等。
①修改网页的背景色。
单击对话框中【颜色】区域内的“背景”项下拉选择箭头,并从颜色框中选择一种颜色,然后单击【确定】按钮,这时网页的背景颜色就变成了刚才选择的颜色。
②设置背景图片。
(1)重新单击鼠标右键,选择【网页属性】进入对话框并单击【背景】选项卡。
(2)然后单击在【格式】区域内的“背景图片”选择框,选中后下面的“水印”选择项、文本框都不再变灰。
(3)这时再单击【浏览】按钮进入网页背景图片选择对话框。
(4)单击对话框右下角的【剪贴画】按钮,就会弹出【剪贴画库】。
单击【Web背景】选项从中选择一种图案作为背景,选中后单击“”插入剪辑按钮。
(5)然后单击网页属性对话框的【确定】按钮。
这时网页背景已变成了刚才选择的图案。
二、练习
第7课穿梭网际的超链接
教学目的:
1、学习超链接的制作方法。
掌握超链接的设置技巧。
2、学会创建发送电子邮件的超链接。
教学重点:
超链接的制作方法,超链接的设置技巧。
教学时间:
2课时
教学过程:
第一课时
每当我们在浏览网页时,都会发现当鼠标指针移动到某些文字或图片时,就会变成一只手掌“”的样子,这时只需单击鼠标左键就可以打开另一网页了。
这就是我们将要讲述的网页“超链接”方式。
正是由于有了“超链接”,因特网才会如此神奇和流行!
网页上的超链接主要有三种:
一种是相对网址的超链接;第二种是与绝对网址(如)的超链接;第三种是指在同一网页内的超链接。
一、创建发送电子邮件的超链接:
任务:
在首页下文创建电子邮箱的超链接。
在首页下方输入邮箱名称,选定文字“E-mail:
************”,单击超链接按钮,出现“编辑超链接”对话框。
然后单击“插入超链接”按钮(在对话框“URL”栏右边),出现“创建电子邮件超链接”对话框。
在文字框内输入邮箱地址(如E-mail:
************),连续单击【确定】按钮,就可以创建一个超链接到邮箱地址。
二、练习
第二课时
一、网页间的超链接
其操作步骤如下:
(1)创建一个新网站,并在网站内新建几个网页文件:
主页“index.htm”、兴趣“interest.htm”、相册“photo.htm”、喜爱站点“myfav.htm”等文件。
(2)打开主页文件“index.htm”,输入文字内容,并单击插入图片按钮,从“剪贴画库→学院”中插入图片。
(3)选定网页内的文字“兴趣”,单击“”超链接工具按钮,出现【编辑超链接】对话框。
在对话框的文件列表中选择“interest.htm”网页文件。
(4)与(3)操作类似,对文字“相册”、“喜爱站点”分别设置超链接到文件“photo.htm”、“myfav.htm”。
二、绝对网址的超链接
其操作步骤如下:
(1)在上例所创建的网站中,打开喜爱站点“myfav.htm”网页文件。
(2)输入标题“我喜爱的站点”,“文字链接:
”,按回车键。
(3)单击“”工具按钮,建立项目符号列表。
(4)文字上的超链接:
输入“中文搜狐”,选定这段文字,然后单击超链接工具按钮,在所出现的对话框“URL”栏内输入“”,最后单击【确定】按钮。
就可以创建了文字上的超链接;
(5)图片上的超链接:
选定刚插入的图片,单击“”超链接工具按钮,在出现的对话框中的“URL”栏内输入网址“
三、练习
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 甘肃 少年儿童 小学 信息技术 第三 第七 网站 制作 入门 教案