网页设计与制作课程说课
网页设计与制作说课稿
新邵职中
16
2．课程教学方法设计
本课程采用任务驱动的教学模式，实施项目化教学方法，
课堂与实训3地．点课一程体教化学。方从法以设下三计个方面展开。
（3）采用“四步曲”的教学流程， 融“教、学、做”于一体
第一步，教师展示示范项目，分析工作任务， 演示操作流程，讲解涉及的理论知识。 第二步，下达实训项目工作任务，提出完成任 务的具体要求和完成时间。 第三步，小组协作学习，完成实训项目。 第四步，项目验收，学生自我评价，教师综合 评价。
《网页设计与制作》 说课
一
课程构思
二
课程设计
三
课程实现
四
课程运作
新邵职中
2
1、课程定位
课程名称
网页设计 与制作
授课对象
计算机专业 学生
课程性质
计算基础机课专业
先学课
F计la算sh机动应画用等
新邵职中
理论
72
实践
108
3
2．课程目标
课程目标包括知识目标和能力目标。Байду номын сангаас
知识目标
☺ 了解WWW、HTTP、HTML、CSS的定 义、概念和作用； ☺ 理解服务器、客户端、浏览器的概念和作 用； ☺ 理解HTML语言中的常见标记及其作用； ☺ 熟练掌握Dreamweaver的基本操作方法； ☺ 理解表格、框架、层的作用，掌握设置其 属性的方法； ☺ 理解CSS样式表的作用和意义，掌握定 义CSS样式的方法； ☺ 理解表单的作用，掌握设置表单元素属性 的方法； ☺ 理解行为的作用，掌握设置行为的方法， ☺ 理解模板和库的作用；
4
3、课程特色
任务驱动
大案例贯穿
学生 主体
网页设计与制作说课
强化网页制作技能、积累网页制作经验
激发自身学习兴趣、形成持久学习动力 提升自主学习能力、满足职业岗位需求
三.教学设计 ——理念与思路 1、设计理念： 突出专业课程的职业性和实践性。按照“职 业岗位→岗位需求能力→确立教学项目”的项目 导向式的运行机制来组织教学。 2、设计思路： 以培养职业能力为核心，以案例教学为中心 的课程实施积极探索教学方法与成绩评价方法的 创新，保证课程目标的实现。
目
一 课程定位 二 课程目标 三 教学设计 四 教学实施 五 教学资源 六 课程特色
录
七 改革思路
一.课程定位－－课程性质
网页制作是高职高专院校计算机教育专 业和其他相关专业学生应该掌握的重要技能 之一。《网页设计与制作》作为软件技术专 业的一门必修课，重在培养学生的专业应用 能力。
1.课程定位－－职业岗位
企业网络建 设与管理
计算机网络 技术专业职 业领域
企业网站开 发与维护
本 课 程 相 关 的 岗 位
网页设计师 网站美编 企业网站策划 网络广告设计
IT产品营销、 客服技术支持
一.课程定位－－课程地位
本Байду номын сангаас程
《计算机应用基础》 《多媒体制作技术》
《动态网页设计》 《多媒体作品创意》 《企业网站设计与开发》
本课程的学习有助于学生深入学习计算机类相关专业 其他知识和提高职业技能，完善学生的专业知识结构， 提升学生从事实际工作的综合素质
二.课程目标
通过学习《网页设计与制作》课程，学生能够设计制 作出布局美观、链接合理、包含文字、图形、图象、动 画、声音、视频等多种媒体信息并具有一定交互功能的 网页；概括说来，该课程教学目标主要集中在以下几个 方面： 赏析各类经典网站、掌握网页制作方法
网页设计与制作课程说课PPT
谢谢各位!
网络技术专业 电话：
➢ 1、课程的性质和目标 ➢ 2、课程在专业中的地位 ➢ 3、前导和后续课程 ➢ 4、教学内容安排 ➢ 5、课程和学生分析 ➢ 6、教学安排 ➢ 7、教学设计 ➢ 8、考核和评价 ➢ 9、教师队伍 ➢ 10、课程资源 ➢ 11、改革设想
课程的性质、目标
网页设计与制作是网络技术专业中第三学期开 设的课程。
课程、学生分析
➢ 本门课程是实践性比较强的课 程。
➢ 高职学生趋向于在实践动手中 学习。
教学安排
网页教学
实践课教学
1、专业机房作为 硬件保证
2、配有服务器 3、部署了教学实
验网站
50%
理论课教学
50%
有专门的多媒体教室， 提供80余个座位
教学安排
网页教学
网站建设流程： 确定站点名称-> 确定主要内容-> 确定风格和模块
->制作页面 ->测试和部署
->网站维护
50%
课程设计
50%
教学设计
网页设计与制作课程正在基于工作过程 的教学模式的探索。在理论课和实践课 教学中都实施案例教学。
理论课教学设计
理论课是以知识点为一个教学单位， 按如下步骤教学：
实践课教学设计
实践课和理论课的知识点相对应， 步骤安排如下：
给出案例
主要是学习静态网页制作的知识、技术和相关 的工具
学完该课程后，一方面可以运用相关的知识、 技术和各种工具独立的设计和制作出基于静态 页面的小型网站；另一方面为后续的学习打下 基础，即为动态网页设计页面的结构。
本课程既是基础性课程又是一门应用性课程。
在网络技术专业中的地位
专
业
网页设计与制作课时说课稿
3
DIV+CSS网页布局技术、团队协作、
项目实施能力
6
JavaScript脚本代码的应用能力
4
使用模版完善静态网站
掌握网站模板的使用方法
2
应用行为增强网页动态效果
掌握网站行为的使用方法
2
项目总结与评价
具备检查、判断能力、语言表达能 2 力、责任意识
<div id=“right_top_jcjs”></div>
</div>
<div id=“right_jxzy”></div>
<div id=“right_jx”></div>
</div>
</div>
<div id=“footer”></div>
先堆到一起再说！
教师为主导 学生为主体
三 4.在网页制作软件中如何将这些盒子放置到合适的位置？ Css样式表——盒子摆整齐了！
自主探究法、总结反思法
项目导向 任务驱动
教师展示任务效果 教师提出任务目标 学生自主探究 教师引导、解决疑难问题 展示与评价
布置课后拓展练习
一
任 务 效 果 展 示
提高自学兴趣，被动——主动 进一步明确本节课要实现的目标，设置四个问题来分析、讨论
二
1、复习什么是CSS的盒子模型？盒子的属性？（引导、讨论）
选
取
与
安 排
项目三 精品课程网站
项目四 武威旅游网
项目五 佳佳商城用户及留言管理系统
网页设计与制作说课
出包括课程主要知识点的综合性网站。期末考核成绩占总评成绩的 60%
四 教学资源
4.1 教材选用情况数字化教辅资源 4.2 实践教学条件 4.3 师资队伍
4.1 教材选用情况数字化教辅资源
六 课程特色
特色： 教学观念先进，突出应用能力培养。 本课程本着理论够用、实践加强的原则，突出应用能力的培养。适 时调整教学内容，保持与Web技术的发展同步。改革考核方式，注 重学生的学习过程。
创新点：
1、在学习当中，注意引导学生获得美的熏陶，提高审美能力。 2、强调技术与艺术的融合，将网页作品当作一份具有生命力的 艺术品。 3、 以真实网站作为教学案例，让学生在真实工作环境中训 技能，提高学生适应岗位需求的能力。 4、 虚拟项目设计考核模式。，给学生一些虚拟项目作为课程 设计，培养学生单独规范的做项目的能力及网站设计的综合能力， 也让学生找工作时可以向用人单位提供一个完整的网站设计的作品
其它网络资源
4.2 实践教学条件
学生实习实训机房具有一定规模，能够人手一机，满足教学大纲要求 的全部实训内容和选修实训内容。学生上机所需的软件齐备，如： PhotoShop、dreamweaver等。在多年的教学过程中，本课程 已具备了较完整的多媒体教学的条件，有整套的电子教案，案例、习 题等
4.3 师资队伍
3. 重视以真实的社会项目作为教学内容，倡导将教学结果作为项目内 容直接提交给用户，使得学另外生能够零距离地接触市场。扩大校 外实训基地建设，以满足本课程真实工作任务下的教学。
4. 在学习网页设计技术之前，引入美术课程的教学，使学生具备一定 的美术功底
《网页设计与制作》说课
课程名称：网页设计与制作
基
本 课程代码：050041
课程性质：专业必选课
信
息 学 时：64
学 分：4.0
所属教研室： 计算机应用技术教研室
3
1. 理念目标
以职业岗位作 业流程为导向
教学理念
以学生为中心
以职业能力为 课程核心
教、学、做一体、以动 手训练为主；所有教学
并行课程
➢动画制作技术
后续课程
➢ASP动态网页制作 ➢电子商务网站建设与管理
一
共同构成了网站建设与管理技术领域和职业岗位的岗位技能 与职业能力培养的教学模块，其中“网页设计与制作”课程 主要培养学生网页设计与制作的专业技能。
8
2. 课程设置
内容选材——开放性
课程开放性
贯穿项目：本课程是以高级网页
制作员在网页设计中进行网页设计 与制作所要求的职业能力培养为主 线，以真实工作任务或社会产品为 载体进行网页设计与制作过程中的 相关工作任务作为贯穿课程始终的 训练项目来进行教学内容组织及教 学过程实施。
网络教学资源之一
网页设计与制作精品课网站上共享了大量的网络资源
27
8. 课程资源
网络教学资源之二
上表中所列的网站均提供了丰富的网页设计 与制作的资源，可供学生下载、共享。
28
2009.4.12
根据网站 浏览效果 评定成绩
24
7. 课程考核
评定标准之四
《网页设计与制作》课程考核的评定标准之四
期末考核
根据学期末 的综合实训 评定成绩
25
8. 课程资源
场地设备
校内实训基地
有配置较先进的计算机实训室14个，与校园网和 Internet互联，可供学生进行网页设计与制作的实训
说课稿(网页设计与制作)
一、课程简介1．课程地位《网页设计与制作》是计算机网络专业的一门重要的专业核心课程，是我院计算机系计算机网络技术专业重点建设课程之一，目前已经申报了第一批院级精品课程，组建了精品课程教研团队。
本课程和《动画设计与制作》、《平面设计与制作》、《多媒体技术与应用》、《数据库》以及《动态网站开发》等课程相结合，形成满足网站维护员、网站开发工程师等职业岗位实际工作需要的课程体系。
2.课程性质本课程是网站开发的入门课程，是一门职业能力应用课程。
主要让学生掌握HTML、CSS在网页制作中的应用，以及利用Dreamweaver制作网页和管理网站的方法，并且让学生对JavaScript和ASP有一个入门的了解。
学习了本课程后，学生可以独立完成静态网站的制作和管理，并且为今后学习动态网站开发课程（例如ASP、等课程）打下坚实的基础。
3.课程特点（1）本课程实践性强，侧重技能的训练和掌握。
（2）为了实现学生获得“双证”的教学目标，课程内容的设定和网页设计师职业资格认证考试内容相结合。
（3）以建构主义学习理论为指导，本课程在教学过程中通过网络建构具有协商和对话、资源共享的真正意义的学习环境。
（4）课程内容和职业素质融合性较强，在知识产权、团队协作等职业素质的培养方面有比较明确的教学目标。
4.选用教材本课程采用的是自编教材——由清华大学出版社出版的《Dreamweaver网页制作实用教程》。
本教材是清华大学出版社21世纪师范院校计算机实用技术规划教材，已经被全国多所高等院校选为网页设计与制作正式教材，目前已经重印4次，发行1万多册。
由于本课程采用了自编教材，并且有多所高等院校采用本教材进行教学，所以对本课程的进一步改革和发展带来的便利。
我们在教学过程中积累经验，寻找不足，和同行进行交流，不断地完善本课程的教学内容和教学方法。
二、课程内容Dreamweaver是目前从事网页制作和网站管理的专业软件，在业界使用最广泛，是从事网站开发与管理相关职业必须掌握的软件之一。
《网页设计与制作》课程教案
《网页设计与制作》课程教案一、教学目标1. 了解网页设计与制作的基本概念和流程。
2. 掌握HTML、CSS和JavaScript的基本语法和应用。
3. 能够独立设计并制作一个简单的网页。
二、教学内容1. 网页设计与制作的基本概念和流程。
讲解网页设计与制作的基本概念，如网页、网页设计、网页制作等。
介绍网页设计与制作的流程，包括需求分析、页面布局、页面设计、编码实现等。
2. HTML的基本语法和应用。
讲解HTML的基本语法，如标签、属性、注释等。
通过实例演示HTML在网页中的应用，如、段落、图片、等。
3. CSS的基本语法和应用。
讲解CSS的基本语法，如选择器、属性、注释等。
通过实例演示CSS在网页中的应用，如字体样式、颜色、布局等。
4. JavaScript的基本语法和应用。
讲解JavaScript的基本语法，如变量、运算符、注释等。
通过实例演示JavaScript 在网页中的应用，如动态修改内容、响应用户事件等。
5. 设计并制作一个简单的网页。
根据所学知识，设计并制作一个简单的网页，包括页面布局、页面设计、编码实现等。
三、教学方法1. 讲授法：讲解基本概念、语法和应用。
2. 演示法：通过实例演示HTML、CSS和JavaScript在网页中的应用。
3. 实践法：学生动手实践，设计并制作一个简单的网页。
四、教学环境1. 教室环境：多媒体教学设备、网络连接。
2. 软件环境：文本编辑器、浏览器、网页设计软件。
五、教学评价1. 课堂参与度：学生参与课堂讨论、提问和回答问题的情况。
2. 课后作业：学生完成课后作业的情况，包括网页设计作品的质量和完成时间。
3. 期末考试：考查学生对网页设计与制作的基本概念、语法和应用的掌握情况。
六、教学资源1. 教材：《网页设计与制作教程》2. 辅助材料：PPT课件、实例代码、教学视频3. 网络资源：在线教程、相关论坛、网页设计素材库七、教学安排1. 课时：共计32课时，每课时45分钟2. 课程安排：第1-4课时：网页设计与制作的基本概念和流程第5-8课时：HTML的基本语法和应用第9-12课时：CSS的基本语法和应用第13-16课时：JavaScript的基本语法和应用第17-20课时：设计并制作一个简单的网页3. 课后作业：每课时布置相应的课后作业，巩固所学内容八、教学策略1. 针对不同学生的学习基础，调整教学进度和难度，确保学生能够跟上课程节奏。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（1）网页设计案例教程
作者：朱艳丽、宋毓震、
陈俊、李士勇、王全蕊、
王建平、梁云娟
出版社：清华大学出版社
2012年9月
TM
11
11
三、课程选用的教材与教参
（2）网页设计与制作
作者：董洁
出版社：清华大学出版社
2012年8月
2、教学参考书
TM
12
12
三、课程选用的教材与教参
（3）网页设计与制作实
第4 章
第5章
使用超级链接
使用与处理图像
第12章
第13章
使用行为
使用模板和库
第6 章
第7章 第8章
使用CSS样式
使用表格 使用CSS布局
第14章
第15章
网站测试与发布
网站开发实例
TM
21
21
四、教学内容与学情分析
2、教学建议
教、学、做 有机结合
分组建设 主题网站
教学 建议
理论和实践 并重
交流网站 建设成果
拓展目标。
TM
5
5
一、课程定位与教学目标
知识目标
制作工具
能力目标
制作网页
能力拓展
团队协作
沟通能力
HTML语言和CSS
修改网页
使用多媒体 网站发布
网站建设流程 网页布局
抗挫折能力 创新实践能力
3、教学目标
TM
6
6
二、课程设计的理念与依据
本课程的前导课程是计算机基础，后继课程是
程序设计。计算机基础课程中，已经学了计算
（4）设计前沿：
http://www.wzsky.ne
t/
提供网页设计、设计
教程、设计欣赏、图
片素材、网络编程、
设计素材、网页模板
、网页素材、
Photoshop教程等。
3、网络资源
TM
18
18
三、课程选用的教材与教参
（5）校内课程学习网站：
http://192.168.100.99:2080/index.html
机专业所需的基础知识和基本软件的使用，能熟练使用
办公软件Office，在此基础上学习网页制作专业软件
Dreamweaver就比较容易。
网页设计与 制作
计算机基础
TM
7
7
二、课程设计的理念与依据
教育信 息化 数字化 校园 信息技 术教师
教师 招考
理念 与 依据
信息化 管理
专业岗 位群
TM
例教程
作者：孙士保
出版社：电子工业出版
社 2013年5月
2、教学参考书
TM
13
13
三、课程选用的教材与教参
（4）网页设计与布局项目
化教程(HTML+CSS+DIV)
作者：温谦 周建国 练源
出版社：人民邮电出版社
2013年9月
2、教学参考书
TM
14
14
三、课程选用的教材与教参
3、网络资源
（1）W3Cschool：
生和竞赛型学生的培养。每年校内都有举行网页设计比
赛，参加人数也挺多。但是参加校外高职院校比赛的积
极性不高，获奖也很少。这是课程实施过程值得反思的
地方。以竞赛促培养是高职院校的重要学习过程，我们
将在今后的课程教学中，培养学生的竞赛意识，促进教
学质量的提高。
TM
34
34
.c
n/html/
W3CSchool 是因特网上最大
的 WEB 开发者资源，其中包
括全面的教程、完善的参考
手册以及庞大的代码库。
TM
15
15
三、课程选用的教材与教参
（2）DIVCSS5 ：
/
DIVCSS5以通俗易懂知识
《网页设计与制作》课程设计
TM
1
1
《网页设计与制作》课程说课
一、课程定位与教学目标 二、课程设计的理念与依据 三、课程选用的教材与资源
说课要点
四、教学内容与学情分析 五、教学过程设计与实施 六、课程教学团队 七、教学评价与课程特色
八、教学反思与改革
TM
2
2
一、课程定位与教学目标
1、课程概况
课程名称：《网页设计与制作》 所属系部：计算机系 所属专业：初等教育（计算机与信息技术方向） 授课对象：高专师范二年级（第四学期）学生 课程性质：专业核心课程 课程总学时：72
模块教学
任务驱 动：主 题网站
教学 方法
实践项目 要提交
TM
理论学习 边讲边练
25
25
五、教学过程设计与实施
2、考核方式
15%
平时 作业
15%
机试
15%
实践 项目
考核
40%
笔试
综合 实训
15%
TM
26
26
六、课程教学团队
网页设计与制作课程的教学团队有5人组成，他们
分别由李瑞兴、王华、杨瑞请、吴春艳、郑丽琴等5位
3、网络资源
TM
19
19
三、课程选用的教材与教参
4、网站建设发布平台
课程学习将提供学校的专用服务器作为学
习交流的平台，架设FTP和HTTP服务，学生制作的
网站发布到服务器上。作为远程站点，可以测试网
站、调试网页效果、展示制作的网站和学习交流。
TM
20
20
四、教学内容与学情分析
1、教学内容
第1章 第2章 第3章 网页制作基础 站点与文档制作 文本编辑与格式化 第9 章 第10章 第11章 使用框架 使用表单 使用多媒体
教学方式: 工作场景导入→知识讲解→工作实训→任务
驱动的项目教学法
TM
3
3
一、课程定位与教学目标
2、课程定位
本课程是初等教育计算机与信息技术专业培养方案
中的一门重要专业核心课程，培养学生网页设计与制作
能力，适应初等教育对信息技术教师人才的基本要求。 同时满足社会对计算机专业人才的需求，适合从事网站 建设相关的岗位群。
8
8
三、课程选用的教材与教参
1、教材选用原则
高等 职业
规划 教材
教材 选用
实训 环节
技能 培养
TM
9
9
三、课程选用的教材与教参
2、选用的教材
书名：网页设计与制作教
程（第2版）
作者：赵丰年 吕宜宏
出版社：人民邮电出版社
2009年10月
优点：北京市精品教材
不足：HTML语言介绍不够
TM
10
10
三、课程选用的教材与教参
TM
4
4
一、课程定位与教学目标
3、教学目标
本课程以Dreamweaver的使用为主线，介绍网页设
计与制作的相关技术。使学生理解网页制作的基本概念
和理论，掌握网页的设计与制作方法，能使用HTML语言
和CSS样式修改网页。理解远程站点和本地站点的概念
，掌握站点的建立和发布。根据高职高专人才培养的特
点，本课程的教学目标包括知识目标、能力目标和能力
31
31
七、教学评价与课程特色
1、教学评价
教师对 学生评 价
学生对 教师评 价
教学 评价
社会对 学生评 价
TM
32
32
七、教学评价与课程特色
2、课程特色
班级网站（11初信http://192.168.100.99:2011/）
TM
33
33
八、教学反思与改革
课程教学中我们重视面向全体学生，缺少对尖子
TM
22
22
四、教学内容与学情分析
3、教学重难点
重点
Dreamweaver使用
HTML标签 CSS样式设置及布局
难点
CSS布局
网页元素定位
TM
23
23
四、教学内容与学情分析
4、学情分析
学习态 度好
掌握深 度不够
学情 分析
学习时 间有限
更重视教 育类课程
TM
24
24
五、教学过程设计与实施
1、教学方法
硕士研究生 硕士研究生 硕士研究生
讲师
讲师 讲师 副教授
TM
28
28
六、课程教学团队
2、团队教研情况
听课 交流
举办比 赛活动
精品 课程
ቤተ መጻሕፍቲ ባይዱ
教研
数字化 校园 开发网络 学习课程
TM
29
29
六、课程教学团队
2、团队教研情况（举办比赛活动）
TM
30
30
六、课程教学团队
2、团队教研情况（精品课程建设）
TM
讲解、案例分析、实例示
范让您轻松学习DIV+CSS
布局技术、轻松实现
xhtml标准网页重构开发
。
3、网络资源
TM
16
16
三、课程选用的教材与教参
（3）优秀设计网：
/
提供平面设计、网页设
计、编程开发、设计欣
赏、酷站欣赏网页特效
等。
3、网络资源
TM
17
17
三、课程选用的教材与教参
教师组成。他们有丰富的教学经验，承担着相应的专业
课程教学。
TM
27
27
六、课程教学团队
1、团队成员
姓 名 性 别 年 龄（岁） 工作时间（年） 学 历 职 称
李瑞兴
男
52
1983年
本科
副教授