网站的相关概念
【教学目标】
知识目标：让学生掌握与网站有关的概念。
能力目标：使学生了解IE浏览器中，各个功能的状态及表现方式。 情感目标：培养学生对浏览网站的兴趣，逐步转向自己建立个人网站，为本学期的最终目标做好准备。 【教学重点】
1. 网页、网站的相关概念； 2. IE浏览器各部分的含意及使用方法。 【教学难点】网页、网站的相关概念。 【教学方法】讲授法配合演示法。 【教学课时】二课时 【教学过程】
第一课时
[创设情境，讲授新课]
上一节课我们了 解了这学期的内容和大致情况，这节课我们就开始学习。
本节的学习内容是：了解网站！
为了更好的了解网站，我们先从访问网站的工具——IE浏览器说起。这里需要申明一点：访问网站并不是只有IE浏览器可以做到，也就是说，浏览器并不是只有一种，其他类型的浏览器还有很多，只不
1
过由于IE是捆绑在Windows操作系统上一起销售的，而且与操作系统出于一门，在兼容性上不存在问题。使用也很方便，所以大多数人都在使用IE来浏览网页。象浏览器、网址、首页、……、等基本概念，我们就不在这里重复了。只把与我们这学期建站有关，而且容易出错的地方特别提出来，以便于大家学习和工作。
(一)网站相关概念
1．网页与网站 通过浏览器看到的一个个“单一”的页面叫做网页，网站由一系列相关网页链接而成。
2．主页与子页 一个网站一般拥有多张网页，用户输入网站的地址以后，浏览器打开的第一个网页，称之为该网站的主页，也叫首页。其他页面称之为子页。 （二）网站的种类
按照网站提供的服务，可以将网站分为：综合类网站、资讯类网站、功能型网站、交易类网站、互动游戏类网站、有偿服务类网站、办公类网站，等等。
综合类网站：提供多种服务，就象一个网站服务大卖场，其服务包括：新闻、搜索、论坛、邮箱、游戏、网上商城等
资讯类网站：以提供信息为主要目的，其功能类似于在网上创建了一个宣传册，用来宣传产品、推广服务或文化教育等
（三）网站的分类
网站的分类方式有多种，按照网站主体可以将网站划分为：政府网站、企业网站、商业网站、教育科研机构网站、个人网站、非盈利
2
机构网站等。
（四）网站中的信息资源
网站是提供信息的“场所”，那么都给我们提供哪些信息呢？ 网站可以提供文本、图像、动画、声音、视频等多种形式的信息资源。网站还可以通过与用户的互动，动态地生成信息并进行发布，从而实现用户与用户间信息的交流。
【小结】
我们如果自己建立网站，也要把握好这些方面，让自己的网站起到应起的作用。有关网站的其他方面，我们以后再慢慢学习。 [知识迁移，拓展思维]为我们自己将要建立的网站制订一个较为祥细的计划。
[课堂小结，作业练习，结束新课]
【活动与探究】观摩网易的首页，分析其个个版块的作用
3
网站的相关概念
【教学目标】
知识目标：让学生掌握与网站有关的概念。
能力目标：使学生了解IE浏览器中，各个功能的状态及表现方式。 情感目标：培养学生对浏览网站的兴趣，逐步转向自己建立个人网站，为本学期的最终目标做好准备。 【教学重点】
1. 网页、网站的相关概念； 2. IE浏览器各部分的含意及使用方法。 【教学难点】网页、网站的相关概念。 【教学方法】讲授法配合演示法。 【教学课时】二课时 【教学过程】
第二课时
【 谈话导入】
为了更好的了解网站，我们先从访问网站的工具——IE浏览器说起。
【 讲授新课】 （一）浏览网页 www.baidu.com www.google.com
www.sohu.com
4
www.yahoo.com ………
（二）分析网页与网站的区别
通过浏览器看到的一个个“单一”的页面叫做网页，网站由一系列相关网页链接而成。
（三）分析主页与子页的关系
一个网站一般拥有多张网页，用户输入网站的地址以后，浏览器打开的第一个网页，称之为该网站的主页，也叫首页。其他页面称之为子页。
(四)自由练习 【小结】
上面我们学习和了解了与网站有关的知识，知道了主页与子页的区别，网页与网站的区别，可以更好的为网站点的总体规划奠定基础
关闭电源，结束本课
5
网站总体规划
【教学目标】
知识与技能：了解网站的作用及网站建设的一般过程，学会规划网站。 过程与方法：通过学习，使学生了解网站设计需要有明确的主题，掌握网
站设计的一般过程，培养学生整体设计、规划网站的思想和方法。
情感、态度与价值观：通过网站设计培养学生通过整体规划、分步实施来
解决问题的思想，使学生体验成功的快乐和创意的美感，增强相互之间协作学习和交流的能力。
创新与行为：通过探究与实践活动，给学生自主创作的空间，激发学生的创新意识，提高创新能力。
【教学重点和难点 】
重点：网站规划的要点 难点：网站规划的一般过程
【教学课时】二课时 第一课时 【教学过程】
（一）巧设情境，引入课题
师：上课，同学们好！今天在座的有好多老师都是第一次来到滨海，同学们能否给老师们介绍一种最能代表咱们滨海的特产，大家可以相互交流一下。
生：何首乌。
师：来滨海之前我通过网络了解到滨海是全国著名的何首乌之乡，听了同学们的介绍确实如此。老师可以通过网络了解滨海，同学们上过网吗？都喜欢浏览哪些网站？
生：百度、谷歌、新浪、网易、搜狐、腾讯、QQ空间、滨海一中网站„„大家比较熟悉，经常访问的网站。
（学生回答的时候，老师打开部分相应网站并作简要介绍）
师：看来同学们对上网非常的感兴趣，下面我们一起来进一步探究网站的相关知识。
设计意图：由老师通过网络了解滨海，自然地引出上网的话题。在和同学们交流的过程中让学生对网站有了一个感性的认识。通过对部分网站的介绍，让学
6
生体会到网站的功能，激发学生进一步学习的兴趣。
（二）网站建设的一般过程
师：下面请大家先来浏览一个网站——鄱阳湖里探白鹤。在浏览的同时请大家思考这样一个问题：
从这个网站中，同学们能够了解到哪些方面的知识？ （请打开桌面上 鄱阳湖里探白鹤 快捷方式）
生：浏览该网站之后我们对白鹤这种国家一级保护动物、国际濒危物种有了一个全面的了解，通过对鄱阳湖水文、气候、土壤、植被的研究，我们了解了白鹤不远千里到鄱阳湖越冬的原因，作者呼吁更多的人加入到保护白鹤及白鹤的栖息地的行列中来。
师：大家说这个网站做的漂亮吗？想不想自己也能够做个这样的网站？ 生：漂亮，非常的想。
师：同学们对制作网站非常感兴趣，大家觉得制作这样的网站需要做哪些工作？大致要经过经历哪几步呢？在回答问题之前我想和同学们先一起来了解一下我校“求索楼”是如何建筑起来的：首先，根据建筑物的功能，设计图纸；其次，准备建筑材料；第三步，建筑施工；第四步，装修；最后才能交付使用。同学们能从中得到一点启示吗？请大家相互探讨一下刚才的问题。
生：以互助小组的形式进行探讨„„
师：请学生谈谈讨论的结果„„(确定主题，收集资料，制作，编辑调试，网上发布)
总结归纳出网站建设的一般过程：
(1)整体策划（确定主题、栏目设计页面总体规划）：明确网站建立的目的，以及需要展示的主题，并大致规划所要展示的内容、功能及表现形式。
(2)收集资料（素材的准备、素材的筛选和加工）：根据展示的内容，收集所需要的文字、图片、声音、动画等多媒体信息。
(3)制作：运用相关软件处理文字、图片、声音等多媒体信息，制作网页。 (4)编辑调试：编辑各个页面，使整体网站的颜色、内容、风格等和谐，并测试网站链接的流畅性。
(5)网站发布与维护：将设计好的网站发布到因特网上，可使访问者浏览该网站。同时，不断完善网站功能、更新网页信息。
设计意图：通过对“鄱阳湖里探白鹤”网站的分析，引导学生对该网站制作的过程进行思考？在学生相互探讨后，老师引导学生说出网站建设过程中的几个关键点，最后作总结归纳，让学生认识到网站建设的一般过程。
（三）网站规划的要点
师：通过探讨，我们发现制作网站一般都需要经过上述过程。因特网上的网
7
站许许多多，我们又如何才能够让我们制作的网站在这众多网站中脱颖而出呢？
我们先来看一段关于国家体育场鸟巢的视频——播放视频。 再来看一下“鸟巢”设计方案的诞生历程：
2002年3月31日国家体育场面向全球公开征集规划设计方案 2002年7月2日收到89个规划设计方案
2002年10月举行国家体育场建筑概念设计方案国际竞赛
2003年1月至2月确定5名国家体育场项目合格申请人进入招标第二阶段。 2003年3月19－25日评审委员会投票“鸟巢”方案压倒性优势胜出。 师：通过对国家体育场规划历程的了解，大家觉得鸟巢为什么能从众多建筑中脱颖而出成为北京市奥运会甚至北京市的标志性建筑呢？
生：它的规划设计方案是从众多方案中精心评选出来的，是由国际知名设计师参与设计的，它的结构科学简洁、设计新颖独特。
师：标志性的建筑需要精妙的规划设计，优秀的网站也是如此。我们在建设网站之前首先要进行认真、科学的总体规划，网站规划需要完成以下任务：
(1)明确建设网站的目的；
（“鄱阳湖里探白鹤”——让人们了解白鹤到鄱阳湖来越冬的原因，呼吁人们保护白鹤及白鹤的栖息环境。）
(2)进行可行性分析：网站建设需要花费多少时间、精力、人力，性价比是否合理；
（“鄱阳湖里探白鹤”——为了制作该网站，作者曾经用了近8个月的课余时间，撰写提纲，收集素材和实地调查采访。为了掌握第一手资料完成这个作品，作者三进鄱阳湖，采标本，观白鹤，采访60余人次专业人员，进行问卷调查等等。）
(3)网站内容设计：根据网站建设的目的，分析浏览者的需求，确定网站的内容；
（“鄱阳湖里探白鹤”——作者为了让浏览者探明白鹤到鄱阳湖越冬的原因，呼吁更多的人来保护白鹤、保护环境，设计了三进鄱阳湖、白鹤与水文、白鹤与气候、白鹤与土壤、白鹤与植被、白鹤的保护等栏目。）
(4)网站的表现形式设计：主要指网页的版面布局设置，网站的标志、网站的图文排版等。
（“鄱阳湖里探白鹤”——网页的整体布局及背景图的选择比较适合该网站的主题，网站的标志也设计的很有特色，图文排版的也很好。网站的表现形式设计其实对一个网站能否吸引更多的人来关注它非常的重要，大家熟悉的新浪、腾讯等网站都设计的很有特色。）
师：要想制作一个好的网站，完成好上述规划任务是非常必要的。下面请同学们从“推荐网站”文件夹中选择一个你比较喜欢的网站浏览一下，在浏览的过
8
程中请思考下列问题：
①这些网站建站的目的是什么？
（给少年儿童提供一个健康的学习、娱乐的平台）
②网站的内容是否是同学们喜欢的、关心的话题？整体版面布局设置是否适合青少年？
（内容都是青少年比较喜欢的，非常的适合，） ③说出你喜欢这个网站的哪些方面及喜欢的理由？ （内容、风格、整体布局、网站标志……）
师：从同学们刚才的回答中我们可以看出这些网站之所以能够让大家喜欢，是因为它的规划的几个要点完成的非常的好，所以同学们在接下来规划网站的过程中要尽可能把这些任务完成好。
设计意图：由“鸟巢”设计方案的诞生历程进行类比，让学生充分认识到网站规划的重要性。在具体阐述了网站规划的任务后，让学生带着问题浏览网站，在思考问题的过程中进一步体会网站规划的要点。
（四）规划网站
师：为了呼吁人们关心自然、关心动物，我们大家一起来设计一个主题为“动物——人类的朋友”网站。
1、网站建设的目的：呼吁人们关心自然、关心动物。 2、网站的主题：动物——人类的朋友。
3、网站的内容：首先要让浏览者了解建立该网站的目的；其次，可以介绍一些动物；第三，介绍一些人与动物相关的内容；第四，宣传一些动物保护方面的知识；最后，给关心动物的人介绍更多的学习的地方。
网站的栏目及主要内容设计如下：
栏目名 首页 多彩的生物 人与动物 走进动物世界
主 要 内 容 展示网站宗旨和公益广告 介绍一些动物的生活习性 介绍人与动物息息相关的内容 链接更多的相关网站，让访问者了解更多人与动物方面的知识 动物保护知多少 网上知识问答，具有交互功能 师：通过我们大家共同的努力，我们已经完成了“动物——人类的朋友”网站的规划。记得刚开始同学们给老师们介绍了滨海特产——何首乌，为了让外界更好的了解滨海的何首乌，想请同学们设计一个“滨海特产——何首乌”网站。
下面请大家以小组的形式进行探讨，每个小组规划出一个方案,最终我们将从
9
中选出一个最好的作为该网站的建设方案。
生：小组讨论，组长定稿。
网 站 规 划 评 比 细 则 具体指标 网站建设的目的是否明确 网站的主题是否鲜明 网站的栏目设置是否紧扣主题，符合网站建设的目的 网站的内容介绍的是否全面，能否符合浏览需求 网站的表现形式设计的是否美观 标准 15 15 30 20 20 得分 师：通过刚才一阵激烈的评比，最终**组的规划方案脱颖而出，恭喜他们，对他们表示祝贺，大家还可以对他们的方案提出一些建议，在融合了全班同学的智慧后我们的网站规划方案就要诞生了。今天课后请同学们根据刚才的规划去搜集相关的素材，下次课我们继续完成该网站的制作。
四、归纳总结，内化升华
师：在完成了“滨海特产——何首乌”网站的规划后，同学们觉得要让网站能够运转起来，我们还需要完成哪些工作？
生：收集资料、制作、编辑调试、发布与维护。
师：为了能够将网站制作的更好，同学们重点要做好哪些任务呢？ 生：①明确网站建设的目的——对外介绍滨海的何首乌；②精选规划网站的栏目，搜集相关的素材；③在表现形式上制作的尽可能完美。
师：相信同学们有了今天好的开头，将来“滨海特产——何首乌”网站一定会完成的非常漂亮。
设计意图：在亲历过网站规划之后，师生共同归纳网站建设的一般过程及网站规划的要点，对本节课的内容进一步内化升华。
10
网站总体规划
【教学目标】
知识与技能：选择一个主题，给网站做主题规划。
过程与方法：通过练习，使学生了解网站设计需要有明确的主题，掌握网
站设计的一般过程，培养学生整体设计、规划网站的思想和方法。
情感、态度与价值观：通过网站设计培养学生通过整体规划、分步实施来
解决问题的思想，使学生体验成功的快乐和创意的美感，增强相互之间协作学习和交流的能力。
创新与行为：通过探究与实践活动，给学生自主创作的空间，激发学生的创新意识，提高创新能力。
【教学重点和难点 】
重点：网站规划的要点 难点：网站规划的一般过程
【教学课时】二课时
第二课时
【教学过程】
（一）巧设情境，引入课题
百度、谷歌、新浪、网易、搜狐、腾讯、QQ空间、滨海一中网站„„大家比较熟悉，经常访问的网站。如何利用网站做规划，今天我们一起来看看。
（二）学习新知
1、总结归纳出网站建设的一般过程：
(1)整体策划（确定主题、栏目设计页面总体规划）：明确网站建立的目的，
以及需要展示的主题，并大致规划所要展示的内容、功能及表现形式。
(2)收集资料（素材的准备、素材的筛选和加工）：根据展示的内容，收集
所需要的文字、图片、声音、动画等多媒体信息。
(3)制作：运用相关软件处理文字、图片、声音等多媒体信息，制作网页。 (4)编辑调试：编辑各个页面，使整体网站的颜色、内容、风格等和谐，并
测试网站链接的流畅性。
(5)网站发布与维护：将设计好的网站发布到因特网上，可使访问者浏览该网站。同时，不断完善网站功能、更新网页信息。
11
2、用图表显示为
确定主题 素材准备 设计网页形式
素材的准备 网站规划 建立网站结构 制作网页元件
网站发布
网站规划 规划网站结构 插入原件及排版 维护与管理
网站制作 网站维护 网站的发布 3、网站设计环节的一般过程 （1）确定主题 （2）栏目设计
设计网站的首页和子页，确定主页和子页的内容。 （3）页面总体规划
规划网站可能的页数，各页之间的层次关系，各页提供的信息，信息呈现的方式。
（4）素材的准备
打开各网站，利用搜索引擎搜索所需要的素材 （5）素材的筛选和加工
利用文本工具，照片加工工具对所选素材进行筛选和加工。 3、巩固练习 【小结】
站点创建与管理
12
【教学目标】
知识目标：由建站准备工作过渡至开始建网站，建立网站文件夹和新建网站的主页。
技能目标：1．认识启动FrontPage，熟悉FrontPage软件环境；
2．设计网站的目录结构；
情感目标：教学中以简易地操作技能帮助学生树立成功建站的信心。 【重点难点教学重点】本课教学重点是启动FrontPage，在熟悉FrontPage软件环境的基础上建立网站的目录结构。
【教学难点】：本课的教学难点站点文件夹的理解。学生在理解上有一定的困难，他们一般不太理解为什么要用上文件夹来存放网页，这里教师需要作解释。
【环境与素材】
1．教学环境：多媒体网络教室，学生计算机中安装IE5.0以上版本及Frontpage2000以上中文版，要求能上因特网。
2．教学素材：准备示例网站以及首页相关的文字图片素材。 【教学课时】二课时 【教学过程】
第一课时 1、展示学生的网站“蓝色阳光”
问题：这是一个学生自制的网站，你对它的第一印象是什么？
请同学们大致浏览一下这个网站，你觉得它最吸引你的是什么？ 你觉的这个网站由哪几个元素构成？
想不想拥有自己的网站，任凭你想象，把最美好的展现给你的朋友、
同学
2、授课开始
师：那么，我们用什么工具建立网站呢？老师在这里介绍几个比较实用的网页工具——Macromedia Dreamweaver、东方网页、Frontpage。而我们运用的是Frontpage 这个工具。装在我们机子里的是Frontpage2000。接下来让我们来认识一下这个网页工具。请大家从桌面或从程序菜单中打开这个程序
请大家仔细观察这个软件的窗口结构，它与我们上学期学的Word文字处理软
13
件的的窗口有什么相似处？
正是由于它们都是微软公司的产品，窗口结构大同小异， Frontpage2000与Word最明显的区别即有三个工作区域，下面我们来进行实践操作。
任务一：创建站点文件夹
师打开一个网站的一张首页，然后选取首页中的某几个链接依次打开所对应的网页，学生观看
同学们，老师刚才打开了一个网站的若干张网页只是这个网站的一部分，那么我们如何把这些网页都放在一个网站中呢？大家是否还记得我们把搜集到的资料归类时需要做一个什么工作？
对，是建立一个文件夹。同样，我们把若干张网页放在一起建立一个网站也需要建立一个文件夹，这样便于管理。
(1)规划网站目录结构遵循的原则
首先为网站建立根文件夹，然后在根文件下建立子文件夹。
（2）使用合理的文件（夹）名称，一般的首页的文件名index.htm或default.htm,其他页面没有特别的要求。但在命名时避免见名知义的原则，同时避免使用中文名。
（3）当网站规模较大时，按栏目建立子文件夹，在每个栏目下文件夹下建立独立的images文件夹。
任务二：根据原则规划网站栏目及页面与层次关系
（陕西风情） 陕西风光 陕西文化 第一怪 陕西民俗 。。。。。。。。。 加入我们 第八怪
由于该网站的规模较小，页面数量不多，所涉及的图片，动画文件少，因此我们对站点的目录结构进行了如下规划：
站点结构 说明
14
〈陕西风情〉 站点根文件夹
〈ten〉 文件夹（存放十大怪页面）
1.htm 第一怪页面 „„ 8.htm
第八怪页面
Index.htm 首页（首页的文件名一般为index.htm或default.Htm Fengguang.htm 陕西风光页面 Wenhua.htm 陕西文化页面 Minsu.htm 陕西民俗页面 Join us.htm 加入我们页面
〈Images 〉 文件夹 （存放动画.图片等文件）
这个文件夹只是这个网站的框架，内部还需要多张网页的补充和修饰，下面我们来建这个网站的第一张网页——即供他人浏览的第一张网页，称为首页或主页。 【小结】 【作业】
1.网站建设要遵循的原则是？ 2、为陕西风情网站设计目录结构?
15
站点创建与管理
【教学目标】
知识目标：由建站准备工作过渡至开始建网站，建立网站文件夹和新建网站的主页。
技能目标：1．认识启动FrontPage，熟悉FrontPage软件环境；
2．建立网站空站点并新建保存主页；
情感目标：教学中以简易地操作技能帮助学生树立成功建站的信心。 【重点难点教学重点】本课教学重点是启动FrontPage，在熟悉FrontPage软件环境的基础上建立网站空站点并新建保存主页。
【教学难点】：本课的教学难点站点文件夹的理解。学生在理解上有一定的困难，他们一般不太理解为什么要用上文件夹来存放网页，这里教师需要作解释。 【环境与素材】
1．教学环境：多媒体网络教室，学生计算机中安装IE5.0以上版本及Frontpage2000以上中文版，要求能上因特网。
2．教学素材：准备示例网站以及首页相关的文字图片素材。 【教学课时】二课时 【教学过程】
第二课时 导入：
但F目前比较常用的管理网站及网页制作的管理工具有Frontpage,dreamweaer等，Frontpage界面熟悉，简单易用，所以我们用它来创建管理站点 一、创建及管理站点 任务一：创建站点 （一）师师范建立站点 1、打开Frontpage2003
2、单击“有一个网页组成的网站”打开网站模版窗口 3、在模板窗口中指定网站的位置为D:\\陕西风情
建好后系统自动生成一个名为index.htm文件和两个文件夹，名为“images”
16
和“-private”。
(二)生自己操作，互相协作 师巡视
师：通常命名为index.htm(index.asp或default.htm)，这是固定的命名，不能更改。这跟编辑网页的语言有关（html语言或者asp脚本语言）。注意，尤其是扩展名。
师巡视指正
任务二：管理站点（建设网站子页及需要的文件夹） （一）建立网站的子页及文件夹
1、选中D:\\陕西风情，并右击在弹出的快捷菜单中选择“新建---空白网页命令。
2、在D:\\陕西风情更文件夹下出现的蓝条显示的默认文件名修改为需要的文件名如fengguang.htm
3、用同样的方法建立站点根文件下的四个子页文件。
4、选中站点根文件夹（D:\\陕西风情）在弹出的快捷菜单中选择新建—文件夹，创建ten文件夹
5、选中ten文件夹并右击在弹出的快捷菜单中选择“新建---空白网页命令。 6、在ten文件夹下出现的蓝条显示的默认文件名修改为需要的文件名如1.htm 7、用同样的方法建立站点根文件下剩下的九个子页文件。
（二）同学们， Frontpage2000和Word的基本操作几乎相同，所以建设主页这部分由同学们自己完成。大家可以打开Word，参照其中的文字输入、修饰和图片插入、修饰来完成Frontpage2000中的文字和图片内容。
小组操作，教师给出参考主页，并巡视指正练习。 任务三：打开和关闭站点 （一）打开
1、打开Frontpage2003 2、文件—打开网站命令
17
3、在打开的打开网站窗口中选择陕西风情网站，并单击打开按钮
(二)关闭
1、打击该站点窗口的右上角的×按钮 2、文件---关闭网站 【小结】 【作业】
页面分析与设计
【教材分析】在学习《页面的设计与制作》之前，学生已初步掌握了网络信息的搜索、浏览和下载，以及电子邮件的使用等内容。因此，学生已经具备了获取信息的能力，但多数学生对网站页面的了解也仅仅只停留在这种简单的操作层面上。本节教学中通过页面、网站基本
18
概念的了解，让学生理解页面的基本元素构成和经常使用的构件，了解超文本标记语言HTML，通过对页面制作工具的比较学习，了解不同常用页面制作工具的特点，为下一节的学习打下基础。
【学情分析】在学习本单元之前，学生已初步具备获取信息的能力，他们学习了网络基础知识，掌握了网络信息的浏览、搜索和下载以及电子邮件的收发、文件传输等技能。学生希望自己能制作页面，并将页面发布在Internet上。因此学生对本单元学习的兴趣很大。学生在学习本单元前已经学过Word应用软件的使用方法，并掌握一定的文字输入、图片的编辑、表格的插入等技巧，这对于本单元的学习非常有利。 【教学目标】 1．知识与技能
（1）了解页面、网站的基本概念，理解页面的基本元素。 （2）了解基本的页面制作软件的界面和特点。
（3）了解网站的地址标识——URL,超文本标记语言HTML, 了解超文本传输协议HTTP。 2．过程与方法
（1）通过对一个网站页面的分析，了解页面、网站的基本概念，理解页面的基本元素。
（2）通过教师的演示和讲解，初步了解基本的页面制作工具软件的界面和特点。
3．情感态度与价值观
19
（1）培养学生严谨求实的学习态度。
（2）培养学生学习中勇于探索、崇尚科学的意志和品德。 【重点难点】 重点：页面的基本元素 难点：页面的基本元素，构件 【设计思想】
同学们喜欢上网，但是有一部分学生不能区分网站和页面，在设计时，我首先与语文学科整合，结合语文教材内容，播放《再别康桥》flash动画朗读版，以此来创设快乐课堂学习情境，进而引入徐志摩文学网，让学生思考网站和页面有什么联系？引出本节课的主题，以提高学生的学习兴趣和求知欲望。当学生对网站与页面有了一定的认识之后，引导同学们自主去探究发现构成页面的基本元素有哪些？有什么作用？接着组织学生继续讨论、交流页面中除了三种基本元素外，还有哪些经常使用的构件？然后引导学生查看页面的源文件，从而顺利引导到对Dreamweaver页面制作软件的了解，为本章后面的知识学习作铺垫。 【教学流程】 教学环节 创设情引入课题 境，激幻灯显示《再别康桥》flash动画朗读版，指出诗很美，作者笔发学生下的康桥更是让人向往，激发学生的求知欲。
20
教师活动设计 的学习引导学生进入徐志摩文学网http://www.zhs2008.com ，对URL、兴趣 http作一定的解释。现在大家看到的是什么？（进入到徐志摩文学页面面让学生回答）引出本节课的主题“网站和页面”，让大家思考网站与页面有什么联系？ 1、从美学角度出发，创设快乐课堂学习情境 2、与语文学科整合，结合语文教材《再别康桥》，引入徐志摩文学网 3、学生明确本节课的学习主题内容 页面的基本元素 教师提问：在徐志摩文学网中，各位同学是否发现了神往已久的康桥，除此之外，还发现了什么？ 学生活动：用发现法去找出有关康桥风景欣赏中的任一张图片，再别康桥的诗和徐志摩简介页面. 网站与页面有什么联系？学生讨论之后，教师总结：网站包含多自主合个页面，通过超链接把不同的页面链接起来。构成页面的基本元作探究 素有文字、图形和超链接。页面中常见的图象有jpg和Gif。网站的首页即为主页。 学生活动 在桌面上新建一个以自己号次命名的文件夹，进入徐志摩文学网完成以下任务 课堂任务一，触摸页面的基本三要素： 1、 要求下载康桥风景欣赏中的任一张图片，文件名改为kq
21
2、保存«再别康桥»这首诗，复制，粘贴到word文档中，文件名改为zbkq 3、要求下载徐志摩简介页面 页面揭秘 刚才我们了解了页面的基本元素、构件，这些不但美化了页面，还丰富了页面内容，增强了页面功能。下面让我们来看一看页面究竟是怎样组织的。以课堂在线网站为例，选择滚动字幕，点击“查看”菜单中的“源文件”命令。 教师总结：页面中包含的文字、图像、超链接和表格等基本元素及构件是由超文本标记语言（HyperText Markup Language，简称HTML）进行描述的。HTML是一种超文本标记语言，由网络浏览器解释执行，最后将解释结果显示出来。 几乎所有的页面都是用超文本标记语言编写的，下面就让我们利用记事本来体验一下。 页面制作工具比较 1、用HTML语言制作页面，让学生对照老师的任务提示，观察一下一个简单的HTML页面文件的浏览结果变化。 （提示学生选择“查看”菜单中的“源文件”命令进行修改。）
22
欢迎大家光临！ 2、用页面制作工具软件制作页面 在“文件”菜单中用使用Frontpage编辑上述页面，比较两者特点。 教师总结：除了Dreamweaver之外，还有比较专业的页面制作工具Frontpage，一般我们使用Dreamweaver进行页面制作。 1、学生听、看老师讲解和演示，并思考。 2、学生操作实践 学生任务：将size=\"3\"改为size=\"6\"，color=\"#FF0000\"改为color=\"#000000\"，观察其变化。 本节课涉及到的基本概念较多，考虑到前面已经有过文字小结，因此，这里改用选择题的形式来帮助学生整理和巩固。 学生完成“课堂在线——网站和页面”中的“课堂练习”。 教学生 师巡回检查，个别辅导有困难的学生。 练习 学生操作练习，完成课堂练习。 “在线批改”可以让学生及时纠错，并据此判断学生是否掌握本节课的内容。
23
每位同学学习完本课，并完成实践过程之后对自己的学习情况进行自我评价，完成“课堂在线——网站和页面”中的“交流评交流与 价”。指导学生进行自我评价，并根据反馈的结果适当点评。 评价 学生自评，通过大屏幕实时显示评价结果，教师可以及时地点评学生的学习情况。 本节课主要讲了网站和页面的基本内容，页面的基本元素、构件及页面制作工具等。 本课 学生对本节课的内容知识进行回忆小结 小结 根据本节课的学习内容，要求学生设计一幅个人网站的主页。 思考、设计，为下面的课做准备 拓展页面构件的使用，让学生根据学生注册信息、查询信息 表单的信息进行注册，查询，通过 学习 输入、查询等功能来激发学生的学拓展 习兴趣，让学生更能理解学过的数据库管理有关知识。
巧用表格来布局
教学内容：八年级下册22-23P。 教学目标：
24
1、让学生学会在网页制作中，根据内容和版面的规划，插入表格。
2、学会调整表格及单元格属性。 教学重点：
在网页制作中插入表格的三种方法。 教学难点：调整表格及单元格的属性。 教学过程： 一、导入：
幻灯片出示本节课的任务。
通过上一节课的学习，我们已经对我们设计的主页进行了规划。（出示已规划好的主页图）在制作过程中，当把文字、图片等信息放进页面时，整个页面就会显得很零乱，如何才能让各类信息“各就其位“呢？这就是我们今天所要学习的内容。
二、新授：
1、讨论：现在我们要在网页中插入表格，同学们来讨论，你会用哪种方法来插入呢？
2、学生汇报： 3师归纳：
（一）插入表格的三种方法： 1、在常用工具栏 上单击放开鼠标。
2、单击“表格”---“插入”---“表格”---输入行数和列数。
3、单击“表格”----“布局表格和单元格”—绘制布局表格。
4、学生演练，在操作中遇到的难题老师帮助其解决。 （二）调整表格及单元格属性。
25
按钮，按住鼠标左键拖动鼠标，到合适的时候
插入表格以后，我们需要给表格设置背景，并且在左上角单元格中插入事先准备好的logo图片，那样会效果更好。此时需要对表格属性和单元格属性进行设置。
1、调整表格属性
在表格的任一位置右击，在弹出的快捷菜单中选择表格属性。
2、调整单元格属性
若要对某一个或某一些单元格进行设置，选中单元格后右击，在快捷菜单中选择单元格属性。
3、学生试操作。
（三）课堂作业：P28评价第二题。 （四）小结；
通过这节课的学习，同学们有哪些收获呢？ （五）布置作业：
学生试着对已经插入的表格进行编辑。
页面内容的填充
【教学目标】
知识目标：掌握网页内容的输入、放置的方法。
能力目标：1．在表格中输入文字的方法；2．在表格中放置图片的方
26
法；3．在表格中放置声音、动画的方法。
情感目标：提高学生使用计算机的能力，通过在网页中填充内容的使
用提高学生成就感
【教学重点】 1. 文字的填充； 2. 声音、动画的填充。 【教学难点】声音、动画的填充
【教学方法】讲授法、演示法、上机实习法 【教学过程】
[创设情境，讲授新课]
前面我们已经知道了，在网页比较准确定位各个版块的位置，我们所采用的方法最常用的——表格。
但是，在实际建设网站的过程中，表格里除了填充我们比较熟悉的文字外，还有许多其他类型的内容，如：图片、动画、声音（主要是音乐）甚至各种类型的视频文件。因此在实际操作过程中，有许多技巧需要大家掌握。这节课我们就来看看在FrontPage中如何来达到我们预期的目标。
先来说说文字的填充，文字填充是网页填充过程中最简单的部分，一般大家在实际操作过程中，不会出现问题。这里需要指出的是：在文字填充过程中，实际上也有技巧！怎么做呢？一般都是把事先准备的文字资料写成电子文档，在填充时直接使用复制+粘贴的办法将文字填入单元格。为了保证填入的文字达到我们的要求，一般我们事先准备的电子文档都是.TXT格式，也就是记事本格式，这样，不会把我们准备资料阶段的文字格式带入单元格内！
27
在将文字导入单元格后，再通过调整格式，如：字体、颜色、字号以段落中的有关数据（如：对齐方式、行间距、缩进等）把单元格内的文字安放到自己满意。
对于图片，在FrontPage中，与我们熟悉的Word基本一致。通过插入→图片→来自文件进入插入。需要说明的是：由于图片是用于网页，所以图片的精细程度能达到网页的要求就行，没必要把图片搞得过份精细，这样势必导致图片文件过大、以致最终影响网页访问速度。另外，虽然FrontPage支持的图片格式很多，但建议使用gif、jpeg、png这类压缩图片文件格式，这样有利于网站的访问速度！
至于，声音、动画，一方面从道理上讲，与插入图片一样，另一方面它们占用网络带宽比较多，建议不是特别需要，不建议放置在网页上，特别不能直接放置在首页上！
声音文件现在一般在网页上使用得比较多的是mp3格式，这种格式相对而言，点用网络资源不是太多，而且音色、音质也不错。是现今使用的最多的网页声音格式。
在视频上，建议大家也是在十分必要时再放置到网页上，而且文件格式建议使用权Flash动画格式[课堂小结，作业练习，结束新课]
上面就是本节课需要我们掌握的内容。从信息技术角度上看，难度不大。每一个同学都很容易掌握。但是实际操作过程中，有不少地方需要我们慢慢摸索，积累经验。逐步达到填充网页内容得心应手的程度。下面我们通过《陕西风情》这个练习用网站来练习一下网页填充的全过程（学生开始上机操作练习）
28
【活动与探究与作业】请大家注意一下：我们在通常情况下，插入网页的图片大小采用多大比较合适？大家通过自己练习过程得出自己认为比较合理的尺寸。然后，小组讨论，来论证自己的结论。各小组把小组讨论的最终结果以貌取人E-mail的方式发送老师的信箱里，作为本课的作业另外，各小组根据各自的课题继续进行前期准备和资料搜集。
【课后反思】
网页美化来增色
【教学目标】
知识目标：掌握表单制作留言板的方法及页面动态效果的添加。 能力目标：文本框的使用；选项按钮的使用；下拉框的使用；复选框
的使用；文本区的使用
29
情感目标：体会交流合作中的情感
【教学重点】文本框的使用；选项按钮的使用；下拉框的使用；复选
框的使用；文本区的使用
【教学难点】文本框的使用；选项按钮的使用；下拉框的使用；复选
框的使用；文本区的使用
【教学方法】讲授法、演示法、上机实习法 【教学准备】用于演示的网站半成品 【教学过程】[创设情境，讲授新课]
在一个网站（或网页）中，非常需要有一个网站的建设者（或管理者）与浏览者（或访问者）之间相互交流的空间。那么怎么样来实现呢？
在一般网站（或网页）里大都有这方面的内容。如留言板、用户注册等，此类网页主要用来搜集用户信息，以方便于和用户沟通。留言板、用户注册等这些交互界面都可以利用表单来实现。这节课我们就来学习用表单来制作一个留言板。 一、背景图片和音乐
可以使用单一色彩或外部图片作背景；方法：“格式”—“背景”命令，选择合适的图片文件。音乐的添加方法同上：是“格式”—“背景”—“常规“设置背景音乐 二、用表单做留言板
在利用表单制作留言板要用到：文本框、选顶按钮、下拉框、复选框、文本区等基本元素。我们一一来学习它们的使用。
30
1.文本框：本框主要用于用户信息的填写，如：姓名、密码等。 2.选顶按钮：要用于让浏览者对所列选顶进行选择，这里是指单选按钮，如：留言板中的性别选项等。
3.下拉框：浏览者不输入文本，可直接从下拉框中选择自己的信息类别，如留言板中常见的学历、出生年月等选项。
4.复选框：有些信息不止一个选项，如浏览者的兴趣爱好等。此时可以通过复选框来实现。
5.文本区：留言板中有些区域需要浏览者自行输入内容，若内容比较多，单行文本框不适合，此时需要使用文本区。
表单中可以加入其他元素，可以根据实际情况选择使用。在表单属性中设置将用户填写的信息以网页或文本文档形式存放，表单的提交按钮才能生效。
[知识迁移，拓展思维]
这里我们以留言板为例，给大家介绍了文本框、选项按钮、下拉框、复选框、文本区的使用方法。其实这些制作留言板的基本元素完全可以根据我们各小组网站的需要加入到需要的位置。没必要过于呆板，我们学过的、掌握好的内容都可以根据我们的实际需要，灵活地使用。只有能够灵活使用已掌握知识人，才能有更好的创造性！ [课堂小结，作业练习，结束新课]
根据本节课的内容，设计或修改各小组的网站规划，并根据各自网站的内容及其特点，安排相关网页的布局。
【活动与探究】按照各自进度安排，各小组继续进行各自网站的建设。
31
【课后反思】
超级链接构网站
【教学目标】
知识目标：超级链接的使用 能力目标：
1．文字超级链接的设置；
32
2．按钮或图片超级链接的设置。 情感目标：
1．把握整体和个体的关系；
2．网站建设（引申到其他方面）的成就感。 【教学重点】
1. 文字超级链接的设置；2. 按钮或图片超级链接的设置 【教学难点】超级链接的设置
【教学方法】讲授法、演示法、上机实习法 【教学准备】
1．《陕西风情》网站的素材、网站结构；
2．各班的研究性学习小组及其课题，各小组成员的座位安排。 【教学过程】
[创设情境，讲授新课]
这节课我们还是以《陕西风情》为例，来看看怎么把我们在前面已经建立好的零散的网页组成一个整体，进而完成网站的建设。
在前面的学习过程中，我们已经把各个网页建设好了，但到目前为止，网页之间还没联系起来并组一个有机的整体（也就是网站），我们就来看看怎么样把零散的网页链接起来。 一、内部页面的链接 1． 首页链接到各个子页面
1)选中陕西风情按钮，右击，在弹出的快捷菜单中选择超链接。 2)在弹出的对话框中进行如下设置：
33
3)按照同样的方法，依次把wenhua.htm、minsu.htm链接到首页上的陕西文化和陕西民俗上。 2．各子页面返回到首页面
浏览者从首页进入子页面后，有时还需要从当前子页面再返回到主页中，因此，需要在各子页面中建立超级链接，返回到主页。 3．在新窗口中打开链接页面
陕西民俗页面包括十个超级，可以做成点击每个链接都在新的窗口展示内容。在陕西民俗页面中，选中第一怪：面条像裤带，右击，选择超链接；弹出的对话框中，选择链接地址1.htm，再点击目标框架。用同样的方法，完成陕西民俗到其他子页面的链接。 二、链接到外部网站
我们知道，在我们的网站中，可以建立链接到网站以外的地方，如：友情链接等。我们来看看，链接到外部网站怎么来做。
我们以首页中链接到清华大学为例，在首页加入清华大学网站的LOGO（后面简称清华大学图片，其实就是清华大学的校徽图案），作为链接外部网站的链接点
1. 选中清华大学图片，右击，选择超链接。
2. 在弹出的对话框里，在地址栏中输入清华大学网站的地址：http://www.tsinghua.edu.cn/，然后点击确定。 3.使用同样的方法，添加期货友情链接。 [知识迁移，拓展思维]
有关超级链接还有许多其他方式，如：链接到电子信箱；用书签
34
建立超链接„„等等，我们就在这节课里一一介绍了，大家可以参看有关参考资料来完成。 【活动与探究】
浏览我校网站，体验其中的页间导航设计，想一想网站中页间导航设计应考虑哪些因素。并交流自己的观点。 【课后反思】
网站发布与维护
【教学目标】
知识目标：掌握网站有发布、上传、推广及维护 能力目标：
1．网站空间的申请；2．网站的发布。3．CuteTtp的使用；4．网站推广的常用手段和网站维护的日常内容。
35
情感目标：利用学生发布自己亲手制作的网站，使学生借成就感，得到自我价值的实现。进而激发学习的积极性。 【教学重点】
1. 免费空间的申请；2. 网站的发布。 【教学难点】CuteFtp的使用
【教学方法】 讲授法、演示法、上机练习法 【教学准备】
1．学生准备好自己制作的网站（或网站的半成品）； 2．CuteFtp 5.0 XP
3．陕西风情网站的基本架构。
4．搜集网上提供的免费空间（如：虎翼网51.net等） 【教学过程】
[创设情境，讲授新课]我们各小组的网站已经开始制作，虽然大部分网站还只有雏形，但我们也应该开始着手准备把我们自己亲手制作的发布到互联网上，供网上的人们浏览了。这节课我们就给大家介绍一下有关网站发布的知识，供各小组参考，以便大家合理安排各自的进程。甚至现在就把我们网站的“半成品”现在就发布到互联网上。 一、网站的发布方式：
做好的的网站只有发布到网上，才能让更多的人访问。通过发布网站，我们可以向更多的人了解我们的网站所介绍的内容，还可以与浏览者进行交流。网站的发布一般有两种方式： 1）． 本地发布
36
在你的计算机上安装WEB服务器软件，并将计算机设置成WEB服务器，就可以使别的用户从自己的计算机上访问你的网站了。但是，这种方式需要将你的计算机长时间地处于连网在线状态。
这种方式对计算机的要求较高，而且，还需要你的计算机具备诸如：拥有静态IP地址、域名等等，一般情况下要完全达到要求很难，只是在一些特殊、临时的需要时才架设这种临时性的服务器。一般不提倡这样做！ 2）． 远程发布方式：
网上也有许多可以提供WEB服务的服务器（甚至是免费的！！！）。我们可以在这些服务器上，申请一块空间，将你的网站传送到该空间里，由他们来帮你发布。 2、申请免费空间：
网络上的空间实际上是一些大网站在其服务器上为其他用户提供的一个目录，并允许用户把自己制作的网站上传到该目录下，他们帮用户将网站发布出去。
使用免费的网络空间一般需要首先在提供空间的网站上注册用户，其方法就和我们申请免费电子邮箱类似。
下面我们就以比较著名的免费空间提供网站—（http://51.net/）为例，介绍免费空间的申请。我们在IE浏览器的地址栏内输入：http://51.net/。并在导航栏内选择免费网页选顶后将能看到申请免费空间的界面。在这里能明显地看到，虎翼网提供的免费空间支持的网站类型、空间大小、上传方式等基本信息。
37
而且很明显的位置就能看到，想申请免费空间是需要事先在虎翼网上注册用户的。其过程比较简单。 3．上传网站
现在一般的免费空间（远程服务器）大都支持，也提倡利用工具软件上传网站，我们就以大多数免费空间（远程服务器）支持的上传工具CuteFtp 5.0 XP为例，来上传我们制作的网站。
在我们打开CuteFtp 5.0 XP时，会弹出窗口，要求输入远程服务器相关信息（也就是前面我们申请成功后需要牢记的信息），这一点与我们课本上的描述不一致！！！请大家一定注意！
在CuteFtp 5.0 XP启动成功后，我们可以看到下面的界面在我们选中本地文件或文件夹后，上传按钮将呈绿色，我们就可以点击按钮，上 传网站的相关文件了。也可以使用类似Windows的拖放功能，直接将文件或文件夹拖到右侧的站点文件夹内来实现文件或文件夹的上传。
二、网站的推广与维护
下面我们来看看网站的推广和维护都需要我们怎么做。 1． 网站的推广
网站发布以后，还需要对其进行宣传，让更多的人知道它、访问它。如何有效地宣传推广自己的网站，在很大程度上决定了网站的访问量和知名度。
宣传网站的常用方法有：
1) 把你的网址告诉同学或朋友；2) 在BBS上留下网址或建立链接；
38
3) 与其他相关网站交换友情链接；4)在Internet上的搜索引擎中登记你的网址；„„„„ 2． 网站的管理
一般来讲，网站管理工作包括：
1) 硬件维护在网站所在服务器要求稳定可靠，出现故障及时排除。 2)软件升级服务器使用的软件需要及时升级和更新，以支持更多功能，提高系统安全性。
3)安全维护可以采用的措施有：安装防火墙、及时升级杀毒软件、清除非法用户、重要数据备份或加密等。
4)更新内容及时更新网站内容，保持新鲜感，必要时可以对页面设计做一次小的翻新。通过网站与浏览者建立联系，及时吸取网友的意见，对内容及时调整，也非常重要。 [课堂小结，作业练习，结束新课]
按各自小组的课题制作的网站（半成品也行）上传到申请的空间里。完成、完善各小组网站的建设。 【备课资料】
陕西九年义务教育教材《信息技术》八年级（下） http://www.51.net/CuteFtp 5.0 XP操作手册 【课后反思】
39
因篇幅问题不能全部显示，请点此查看更多更全内容