《Web前端设计与开发》课程教学大纲

1、Web前端设计与开发课程教学大纲一、课程基本信息课程编号：12179课程名称：Web前端设计与开发英文名称：Design and Development of Web Front-end课程类型：专业课课程要求：选修学时/学分：48/3（讲课学时：32 实验学时：16）先修课程：面向对象程序设计、计算机网络后继课程：基于 Java 的微服务架构与应用、大数据项目综合实践适用专业：数据科学与大数据技术 二、课程描述 “Web前端设计与开发”是数据科学与大数据技术专业的选修课，旨在引导学生掌握Web前端设计与开发问题中的理论知识和开发工具。通过理解Web的基本概念，了解Web的工作原理；掌握HTM

2、L、CSS、JavaScript的基本语法及使用方法，能够熟练进行前端的设计与开发；熟悉Web开发的国际标准体系，掌握jQuery框架的使用方法，并能够使用该框架进行前端设计。通过本课程的学习，使学生具有一定的Web前端开发能力，为未来大数据领域的前端开发和应用开发打下良好的基础。三、课程教学目标1. 了解Web前端设计与开发的应用背景，掌握Web前端开发所需要的理论知识、工程知识，掌握前端开发的基本技术，能够针对大数据系统的前端进行设计。（支持毕业能力要求3）2. 掌握HTML5、CSS3、JavaScript技术在Web前端开发中的运用方法。针对具体工程问题，能够恰当选择开发框架，进行前端

3、开发、模拟和实现。（支持毕业能力要求5）3. 在实验过程中，培养学生独立解决问题的能力，提高对技术的运用并能够针对实际问题进行分析与解释，在开发过程中体现出创新思维。（支持毕业能力要求3）四、教学内容、安排及与教学目标的对应关系单元教学内容单元教学目标学时教学方式对应课程教学目标1一、Web技术概述1.1 Web概述1.2 超文本与标记语言1.3 Web标准1.4 Web开发工具(1)了解本课程研究的对象、内容，明确本课程的地位；(2)理解超文本与标记语言的概念，能理解其使用的环境和意义； (3)了解W3C制定的Web标准，能够说明网页的组成部分与标准的对应；(4)会使用Web开发工具对网页进

4、行设计。2讲授1、22二、HTML5语言2.1 HTML5基础概述2.2 HTML5基本标记2.3 HTML5表格2.4 HTML5表单(1)了解HTML的作用和主要版本差异；(2)能说明HTML文档结构，并对静态页面做出规划；(3)掌握标记语法，能熟练使用图片、链接、列表、表格和表单标记以及属性、事件等元素完成静态页面设计。8讲授1、23三、实验1：使用HTML5创建网站页面 能够使用HTML5标签进行前端页面的设计，其中包括图片、链接、表格、表单等的制作。4实验1、2、34四、CSS样式表4.1 样式表的定义与语法格式4.2 页面布局定位4.3 CSS网页元素设计(1)在页面布局的CSS样

5、式表中体会CSS代码所起到的作用；(2)掌握样式表的编写基本模式，基本语法与布局方式，进行页面布局。8讲授1、25五、实验2：使用CSS样式表设计网站外观能够熟练使用CSS样式表对网站外观样式进行设计。4实验1、36六、JavaScript语言6.1 JavaScript语言概述6.2 ECMAScript 语法6.3 ECMAScript 行为和对象6.4 BOM与DOM编程6.5 实例讲解(1)掌握JavaScript的使用方法，能正确在HTML文档中插入JavaScript脚本；(2)掌握JavaScript的基本语法规则，会使用ECMAScript语句、对象进行程序设计；(3)掌握BO

6、M中Windows对象和Document对象的属性、方法，能够运用JavaScript语言结合BOM实现控制文档页面；(4)了解运用DOM对象的用法，能正确使用DOM对象动态设计文档页面。12讲授1、27七、实验3：使用JavaScript 实现页面的动态交互设计基于JavaScript完成一个动态页面设计。6实验1、2、38八、vue框架简介8.1 MVVM模式8.2 vue框架的开发(1)理解MVVM设计思想对前端开发带来的好处，能够讲清楚MVVM与MVC模式使用上的区别；(2)使用vue框架进行页面开发，能够体会其对页面特效实现带来的方便。2讲授1、29九、实验4：使用vue设计带有特效

7、的网页基于vue完成一个特效页面设计。2实验1、2、3五、其他教学环节（课外教学环节、要求、目标）课外实验（课外24学时）1.进一步熟悉HTML5的标签，重点学习Canvas对象对图像的操作。（4学时）2.进一步熟悉JavaScript的核心对象，使用它制作一个页面，完成数据检测等功能。（4学时）3.进一步熟悉vue框架，使用它进行页面的设计。（6学时）4.综合所学知识，设计一个网站的前端页面。（10学时）六、教学方法本课程与课堂教学为主，结合实验等教学手段完成课程教学任务。1.课堂教学主要采用CAI教学，辅助多媒体、综合运用各种教学手段，包括电子教案，网络课堂等，构建立体化的教学环境，引进优

8、质教学资源，促进学生的个性化学习和动手能力的提升。2.教学方法以单元式教学为主，增加典型应用示例，学生小组研讨问题等措施。3.实验过程中，培养学生独立解决问题的能力，能够针对实际问题进行分析与解释，并体现出创新思维。4.利用课外实验加深和拓展技能，提高针对复杂技术的运用，提高学生独立解决问题的能力。七、学习评量考试成绩为百分制，由实验成绩和期末成绩组合而成。各部分内容及所占比例如下：1.实验成绩(30%)主要考核学生对实验的完成能力，利用基本知识解决实际问题的编程实践的能力。主要分三次对实验报告和实验表现进行考核，每次10分。2.期末考试成绩(70%)主要考核综合运用基本概念和方法分析和解决问

9、题的能力和程度。书面考试形式。书面考试形式，题型包括填空、选择、问答题、分析题，综合设计等。考试时间为2学时。3. 说明可利用指定“八、教学资源”中指定的MOOC的合格证书+评价作为课程学习成绩，参加其他MOOC并计划代替学习成绩者须在课前向任课教师提出申请，由课程组教师讨论决定。八、教学资源1教材1张树明Web前端设计基础HTML5、CSS3、JavaScript清华大学出版社，20172. 参考书目1 谬亮，陶颖Web前端设计与开发HTML5+CSS3+JavaScript清华大学出版社，20182 HYPERLINK /writer/Ethan_1.html t _blank Ethan， HYPERLINK /writer/Brown_1.html t _blank Brown著， HYPERL