《网站主页的设计》教学设计

萌到你眼炸
544次浏览
2020年08月02日 06:35
最佳经验
本文由作者推荐

营销方案范文-世界领土面积排名




《网站主页的设计》教学设计
浙江绍兴市第一中学信息处 董烨华
一、教材分析

本节课讲授浙江教育出版社《信息技术基础》第 六章“网页的设计与制作”的相关,并
根据《浙江省普通高中新课程实验信息技术学科教学指导意见》进 行了适当设计,教学侧重
于让学生掌握网站的策划与构思和熟练掌握简单网页的设计与制作。

二、学情分析

学生已经会收集和整理素材,掌握了用FrontPag e制作网页的基本操作,对网站的策划
与构思有了一定的了解,但网站创建的知识以及网站策划构思的实 践比较欠缺,另外学生现
有知识水平存在一定差异。

三、教学目标

知识与技能:能较熟练地运用表格实现网页布局;知道创建网站的一般过程,了解一些
主页设计的知识;初步掌握网站的策划与构思。

过程与方法:通过自主探究 和小组合作完成学习任务,掌握一些探究学习的方法,培养
与他人协作、交流的意识和能力。

情感、态度与价值观:通过网站主页设计,激发学生的创作欲望,提高学习信息技术的
兴趣 和愿望;通过教师提供的创作背景信息,使学生更关注气候变化对人类发展的影响,增
强社会责任感。

四、教学重难点

重点:学会运用表格实现网页布局,初步掌握网站的策划与构思。

难点:如何在主页制作中实现自己的网站设计构思。

五、教学过程

1.教学引入,学习准备

教师指导学生访问课堂学习网站(如图1),然后介绍网站的创作构思与特点。

师: 这是老师为课堂学习专门设计制作的一个网站,请同学们从“名称贴切、主题鲜明、
内容丰富、结构清晰 、界面友好美观”五个角度,给网站做个评价,认为都满意就赶快伸出
五个手指头。





学生们高举手臂,伸出五个手指。

师:谢谢大家的支持,你们的认可是我创作的动力。

师: 通过前段时间的学习,我们已经较好地掌握了素材收集与整理的方法;掌握了一些
利用FrontPag e软件做网页的基本操作;在欣赏优秀网站的基础上,对网站的策划与构思有
了一定了解。这节课,我们 将跟随着学习网站的导航栏,一起揭开创建个人网站的第一页─
─设计制作网站主页。

师:先来玩一个拼图游戏吧。





图1 学习网站首页 图2 学习参考页
设计意图:用学习网站吸引学生的注意力,使其迅速进入课堂学习状态。通过学生评价
老师的网站设计, 使学生对网站策划构思中要考虑的因素有进一步认识。

2.以趣激学,化解难点

学生浏览学习网站中“拼图游戏”活动要求。

活动内容:将分割成小块的图片素材插入到教师预先设计好的网页中,完成拼图。







图3“威尼斯的泪”网站主页 图4 “威尼斯的泪”表格框架

师:老师这里有个完工的网站主页(如图3),网站 主题是关于拯救水城威尼斯的,网
站名称是“威尼斯的泪”,页面十分简洁,用一张图片吸引观众目光, 导航栏设置在右下处,
四个超链接对应网站的四块内容,这种网页布局可归为封面型的布局类型,在个人 主页和企
业网站设计中较常用(具体可参考学习网站)。请大家仔细看这个网页,接着我们将用它的半成品来玩拼图(如图4)。

教师用FrontPage软件打开半成品网页。

师:同学们看到网页上都有些什么?

生:哦,表格,原来刚才的网页是用这样的表格来实现布局的。

师:对了,那再仔细观察一下,这里到底用了几张表格。

生:两张,三张……

师:答案是五张表格,最外面一张虚线显示的表格将整体分为上下两大块,然后表格里
面套表格,最终将所有网页内容,用一个个单元格定位。

师:现在网页上半部分的九个单元格就是留给大家来完成拼图的,加油,看谁最快完成
提交。

学生下载素材,尝试着完成拼图;教师巡视,了解学生的制作过程。学生在制作过程会
碰到 一个主要问题“如何将图片拼得天衣无缝”,涉及到表格的属性设置这一知识点,要能
够想到将表格边框 设置为隐藏,将表格单元格边距和间距值都设置为0。

师:已经有同学完成拼图提交了,某某同学是最快完成的,让我们一起来看一下他们的
拼图吧。





