2025年《网页设计基础》课程标准（含课程思政元素）

2/2《网页设计基础》课程标准课程名称：网页设计基础课程代码：3250702适用专业：计算机网络技术专业（网络互动媒体开发方向）课程性质：专业必修课学时：72学时（理论：36实践：36）学分：4学分一、课程概述（一）课程的地位和任务《网页设计基础》是面向计算机网络技术专业（网络互动媒体开发）方向的一门专业核心课，HTML5+CSS3是Web前端开发的技术基础，涉及HTML5页面元素及属性、表单、CSS3入门基础、选择器、盒子模型、浮动与定位、网页布局、变形与动画等内容，是前端工程师必须掌握的基础知识。通过本课程的学习，为将来从事WEB前端开发、WebApp开发及跨平台应用开发等相关工作奠定基础。本课程符合高技能人才培养目标和专业相关技术领域职业岗位（群）的任职要求，通过课程的学习将促进学生创新意识和综合职业能力的形成，为后续网站开发技术的学习奠定基础。课程注重实际项目开发，提供各个知识点的完整综合项目案例，通过大量实例对HTML5和CSS3进行深入浅出的分析，使学生在学习技术的同时，掌握Web开发和设计的精髓，提高综合应用能力。（二）课程设计思路《网页设计基础》是以学生为主体的、基于工作过程导向的学习领域课程。在学习过程中，学生首先要获得的是关于职业内容和工作环境的感性认识，进而获得与职业相关的专业知识和技能。即强调以学生直接经验的形式——典型网页的设计与制作，来掌握融合于实践行动中的新知识、新技能，而不是以往仅完成网页各独立元素的设计与制作，真正落实教、学、做一体化课程的实施，切实提高人才培养质量。按照工作过程对课程内容进行序化，将陈述性知识与过程性知识整合、理论知识学习与实践技能训练整合、专业能力培养与职业素质培养整合、工作过程与学生认知心理过程整合，通过科学的教学设计，将学习领域细化成具体的学习情境。二、培养目标与要求（一）总体目标与要求本课程基于讲授和实践操作的授课方式来学习课程内容，以行动为导向进行教学内容设计，以学生为主体，以理论讲解加案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。在案例驱动教学中，运用典型案例，将学生带入特定事件的现场进行案例分析，通过学生的独立思考或集体协作，进一步提高其识别、分析和解决某一具体问题的能力。同时，通过把抽象的原理和代码具体化，展示在实际案例项目中，增进学习兴趣和动力，恰当地掌握所学知识的含义和意义。通过本课程的学习，使学生能熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架元素标志及属性设计出多窗口网页、动态网页；掌握利用CSS进行网站的布局、美化等相关技术，能独立完成静态网站的设计与制作。（二）具体目标与要求1、素质（1）具有勤奋学习的态度，严谨求实、创新的工作作风；（2）具有良好的心理素质和职业道德素养；（3）具有高度责任心和良好的团队合作精神；（4）具有科学思维方式和一定的唯物辩证法思想；（5）具有较强的网页设计创意思维、艺术设计素质。2、知识（1）了解HTML5和CSS3的发展。（2）熟练掌握HTML5网页的基本结构、CSS3样式的定义与样式表的插入。（3）熟练掌握HTML5常用的文本标签、CSS文本属性。（4）熟练掌握HTML5的图像标签、CSS的图像属性。（5）熟练掌握HTML5的列表标签、CSS的属性、表格属性和定位属性。（6）熟练掌握HTML5的表单及控件标签、form属性和input属性。（7）掌握CSS各种类型的选择器、CSS盒子模型、浮动、定位、过渡、变形、动画属性。（8）掌握Web前端开发工具的使用。3、能力（1）会应用HTML5结合CSS3设计Web页面。（2）能设计并实现文本网页和导航网页。（3）会在网页中合理地插入图像，能设计并实现图像网页。（4）会应用列表、表格及CSS定位设计设计信息展示网页。（5）会应用表单及标签控件设计注册登录与留言网页。（6）能应用<Audio>、<Vedio>标签及相关属性、方法和事件设计制作多媒体页面。（7）会设计复杂样式与网页特效。三、教学内容（一）课程教学安排进程安排、学习任务（项目）描述、结构与内容、目标与要求及学时分配见下下表：表1《网页设计基础》课程教学内容设计表序号学习任务（项目）子任务（项目）教学内容课时数（理论/实践）目标与要求（知识点、能力点、思政点）教学方式（教学方法、教学手段）教学场地1初识HTML5阶段案例—制作HTML5百科页面HTML5的发展与基础；文本控制标记，图像标记；超链接标记；4（2/2）知识：了解HTML5发展历程，熟悉HTML5浏览器支持情况；掌握文本控制标记、图像标记、超链接标记，能够制作简单的网页；理解HTML5基本语法，掌握HTML5语法新特性。能力：能使用HTML构建简单页面。思政：培养良好的代码规范等职业素养。讲授与实践结合上课机房2HTML5页面元素及属性结构元素；页面交互元素；全局属性；分组元素；文本层次语义元素lu、ol、li、dl、header、nav、article、aside、section、footer、figure、figcaption、hgroud、details、summary、progress、meter、time、mark、cite元素；draggable、hidden、spellcheak、contenteditable属性8（4/4）知识：掌握结构元素的使用，可以使页面分区更明确；掌握页面交互元素的使用，能够实现简单的交互效果；掌握全局属性的应用，能够使页面元素实现相应的操作；理解分组元素的使用，能够建立简单的标题组。理解文本层次语义元素，能够在页面中突出所标记的文本内容。能力：能熟练使用HTML标记的常用属性辅助页面构建。思政：培养代码格式良好、重视代码细节等习惯。讲授与实践结合上课机房3CSS3入门CSS3发历史；CSS文本样式属性；CSS基础选择器；CSS层叠性、继承性与优先级CSS样式规则；引入CSS样式表；CSS基础选择器；字体样式属性；文本外观属性；CSS层叠性和继承性；CSS优先级8（4/4）知识：掌握CSS基础选择器，能够运用CSS选择器定义标记样式；了解CSS3的发展历史以及主流浏览器的支持情况；理解CSS优先级，能够区分复合选择器权重的大小；熟悉CSS文本样式属性，能够运用相应的属性定义文本样式。能力：能使用CSS进行页面美化。思政：培养重视用户体验的服务精神。讲授与实践结合4CSS3选择器属性选择器；结构化伪类选择器；链接伪类；关系选择器；CSS层叠性、继承性与优先级E［att^=value]属性选择器；E［att$=value]属性选择器；E［att*=value]属性选择器；子代选择器（>）兄弟选择器（+、～）：root选择器等：before择器：after选择器8（4/4）知识：掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的元素添加样式；理解关系选择器的用法，能够准确判断元素与元素间的关系；掌握伪元素选择器的使用，能够在页面中插入所需要的文字或图片内容；掌握CSS伪类，会使用CSS伪类实现超链接特效；掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同样式。能力：能书写合适的选择器对页面进行美化。思政：培养精简代码、优化结构的IT工匠精神。讲授与实践结合5CSS盒子模型盒子模型概述；背景属性；盒子模型的相关属性；渐变属性Div标记；边框边距属性；背景设置相关属性；线性渐变、径向渐变和重复渐变设置12（6/6）知识：掌握盒子的相关属性，能够制作常见的盒子模型效果；掌握背景属性的设置方法，能够设置背景颜色和图像；理解渐变属性的原理，能够设置渐变背景；熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。能力：能熟练使用盒子模式搭建页面框架。思政：培养优化代码、团队协作的职业精神。讲授与实践结合布置作业6浮动与定位元素的浮动；常见的几种定位模式；清除浮动的方法；素的类型与转换Float属性使用与清除；各种定位的设置与区别；块元素和行内元素的区别和转换；阶段案例实现8（4/4））知识：熟悉清除浮动的方法，可以使用不同方法清除浮动；掌握元素的定位，能够为元素设置常见的定位模式；理解元素的浮动，能够为元素设置浮动样式。能力：能熟练使用浮动和定位进行页面构建。思政：培养重视用户体验的职业素养。讲授与实践结合7表单的应用表单的构成；表单样式的控；表单相关元素form标记和表单元素标记；创建表单；阶段案例8（4/4）知识：了解表单功能，能够快速创建表单。掌握表单相关元素，能够准确定义不同的表单控件。掌握表单样式的控制，能够美化表单界面。能力：能熟练使用表单元素和表单标签实现用户表单。思政：培养重视用户体验、重视数据安全的职业素养。讲授与实践结合8多媒体技术HTML5多媒体的特性；嵌入视频和音频；视频和音频的方法和事件；多媒体的支持条件；CSS控制视频的宽高多媒体格式；在HTML5中嵌入音频和视频；source属性；CSS控制视频宽和高；视频音频事件；阶段案例4（2/2）知识：熟悉HTML5多媒体特性；掌握HTML5中视频的相关属性，能够在HTML5页面中添加视频文件；了解HTML5中视频、音频的一些常见操作，并能够应用到网页制作中；了解HTML5支持的音频和视频格式；掌握HTML5中音频的相关属性，能够在HTML5页面中添加音频文件。能力：能熟练使用多媒体标记丰富页面内容。思政：培养重视用户体验、创意思维等职业素养。讲授与实践结合9CSS3高级应该用过渡；变形；动画；过渡实现属性；变形实现的属性和动画的实现；阶段案例4（2/2）知识：理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果；掌握CSS3中的变形属性，能够制作2D转换、3D转换效果；掌握CSS3中的动画，能够熟练制作网页中常见的动画效果。能力：能完成简单的页面动画效果。思政：培养重视用户体验、艺术设计等职业素养。讲授与实践结合10实战开发综合案例8知识：HTML+CSS综合知识。能力：能使用HTML+CSS完成网页编写。思政：培养IT工匠精神和良好的程序员职业素养和岗位职责。讲授与实践结合（二）实训项目安排该课程的实训融入教学过程，是理论教学与项目实训同时进行，在教学安排中已体现实践，实践课与理论课各一半，分别为36课时。实训环境均为教室机房一体化实训室，实训的设备要求为标准的计算机皆可，实训的软件环境已在教学过程中体现与完成安装。实训内容如下表所示。表2—1实训项目教学内容标准表实训项目名称：制作图文混排页面参考学时2实训目的熟练运用HTML标记中的标题<h>和段落<p>等文本标记及图像标记<img/>。仪器设备计算机场地要求教室机房一体化实训室实训内容将该实训项目划分成4部分完成：1、创建一个HTML页面；2、根据页面效果设计页面内容、确定使用标签；3、编码完成页面内容搭建；4、使用CSS美化页面效果。成果（报告、设计、记录等）程序代码、页面效果截图、实训报告考核评价评价方式：平时成绩占70%，注重课堂练习活跃度；期末考查占30%，注重对知识的灵活运用程度。评价要点：页面的美观度和友好性。标签选用合适，页面制作合理。表2—2实训项目教学内容标准表实训项目名称：制作帖子内容页面参考学时2实训目的理解CSS的样式规则及引入方式熟悉CSS选择器的使用掌握常用的文本样式属性，同时注意一些高级的CSS特性熟练使用常用的文本样式属性修饰网页中的文本。仪器设备计算机场地要求教室机房一体化实训室实训内容将该实训项目划分成5部分完成：1、根据页面效果，分析页面结构，确定使用标签；2、创建一个HTML页面；3、根据分析结构编码完成页面内容搭建；4、根据页面效果设计样式及样式内容；5、编写并使用CSS样式表实现页面美化。成果（报程序代码、页面效果截图、实训报告告、设计、记录等）考核评价评价方式：平时成绩占70%，注重课堂练习活跃度；期末考查占30%，注重对知识的灵活运用程度。评价要点：CSS样式表的引入方式、选择器、高级特性及常用的文本样式属性。表2—3实训项目教学内容标准表实训项目名称：使用CSS伪类制作招聘页面参考学时2实训目的熟悉CSS3中新增加的属性选择器。理解关系选择器的用法。理解常用的结构化伪类选择器。掌握伪元素选择器的用法。仪器设备计算机场地要求教室机房一体化实训室实训内容将该实训项目划分成5部分完成：1、根据页面效果，分析页面结构，确定使用标签；2、创建一个HTML页面；3、根据分析结构编码完成页面内容搭建：①使用<h3>标题标签实现标题②使用<hr/>实现横线效果③使用<p>标记完成列表内容4、根据页面效果设计样式及样式内容：通过伪类完成效果和图标设置；5、编写并使用CSS样式表实现页面美化。成果（报告、设计、记录等）程序代码、页面效果截图、实训报告考核评价评价方式：平时成绩占70%，注重课堂练习活跃度；期末考查占30%，注重对知识的灵活运用程度。评价要点：CSS样式表的引入方式、选择器、链接伪类的使用。表2—4实训项目教学内容标准表实训项目名称：使用盒子模型制作广告宣传页面参考学时4实训目的掌握盒子的相关属性，能够制作常见的盒子模型效果。掌握背景属性的设置方法，能够设置背景颜色和图像。理解渐变属性的原理，能够设置渐变背景。掌握元素类型的分类，能够进行元素类型的转换。仪器设备计算机场地要求教室机房一体化实训室实训内容将该实训项目划分成5部分完成：1、根据页面效果，分析页面结构，确定使用标签；2、创建一个HTML页面；3、根据分析，使用<div>和<p>标记编码完成页面内容搭建；4、根据页面效果设计样式及样式内容：①重置浏览器的默认样式*{}②整体控制歌曲排行版模块.bg{}③歌曲排名部分.sheet{}.sheetp{}④需要单独控制的列表项.sheet.tp{}.sheet.yj{}5、编写并使用CSS样式表实现页面美化。成果（报告、设计、记录等）程序代码、页面效果截图、实训报告考核评价评价方式：平时成绩占70%，注重课堂练习活跃度；期末考查占30%，注重对知识的灵活运用程度。评价要点：边框属性、内边距属性、外边距属性、背景属性、圆角、阴影、<div>标签、<span>标签、元素类型的转换。表2—5实训项目教学内容标准表实训项目名称：使用列表和超链接标记制作新闻列表页面参考学时4实训目的掌握无序、有序及定义列表的使用，可以制作常见的网页模块。掌握超链接标签的使用，能够使用超链接定义网页元素。掌握CSS伪类，能够使用CSS伪类实现超链接特效。仪器设备计算机场地要求教室机房一体化实训室实训内容将该实训项目划分成5部分完成：1、根据页面效果，分析页面结构，确定使用标签；2、创建一个HTML页面；3、根据分析完成页面内容搭建：①使用<h2>完成标题②使用<div>搭建页面盒子③使用<ul>和<li>实现列表5、根据页面效果设计样式及样式内容：①全局控制body{}②重置浏览器的默认样式*{}③控制最外层的大盒子.all{}④控制标题.head{}⑤控制ul列表.content{}和列表项.contentli{}⑥未点击和点击后的样式.contentlia：link，.contentlia：visited{}⑦鼠标移上时的样式.contentlia：hover{}5、编写并使用CSS样式表实现页面美化。成果（报告、设计、记录等）程序代码、页面效果截图、实训报告考核评价评价方式：平时成绩占70%，注重课堂练习活跃度；期末考查占30%，注重对知识的灵活运用程度。评价要点：无序列表<ul>、有序列表<ol>、定义列表<dl>、创建超链接、锚点链接、链接伪类控制超链接。表2—6实训项目教学内容标准表实训项目名称：使用表单标记和表单控件标记制作表单注册页面参考学时4实训目的掌握表格标签的应用，能够创建表格并添加表格样式。理解表单的构成，可以快速创建表单。掌握表单相关标签，能够创建具有相应功能的表单控件。掌握表单样式，能够使用表单样式美化表单界面。仪器设备计算机场地要求教室机房一体化实训室实训内容将该实训项目划分成5部分完成：1、根据页面效果，分析页面结构，确定使用标签；2、创建一个HTML页面；3、根据分析完成页面内容搭建：①使用<div>搭建页面盒子②使用<h2>完成标题③使用<form>制作表单④使用<table>进行表单布局⑤使用<input>完成各种表单控件⑥使用<select>实现下拉列表6、根据页面效果设计样式及样式内容：①全局控制body{}②重置浏览器的默认样式*{}③控制各标签样式form{}p{}pspan{}④对文本框设置共同的宽、高、边框、内边距.num，.pass{}⑤定义第一个文本框的背景、文本颜色.num{}⑥定义第一个文本框的背景.pass{}⑦定义按钮样式.btn01{}5、编写并使用CSS样式表实现页面美化。成果（报告、设计、记录等）程序代码、页面效果截图、实训报告考核评价评价方式：平时成绩占70%，注重课堂练习活跃度；期末考查占30%，注重对知识的灵活运用程度。评价要点：创建表格、创建表单、input控件、全新的input控件类型、全新的input属性。表2—7实训项目教学内容标准表实训项目名称：使用使用div+css布局制作通栏banner参考学时4实训目的掌握标签的浮动属性，能够为标签设置和清除浮动掌握标签的定位属性，能够理解不同类型定位之间的差别掌握DIV+CSS的布局技巧，能够运用DIV+CSS为网页布局仪器设备计算机场地要求教室机房一体化实训室实训内容将该实训项目划分成5部分完成：1、根据页面效果，分析页面结构，确定使用标签；2、创建一个HTML页面；3、根据分析完成页面内容搭建：①使用<div>搭建页面结构②使用<h4>完成标题③使用<ul>和<li>实现列表④使用<p>放文本4根据页面效果设计样式及样式内容：①全局控制body{}②设置服务器字体@font—face③重置浏览器的默认样式*{}④控制盒子背景.bg_banner{}⑤控制banner盒子.banner{}⑥控制banner左侧盒子.left{}⑦控制banner左侧盒子内容.content_left{}⑧控制banner右侧盒子.right{}⑨控制banner右侧盒子内容.content_right{}5、编写并使用CSS样式表实现页面美化。成果（报告、设计、记录等）程序代码、页面效果截图、实训报告考核评价评价方式：平时成绩占70%，注重课堂练习活跃度；期末考查占30%，注重对知识的灵活运用程度。评价要点：认识浮动、清除浮动、标记定位属性。表2—8实训项目教学内容标准表实训项目名称：使用使用div+css布局制作通栏banner参考学时4实训目的熟悉HTML5多媒体特性。了解HTML5支持的音频和视频格式。掌握HTML5中视频的相关属性，能够在HTML5页面中添加视频文件。掌握HTML5中音频的相关属性，能够在HTML5页面中添加音频文件。了解HTML5中视频、音频的一些常见操作，并能够应用到网页制作中。仪器设备计算机场地要求教室机房一体化实训室实训内容将该实训项目划分成5部分完成：1、根据页面效果，分析页面结构，确定使用标签；2、创建一个HTML页面；3、根据分析完成页面内容搭建：①使用<div>搭建页面结构②使用<h2>完成标题③使用<p>放文本④使用<vedio>插入音频，<audio>插入视频4根据页面效果设计样式及样式内容：①全局控制body{}②重置浏览器的默认样式*{}③整体控制音乐播放界面#box—video{}④插入视频#box—videovideo{}⑤唱片部分.cd{}⑥歌词部分.song{}⑦控制标题h2{}⑧控制字体p{}5、编写并使用CSS样式表实现页面美化。成果（报告、设计、记录等）程序代码、页面效果截图、实训报告考核评价评价方式：平时成绩占70%，注重课堂练习活跃度；期末考查占30%，注重对知识的灵活运用程度。评价要点：在HTML5中嵌入视频、在HTML5中嵌入音频。表2—9实训项目教学内容标准表实训项目名称：综合案例制作参考学时10实训目的熟悉网站规划的基本流程，能够整体规划网站页面。了解Dreamweaver工具的使用，能够使用Dreamweaver工具建立站点和模板。掌握网站静态页面的搭建技巧，完成项目首页和子页的制作。仪器设备计算机场地要求教室机房一体化实训室实训内容将该实训项目划分成5部分完成：搭建首页（1）根据效果图，分析页面的结构和样式。（2）使用div+css实现首页搭建注册页（1）首页导航注册册页导航表单图片根据效果图首页导航注册册页导航表单图片（2）使用div+css实现注册页搭建个人中心页面（1）根据效果图，分析页面的结构和样式。（2）使用div+css实现个人中心页搭建视频播放页（1）根据效果图，分析页面的结构和样式。成果（报告、设计、记录等）程序代码、页面效果截图、实训报告考核评价评价方式：平时成绩占70%，注重课堂练习活跃度；期末考查占30%，注重对知识的灵活运用程度。评价要点：使用Dreamweaver工具建立站点、搭建首页、制作模板、搭建注册页、搭建个人中心页面、搭建视频播放页。四、课程思政元素建设情况序号课程思政教学目标课程思政元素1具备良好职业素养和IT工匠精神、爱岗敬业提出开源理念，展示开源社区，传递开放包容、互利共赢的互联网精神，激励学生在行业大潮中努力提升能力，实现自我价值2具备良好职业素养和IT工匠精神、爱岗敬业FaceBook用户信息泄露案例分析讨论引出网络信息安全问题，提醒学生遵守专业伦理，树立正确的职业观3具备良好职业素养和IT工匠精神、爱岗敬业华为“萤火担当”视频，激发岗位责任心和科技报国情4具备良好职业素养和IT工匠精神、爱岗敬业多媒体和CSS高级应用及动画的讲解时启迪学生传承优秀传统文化同时富有创新精神，激发“青出于蓝而胜于蓝”的正能量人文精神5具备良好职业素养和IT工匠精神、爱岗敬业圆通用户信息泄露案例提出“未来程序员你该怎么做”问题，引导学生思考