网页设计与制作说课

合集下载

网页设计与制作说课稿

新邵职中
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%
教学设计
网页设计与制作课程正在基于工作过程的教学模式的探索。在理论课和实践课教学中都实施案例教学。
理论课教学设计
理论课是以知识点为一个教学单位，按如下步骤教学：
实践课教学设计
实践课和理论课的知识点相对应，步骤安排如下：
给出案例
主要是学习静态网页制作的知识、技术和相关的工具
学完该课程后，一方面可以运用相关的知识、技术和各种工具独立的设计和制作出基于静态页面的小型网站；另一方面为后续的学习打下基础，即为动态网页设计页面的结构。
本课程既是基础性课程又是一门应用性课程。
在网络技术专业中的地位
专
业

网页设计与制作说课

行访问，并评定作业成绩。平时作业成绩占总评成绩的40%。期末考核：采用在机房上机考试的方法。要求学生在指定时间内制作
出包括课程主要知识点的综合性网站。期末考核成绩占总评成绩的 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是目前从事网页制作和网站管理的专业软件，在业界使用最广泛，是从事网站开发与管理相关职业必须掌握的软件之一。

网页设计与制作说课稿（盒子模型） -完整课件PPT

教学重难点
教学重点
掌握DIV+CSS布局应用与技巧，熟练CSS语法规则。
教学难点
深入理解布局的精髓——盒子模型以及如何灵活、简练的应用。
提纲
教法与学法
◇课前分析
◇教学目标及重难点
1
◇教法与学法 ◇教学时间安排 ◇教学设计
小组讨论法
宏观：项目教学法
◇教学反思
直观演示法
微观
任务驱动法
活动探究法
提纲 ◇课前分析 ◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
提纲 ◇课前分析
课程分析教材分析学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教材分析
上海交通大学出版社《网页制作三合一案例教程》
第9章“CSS标准流布局”。对页面进行整体布局——盒子模型
提纲 ◇课前分析
课程分析教材分析学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
学情分析
对文本、图形、动画等多媒体信息的处理技术有了一定的使用经验，但基础差异大计算机实际操作能力较弱对理论讲解不感兴趣。对网页内容、结构、效果等设计的优劣有一定的感性认识，但自主创作设计能力不足
提纲 ◇课前分析 ◇教学目标及重难点
教学目标重点难点
◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
展
示与
自信感、成就感、责任心
评
价
以工作任务为主线，以学生为主体，以教师为主导，融“教、学、做、评”为一体。
提纲
布置作业
◇课前分析
◇教学目标及重难点
◇教法与学法

《网页设计与制作》教学说课

课程教案（№:4）
授课内容
HTML语言简介
课型
理论实践
授课学时
2
教学方法与手段
讲授法
教学目的与要求
1．了解HTML语言，Байду номын сангаас点掌握HTML文件的基本结构和语法格式；
2．掌握标记语言的用法；
3．熟记<title>标记、<marquee>标记及常用属性代码。
教学重点与难点
教学重点：
1．HTML文件的基本结构；
教学后记：
第一节课，应首先介绍网站发展的前景，重点分解Dreamweaver和其他软件的区别，提出利用网络传播信息，并由此讲述网络发展给网页带来的市场。通过两节课的讲授，感觉到学生能对本课程产生比较大的兴趣！
课程教案（№:2）
授课内容
站点的创建与管理
课型
理论实践
授课学时
2
教学方法与手段
讲授法
教学目的与要求
网页设计与制作教案
课程名称
网页设计与制作
课程类型
使用教材
教材名称：网页设计与制作实用教程主编：刘艳丽
出版社：高等教育出版社日期：2011年5月
学时分配
共64学时，其中理论36学时，实践28学时。
课
程
教
学
目
的
与
要
求
该课程是三年制高职高专电子商务专业的职能课程，目标是让学生掌握网页设计的基本概念，学会使用常用的网页设计工具和相关网页美工软件，能够设计制作常见的静态网页。它要以计算机基础、计算机网络技术课程的学习为基础，也是进一步学习网络编辑、网站建设与管理课程的基础。
2．HTML语法规则
HTML文件以纯文本格式形式存放，扩展名为“*.html”或“*.htm”。

静态网页设计与制作说课.ppt

