网页设计教学案例 网页设计教学设计

网页设计教学案例网页设计教学设计

网页设计教学案例网页设计教学设计篇一

《网页设计》之站点的建立教学案例

新疆阜康市厦门实验小学成伟

一、教学目标

1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；

2、认识frontpage的界面；

3、掌握在主页中插入文字、图片、水平线；

4、掌握页面文件与图片的保存。

二、教学重点

1、能在指定位置建立只有一个网页的站点（难点）

2、能在页面中插入文字、图片、水平线

3、掌握页面文件与图片的保存（难点）

三、教学方法

在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。

四、教学过程设计

教师活动：

1、引入课题：（激发兴趣，活跃气氛）

同学们喜不喜欢上网？经常上新浪、百度等，有没有同学知道新浪、百度称做什么？

（网站）

浏览新浪网站，浏览的第一个页面称为什么？

（主页）

问题1：网站是不是就是网页？用自己的语言描述一下网站的概念

（网站包含多个网页，通过超链接把不同的页面链接起来）

问题2：网页是不是就是主页？

(第一个页面称为主页，网站设计者可以确定哪一个是主页，主页的文件名一般为：,主页也是网页)

设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。

今天我们学习用frontpage建立站点，制作一个主页。先来研究一下没有发布的网站，打开教师做的网站

问：同学们看到了什么？

（文件夹）

总结：

可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。

打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。

请学生浏览教师课件，了解学习任务

2、新建站点

frontpage的启动

问：与word比较，有什么不同？

（增加了视图区，编辑区有三个窗口）

总结：

视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面

普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式

预览窗口：浏览器中出现的效果，与powerpoint中的“放映幻灯片”类似。

打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。任务1：学生根据导学课件，在d:建立自己站点(站点名字改为自己的名字，便于记忆)

请一位学生示范如何建立站点，教师总结

问：在文件夹列表中看到了什么？

（分析多出的文件夹列表栏，多了一个文件夹，里面有两个子文件夹和主页，图片存放在images文件夹中）

3、编辑主页与保存主页

看效果图，请学生分析主页中的元素

总结：鲜明的主题，如：我的世界、开心乐园等，有分割页面的水平线，与主题相关的图片，对网站的简单介绍根据导学软件，学生完成任务2：设计主页、保存主页与图片

4、总结反馈

请学生示范，讲解如何插入图片（来自剪贴画与来自文件）、插入水平线，如何保存总结：必须切换到“编辑”窗口下编辑

主页的保存中存在问题：

单击“文件”----“保存”或工具栏的“保存”按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点images文件夹中，便于站点的管理。

5、请学生继续完成自己的主页，有能力的同学完成提高篇

6、教师与学生共同评价总结

老师向学生展示自己的作品，与学生一起讨论评价。

请学生总结今天的学习内容：建立包含一个页面的站点，主页的设计与保存。

学生活动：学生回答问题、学生观察网站的表现形式、浏览课件，并了解本节课的学习任务、学生观察frontpage界面与word的不同，学生观察教师演示不同编辑窗口的区别。学生上机操作，在指定位置建立自己站点、同桌互相帮助，并参考教师做的课件，利用网络环境下的课件自己探索学习，满足不同层次学生的需求、学生总结。

网页设计教学案例网页设计教学设计篇二

课时安排1课时

教学内容分析本节课的主题：让学生认识并利用dreamweaver软件制作简单的网页，学会建立站点和设计有一定主题思想的主页，本课是用该软件创建环保网站，也就是用所掌握的信息技术知识解决生活中的实际问题，使学生能够学以致用。发挥信息技术学科的优势，以素质教育的新理念，增强学生的动手能力，提高学生的综合素质。

1、以教材为基石，作为构建知识的桥梁，依据《课程标准》，创造性、合理的对教材进行二次开发与重组。如：导入新课时，利用学生对美好事物的向往，激发学生的求知欲和学习兴趣；采用任务驱动教学，增强学生自学能力；对学生的评价方式，采用学生作品展示，是学生学习的一个延续，对学生学习起到一种推进的作用。

