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

《甘肃少年儿童版小学信息技术第三册第七章网站制作入门教案资料.pdf》由会员分享，可在线阅读，更多相关《甘肃少年儿童版小学信息技术第三册第七章网站制作入门教案资料.pdf（11页珍藏版）》请在三一文库上搜索。

1、第七章 网站制作入门 第 1 课小小网页设计师 教学目的：欣赏网站，并尝试规划、设计自己的网站。 教学重点：确定网站主题，收集加工素材。 教学时间： 1 课时 教学过程： 一、名站欣赏： 访问下面的网站，说一说你最喜欢哪一个，为什么？ 红泥巴村： 甘肃少年儿童出版社： 北京动物园： CCTV 纯真年代： 站点一般简写为“ Web”，实际上就是把一些信息通过Web 网页的方式相互链 接起来，存放在一台被称为“服务器”的计算机中，别人可以通过Web 浏览器查看 网页信息。站点一般以国际通用的Internet 地址来表示，例如： http:/ 或 http:/ 等，进入某个站点所见到的第一页

2、一般称为“HomePage ”，中 文的意思是“主页”。一般认为某个站点的第一个网页叫做主页，也就是在Web 浏 览器“地址”栏内输入一个网址后，用户浏览到的第一个网页。用户再通过该主页 的链接可以浏览到其他网页信息。 二、确定网站主题： 如何设计制作自己的网站呢？在动手制作之前我们首先要确定这个网站的主 题，以及网站的主要内容，最后还要给网站起一个醒目的名字。 三、收集、加工素材： 建立一个网站需要的素材是多样的，一个仅仅版面美观但缺少内容的网站是无 法留住网友的。文字、图片和声音往往是网站中不可缺少的素材，我们可以利用相 机、扫描仪、麦克风等，从报纸、书刊、电视、网络等渠道收集素材。在创建

3、、发 布网站时一定要注意不要侵犯了他人的著作权。 四、课后练习：练习P5练习内容。 第 2 课认识 FrontPage 2003 教学目的： 1、认识 FrontPage 2003 。 2、学会利用向导创建网站。 教学重难点：创建站点。 教学时间： 2 课时 教学过程： 第一课时 一、网页制作工作 FrontPage 2003 二、启动 FrontPage 2003 1、启动FrontPage 2003 单击任务栏上的“开始”按钮,从“程序”菜单中选择“ Microsoft FrontPage ” 单击。 2、FrontPage 2003的界面说明 FrontPage 2003的界面可以分成菜

4、单栏、 工具栏、视图栏和主编辑窗口4 大部 分。 、菜单栏包括【文件】、【编辑】、【查看】、【插入】、【格式】、【工 具】、【表格】、【框架】、【窗口】、【帮助】等10 个菜单。 、工具栏单击【查看】菜单，选择【工具栏】，在出现的下拉菜单中列出了 几种不同的工具栏，如果菜单项前面有一个对钧号“”，表明在界在上已显示此 菜单项。如果再单击一下，将取消这一项的显示。 、视图栏中摆列着各种管理器的图标，这些管理器包括网页管理器、文件夹 管理器、报表管理器、导航管理器、超链接管理器和任务管理器等。单击管理器图 标以切换到相应的管理器。 、 主编辑窗口在编辑网页时， 在 FrontPage编辑窗口的左下

5、角有四个视图标签： 设计、折分、代码、预览，可以方便我们在不菲同的页面之间进行切换。 三、练一练 1、打开 FrontPage 2003 ，熟悉 FrontPage 2003的界面。 2、练习 P8练一练中的内容。 第二课时 一、新建站点 任务 1：新建一个个人网站。 操作步骤： （1）打开【文件】菜单，选择【新建】菜单项，在子菜单中选择【站点】菜单 项，出现一个【新建】对话框，在对话框的【指定新站点的位置】项中输入新站点 的存放位置。 （2）单击【确定】按钮。此时FrontPage会自动以新站点名建立一个站点，并 显示一个正在创建站点的提示对话框，之后该站点很快便创建好了。 新建的站点只有一

6、个主页index.htm 文件，该主页还是空的， 需要对它进行编辑 添加内容。同时也可以添加一些网页到该站点中去。此外，我们发现该站点中包含 有两个子文件夹。一个是 _private文件夹，一般用来存放一些私人的文件，这些文件 不会被别人看到。另一个是images文件夹，是FrontPage专门创建用来存放图像文 件的文件夹，因为FrontPage扩展服务器的图像文件的默认目录为images。 任务 2:打开导航视图，观察个人网站的结构，并预览。 二、规划调整网站结构 任务 1:更改网站主页标题： 单击编辑栏中的“网站”，选择“导航”视图，选择导航视图中需要改变标题 的网页，“重命名”主页标题

