《网页设计与制作》说课

一、课程简介1．课程地位《网页设计与制作》是计算机网络专业的一门重要的专业核心课程，是我院计算机系计算机网络技术专业重点建设课程之一，目前已经申报了第一批院级精品课程，组建了精品课程教研团队。

本课程和《动画设计与制作》、《平面设计与制作》、《多媒体技术与应用》、《数据库》以及《动态网站开发》等课程相结合，形成满足网站维护员、网站开发工程师等职业岗位实际工作需要的课程体系。

2.课程性质本课程是网站开发的入门课程，是一门职业能力应用课程。

主要让学生掌握HTML、CSS在网页制作中的应用，以及利用Dreamweaver制作网页和管理网站的方法，并且让学生对JavaScript和ASP有一个入门的了解。

学习了本课程后，学生可以独立完成静态网站的制作和管理，并且为今后学习动态网站开发课程（例如ASP、等课程）打下坚实的基础。

3.课程特点（1）本课程实践性强，侧重技能的训练和掌握。

（2）为了实现学生获得“双证”的教学目标，课程内容的设定和网页设计师职业资格认证考试内容相结合。

（3）以建构主义学习理论为指导，本课程在教学过程中通过网络建构具有协商和对话、资源共享的真正意义的学习环境。

（4）课程内容和职业素质融合性较强，在知识产权、团队协作等职业素质的培养方面有比较明确的教学目标。

4.选用教材本课程采用的是自编教材——由清华大学出版社出版的《Dreamweaver网页制作实用教程》。

本教材是清华大学出版社21世纪师范院校计算机实用技术规划教材，已经被全国多所高等院校选为网页设计与制作正式教材，目前已经重印4次，发行1万多册。

由于本课程采用了自编教材，并且有多所高等院校采用本教材进行教学，所以对本课程的进一步改革和发展带来的便利。

我们在教学过程中积累经验，寻找不足，和同行进行交流，不断地完善本课程的教学内容和教学方法。

二、课程内容Dreamweaver是目前从事网页制作和网站管理的专业软件，在业界使用最广泛，是从事网站开发与管理相关职业必须掌握的软件之一。

《网页设计与制作》课程教案第一章：网页设计与制作概述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课件是为教师上课提供方便，而网页形式的课件是为学生课下学习及答疑提供方便】，配有全程视频教学录像。

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

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

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

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

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

具体给⼤家阐述如下：⽼师教学之前的教学设计：根据知识点——设计任务——组合项⽬——达成⼀项⼯作⽼师教学中的教学设计：给学⽣布置⼀项⼯作（⼯作导向）——将⼯作转化为项⽬（项⽬导向）——将项⽬细化为每⼀个任务（任务驱动）——通过任务引出知识点（知识学习）学⽣的学习中的设计：进⾏分组——确定⼩组的⼯作内容——接受项⽬任务——⼩组细化任务并分⼯到成员——完成任务，其中会有不可能完成的任务——为了完成需要进⼀步学习相关的知识学⽣学习后的设计：根据知识完成细化的任务——⼩组成员将各⾃任务组合完成项⽬——达成⼀项⼯作教师教学后的设计：进⾏教学评价（分任务评价与项⽬评价）总之，通过该课程的教学，使学⽣最终能够⾃主开发⼀个完整的⽹站，毕业后能够直接从事企事业单位⽹站的开发设计与管理维护等⼯作。

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

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

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

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

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

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

一、教案基本信息教案名称：《网页设计与制作》教案适用课程：网页设计与制作课时安排：共20课时，每课时45分钟教学目标：1. 了解网页设计的基本概念和流程；2. 掌握HTML、CSS和JavaScript的基本语法和应用；3. 能够独立设计和制作简单的网页。

教学方法：1. 讲授与实践相结合；2. 案例分析；3. 小组讨论与协作。

教学内容：1. 网页设计基本概念与流程；2. HTML基本语法及应用；3. CSS基本语法及应用；4. JavaScript基本语法及应用；5. 网页设计与制作实践。

二、第一章：网页设计基本概念与流程课时安排：2课时教学内容：1. 网页设计基本概念；2. 网页设计流程；3. 网页设计原则与技巧。

教学方法：1. 讲授与实践相结合，通过案例分析让学生了解网页设计的基本概念和流程；2. 小组讨论，让学生分享对网页设计原则与技巧的理解。

教学活动：1. 引入案例：分析优秀网页设计案例，引导学生了解网页设计的基本概念；2. 讲解网页设计流程，让学生掌握从需求分析到设计制作的过程；3. 小组讨论：学生分组讨论网页设计原则与技巧，分享心得体会。

作业与评估：1. 课后作业：要求学生总结本节课所学的网页设计基本概念和流程；2. 课堂表现：观察学生在讨论中的参与程度和理解程度。

三、第二章：HTML基本语法及应用课时安排：4课时教学内容：1. HTML基本语法；2. 常用HTML标签及属性；3. HTML页面结构。

教学方法：1. 讲授与实践相结合，通过案例让学生掌握HTML基本语法和常用标签；2. 小组讨论，让学生分析实际案例中的HTML代码。

教学活动：1. 讲解HTML基本语法，让学生了解HTML代码的构成；2. 演示常用HTML标签及属性，让学生通过实践掌握其应用；3. 案例分析：学生分组分析实际案例中的HTML代码，理解其结构。

作业与评估：1. 课后作业：要求学生编写一个简单的HTML页面，运用所学标签和属性；2. 课堂表现：观察学生在讨论和实践中对HTML基本语法的掌握程度。