2、对教材内容进行引申与组合，让学生利用网络强大的功能搜集资料，分组搜集不同内容，包括图片与文章，采用任务驱动，协作互助的授课模式，发挥教师的主导作用，增强学生的主体地位。通过创建环保网站增强学生的审美意识与想象力，提高学生的综合能力。

分析教学对象

1、学生的年龄特点和认知特点：

学生对周围的一切充满了好奇，他们急于表现自己，对于教师布置的任务能够认真对待。对于dreamweaver的知识掌握的较好，但综合运用能力尚有欠缺；能够上网搜集资料，但速度与技巧还有待提高。本节课给学生提出一个总的任务：创建环保网站，此项任务的设置合理、艺术，对于学生各项能力的提高有很大帮助。

学生创作欲强，因此本节课中，提倡、鼓励独立完成作品，培养学生热爱自然热爱环境的情感，以增强学生的保护地球、保护环境的意识。

2、在学习本节课之前学生应具备的基本知识和技能：

能掌握基本的文字修饰与排版功能并能查找指定地点的文件，会浏览网页与下载资料。

3、学习者对即将学习的内容应该具备的水平：

本课是学生初次认识dreamweaver并能应用它制作简单的网页，培养学生综合运用知识解决问题的能力，以及各方面素质的一次综合评价。

教学目标的设计1.知识目标：

（1）了解网页的概念；

（2）初识front〈ＷＷＷ．〉page2000并学会简单地应用；（3）了解建立网站的一般方法；

（4）学习制作包含文字、图片和声音的网页。2.技能目标：

学生通过探究学习过程中，掌握网站的建立方法与创建简单网页的操作。3.情感目标：培养学生在学习过程，自主探究能力和分类汇总知识的能力。培养学生热爱环境、保护环境的情感并能号召人们行动起来保护地球、保护我们生存的环境。

教学重点与难点

（1）重点：建立网站与在网页中插入文字、图片、设置背景和背景音乐。（2）难点：将网页存在网站内并把涉及到的文件分类汇总在相应的站点文件夹中。

教学策略设计

1、根据教材内容和学生的实际情况，本课采用“任务驱动”、“问题──探究”等教学方法，创设一个板报展览的情境（创设情境），以逐个任务和问题驱动学生多动手、多思考、多实践，从而了解和掌握dreamweaver的基本知识和技能。并以英语的鼓励语言和信息技术专业术语增强学生的学习兴趣。

2、本课传授给学生的学法是“问题驱动下的自主学习──分组协作学习──探究发现学习”。让学生在创建环保网站的过程中，既鼓励个性张扬，又提倡某些问题的分组协作与自主探究，指导学生对图片及文字的来源进行探究发现（从网络中搜集）。建构主义学习理论强调以学生为中心，要求学生由知识的灌输对象转变为信息加工的主体。故此本课教学过程中，以问题驱动，激发求知欲望，让学生带着逐个任务通过探究发现、相互合作、实际操作等方式，自主学习，使学生在完成任务的过程中不知不觉实现知识的传递、迁移和融合。

3、是在网络教室中完成的，利用多媒体局域网络，实现教师演示、个别指导、网上交流、作品提交及作品展示评比。在出现共性问题与个别错误时教师可以利用网络教室软件演示和个别指导，在创作作品的同时，生生可以进行网上交流。体现教师的指导、组织作用，学生主体、探究协作地位。

教学评价设计

1.采用小组间竞争机制，比赛哪个小组解决问题或是完成任务的速度快与质量高，增强学生协作互助的意识。

2.最后进行作品展示，评出“速度”奖，“质量”奖，“原创风味”奖等几个奖项，进一步激发学生的学习热情。对自己的作品有一个反思，增加相互学习、相互交流的机会，让学生学会自己梳理知识，增强自学能力。

教学过程设计