1《HTML5+CSS3进阶》课程标准.docxVIP

《HTML5+CSS3进阶》课程标准 课程性质 《HTML5+CSS3进阶》是计算机网络技术专业的一门必修专业核心课，包含HTML5、CSS3两大模块的教学内容。其功能是使学生熟悉前端开发的工作规范，能够运用HTML5和CSS3的知识进行响应PC/PAD/手机3端的页面制作和布局，达到1+X Web前端开发工程师（中级）职业技能等级标准中对HTML5、CSS3两大模块的相关要求。 课程学习目标 1.知识目标: 1）了解前端开发的工作流程和规范； 2）熟悉HTML5和CSS3的知识； 3）掌握响应式页面制作的原理和浏览器的兼容； 4）掌握Bootstrap前端页面框架的运用。 2.技能目标: 1）具备将效果图切片并实现成网页的能力； 2）能够运用CSS3根据设计图要求美化WEB页面； 3）能够使用JS插件快速实现网页交互功能开发； 4）能够运用前端框架快速制作网站页面的能力； 5）能够规范标准的开发网页组件； 6）能依据文档编制规范使程序编写文档的规范、准确、易读。 3.素养目标 1）具备良好的知识产权保护观念和意识，自觉抵制各种违反知识产权保护法规的行为。 2）具有团队合作、交流沟通的能力； 3）培养能自觉跟踪前端开发技术发展动态并自觉学习的意识； 4）培养耐心谨慎、自查自检的工作态度。 课程学时建议 序号 章节 知识点 参考课时 1 一、网页制作优化 HTML5网页结构 1 2 网页重构与优化 1 3 CSS优化 1 4 二、网页组件设计与制作 警告框（Alerts） 1 5 徽章（Badge） 1 6 按钮（Buttons） 1 7 按钮组（Button group） 1 8 导航（Navs） 1 9 输入组与表单（Input group and Forms） 1 10 缩略图（Thumbnail） 1 11 进度条（progress） 1 12 媒体对象（Media object） 1 13 列表组（List group） 1 14 面板（Panel） 1 15 巨幕（Jumbotron） 1 16 小结 1 17 三、BootStrap框架使用 BootStrap框架安装 2 18 BootStrap的页面结构分析 2 19 BootStrap的响应式布局分析 2 20 BootStrap的响应式栅格系统 2 21 BootStrap的全局CSS样式 1 22 Bootstrap的字体图标组件 1 23 四、Bootstrap的JS插件 下拉菜单（Dropdowns） 1 24 折叠（Collapse） 1 25 标签页（Tabs） 1 26 滚动监听（Scrollspy） 1 27 工具提示（Tooltip） 1 28 弹出窗（Popover） 1 29 轮播（Carousel） 1 30 五、实战1响应式企业站制作 案例分析与页面布局 1 31 导航制作 1 32 左右轮播组件制作 2 33 首页完善 1 34 图片列表页 2 35 新闻列表页 2 36 详情页制作 1 37 联系我们页面 1 38 百度地图引用 2 39 六、FLEX弹性布局 Flex基本概念 1 40 Flex容器的属性 1 41 Flex项目的属性 1 42 骰子的布局 1 43 弹性网格布局 1 44 圣杯布局 1 45 七、画布CANVAS绘图 canvas元素介绍 1 46 canvas绘制矩形 1 47 canvas设置形状的颜色、样式和阴影 1 48 canvas绘制路径 1 49 canvas绘制文本 1 50 canvas绘制位图 1 51 八、SVG图形 SVG简介和引用 1 52 SVG绘制矩形和基础属性 1 53 SVG绘制圆形和椭圆 1 54 SVG绘制线条和多边形 1 56 SVG样式 1 57 九、案例与考试 企业案例欣赏 5 　 　 　 68 课程内容与要求 工作任务 技能与学习水平 知识与学习水平 课时 1、网页制作优化 1.优化网页代码结构 能优化网页代码结构，将内容与样式以及行为脚本分离编写 能优化网页文档描述 能优质编写HTML标签嵌套结构 1.掌握网页关键字设置和页面描述设置 认识keywords的作用 掌握H5的语义结构标签header footer的使用 掌握浏览器的HACK兼容 掌握CSS的SPrite拼合图切图方法 4 2、网页组件设计 1．完成网页基础组件的规范制作 2. 整理组件开发文档 能够完成警告框、微章、按钮、按钮组、导航、输入框、缩略图、进度条、媒体对象、列表组、面板、巨幕组件的设计和制作； 能够整理组件代码进行二次开发。 1．掌握功能标签和属性 认识组件的命名规范 掌握组件的开发规则和文档规范 掌握CSS3新样式特性包括边框阴影效果、文字阴影效果、渐变背景等 13 3