《专业综合实践》教学大纲 一、课程基本信息 课程代码：16030202 课程名称：专业综合实践 英文名称：Professional comprehensive practice I 课程类别：专业课 课程模块： 课程性质：选修 学时：32 学 分：2 适用专业：计算机科学与技术专业本科四年级 先修课程：《iava语言程序设计》、《数据结构》 二、课程简介 本课程是计算机科学与技术、软件工程专业的一门专业基础课程，以W 基本概念和Wb标准为基准点、通过对Wb前端主流开发技术的学习和研究，让 学生理解和掌握HTL5、CSS3以及JavaScript脚本语言、Vue和Elementui的 相关知识，通过这门课程的教学，不仅使学生通过项目实践培养学生开发和设计 Web站点的基本技能，更要使学生充分了解Web思想，为进一步学习web开发后 续课程打下良好的基础。 三、课程性质与教学目的 本课程的教学目标是让学生理解HTML5、CSS3以及JavaScript脚本语言、 Vue和Elementui的基本语法，罩握常用的Web页面布局技术，理解并熟练应用 JavaScript常用对象的属性方法，使用DOM技术编写页面的客户端程序，通过 项目实训，培养学生具备设计实现Wb客户端页面的初步能力。 本课程教学基本要求是让学生理解Wb设计的基本原则、栏目和网站目录结 构定义、标准页面布局方法、 导航菜单制作、图文排版、页面交互等方面的基 知识；能够熟练运用HTL5中的文字、链接、列表、表格、表单、图像、多媒体 等标记语言设计制作网页；熟练掌握CSS3对网页进行布局和修饰的基本方法： 掌握JavaScript脚本语言的基本语法，理解对象的概念及使用JavaScript来编 写客户端脚本程序
《专业综合实践 I》教学大纲 一、课程基本信息 课程代码：16030202 课程名称：专业综合实践 I 英文名称:Professional comprehensive practice I 课程类别：专业课 课程模块： 课程性质：选修 学 时：32 学 分：2 适用专业：计算机科学与技术专业本科四年级 先修课程：《java 语言程序设计》、《数据结构》 二、课程简介 本课程是计算机科学与技术、软件工程专业的一门专业基础课程，以 Web 基本概念和 Web 标准为基准点、通过对 Web 前端主流开发技术的学习和研究，让 学生理解和掌握 HTML5、CSS3 以及 JavaScript 脚本语言、Vue 和 Elementui 的 相关知识，通过这门课程的教学，不仅使学生通过项目实践培养学生开发和设计 Web 站点的基本技能，更要使学生充分了解 Web 思想，为进一步学习 web 开发后 续课程打下良好的基础。 三、课程性质与教学目的 本课程的教学目标是让学生理解 HTML5、CSS3 以及 JavaScript 脚本语言、 Vue 和 Elementui 的基本语法，掌握常用的 Web 页面布局技术，理解并熟练应用 JavaScript 常用对象的属性方法，使用 DOM 技术编写页面的客户端程序，通过 项目实训，培养学生具备设计实现 Web 客户端页面的初步能力。 本课程教学基本要求是让学生理解 Web 设计的基本原则、栏目和网站目录结 构定义、标准页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础 知识；能够熟练运用 HTML5 中的文字、链接、列表、表格、表单、图像、多媒体 等标记语言设计制作网页；熟练掌握 CSS3 对网页进行布局和修饰的基本方法； 掌握 JavaScript 脚本语言的基本语法，理解对象的概念及使用 JavaScript 来编 写客户端脚本程序
四、教学内容及要求 其中标记★为难点 第1章Web技术概述 (一)主要教学内容 一节Web概述 了解Web历史 2★掌握Web体系结构 3理解基本Web技术 4了解Web服务器 5超文本与标记语言 5.1 掌握超文本与超媒体 5.2掌握标记语言 6浏览器 61 了解常用刘监器 6.2掌握标准浏览器 Web开发工身 1 ★掌握vscode集成开发环境 2掌握测试和调试环境 第二节HTM机5基出 1HTML5基础 1.1 掌握TL5文档结构 12 掌握元素与标签 1.3堂握属性 1.4掌握语法规则 2文档结构元素 2.1 掌握标签 2.2 掌握标 2.3掌握标签 2.4头部元素 介绍Wb前端开发技术在中国的应用发展情况，同时对比世界b前端技 术现况，让学生在了解前嘴开发的前沿研究和先进技术的同时，更清嘴 认识到我国在技术理论研究和技术应用上还存在的短板，激励学生奋发图强的 意志，致力于Wb前端技术技术的创新发展。 第2音HTML基础 第 一节TML5内容结构与文本 1HTL5结构标盆 1.l掌握标签 1.2堂据(nav>标签 1.3堂握标签 1.4 掌握标签 1.5 握(aside》标签 1.6掌握(footer>标签
四、教学内容及要求 其中标记★为难点 第 1 章 Web 技术概述 （一）主要教学内容 第一节 Web 概述 1 了解 Web 历史 2 ★掌握 Web 体系结构 3 理解基本 Web 技术 4 了解 Web 服务器 5 超文本与标记语言 5.1 掌握超文本与超媒体 5.2 掌握标记语言 6 浏览器 6.1 了解常用浏览器 6.2 掌握标准浏览器 3 Web 开发工具 1 ★掌握 vscode 集成开发环境 2 掌握测试和调试环境 第二节 HTML5 基础 1 HTML5 基础 1.1 掌握 HTML5 文档结构 1.2 掌握元素与标签 1.3 掌握属性 1.4 掌握语法规则 2 文档结构元素 2.1 掌握标签 2.2 掌握标签 2.3 掌握标签 2.4 头部元素 介绍 Web 前端开发技术在中国的应用发展情况，同时对比世界 Web 前端技 术现况，让学生在了解 Web 前端开发的前沿研究和先进技术的同时，更清晰地 认识到我国在技术理论研究和技术应用上还存在的短板，激励学生奋发图强的 意志，致力于 Web 前端技术技术的创新发展。 第 2 章 HTML 基础 第一节 HTML5 内容结构与文本 1 HTML5 结构标签 1.1 掌握标签 1.2 掌握标签 1.3 掌握标签 1.4 掌握标签 1.5 掌握标签 1.6 掌握标签
l.7理解.和.标签 l.8★掌握标签 1g理解 标签 2 HTM5基码 2.1 草握标 2.2堂据段落 2.3 掌握换行符 2.4理解注释 HTML5 3.1 掌握无序列 3.2掌握有序列表 3.3掌握定义列表 第二节HTML5超连接 1标签 1.1 掌握href属性 L.2★掌握target属性 1.3掌握使用d属性 2HTML5字符集与颜色 2.1理解HTM5字符集 2.2 理解HM5字符实体 2.3 掌握HTL5频色 2.4了解HTL5颜色名 第三节HTML5表格 HTML5表格 1.1 ★理解表格结构 1.2掌握表格标签 2常用表格标签 2.1 掌握标签 2.2 掌握标签 2.3 掌握标签 2.4 理解(c01>标签 2.5了解、和:标签 第四节HTML5表单 1 HTM5表单 1.1 ★学握表单 1.2堂握标签 2表单域 2.1掌握标 2.2 标签 2.3 掌握标签 2.5掌握标签
1.7 理解和标签 1.8 ★掌握标签 1.9 理解标签 2 HTML5 基础标签 2.1 掌握标题 2.2 掌握段落 2.3 掌握换行符 2.4 理解注释 3 HTML5 列表 3.1 掌握无序列表 3.2 掌握有序列表 3.3 掌握定义列表 第二节 HTML5 超连接 1 标签 1.1 掌握 href 属性 1.2 ★掌握 target 属性 1.3 掌握使用 id 属性 2 HTML5 字符集与颜色 2.1 理解 HTML5 字符集 2.2 理解 HTML5 字符实体 2.3 掌握 HTML5 颜色 2.4 了解 HTML5 颜色名 第三节 HTML5 表格 1 HTML5 表格 1.1 ★理解表格结构 1.2 掌握表格标签 2 常用表格标签 2.1 掌握标签 2.2 掌握标签 2.3 掌握标签 2.4 理解标签 2.5 了解、和标签 第四节 HTML5 表单 1 HTML5 表单 1.1 ★掌握表单 1.2 掌握 标签 2 表单域 2.1 掌握标签 2.2 掌握标签 2.3 掌握标签 2.4 理解标签 2.5 掌握标签
2.6掌握标签 2.7 >标签 28 2. 理解标签 第3章样式与布局 s基础 了解CSS概述 2掌握CSS语法 3掌握CSS常用选择器 4★堂握CSS3洗择器 5CSS属性 5.1 5.2 5.3掌握CSS3属性值和单位 6掌握使用CSS 7★了解层叠（多重）样式 第二节 页面布局定位 1CSS盒模型 1.1理解CSS盒模型概述 1.2掌握CSS内边距 13据CS边相 掌握CSS3 边框 1.5掌握CSS外边距 1.6理解CSS轮脚 2★CSS布局 91 ★掌握盒模型显示类型 2.2 星CSS3伸缩盒布局 2.3 理解CSS浮动 2.4掌握可见与溢出 3CSS定位 3.1掌握position属性 3.2掌握z index属性 4 基本布局模板 4.1 掌握固定（液态）布局 4.2掌握弹性伸缩布局 第三节元素外观属性 背景 (Background 1.1掌握CSS背景 1.2掌握CSS3背景 1.3掌握CSS3透明度
2.6 掌握标签 2.7 了解标签 2.8 掌握标签 2.9 理解标签 第 3 章 样式与布局 第一节 css 基础 1 了解 CSS 概述 2 掌握 CSS 语法 3 掌握 CSS 常用选择器 4 ★掌握 CSS3 选择器 5 CSS 属性 5.1 掌握 CSS 属性 5.2 掌握 CSS 属性值和单位 5.3 掌握 CSS3 属性值和单位 6 掌握使用 CSS 7 ★了解层叠（多重）样式 第二节 页面布局定位 1 CSS 盒模型 1.1 理解 CSS 盒模型概述 1.2 掌握 CSS 内边距 1.3 掌握 CSS 边框 1.4 掌握 CSS3 边框 1.5 掌握 CSS 外边距 1.6 理解 CSS 轮廓 2 ★ CSS 布局 2.1 ★掌握盒模型显示类型 2.2 ★掌握 CSS3 伸缩盒布局 2.3 理解 CSS 浮动 2.4 掌握可见与溢出 3 CSS 定位 3.1 掌握 position 属性 3.2 掌握 z-index 属性 4 基本布局模板 4.1 掌握固定（液态）布局 4.2 掌握弹性伸缩布局 第三节 元素外观属性 1 背景（Background） 1.1 掌握 CSS 背景 1.2 掌握 CSS3 背景 1.3 掌握 CSS3 透明度
2字体(Font) 2.1堂据指定字林 92 掌握指定大小 2.3 理解字体 2.4 理解字体粗细 第四节伪类和伪元素 1CSS伪类 11 掌握超连接伪类 1.2 ★理解结构性 为类 1.3 掌握子元素伪 1.4掌握UI元素状态伪类 2理解CSS伪元素 3 ★掌握CSS内容(content) 第4章 ECMAScript基础 第一节lavaScript其研 1 了解JavaScript历史 2 掌握ECMAScript语法基础 掌握ECMAScript基本数据类型 4 掌握ECMAS pt语句 ★理解使用对 第二节D0M 1DOM概述 1.1了解DOW简个 1.2 掌握节点松 DOM对家 2.1 理解Node对象 2.2★理解HTMLElement对象 2.3理解HTMLDocument对象 24掌握访问节点 DOM与CSS 3.1 理解Style对象 3.2理解Currentstyle对象 3.3理解StyleSheet对象 笪三节BOM 1 BOM对象 1.1★掌握window对象 l.2堂握navigator对象 1.3理解screen对象 1.4理解1 ocation对象 1.5 ★理解 tory对 5章Vue开发基础（上） 第 节vue基础
2 字体（Font） 2.1 掌握指定字体 2.2 掌握指定大小 2.3 理解字体风格 2.4 理解字体粗细 第四节 伪类和伪元素 1 CSS 伪类 1.1 掌握超连接伪类 1.2 ★理解结构性伪类 1.3 掌握子元素伪类 1.4 掌握 UI 元素状态伪类 2 理解 CSS 伪元素 3 ★掌握 CSS 内容（content） 第 4 章 ECMAScript 基础 第一节 JavaScript 基础 1 了解 JavaScript 历史 2 掌握 ECMAScript 语法基础 3 掌握 ECMAScript 基本数据类型 4 掌握 ECMAScript 语句 5 ★理解使用对象 第二节 DOM 1 DOM 概述 1.1 了解 DOM 简介 1.2 掌握节点树 2 DOM 对象 2.1 理解 Node 对象 2.2 ★理解 HTMLElement 对象 2.3 理解 HTMLDocument 对象 2.4 掌握访问节点 3 DOM 与 CSS 3.1 理解 Style 对象 3.2 理解 CurrentStyle 对象 3.3 理解 StyleSheet 对象 第三节 BOM 1 BOM 对象 1.1 ★ 掌握 window 对象 1.2 掌握 navigator 对象 1.3 理解 screen 对象 1.4 理解 location 对象 1.5 ★理解 history 对象 第 5 章 Vue 开发基础（上） 第一节 vue 基础
L.★了解Vue的核心设计思想 2.掌握ue开发环境搭建 3.掌握Vue开发和调试工具的使用 4.掌握ue项目的创建 5.掌握Webpack简单使用 介绍前端开发框架，ue.js、laui、E1 ementui等优秀框架是中国人开发 的，目前已经占领了国内主流开发技术，前端开发工程师们刻苦钻研、不怕困 难不断取得突破得来，这种踏实勤奋的钻研精神，让学生有很大的学习意义和 参考 介值 透过这些过往的业绩增强学生民族自豪感 在前辈们的业绩感召下 激发青年人的爱国主义情怀，形成为祖国科技发展努力学习的动力。 第二节Vue组件 1.掌握ue实例的创建 2.★掌握如何在Vue中进行数据绑定 3.掌握ue的事件监听操作 4.掌握ue组件的定义和注册的方法 5.★掌握Vue组件之间的数据传递的方法 6.掌握ue生命周期钩子函数的使用 第6章Vue开发基础（下） 第一节Vue路由 l.★了解vue-router的实现原理 2.熟练路由的安装与使用 3.掌握路由对象的常用属性 4.掌握动态路由的匹配及路由嵌套 5.掌握命名路由和命名视图的使用 6.掌握编程式导航的实例方法 7.★拳握query和params传参方式使用 第二节VueX状态管理 l.★了解uex的基本概念 2.掌握uex下载安装方法 3.掌握Vuex实例对象的配置方法 4.熟练uex API接口的使用方法 第7章前端UI框架 第一节Element--UI
1. ★了解 Vue 的核心设计思想 2. 掌握 Vue 开发环境搭建 3. 掌握 Vue 开发和调试工具的使用 4. 掌握 Vue 项目的创建 5. 掌握Webpack 简单使用 介绍前端开发框架，vue.js、layui、Elementui 等优秀框架是中国人开发 的，目前已经占领了国内主流开发技术，前端开发工程师们刻苦钻研、不怕困 难不断取得突破得来，这种踏实勤奋的钻研精神，让学生有很大的学习意义和 参考价值，透过这些过往的业绩增强学生民族自豪感，在前辈们的业绩感召下 激发青年人的爱国主义情怀，形成为祖国科技发展努力学习的动力。 第二节 Vue 组件 1. 掌握 Vue 实例的创建 2. ★掌握如何在 Vue 中进行数据绑定 3. 掌握 Vue 的事件监听操作 4. 掌握 Vue 组件的定义和注册的方法 5. ★掌握 Vue 组件之间的数据传递的方法 6. 掌握 Vue 生命周期钩子函数的使用 第 6 章 Vue 开发基础（下） 第一节 Vue 路由 1. ★了解 vue-router 的实现原理 2. 熟练路由的安装与使用 3. 掌握路由对象的常用属性 4. 掌握动态路由的匹配及路由嵌套 5. 掌握命名路由和命名视图的使用 6. 掌握编程式导航的实例方法 7. ★掌握 query 和 params 传参方式使用 第二节 VueX 状态管理 1. ★了解 Vuex 的基本概念 2. 掌握 Vuex 下载安装方法 3. 掌握 Vuex 实例对象的配置方法 4. 熟练 Vuex API 接口的使用方法 第 7 章 前端 UI 框架 第一节 Element-UI
1.了解前端U1框架 2.熟练element--ui的安装与使用 3.★掌握element--ui布局组件 4.★掌握cl-table组件 5.★掌握el-form表单组件 6.掌捉el-card组件 7.掌握各类弹出窗口和消息 介绍Wb前端开发技术应用在中国的蓬勒发展，近十年在中国的迅猛兴起，让学生对 Wh前端技术在中国的应用发展前景充满信心，让学生对中国的科技文化充满自信，让学 生对中国的发展充满自信，增强学生对中国特色社会主义的道路自信、理论自信、制度自 信和文化自信。 第8章综合实例 1.了解项目的整体结构 2.掌握项目中界面布局的实现 3.掌握项目中使用的element-ui组件 4.掌握E-chart的使用 5.理解用map、foreach对json数据进行转换 五、各教学环节学时分配 内容 其它教学 课堂讲授 课程实验 习题或讨论 环节 小计 Web技术概述 2 2 TML基础 4 2 6 样式与布局 2 2 ECMAScript基础 2 2 ue基础（上） 2 vue基础（下） 2 前端UI框架 2 综合设计 总计 16 16 六、课程考核 本课程为考试课程，由课堂提问、实验报告、签到、书面考试组成。课堂提问
1. 了解前端UI框架 2. 熟练element-ui的安装与使用 3. ★掌握element-ui布局组件 4. ★掌握el-table组件 5. ★掌握el-form表单组件 6. 掌握el-card组件 7. 掌握各类弹出窗口和消息 介绍Web前端开发技术应用在中国的蓬勃发展，近十年在中国的迅猛兴起，让学生对 Web前端技术在中国的应用发展前景充满信心，让学生对中国的科技文化充满自信，让学 生对中国的发展充满自信，增强学生对中国特色社会主义的道路自信、理论自信、制度自 信和文化自信。 第 8 章 综合实例 1. 了解项目的整体结构 2. 掌握项目中界面布局的实现 3. 掌握项目中使用的element-ui组件 4. 掌握E-chart的使用 5. 理解用map、foreach对json数据进行转换 五、各教学环节学时分配 内 容 课堂讲授 课程实验 习题或讨论 其它教学 环节 小计 Web 技术概述 2 2 HTML 基础 4 2 6 样式与布局 2 2 4 ECMAScript 基础 2 2 4 vue 基础（上） 2 2 4 vue 基础（下） 2 2 4 前端 UI 框架 2 2 4 综合设计 4 4 总 计 16 16 32 六、课程考核 本课程为考试课程，由课堂提问、实验报告、签到、书面考试组成。课堂提问
实验报告、签到构成平时成绩，占总评的40%：期末书面考试占总评的60% 七、推荐教材和教学参考资源 课程教材： 《TML5+CSS3网页设计与制作》，黑马程序员（作者），人民邮电出版社 《Wue.js前端开发实战》，黑马程序员（作者），人民邮电出版社。 参考书： 《Wue企业开发实战》，肖睿龙颖（主编）李辉崔欢欢申玉霞（副主编）。 八、其他需说明的 大纲修订人： 修订日期： 大纲审定者： 审定日期：
实验报告、签到构成平时成绩，占总评的 40%；期末书面考试占总评的 60%。 七、推荐教材和教学参考资源 课程教材： 《HTML5+CSS3 网页设计与制作》，黑马程序员 (作者)，人民邮电出版社。 《Vue.js 前端开发实战》，黑马程序员 (作者)，人民邮电出版社。 参考书： 《Vue 企业开发实战》，肖睿 龙颖 (主编) 李辉 崔欢欢 申玉霞 (副主编)。 八、其他需说明的 大纲修订人： 修订日期: 大纲审定者： 审定日期:
