中等职业学校《网页设计与制作》课程标准

XXXX职业技术学院《网页设计与制作》课程标准PAGE10“网页设计与制作”课程标准招生对象：高中毕业生及同等学历者课程代码：03000301学历层次：高职教学总时数：84H修业年限：全日制三年实践课时数：56H适用专业：计算机网络技术制订人：XXX学分数：5.5审核人：XXX一、课程概述1．课程定位本课程是计算机网络技术专业的一门专业拓展课程。通过本课程的学习，要求学生掌握网页设计的基本概念和方法，学会利用常用的网页设计工具，结合HTML标记和CSS样式设计制作常见的静态网页，具备网站的建设和维护能力，培养学生的综合职业能力、创新精神和良好的职业道德，为后续HTML5高级程序设计、MySQL数据库、PHP程序设计等网站开发课程学习奠定基础。2．设计思路内容设计以前端岗位对从业人员的职业能力和职业素养的要求为依据，以培养学生实际动手制作网页能力为目标，使学生具备网页设计与制作、网站规划与维护的实践技能，以便形成良好的计算机网页制作与网站管理职业素养。将难以理解的思想和问题简单化，对每个知识点都进行深入地分析，并针对每个知识点精心设计相关案例，然后模拟知识点在实际工作中的运用，真正做到知识的由浅入深，由易入难。从网页制作的基础知识入手，注重HTML和CSS基础、阶段案例进行讲解，后介绍CSS高级技巧、布局与常见的兼容性，最后以设计并制作出完整页面案例结尾。教学设计课程教学可安排在普通教室和专业机房进行，按“项目导向，任务驱动”的教学模式，课程教学强化实训环节对学生网页设计与制作的能力培养。采用启发探究式教学法、项目驱动教学法、对比教学法、问题式教学法、线上线下混合式教学等形式多样的教学方法。大力开发课程资源，提供丰富的学习资源，将课堂授课与网络教学相结合，促进自主学习。教学效果评价采取线上评价与线下评价相结合，理论与实践相结合，重点考核网页设计与制作的能力，线上评价与线下评价的比重为30%和70%。二、课程目标了解HTML和CSS语言简介。熟悉HTML文本控制标记和图像标记。理解CSS语法、CSS选择器。掌握盒子的相关属性。掌握列表标记、超链接标记、表单相关标记。掌握元素的定位。能熟悉网页设计规范，养成良好的设计习惯。三、内容标准及实施建议1．课题安排及学时分配根据计算机前端的工作岗位的能力要求，结合学生素质及教学条件的实际情况，按照本课程的教学设计思路和培养目标的要求，依据各课题的教学内容多少及难易程度的不同，确定教学学时分配见表1。表1课题安排表课题序号课题名称学时H1HTML与CSS网页设计概述6H2HTML入门6H3CSS入门6H4盒子模型12H5列表与超链接12H6表格与表单12H7浮动与定位18H8网页布局与具体项目制作12H合计84H2．课题内容及实施在总体设计思路基础上，依据本课程的教学目标及课题安排表的安排，设计每个课题的教学目标、教学内容、重点难点及解决方案，给出具体的教学实施建议，说明教学资源，明确每个课题的详细考评标准。具体教学设计见表2－表9。表2课题1教学设计表课题1HTML与CSS网页设计概述学时H6H教学目标掌握网页基本概念。了解HTML和CSS语言简介。了解Web标准。熟悉Dreamweaver工具的基本操作能够创建出一张简单的网页。教学内容Web相关概念。HTML与CSS、常见浏览器的介绍。Dreamweaver/HBuilderX工具的使用重点难点重点Web标准、HTML与CSS语言简介；使用Dreamweaver工具创建简单的网页。难点Web标准；Dreamweaver工具的基本操作。教学实施建议步骤内容教学实施课时1Web相关概念。用讲授法，讲解Web基本概念；课堂练习，及时检查和巩固所学知识（1H）；22HTML与CSS、常见浏览器的介绍。通过讲授法，讲解HTML和CSS简介（1H）；通过讨论法，讨论常见的浏览器，并对比。（1H）；23Dreamweaver/HBuilderX工具的使用用演示法，演示DW软件的操作；用多媒体教学法，演示上机步骤（1H）；学生上机实际操作（1H）；2教学资源场地：教室+专业机房设备、工具等：Dreamweaver，多媒体教学软件资料：校内讲义、教学课件、习题集考核评价考核项目考核内容考核标准考核方式网页设计创建出一张简单的网页要求程式格式规范，上机操作步骤正确。作业表3课题2教学设计表课题2HTML入门学时H6H教学目标了解HTML基本结构。理解HTML头部相关标记。熟悉HTML文本控制标记。掌握HTML图像标记。能够利用HTML相关标记控制文本和图像。能够使用相对路径和绝对路径控制网页图像。教学内容什么是HTML。HTML文本控制标记。HTML图像标记。重点难点重点HTML标记；标记的属性；HTML文本控制标记；HTML图像标记及其使用方法。难点使用HTML标记制作页面时，文本标记的样式设置；图像的路径问题。教学实施建议步骤内容教学实施课时1HTML介绍用讲授法，讲解HTML文档的基本格式、HTML标记标记的属性、HTML文档头部相关标记等（1H）；12HTML文本控制标记用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生了解标题和段落标记、文本格式化标记、特殊字符标记等相关概念（1H），后发布项目，学生上机实操（2H）；33HTML图像标记用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生了解常用图像格式、图像标记、相对路径和绝对路径等相关概念（1H），后发布项目，学生上机实操（1H）；2教学资源场地：教室+专业机房设备、工具等：Dreamweaver，多媒体教学软件资料：校内讲义、教学课件、习题集考核评价考核项目考核内容考核标准考核方式阶段案例制作图文混排页面页面正常显示，不会出现乱码，代码书写规范作业表4课题3教学设计表课题3CSS入门学时H6H教学目标理解CSS语法。掌握CSS选择器。熟悉CSS控制文本样式。理解CSS优先级。能够应用CSS选择器和CSS属性定义CSS。能够使用文本样式属性修饰网页中的文本。能够计算CSS样式的优先级。教学内容CSS核心基础。CSS文本相关样式。CSS高级特性。重点难点重点CSS样式表的引入方式；CSS选择器；高级特性及常用的文本样式属性。难点利用CSS样式控制网页时，要注意CSS继承性及优先级的问题。教学实施建议步骤内容教学实施课时1CSS核心基础用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生了解CSS样式规则、引入CSS样式表、CSS基础选择器等相关概念（1H），后发布项目，学生上机实操（1H）；6H2CSS文本相关样式。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生了解CSS字体样式属性、CSS文本外观属性等相关概念（1H），后发布项目，学生上机实操（1H）；3CSS高级特性。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生了解CSS符合选择器、CSS层叠性和继承性、CSS优先级等相关概念（1H），后发布项目，学生上机实操（1H）；教学资源场地：教室+专业机房设备、工具等：Dreamweaver，多媒体教学软件资料：校内讲义、教学课件、习题集考核评价考核项目考核内容考核标准考核方式阶段案例制作新闻页面页面正常显示，不会出现乱码，代码书写规范作业表5课题4教学设计表课题4盒子模型学时H12H教学目标1.了解盒子模型的概念。2.掌握盒子模型的相关属性。3.熟悉元素的类型。4.理解元素的转换。5.能够利用盒子模型的相关属性设置网页元素所呈现的效果。6.能够计算网页元素在网页中所占宽、高距离。7.能够分辨出网页元素的种类。8.能够对网页元素类型进行转换。教学内容1.盒子模型的概念。2.盒子模型的相关属性。3.元素的类型与转换。4.块元素垂直外边距的合并。重点难点重点盒子模型的组成；元素类型的转换；盒子外边距合并问题及其解决方法。难点利用盒子模型进行布局时，外边距和内边距的使用。使用内边距注意盒子实际的大小教学实施建议步骤内容教学实施课时1盒子模型的概念。通过讲授，帮助学生了解盒子模型这一等抽象概念（1H）12H2盒子模型的相关属性。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生掌握边框属性、内边距属性、外边距属性、背景属性、盒子的宽与高等相关概念（2H），后发布项目，学生上机实操（2H）；3元素的类型与转换。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生掌握元素的类型、<div>、<span>标记、元素的转换等相关概念（2H），后发布项目，学生上机实操（2H）；4块元素垂直外边距的合并。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生掌握相邻块元素垂直外边距的合并、嵌套块元素垂直外边距的合并等相关概念（1H），后发布项目，学生上机实操（2H）；教学资源场地：教室+专业机房设备、工具等：Dreamweaver，多媒体教学软件资料：校内讲义、教学课件、习题集考核评价考核项目考核内容考核标准考核方式阶段案例制作音乐盒页面正常显示，不会出现乱码，代码书写规范作业表6课题5教学设计表课题5列表与超链接学时H12H教学目标1.掌握列表（无序、有序、定义）标记。2.熟悉列表样式的控制。3.掌握超链接标记。4.了解CSS伪类。5.能够灵活利用列表布局网页模块。6.能够利用列表样式控制、美化列到。7.能够熟练运用链接伪类控制超链接的样式。教学内容1.列表标记（无序列表、有序列表、定义列表）。2.CSS控制列表样式。3.超链接标记。4.链接伪类控制超链接。重点难点重点定义三种列表的方法；创建超链接的方法以及使用链接伪类控制超链接样式。难点定义列表实现图文混排；列表的嵌套应用；使用背景属性定义列表项目符号以及链接伪类的应用。教学实施建议步骤内容教学实施课时1列表标记（无序列表、有序列表、定义列表）。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生掌握无序列表、有序列表、定义列表、列表的嵌套应用等相关概念（1H），后发布项目，学生上机实操（2H）；12H2CSS控制列表样式。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生掌握list-style-type属性、list-style-imag属性、list-style-position属性、list-style属性等相关概念（1H），后发布项目，学生上机实操（2H）；3超链接标记。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生掌握创建超链接、锚点链接等相关概念（1H），后发布项目，学生上机实操（2H）；4链接伪类控制超链接。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生掌握超链接四个伪类概念（1H），后发布项目，学生上机实操（2H）；教学资源场地：教室+专业机房设备、工具等：Dreamweaver，多媒体教学软件资料：校内讲义、教学课件、习题集考核评价考核项目考核内容考核标准考核方式阶段案例制作新闻列表页面正常显示，不会出现乱码，代码书写规范作业表7课题6教学设计表课题6表格与表单学时H12H教学目标能够掌握创建表格与表单的基本语法。了解表格布局。熟悉常用的表单控件。熟练地运用表格与表单组织页面元素。教学内容1.表格标记。2.CSS控制表格样式。3.表单介绍。4.创建表单。5.表单控件。6.CSS控制表单样式。重点难点重点表格相关标记；表单相关标记以及CSS控制表格与表单的样式难点<table>标记及属性；CSS控制表格样式；表单控件的应用。教学实施建议步骤内容教学实施课时1表格标记。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生掌握创建表格、<table>标记属性、<tr>标记属性、<td>标记属性、<th>标记属性、表格的结构等相关概念（1H），后发布项目，学生上机实操（2H）；12H2CSS控制表格样式。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生掌握CSS控制表格边框、CSS控制单元格边距、CSS控制单元格的宽高等相关概念（1H），后发布项目，学生上机实操（2H）；3表单介绍。通过讲授，帮助学生了解表单这一等抽象概念（1H）；4创建表单。通过演示，帮助学生掌握如何创建表单（1H）；5表单控件。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生掌握input控件、textare控件、select控件等相关概念（1H），后发布项目，学生上机实操（2H）；6CSS控制表单样式。通过演示，帮助学生掌握CSS控制表单样式（1H）；教学资源场地：教室+专业机房设备、工具等：Dreamweaver，多媒体教学软件资料：校内讲义、教学课件、习题集考核评价考核项目考核内容考核标准考核方式阶段案例制作注册界面页面正常显示，代码书写规范作业表8课题7教学设计表课题7浮动与定位学时H18H教学目标1.理解元素的浮动。2.熟悉清除浮动的方法。3.掌握元素的定位。4.能够熟练地运用浮动和定位进行网页布局。5.能够灵活地利用overflow属性制作网页效果。6.能够灵活的运用定位属性对网页元素实现精确定位。7.熟悉清除浮动的常用方法，且能够清除浮动在网页布局的影响。教学内容1.元素的浮动。2.overflow属性。3.元素的定位（相对定位、绝对定位、固定定位）。重点难点重点清除浮动的几种方法；overflow属性；相对定位和绝对定位的应用。难点当浮动元素对周围其他元素产生影响时，如何选择恰当的方法清除浮动。教学实施建议步骤内容教学实施课时1元素的浮动。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生掌握元素的浮动属性、清除浮动等相关概念（2H），后发布项目，学生上机实操（4H）；18H2overflow属性。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生了解overflow属性，通过演示，学生了解overflow属性的用法（2H），后发布项目，学生上机实操（2H）；3元素的定位（相对定位、绝对定位、固定定位）。用“项目导向、任务驱动”的教学法组织教学：通过讲授，帮助学生掌握元素的定位属性、静态定位、相对定位relative、绝对定位、固定定位等相关概念（2H），后发布项目，学生上机实操（6H）；教学资源场地：教室+专业机房设备、工具等：Dreamweaver，多媒体教学软件资料：校内讲义、教学课件、习题集考核评价考核项目考核内容考核标准考核方式阶段案例制作banner页面正常显示，代码书写规范作业表9课题8教学设计表课题8网页布局与具体项目制作学时H12H教学目标1.掌握CSS常见布局方式。2.了解CSS布局流程及命名规范。3.能够对元素选择器进行规范命名。4.熟悉网页设计与制作流程。5.能够结合HTML与CSS进行网页项目制作。教学内容1.CSS的布局（版心和布局流程、单列布局、双列布局、三列布局、通栏布局）。2.网页具体项目设计与制作（首页、子页面的制作）。重点难点重点：几种常见的CSS布局，CSS布局流程及命名规范。难点：网页布局与具体项目制作代码编写与调试。教学实施建议CSS的布局。详细讲解版心和布局流程、单列布局、双列布局、三列布局、通栏布局等布局方式，并通过上机练习实践。（2H）浏览器兼容性。详细讲解CSSHack、IE条件注释语句、使用!important解决高度自适应问题，并通过上机练习实践。（1H）常见IE6浏览器的兼容性问题。详细讲解IE6中浮动元素的双倍外边距问题、IE6不支持透明图像问题，并通过上机练习实践。（1H）网页具体项目设计与制作。案例讲解传智播客设计学院首页面、子页面的设计制作方法方法，后通过项目导向，以任务为驱动，进行完整网页的设计制作。(8H)教学资源场地：机房；设备、工具等：多媒体教学设备、Dreamweaver及多媒体教学软件；资料：校内讲义、教学课件、习题集。考核评价考核项目考核内容考核标准考核方式阶段案例传智播客设计学院首页面、子页面页面正常显示，代码书写规范作业考核评价本课程采取线上+线下多元的形成性混合考核方式。课程利用精品在线开放课程资源进行线上线下混合式教学，采用多元的形成性混合评价考核机制，线下成绩占70%，线上成绩占30%。具体如下：1）线下成绩占课程考核的70％。包括课堂考勤10%、课堂表现10%、实训表现10%、课后作业10%、期末作品成绩30%等。主要考核学习过程，着重考核学生的自觉、自律能力、平时学习情况及职业素养，其中期末作品主要考核学生对本课程基础知识掌握程度以及开发编程、实践能力。2）线上成绩占课程考核的30％，网络教学系统自行统计。主要考核学生自主学习情况、作业完成情况、交流及讨论情况。五、教学实施条件师资基本条件校内专任教师需具备本专业本科或研究生以上学历。任课教师开课前要在教研组详细讲解设计的教学案例及授课思路（项目）。校外兼职教师主要从其他高校和相关企业聘任，具备良好的思想政治素质、职业道德和工匠精神，具有扎实的计算机专业知识和丰富的实际工作经验。具有中级及以上相关专业职称，能承担专业课程教学、实训指导和大学生职业发展与就业指导等教学任务。实践教学条件本课程实践教学在专业机房进行。我校现有15个信息技术类专业机房，均安装有多媒体教学软件，