中认真关注，随时解答疑问。
实践法
24
学生汇报计划与实施过程，回答同学与老师提出的问题。
重点检查流程的认知和网站团队运作，师生共同评价各
小组及个人的工作成果： 1.自评：学生对本项目的整个实施过程进行评价； 2.互评：以小组为单位，分别对其它小组的工作进行评价；
提问引导法实践法讨论法
2
3.教师评价：教师对互评结果进行评价，指出每个
学习情境描述
“个人网站制作”学习情境表1-
1
学习情境1：个人网站制作
学时：38
项目目标
1．掌握个人网站制作的流程和方法、学习欣赏网站，制订个人网站制作策划方案； 2．熟悉Dreamweaver基本工具的使用； 3.分组制作一个个人网站； 4.培养学生团队精神、创新能力、自主探究学习能力、表达能力。
社会能力目标
沟通能力协作精神勤于思考认真做事勇于创新敬业乐业
自主学习能力知识应用能力良好的职业道德较强的工作责任心
课程设计理念
以职业资格为依据
内容选取
教学组织
课程标准
以工作需求为目标以工作过程为主线
以真实项目为载体
教学实施
表现形式
以实际工作为场景
课程设计思路
企业调研
确定岗位（群）
5%
5
项目制作报告
项目制作工作计划、总结和成果评价表书写认真、完整、字迹清楚、页面整洁，项目制作收获较大
10%
合计
100%
敬请专家指导！谢谢！
教师知识与能熟悉网站制作流程，网页制作Dreamweavera工具，网页素材制作方法，网页制作方
力要求
法与技巧；较强的归纳能力；较强的教学管理与教学组织能力。

《网页设计与制作》课程教案

《网页设计与制作》课程教案第一章：网页设计与制作概述1.1 课程介绍网页设计与制作的基本概念网页设计与制作的目的与意义网页设计与制作的应用领域1.2 网页设计原则网页设计的基本原则用户体验设计原则响应式网页设计原则1.3 网页制作工具与技术网页设计软件的选择与使用HTML与CSS的基本语法与使用方法JavaScript的基础知识与应用第二章：网页布局与排版2.1 网页布局的基本概念网页布局的定义与作用常见的网页布局方式布局元素的分类与使用2.2 排版的原则与方法排版的基本原则文本的格式化与排版图片与多媒体元素的排版2.3 响应式网页布局与排版响应式网页布局的概念与意义媒体查询的使用方法布局与排版在不同设备上的应用第三章：网页色彩与字体3.1 色彩的基本概念与应用色彩的视觉效应与心理作用色彩的搭配原则与技巧色彩在网页设计中的应用案例3.2 字体的选择与使用字体的分类与特点字体的搭配原则与技巧字体在网页设计中的应用案例3.3 网页色彩与字体的综合应用色彩与字体的协调与平衡字体大小与行距的设置与调整色彩与字体的个性化应用与创新第四章：网页图片与多媒体元素4.1 网页图片的选择与处理图片的格式与特点图片的选择标准与技巧图片的处理与优化方法4.2 多媒体元素的应用音频与视频元素的应用动画与GIF图片的应用交互式多媒体元素的应用4.3 网页图片与多媒体元素的优化图片与多媒体元素的加载优化图片与多媒体元素的响应式应用图片与多媒体元素的视觉效果与用户体验第五章：网页交互与动画5.1 网页交互的基本概念与原理交互的定义与作用交互的实现方式与技术交互的设计原则与技巧5.2 JavaScript基础与应用JavaScript的基本语法与功能事件处理与DOM操作JavaScript库与框架的选择与使用5.3 网页动画的实现与优化CSS动画的制作方法与技巧JavaScript动画的制作方法与技巧动画的加载优化与性能考虑第六章：HTML与CSS高级应用6.1 表单设计与验证表单的基本结构与属性表单元素的使用与布局表单验证的实现方法6.2 网页组件设计与实现导航栏与面包屑的制作折叠面板与标签页的制作轮播图与幻灯片的设计与实现6.3 网页动画与过渡效果CSS过渡与动画的实现JavaScript动画的实现方法动画的性能优化与调试第七章：前端框架与库7.1 前端框架的基本概念前端框架的作用与优势常见的前端框架介绍框架的选择与使用7.2 Bootstrap框架的应用Bootstrap的基本结构与组件栅格系统与布局设计Bootstrap表单与样式定制7.3 React与Vue框架的选择与应用React框架的基本概念与使用方法Vue框架的基本概念与使用方法框架项目结构与组件化开发第八章：网页兼容性与优化8.1 网页兼容性基本概念浏览器兼容性的原因与挑战兼容性测试的方法与工具兼容性解决方案与最佳实践8.2 网页性能优化网页加载速度的影响因素图片与多媒体元素的优化代码压缩与合并技巧8.3 搜索引擎优化（SEO）SEO的基本概念与原则关键词研究与内容优化代码优化与站点结构调整第九章：网页安全与维护9.1 网页安全基本概念网页安全的威胁与挑战跨站脚本攻击（XSS）的预防跨站请求伪造（CSRF）的预防9.2 数据备份与恢复数据备份的重要性与方法数据库备份与文件备份恢复策略与流程9.3 网站维护与更新网站维护的内容与流程网站更新的方法与技巧网站监控与性能调优第十章：项目实践与案例分析10.1 项目实践流程项目需求分析与规划设计阶段与实现阶段项目测试与上线流程10.2 项目案例分析案例一：个人博客网站设计与制作案例二：电子商务网站设计与制作案例三：响应式企业官网设计与制作项目过程中的问题与解决方法网页设计与制作的趋势与展望重点和难点解析1. 第一章：网页设计与制作概述难点解析：网页设计原则的理解与应用、网页制作工具与技术的熟练运用2. 第二章：网页布局与排版难点解析：响应式网页布局与排版的设计与实现3. 第三章：网页色彩与字体难点解析：色彩与字体的协调与平衡、字体大小与行距的设置与调整4. 第四章：网页图片与多媒体元素难点解析：网页图片与多媒体元素的优化方法、响应式应用5. 第五章：网页交互与动画难点解析：JavaScript事件的处理与DOM操作、动画的实现与优化6. 第六章：HTML与CSS高级应用难点解析：表单验证的实现方法、网页组件的布局与样式设计7. 第七章：前端框架与库难点解析：框架的选择与使用、React与Vue框架的选择与应用8. 第八章：网页兼容性与优化难点解析：兼容性解决方案与最佳实践、网页性能优化的实施方法9. 第九章：网页安全与维护难点解析：预防跨站脚本攻击（XSS）与跨站请求伪造（CSRF）的策略、网站维护与更新的方法10. 第十章：项目实践与案例分析难点解析：项目需求的分析与规划、项目测试与上线流程的控制本教案《网页设计与制作》涵盖了网页设计与制作的基本概念、技术应用、项目实践等各个方面。

