《网页设计与 Web 前端开发》课程教学大纲、授课计划

《网页设计与Web前端开发》课程教学大纲一、课程基本信息课程名称：网页设计与Web前端开发课程代码：课程类型：专业核心课授课对象：软件工程、数字媒体技术等专业学生总学时：48+16学时（其中教学周48学时，实践周16学时）学分：3学分二、课程教学目标（一）知识目标使学生全面了解Web相关基础知识，包括Web概述、网页标准、网站开发工作流程及常用开发工具。深入掌握HTML5、CSS3、JavaScript的核心知识，如HTML常用标签、CSS样式表及布局方法、JavaScript脚本编程基础等。熟悉jQuery、Vue等前端框架的基本原理和使用方法，了解BootStrap框架等拓展知识。理解网站设计综合实训的各个环节，包括网站规划、素材准备、页面设计与布局、功能添加及发布维护等。（二）能力目标培养学生熟练运用HTML5、CSS3进行网页结构搭建和样式设计的能力，能够完成PC端和移动端网页布局。提升学生使用JavaScript进行网页交互功能开发的能力，实现浏览器对象操作、DOM和BOM操作等。让学生具备使用jQuery简化JavaScript代码，实现常见网页特效的能力，掌握Vue框架进行组件化开发的基础能力。通过网站设计综合实训，锻炼学生将理论知识应用于实际项目的能力，培养项目规划、团队协作和问题解决能力。（三）素质目标培养学生严谨的编程思维和规范的代码编写习惯。提高学生的创新意识和审美能力，能够设计出美观且实用的网页。增强学生的团队合作精神和沟通能力，在项目实训中学会分工协作。培养学生自主学习和持续学习的能力，适应Web前端技术的快速发展。三、课程教学重难点（一）教学重点HTML5常用标签的使用及网页结构搭建。CSS3样式表的应用，包括盒模型、选择器、布局方法（浮动、定位、弹性盒模型等）。JavaScript的基本语法、条件语句、循环语句、函数以及DOM和BOM对象操作。jQuery的选择器和事件处理，Vue框架的基础语法和组件使用。网站设计综合实训的全流程操作，包括规划、设计、开发和发布。（二）教学难点CSS3复杂布局的实现，如响应式布局和自适应布局的原理与实践。JavaScript面向对象编程思想及复杂交互功能的实现。Vue框架的生命周期理解和组件化开发模式的应用。综合运用多种技术进行完整网站项目的开发与调试。四、教学方法讲授法：系统讲解Web前端开发的基础理论知识、语法规则和概念原理，确保学生对知识点有清晰准确的理解。演示法：通过实际操作演示，如使用开发工具编写代码、展示网页效果，让学生直观地看到知识的应用过程和实际效果。案例教学法：引入大量实际的网页设计与开发案例，引导学生分析案例需求、实现思路和技术要点，培养学生解决实际问题的能力。项目驱动法：在课程后期安排综合性的项目实训，让学生分组完成实际的网站开发项目，在项目实践中巩固所学知识，提高团队协作和项目管理能力。小组讨论法：组织学生针对一些复杂问题或技术难点进行小组讨论，促进学生之间的思想交流和知识共享，培养学生的团队合作和自主学习能力。五、课程教学内容与学时安排（一）第一部分：理论篇（16周，48学时）章节教学内容理论学时实践学时第1章网页设计与Web前端基础，包括Web概述、网页标准简介、网站开发工作流程、Web开发工具21第2章HTML常用标签，涵盖HTML5网页结构、网页文本、图片标签及属性、超链接标签、插入音视频21第3章使用CSS3样式表，包括初识CSS样式表、盒模型、列表标签及样式、元素分类及转换、CSS常用属性、选择器高级、CSS继承与优先、常用CSS3属性42第4章使用HTML+CSS布局网页，包括CSS布局概述、元素的浮动、定位、图片特点及布局、表单及布局、表格及布局、内联框架、CSS进阶应用、PC端网页布局综合案例实战42第5章HTML5+CSS3移动网站布局，涉及HTML5新增标签、CSS3新增伪类和伪元素、变形、过渡及动画、新增属性、弹性盒模型、响应式布局和自适应布局、移动端网页布局案例实战63第6章使用JavaScript脚本，包括初识JavaScript、基本元素、操作浏览器对象属性及CSS样式、条件语句、循环语句、函数、对象操作语句、常用内置对象、DOM对象及操作、BOM对象及操作、localStorage对象及操作、Web交互开发案例实战84第7章jQuery基础知识，包括jQuery介绍、基本选择器、高级选择器、事件处理、内容处理、样式处理21第8章Vue框架，包括Vue.js简介和环境搭建、基础语法、组件基础知识、生命周期、简单Vue应用实例42（二）第二部分：应用篇（1周，16学时）章节教学内容实践学时第9章网站设计综合实训，包括网站的规划、素材准备及管理、网页外观设计及布局、向页面添加内容、使用CSS设置页面、添加网页特效及功能、发布及维护Web站点、课程设计及要求12第10章课业拓展，涵盖浏览器开发者工具、Canvas图形绘制、BootStrap框架、架设互联网网站、云服务4六、课程考核方式平时成绩（30%）：包括课堂表现（回答问题、参与讨论等）、作业完成情况、实验报告质量等。实践成绩（40%）：根据学生在课程实验、项目实训中的表现和成果进行评分，考察学生的实际操作能力和项目完成质量。期末考核（30%）：采用理论考试与实践操作相结合的方式，理论考试考查学生对课程基础知识和核心概念的掌握程度，实践操作考核学生综合运用所学知识解决实际问题的能力。七、推荐教材与参考资料推荐教材：《网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript（第2版）》，莫小梅等编著，清华大学出版社.参考资料：《Web前端设计从入门到实战——HTML5、CSS3、JavaScript项目案例开发（第2版）》.张树明，清华大学出版社，2019.《HTML5与CSS3基础教程（第9版）》.[美]乔·卡萨博纳（JoeCasabona）著，望以文译，人民邮电出版社.相关技术网站（如MDN、W3School等）和在线学习平台（如慕课网、网易云课堂等）上的优质课程和学习资源。《网页设计与Web前端开发》教学进度表课程代码：总学时：48+16学时（其中教学周48学时，实践周16学时）

