网页设计与制作说课
网页设计与制作说课稿
新邵职中
16
2．课程教学方法设计
本课程采用任务驱动的教学模式，实施项目化教学方法，
课堂与实训3地．点课一程体教化学。方从法以设下三计个方面展开。
（3）采用“四步曲”的教学流程， 融“教、学、做”于一体
第一步，教师展示示范项目，分析工作任务， 演示操作流程，讲解涉及的理论知识。 第二步，下达实训项目工作任务，提出完成任 务的具体要求和完成时间。 第三步，小组协作学习，完成实训项目。 第四步，项目验收，学生自我评价，教师综合 评价。
《网页设计与制作》 说课
一
课程构思
二
课程设计
三
课程实现
四
课程运作
新邵职中
2
1、课程定位
课程名称
网页设计 与制作
授课对象
计算机专业 学生
课程性质
计算基础机课专业
先学课
F计la算sh机动应画用等
新邵职中
理论
72
实践
108
3
2．课程目标
课程目标包括知识目标和能力目标。Байду номын сангаас
知识目标
☺ 了解WWW、HTTP、HTML、CSS的定 义、概念和作用； ☺ 理解服务器、客户端、浏览器的概念和作 用； ☺ 理解HTML语言中的常见标记及其作用； ☺ 熟练掌握Dreamweaver的基本操作方法； ☺ 理解表格、框架、层的作用，掌握设置其 属性的方法； ☺ 理解CSS样式表的作用和意义，掌握定 义CSS样式的方法； ☺ 理解表单的作用，掌握设置表单元素属性 的方法； ☺ 理解行为的作用，掌握设置行为的方法， ☺ 理解模板和库的作用；
4
3、课程特色
任务驱动
大案例贯穿
学生 主体
粉墨登场—网页制作说课课件
培养学生专业能力、专业素养和综合能力的目标。
我们将学习情景具体化和细化，融入到具体案例中。 以一个网站的设计制作贯穿于整个教学过程当中，根据典型工 作任务的教学内容和要求，我们选择了基本能涵盖真实工作情景的 六个学习情景，并相应选择了六个典型网页作为主要教学内容。
二、课程设计
（三）教学模块的分配和重难点分析
毕 业 生 调 查 表
六、课程特色
（一）课程组对课程进行全面改革，形成了以典型实例贯穿全局，分设六个 学习情景囊括重点知识点的教学模式，教学效果显著提高。
（二）该课程在考试方面进行了改革，引入了信息产业部全国电子教育培训 中心的CEAC“网页设计师”认证考试。让学生在学习完课程后，通过考试，
能拿到相应的专业认证。
实现各个环节的综合应用能力，并掌握几种典型问题的典型解决方 案，为今后的实际工作打下坚实的基础。
五、教学效ห้องสมุดไป่ตู้评价
（一）学生获奖情况和网页作品
近几年，学生参加各种院级和市级网页设计大赛并获得奖项，曾连续三
年在济宁市职业网页设计技能大赛中获得第一名。在2008年的大赛中更是获 得个人和团队双第一的好成绩。
进行编写。
（二）实训基地的开发：虽然已有一些合作企业，但是存在不够稳
定、接收学生过少的问题，所以我们正努力开发更多的校外实训基
地。使学生在正式就业之前就得到较好的锻炼，为自己今后就业奠 定良好的基础。
行 为 的 具 体 应 用
说 课 部 分
行为的具体应用——粉墨登场
一、教材分析 二、教法
三、学法
生多进行变换。一方面让学生熟悉了所学知识及相应操作，另一
方面让学生带着自己的想法进行创造，培养了学生的创新精神。
《网页设计与制作》课程讲义
《网页设计与制作》课程讲义第十六讲使用DIV+CSS格式化网页课堂回顾：我们制作网页的重要步骤就是能够布局好网页，也就是将设计好的网页设计图分割成一个个单元格，然后将每部分图片与文字等网页信息添加到布局好的结构中，在之前我们使用的布局方法是使用表格。
使用表格布局网页，加以在html标记中进行各个部分的属性设置构成了我们的网页。
那么当前较为流行的制作网页的另一个方法就是用DIV+CSS格式化网页。
那么我们如何用DIV+CSS格式化网页？使用这种方法格式化网页有什么优越的地方呢？下面我们将通过制作网页实例的对比来学习和参照一下两者之间制作网页的区别。
在前面的章节中学习了基本的网页元素，及其对应的HTML标签的语法。
但对于网页设计者来说，仅学会这些是不够的。
在Web 2.0标准中，HTML语言只用于定义网页的结构。
要制作出漂亮且符合规范的网页，还需要使用CSS样式表来表现网页的外观。
本章将介绍CSS的基本概念，以及通过CSS控制网页元素，如文字外观、背景设置和元素定位等。
新课学习要点提示：一、 CSS基本概念CSS是Cascading Style Sheets的缩写，中文译为层叠样式表，用于控制或增强网页外观样式，并且可以与网页的内容相分离。
CSS 1.0是W3C工业合作组织首次发布于1997年，用于对HTML语言功能的补充。
1998年又推出了CSS 2，进一步增强了HTML的语言功能。
但由于浏览器之间的差异，对CSS的支持并不完全兼容。
本书讲解的CSS主要针对IE用户。
二、CSS功能介绍及优点在Web早期，网页一般用于技术交流，HTML只用于描述结构和内容。
但随着Web的流行与发展，漂亮的外观变得格外重要。
随着网页越来越复杂，HTML代码变得越来越繁杂，大量的标签堆积起来变得难以阅读和理解。
此时CSS的出现为这种状况提供了解决之道。
CSS还原了HTML语言原本的描述结构功能，不仅实现了美化页面，还使页面结构变得简洁合理且清晰可读。
网页设计与制作课程说课PPT
谢谢各位!
网络技术专业 电话：
➢ 1、课程的性质和目标 ➢ 2、课程在专业中的地位 ➢ 3、前导和后续课程 ➢ 4、教学内容安排 ➢ 5、课程和学生分析 ➢ 6、教学安排 ➢ 7、教学设计 ➢ 8、考核和评价 ➢ 9、教师队伍 ➢ 10、课程资源 ➢ 11、改革设想
课程的性质、目标
网页设计与制作是网络技术专业中第三学期开 设的课程。
课程、学生分析
➢ 本门课程是实践性比较强的课 程。
➢ 高职学生趋向于在实践动手中 学习。
教学安排
网页教学
实践课教学
1、专业机房作为 硬件保证
2、配有服务器 3、部署了教学实
验网站
50%
理论课教学
50%
有专门的多媒体教室， 提供80余个座位
教学安排
网页教学
网站建设流程： 确定站点名称-> 确定主要内容-> 确定风格和模块
->制作页面 ->测试和部署
->网站维护
50%
课程设计
50%
教学设计
网页设计与制作课程正在基于工作过程 的教学模式的探索。在理论课和实践课 教学中都实施案例教学。
理论课教学设计
理论课是以知识点为一个教学单位， 按如下步骤教学：
实践课教学设计
实践课和理论课的知识点相对应， 步骤安排如下：
给出案例
主要是学习静态网页制作的知识、技术和相关 的工具
学完该课程后，一方面可以运用相关的知识、 技术和各种工具独立的设计和制作出基于静态 页面的小型网站；另一方面为后续的学习打下 基础，即为动态网页设计页面的结构。
本课程既是基础性课程又是一门应用性课程。
在网络技术专业中的地位
专
业
网页设计与制作说课
出包括课程主要知识点的综合性网站。期末考核成绩占总评成绩的 60%
四 教学资源
4.1 教材选用情况数字化教辅资源 4.2 实践教学条件 4.3 师资队伍
4.1 教材选用情况数字化教辅资源
六 课程特色
特色： 教学观念先进，突出应用能力培养。 本课程本着理论够用、实践加强的原则，突出应用能力的培养。适 时调整教学内容，保持与Web技术的发展同步。改革考核方式，注 重学生的学习过程。
创新点：
1、在学习当中，注意引导学生获得美的熏陶，提高审美能力。 2、强调技术与艺术的融合，将网页作品当作一份具有生命力的 艺术品。 3、 以真实网站作为教学案例，让学生在真实工作环境中训 技能，提高学生适应岗位需求的能力。 4、 虚拟项目设计考核模式。，给学生一些虚拟项目作为课程 设计，培养学生单独规范的做项目的能力及网站设计的综合能力， 也让学生找工作时可以向用人单位提供一个完整的网站设计的作品
其它网络资源
4.2 实践教学条件
学生实习实训机房具有一定规模，能够人手一机，满足教学大纲要求 的全部实训内容和选修实训内容。学生上机所需的软件齐备，如： PhotoShop、dreamweaver等。在多年的教学过程中，本课程 已具备了较完整的多媒体教学的条件，有整套的电子教案，案例、习 题等
4.3 师资队伍
3. 重视以真实的社会项目作为教学内容，倡导将教学结果作为项目内 容直接提交给用户，使得学另外生能够零距离地接触市场。扩大校 外实训基地建设，以满足本课程真实工作任务下的教学。
4. 在学习网页设计技术之前，引入美术课程的教学，使学生具备一定 的美术功底
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.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、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
强化网页制作技能、积累网页制作经验
激发自身学习兴趣、形成持久学习动力 提升自主学习能力、满足职业岗位需求
三.教学设计 ——理念与思路 1、设计理念： 突出专业课程的职业性和实践性。按照“职 业岗位→岗位需求能力→确立教学项目”的项目 导向式的运行机制来组织教学。 2、设计思路： 以培养职业能力为核心，以案例教学为中心 的课程实施积极探索教学方法与成绩评价方法的 创新，保证课程目标的实现。
目
一 课程定位 二 课程目标 三 教学设计 四 教学实施 五 教学资源 六 课程特色
录
七 改革思路
一.课程定位－－课程性质
网页制作是高职高专院校计算机教育专 业和其他相关专业学生应该掌握的重要技能 之一。《网页设计与制作》作为软件技术专 业的一门必修课，重在培养学生的专业应用 能力。
1.课程定位－－职业岗位
企业网络建 设与管理
计算机网络 技术专业职 业领域
企业网站开 发与维护
本 课 程 相 关 的 岗 位
网页设计师 网站美编 企业网站策划 网络广告设计
IT产品营销、 客服技术支持
一.课程定位－－课程地位
本Байду номын сангаас程
《计算机应用基础》 《多媒体制作技术》
《动态网页设计》 《多媒体作品创意》 《企业网站设计与开发》
本课程的学习有助于学生深入学习计算机类相关专业 其他知识和提高职业技能，完善学生的专业知识结构， 提升学生从事实际工作的综合素质
二.课程目标
通过学习《网页设计与制作》课程，学生能够设计制 作出布局美观、链接合理、包含文字、图形、图象、动 画、声音、视频等多种媒体信息并具有一定交互功能的 网页；概括说来，该课程教学目标主要集中在以下几个 方面： 赏析各类经典网站、掌握网页制作方法
学生作品展示
学生作品展示
学生作品展示
谢谢！
四.教学实施－－教学组织
以课堂教学为主，适当引导学生自学探究、任务驱动、互 助协作等，采取多种教学组织形式的灵活穿插和结合以培 养学生自主学习，创新学习，合作学习的意识和能力
四.教学实施 ——教学方法教学手段
主要采用课堂讲解及案例分析的教学方法，同时结合多媒 体课件演示、课堂讨论、上机操作，个别辅导等多种手段 相结合
课堂讲授：在多媒体教室授课，借助于计算机、投影仪等 设备，将课程知识中涉及的声音、文字、图形、图像等多 媒体信息立体地表现出来，使学生更为直观顺利地理解掌 握教学内容，提高教学效率 上机实践：在上机实验课时，教师将本次课的素材、学习 资源及实验要求共享资源，供学生下载。学生上机遇到问 题，可以马上询问老师，下课时，学生将完成的作业上传 教师登录进行批阅
三.教学设计 ——教学内容的选取及依据
教学内容的设置，是为了满足职业能力培养的 需要。通过对岗位需求的调查分析，《网页设计 与制作》这门课程的教学内容主要选取以下内容： 网页的基础编程、网页制作、网站管理等
三.教学设计 ——教学模块的分配
针对职业能力的培养要求及网页设计与制作的岗位特点， 设计了以下六个模块，每个模块又包含一个或多个教学单 元 模块一：网页赏析模块 欣赏优秀的网页，激发学习网页设计的兴趣； 分析优秀网页的布局结构、颜色搭配、视觉效果 模块二：网页基础模块 了解网页的相关概念和术语，认识网页中的主要构成元 素； 了解一些制作网页、处理图像、制作动画的专业工具
7.改革思路－－改革方案 7.课程特色
7.1 存在问题
建立网站教学管理。增强教师应用多媒体网页教案的意 识，以向学生实时展示网站建立与网页制作方法在实际中 的应用；建立教学资源库，以方便学生随时学习，提高学 习效率；通过论坛等方式促进教师与学生之间的沟通和教 师答疑 在学习网页设计技术之前，引入美术课程的教学，使学 生具备一定的美术功底
三.教学设计 ——教学模块的分配
模块三： 网页制作模块 主要有页面控制、文本操作、图像操作、超级链接、 表格布局、表单网页、层的布局、行为特效、框架网页 等单元 模块四：网页编程模块 HTML语言 CSS美化网页 模块五：网站管理模块 网站管理 网站测试 模块六：网页设计项目实训 网页制作综合实训
五.教学资源
丰富的网络资源 理实一体化教室
基于岗位能力的项目
六.课程特色
１
２
３
４
培养学生可持 续发展的能力 和职业迁移能 力
项目为基线 以任务驱动 为导向
突出职业性 体现先进性
融“教、学、 做”于一体
七.改革思路－－存在问题 7. 七课程特色 改革思路
教师知识结构欠完整，教授网页教师在图形图像处理及 动画制作方面不够熟练 教学资源匮乏，缺少系统的教学及学习资源，教师与学 生互动有限 教学内容与市场需求结合不够紧密 侧重技术的掌握，学生美工基础薄弱
四.教学实施 ——考核方式
采用平时考核与期末考核相结合方法: 平时考核：教师对学生每次上机练习所制作的网站或网页 进行访问，并评定作业成绩。平时作业成绩占总评成绩的 40%。 期末考核：采用在机房上机考试的方法。要求学生在指定 时间内制作出包括课程主要知识点的综合性网站。期末考 核成绩占总评成绩的60%