贵州XXX学院
《Web前端设计》课程标准
（2023年版）
《Web前端设计》课程标准
一、课程基本信息
课程编码： | 070110121 | 课程类型： | 专业基础课 |
开设学期： | 第一学期 | 总学时： | 72学时 |
理论学时： | 36学时 | 实践学时： | 36学时 |
适用专业： | 大数据技术 | 开课学院 | XXX学院 |
先修课程： | 无 | 后续课程： | Linux操作系统、计算机网络基础等 |
二、课程定位与任务
（一）课程定位
本课程是大数据技术专业开设的一门专业基础课程，是为了学生掌握网页创意及编程语言和制作工具的使用，培养学生懂美学、有技术、会交流、能开发网页项目的综合能力。本课程通过项目化教学，大量分析各类静态网站开发项目，将网站开发的流程从不同角度进行实践复用。通过课程学习，学生能够达到利用所学知识和技能创新性地设计和维护静态网站的教学目标。在课程实施过程中，依托各专业的工匠工坊，组成学生创新团队，充分利用企业优质资源，选择性地承接网站开发、改版、维护等真实项目，融课堂教学与技能实践为一体。本课程内容具有实用性、综合性和战略性的特点。
（二）课程任务
全面贯彻党的教育方针，落实立德树人根本任务，满足国家发展战略对人才培养的要求。《Web前端设计》课程将系统讲授.HTML基础知识、CSS基础知识、JavaScript基础知识、前端开发工具和框架、网页结构和布局设计、响应式网页设计、网页交互效果设计等。通过学习Web前端相关理论知识，掌握网页的系统架构及关键技术以及具体应用场景，并结合具体设计实例，培养学生创新意识和实践能力。
三、课程设计思路
本课程是依据企业实际开发项目设置的。其总体设计思路是以能力目标为指导，基于职业教育基于企业工作过程的课程整体开发设计理念和设计思路。以学生熟悉的场景和需求构建教学项目，在项目大背景稳定的情况下，通过需求的调整变化开发项目的不同版本，覆盖不同的课程内容，满足教学的需要。以学生熟悉的场景和需求设计练习和考核项目，与教学项目技术同构，并进行适当的精简，通过学生模仿教学项目完成考核项目的方式，考核教学质量和效果。依托工作室，学生承接中小企业门户网站的设计、开发、改版等项目，在实践中提升技能创新创业能力，全面体现高等职业教育的新理念。
四、课程目标
通过本课程的教学，使学生掌握网页基础、HTML标签、CSS样式、网页布局、动画、JavaScript基础、HTML5应用、JavaScript特效和响应式布局等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。在课程实施过程中将职业道德与专业技术相结合，培养既有先进技术又有正确价值观的web开发从业人员，
同时要求学生用互联网时代开放包容的心态去学习国际先进技术，更好地服务于中国企业。
（一）知识目标
（1）能够理解HTML标签的语义和用法
（2）能够使用HTML标签创建基本的网页结构
（3）能够掌握HTML表单的基本元素和属性
（4）能够理解浏览器对HTML的解析规则
（5）能够使用HTML5的新特性，如语义化标签、多媒体标签等
（6）能够理解CSS的盒模型和定位方式
（7）能够使用CSS选择器和样式规则对HTML元素进行样式设计
（8）能够掌握CSS的常用布局技巧，如Flex布局、Grid布局等
（9）能够理解CSS动画和过渡的原理和使用方法
（10）能够理解JavaScript的基础语法和数据类型
（11）能够使用JavaScript控制DOM元素实现网页交互效果
（12）能够使用JavaScript实现表单验证和AJAX请求
（13）能够理解JavaScript的面向对象编程和原型链机制
（14）能够使用ES6及以上版本的JavaScript语法和新特性
（15）能够使用调试工具和浏览器开发者工具
（二）素质目标
（1）能够在开发中提出改进和优化的建议
（2）能够在项目开发中解决各种技术和业务问题
（3）能够与团队成员进行有效的沟通和协作
（4）能够撰写清晰、准确和易于理解的文档和注释
（5）能够尽职尽责地完成项目开发任务
（6）能够主动承担责任和解决问题
（7）能够尊重和理解团队成员的意见和建议
（8）能够对自己的学习和技术水平持续进行评估和反思
（9）能够认识到自己的不足并积极寻求改进
（10）能够积极参加培训和学习活动，不断提升自己的职业素养和技能水平
（11）能够保持对新技术和前沿技术的关注和学习
（三）能力目标
（1）能够对设计稿进行分析和转换成网页结构和样式
（2）能够使用前端框架快速搭建网页和应用程序
（3）能够针对不同浏览器的兼容性问题进行调试和解决
（4）能够理解用户体验和交互设计的原则和方法
（5）能够与UI设计师、后端开发工程师等协作完成项目开发
（6）能够进行代码优化和性能调优
（7）能够自我学习和掌握新的前端技术
（8）能够使用在线资源和社区获取前端开发的最新动态和趋势
（9）能够通过实践项目不断提高自己的职业素养和技术水平
（10）能够编写高质量、可维护和可扩展的代码。
五、课程教学内容与要求
《Web前端设计》课程依据课程目标，分解成十个教学项目，并要求学生完成教学项目所规定的学习任务。
表1 教学内容与课程教学要求分解表
序号 | 教学项目 | 工作任务 （课程内容） | 知识要求 | 技能要求 | 考核评价要点 | 建议学时 | |
理论 | 实践 | ||||||
1 | 初识web前端 | 前端发展简史 | 了解web前端发展。 理解 HTML、CSS 和 JavaScript 的功能和作用。 熟悉 Hbuilder 工具的基本操作。html网页设计课程标准 | 1 | |||
HTML5简介 | 1 | ||||||
CSS3简介 | 1 | ||||||
JavaScript简介 | 1 | ||||||
JavaScript变量与数据类型 | 1 | ||||||
开发工具的介绍 | 1 | ||||||
2 | HTML构建基本网页 | 标题、段落、换行标签 | 了解 HTML常用的基本标签 了解 <div> 块元素的特点 | 掌握 <a> 标签的多种跳转功能 | 2 | ||
图片、水平线标签 | 2 | ||||||
<div>块元素、超链接 | 2 | ||||||
3 | 使用列表与表格布局 | 有序与无序列表 | 了解列表与表格特点 | 掌握列表与表格的相关标签 掌握列表与表格的使用 | 2 | ||
表格标签 语义化标签 rowspan和colspan属性 | 2 | ||||||
4 | 设计网页页面 | 盒模型内容概述 | 了解盒模型结构与z-index属性 | 掌握CSS定位的区别与应用场景 掌握控制显示与隐藏的相关属性 | 1 | ||
CSS浮动 | 1 | ||||||
display属性 | 2 | ||||||
5 | 表单与表单效果设计 | 表单 | 了解表单各标签与属性 | 掌握<input>标签的type属性值及含义 掌握表单的基本使用 | 1 | ||
Type属性值 | 1 | ||||||
新增表单控件 | 1 | ||||||
get和post提交方式 | 1 | ||||||
background-size属性 | 1 | ||||||
6 | 实现CSS3动画 | transform-origin属性 | 了解CSS3动画 | 掌握CSS3中2D和3D的transform转换 掌握 CSS3中的transition过渡 掌握CSS3中的animation动画 | 1 | ||
@keyframes规则 | 1 | ||||||
transition-property属性 | 1 | ||||||
过渡与动画的效果区别 | 1 | ||||||
3D rotate()旋转 | 2 | ||||||
7 | JavaScript基础应用 | 创建对象 | JavaScript基础语法 了解定时器的使用 | 掌握DOM基本操作 掌握JavaScript的基础应用 | 1 | ||
DOM操作属性 | 2 | ||||||
获取总毫秒值 | 1 | ||||||
数组 | 2 | ||||||
8 | 实现HTML5应用 | <video>标签 | 了解HTML5多媒体 | 掌握Hadoop常见的维护操作及技巧 掌握集节点的动态增加和删除 | 1 | ||
DOM操作媒体文件 | 1 | ||||||
BOM概述 | 1 | ||||||
canvas的基本使用 | 2 | ||||||
SVG绘制不同图形 | 2 | ||||||
9 | JavaScript特效 | offset家族 | 了解JavaScript的3大家族 了解 event事件对象的使用 | 掌握offset家族、scroll族和client家族中的各个属性 掌握 匀速和缓动动画的运用 | 1 | ||
scroll家族 | 1 | ||||||
纵向滚动的缓动动画封装 | 2 | ||||||
匀速动画以及封装 | 1 | ||||||
clientl家族 | 2 | ||||||
event事件对象 | 2 | ||||||
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论