教师根据学生完成情况, 选择不同的教学,如果已经有学生很好地完成了拼图,就请学
生来讲解、演示;如学生都没有很好地解决 问题,教师可以通过提问“五张表格中最外一张
用虚线显示的表格在预览中是否能看到它?”“表格边框 隐藏是怎么实现的?”“表格属性
中还能设置什么?”等问题,引导学生找到答案。

师:只有想不到,没有做不到,网页布局,表格帮你轻松搞定。

设计意 图:以一个熟悉的游戏任务引导学生探究、学习、掌握表格布局的知识。同时,
任务素材又是后续学习任 务“主页设计”的一个范例,帮助化解学习难点。

3.创设情景,引起思考

师:再次欣赏这幅拼图作品,不知道摄影师有没给它取过名,就让我们来给它设计个名
称吧。

生:“大海,大海”,“港湾”,就用“威尼斯的泪”……

师:请大家分别用“大海,大海”和“威尼斯的泪” 做名称来看这幅作品,不知道你
的脑海里会浮现些什么?

生:很不一样。

师:作品的名称十分重要,它能够引导观众欣赏的视角,我们在进行网站策划构思的时
候,一定要给自己的网站设计好名称。

师:拼图照片源自一则反映威尼斯遭 受水淹的新闻报道,由于气候变化,威尼斯经常遭
受水灾,人们用葬礼的形式倡议拯救威尼斯。在学习网 站还有“‘2012’离人类还有多远?”
和“哥本哈根气候大会”等背景资料,提供这些材料是为了引 起大家对“气候变化对人类社
会的影响”这一社会议题的思考,同时我们将借助网页技术来发出自己的声 音。

师:让我们一起进入主页设计活动环节。

设计意图 :通过名称设计,揭示网页作为一种信息表达技术的价值,培养学生的创作意
识。用热门新闻和议题创设 情景,激发学生创作欲望和增强社会责任感。

4.任务驱动,合作探究

活动内容:根据背景资料,以同桌同学为小组,进行网站创建的策划与构思,形成网站
主页 的初步框架,以完成主页表格框架或绘制草图等形式呈现结果。





师:主页设计是网站设计制作的一个重心,设计的完成如同写文章列好了提 纲,将对整
个网站的制作过程和完成质量起重要影响。接下来,小组同学要发扬团队协作精神,一起来< br>完成学习任务。这可能是我们第一次进行网站主页的设计,所以老师给大家的建议是“从模
仿做起 ,善于吸收他人经验”,在学习网站中有“网站创建流程”“网站主页设计”“主页
模版欣赏”等内容可 供参考。

教师将“网站创建流程”(如图2)和“威尼斯的泪”表格框架网页(如图 4)投影在
屏幕上,作为重点提示;了解小组合作情况、操作进度,解决技术问题,并对技术相对薄弱< br>的小组重点帮助指导。小组同学合作协商,进行网站的策划与构思,形成网站主页的初步框
架。

设计意图:通过任务驱动、小组合作探究,让学生在实践中体会网站创建和主页设计的
知识,培养协作、交流的意识和能力。

5.交流评价,分析提高

师:在刚才的学习活动中,大家表现很好,一些小组中,同学们的讨论很激烈,发挥了
各自 特长,任务完成体现了1+1>2的效果;下面我们一起围绕以下三点来交流学习成果:网
站名称响亮有 特点、栏目设置有趣且反映主题、页面布局美观可实现。老师会请几组同学派
代表上台来介绍自己的设计 ,其他同学随时准备发表观点。

设计意图:通过交流评价学习成果,有助于学习小组 的思维与智慧被整个群体所共享,
形成共享的、更高级的理解,同时在评价中获得成就感。

6.课堂小结,延伸教学

师:这节课我们围绕设计网站主页,实践探讨 了网站的策划构思和实现的过程,接下来
的几节课我们将进一步完善设计,学习新知识以至完成整个网站 。网页技术作为一种信息表
达的技术,其真正价值的体现在如何更新颖合理地表达一个有意义的主题或内 容,希望同学
们在日常学习过程中注重观察,多积累一些网页制作的知识,提升技术素养。

六、教学反思

在让学生围绕某个主题进行网站设计制作时,会碰到这样 一些情况:(1)找不到头绪,
无从下手;(2)想到一点做一点,结果做到一半再也做不下去;(3) 网站最终完成了,但
却暴露出栏目设置不合理,内容无法体现主题等问题。显然,学生对网站策划构思的 知识掌