网页设计与制作说课

《网页设计与制作》说课稿计算机科学系教师：朱希伟一、说课程1、课程目标【2分钟】2、教材的选用和使用【1分钟】3、参与教改的情况【1分钟】本课程主要培养学生的动手能力，针对职业院校学生的特色，我认为：少用传统的板书讲解理论知识，把大量的理论知识夹杂在实践中进行消化。

采用投影讲解+课堂练习+课下自学+咨询答疑+总结归纳的方式开展教学，使学生学习的效率大幅度提高，有利于激发学生的学习兴趣。

二、说教法1、教学内容的组织与安排【1分钟】《网页设计与制作》是一门实践性很强的课程，课程的目标是培养网站设计与开发能力。

为了达到课程的培养目标，在教学内容的组织与安排上突出了以能力为本位的教学设计，以培养职业综合能力为基础，以胜任岗位要求为出发点，在课程的整个教学过程中采用教、学、做一体化的教学设计。

根据岗位确定的能力要求安排教学和实训课程模块。

按照网页设计岗位的需求以及工作流程对课程教学内容与实训项目进行选择与排序,确定的教学主线如下图所示:2、教学方法的选择、依据和特点【4分钟】（1）、老师如何教（四步教学法）第一步：项目导入（说明本单元要完成的教学目标，然后展示范例的实际效果）第二步：讲解示范（利用投影讲解项目的完整制作方法，单元所涉及到的理论知识全部集中在项目中进行讲解和消化）第三步：模仿操作（学生进行素材的下载，按照制作要求，边学边练）第四步：总结练习（教师对本章节的重点和难点进行归纳，布置单元练习强化作业，学生通过练习掌握所学知识与技能）课堂教学网站及网络教学资源（2）、学生如何学【课下学习】鉴于《网页设计与制作》课程开设于新生班第一学期，实际上课周数比较短，仅仅利用课堂教学无法满足岗位对知识能力的要求。

因此，如何为学生提供课下学习的机会和条件、学生课下学习遇到问题如何快速解决、提高学生的成就感、循序渐进的引导式教学就成了迫切要解决的问题。

1、课下学习条件本课程提供全套网页形式的多媒体课件【PPT课件是为教师上课提供方便，而网页形式的课件是为学生课下学习及答疑提供方便】，配有全程视频教学录像。

网页设计与制作说课(软件技术_)

