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

第七章网站制作入门

第1课小小网页设计师

教学目的欣赏网站并尝试规划、设计自己的网站。

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

教学时间 1课时

教学过程

一、名站欣赏

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

红泥巴木寸

甘肃少年儿童出版社www.gsshao er.co m

北京动物园www.beij ingzoo.com

CCTV纯真年代 edu.cctv.co m

站点一般简写为“Web” ,实际上就是把一些信息通过Web网页的方式相互链接起来存放在一台被称为“服务器”的计算机中别人可以通过Web浏览器查看网页信息。站点一般以国际通用的Internet地址来表示例如 http://www.21 cn.com或http://www」 63.net等进入某个站点所见到的第一页一般称为“HomeP age”,中文的意思是“主页” 。一般认为某个站点的第一个网页叫做主页也就是在Web浏览器“地址”栏内输入一个网址后用户浏览到的第一个网页。用户再通过该主页的链接可以浏览到其他网页信息。

二、确定网站主题

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

三、收集、加工素材

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

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

教学目的

1 、 认识FrontPage 2003 。

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

教学重难点创建站点。

教学时间 2课时

教学过程

第一课时

一、网页制作工作- - -FrontPage 2003

二、启动FrontPage 2003

1 、 启动FrontPage 2003

单击任务栏上的“开始”按钮从“程序”菜单中选择“Microsoft FrontPage"单击。

2、 FrontPage 2003的界面说明

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

①、菜单栏包括【文件】 、 【编辑】 、 【查看】 、 【插入】 、 【格式】 、 【工具】 、

【表格】 、 【框架】 、 【窗口】 、 【帮助】等10个菜单。

②、工具栏单击【查看】菜单选择【工具栏】 在出现的下拉菜单中列出了几种不同的工具栏如果菜单项前面有一个对钧号“丁” 表明在界在上已显示此菜单项。如果再单击一下将取消这一项的显示。

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

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

三、练一练

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

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

第二课时

一、新建站点

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

操作步骤

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

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

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

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

二、规划调整网站结构

任务1更改网站主页标题

单击编辑栏中的“网站” 选择“导航”视图选择导航视图中需要改变标题的网页 “重命名”主页标题。

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

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

三、练习

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

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

第3课设置网页格式

教学目的

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

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

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

教学时间 1课时

教学过程

第一课时

一、打开网页

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

二、用主题模板设计网页

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

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

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

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

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

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

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

三、用表格组织网页版面

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

四、编辑表格

任务在网页中插入2行1列的表格对比与Wo rd中插入表格的界同。

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

1 在空白网页中插入一个2X1的表格将表格的边界大小设置为0

2 在表格第一行的单元格中输入内容

3在表格中第二行的单元格中插入图片

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

五、设置表格属性

1 选定要设置属性的单元格如果只须设置某个单元格的属性只需将光标移到该单元格内无需选定该单元格 ;

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

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

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

5单击【确定】按钮设置结束。

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

六、练习

第4课网页中的文字处理

教学冃的

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

2、 能够在网页中插入、删除表格并进行保存。教学重点文字的设置在网页中插入、删除表格。

教学时间 1课时教学过程

一、输入文字

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

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

1 、修饰文字是指文字的字体、字型、大小字号 、颜色、效果的设置。①单击【格式】菜单项选择【字体】后出现字体对话框

②或单击鼠标右键在弹出的对话框中单击【字体】选项也将出现字体对话框。③这时在对话框中的字体设为“隶书” 字型为“加粗” 大小为“6 24磅 ” 颜色为“红色” 效果为默认。单击【确定】按钮即可完成文字修饰。例屮其他字体修饰的操作也类似进行。

二、保存网页

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

如果你是在修改已经保存过的网页修改过的网页将被重新保存。但如果是新建的网页单击“保存”后会出现对话框。

在对话框中的【文件名】栏内输入网页的文件名如“F ir st” ,单击【保存】按钮该网页就会保存到当前的站点上。FrontPage 2000保存文件的类型主要有网页文件.htm 、FrontP age模板.tern 文木文件.txt 超文木模板文件.htt等。

三、浏览网页

网页编辑完成后可以用浏览器预览一下网页的效果。有两种预览网页的方式:

一种是单击FrontPage 2000主编辑窗口下面的【预览】标签就打开一个FrontPage编辑器自带的浏览器看完之后单击【普通】标签乂切换到编辑状态。

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

注意在预览窗口中看到的是网页在发布后的大致样式。要看到网页在WWW浏览器中的真实情形必须使用【在浏览器预览】菜单项查看。而且即使是在WWWW浏览器中浏览通过不同的浏览器产生的效果不一样。在发布到I nt ernet±的前后最好使用不同的浏览器多浏览儿次。

四、练习

第5课网页图片编辑

教学目的

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

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

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

教学时间 1课时

教学过程

一、插入图片

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

2单击【插入】菜单选择【图片】菜单项在子菜单屮单击【來自文件】选项在出现一个【图片】对话框的同时还弹出一个【选择文件】对话框。

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

任务在首页中插入图片

二、编辑图片

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

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

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

1 、 常规属性

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

【类型】 :我们可以选择图片的类型GIF或者是JPEGo在“质量”栏内一般设定为70-80就行了。

2、 图像的外观

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

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

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

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

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

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

三、练习

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

第6课为网页锦上添花

教学目的

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

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

教学重点网页设置。

教学时间 2课时教学过程

第一课时

一、创建字幕

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

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

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

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

“完成” 。

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

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

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

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

二、给网页添加背景音乐

修改背最音乐。单击【背景音乐】区域的【浏览】按钮出现对话框在硬盘目录下选择一个Wav声咅文件。本例使用“C:\window s\Me di a”目录下的“S tart.wav”文件大家也可以自己选择其他的声音文件作为背景音乐。缺省状态下背景声音的设置为始终有声音。

三、练习

第二课时

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

一、网页属性的设置

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

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

色和图片等。

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

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

二、练习

第7课穿梭网际的超链接

教学目的

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

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

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

教学时间 2课时

教学过程

第一课时

每当我们在浏览网页时都会发现当鼠标指针移动到某些文字或图片时就会变成一只手掌“”的样子这时只需单击鼠标左键就可以打开另一网页了。这就是我们将要讲述的网页“超链接”方式。正是由于有了 “超链接” 因特网才会如此神奇和流行网页上的超链接主要有三种一种是相对网址的超链接第二种是与绝对网址(女n http://www.163.net)的超链接第三种是指在同一网页内的超链接。

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

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

在首页下方输入邮箱名称选定文字“E-mail:xi xi@163.c o m”单击超链接按钮,出现“编辑超链接”对话框。然后单击“插入超链接”按钮在对话框“URL”栏右边 岀现“创建电子邮件超链接”对话框。在文字框内输入邮箱地址如E-mai l:xi xi@