握不够,我在教学设计中融入了三种 方法来加强引导:(1)作品欣赏,俗话说:“熟读唐
诗三百首,不会做诗也会吟”,模仿是创作入门的 重要途径;(2)开展构思协商,通过小
组合作和全体交流讨论,有助于教师和每位学生的思维与智慧被 整个群体所共享,形成共享
的、更高级的理解。(3)进行作品评价,在自评和互评中反思自己策划构思 的不足,发现
自己和他人设计的新颖之处,使学生获得满足感和成就感。









遇到失意伤心事,多想有 一个懂你的人来指点迷津,因他懂你,会以我心,换你心,站在你的位置上思虑,为你排优解难。
一个人,来这世间,必须懂得一些人情事理,才能不断成长。就像躬耕于陇亩的农人,必须懂得土地与种子的情怀 ,才能有所收获。
一个女子,一生所求,莫过于找到一个懂她的人,执手白头,相伴终老。
即使芦花暖鞋,菊花枕头,也觉温暖;即使粗食布衣,陋室简静,也觉舒适,一句“懂你”,叫人无 怨无悔,愿以自己的一生来交付。
懂得是彼此的欣赏,是灵魂的轻唤,是惺惺相惜,是爱,是暖, 是彼此的融化;是走一段很远的路,蓦然回首却发现,我依然在你的视线里;是回眸相视一笑的无言;是一条偏僻 幽静的
小路,不显山,不露水,路边长满你喜爱的花草,静默无语却馨香盈怀,而路的尽头,便是通达你 心灵的小屋……
瑟瑟严冬,窗外雪飘,絮絮自语说了这多,你可懂我了吗?若你知晓,无需说话, 只报一声心灵的轻叹,那,便是我的花开春暖。
你相不相信,人生有一种念想,不求奢华不求结果,不求你在我身边,只愿有一种陪伴暖在心灵,那,便是懂得。
有人懂得是一种幸福,懂得别人是一种襟怀,互为懂得是一种境界。
懂得,真好!


















《网站主页的设计》教学设计
浙江绍兴市第一中学信息处 董烨华
一、教材分析

本节课讲 授浙江教育出版社《信息技术基础》第六章“网页的设计与制作”的相关,并
根据《浙江省普通高中新课 程实验信息技术学科教学指导意见》进行了适当设计,教学侧重
于让学生掌握网站的策划与构思和熟练掌 握简单网页的设计与制作。

二、学情分析

学生已经会收 集和整理素材,掌握了用FrontPage制作网页的基本操作,对网站的策划
与构思有了一定的了解 ,但网站创建的知识以及网站策划构思的实践比较欠缺,另外学生现
有知识水平存在一定差异。

三、教学目标

知识与技能:能较熟练地运用表格实现网页 布局;知道创建网站的一般过程,了解一些
主页设计的知识;初步掌握网站的策划与构思。

过程与方法:通过自主探究和小组合作完成学习任务,掌握一些探究学习的方法,培养
与他 人协作、交流的意识和能力。

情感、态度与价值观:通过网站主页设计,激发学生的 创作欲望,提高学习信息技术的
兴趣和愿望;通过教师提供的创作背景信息,使学生更关注气候变化对人 类发展的影响,增
强社会责任感。

四、教学重难点

重点:学会运用表格实现网页布局,初步掌握网站的策划与构思。

难点:如何在主页制作中实现自己的网站设计构思。

五、教学过程

1.教学引入,学习准备

教师指导学生访问课堂学习网站(如图1),然后介绍网站的创作构思与特点。

师: 这是老师为课堂学习专门设计制作的一个网站,请同学们从“名称贴切、主题鲜明、
内容丰富、结构清晰 、界面友好美观”五个角度,给网站做个评价,认为都满意就赶快伸出
五个手指头。





学生们高举手臂,伸出五个手指。

师:谢谢大家的支持,你们的认可是我创作的动力。

师: 通过前段时间的学习,我们已经较好地掌握了素材收集与整理的方法;掌握了一些
利用FrontPag e软件做网页的基本操作;在欣赏优秀网站的基础上,对网站的策划与构思有
了一定了解。这节课,我们 将跟随着学习网站的导航栏,一起揭开创建个人网站的第一页─
─设计制作网站主页。

师:先来玩一个拼图游戏吧。





图1 学习网站首页 图2 学习参考页
设计意图:用学习网站吸引学生的注意力,使其迅速进入课堂学习状态。通过学生评价
老师的网站设计, 使学生对网站策划构思中要考虑的因素有进一步认识。

2.以趣激学,化解难点

学生浏览学习网站中“拼图游戏”活动要求。

活动内容:将分割成小块的图片素材插入到教师预先设计好的网页中,完成拼图。







图3“威尼斯的泪”网站主页 图4 “威尼斯的泪”表格框架

师:老师这里有个完工的网站主页(如图3),网站 主题是关于拯救水城威尼斯的,网
站名称是“威尼斯的泪”,页面十分简洁,用一张图片吸引观众目光, 导航栏设置在右下处,
四个超链接对应网站的四块内容,这种网页布局可归为封面型的布局类型,在个人 主页和企
业网站设计中较常用(具体可参考学习网站)。请大家仔细看这个网页,接着我们将用它的半成品来玩拼图(如图4)。

教师用FrontPage软件打开半成品网页。

师:同学们看到网页上都有些什么?

生:哦,表格,原来刚才的网页是用这样的表格来实现布局的。

师:对了,那再仔细观察一下,这里到底用了几张表格。

生:两张,三张……

师:答案是五张表格,最外面一张虚线显示的表格将整体分为上下两大块,然后表格里
面套表格,最终将所有网页内容,用一个个单元格定位。

师:现在网页上半部分的九个单元格就是留给大家来完成拼图的,加油,看谁最快完成
提交。

学生下载素材,尝试着完成拼图;教师巡视,了解学生的制作过程。学生在制作过程会
碰到 一个主要问题“如何将图片拼得天衣无缝”,涉及到表格的属性设置这一知识点,要能
够想到将表格边框 设置为隐藏,将表格单元格边距和间距值都设置为0。

师:已经有同学完成拼图提交了,某某同学是最快完成的,让我们一起来看一下他们的
拼图吧。





教师根据学生完成情况, 选择不同的教学,如果已经有学生很好地完成了拼图,就请学
生来讲解、演示;如学生都没有很好地解决 问题,教师可以通过提问“五张表格中最外一张
用虚线显示的表格在预览中是否能看到它?”“表格边框 隐藏是怎么实现的?”“表格属性
中还能设置什么?”等问题,引导学生找到答案。

师:只有想不到,没有做不到,网页布局,表格帮你轻松搞定。

设计意 图:以一个熟悉的游戏任务引导学生探究、学习、掌握表格布局的知识。同时,
任务素材又是后续学习任 务“主页设计”的一个范例,帮助化解学习难点。

3.创设情景,引起思考

师:再次欣赏这幅拼图作品,不知道摄影师有没给它取过名,就让我们来给它设计个名
称吧。

生:“大海,大海”,“港湾”,就用“威尼斯的泪”……

师:请大家分别用“大海,大海”和“威尼斯的泪” 做名称来看这幅作品,不知道你
的脑海里会浮现些什么?

生:很不一样。

师:作品的名称十分重要,它能够引导观众欣赏的视角,我们在进行网站策划构思的时
候,一定要给自己的网站设计好名称。

师:拼图照片源自一则反映威尼斯遭 受水淹的新闻报道,由于气候变化,威尼斯经常遭
受水灾,人们用葬礼的形式倡议拯救威尼斯。在学习网 站还有“‘2012’离人类还有多远?”
和“哥本哈根气候大会”等背景资料,提供这些材料是为了引 起大家对“气候变化对人类社
会的影响”这一社会议题的思考,同时我们将借助网页技术来发出自己的声 音。

师:让我们一起进入主页设计活动环节。

设计意图 :通过名称设计,揭示网页作为一种信息表达技术的价值,培养学生的创作意
识。用热门新闻和议题创设 情景,激发学生创作欲望和增强社会责任感。

4.任务驱动,合作探究

活动内容:根据背景资料,以同桌同学为小组,进行网站创建的策划与构思,形成网站
主页 的初步框架,以完成主页表格框架或绘制草图等形式呈现结果。





师:主页设计是网站设计制作的一个重心,设计的完成如同写文章列好了提 纲,将对整
个网站的制作过程和完成质量起重要影响。接下来,小组同学要发扬团队协作精神,一起来< br>完成学习任务。这可能是我们第一次进行网站主页的设计,所以老师给大家的建议是“从模
仿做起 ,善于吸收他人经验”,在学习网站中有“网站创建流程”“网站主页设计”“主页
模版欣赏”等内容可 供参考。

教师将“网站创建流程”(如图2)和“威尼斯的泪”表格框架网页(如图 4)投影在
屏幕上,作为重点提示;了解小组合作情况、操作进度,解决技术问题,并对技术相对薄弱< br>的小组重点帮助指导。小组同学合作协商,进行网站的策划与构思,形成网站主页的初步框
架。

设计意图:通过任务驱动、小组合作探究,让学生在实践中体会网站创建和主页设计的
知识,培养协作、交流的意识和能力。

5.交流评价,分析提高

师:在刚才的学习活动中,大家表现很好,一些小组中,同学们的讨论很激烈,发挥了
各自 特长,任务完成体现了1+1>2的效果;下面我们一起围绕以下三点来交流学习成果:网
站名称响亮有 特点、栏目设置有趣且反映主题、页面布局美观可实现。老师会请几组同学派
代表上台来介绍自己的设计 ,其他同学随时准备发表观点。

设计意图:通过交流评价学习成果,有助于学习小组 的思维与智慧被整个群体所共享,
形成共享的、更高级的理解,同时在评价中获得成就感。

6.课堂小结,延伸教学

师:这节课我们围绕设计网站主页,实践探讨 了网站的策划构思和实现的过程,接下来
的几节课我们将进一步完善设计,学习新知识以至完成整个网站 。网页技术作为一种信息表
达的技术,其真正价值的体现在如何更新颖合理地表达一个有意义的主题或内 容,希望同学
们在日常学习过程中注重观察,多积累一些网页制作的知识,提升技术素养。

六、教学反思

在让学生围绕某个主题进行网站设计制作时,会碰到这样 一些情况:(1)找不到头绪,
无从下手;(2)想到一点做一点,结果做到一半再也做不下去;(3) 网站最终完成了,但
却暴露出栏目设置不合理,内容无法体现主题等问题。显然,学生对网站策划构思的 知识掌




握不够,我在教学设计中融入了三种 方法来加强引导:(1)作品欣赏,俗话说:“熟读唐
诗三百首,不会做诗也会吟”,模仿是创作入门的 重要途径;(2)开展构思协商,通过小
组合作和全体交流讨论,有助于教师和每位学生的思维与智慧被 整个群体所共享,形成共享
的、更高级的理解。(3)进行作品评价,在自评和互评中反思自己策划构思 的不足,发现
自己和他人设计的新颖之处,使学生获得满足感和成就感。









遇到失意伤心事,多想有 一个懂你的人来指点迷津,因他懂你,会以我心,换你心,站在你的位置上思虑,为你排优解难。
一个人,来这世间,必须懂得一些人情事理,才能不断成长。就像躬耕于陇亩的农人,必须懂得土地与种子的情怀 ,才能有所收获。
一个女子,一生所求,莫过于找到一个懂她的人,执手白头,相伴终老。
即使芦花暖鞋,菊花枕头,也觉温暖;即使粗食布衣,陋室简静,也觉舒适,一句“懂你”,叫人无 怨无悔,愿以自己的一生来交付。
懂得是彼此的欣赏,是灵魂的轻唤,是惺惺相惜,是爱,是暖, 是彼此的融化;是走一段很远的路,蓦然回首却发现,我依然在你的视线里;是回眸相视一笑的无言;是一条偏僻 幽静的
小路,不显山,不露水,路边长满你喜爱的花草,静默无语却馨香盈怀,而路的尽头,便是通达你 心灵的小屋……
瑟瑟严冬,窗外雪飘,絮絮自语说了这多,你可懂我了吗?若你知晓,无需说话, 只报一声心灵的轻叹,那,便是我的花开春暖。
你相不相信,人生有一种念想,不求奢华不求结果,不求你在我身边,只愿有一种陪伴暖在心灵,那,便是懂得。
有人懂得是一种幸福,懂得别人是一种襟怀,互为懂得是一种境界。
懂得,真好!















我们还是好朋友-江苏最低工资标准


文字签名-weishenme


中国古代刑罚-服务员个人工作总结


主题班队会-陕西省建设厅执业注册中心


春天的作文200字-知识竞赛方案


浙江大学城市学院外网-司法考试改革


核工业地质局-菏泽人事网


愚人节怎么整人-建筑工程测量实习报告