网页设计与制作课程教学设计.docx

网页设计与制作课程教学设计.docx

《网页设计与制作课程教学设计.docx》由会员分享，可在线阅读，更多相关《网页设计与制作课程教学设计.docx（22页珍藏版）》请在冰豆网上搜索。

网页设计与制作课程教学设计

“搜索引擎”网站首页的制作

教学设计

学校：

设计人：

所属课程：

网页设计与制作

所属专业：

软件技术

授课课时：

6学时

“搜索引擎”网站首页的制作教学设计方案

课程名称

网页设计与制作

项目标题

“搜索引擎”网站首页的制作

教材

教育部职业教育与成人教育司推荐教材《网页制作教程》

授课时数

6课时

授课地点

网站规划实训室

教学内容分析：

课标理论的要求

按照“以能力为本位、以职业实践为主线、以项目课程为主体的模块化专业课程体系”的总体设计要求，彻底打破学科课程的设计思路，紧紧围绕工作任务完成的需要来选择和组织课程内容，突出工作任务与知识技能的联系，让学生在职业实践活动的基础上掌握知识，增强课程内容与职业能力要求的相关性，提高学生的就业能力。

教材优劣分析

1、总体分析：

优势：

以预备知识→任务实施→延伸阅读为内容的组织形式，知识点全面，讲解详尽；任务教学，步骤清晰，目标明确；配套素材完善。

缺点：

仍是传统的先介绍知识点，再进行项目教学，没有体现“做中教，做中学”的课改特色。

2、本教学单元内容分析：

原教材项目三集中了所有页面布局的技术，div布局的案例甚至不是单独的任务，而只在实训内容中给出，不能体现出DIV作为先进网页布局方法的重要地位，并且案例只有一个，技能训练内容较少，无法让学生真正掌握DIV布局的方法。

教学内容整合

1、添加和修改案例

技能的提升不在理解，而是不断的重复和反复，才能由最初的知道怎么做，即初级技能，上升到动作趋向自动化，即技巧性技能。

因此，想让学生学会使用DIV进行页面的布局，一个案例是远远不够的。

但是考虑到课时的安排，也不宜增加太多，因此，本教学内容增设了一个案例。

选取的案例要符合两个特点：

一是能体现本模块要求学生掌握的知识技能；二是案例要具有代表性、时尚感，符合学生的职业岗位能力需求。

教材案例“一翔软件”网页能符合以上特点。

但是，在布局上嵌套多，稍嫌复杂，div布局由于CSS样式规则杂且多的原因，本身就比较难掌握，太复杂的例子会影响学生学习的兴趣和动力，因此，引入了相对简单的“搜索引擎”案例，将原教材的案例作为拓展实践的内容。

将“一翔软件”页面修改、简化，作为拓展实践的选择制作页面，以适应学生参差不齐的学习和实践能力。

2、教学内容调整

加重了DIV+CSS布局方法的讲解，将DIV布局作为独立的模块划分出来；

现将教学内容以知识点为中心转变为以“工作任务”为中心，让学生在完成任务的过程中，自主的构建知识和技能，发展专业能力。

教学目标设计：

教学目标

制定依据

“计算机网络技术”专业人才培养方案和课程标准

本部分要求学生了解当今普遍使用的布局方法-DIV+CSS布局，掌握使用DIV进行网页布局的技术，以及能够通过CSS样式表达到美化页面的效果。

教材要求

结合教材项目三：

“网页布局与批量制作”的任务二实训：

制作“一翔软件”网页中要求学生掌握的DIV+CSS布局的知识和技能。

教学目标

知识目标

能力目标

素质目标

掌握DIV布局页面的方法；

能够使用DIV+CSS进行页面的布局；

能够灵活的使用CSS样式定位和美化页面元素。

提升使用DIV进行网页布局的意识。

提升网页设计和制作中自主学习和团队合作的意识。

学生情况分析：

认知水平

学生已经学习过表格布局、CSS样式设置和层的使用方法；

通过表格布局的学习，学生对网页的布局和制作产生了浓厚的兴趣；

学习能力

动手能力和模仿能力较强。

学生自立、自主意识薄弱，不能主动分析解决问题，探索新知。

即创作力弱。

学习特点

学生思维活跃，活泼好动，喜欢交流，合作解决问题。

教学重难点分析和解决措施

项目

内容

解决措施

重点

使用DIV+CSS布局页面的方法。

通过分析，让学生有初步布局的认识；

通过模仿，让学生掌握案例中的布局方法；

通过实践，让学生跳出当前的布局模式，体会新的布局方法，从而获得布局的常用技巧和布局优劣的区分方法。

难点

Div标签的布局显示；

标签中层的显示。

通过对比，从认知上区分其显示效果的不同；

通过重复任务，从操作上获得正确的设置方法。

通过反复任务，掌握布局的技巧和常用的属性设置技巧从而美化页面。

教学

资源

参考资料《从零开始-Dreamweaver典型案例》人民邮电出版社；

Dreamweaver8工作环境；

《网页设计与制作》精品课程网站（自己开发）；

教学幻灯片；

任务

分解

任务一：

分析“搜索引擎”页面的布局；

任务二：

“搜索引擎”页面（top）页眉布局与制作；

任务三：

“搜索引擎”页面主体（body）布局与制作；

任务四：

“搜索引擎”页面页脚（food）布局与制作；

独立实践：

“一翔软件”页面制作。

教学

环节

概述

引入：

通过提问引入DIV布局方法，激发学生完成案例页面的兴趣；

模仿：

