第四单元活动一 设计校园网站 第二课时 教案
文档属性
| 名称 | 第四单元活动一 设计校园网站 第二课时 教案 |  | |
| 格式 | doc | ||
| 文件大小 | 411.2KB | ||
| 资源类型 | 试卷 | ||
| 版本资源 | 沪科版 | ||
| 科目 | 信息技术（信息科技） | ||
| 更新时间 | 2024-05-28 10:24:22 | ||
图片预览
文档简介
中小学教育资源及组卷应用平台
第二课 规划网站及其制作工具
教学过程：
教学环节 教学内容 教师活动 学生活动 设计意图
激情导入 新课引入 我们已经了解了网站的信息组织方式，有些同学可能心生创建一个网站的想法。实现这个想法并不困难，但是创建一个让人看过之后印象深刻的网站并不容易。下面我们将从网站的主题和整体结构、版面布局两个方面去规划校园网站。 认真回忆网站信息的组织方式 引入新课题规划网站
新课教学 二、规划网站 1.规划网站主题和整体结构（1）确定网站的主题 网站的主题是网站要表达的主要信息的缩影。在规划网站的时候我们要考虑面对的是哪些人，建一个什么样的网站，呈现什么样的信息。例如张家界旅游网面向来张家界的游客，提供的是与张家界旅游相关的信息；湖南省教育厅网站面向全省的教师、家长和学生，提供的是全省教育新闻、政策、升学等相关信息。我们可以采用问卷调查的方式，对潜在的访问者进行调查，从而确定网站的主题及呈现的主要信息。在设置网站栏目时要注意紧扣网站主题，突出重点内容。仔细考虑网站要呈现的信息，对其进行合理安排。网站的栏目--般分为几个层次，处于下层的内容藏”得比较深，访问者往往需要经过几次操作才能见到。因此，网站中最重要的信息一-定要放在主页或一-级栏目中，或者在主页和其他网页上安排超链接，以便访问者容易找到相关信息。次要的信息可以放在二级或三级栏目中。（2）规划网站的结构根据已确定的网站主题对网站的结构进行规划，确定组成网站的各个网页文件的名称、标题。在设计网页时，需要对每一个网页的名称及呈现的信息进行反复地筛选和归类，这样才能方便访问者的阅读。例如湖南教育网是湖南省教育厅主办的全省教育门户网站，如图4-1-2所示，网站开设了首页、资讯、社区、专题、频道、资源六大栏目，每个大栏目又包含多个次级栏目。在设计校园网站时，也可以采用这种方式规划网站的结构，将网站的栏目转化为网站的子页。例如“我爱我校”的网站组织结构图，该网站由两层结构组成：第-层是主页，它提供了与-级子页（子页1至子页4）的链接，子页之间相互独立。根据需要，复杂些的网站甚至有第三层、第四层，乃至更多层的子页，链接关系也更复杂。绘制网站的组织结构图，便于理清各层各个网页之间的关系，也便于制作网站时进行对照检查。网站与网页一个网站可能只包含一个网页，也可能包含几十个甚至数以百计的网页。网站与网页的关系就像一本书与书中各页的关系，是整体与局部的关系。“主页”有时也称为首页，是网站的第一个页面，相当于书的封面，“主页”上的栏目相当于书的目录。主页的文件名通常是index.htm或default.htm。2.规划各网页的版面有了网站的组织结构图，相当于搭出了网站的整体框架。我们还需要对这一框架进行“软装潢”，也就是确立网站的整体风格，安排各个页面呈现的具体信息。这包括各个网页中文字、图片等元素的位置设计，页面背景的设置，整体色彩的选取。（1）确定网站的布局图）中街讯本的“亚中国文玉移时广明来0时在网站设计中，页面的布局也很重要。主页上栏目、文字、以及图片的位置都是需要仔细考虑的内容。一般情况下网站的结构有标题正文居中型、框架结构、内容半包围型、主题突出型等布局。例如，采用“标题正文居中型”的布局结构，网站中的各个网页采用上中下的形式，上部是网页的标题，中部是网页呈现的主要信息，下部是有关网站制作的相关信息。网页布局没有固定形式，也可以根据我们自己的想法进行自由设计。但是设计页面布局时必须突出页面传达的重点信息，将页面中的重要信息放在明显的位置，然后再考虑次要信息的位置。（2）设计各个网页在遵循网站页面整体布局结构的基础上，对每一-张网 页进行精细的设计。这个阶段主要是对每一张网页的背景、文字、图片、超链接等元素的布局、色彩等进行设计。设计各个网页时，可以使用文字处理软件、演示文稿软件或者是手绘的方式画出各个网页的草图，在图中标注出每个部分的设计参数。例如“我爱我校”网站的主页和其中一个子页的设计草图。设计网页时，需要注意页面的平衡、呼应、对比。A、平衡：指页面的图片、文字的视觉分量在左右、上下几个方位基本相等，分布匀称。色彩表现也要平衡，给人以协调的感觉。B、呼应：使同种元素同时出现在不同的地方，形成相互联系。C、对比：利用不同的色彩线条等元素相互并置，造成页面的多种变化，达到丰富视觉的效果。 ①规划网站主题和整体结构。 教师组织学生以小组为单位，设计一个调查问卷，通过走访学生、家长和教师，了解他们对校园网站的期望。在收集第一手资料的前提下，教师可以引导学 生分析需求，提炼网站主题；兼顾网站主要访问群体的兴趣和浏览习惯。 ②规划各网页的版面。 组织学生讨论，校园网主题下各版块的主要内容，并将结果填写在书本的空白处。指导学生搜索、浏览不同风格的网站，在对网站风格有一个感性认识的基础 上，要求学生以图示的方式绘制每个网页的布局，并分别标注出主题文字、内容文字区域、图片的位置，标注出背景色等一些装饰性或有特效的内容。教学时引 导学生确立自己网站的整体风格，注意要有自己的特色，而不是单纯地对范例进 行模仿 教学设计分为两个环节，分别是规 划网站主体和整体结构以及规划各网页的版面。前者让学生围绕网站的主题和名 称进行小组讨论交流，确定网站的主题，并拟定网站的名称。让学生围绕自己拟定的主题，确定网站需要分成的版块，以及每个版块中准备展示的内容。
三、认识网站制作工具 最早设计者使用HTML（超文本标记语言）制作网站，HTML虽然能标识文字、图片、音频、视频等多种媒体信息，但是对于初学者来说，在短时间内记住所有的HTML标识符号并创建一个网站，难度非常大。现在有一些网页制作工具，可以采用“所见即所得”的方法制作网页，这些工具有FrontPage、Dreamweaver、iH5等。FrontPage是一个比较方便的网页开发工具，它提供了多种网页制作模板，大大降低了网站制作的难度，其操作简单，容易上手，使初学者可以在极短的时间内创建-个完整的网站。FrontPage的界面，与Word类似，具有菜单栏、工具栏等栏目。主编辑区是创建网页的主要区域，它有三种编辑模式，分别是“设计”“拆分”“代码”，当前显示的是“设计”模式。点击“预览"按钮，可以查看当前网页在浏览器中显示的效果。 学习 FrontPage 软件的操作时，教师可以引导学生将 FrontPage 与以前学习过的应用软件界面进行比较，组织学生讨论，分析软件的特点。对 FrontPage 界面中独特的内容，通过实例进行讲解，对其界面特征进行总结 了解网站制作工具。教材将 FrontPage 与 Word 进行类比。将 Word 中的一些工具的使用方法迁移到网页制作上，实现了知识的迁移。
活动解析 （2）P79“说说做做”。 ①教师带领学生通过网站实例，了解其他的互联网信息的组织方式。 ②略。 （3）P80“说说做做”。 略。 （4）P81“说说做做”。 ①“主题和栏目的考虑要点”栏目中的名称可以有一定的规范。 4142 ②略 （5）P83“说说做做”。 教师指引学生访问当地的博物馆、健康委员会等网站，然后给予学生提示， 让学生总结这些网站在网站上标题、内容、超链接等元素的位置和设计上的特点。 （6）P85“说说做做”。 教师引导学生根据学习到的布局结构，设计每张网页的布局。 （7）P86“说说做做”。 略。 （8）P89“说说做做”。 略。 （9）P89“数字化学习”。 类似的网页制作软件还有：SharePoint Design、Dreamweaver。 让学生自由开展讨论“说说做做”、“数字化学习”自动学习。 让学生展开自主探索和相互交流提供空间。
小结 规划网站 ①规划网站主题和整体结构。 设计一个调查问卷，通过走访学生、 家长和教师，了解他们对校园网站的期望。在收集第一手资料的前提下，分析需求，概括网站主题；兼顾网站主要访问群体的兴趣和浏览习惯。 ②规划各网页的版面。 校园网主题下板块的主要内容，并将结果填写在书本的空白处。 搜索、浏览不同风格的网站，在对网站风格有一个感性认识的基础上，以图示的方式绘制每个网页的布局，并分别标注出主题文字、内容文字区域、图片的位置，标注出背景色等一些装饰性或有特效的内容确立自己网站的整体风格。 认知网站制作工具 学习 FrontPage 软件的操作时，将 FrontPage 与以前学习过的应用软件界面进行比较，分析软件的特点。对 FrontPage 界面中独特的内容，通过实例进行讲解，对其界面特征进行总结。 让学生同教师一道回忆本堂课所学知识要点 回顾本活动要点
作业 1、网站与网页的关系就像一本书与书中各页的关系，是整体与局部的关系。2、“主页”有时也称为（首页），是网站的第一个页面，相当于书的封面，“主页”上的栏目相当于书的目录。主页的文件名通常是（index.htm或default.htm）。3、最早设计者使用（HTML（超文本标记语言））制作网站。4、（FrontPage）是一个比较方便的网页开发工具，
板书设计：
第二课时 规划网站及其制作工具
二、规划网站
1.规划网站主题和整体结构
2.规划各网页的版面
三、认识网站制作工具
活动解析
小结
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://21世纪教育网(www.21cnjy.com)
" 21世纪教育网(www.21cnjy.com)
第二课 规划网站及其制作工具
教学过程：
教学环节 教学内容 教师活动 学生活动 设计意图
激情导入 新课引入 我们已经了解了网站的信息组织方式，有些同学可能心生创建一个网站的想法。实现这个想法并不困难，但是创建一个让人看过之后印象深刻的网站并不容易。下面我们将从网站的主题和整体结构、版面布局两个方面去规划校园网站。 认真回忆网站信息的组织方式 引入新课题规划网站
新课教学 二、规划网站 1.规划网站主题和整体结构（1）确定网站的主题 网站的主题是网站要表达的主要信息的缩影。在规划网站的时候我们要考虑面对的是哪些人，建一个什么样的网站，呈现什么样的信息。例如张家界旅游网面向来张家界的游客，提供的是与张家界旅游相关的信息；湖南省教育厅网站面向全省的教师、家长和学生，提供的是全省教育新闻、政策、升学等相关信息。我们可以采用问卷调查的方式，对潜在的访问者进行调查，从而确定网站的主题及呈现的主要信息。在设置网站栏目时要注意紧扣网站主题，突出重点内容。仔细考虑网站要呈现的信息，对其进行合理安排。网站的栏目--般分为几个层次，处于下层的内容藏”得比较深，访问者往往需要经过几次操作才能见到。因此，网站中最重要的信息一-定要放在主页或一-级栏目中，或者在主页和其他网页上安排超链接，以便访问者容易找到相关信息。次要的信息可以放在二级或三级栏目中。（2）规划网站的结构根据已确定的网站主题对网站的结构进行规划，确定组成网站的各个网页文件的名称、标题。在设计网页时，需要对每一个网页的名称及呈现的信息进行反复地筛选和归类，这样才能方便访问者的阅读。例如湖南教育网是湖南省教育厅主办的全省教育门户网站，如图4-1-2所示，网站开设了首页、资讯、社区、专题、频道、资源六大栏目，每个大栏目又包含多个次级栏目。在设计校园网站时，也可以采用这种方式规划网站的结构，将网站的栏目转化为网站的子页。例如“我爱我校”的网站组织结构图，该网站由两层结构组成：第-层是主页，它提供了与-级子页（子页1至子页4）的链接，子页之间相互独立。根据需要，复杂些的网站甚至有第三层、第四层，乃至更多层的子页，链接关系也更复杂。绘制网站的组织结构图，便于理清各层各个网页之间的关系，也便于制作网站时进行对照检查。网站与网页一个网站可能只包含一个网页，也可能包含几十个甚至数以百计的网页。网站与网页的关系就像一本书与书中各页的关系，是整体与局部的关系。“主页”有时也称为首页，是网站的第一个页面，相当于书的封面，“主页”上的栏目相当于书的目录。主页的文件名通常是index.htm或default.htm。2.规划各网页的版面有了网站的组织结构图，相当于搭出了网站的整体框架。我们还需要对这一框架进行“软装潢”，也就是确立网站的整体风格，安排各个页面呈现的具体信息。这包括各个网页中文字、图片等元素的位置设计，页面背景的设置，整体色彩的选取。（1）确定网站的布局图）中街讯本的“亚中国文玉移时广明来0时在网站设计中，页面的布局也很重要。主页上栏目、文字、以及图片的位置都是需要仔细考虑的内容。一般情况下网站的结构有标题正文居中型、框架结构、内容半包围型、主题突出型等布局。例如，采用“标题正文居中型”的布局结构，网站中的各个网页采用上中下的形式，上部是网页的标题，中部是网页呈现的主要信息，下部是有关网站制作的相关信息。网页布局没有固定形式，也可以根据我们自己的想法进行自由设计。但是设计页面布局时必须突出页面传达的重点信息，将页面中的重要信息放在明显的位置，然后再考虑次要信息的位置。（2）设计各个网页在遵循网站页面整体布局结构的基础上，对每一-张网 页进行精细的设计。这个阶段主要是对每一张网页的背景、文字、图片、超链接等元素的布局、色彩等进行设计。设计各个网页时，可以使用文字处理软件、演示文稿软件或者是手绘的方式画出各个网页的草图，在图中标注出每个部分的设计参数。例如“我爱我校”网站的主页和其中一个子页的设计草图。设计网页时，需要注意页面的平衡、呼应、对比。A、平衡：指页面的图片、文字的视觉分量在左右、上下几个方位基本相等，分布匀称。色彩表现也要平衡，给人以协调的感觉。B、呼应：使同种元素同时出现在不同的地方，形成相互联系。C、对比：利用不同的色彩线条等元素相互并置，造成页面的多种变化，达到丰富视觉的效果。 ①规划网站主题和整体结构。 教师组织学生以小组为单位，设计一个调查问卷，通过走访学生、家长和教师，了解他们对校园网站的期望。在收集第一手资料的前提下，教师可以引导学 生分析需求，提炼网站主题；兼顾网站主要访问群体的兴趣和浏览习惯。 ②规划各网页的版面。 组织学生讨论，校园网主题下各版块的主要内容，并将结果填写在书本的空白处。指导学生搜索、浏览不同风格的网站，在对网站风格有一个感性认识的基础 上，要求学生以图示的方式绘制每个网页的布局，并分别标注出主题文字、内容文字区域、图片的位置，标注出背景色等一些装饰性或有特效的内容。教学时引 导学生确立自己网站的整体风格，注意要有自己的特色，而不是单纯地对范例进 行模仿 教学设计分为两个环节，分别是规 划网站主体和整体结构以及规划各网页的版面。前者让学生围绕网站的主题和名 称进行小组讨论交流，确定网站的主题，并拟定网站的名称。让学生围绕自己拟定的主题，确定网站需要分成的版块，以及每个版块中准备展示的内容。
三、认识网站制作工具 最早设计者使用HTML（超文本标记语言）制作网站，HTML虽然能标识文字、图片、音频、视频等多种媒体信息，但是对于初学者来说，在短时间内记住所有的HTML标识符号并创建一个网站，难度非常大。现在有一些网页制作工具，可以采用“所见即所得”的方法制作网页，这些工具有FrontPage、Dreamweaver、iH5等。FrontPage是一个比较方便的网页开发工具，它提供了多种网页制作模板，大大降低了网站制作的难度，其操作简单，容易上手，使初学者可以在极短的时间内创建-个完整的网站。FrontPage的界面，与Word类似，具有菜单栏、工具栏等栏目。主编辑区是创建网页的主要区域，它有三种编辑模式，分别是“设计”“拆分”“代码”，当前显示的是“设计”模式。点击“预览"按钮，可以查看当前网页在浏览器中显示的效果。 学习 FrontPage 软件的操作时，教师可以引导学生将 FrontPage 与以前学习过的应用软件界面进行比较，组织学生讨论，分析软件的特点。对 FrontPage 界面中独特的内容，通过实例进行讲解，对其界面特征进行总结 了解网站制作工具。教材将 FrontPage 与 Word 进行类比。将 Word 中的一些工具的使用方法迁移到网页制作上，实现了知识的迁移。
活动解析 （2）P79“说说做做”。 ①教师带领学生通过网站实例，了解其他的互联网信息的组织方式。 ②略。 （3）P80“说说做做”。 略。 （4）P81“说说做做”。 ①“主题和栏目的考虑要点”栏目中的名称可以有一定的规范。 4142 ②略 （5）P83“说说做做”。 教师指引学生访问当地的博物馆、健康委员会等网站，然后给予学生提示， 让学生总结这些网站在网站上标题、内容、超链接等元素的位置和设计上的特点。 （6）P85“说说做做”。 教师引导学生根据学习到的布局结构，设计每张网页的布局。 （7）P86“说说做做”。 略。 （8）P89“说说做做”。 略。 （9）P89“数字化学习”。 类似的网页制作软件还有：SharePoint Design、Dreamweaver。 让学生自由开展讨论“说说做做”、“数字化学习”自动学习。 让学生展开自主探索和相互交流提供空间。
小结 规划网站 ①规划网站主题和整体结构。 设计一个调查问卷，通过走访学生、 家长和教师，了解他们对校园网站的期望。在收集第一手资料的前提下，分析需求，概括网站主题；兼顾网站主要访问群体的兴趣和浏览习惯。 ②规划各网页的版面。 校园网主题下板块的主要内容，并将结果填写在书本的空白处。 搜索、浏览不同风格的网站，在对网站风格有一个感性认识的基础上，以图示的方式绘制每个网页的布局，并分别标注出主题文字、内容文字区域、图片的位置，标注出背景色等一些装饰性或有特效的内容确立自己网站的整体风格。 认知网站制作工具 学习 FrontPage 软件的操作时，将 FrontPage 与以前学习过的应用软件界面进行比较，分析软件的特点。对 FrontPage 界面中独特的内容，通过实例进行讲解，对其界面特征进行总结。 让学生同教师一道回忆本堂课所学知识要点 回顾本活动要点
作业 1、网站与网页的关系就像一本书与书中各页的关系，是整体与局部的关系。2、“主页”有时也称为（首页），是网站的第一个页面，相当于书的封面，“主页”上的栏目相当于书的目录。主页的文件名通常是（index.htm或default.htm）。3、最早设计者使用（HTML（超文本标记语言））制作网站。4、（FrontPage）是一个比较方便的网页开发工具，
板书设计：
第二课时 规划网站及其制作工具
二、规划网站
1.规划网站主题和整体结构
2.规划各网页的版面
三、认识网站制作工具
活动解析
小结
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://21世纪教育网(www.21cnjy.com)
" 21世纪教育网(www.21cnjy.com)