《网页布局与美化》课程标准
一、课程概述
1.课程性质
《网页布局与美化》是数字媒体应用技术专业针对网页设计、网页制作、网页美工等关键岗位，经过对企业岗位典型工作任务的调研和分析后，选择真实工作项目为教学载体，根据数字媒体公司应用性人才的实际要求，重构课程内容，归纳总结出来的为适应网页设计、网页美化等岗位要求的网页设计和网页美化能力要求而设置的一门专业核心课程。
2.课程任务
《网页布局与美化》课程通过对“文本网页的布局与美化”、“图文混排网页的布局与美化”、“网列表网页布局与美化”、“带阴影效果的相册网页布局与美化”、“弹力球动画效果网页的布局与美化”、“横向导航栏制作”、“两列布局网页设计”、“图像动画效果网页布局与美化”、“表格与表单网页布局与美化”9个教学项目的学习，在学生具备一定的网页制作能力的基础上，主要培养学生使用编码方式进行网页布局与美化的方法和技巧，培养学生使用编码
方式进行网页设计、网页制作、网页美化的专业能力，以及团队协作、综合分析、创新创意等综合素质和能力，为后期课程如《移动H5页面制作》、《网页特效》和《毕业设计与答辩》奠定网页布局与美化基础。
3.课程要求
《网页布局与美化》课程主要采用“项目导向，任务驱动，案例教学，理论实践一体化课堂”的教学模式开展教学，课程的理论实践一体化教学全部安排在设施先进的理实一体教室进行，教学中以学生自主学习为主，采用多种学习素材及教学手段，教师全程负责答疑解惑、指导项目制作，充分调动师生双方的积极性，达成教学目标。
二、教学目标
1.知识目标
（1）掌握网页标题、文本、段落标签的应用及其CSS属性的设置方法；
（2）掌握网页图像标签的应用及其CSS属性的设置方法；
（3）掌握网页列表与表格的应用及其CSS属性的设置方法；
（4）掌握网页超链接标签及属性的应用方法；
（5）掌握导航栏设计与制作方法；
（6）掌握网页表单标签、表单属性和表单控件的应用方法；
（7）掌握CSS盒模型概念、CSS选择器的应用与CSS样式引入方法等；
（8）掌握背景颜、背景图像、浮动与清除浮动、定位等CSS属性的应用方法；
（9）掌握常用网页布局方法。
2.能力目标
（1）能应用文本、段落、标题标签，设置其CSS样式；
（2）能应用图片标签，设置其CSS样式；
（3）能应用网页列表与表格标签，设置其CSS样式；
（4）能应用表单元素、表单控件、表单属性，设置表单元素、表单控件CSS样式；
（5）能进行背景颜、背景图像等基本CSS属性的设置；
（6）能应用超链接标签，设置其CSS样式；
（7）能应用列表标签与超链接标签及其CSS属性制作导航栏；
（8）能使用DIV+CSS进行网页整体布局与美化。
3.素质目标
（1）培养理论结合实践分析问题和解决问题的能力；
（2）培养学生认真负责、乐观向上的敬业精神；
（3）培养学生沟通协作的团队意识；
（4）培养学生知识获取和应用的自主学习能力；
（5）培养学生探索实践的创新能力；
（6）具有一定的科学思维方式和判断分析问题的能力；
（7）具有较强的网页样式设计创意思维，艺术设计素质。
三、与前后课程的联系
1．与前续课程的联系
《网页设计与制作》使学生熟悉了网页基础知识，初步具备了网页制作能力，为学生的HTML、CSS代码学习打下了基础。
2．与后继课程的关系
为学生后续课程《网页特效》、《网页制作综合训练》、《毕业设计与答辩》提供了网页布局与美化的技术支持。
四、教学内容与学时分配
根据职业岗位网页设计、网页制作、网页美工的要求，将本课程的教学内容分解9个教学项
目，采用“项目导向，任务驱动，案例教学，理论实践一体化课堂”的教学模式开展教学，课程项目结构与学时分配如表1所示。
序号 | 教学单元名称 | 教学目标 | 主要教学内容 | 学时 | 备注 | |
1html网页设计教程(推荐) | 文本网页的布局与美化 | O1-1：了解Web标准 O1-2：熟悉HTML5文档结构 O1-3：掌握常用的HTML标签及属性使用方法 O1-4：掌握CSS样式的引入方式 O1-5：掌握CSS选择符应用 O1-6：掌握CSS字体、段落样式应用 O1-7：掌握CSS盒模型概念及应用 | K1-1：Web标准简介 K1-2：HTML5文档结构 K1-3：HTML常用标记及属性 K1-4：CSS样式的引入方式 K1-5：CSS类选择符、标签选择符 K1-6：CSS字体、段落样式 K1-7：CSS盒模型 | 8 | 理论实践一体化教学 | |
2 | 图文混排网页的布局与美化 | O2-1：掌握img标签及属性的应用 O2-2：理解绝对路径与相对路径 O2-3：了解RGB彩模式与RGBA模式 O2-4：掌握背景颜属性应用 O2-5：掌握背景图像及综合背景属性应用 O2-6：掌握圆角属性应用 O2-7：初步认识显示属性 O2-8：掌握box-shadow属性应用 O2-9：掌握一列居中的设置方法 | K2-1：img标签及属性 K2-2：绝对路径与相对路径 K2-3：RGB彩模式与RGBA模式 K2-4：背景颜属性 K2-5：背景图像及综合背景属性 K2-6：圆角属性 K2-7：显示属性 K2-8：box-shadow属性 K2-9：CSS的盒模型应用 | 8 | 理论实践一体化教学 | |
3 | 带阴影效果的相册网页的布局与美化 | O3-1：掌握span标签的应用O3-2：熟练掌握HTML元素分类 O3-3：熟练掌握float与clear属性的应用 O3-4：熟悉inline-block属性值的应用 O3-5：掌握text-shadow属性的应用 | K3-1：span标签 K3-2：HTML元素分类 K3-3：float与clear属性K3-4：inline-block属性值K3-5：text-shadow属性 | 4 | 理论实践一体化教学 | |
4 | 过程性考核 | O4-1：掌握标题、图像、段落等常用HTML标签应用 O4-2：掌握网页中CSS引入方法 O4-3：掌握盒模型应用 O4-4：掌握背景颜、背景图像CSS属性应用 O4-5：掌握border-radius、box-shadow、text-shadow属性应用等 | K4-1：标题、图像、段落等常用HTML标签 K4-2：网页中CSS引入K4-3：盒模型 K4-4：景颜、背景图像CSS属性 K4-5：border-radius、box-shadow、text-shadow属性等 | 4 | ||
5 | 弹力球动画效果网页的布局与美化 | O5-1：掌握Animation属性的应用 O5-2：熟练掌握关键帧(@keyframes)掌握的应用 O5-3：掌握animation（动画）属性的应用 O5-4：掌握animation-name属性的应用 O5-5：掌握animation-duration属性的应用 O5-6：掌握animation-iteration-count属性的应用 O5-7：掌握animation-timing-function属性的应用 O5-8：掌握animation-direction属性的应用 | K5-1：Animation属性 K5-2：关键帧(@keyframes) K5-3：animation（动画）属性 K5-4：animation-name K5-5：animation-duration K5-6：animation-iteration-count K5-7：animation-timing-function K5-8：animation-direction | 4 | 理论实践一体化教学 | |
6 | 列表网页布局与美化 | O6-1：掌握无序列表标记及属性使用方法 O6-2：了解有序列表标记及属性使用方法 O6-3：了解定义列表标记及属性 O6-4：了解伪类与伪元素 O6-5：掌握伪元素::before及 content属性的应用 | K6-1：无序列表标记及属性 K6-2：有序列表标记及属性 K6-3：定义列表标记及属性 K6-4：伪类与伪元素 K6-5：伪元素::before及 content属性 | 4 | 理论实践一体化教学 | |
7 | 横向导航栏制作 | O7-1：熟练掌握链接标签及其属性的应用 O7-2：熟练掌握text-decroation属性的应用 O7-3：熟练掌握CSS伪类a:active、 a:hover、a:link、a:visited的应用 O7-4：掌握浮动及清除浮动属性应用 | K7-1：链接标签及其属性 K7-2：text-decroation属性K7-3：CSS伪类a:active、a:hover、a:link、a:visited | 4 | 理论 实践 一体 化教学 | |
8 | 两列布局网页设计 | O8-1：理解定位属性 O8-2：掌握绝对定位与相对定位的应用 O8-3：熟悉线性渐变背景属性linear-gradient应用 O8-4：掌握宽度固定两列布局 | K8-1：定位属性 K8-2：绝对定位与相对定位 K8-3：线性渐变背景属性linear-gradient K8-4：宽度固定两列布局 | 4 | 理论实践一体化教学 | |
9 | 图像动画效果网页布局与美化 | O9-1掌握transition属性的使用方法 O9-2掌握transform属性的使用方法 O9-3掌握opacity属性的使用方法 O9-4掌握transition-property属性的使用方法 O9-5掌握transition-delay属性的使用方法 | K9-1transform属性 K9-2transition-property属性 K9-3transition-duration属性 K9-4transition-delay属性K9-5opacity属性 | 4 | 理论实践一体化教学 | |
10 | 表格与表单网页布局与美化 | O10-1认识表格、行、单元格、标题标签 O10-2掌握使用CSS样式控制表格 O10-3认识表单标签及其属性 O10-4掌握单行文本框、密码框、单选按钮、复选框、重置按钮、图像域、文件域等使用方法 O10-5掌握使用CSS样式控制表单 | K10-1表格、行、单元格、标题标签 K10-2使用CSS样式控制表格 K10-3表单标签及其属性 K10-4单行文本框、密码输入框、单选按钮、复选框、重置按钮、图像域、文件域等 K10-5使用CSS样式控制表单 | 4 | 理论实践一体化教学 | |
11 | 终结性考核 | O11-1：掌握常用HTML标签应用方法 O11-2：掌握盒模型应用方法 O11-3：掌握常用CSS属性应用方法 O11-4：掌握浮动与清除浮动属性、定位属性的应用方法 O11-5：掌握导航栏的制作方法 O11-6：掌握两列布局的方法 | K11-1：常用HTML标签应用K11-2：盒模型应用 K11-3：常用CSS属性应用K11-4：浮动与清除浮动属性、定位属性的应用 K11-5：导航栏的制作 K11-6：两列布局 | 4 | ||
12 | 机动 | 两列布局网页设计 | O12-1：熟练掌握绝对定位与相对定位的应用 O12-2：掌握线性渐变背景属性linear-gradient应用 O12-3：掌握两列宽度自适应二列布局 | K12-1：固定定位 K12-2：线性渐变背景属性linear-gradient K12-3：二列右列宽度自适应 | 4 | 根据实际情况 调整授课内容与时间 |
合 计 | 56 | |||||
五、教材的选用
1．教材选取的原则
按照规定选用与课程标准相配套的规划优质教材，禁止不合格的教材进入课堂。建立由专业教师、行业专家和教研人员等参与的教材选用机构，完善教材选用制度，经过规范程序择优选用教材。教材选取遵循“适用、实用、够用”的原则。
（1）适用。教材要以DIV+CSS为基础，符合网页设计、网页美工、淘宝美工等岗位的网页布局能力要求和本课程的培养目标。
（2）实用。教材应以真实项目为主线，按照高职学生认识规律，将知识点序化在各个教学任务中，编写教材内容。强调理论与实践的结合，便于实现“教、学、做”三位一体。符合高职数字媒体应用技术学生特点。
（3）够用。教材的内容主要包括网页布局基本知识和CSS美化技术。不涉及太多、太深的纯理论性知识。
2．推荐教材
（1）陈承欢.《HTML5+CSS3网页美化与布局任务驱动式教程》（第2版）[M]北京：高等教育出版社，2015.
（2）王欣.《网页设计与制作》[M]北京：机械工业出版社，2017.
六、教师要求
担任本课程的主讲教师需要熟练掌握网页设计和网站开发的相关知识，具有一定的网页设计和网站开发经验，同时应具备较丰富的教学经验和课堂组织能力。
专任教师具有教师资格和本专业职业资格或技能等级证书；有理想信念、有良好职业道德、有扎实学识、有仁爱之心；具有数字媒体应用技术和计算机应用等相关专业本科及以上学历；具有扎实数字媒体应用技术技术相关理论和实践能力；具有较强的信息化资源应用和开发能力。
兼任教师主要从相关企业聘任，具备良好的思想政治素质、职业道德和工匠精神，具有扎实的数字媒体应用技术专业知识和丰富的实际工作经验，具有中级及以上相关专业技术职称，能承担本课程教学、实习实训指导等教学任务。
七、学习场地、设施要求
理实一体教室，教室配备黑（白）板、多媒体计算机（48台，安装HBuilder软件和多媒体教学软件）、投影设备、音响设备，互联网接入或WiFi环境，并具有网络安全防护措施。安装应急照明装置并保持良好状态，符合紧急疏散要求、标志明显、保持逃生通道畅通无阻。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论