《Web前端开发项目案例实战》
课程项目指导书
课程编号：
学分：4学分
学时：62学时（其中，讲授学时：36学时上机学时：26学时）
先修课程：
后续课程：
适用专业：软件工程及计算机相关的其他专业
开课部门：计算机系
一、课程的性质与目标
Web前端开发项目案例实战是计算机专业学生必修的一门重要专业拓展选修课。本课程中内容覆盖全面、讲解详细，本课程根据HTML5、CSS3和JavaScript的基础知识设计了5个项目，分别是蔬菜科技展示网、风筝展示网页面、线上博物馆、科技资讯网和山东多彩生活网。每个项目的实现过程中讲解了Web前端的基础知识，主要包括HTML常用标签、CSS3的样式、Flex布局、Rem布局、Grid布局、JavaScript的基础、DOM对象、BOM对象、定时器、事件对象、事件的调用与处理、常用的JavaScript事件，以及ECMAScript6.0新特性等内容。本课程以理论与实践相结合的理念，激发学生的学习兴趣，为学生进一步学习Web前端知识奠定良好的基础。
二、课程设计理念与思路
课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求
开发工具：
系统开发平台：Windows11
开发环境：VisualStudioCode1.88.1
四、课程的主要内容及基本要求
项目1蔬菜科技展示网
学习单元
项目蔬菜科技展示网
学时
14
学习目标
知识目标
掌握VisualStudioCode工具与插件的安装
掌握HTML5文档结构、标签与元素、语义化和结构标签
掌握HTML5的常用标签与标签属性
掌握表格、表单和列表的设置与属性
技能目标
熟练使用VisualStudioCode工具开发Web项目
熟练使用HTML5的常用标签搭建简单的网站页面
熟练使用表格与表单搭建简单的表格页面与技术调查页面
素养目标
培养学生对Web前端开发的兴趣和热情，鼓励学生不断学习和探索新技术
培养学生具备团队合作精神，能够与他人合作完成网页开发项目
学习内容
知识点
了解
掌握
重点
难点
初识Web前端
√
Web标准
√
Web前端的三大核心技术
√
浏览器
√
下载与安装VisualStudioCode
√
√
安装插件
√
√
VisualStudioCode的使用
√
√
HTML发展历史
√
HTML与XHTML
√
HTML5文档结构
√
√
HTML5标签与元素
√
√
HTML5语义化
√
√
HTML5的结构标签
√
√
标题标签
√
√
段落标签
√
√
图片标签
√
√
超链接标签
√
√
层次标签
√
√
换行标签
√
√
水平线标签
√
√
文本格式化标签
√
√
表格基本结构
√
√
语义化标签
√
√
单元格边距与间距
√
√
合并行与列
√
√
表格的其他常用属性
√
√
无序列表标签
√
√
有序列表标签
√
√
自定义列表标签
√
√
表单简介
√
创建表单
√
√
表单输入标签
√
√
标记标签
√
√
下拉列表标签
√
√
多行文本框标签
√
√
特殊字符
√
√
span标签
√
√
fieldset标签
√
√
项目2 风筝展示网
学习单元
风筝展示网
学时
14
学习目标
知识目标
掌握CSS3样式的三种引入方式
掌握CSS3基础属性、显示或隐藏属性、新增文本和背景属性的使用
掌握CSS3基础选择器和复合选择器的使用
掌握边框常用属性、新增边框属性、内边距属性和外边距属性的使用
理解IE盒子模型的内容
掌握清除浮动的方式与定位属性的使用
掌握相对定位、绝对定位和固定定位的使用
技能目标
熟练使用CSS3常用属性和选择器搭建风筝展示网页面的基础样式
熟练使用边框属性、内边距属性和外边距属性改进风筝展示网页面样式
熟练使用定位与浮动完成风筝展示网页面布局
素质目标
培养学生运用CSS3、浮动、定位等技能进行复杂网页布局和交互设计的能力
激发学生的创新思维，鼓励学生在CSS3、浮动、定位等技术的应用中探索新方法和新思路
学习内容
知识点
了解
掌握
重点
难点
CSS概述
√
CSS3样式的引入方式
√
√
CSS3基础属性
√
√
CSS3