7、。 任务 2:删除网页“反馈” 阅读教材 P11删除网页“反馈”内容，按照“跟我学”中的步骤自主学习。 三、练习 1、打开 FrontPage2003窗口，切换网页、文件夹等不同视图方式，观察屏幕的 变化。 2、根据自己的网站设计，绘制出一个网站导航结构图。 第 3 课设置网页格式 教学目的： 1、学会应用主题模板设计网页。 2、尝试用表格布置网页版面，并编辑表格内容。 教学重点：用表格布置网页版面，并编辑表格内容。 教学时间： 2 课时 教学过程： 第一课时 一、打开网页 当 我们建立好网站后，每个网页都会对应一个网页文件，要对网页进行编辑， 可以打开文件夹列表中的网页文件，也可以双击导航视

8、图中的网页名称。 二、用主题模板设计网页 在用 FrontPage 2003创建网站的过程中，我们可以像在PowerPoint中一样，通 过应用主题模板来为站点中的网页制作统一风格。 任务：在网站中应用“常青树”主题模板。 1、双击打开“西西家园”中的网页。 2、选择“格式”菜单“主题”。 3、在右边任务窗格中选择主题“常青树”。 4、单击编辑栏下方视图标签“预览”，观察网站效果。 5、选择其他主题模板应用到网页中。 三、练习 第二课时 一、用表格组织网页版面 在 FrontPage 2003中为了更好地安排网页布局，定位文字和图形，人们常常使 用表格进行版面布置，这样做出的网页更加规整有序富

9、于变化。 二、编辑表格 任务：在网页中插入2 行 1 列的表格，对比与Word 中插入表格的异同。 如何设计由一个表格所组织的网页，其操作步骤如下： （1）在空白网页中插入一个21 的表格，将表格的边界大小设置为0； （2）在表格第一行的单元格中输入内容； （3）在表格中第二行的单元格中插入图片； （4）将表格框线的粗细设为0,得最后的效果。 三、设置表格属性 （1）选定要设置属性的单元格（如果只须设置某个单元格的属性，只需将光标 移到该单元格内，无需选定该单元格）； （2）单击【表格】菜单，选择【属性】，然后单击【单元格】选项，或单击鼠 标右键，选择【单元格属性】选项，将会出现一个对话框。

10、（3）在单元格属性对话框中，我们可以设置单元格的多种属性。 （4）设置完毕后，单击【应用】按钮，可以预览一下设置效果。 （5）单击【确定】按钮，设置结束。 在这个对话框中，我们可以设置单元格的属性有：单元格布局、边框、背景等。 四、练习： 第 4 课网页中的文字处理 教学目的： 1、能够在网页中输入文字、设置合理的字体格式。 2、能够在网页中插入、删除表格，并进行保存。 教学重点：文字的设置 , 在网页中插入、删除表格。 教学时间： 1 课时 一、输入文字 任务：在首页中输入文字，并设置文字格式。 在设计视图中，打开首页文件，在编辑区单元格中输入文字内容。选中文字， 单击“格式”菜单“字体”，

11、设置字体格式。 1、修饰文字：是指文字的字体、字型、大小（字号）、颜色、效果的设置。 单击【格式】菜单项，选择【字体】后出现字体对话框； 或单击鼠标右键，在弹出的对话框中单击【字体】选项，也将出现字体对话 框。 这时在对话框中的字体设为 “隶书”，字型为“加粗”， 大小为“6 （24 磅）”， 颜色为“红色”，效果为默认。单击【确定】按钮即可完成文字修饰。例中其他字 体修饰的操作也类似进行。 二、保存网页 单击常规工具栏上的保存按钮或单击【文件】菜单再选择【保存文件】，就可 以把正在编辑的网页保存起来。或直接按Ctrl+S 键也可以保存网页。 如果你是在修改已经保存过的网页，修改过的网页将被重

12、新保存。但如果是新 建的网页，单击“保存”后会出现对话框。 在对话框中的【文件名】栏内输入网页的文件名（如“First”），单击【保存】 按钮，该网页就会保存到当前的站点上。FrontPage 2000保存文件的类型主要有网页 文件（ .htm）、FrontPage模板（ .tem）、文本文件（ .txt）、超文本模板文件（ .htt） 等。 三、浏览网页 网页编辑完成后，可以用浏览器预览一下网页的效果。有两种预览网页的方式： 一种是单击 FrontPage 2000主编辑窗口下面的【预览】 标签， 就打开一个 FrontPage 编辑器自带的浏览器，看完之后，单击【普通】标签，又切换到编辑状