（2）学以致用，以“用”促学，边“用”边学，突出“教、学、做”一体化的教育理念。
（3）学生是学习主体，鼓励学生职业能力发展，加强创新能力和意识培养的理念。在设计中，既要考虑学生职业技能的训练，又要关注综合职业素质的养成，为学生的可持续发展奠定良好的基础。
2、设计思路：
以培养职业能力为核心，以虚拟项目教学为主要手段，积极探索教学方法与成绩评价方法的创新，保证课程目标的实现。
以课堂教学为主，适当引导学生自学探究、任务驱动、互助协作等，采取多种教学组织形式的灵活穿插和结合以培养学生自主学习，创新学习，合作学习的意识和能力
3.2 采用的教学方法教学手段
主要采用课堂讲解及案例分析的教学方法，同时结合多媒体课件演示、课堂讨论、上机操作，个别辅导等多种手段相结合
网页制作是高职高专院校计算机教育专业和其他相关专业学生应该掌握的重要技能之一。《网页设计与制作》作为软件技术专业的一门必修课，重在培养学生的专业应用能力。学生通过该门课程的学习能为后续课程如《Javascript》、《XML及应用》的学习奠定基础，同时社会就业对学生该方面知识也有较强烈需求，因此加强该门课程的建设，改善教学条件，提高教学质量有着重要意义。
技能与素质目标培养学生收集、处理信息，准备、加工素材的能力培养学生制作静态网页的能力培养学生设计网站的综合能力培养学生的策划能力、色彩感悟能力、结构布局能力和想象力训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的
动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质
网页设计与制作

网页设计与制作课程说课稿

《网页设计与制作》课程说课稿一、课程定位《网页设计与制作》课程是我院计算机应用技术专业、计算机网络技术专业及电子商务专业的重要专业基础技能课程，该课程不仅实用性强、应用面广，而且与岗位的联系非常密切，仅仅就这一门课程的学习，学生毕业后就可以从事相关网页设计与制作的工作，考取相关的网页设计与制作员的资格证书，如果将此作为技能基础，继续学好后续基于网络编程的动态网页设计技术，学生还可以从事网络软件的设计与开发，进行商务网站的设计与制作，同时也可以考取网页设计师、网络软件工程师等相关国家职业资格证书。

该课程的开设，正好满足我校关于“高素质、技能型人才”培养目标的需求，通过该课程的教学，可以培养出一批优秀的、能够在一线工作岗位上从事网页设计与制作、网站规划、管理与维护的工作人才。

基于该课程的主要工作岗位有：网站管理与维护人员、网页设计与编辑人员、网站策划人员及网页美工人员等。

二、课程教学设计的过程与思路在教学过程中，结合职业岗位对人才的需求（一线工作岗位上从事网页设计、制作、编辑，网站规划、维护和管理的人员）、我校对人才培养的目标（培养高素质、技能型、应用型人才）及本课程对人才培养的目标（能够独立完成一个网站的建设，毕业后能够从事企事业单位的网页设计与制作、网站维护与管理等工作的人才），我们将培养学生熟练的网页设计与制作操作技能作为培养重点，在具体课程教学设计中，应用“工学结合”的教育思路、实施“建构主义”的教学方法，采取“小组协作学习”的学习方式完成整个课程的教学与学习。

在“工学结合”的教育思路下，主要以“工作导向——项目导向——任务驱动——知识学习”的一个架构来完成教学。

具体给大家阐述如下：老师教学之前的教学设计：根据知识点——设计任务——组合项目——达成一项工作老师教学中的教学设计：给学生布置一项工作（工作导向）——将工作转化为项目（项目导向）——将项目细化为每一个任务（任务驱动）——通过任务引出知识点（知识学习）。

网页设计与制作说课件

教学案例
每一项内容对应一个子任务
教学内容
《NBA精彩回放》网站任务分解图
❖ 任务1 网页设计准备 ❖ 任务2 建立站点
❖ 任务3 编辑网页
❖ 任务4 创建超级链接
❖ 任务5 使用模板、库项目和 CSS样式
❖ 任务6 使用动态对象
❖ 任务7 HTML语言和 JavaScript技术
❖ 任务8 设计图像
对照成熟方案查漏补缺
任务驱动：自己开发新项目
四如何开展教、学、做
3 教学设计——以案例2为例
教学项目：建立站点教学目标：掌握网站规划和设计基本知识
掌握为网站创建站点并添加相应文件夹和文件的技能提高分析解决问题的能力，撰写简单科技文档能力教学方法：任务驱动教学法教辅手段：利用多媒体系统进行教学和演示参与人员：全体学生实训地点：专业机房教学互动点： 1、网站规划：引导学生就如何进行网站规划分析、讨论、交流 2、建立站点：引导学生就如何建立站点交流和讨论
学生
一课程开设的必要性
2 课程地位与前后课程的关联
就
地位：专业核心课
业
网页设计
课程
与制作课程
前导：计算机基础、平面设计、flash动画
后续：网络数据库、web编程语言
二课程设计理念与思路
1 课程设计理念
以教师为主导
以学生为主体
二课程设计理念与思路
教
实际项目开发过程作为教学主线
❖ 任务9 创建Web对象
❖ 任务10 创建动画
❖ 任务11 网页中的动画设计
❖ 任务12 检查与发布网站
二课程设计理念与思路
3 学生具备的职业技能和职业素养