《43网页的制作--新建网站及网页.docx》由会员分享，可在线阅读，更多相关《43网页的制作--新建网站及网页.docx（16页珍藏版）》请在三一办公上搜索。
1、4.3网页的制作一用FrontPage创建站点霍州市煤电一中学王月琴一、教学内容分析网页的制作是广东教育出版社出版的高中信息技术网络技术应用（选 修3）中第四章第三节的内容。本章内容是使用FrontPage进行网站的开发， 本节主要让学生掌握FrontPage站点的建立、框架网页的建立，目的是通过运 用FrontPage网页制作工具创建站点，很好地发挥FrontPage对网页的组织 管理功能；建立网页导航，进一步提高学生的网站设计能力和动手实践能力， 又注重学生情感态度、价值观以及共通能力的发展，为学生应对未来挑战、实 现终身发展奠定基础，提升学生的信息素养。二、学习者特征分析本课的学习者是我
2、校高二年级学生，他们求知欲强，思维活跃，视野开阔， 富有个性，他们的感知能力和思考能力较强，通过前一阶段的学习已掌握了网 络技术知识和技能，他们渴望学到更多实用而有趣的网络技术知识。frontpage 是一个所见即所得的网页制作工具，易学易用，与word文字处理软件类似，这 种软件有利于树立学生制作网站的信心，对提高学生的信息综合处理能力作用 较大，网站站点的建立也给学生提供了展示个性，自主、协作的机会，可促使 他们合作、主动、创造性地学习，在教学中给学生自由发挥的空间，让学生在 兴趣中自主探究学习。三、教学目标知识与技能1. 认识FrontPage的工作界面，学会启动该软件。2. 掌握站点的
3、建立、打开、编辑和关闭的步骤。3. 学会创建框架网页、并建立导航。过程与方法1. 通过基于任务的探索和小组的合作，师生交流、提高自己的动手实践能 力和创新能力。2. 通过自评和互评作品，能归纳利用FrontPage制作网站的基本思想方法。情感态度与价值观1. 培养集体主义荣誉感，热爱学校，为校园网站建设出谋划策。2. 通过小组协作和自主探究活动，培养协作意识和探索精神，从而激发创 作热情。四、教学重点与难点重点：网站的建立难点：框架网页的使用五、教学策略设计教学策略1. 采用情境教学的方式促进学生积极参与多媒体所创设情境下的建构知 识活动，建立一定的探索情境，让学生思考、讨论，培养学生的观察、
4、发现及 思考的能力，激发学习兴趣。2. 采用任务驱动的方式，将教学重点、难点逐个攻破，并运用分层递进教 学法促进各层学生不断进步，开发学生潜能、发展个性、关注每位学生，全面 提高学生的信息素养。学法指导1. 指导学生采用课堂讨论的方式，以教师为指导，充分发挥学生的主体能 动性，通过学生积极主动探讨，调动学生的积极性。2. 指导学生采取合作学习的方式，通过合作学习，提高了学生的动手能力、 协作能力及运用知识解决实际问题的能力。六、教学过程设计教学环节教师活动学生活动设计意图创设情景导入新课1. 谈话引入，集体讨论：你最喜欢哪一个网站的哪一个网页？你为什么喜欢这个网页？你自己能否构思出一个漂亮的网
5、页？如何用计算机实现自己所构思的网页？2. 引导：从今天开始，我们就开始学习网页制作。 要学会制作网页，首先必须知道：如何打开网站，应选择哪个文件？网页中的组成元素有哪些？网站文件的组织结构如何？那么带着这些问题，我们 起来欣赏全国网页获 奖作品。学习制作网页，实际上就是学习如何在一个页面 中安排这些内容。仔细 观摩优秀 作品并思 考讨论， 形成强烈 的学习动 机调动学 习兴趣，提 高学生的学 习兴趣和热 情，激发学 生学习和创 作的欲望知识 新授常用 的网 页制 作工 具介 绍1、常用的网页制作工具介绍在网络风潮的带领之下，市场上陆续出现许多 强调所见即所得的网页制作软件，如： FrontP
6、age适合初学者，易上手，用FrontPage软件 制作网页就像在文字处理软件中编排多媒体文档一 样。 Flash结合动画制作动态网页 Dreamweaver专业人员制作网站的首选工具，用于对站点，页 面，和应用程序进行设计，编码和开发。2. FrontPage界面介绍启动FrontPage，引导大家观察FrontPage的 界面、菜单与按钮，找一找，那些命令与按钮是我 们学习过的，说一说它有什么作用？常用工具栏、格式工具栏、视图栏等。聆听 并思考回忆 已有的经 验迁移到 新任务中使学生 懂得制作网 页工具有多 种，发散学生 思维问题 呈现 图片 不能 正常 链接发现 问题 网站 文件 没有
7、分类， 管理 混乱分析问题制定 网站 文件 管理 办法1、问题呈现：展示 个图片不能正常链接的网页，引 导学生从“图片文件是否存在”入手寻找问题所在。（1）解了软件环境之后，我们就可以开始建立网站了。那么你们觉得第 步应该做什么呢？（2）老师创建了一个网页，但浏览的时候不能正常链 接，大家想一想，是为什么呢？发现问题：查找图片文件存在困难，原因是该网站文件没有分类，管理混乱基于之前的网站筹划提出的问题：1. 同学们所搜集来的素材加上后期制作的网页，那么多的文件如何进行管理？2. 用什么方法可以管理网站？站点有什么作用？如何按规划创建站点创建网页思考老师 提出的问 题，在小 组内进行 讨论站点文
8、件夹 是本堂课的 一个重点，给 学生提示让 学生自己探 索，同时分步 做减小难度介绍几种常用的网站文件管理方法：1. 按文件类型进行分类；2. 按所属栏目进行分类管理；3. 将两种方法进行综合；讲解管理网站文件时要注意的一些问题，如：文件命 名规则4.这样做确实网页就不会凌乱了，但这样还不是一 个网站，那FrontPage里就有一个快速建立网站的 方法 创建站点文件夹，可以把我们刚刚建立好 地文件夹变成网站。阅读P26让学生对文件进行有效管理形成印象确定 网站 的主 题网站主题就是建立的网站所要包含的主要内容，一 个网站必须要有一个明确的主题。主题要鲜明，内 容有特色，符合道德要求，合法。确定
9、 网站的主 题网站 结构 的总 体规 划将网站内容分类，确定各网页的主题、包含的内容 及各网页间的层次结构和逻辑关系，给出网站结构 图。网站 结构的总 体规划网站 的整 体规 划网站规划包含的内容很多，如网站的结构、栏目的 设置、网站的风格、颜色搭配、版面布局、文字图 片的运用等，只有在制作网页之前把这些方面都考 虑到了，才能在制作时驾轻就熟，胸有成竹。网站 的整体规 划搜集材料4、搜集材料材料可以从图书、报纸、光盘、多媒体上得来，也 可以从互联网上搜集，然后把搜集的材料去粗取 精，去伪存真，作为自己制作网页的素材。（注意 保存。）搜集 材料网站介绍通过展示的网页，分析其组成元素：网站标志、标
10、 题、水平线、文字介绍、背景图片、背景音乐，强 调网站内容的合理布局。网站 介绍布置 任务 自主 探究启动Fron tPag e任务一：新建站点在桌面上，使用【空白站点】模板创建一个名称 为“网站的” Web站点。教师演示操作步骤：L （1）、需要建立站点的位置（如桌面）新建一个 空白的文件夹，并给文件夹命名为“网站”。在桌面的 空白位置右击新建文件夹输入文 件的名称“网站”。明确 任务，观 察教师操 作排列图标（I） 刷新（1）n交件夹（Z）H快捷方式底）使学生 明白建立站 点的意义与 作用粘贴（I）粘贴快捷方式底）撤销重命名（U）Ctrl+Z新建地）Microsoft Word 文档Mic
11、rosoft PowerPoint 演示文稿Adube Fhu t ci shup Im age文本艾档Microsoft Excel 工作表学生聆听并思考（2）、启动 FrontPage“开始菜单程序MicrosoftofficeMicrosoft FrontPage瘗|附件C3管理工具 腐I启动 网游戏gj Outlook ExpressWindows Media Player打开Office文档新建Office文档360安全浏览器强力卸载电脑上的软件史档山程序值 Microsoft Offic徽 Windows Movie Maker远程协助,西小工具囱搜狗拼音输入法Q Microsof
12、t Office 2003芭迅雷软件建I 38。安全中心齿红蜘蛛软件MacromediaInternet Explorer0 Microsoft Office FrontPage 2003Microsoft Office 工具a暴风软件多OneKey 键还原s.2sss0q:dxsMQPJEM关闭计算机您）.设置（S）搜索也）运行（S） .注销 Administrator（X；）.E：个人微课E Microsoft FrontPage 啜文档 1 一 Microso学生 根据自己 的能力利 用帮助文 档，先自 主完成任 务，再根 据教师提 供的资源锻炼学 生的自主学 习能力。学生 借助教师提
13、供的帮助文 档可以反复 尝试，基础较 好的学生可 以继续往下 探究，兼顾所3-KOj i.LJ(3)打开【文件】菜单，选择【新建】菜单项，新建 站点键人.需要帮助的问题:新建新建网页j空白网页1文本文件根据现有网页.其他网页模槟新建网站囱 由一个网页蛆成的网站.Igj SharePoint 工作组网站.期Web数据包解决方案.(5)在“新建任务窗口”中单击的“其他网站模板”出现“网站模板”对话框帷 J. 蜿与教程，以小组为单位，进行自主创有学生。作。给学生展示自我的 机会,调动学 生积极性，让 其他学生在观察观察其操作同学的操中掌握操作作，反思方法。自己操作，及时做出修正让学生创建站点，有利用
14、利于教学目帮助文档标更好地达自主探究成。而学有余 力的学生在 老师的引导 下继续往下 探究在网页 中上添加文 字、图片和其 它元素。“新建网站”中（5） “新建模板”对话框的【指定新站点的位置】 项中通过“浏览”选择新站点的位置（C盘桌面的网站）。然后选择“常规”选项卡中的“空白网站”，单击 【确定】按钮。此时FrontPage会自动以新站点名建立 一个站点。体验站 点观察建立站点过程（教师要及时提醒学生）观察 分析站点 文件夹的 特征观察分析站点文件夹的特征： 站点文件夹的位置？ Webs1625内有什么文件夹和文件？ 重新用FrontPage打开站点，观察到图标的形状如 何？此外，该站点中
15、包含有两个子文件夹。一个是 _private文件夹，一般用来存放一些私人的文件，这些 文件不会被别人看到。另一个是images文件夹，是 FrontPage专门创建用来存放图像文件的文件夹，因为 FrontPage扩展服务器的图像文件的默认目录为 images。建立框架网页任务二：建立框架网页作为主页。（1）打开【文件】菜单，选择【新建】菜单项，licrosoft FrontPage ne_page_5- ht文件虞）编辑视图凹J新建.J打开Ctrl+0关闭商七打开网站（X）.关闭网站叫日保存囚Ctrl+S另存为也1.发布网站（V）.在浏1览器中预览d打印口Ctrl+F届性.是近仲用讨的寸件m
16、i K最近访问过的网站（T） 退出QD插入a）格式（jo）工具（X），3 （12 磅rL 4表格也）建立 明确框框架网页架网页的建立过程认识框架网页(2)在窗口的右侧会出现新建任务窗口(3)在“新建任务窗口”中单击“新建网页”中的“其他网页模板”出现“网页模板”对话框“初 始化网 页”和“新 建网页”。比较框 架网页与普 通网页的异 同新建的网页出现三个区域，每个区域都是一个独 立的网页，每个区域都有两个按钮“初始化网页”和 “新建网页”。“初始化网页”是加载事先做好的网页， 我们在这都选“新建网页”。插入子幕（5）我们在横幅的位置插入滚动字幕“欢迎来到 我的个人网站”。插入Web组件字幕完成
17、，会弹出字 幕属性对话框。插入交互式按钮动手实践插入字幕在“文本框”中输入字幕内容，自主探究一下字 幕属性对话框中的“方向”、“速度”、“表现方式”、 “大小”、“重复”、“背景色”、“样式”等对字幕 的效果的影响。在探究过程中请同学们做到：1.先完成 任务的同学要帮助有困难的同学，争取小组内的所有 成员都能完成任务。建立导航框架，完成任务一（简单分组），在探究 过程中请同学们做到：1.先完成任务的同学要帮助有困 难的同学，争取小组内的所有成员都能完成任务。2. 同学们在探究过程中可以参考教师帮助文档创建网 页站点操作指南，并留意下创建网页站点共有几个步 骤？我们看看哪个小组同学最团结，制作效
18、果既迅速 又美观。（5）我们在目录的位置插入交互式按钮。分别为 “学校”、“家庭”、“社交”。动手实践插入导航自主探 究一下字幕 属性对话框 中的“方向”、 “速度”、 “表现方 式”、“大小”、 “重复”、 “背景色”、 “样式”等对 字幕的效果 的影响。自主探 究一下导航 按钮的各种 属性插入一一交互式按钮，会弹出交互式按钮对话框新建网页按钮的样式在“按钮”选项卡的按钮中选择，按 钮上的文本内容通过“文本”后的文本框来设置，按 钮上的文本字体、字形、字号、颜色等通过“字体” 选项卡来设置。按钮的大小属性等通过“图像”选项 卡设置。（6）在内容区域输入标题“学校”。在输入介绍 学校的相关的文
19、字和图片。（7）保存网页。单击“文件”一一“保存”，会 弹出“另存为”对话框。分别将框架的三个区域保存为hengfu” “ mulu ” “ xuexiao ”，将框架主页作为主页，主页的文件名为 “Index”，一个网站只有一个主页，主页的文件的文 件名必须是index.htm文件，而且网站中其它网页的文 保存件名也一般是英文字母，可以用汉字拼音。图片一定 网页 放在网站下的“ image ”文件夹中。（8）另外新建两个空白网页，分别保存为“家庭”， “社交”。（9）完成交互式按钮的链接。“学校”按钮链接动手实践保存框架网页明确框 架网页各部 分之间的关 系观察空 白网页的新 建过程超链接到
20、学校网页，“家庭”按钮链接到家庭网页，“社交” 按钮链接到“社交”网页。单击选中“学校”按钮，右击超链接，会出现“插 入超链接”对话框。选择“原有文件或网页”一一“当 前文件夹”中的“学校”网页。其它的“家庭”、“社 交”方法类似。明确各 网页之间的 关系回顾对 比，探 究学习认识FrontP age操 作界面7U 口网页内容Word文档标题栏、菜 单栏、工具 栏、工作 区、任务窗 格学生虽然 能找的出来异 同之处，但缺乏 归纳总结的能 力，所以通过 PPT上两个界 面的对比，由老 师带领学生总 结、回顾1. 启动之后，我们就看到frontpage的界面了，同学们 有没有觉得这个界面很熟悉，感
21、觉跟某个软件的界面 很像？2. 对，FrontPage与Word文档同属微软家族中的一员， 它们的界面有极其的相似性。那现在我们来具体了解 一下FrontPage的界面，也是对Word文档的回顾。PPT展示FrontPage与 Word文档的界面，让学生 回答界面上各部分的名称任务三：完善学校、家庭和社交三个网页的内容教师提供帮助文档，以小组合作的方式探究一下: （1）如何给网页设置背景；（2）如何利用表格规划网页；在家庭网页中中，在第一行增加一行，插入3行2列表格;选中且合并表格的第二、三行第1、2列单元格；把图片移动到表格的第一行第1列，水平居中；把第一段文字移动到表格的第一行第2列，改变
22、字体大小；把第二段文字移动到表格的第二行；把第三段文字移动到表格的第三行；均水平居中；调整表格属性等。表格作为定位和布局使用：表格边框粗 细为0。（3）如何设置表格和单元格的背景、大小等；（4）如何插入图片，并设置图片的属性；（5）输入文字，并设置文字的相关属性在探究过程中请同学们做到：1.先完成任务的同学 要帮助有困难的同学，争取小组内的所有成员都能完 成任务。2.同学们在探究过程中可以参考教师帮助文档 我们看看哪个小组同学最团结，制作效果既迅速又美 观。1. 广播教学：展示学生作品，与学生评析作品。2. 师补充讲解：（不占用课堂时间）在学生练习过程中，教师巡回指导，及时发现学 生问题并指出
23、纠正。合作学 习，探 究新 知任务一：了解相关概念1、网站它是由一个个页面构成，是网页的有机结合。因特 网上的网站通过地址进行定位，一个网站如同网上众 多信息点中的一个，所以也称站点。2、网页网页是网站的基本信息单位，是由文本、图片、动画、声音、视频等元素组成，是扩展名为html或htm 的文件。3、主页主页是网站的第一页，它包含一个网站的必要内容和 搜索信息。一般情况下，主页的文件名都是“index.html 或“ index.htm”。4、归纳（1）、网站是由网页构成。（2）、网页是由有文本、图片、动画、声音、视频等 元素组成。（3）、网页版面布局其实是表格应用。展示作 品，相 互交流体验
24、实践：上传网站文件夹，浏览自己的网站网页， 评价自己的学习成果。（1）FTP上传到指定位置：把整个文件夹上传，网站文件夹教师引导：自己的网站文件夹在哪里？（2）评价你的网站，交流制作心得。教师引导：浏览自己的网站网页；图片是否显示？ 图文排版效果？表格边框属性值。（3）完善你的网页，重新FTP上传。教师引导：侧重于保存图片文件，表格布局？表格 边框属性值是否为零。欣赏作 品、思考 领悟。开拓学 生思路，加强 对知识的理 解。作品的展 示激发学生 的创作激情。课堂总结建网站如同建设一幢高楼大厦。本节课我们通过运用FrontPage网页制作工具创 建站点，很好地发挥FrontPage对网页的组织管
25、理功 能；建立框架网页，快速搭建网站导航框架；完成相关 链接。在这里请大家思考：创建站点是唯一制作网页的 前提吗？你们有更好的制作方法吗？你们还会用什么 方法制作网页呢？思考小结本 课所学知识， 加深学生理 解，以问题 引发学生思 考，鼓励学生 大胆创作作 品。七、板书设计模块三网页制作第一节 创建网站1、相关概念：网站网页主页2、准备工作：（1）、确定主题 （2）、网站结构的总体规划（3）、网页整体规划（4）、准备素材3、创建网站方法A课后作业：下节课我们将继续学习制作网页，并学习超级链接的具体设置方法。下去请同学们掌握本 节课的制作方法，再思考设计一个网站并上网搜集相关资料。九.教学反思建
26、立站点，首先要明白为什么要建立，建立站点在哪里？能找到要上传的站点文件夹吗？ 通过本节课，我感觉到学生比以往要明确的多，教学效果较为明显。本节课有以下几个特点：1、情景创设与实践任务相结合。如创设问题情景，分析了为什么要建立站点后，布置 建立站点任务；产生了图文排版问题，利用表格来布局网页。学生在情景中积极主动地接受 任务，按照要求任务完成教学内容的内化。另外，通过FTP上传站点文件夹，通过浏览站点 网页来测评自己的学习成果。2、注意总结技术过程，是信息技术有效教学的其重要特征，如建立站点的过程，保存 图片的过程。3、利用WORD中知识迁移制作网页中文字和图片，学生利用已有的经验，在网页中填加
27、 文字和插入文字，实现知识和能力的迁移，同时也体现了老师的主导作用。4、及时反馈，自我诊断评价，促进学习进程。如建立站点，分析站点特征；制作网页 index.htm,检查网页，发现新需求，利用表格布局网页，评价自己的网页等。网页制作综合练习题八、练习题1、要制作网页，就要使用网页制作工具如（）A. FrontPage2003 B. Excel C. Word D. PowerPoint2、 在制作网页时，电子邮件的超级链接类型应设置为（）：A. mailto： B. URL： C. http： D. ftp：3、在FrontPage窗口中，单击“文件”菜单中的（）选项，可以建立新网页。A.打开
28、B.保存C.新 建D.关闭4、在FrontPage窗口中，选中“个人简介”，单击“插入”菜单中的（）选项，可以建立超链接。A.组件 B.超链接C.图片D.书签5、如果网页中的文字内容比较多，为了搜索段落方便可以插入（）A.图片B.文字C.动画D.书签6、文字建立链接后通常在文件下方会产生（）A.波浪线B.下划线C.圆圈D.以上都不正确7、网页中可 以插入（）A.图片B.动画C.音乐D.以上都可以8、排版漂亮的网页都会用很多（）来控制文本、图片、动画及视频位置A.表格B.段落C.层D.章节9、在FrontPage 2003中，一般常用的动画文件格式有（）格式A. FlashB. gif C. F
29、lash和gif D. jpg10、网页中的视频文件的主要文件格式有（）A. rm B. avi C. quicktime D. rm、avi、quicktime11、在网页中插入背景音乐，单击“文件”菜单中的（）命令A.属性B.新建C.背景D.音乐12、（）是 WWW的灵魂A.文字B.图片C.动画D.超级链接13、插入FLASH动画是选择“插入”菜单中的（）选项A.高级B.图片C.表格D.动画14、在网页属性对话框中，下列（）是没有的A.常规B.背景C.边距D.数据源15、在网页中（）可以建 立超级链接A.文字B.图片C.电子邮件D.文字、图片、电子邮件16、“超链接”在（）菜单中A.文件B
30、. 编辑。.插入。.工具17、“视频”命令在“插入”菜单中的（）选项中A.图片B.表格C.超连接D.书签18、Frontpage 2003中，如果要将图片放在页面的任意位置，使用（）方法：A.图层移动B.对齐方式C. 绝对定位D.相对定位19、在Frontpage 2003中，我们可以使用下列（）方法进行页面布局，使图文整齐 有序的放在想要的位置上：A.表格B.书签C.表单D.单元格20、在FrontPage中，”打开站点”是指（）A新建一个站点文件夹B打开 一个网页文件C打开一个站点文件夹D新建一个网页文件夹21、下面哪个是超文本标记语言的简称（）A、 Web PageB、HTMLC、WWW
31、 D、http22、浏览器是用于浏览网页的软件，下列选项中属于浏览器软件的是：（）A. FrontPage2003 B. IE C. Word D. Outlook Express 23、浏览网页过程中，鼠标移动到超级链接上 时，其形状一般为（）：A. I形 B.小箭头形C.小手形D.沙漏形24、首页的文件名一般为（）。A. index B. index .htm C. e-mail D. News Group 25、（）是由众多不同内容的网页组成的。A.主 页B.网页C.网站D.文档26、一个网站的起始网页被称为（）。A.主页 B.网页 C.网站 D.文档27、 用FrontPage制作的网页文件的扩展名是（）。A、htm B、http C、ppt D、doc28、（）视图是有来显示、修改选中的网页的。A、网页B、超链接C、文件夹D、导航29、在主页的文字编辑中，按（）键表示换行并另起一段.A. Enter B. Shift+ Enter C.Ctrl+ EnterD. Alt+ Enter30、用FrontPage2003进行主页的文字编辑，按（）键表示换行但不另起一段.A. Enter B. Shift+ Enter C.Ctrl+ EnterD. Alt+ Enter
