《Web前端开发》授课计划.docx

湖北三峡职业技术学院2022年秋季学期教师授课计划主讲教师：周苏峡课程名称： Web前端开发总学时:120专业：计算机应用技术 班级： 21计算机应用技术教材版本：Web前端开发，机械工业出版社讲授68学时上机课50学时实验学时教学实习学时其它考查2学时考试或考查考查一、课程标准简述1、课程性质该课程是计算机应用技术专业必修课程，目标是让学生掌握网页设计与 制作能力。它要以图形图像处理、网页设计基础等课程的学习为基础，也是 进一步学习动态网站设计相关课程的基础。2、课程设计思路(1)该课程是依据“计算机应用技术专业职业岗位与职业能力分析表” 中的网页设计师职业岗位设置的。其总体设计思路是：着重培养学生网页设 计与制作的能力，应具备HTML、CSS、JavaScr ipt> jQuery等知识。以网站设 计工作任务为中心选择和组织课程内容，让学生在完成网站设计具体项目的 过程中学会完成相应工作任务。课程构成部分主要突出职业能力要求的训练。(2)该门课程的设计总学时为120学时(也可以分两学期完成)，其中理 论讲授68学时，操作练习50学时，其他2学时。3、知识目标和能力目标使学生通过本课程的学习，掌握HTML、CSS、JavaScr ipt> jQuery等网页 前端设计与制作的基本技术。本课程学习结束后，学生应能掌握网页前端技术，自行设计制作各类网 页静态模板、开发一定规模的网站。(1)知识目标：掌握HTML、CSS、JavaScr i pt> jQuery等知识；（2）能力目标：能熟练使用网页编辑软件编辑网页；能熟练使用HTML标签编写网页；能熟练使用样式表控制页面外观；能在网页中编制JS脚本改善操作体验；能进行网站的上传/下载、更新及管理。（3）素质目标：本课程将培养学生以下几方面的职业素质：服务意识：能够为他人提供优质的服务；文明法制意识：网站内容应积极健康向上，不做违法的事；合作精神：能够与他人进行合作，具有协调工作能力和组织管理能力；较强的自我知识及技术更新能力：能快速跟踪网页制作的新技术及市 场应用动态。4、教学组织与设计、实践环节要求本课程教学内容结构分成Web基础、HTML基础、CSS基础、JavaScript语 言基础、JavaScript对象模型、JavaScr ipt事件处理、HTML5简介、HTML5常 用元素和属性、HTML5表单相关元素和属性、CSS3新增选择器、CSS3新增属性、 jQuery基础和jQuery效果等13个章节。二、教材处理说明本授课计划目前按120学时制订，课程对标“Web前端开发” 1+x证书考 试，故教学大纲也参考“Web前端开发“ 1+x证书考试大纲要求。专业带头人（签章） 教研室主任（签章） 教学力、（签章）2022年9月10日填报说明：本计划一式三份，由任课老师本人填写，专业带头人审核签字，报教研室、教学办备 案。本计划由教学办、教研室和任课老师本人各持一份备查。周次课次讲授课题或章节习题讨论 或辅导答疑11第1章Web基础知识1. 1 Web的由来1.2 Web的基本概念1.3 Web开发技术2第2章HTML基础知识2. 1 HTML 概述2.2 HTML的全局属性32.3 HTML的元素2. 3. 1 HTML的主体元素、2. 3. 2 HTML的无语义元素span和div2. 3. 3 HTML的标题元素2. 3.4 HTML的段落元素2. 3.5 HTML的注释元素4上机操作作业1252. 3.6 HTML的格式化元素2. 3.7 HTML的图片元素2. 3.8 HTML的超链接元素6上机操作作业272. 3.9 HTML的列表元素2. 3. 10 HTML的表格元素2. 3. 11 HTML的表单元素8上机操作作业3392. 3. 12 HTML的框架元素2. 3. 13 浮动框架（iframe>2.4 HTML的预留字符10上机操作作业411第3章CSS基础3. 1 CSS概述3.2 CSS的基本语法123.3 CSS的选择器413上机操作作业5143.4基本样式属性3. 4. 1 CSS背景属性3. 4. 2 CSS文本属性15上机操作作业6163. 4. 3 CSS尺寸属性3. 4.4 CSS列表属性3. 4. 5 CSS表格属性3. 4. 6 CSS 内容属性(content)517上机操作作业7183.5 CSS盒模型3. 5. 1 CSS 外边距属性(margin)3. 5. 2 CSS 边框属性(border)3. 5. 3 CSS 内边距属性(padding)3. 5.4 CSS 轮廓属性(outline)193. 6 CSS布局属性3. 6. 1 CSS浮动属性3. 6. 2 CSS 定位属性(position)3. 6. 3 DIV 的空间位置(z-index)20上机操作作业8621第4章JavaScript语言基础4. 1 JavaScript 的历史4. 1. 1 JavaScript 的诞生4. 1.2 ECMAScript 的版本4. 2 JavaScript的基础知识224.3分支和循环程序结构4. 3. 1 JavaScript的分支程序结构4. 3.2 JavaScript的循环(重复)程序结构23上机操作作业9244.4数组4. 4. 1数组定义4. 4.2数组操作4. 4. 3二维数组725上机操作作业10264.5字符串操作4. 5.1字符串连接4. 5.2字符串搜索4. 5.3字符串截取4. 5.4字符串替换字符串切割27上机操作作业11284.6正则表达式4. 6.1正则表达式的组成4. 6.2正则表达式所用的方法829上机操作作业12304.7对象4. 7. 1对象的声明4. 7.2对象的属性4. 7.3对象的方法4. 7. 4对象的遍历4. 7. 5 JavaScript中对象与数组的区别31上机操作作业13324.8函数4. 8. 1函数的声明4. 8.2函数的返回值4. 8.3函数的调用4. 8. 4 闭包函数933上机操作作业14344.9 JS的内置函数4. 9. 1数学函数(Math)4. 9. 2日期函数(Date)4. 9.3定时器函数35匕机操作作业1536第5章JavaScript对象模型5. 1 B0M对象5. 1. 1 window 对象5. 1. 2 document 对象5. 1. 3 location 对象5. 1. 4 navigator 对象5. 1. 5 screen 对象5. 1. 6 history 对象10375. 2 B0M的操作38上机操作作业16395.3 D0M对象5. 3.1文档对象模型5. 3.2 D0M对象的构成405. 4 D0M的操作5. 4. 1 获取节点5. 4.2获取/设置元素的属性值5. 4.3创建/增添节点5. 4.4删除节点5. 4.5属性操作1141上机操作作业1742第6章JavaScript事件处理6. 1事件介绍6.2 窗口事件6. 2. 1 load 事件6. 2. 2 resize 事件6. 2. 3 scroll 事件6. 2.4焦点事件6. 3鼠标事件6. 3. 1获取鼠标单击位置6. 3. 2鼠标悬停和离开6. 3. 3鼠标拖动436. 4键盘事件6.5事件冒泡与捕获44上机操作作业181245第7章HTML5简介7. 1 HTML5的出现与优势7. 2浏览器对HTML5的兼容性7.3 HTML5 和 HTML4 的区别46第8章HTML5常用元素和属性8. 1 HTML5保留的常用元素8.2 HTML5新增的常用元素8. 2. 1文档结构元素8. 2. 2文本格式化元素8. 2.3页面增强元素8. 2.4多媒体元素47上机操作作业1948绘图8.3 HTML新增的通用属性8. 3. 1 contenteditable 属性8. 3. 2 designMode 属性8. 3.3 hidden 属性8. 3. 4 spellcheck 属性8.4 1ITML5废弃的元素和废弃的属性8. 4. 1 HTML5废弃的元素8. 4.2 HTML5废弃的属性1349上机操作作业2050第9章HTML5表单相关元素和属性9. 1 HTML5原有的表单元素及表单属性9.2 HTML5表单的新增元素和新增功能9. 2. 1 <input>元素新增功能类型9. 2. 2 HTML5新增的表单控件output9.3 HTML5表单控件新增的属性51匕机操作作业2152第10章CSS3新增选择器1.1 1 CSS3 简介1.2 兄弟选择器1.3 新增的属性选择器1.4 新增的伪类选择器1.5 新增的伪元素选择器1453上机操作作业2254第11章CSS3新增属性11. 1 CSS3新增背景属性11.2 CSS3新增字体文本相关属性11.3 CSS3新增盒模型属性11.4 CSS3新增变形动画属性11.5 CSS3新增多列属性55上机操作作业2356第12章 jQuery基础12. 1 jQuery框架概述12. 2 jQuery 选择器1557上机操作作业245812.3 jQuery 中的 DOM 操作12. 4 jQuery 事件事件绑定12. 4. 2鼠标事件12. 4. 3 键盘事件12. 4. 4表单事件12. 4.5 窗口事件12. 4.6事件冒泡12. 4.7事件解除59上机操作作业2560考查