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

《网站主页的设计》教学设计,标签：高中信息技术教学设计案例,http://www.5ijcw.com
图3“威尼斯的泪”网站主页    　　　　　      图4 “威尼斯的泪”表格框架   　　师：老师这里有个完工的网站主页（如图3），网站主题是关于拯救水城威尼斯的，网站名称是“威尼斯的泪”，页面十分简洁，用一张图片吸引观众目光，导航栏设置在右下处，四个超链接对应网站的四块内容，这种网页布局可归为封面型的布局类型，在个人主页和企业网站设计中较常用（具体可参考学习网站）。请大家仔细看这个网页，接着我们将用它的半成品来玩拼图（如图4）。   　　教师用FrontPage软件打开半成品网页。   　　师：同学们看到网页上都有些什么？   　　生：哦，表格，原来刚才的网页是用这样的表格来实现布局的。   　　师：对了，那再仔细观察一下，这里到底用了几张表格。   　　生：两张，三张……

www.5ijcw.com   　　师：答案是五张表格，最外面一张虚线显示的表格将整体分为上下两大块，然后表格里面套表格，最终将所有网页内容，用一个个单元格定位。   　　师：现在网页上半部分的九个单元格就是留给大家来完成拼图的，加油，看谁最快完成提交。   　　学生下载素材，尝试着完成拼图；教师巡视，了解学生的制作过程。学生在制作过程会碰到一个主要问题“如何将图片拼得天衣无缝”，涉及到表格的属性设置这一知识点，要能够想到将表格边框设置为隐藏，将表格单元格边距和间距值都设置为0。   　　师：已经有同学完成拼图提交了，某某同学是最快完成的，让我们一起来看一下他们的拼图吧。   　　教师根据学生完成情况，选择不同的教学，如果已经有学生很好地完成了拼图，就请学生来讲解、演示；如学生都没有很好地解决问题，教师可以通过提问“五张表格中最外一张用虚线显示的表格在预览中是否能看到它？”“表格边框隐藏是怎么实现的？”“表格属性中还能设置什么？”等问题，引导学生找到答案。   　　师：只有想不到，没有做不到，网页布局，表格帮你轻松搞定。   　　设计意图：以一个熟悉的游戏任务引导学生探究、学习、掌握表格布局的知识。同时，任务素材又是后续学习任务“主页设计”的一个范例，帮助化解学习难点。   　　3．创设情景，引起思考   　　师：再次欣赏这幅拼图作品，不知道摄影师有没给它取过名，就让我们来给它设计个名称吧。   　　生：“大海，大海”，“港湾”，就用“威尼斯的泪”……   　　师：请大家分别用“大海，大海”和“威尼斯的泪” 做名称来看这幅作品，不知道你的脑海里会浮现些什么？   　　生：很不一样。   　　师：作品的名称十分重要，它能够引导观众欣赏的视角，我们在进行网站策划构思的时候，一定要给自己的网站设计好名称。   　　师：拼图照片源自一则反映威尼斯遭受水淹的新闻报道，由于气候变化，威尼斯经常遭受水灾，人们用葬礼的形式倡议拯救威尼斯。在学习网站还有“‘2012’离人类还有多远？”和“哥本哈根气候大会”等背景资料，提供这些材料是为了引起大家对“气候变化对人类社会的影响”这一社会议题的思考，同时我们将借助网页技术来发出自己的声音。   　　师：让我们一起进入主页设计活动环节。   　　设计意图：通过名称设计，揭示网页作为一种信息表达技术的价值，培养学生的创作意识。用热门新闻和议题创设情景，激发学生创作欲望和增强社会责任感。   　　4．任务驱动，合作探究   　　活动内容：根据背景资料，以同桌同学为小组，进行网站创建的策划与构思，形成网站主页的初步框架，以完成主页表格框架或绘制草图等形式呈现结果。   　　师：主页设计是网站设计制作的一个重心，设计的完成如同写文章列好了提纲，将对整个网站的制作过程和完成质量起重要影响。接下来，小组同学要发扬团队协作精神，一起来完成学习任务。这可能是我们第一次进行网站主页的设计，所以老师给大家的建议是“从模仿做起，善于吸收他人经验”，在学习网站中有“网站创建流程”“网站主页设计”“主页模版欣赏”等内容可供参考。   　　教师将“网站创建流程”（如图2）和“威尼斯的泪”表格框架网页（如图4）投影在屏幕上，作为重点提示；了解小组合作情况、操作进度，解决技术问题，并对技术相对薄弱的小组重点帮助指导。小组同学合作协商，进行网站的策划与构思，形成网站主页的初步框架。   　　设计意图：

上一页  [1] [2] [3]  下一页

上一篇：《表格数据加工的多元性》教学设计