13、态。 另一种是单击【常规】工具栏的“”图标按钮（或直接按Ctrl+Shift+B 键，或 单击【文件】菜单并选择【在浏览器中预览】菜单项），将启动已安装好的浏览器 并打开该网页。如果在预览之前没有把修改后的或新建的网页保存起来，则将弹出 一个对话框提示你应该首先保存该网页。 注意：在预览窗口中看到的是网页在发布后的大致样式。要看到网页在WWW 浏览器中的真实情形，必须使用【在浏览器预览】菜单项查看。而且，即使是在 WWWW 浏览器中浏览通过， 不同的浏览器产生的效果不一样。在发布到 Internet上 的前后，最好使用不同的浏览器多浏览几次。 四、练习 第 5 课网页图片编辑 教学目的： 1、

14、能够在网页中插入图片。 2、能够对网页中插入的图片进行调整大小、环绕样式等设置。 教学重点：图片属性的设置。 教学时间： 1 课时 一、插入图片 （1）新建一个空白网页，把光标定位到要插入图片的地方。 （2）单击【插入】菜单，选择【图片】菜单项，在子菜单中单击【来自文件】 选项，在出现一个【图片】对话框的同时，还弹出一个【选择文件】对话框。 （3）在【选择文件】对话框的“搜寻”栏内选定图片的存放位置，然后从文件 列表中双击某个图片文件（或选定图片文件），单击【确定】按钮，则图片插入到 网页中。 任务：在首页中插入图片 二、编辑图片 在网页中插入图片后，我们还要对图片的某些属性进行设置。 （1）

15、在某个图片上单击鼠标右键后，弹出一个快捷菜单，选择图片属性。 （2）单击【图片属性】菜单项，出现图片属性对话框。在图片属性对话框中， 我们可以设置图片的各种属性： 1、常规属性 【图片源】：指图片的存放位置。如果要重新选择其他一幅图片时，单击【浏 览】 按钮。如果要修改这幅图片， 可以单击【编辑】按钮，启动自带的 Image Composer 软件，修改完图片后，只要退出该软件，网页图片就会自动更新。 【类型】：我们可以选择图片的类型，GIF 或者是 JPEG。 在“质量”栏内一 般设定为 70-80 就行了。 2、图像的外观 单击【图片属性】对话框中的【外观】选项卡。在这个对话框中，我们可以

16、设 置图片与文本之间的对齐方式、图片的边框粗细以及图片的大小等。 布局栏：单击【对齐方式】下拉箭头，出现一个下拉菜单，有多种对齐方式， 在图文混排时非常有用，大家可以试试看。 利用【边框粗细】可以在图片周围加上一个指定宽度的边框。值为0 时，边框 不显示。 设置【水平间距】和【垂直间距】的值，可以改变图片与相邻内容（如文字） 之间的距离。 默认情况下，浏览器中显示的网页图片是实际大小的图片。如果要改变图片的 大小，则在对话框的【大小】栏中调整“宽度”、“高度”的值（单位为像素或百 分比）。选择“保持纵横比”选项是防止尺寸修改后的图片出现太扁或太长的“变 形”现象。 图片的定位，可以单击图片工具

17、栏的图片定位按钮。图片可以随便移动，但在 预览时常会与实际不一致。 三、练习： 在网页中插入合适的图片，并进行编辑。 第 6 课为网页锦上添花 教学目的： 1、学会为网页添加字幕，使网页更美观、生动。 2、给网站添加背景音乐。 教学重点：网页设置。 教学时间： 2 课时 第一课时 一、创建字幕 在浏览网页时，我们经常会看到一些滚动发布的通知和提示信息，这种滚动的 文字我们称为“字幕”。 任务：在网页中插入滚动字幕 1、单击“插入”菜单“Web 组件”命令。 2、在弹出的“插入 Web 组件”对话框中选择 “动态效果” “字幕”“完 成”。 3、在“字幕属性”窗口“文本”中输入滚动文字。 4、设

