七年级信息技术第四章最近网络世界第四课时网页制作教案

1、第四章 最近网络世界 第四课时 网页制作掌握建立网站与建立网页的方法难点、关键：建站点的位置页面文件与图片的保存教学方法： 演示、任务驱动教学过程：一、 引入同学们都很喜欢上网，平常上网我们所说的“西祠”、“新浪”等都是什么？概念: 通常我们在www上所能看到的每一个页面都称之为网页,它可以形象地比喻成一篇文章. 网站是多个网页的集合,即由多个网页通过彼此相连而构成的一个整体,可以形象地比喻成一本杂志或一本书. 制作网页的软件有很多，如frontpage, dreamwaver, flash, firework等从今天开始学习如何用frontpage制作网页二、 讲授新课启动frontpage

2、 “开始”-“程序”-“microsoft frontpage”认识工作环境 标题栏 菜单栏 工具栏 视图窗口6种视图模式 页面视图下3个选项卡 文件夹列表视图窗口中的6个按钮代表6种不同的工作模式，网页模式下可编辑、制作网页，另外5种模式可以管理网站的结构及链接情况。网页模式下，编辑区下方有3个选项卡，在选项卡上单击即可作相应的切换。其中“普通”窗口是一个“所见即所得”的环境，可以插入文字、图片、表格、加入特效等；“html”窗口直接提供编辑html源代码；“预览”窗口可以快速观看所编辑的网页在浏览器中显示的效果。 1、网站的建立： （教师演示） 打开frontpage文件新建站点一个网页的

3、站点指定新站点的位置(如 d:zs)确定 *说明: 站点建成之后frontpage窗口界面会变成二块,自动打开站点文件夹. “d:”为建立站点的位置。“zs”为网站名称。 可以切换到桌面,到目标盘去查看刚建成的站点,体验它与文件夹的区别. 通过关闭站点后再重新打开,体验它与文件夹的区别. 完成课堂任务一（学生练习）建立只有一个主页的站点，站点位置d:aaa，其中aaa为网站名称。 切换到桌面,到目标盘去查看刚建成的站点,体验它与文件夹的区别. 关闭站点后再重新打开,体验它与文件夹的区别.2、设计主页： （教师演示）双击index.htm,打开主页（请学生注意出现在编辑区上方的文件名，第一次打开

4、时，文件名为newpage1，要设计站点中的主页必须打开index文件或把newpage1以index命名存盘），并选择在普通窗口下。1、键入主页的主题（如：我的宠物、动物世界、卡通画廊等）2、插入水平线 在“插入”菜单中选择“水平线”并单击。 双击水平线可设置水平线属性。3、插入图片从剪贴画添加图片 在“插入”菜单中选择“图片”、“剪贴画”并单击。 从文件添加图片 在“插入”菜单中选择 “图片”、“来自文件”并单击，选择“从计算机上选择文件”，浏览您要的图片并且选择该文件。3、网页的保存单击工具栏上的“保存文件”按扭或在“文件”菜单上选择“保存文件”。网页中有图片时会跳出如下对话框，最好选择

5、“改变文件夹”，把图片保存在“images文件夹中。 4、浏览网页效果可以单击“预览”选项卡，在预览模式下浏览网页效果。也可以选择“文件”菜单中的“在浏览器中预览”浏览网页效果。 完成课堂任务二（学生练习）设计主页（要求有主题，有网站的简单介绍，并且包含文字、图片、水平线) 素材在“网上邻居”-“js”-“素材”文件夹中。 保存主页、图片（必须保存在images文件夹中）并浏览 将建好的站点文件夹以自己的名字上传到教师机 方法：打开浏览器 在地址栏输入ftp:/g1?1 用户名 g1? 密码 g1? 注：？代表班级号 课堂任务二完成的较快的同学继续尝试做提高任务 1、尝试美化网页 (1) 修饰文字与水平线 (2) 插入背景图片 素材在“网上邻居”-“js”-“素材”文件夹中。 (3) 插入背景音乐 (4) 插入滚动字幕2、保存结果，并预览效果（在预览窗口或浏览器中进行）三、展示部分学生作品四、小结本次课内容启动frontpage， 建一个自己的站点， 设计一个主页