学分：3学分

授课对象：软件工程、数字媒体技术等专业学生一、理论教学周（16周，每周3学时）周次教学内容理论学时实践学时第1周第1章Web前端基础

Web概述、网页标准、开发流程、常用工具21第2周第2章HTML常用标签

网页结构、文本/图片标签、超链接、音视频标签

21第3周第3章使用CSS3样式表

选择器基础、盒模型、列表样式、元素分类21第4周第3章使用CSS3样式表CSS常用属性、选择器高级、CSS继承与优先、常用CSS3属性21第5周第4章使用HTML+CSS布局网页CSS布局概述、浮动、定位原理、图片布局21第6周第4章使用HTML+CSS布局网页表单布局、表格布局、内联框架、CSS进阶应用、PC端网页布局综合案例实战21第7周第5章HTML5+CSS3移动网站布局HTML5新增标签、CSS3伪类/伪元素21第8周第5章HTML5+CSS3移动网站布局变形、过渡、动画属性及CSS3新增属性21第9周第5章HTML5+CSS3移动网站布局弹性盒模型、响应式和自适应原理、移动端布局案例21第10周第6章使用JavaScript脚本初识JavaScript、基本元素、操作浏览器对象属性及CSS样式21第11周第6章使用JavaScript脚本条件语句、循环语句、函数21第12周第6章使用JavaScript脚本对象操作语句、内置对象、DOM对象及操作21第13周第6章使用JavaScript脚本BOM对象及操作、localStorage对象及操作、Web交互开发案例实战21第14周第7章jQuery基础知识选择器、事件处理、内容处理、样式处理21第15周第8章Vue框架简介和环境搭建、基础语法21第16周第8章Vue