Web前端开发项目案例实战 项目指导书

《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蔬菜科技展示网学习单元项目蔬菜科技展示网学时学习目标知识目标掌握VisualStudioCode工具与插件的安装掌握HTML5文档结构、标签与元素、语义化和结构标签掌握HTML5的常用标签与标签属性掌握表格、表单和列表的设置与属性技能目标熟练使用VisualStudioCode工具开发Web项目熟练使用HTML5的常用标签搭建简单的网站页面熟练使用表格与表单搭建简单的表格页面与技术调查页面素养目标培养学生对Web前端开发的兴趣和热情，鼓励学生不断学习和探索新技术培养学生具备团队合作精神，能够与他人合作完成网页开发项目学习内容知识点了解掌握重点难点初识Web前端√Web标准√Web前端的三大核心技术√浏览器√下载与安装VisualStudioCode√√安装插件√√VisualStudioCode的使用√√HTML发展历史√HTML与XHTML√HTML5文档结构√√HTML5标签与元素√√HTML5语义化√√HTML5的结构标签√√标题标签√√段落标签√√图片标签√√超链接标签√√层次标签√√换行标签√√水平线标签√√文本格式化标签√√表格基本结构√√语义化标签√√单元格边距与间距√√合并行与列√√表格的其他常用属性√√无序列表标签√√有序列表标签√√自定义列表标签√√表单简介√创建表单√√表单输入标签√√标记标签√√下拉列表标签√√多行文本框标签√√特殊字符√√<span>标签√√<fieldset>标签√√项目2 风筝展示网学习单元风筝展示网学时学习目标学习内容知识点了解掌握重点难点CSS概述√CSS3样式的引入方式√√CSS3基础属性√√CSS3显示或隐藏属性√√CSS3新增文本与背景属性√√CSS3基础选择器√√CSS3复合选择器√√√盒模型概述√内容区域√√边框常用属性√√新增边框属性√√内边距属性√√外边距属性√√IE盒子模型√√浮动概述√清除浮动√√定位属性√√相对定位√√√绝对定位√√√固定定位√√√项目3线上博物馆学习单元线上博物馆学时学习目标知识目标理解网页模块命名的规范理解布局视口、视觉视口和理想视口的概念掌握百分比布局的使用理解Flex布局的结构掌握Flex容器属性与项目属性的使用掌握媒体查询的语法和用法掌握Rem布局和Grid布局的使用技能目标熟练使用视口和百分比布局完成移动端线上博物馆的基础布局熟练使用Flex布局搭建更丰富与个性化的移动端线上博物馆熟练使用媒体查询、Rem布局和Grid布局搭建更美观与便捷的移动端线上博物馆素质目标培养学生具备响应式设计思维，能够从用户体验出发设计网页培养学生养成良好的网页模块命名规范意识，注重代码的可读性和可维护性学习内容知识点了解掌握重点难点网页模块命名规范√√视口√√百分比布局√√Flex结构√√Flex容器属性√√√Flex项目属性√√√媒体查询√√√Rem布局√√√Grid布局√√√项目4科技资讯网学习单元科技资讯网学时学习目标知识目标掌握JavaScript的3种引入方式掌握标识符的命名规则、常用的关键字与保留字掌握常量、变量和数据类型的定义掌握JavaScript函数的语法格式掌握获取HTML元素的常用方法的使用掌握创建JavaScript对象的4种方式掌握DOM的基础操作掌握流程控制语句与数组的使用理解BOM对象中提供的5个浏览器内置对象掌握连续定时器与延迟定时器的使用掌握事件的对象、调用和处理掌握ECMAScript6.0的6个新特性技能目标熟练使用JavaScript的基础知识实现科技资讯网首页的导航栏与下拉菜单熟练使用流程控制、数组、BOM对象和定时器实现科技资讯网首页的广告栏与城市商业信息熟练使用常用的JavaScript事件实现科技资讯网首页的热门推荐与资讯素质目标鼓励学生在JavaScript技术学习中不断追求卓越、提升自我培养学生持续学习和探索新技术的习惯，关注JavaScript及其相关技术的最新发展学习内容知识点了解掌握重点难点JavaScript简介√JavaScript的引入方式√√标识符、关键字与保留字√√常量、变量与数据类型√√JavaScript函数√√创建JavaScript对象√√DOM对象√√DOM节点√√DOM的基础操作√√√流程控制√√数组√√BOM对象√√定时器√√事件对象√√事件的调用和处理 √√√常用的JavaScript事件√√√ECMAScript6.0新特性√√项目5山东多彩生活网学习单元山东多彩生活网学时学习目标知识目标理解项目结构与文件夹结构理解项目页面效果的设计技能目标熟练使用CSS样式与JavaScript代码实现山东多彩生活网的首页熟练使用CSS定位与浮动实现山东多彩生活网的蔬菜产业页面熟练使用CSS定位与浮动实现山东多彩生活网的风筝文化页面熟练使用CSS定位与基础样式实现山东多彩生活网的旅游指南页面熟练使用内边距、外边距与CSS基础样式实现山东多彩生活网的科技发展页面熟练使用虚线样式与CSS基础样式实现山东多彩生活网的关于我们页面素质目标通过展示山东的风筝文化，增强学生对山东文化的认同感。通过团队讨论和集思广益，促进知识的共享与碰撞，激发学生的创造力和想象力。学习内容知识点了解掌握重点难点搭建山东多彩生活网首页√√√项目结构√项目文件夹结构√搭建山东多彩生活网蔬菜产业页面√√√搭建山东多彩生活网风筝文化页面√√√搭建山东多彩生活网旅游指南页面√√搭建山东多彩生活网科技发展页面√√搭建山东多彩生活网“关于我们”页面√√五、学时分配章目讲课上机合计项目1蔬菜科技展示网8614项目2风筝展示网8614项目3线上博物馆