设计网站首页——“初建网站”教学设计

1、设计网站首页初建网站教学设计 【教学内容分析】：本节课是网络技术应用第四单元第二节初建网站的内容，这是本单元的第二课时，第一课时围绕“青奥会”这一主题讨论了如何规划网站及建立网站基本步骤，本节课是设计网页的第一步，新建站点和制作网站首页。【学情分析】：本节课的教学对象是高二的学生，高一时已经学习了网页制作的一些技术，学习本课内容是有一定基础的，考虑到相隔时间较长，网页制作平时也很少应用，对于使用表格来布局网页，许多学生已经遗忘了，或者当初学习时并没有真正体会到表格在网页布局中的作用。为了完成规定任务，学生会通过思考回忆交流探讨等多种方法来解决遇到的问题。【设计思想】：改变传统的先讲后练的模式，

2、将课堂真正还给学生。教师先明确本节课的任务，对提供的素材加以说明，简单引领后，直接让学生操作实践，在学生需要老师讲时才讲，最后由学生演示自己的作品，介绍操作方法，做到教师只是起引导作用。设计一个让学生看起来很容易，但要达到要求就会产生一系列的任务，通过思考、探究等方法来解决这一系列的问题，在解决问题的过程中学习知识，掌握技能。改变以往学生只是将老师的操作模仿一遍，却不知道这样的操作有何作用的状态。【教学目标】： 1、知识与技能：学习在frontpage中建立站点的方法，掌握如何插入图片、文本，理解表格布局网页的目的，熟练表格属性和单元格属性的使用，培养学生主动探究，解决问题的能力。2、过程与方

3、法：通过完成建立只有一个首页的网站，在不断尝试的过程中理解和学习基本知识，在失败中总结解决问题的方法。 3、情感、态度、价值观：将问题留给学生自己去解决，培养学生主动思考和探究学习的能力，学生在解决问题的过程中体验到成功的喜悦，激励学生学习的兴趣和热情。以青奥会为素材，培养学生关心时事，热爱家乡的思想情操。 【所用的教学资源及环境】：多媒体网络教室、设计网站所需素材和作品效果图文件名ok.jpg存放于yog文件夹中，该文件夹分发给学生。【课前准备】：搜集有关“青奥会”的素材和资料，设计加工一副网站横幅图片和一副导航栏图片，宽度为网页的宽度，简单处理了两幅用于显示在页面右下方的小图片。将首页设计

4、好，并将预览效果图通过截屏以图片的格式发给学生。探究点设计：导航栏图片为导航栏所在表格的背景图片，此处会迷惑学生，网页中使用了表格，但在效果图中却看不出来，如果不用表格，就很难做到文字在左图片在右且整齐排列，这是本课的两个探究点。【教学过程设计】一、 开门见山，直接导入今天，我们就来完成以“青奥会”为主题的网站的首页的制作。通过前面的讨论，我们已经规划好了网站的内容及网页的风格了，根据大家的提议，我做了一个首页效果图ok.jpg（展示效果图片），本节课我们就来动手制作效果图所示的网站首页。二、 布置任务，适当说明完成首页需要的素材在yog文件夹下，解释一下首页中用到的图片、文本在素材文件夹中对

5、应的文件名，请同学们运用老师提供的素材，来设计效果图ok.jpg所示的首页。三、 简单引领，学生实践设计网站的第一步工作是建立站点，由老师先教大家如何建立站点（演示操作步骤），完成这些操作后，分析一下站点文件夹中的内容，让学生明白建立站点究竟是怎么回事。提问：今天我们要完成的是首页，该编辑哪个文件呢？学生回答“index.htm”，（复习首页默认的文件名）。“下面我们就开始完成今天的任务设计首页，请大家根据老师提供的素材，将首页设计排版成效果图ok.jpg的样式，有困难吗？”（学生一看就是几幅图片和一些文字）“没有”，动手操作。四、 暴露问题，探讨解决学生基本都想不到用表格来布局网页，而是直接

6、将图片插入到网页中，将文字复制到网页中，这样就会发现两个问题：一是导航栏的图片不能摆放到导航栏文字的后面；二是两幅小图片不能上下排列，且与文字紧紧环绕在一起，不能实现文字在左侧，图片在右侧的效果。问题出现之后，学生们就开始探讨解决问题的方法，在巡视过程中发现部分同学想到了高一时曾学过的表格，开始改用表格进行网页布局，经过一系列操作之后，终于将出现的第二个问题解决了，此时学生会非常高兴地举手问：“老师，是不是这样做？”。待大部分同学百思不得其解，小部分同学已完成时，给一位同学展示自己的机会，请他来演示自己的解决方法，这时其余同学也跟着恍然大悟，开始重新设计。（同时表扬所有已经思考出解决问题的方法

7、的同学）。对于已完成的同学，他们就可以思考导航栏文字后面的图片是如何加入的。教师可适当提示：这幅图片不能直接插入到网页中，而是作为背景，作为什么对象的背景呢？网页？表格？单元格？学生开始尝试，约10分钟左右如有同学完成了，请该同学给大家介绍他的操作方法，如果仍未有同学能够完成，此时，学生便会提出：“老师，你快告诉我们吧”，这时就由老师来揭开谜底，因为学生很想知道结果，所以听的也很认真。最后将网页的其它内容继续完善。五、 知识小结，反馈表扬为了实现文字在页面左侧，图片在页面右侧的排列效果，我们选择了表格，体会到了表格在网页设计中的作用，其实，因特网上的网页看起来十分整齐美观，一般都是运用表格来进

8、行布局的，看不到表格的原因是表格的边框设为了“0”。通过布局首页，我们也学会了插入图片、文字，表格属性及单元格属性的使用等。表扬所有今天通过探究将问题解决的同学，展示他们的作品【课后反思】 ：以前在介绍网页布局时，一般是通过分析几个网页，总结一下网页布局有哪几种样式，接着就直接告诉学生我们一般都采用表格来布局网页，教学生如何使用表格，但学生对于为什么要用表格进行网页布局体会不深。于是我将教会学生使用表格布局改为学生需要使用表格进行网页布局。因此我设计了一个看起来很简单实际中隐藏了表格、单元格属性设置的首页请学生来布局，学生一看都觉得会做，于是很乐意去做，做了才发现又不是那么的容易做，一种不服输

9、的心理驱使学生不断尝试和探究，由需求而产生学习的动力。学生都有着强烈的表现欲，在上课的过程中，我深切地感受到，只要能够做出来的同学，都迫不及待地举手问老师，是不是这样做，都希望将自己通过思考探究的结果展示给同学和老师看，于是我抓住了学生的这一心理特点，及时表扬这些同学，但只能给一位同学展示自己作品的机会，对已经完成的同学进行点名表扬，下课时，我明显地感觉到这些同学的小脸都红扑扑的，带着满意地笑容离开我的课堂。巧妙设计任务是本节课的关键。我首先考虑到设计的任务要让学生愿意参与进来，于是设计了一个看起来很简单也很漂亮的网页，学生觉得入手十分容易，也愿意去做，这样排除了部分学生的畏难情绪。吸引了学生的眼球；但也要有一定的障碍，（否则有些学生就不感兴趣了），给学生有探究和思考的环节。这里我故意将导航栏图片设为背景图片来迷惑学生，我使用了表格，但在效果图中却看不出来，制造出本课的两个探究点。这样使得每个学生都有兴趣来完成我的任务，在完成任