“网页设计”课程标准
招生对象： |
高中毕业生及同等学力者 |
教学时数： |
64H |
学历层次： |
高职 |
课程代码： |
1830522201 |
修业年限： |
全日制三年 |
学 分 数： |
3.5 |
适用专业： |
软件技术 |
制 订 人： |
艾迪 |
一、课程概述
1．课程定位
本课程是计算机软件专业核心课，也是计算机软件技术及相关专业的专业必修课程。通过本课程学习，培养学生懂专业 —— 熟悉和掌握网页设计与制作及网站建设的基本知识；精技能 —— 具备信息收集、处理、准备、加工的能力，掌握综合运用网页设计软件设计和制作网页的方法，进而完成网页设计、网站建设任务，为今后从事网页设计、网站开发、网站维护和管理工作奠定基础；高素质 —— 在课程学习中培养学习和工作的方法能力，培养共处和做人的社会能力。本课程于第一学期开设，并行课程有“程序设计”等，后续课程包括“Jquery编程技术，JSP程序设计，安卓应用软件开发”等。
2．设计思路
本课程是依据计算机软件专业人才培养方案中，对网页设计相关知识及其基本操作的职业能力要求而设置的。其总体设计思路是，打破以知识传授为主要特征的传统学科课程模式，转变为以情境、任务形式组织课程教学内容，让学生在完成具体任务过程中，学习相关理论知识，掌握网页设计制作过程中所需的各种技术技能。
（1）内容设计
依据课程目标，本课程的学习内容应包括网站开发的工作流程、开发环境，网站建立、网站主页的布局设计与制作，子页面的设计，网站设计任务书的撰写，网站的整体设计，网站的维护等。内容以若干实际案例分析进行组织，在案例的分析掌握相关知识技能，达到知识、技能、素质的综合培养目标。
（2）教学设计
以网页设计、制作与管理，网站规划建设和管理维护等应具备的能力为导向，通过实际的案例，模拟真实的职业环境，灵活采用现场教学、小组讨论、角色扮演等教学方法和多媒体教学等教学手段。改革考核模式，采用过程考核和综合考核相结合，有效利用理论知识与实际相结合、学生自评、学生互评等多种考核方式，不仅考核课程理论知识与技能，同时注重对学生职业素养的考核评价。
二、课程目标
1. 能掌握网页设计与制作的基本知识；
2. 能掌握 HTML 语言；
3. 能掌握静态网页设计与制作的知识；
4. 学会网页中动态效果的设计与实现方法；
5. 能掌握网页中图片设计和处理、动画设计的知识；
6. 能掌握网站检查与发布的知识；
三、内容标准及实施建议
1．情境安排及学时分配
课程依据岗位要求的能力递进关系，确定了 5个学习情境。见表1。
表1 情境安排表
情境序号 |
情境名称 |
学时H |
1 |
HTML5标记 |
10H |
2 |
CSS3样式 |
20H |
3 |
盒子模型及表单应用 |
24H |
4 |
网站网页完善 |
10H |
|
合计 |
64H |
2．情境内容及实施
依据能力目标，在总体设计思路基础上，依据学习情境安排表的安排，设计每个情境的教学目标、教学内容、重点难点及解决方案，给出具体的教学实施建议，说明教学资源，明确每个情境的详细考评标准。具体教学设计见表2－表6。
表2 情境1教学设计表
情境1 |
HTML5标记 |
学时H |
10H |
教学目标 |
1. 了解各种类型网页的布局结构、色彩搭配 2. 对网页有一个初步的印象，激发学习网页制作的兴趣 3. 了解网页制作的基础知识和相关概念 4. 熟悉Dreamweaver的界面布局和工作环境 |
教学内容 |
1. 浏览不同类型的网站 2. 网站和网页的基础知识 3. 网页的基本构成元素 4. 制作网页的工具概述 5. 初识Dreamweaver中文版 |
重点难点 |
重点： 1.网站风格的分析与制作特色 2. 万维网、网页、网站、主页和HTML的基本概念。 通过边讲、边练、讲练结合的方法来解决。 难点： 学以致用。如何根据网站的内容来分析网站的风格及其特色并运用到自己所设计的网站上来。 |
教学实施 建议 |
1. 说课。问题导航、引入新课：了解本班学生以前是否有网页设计方法的基础，对网页设计与制作是否有兴趣。采用多媒体的电子课件，结合各类型的网站来分析讲解网站和网页的基础知识包括：WWW、URL、Server与Browser、网页、网站、Hypertext、HTTP、HTML、CSS；Html文档结构。（2H） 2. HTML5标记。文本标记、图像标记、超链接、锚点链接。（2H） 3. 制作简单HTML5页面。阶段案例（2H） 4. HTML5页面元素及属性。列表、页面结构元素、页面交互元素。（2H） 5. 制作电影影评网。阶段案例（2H） |
教学资源 |
场地：多媒体投影教室 设备、工具等：多媒体教学设备、应用软件及多媒体教学软件 资料：电子教材、电子教案、多媒体教学课件、网络资源 |
考核评价 |
1课堂提问及布置的习题：回答问题与习题完成的情况 2.评价方式：学生自评、教师对学生各考核项目按照考核标准进行评价 |
表3 情境2教学设计表
情境2 |
CSS3样式 |
学时H |
20H |
教学目标 |
1. 掌握站点的创建和管理的方法 2. 了解Dreamweaver的参数设置方法 3. 掌握页面属性的设置方法 4. 掌握属性、关系等选择器 |
教学内容 |
1. 站点的创建和管理 2. Dreamweaver的参数设置 3. 设置页面属性 4. 设置文件头内容 5. 属性、关系选择器 6. 伪类、伪元素选择器 |
重点难点 |
重点： 1.站点的创建和管理2. 表格标记。3. 链接伪类:hover应用。 通过边讲、边练、讲练结合的方法来解决。 难点： 1.结构化伪类选择器的使用 如何做到学以致用、如何把学到的知识点用到实践中来。 |
教学实施 建议 |
1. CSS3核心。CSS样式应用场景介绍；样式属性语法规则；行内式、内嵌式样式；标记选择器、类选择器；基本文本样式。（4H） 2. CSS3高级特性。链入式样式表；标签选择器；文本外观样式；CSS优先级。（2H） 3.制作服装推广软文。阶段案例（2H） 4.属性、关系选择器。属性选择器、子代选择器、兄弟选择器。（4H） 5.伪类、伪元素选择器。root、not、child、type选择器。(4H) 6.链接伪类。before、after选择器；超链接标记的伪类。（2H） 7.制作网页设计软件列表、阶段案例（2H） |
教学资源 |
场地：多媒体投影教室 设备、工具等：多媒体教学设备、应用软件及多媒体教学软件 资料：电子教材、电子教案、多媒体教学课件、网络资源 |
考核评价 |
1课堂提问及布置的习题：回答问题与习题完成的情况 2.评价方式：学生自评、教师对学生各考核项目按照考核标准进行评价 |
表4 情境3教学设计表
情境3 |
盒子模型及表单应用 |
学时H |
24H |
教学目标 |
1.掌握盒子模型 2.掌握各种网页元素的输入、编辑 3.掌握各种网页标签及CSS样式的用法 |
教学内容 |
1. 盒子模型 2. 网页元素的输入和编辑：文本、图像、多媒体 3. 表单 |
重点难点 |
重点： 1.盒子模型相关属性 2.浮动和定位 3.网页布局 通过边讲、边练、讲练结合的方法来解决。 难点： 1.盒子的背景属性的应用 2.浮动在网页布局的应用 学以致用。如何把学到的知识点用到实践中来。 |
教学实施 建议 |
1. 盒子模型基础。认识盒子模型，div标记，盒子的宽、高、边框、边距。（4H） 2. 盒子模型背景属性。设置背景颜色，背景图像位置、大小、显示裁剪。（4H） 3. CSS3渐变属性。线性渐变、径向渐变、重复渐变。（2H） 4. 制作音乐排行榜。阶段案例。（2H） 5. 浮动与定位。float、clear属性；静态定位、相对定位、绝对定位、固定定位。（2H） 6. 制作网页焦点图。阶段案例（2H） 7. 表单属性及input元素。Form表单、表单的属性。Input元素、Input元素的属性。（4H） 8. 其他表单元素及样式控制。textarea元素、select元素、datalist元素、keygen元素、output元素。（2H） 9. 制作信息登记表。阶段案例。（2H） |
教学资源 |
场地：多媒体投影教室 设备、工具等：多媒体教学设备、应用软件及多媒体教学软件 资料：电子教材、电子教案、多媒体教学课件、网络资源 |
考核评价 |
1课堂提问及布置的习题：回答问题与习题完成的情况 2.评价方式：学生自评、教师对学生各考核项目按照考核标准进行评价 |
表5 情境4教学设计表
情境4 |
网站网页完善 |
学时H |
10H |
教学目标 |
1.进一步掌握CSS3高级应用 2.掌握网页中动感元素的应用 3.掌握网页中的多媒体技术 |
教学内容 |
1.CSS3高级样式应用——过渡、变形、动画 2.网页中的动感元素 3.网页中的多媒体技术 4.制作电商网站首页 |
重点难点 |
重点： 1. CSS3高级样式应用；2.嵌入视频和音频 通过边讲、边练、讲练结合的方法来解决。 难点： 1. 过渡、变形、动画CSS3样式高级应用 学以致用。如何把学到的知识点用到实践中来。 |
教学实施 建议 |
1. 多媒体技术。视频、音频解码器；嵌入音频、视频；音频、视频的方法和事件。（2H） 2. 制作音乐播放界面。阶段案例。（2H） 3. CSS3高级应用——过渡、变形。控制时间过渡、动画快慢等过渡效果，制作2D、3D转换效果。（4H） 3. CSS3高级应用——动画。介绍定义动画的关键帧、名称、时间、速度曲线、效果延迟、播放次数等动画制作相关属性。（2H） 4. 制作工作日天气预报。阶段案例。（2H） 5. 制作电商网站首页。综合案例。（8H） 6. 综合测试。大作业提交及答辩或现场考试。（2H） |
教学资源 |
场地：多媒体投影教室 设备、工具等：多媒体教学设备、应用软件及多媒体教学软件 资料：电子教材、电子教案、多媒体教学课件、网络资源 |
考核评价 |
1课堂提问及布置的习题：回答问题与习题完成的情况 2.评价方式：学生自评、教师对学生各考核项目按照考核标准进行评价 |
四、考核评价
1．课程考核评价成绩构成
教学效果评价采取过程性评价与结果性评价两种方式进行，突出“过程考核与结果考核相结合，教师评价与学生自评相结合”的原则。过程考核贯穿于整个教学过程，对每个情境的学习过程进行考核，体现考核的公平和公正性，促进学生在课程学习全过程中保持持续性动力。结果性考核采用学期末的综合性试题进行测试。本课程的过程性评价和结果性评价的重点均为网站制作过程中所涉及的相关技能，其中过程性评价的比重为40%，结果性评价的比重为60%。具体见下表6：
表6 课程考核分值表
情境/项目名称 |
过程考核评价 |
结果考核评价 |
得分 |
占总成绩% |
实得分 |
得分 |
占总成绩% |
实得分 |
HTML5标记 |
20 |
20×60% |
|
100×40% |
100×40% |
|
CSS3样式 |
30 |
30×60% |
|
盒子模型及表单应用 |
30 |
30×60% |
|
网站网页完善 |
20 |
20×60% |
|
课程总成绩=Σ过程考核实得分＋Σ结果考核实得分 |
2．过程考核评价
过程考核重点在于考核学生在学习过程中的学习效果，并以此促进学生在整个课程学习过程中的阶段性成效和持续性动力。为了体现考核的公平和公正性，教师必须客观、真实地记录学生的任务完成情况，且注重学生自评和学习小组的评分。过程考核评价的具体项目、内容、标准及方式详见表2－表5各情境教学设计表的考核评价项。
3．结果考核评价
结果性考核采用学期末的综合性案例分析进行测试。以案例分析所涉及的各知识点掌握的情况作为结果性评价的依据，占总成绩的40%。
表7 结果考核评分表
考核形式 |
考核内容 |
分值 |
一个企业网站的建设 |
1. 网站的站点建立与管理 2. 网站的布局方法 3. 网页的页面元素的输入与编辑 4. CSS样式的使用 |
100 （100×40%） |
总分 |
60 |
五、教学实施条件
1．师资基本条件
教师应具有先进的高职教学理念、具备计算机专业领域及企业管理全面的知识储备，掌握网页制作的基本原理和网页制作过程中所涉及的各项知识；教师应具备很强的计算机应用能力及当前主流网页设计软件的应用能力、对网页设计所涉及的新知识的自觉自学能力及较强的教学能力；教师应有良好的师德师风、IT素养，还应具备“双师”素质，即要有理论知识又要有实践经验，有企业相关工作或实习经历，能承担实践教学。
2．实践教学条件
本课程所讲授的是网页设计的基本知识，以课堂讲授、案例分析及学生讨论为主，在专门实践场地进行实训。
（1）校内实训条件
为满足“计算机网络专业”主要职业岗位技能的培养，课程需配置有设备齐全、技术先进的企业信息化技术实训室，为本课程实现“教、学、做”一体化提供保障。
实训场地名称 |
主要设备配置 |
主要功能 |
网页设计专用实训室 |
高配置个人电脑、数据库服务器、相关教学软件 |
开放式教学 |
(2) 校外实训条件
为实现本课程教学目标，拓宽学生专业知识，培养综合技能，在校内实训基地完成课程教学基础上，应与软件公司合作建立校外实习基地。通过在校外实习基地专业实践和顶岗实习，使学生在真实工作环境下，提高对网页设计过程的全面认识，并能参与到其中的某些应用领域。培养学生的职业规范和职业道德。
3．教学资源条件
课程应配有网络教学资源，不仅教师可以利用这些资源进行教学，学生也可以通过课程资源进行自主学习。课程网络教学资源应包括：课程标准、电子课件、电子教材、学习指南、在线测试、视频动画库、图片库、虚拟仿真库、案例库等内容。
六、其它建议和说明
教材的编写遵循以下两个原则，一是实用性原则，本课程是从网页实用性的角度来讲述相关的知识点，以能够指导整个实施过程为选择原则。二是前沿性，就是编写的教材和选用的参考书应介绍一些现代前沿的网页知识、软件与最新技术。
教师在教学过程中可选用如下相关参考教材：
《HTML+CSS+JavaScript网页制作简明教程》主编 王爱华等 清华大学出版社
《网页设计与制作实训教程》 主编 白征，李云程 中国水利水电出版社
《新编网页制作三剑客》主编 王伍增，张磊，李迎丰 化学工业出版社