通过老师讲解演示、学生学习模仿、引导学生分析解决任务过程中的问题，让学生在任务的完成过程中，自主的构建表格布局、属性设置等知识和技能。

创造：

通过给学生设置问题情境，引导学生在了解问题、尝试解决问题的过程中对所掌握的知识和技能举一反三，进而获得新技能。

分析：

当学生能够通过尝试操作举一反三，甚至获得新技能的时候，老师要用严谨的态度，灵活的教学方法讲解新技能，归纳和总结学生做得，帮助学生理解和消化。

实践：

通过实践内容，学生能够验证知识技能，发现新的质疑，从而探究，创新。

教学

方法

讲解法：

通过讲解，让学生了解布局、CSS样式设置操作的目的；

演示法：

通过任务的演示，让学生了解DIV+CSS布局的流程，掌握DIV布局方法和CSS样式设置；

提示引导法：

帮助学生解决在模仿任务和实践时遇到的问题；

创新型思维引导法：

帮助学生完善知识技能，提升自主探究和创新技能的能力。

主要用于创造、分析、实践阶段。

以下是此法示意图：

此法旨在课堂中先引导学生质疑，再在知识和技能的加工过程中，充分挖掘、发挥学生的创造性思维解决问题，并进一步通过分析和这种思维方法指导实践。

从而引发下一轮的质疑和思考。

让学生进行持续性的学习。

情境教学：

用于创造阶段，给学生创设问题情境，让学生跳出当前的布局思维模式，尝试创新；

榜样教学：

用于创造阶段，激发学生性格中的“好胜”因子，营造班级的“敢比敢追”的学习氛围；

分层教学：

解决学生能力参差不齐的问题，通过增加增加创造型思维的训练、设计和逐步制作自己的网站等手段，使有能力的学生“吃饱”，通过巡视、指导，组内互助，暂缓创造等手段，使能力弱的学生“吃下”。

学习

方法

学生的学习主要经历以下阶段：

听看-理解-应用-巩固-创造-分析-实践

听看：

是知识和技能学习的主要手段；

理解：

通过听看，了解布局和属性设置的意图；

应用：

模仿老师操作，完成任务；

巩固：

对比和重复任务，解决制作做程中的问题，巩固知识技能。

创造：

进入老师设置的问题情境，了解和尝试解决问题，获得新技能。

分析：

小组讨论和交流，分析任务的完成情况，问题的发现和解决等，系统化知识。

实践：

应用技能完成实践案例，并在此过程中，发挥创造型的思维，自主探究和学习。

教学过程和教学资源设计：

环节

教师活动

学生活动

设计意图

复习

引入

（15′左右）

提问：

表格布局的优缺点有哪些？

同时帮助学生总结有缺点。

认真思考，在教师引导下，回答问题：

优点：

表格布局操作简单，属性直观，学生易上手；

缺点：

不能横向排列；不能嵌套太多；不易修改等；

因为有缺点，才寻找更好的解决方法，本提问目的是通过表格布局的优缺点引入DIV布局方法。

提问：

当今最流行的布局方法是什么？

回答问题，但是学生大部分回答不上来。

设疑，让学生产生好奇。

带着这个问题，给学生展示网页。

（可以让学生任意提出网址）

资源应用：

网络

踊跃给出网址，观看源代码，

给学生展示当今的流行布局页面，激发学生兴趣。

查看其源文件，发现多数都是DIV布局的网页。

在老师的提示下，发现当今多数网页布局以DIV+CSS为主。

用事实回答疑问。

解答第二个问题，引入DIV布局方法。

对DIV有了初步认识。

模仿

任务一

（15′左右）

1、展示“搜索引擎”的页面效果，让学生先自己分析其组成部分。

1、回忆之前掌握的网页布局要素，回答问题。

指出划分为页眉（top）、主体（body）、页脚（foot）。

让学生巩固之前所掌握的布局构成元素。

2、在学生说出自己的分析结果后，继续分析，划分出每一个布局并按含义确定每一部分的ID。

2、认真听讲，体会div页面的分析方法。

细化出本页面中的布局DIV。

3、使用PPT给出正确的布局和DIV命名。

资源：

教学PPT

3、看演示，听讲解，记忆Div标签的命名规则；

让学生养成规范化命名的习惯。

模仿

任务二

（20′左右）

1、分别演示topDiv1、topDiv2、topDiv3标签的插入，和内容设置；

【讲授知识】

ØDIV的插入；

Ø使用CSS样式控制DIV的方法；

ØDiv标签左右浮动设置；

ØDiv标签的背景和高宽的设置；

ØDiv标签中其他网页元素的插入。

1、认真观看老师演示，记忆老师讲解时重点强调的部分操作；

2、动手模仿操作，部分学生在操作过程中出现问题，提出质疑；

资源：

学习网站

让学生在模仿任务的过程中，自主的构建DIV布局和CSS样式设置的知识技能。

2、学生动手时，在班级巡视，及时发现操作遇到问题的学生，给予提示和帮助。

措施：

引导学生对比，鼓励学生重复任务。

【常见问题1】预览效果错乱；

【常见问题2】布局时Div标签出现嵌套，不易修改。

在老师的引导下，对比和重复任务，找出操作错误的原因。

资源：

学习网站

培养学生分析和解决操作中问题的能力，突破教学难点。

3、总结常见问题，重复演示或者让学生重复演示操作。

独立或者在小组成员帮助下重复任务操作，体会设置上的区别。

【巩固技能】

HTML编码中

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

网页 设计 制作 课程 教学

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。