18、置字幕的滚动方向、速度、背景等。 5、如果还需要改变字幕文本的格式，单击“字幕属性”窗口左下角的“样式” 按钮，进行设置。 6、单击“确定”并预览字幕效果。 二、给网页添加背景音乐 修改背景音乐。单击【背景音乐】区域的【浏览】按钮，出现对话框，在硬盘 目录下选择一个 Wav 声音文件。本例使用“C:windowsMedia” 目录下的“Start.wav” 文件，大家也可以自己选择其他的声音文件作为背景音乐。缺省状态下背景声音的 设置为始终有声音。 三、练习 第二课时 在网页中单击鼠标右键，从弹出的菜单中单击【网页属性】选项，出现网页属 性对话框。在这个对话框中我们除了强以添加背景音乐外，还可

19、以修改网页的多种 属性。 一、网页属性的设置： 1、常规属性设置。在这个对话框中共有5 个选项卡。其中，在【常规】选项卡 中我们可以修改网页的标题、背景音乐等。 2、背景色设置。单击网页属性对话框的【背景】选项卡，就可以设置网页的背 景色和图片等。 修改网页的背景色。单击对话框中【颜色】区域内的“背景”项下拉选择箭 头，并从颜色框中选择一种颜色，然后单击【确定】按钮，这时网页的背景颜色就 变成了刚才选择的颜色。 设置背景图片。（ 1）重新单击鼠标右键，选择【网页属性】进入对话框并单 击【背景】选项卡。（ 2）然后单击在【格式】区域内的“背景图片”选择框，选中 后下面的“水印”选择项、文本框都不

20、再变灰。（3）这时再单击【浏览】按钮进入 网页背景图片选择对话框。 （4）单击对话框右下角的 【剪贴画】按钮，就会弹出【剪 贴画库】。单击【 Web背景】选项从中选择一种图案作为背景，选中后单击“”插 入剪辑按钮。（ 5）然后单击网页属性对话框的【确定】按钮。这时网页背景已变成 了刚才选择的图案。 二、练习 第 7 课穿梭网际的超链接 教学目的： 1、学习超链接的制作方法。掌握超链接的设置技巧。 2、学会创建发送电子邮件的超链接。 教学重点：超链接的制作方法，超链接的设置技巧。 教学时间： 2 课时 第一课时 每当我们在浏览网页时，都会发现当鼠标指针移动到某些文字或图片时，就会 变成一只手掌“

21、”的样子，这时只需单击鼠标左键就可以打开另一网页了。这就是 我们将要讲述的网页“超链接”方式。正是由于有了“超链接”，因特网才会如此 神奇和流行！网页上的超链接主要有三种：一种是相对网址的超链接；第二种是与 绝对网址（如 http:/）的超链接；第三种是指在同一网页内的超链接。 一、创建发送电子邮件的超链接： 任务：在首页下文创建电子邮箱的超链接。 在首页下方输入邮箱名称， 选定文字“E-mail: ” ，单击超链接按钮， 出现“编辑超链接”对话框。然后单击“插入超链接”按钮（在对话框“URL”栏 右边），出现“创建电子邮件超链接”对话框。在文字框内输入邮箱地址（如 E-mail: ），连续单

22、击【确定】按钮，就可以创建一个超链接到邮箱地 址。 二、练习 第二课时 一、网页间的超链接 其操作步骤如下： （1）创建一个新网站，并在网站内新建几个网页文件：主页“index.htm”、兴 趣“interest.htm”、相册“ photo.htm”、喜爱站点“ myfav.htm”等文件。 （2）打开主页文件 “index.htm”，输入文字内容， 并单击插入图片按钮， 从“剪 贴画库学院”中插入图片。 （3）选定网页内的文字“兴趣”，单击“”超链接工具按钮，出现【编辑超 链接】对话框。在对话框的文件列表中选择“interest.htm”网页文件。 （4）与（ 3）操作类似，对文字“相册”

23、、“喜爱站点”分别设置超链接到文 件“photo.htm”、“ myfav.htm”。 二、绝对网址的超链接 其操作步骤如下： （1）在上例所创建的网站中，打开喜爱站点“myfav.htm”网页文件。 （2）输入标题“我喜爱的站点”，“文字链接：”，按回车键。 （3）单击“”工具按钮，建立项目符号列表。 （4）文字上的超链接：输入“中文搜狐”，选定这段文字，然后单击超链接工 具按钮，在所出现的对话框 “URL”栏内输入“http:/”，最后单击【确 定】按钮。就可以创建了文字上的超链接； （5）图片上的超链接：选定刚插入的图片，单击“”超链接工具按钮，在 出现的对话框中的“ URL”栏内输入网址“http:/ 定】按钮。这样，也就创建了一个图片上的超链接。 三、练习