网页制作
网页制作
3万+ 人选课
更新日期:2025/10/02
开课时间2025/07/21 - 2026/01/20
课程周期27 周
开课状态开课中
每周学时-
课程简介
本课程是数字媒体技术专业必修的一门专业核心课程,其前导课程为《设计构成》《图像处理》《程序设计基础》,后续课程为《H5交互动画》《智能编程》。在充分进行岗位调研的基础上,对接国家专业教学标准UI设计师岗位,对接Web前端“1+X”证书标准,选取教学内容。依据本课程的目标要求,强调网页前端技术基本技能和项目实战双重训练。通过本课程的学习,学生能够灵活应用前端网页理论知识、前端网页设计方法和前端网页开发技术进行较复杂的静态网页设计和开发。本课程的考核目标重在使学生掌握网页制作的技术,能针对具体项目进行前端网页的设计与制作,考核方法采用“过程性+项目实训”的方式。
课程大纲

在线教程

章节简介教学计划
制作HTML5百科页面(入门级)
学习资料 登录后可预览视频
项目实施基础技能-认识HTML5
陈君涛
项目实施基础技能-HTML5基础
HTML5语法基础
陈君涛
2HTML5标记基础
陈君涛
项目实施基础技能-文本控制标记使用方法
陈君涛
项目实施基础技能-图像标记使用方法
陈君涛
项目实施基础技能-超链接标记使用方法
陈君涛
学习资料
项目实施-HTML5百科页面
陈君涛
制作电影影评网(入门级)
学习资料
项目实施基础技能-列表元素实例
董阁
项目实施基础技能-结构元素实例
董阁
项目实施基础技能-分组元素实例
董阁
项目实施基础技能-页面交互元素实例
董阁
项目实施基础技能-文本层次语义元素实例
董阁
项目实施基础技能-全局属性实例
董阁
项目实施-制作电影影评网
董阁
制作服装推广软文(进阶级)
学习资料
项目实施基础技能-认识CSS3
黄雪琴
项目实施基础技能-CSS核心基础
CSS语法规则应用实例
黄雪琴
CSS基础选择器应用实例
黄雪琴
项目实施基础技能-文本样式属性
文本外观属性应用实例(上)
黄雪琴
文本外观属性应用实例(下)
黄雪琴
文本样式属性应用实例
黄雪琴
项目实施基础技能-CSS高级特性应用实例
黄雪琴
项目实施-制作服装推广软文
黄雪琴
制作网页设计软件列表(进阶级)
学习资料
项目实施基础技能-属性选择器应用实例
董阁
项目实施基础技能-关系选择器应用实例
董阁
项目实施基础技能-结构化伪类选择器应用实例
董阁
项目实施基础技能-伪元素选择器应用实例
董阁
项目实施基础技能-链接伪类应用实例
董阁
项目实施-制作网页设计软件列表
董阁
制作音乐排行榜 (进阶级)
学习资料
项目实施基础技能-什么是CSS盒子模型
黄雪琴
项目实施基础技能-盒子模型边框实例
边框属性应用实例(上)
黄雪琴
边框属性应用实例(下)
黄雪琴
边距属性应用实例
黄雪琴
项目实施基础技能-盒子模型背景实例
背景属性应用实例(上)
黄雪琴
背景属性应用实例(下)
黄雪琴
项目实施基础技能-CSS3渐变属性应用实例
黄雪琴
项目实施-制作音乐排行榜
黄雪琴
制作团购页面(进阶级)
学习资料
项目实施基础技能-元素的浮动应用实例
马红
项目实施基础技能-清除浮动应用实例
马红
项目实施基础技能-overflow属性应用实例
马红
项目实施基础技能-元素的定位应用实例
马红
项目实施基础技能-元素的类型与转换应用实例
马红
项目热身-制作网页焦点图
马红
项目实施-团购页面
团购页面项目实施(上)
马红
团购页面项目实施(下)
马红
制作信息登记表(进阶级)
学习资料
项目实施基础技能-认识表单
董阁
项目实施基础技能-表单属性应用实例
董阁
项目实施基础技能-input元素及属性应用实例
input元素及属性(上)
董阁
input元素及属性(下)
董阁
项目实施基础技能-其他表单元素应用实例
董阁
项目实施基础技能-CSS控制表单样式应用实例
董阁
项目实施-制作信息登记表
董阁
制作音乐播放界面(进阶级)
学习资料
项目实施基础技能-html5多媒体技术
康东
项目实施基础技能-多媒体的支持条件
康东
项目实施基础技能-嵌入视频和音频应用实例
康东
项目实施基础技能-CSS控制视频的宽高应用实例
康东
项目实施基础技能-视频和音频的方法和事件应用实例
康东
项目实施基础技能-HTML5音、视频发展趋势
康东
项目实施-制作音乐播放界面
康东
制作工作日天气预报(高阶级)
学习资料
项目实施基础技能-CSS3过渡效果实现
董阁
项目实施基础技能-CSS3变形效果实现
董阁
项目实施基础技能-CSS3动画效果实现
董阁
项目实施-制作工作日天气预报
董阁
电商网站首页项目实战(高阶级)
学习资料
准备工作
董阁
制作头部、导航及视频内容
董阁
制作内容部分(新品)
董阁
制作内容部分(试妆)
董阁
制作内容部分(评测)
董阁
制作底部部分
董阁
  • 项目一制作HTML5百科页面(入门级)

    本章主要介绍HTML5概述、HTML5基础、文本控制标记、图像标记、超链接标记、案例-制作HTML5百科页面等内容。

  • 1.1项目实施基础技能-认识HTML5

    HTML5发展历程

  • 1.2项目实施基础技能-HTML5基础

    HTML5基本语法和结构、属性

  • 1.3项目实施基础技能-文本控制标记使用方法

    文本段落标签

  • 1.4项目实施基础技能-图像标记使用方法

    图像标签

  • 1.5项目实施基础技能-超链接标记使用方法

    超链接标签

  • 1.6项目实施-HTML5百科页面

    文本、图像、超链接综合运用

  • 项目二制作电影影评网(入门级)

    本章主要介绍HTML5页面元素中列表元素、结构元素、分组元素、页面交互元素、文本层次语义元素、全局属性以及页面元素综合运用。

  • 2.1项目实施基础技能-列表元素实例

    有序列表、无序列表、定义列表

  • 2.2项目实施基础技能-结构元素实例

    各种结构元素

  • 2.3项目实施基础技能-分组元素实例

    各种分组元素

  • 2.4项目实施基础技能-页面交互元素实例

    页面交互元素

  • 2.5项目实施基础技能-文本层次语义元素实例

    文本层次语义元素

  • 2.6项目实施基础技能-全局属性实例

    全局属性

  • 2.7项目实施-制作电影影评网

    页面元素综合运用

  • 项目三制作服装推广软文(进阶级)

    本章主要介绍CSS3的发展历程、 CSS的核心基础、文本样式属性、CSS的高级特性、css的综合应用等。

  • 3.1项目实施基础技能-认识CSS3

    CSS3的发展历程

  • 3.2项目实施基础技能-CSS核心基础

    CSS的核心基础

  • 3.3项目实施基础技能-文本样式属性

    本章介绍文本样式属性

  • 3.4项目实施基础技能-CSS高级特性应用实例

    CSS的高级特性

  • 3.5项目实施-制作服装推广软文

    css的综合应用

  • 项目四制作网页设计软件列表(进阶级)

    本章主要介绍CSS3选择器。主要内容包含属性选择器的含义和用法、关系选择器的含义和用法、结构化伪类选择器的含义和用法、伪元素选择器的含义和用法、链接伪类的含义和用法以及css选择器的综合运用。

  • 4.1项目实施基础技能-属性选择器应用实例

    属性选择器的含义和用法

  • 4.2项目实施基础技能-关系选择器应用实例

    关系选择器的含义和用法

  • 4.3项目实施基础技能-结构化伪类选择器应用实例

    结构化伪类选择器的含义和用法

  • 4.4项目实施基础技能-伪元素选择器应用实例

    伪元素选择器的含义和用法

  • 4.5项目实施基础技能-链接伪类应用实例

    链接伪类的含义和用法

  • 4.6项目实施-制作网页设计软件列表

    css选择器的综合运用

  • 项目五制作音乐排行榜 (进阶级)

    本章主要介绍CSS盒子模型。其中包括盒子模型的含义、盒子模型的边框、填充和间距、背景如何运用、css3的渐变属性如何使用以及css盒子模型综合案例。

  • 5.1项目实施基础技能-什么是CSS盒子模型

    盒子模型的含义

  • 5.2项目实施基础技能-盒子模型边框实例

    盒子模型的边框、填充和间距

  • 5.3项目实施基础技能-盒子模型背景实例

    背景如何运用

  • 5.4项目实施基础技能-CSS3渐变属性应用实例

    css3的渐变属性如何使用

  • 5.5项目实施-制作音乐排行榜

    css盒子模型综合案例

  • 项目六制作团购页面(进阶级)

    本章主要介绍浮动与定位。其中包括元素的三种浮动方式、溢出属性及其应用、元素的几种定位方法、块级元素和行内元素的转换以及案例综合。

  • 6.1项目实施基础技能-元素的浮动应用实例

    元素的三种浮动方式

  • 6.2项目实施基础技能-清除浮动应用实例

    本节介绍清除浮动。

  • 6.3项目实施基础技能-overflow属性应用实例

    溢出属性及其应用

  • 6.4项目实施基础技能-元素的定位应用实例

    元素的几种定位方法

  • 6.5项目实施基础技能-元素的类型与转换应用实例

    块级元素和行内元素的转换

  • 6.6项目热身-制作网页焦点图

    案例综合

  • 6.7项目实施-团购页面

    本章介绍阶段案例——团购页面

  • 项目七制作信息登记表(进阶级)

    本章主要介绍了表单的应用。其中包括生活中的表单、表单的各种属性、输入元素及其属性、其他表单元素的用法、css如何控制表单的样式以及表单的综合应用。

  • 7.1项目实施基础技能-认识表单

    生活中的表单

  • 7.2项目实施基础技能-表单属性应用实例

    表单的各种属性

  • 7.3项目实施基础技能-input元素及属性应用实例

    输入元素及其属性

  • 7.4项目实施基础技能-其他表单元素应用实例

    本章介绍其他表单元素

  • 7.5项目实施基础技能-CSS控制表单样式应用实例

    css如何控制表单的样式

  • 7.6项目实施-制作信息登记表

    表单综合运用

  • 项目八制作音乐播放界面(进阶级)

    本章主要介绍了多媒体技术。其中包括HTML5多媒体的特性、多媒体的支持条件、网页中嵌入视频和音频的方法、CSS如何控制视频的宽高、视频和音频的方法和事件、HTML5音、视频发展趋势以及多媒体在网页中的综合运用。

  • 8.1项目实施基础技能-html5多媒体技术

    HTML5多媒体的特性

  • 8.2项目实施基础技能-多媒体的支持条件

    多媒体的支持条件

  • 8.3项目实施基础技能-嵌入视频和音频应用实例

    网页中嵌入视频和音频的方法

  • 8.4项目实施基础技能-CSS控制视频的宽高应用实例

    CSS如何控制视频的宽高

  • 8.5项目实施基础技能-视频和音频的方法和事件应用实例

    视频和音频的方法和事件

  • 8.6项目实施基础技能-HTML5音、视频发展趋势

    HTML5音、视频发展趋势

  • 8.7项目实施-制作音乐播放界面

    多媒体在网页中的综合运用

  • 项目九制作工作日天气预报(高阶级)

    本章主要介绍CSS3高级应用。其中包括css3如何实现过渡、css3如何实现变形、css3如何实现动画以及css3高级方法的综合运用。

  • 9.1项目实施基础技能-CSS3过渡效果实现

    css3如何实现过渡

  • 9.2项目实施基础技能-CSS3变形效果实现

    css3如何实现变形

  • 9.3项目实施基础技能-CSS3动画效果实现

    css3如何实现动画

  • 9.4项目实施-制作工作日天气预报

    css3高级方法的综合运用

  • 项目十电商网站首页项目实战(高阶级)

    本章主要介绍实战开发-制作电商网站首页。包括准备工作、制作头部、导航及视频内容、制作内容部分(试装)、制作内容部分(评测)以及制作底部部分。

  • 10.1准备工作

    HTML5的综合运用

  • 10.2制作头部、导航及视频内容

    HTML5的综合运用

  • 10.3制作内容部分(新品)

    HTML5的综合运用

  • 10.4制作内容部分(试妆)

    HTML5的综合运用

  • 10.5制作内容部分(评测)

    HTML5的综合运用

  • 10.6制作底部部分

    HTML5的综合运用

  • 开始学习
  • 项目一  作业测试
    项目一 制作HTML5百科页面(入门级)

    1.1 项目实施基础技能-认识HTML5

    1.2 项目实施基础技能-HTML5基础

    1.3 项目实施基础技能-文本控制标记使用方法

    1.4 项目实施基础技能-图像标记使用方法

    1.5 项目实施基础技能-超链接标记使用方法

    1.6 项目实施-HTML5百科页面

    视频数7
  • 项目二  作业测试
    项目二 制作电影影评网(入门级)

    2.1 项目实施基础技能-列表元素实例

    2.2 项目实施基础技能-结构元素实例

    2.3 项目实施基础技能-分组元素实例

    2.4 项目实施基础技能-页面交互元素实例

    2.5 项目实施基础技能-文本层次语义元素实例

    2.6 项目实施基础技能-全局属性实例

    2.7 项目实施-制作电影影评网

    视频数7
  • 项目三  作业测试
    项目三 制作服装推广软文(进阶级)

    3.1 项目实施基础技能-认识CSS3

    3.2 项目实施基础技能-CSS核心基础

    3.3 项目实施基础技能-文本样式属性

    3.4 项目实施基础技能-CSS高级特性应用实例

    3.5 项目实施-制作服装推广软文

    视频数8
  • 项目四  作业测试
    项目四 制作网页设计软件列表(进阶级)

    4.1 项目实施基础技能-属性选择器应用实例

    4.2 项目实施基础技能-关系选择器应用实例

    4.3 项目实施基础技能-结构化伪类选择器应用实例

    4.4 项目实施基础技能-伪元素选择器应用实例

    4.5 项目实施基础技能-链接伪类应用实例

    4.6 项目实施-制作网页设计软件列表

    视频数6
  • 项目五  作业测试
    项目五 制作音乐排行榜 (进阶级)

    5.1 项目实施基础技能-什么是CSS盒子模型

    5.2 项目实施基础技能-盒子模型边框实例

    5.3 项目实施基础技能-盒子模型背景实例

    5.4 项目实施基础技能-CSS3渐变属性应用实例

    5.5 项目实施-制作音乐排行榜

    视频数8
  • 项目六  作业测试
    项目六 制作团购页面(进阶级)

    6.1 项目实施基础技能-元素的浮动应用实例

    6.2 项目实施基础技能-清除浮动应用实例

    6.3 项目实施基础技能-overflow属性应用实例

    6.4 项目实施基础技能-元素的定位应用实例

    6.5 项目实施基础技能-元素的类型与转换应用实例

    6.6 项目热身-制作网页焦点图

    6.7 项目实施-团购页面

    视频数8
  • 项目七  作业测试
    项目七 制作信息登记表(进阶级)

    7.1 项目实施基础技能-认识表单

    7.2 项目实施基础技能-表单属性应用实例

    7.3 项目实施基础技能-input元素及属性应用实例

    7.4 项目实施基础技能-其他表单元素应用实例

    7.5 项目实施基础技能-CSS控制表单样式应用实例

    7.6 项目实施-制作信息登记表

    视频数7
  • 项目八  作业测试
    项目八 制作音乐播放界面(进阶级)

    8.1 项目实施基础技能-html5多媒体技术

    8.2 项目实施基础技能-多媒体的支持条件

    8.3 项目实施基础技能-嵌入视频和音频应用实例

    8.4 项目实施基础技能-CSS控制视频的宽高应用实例

    8.5 项目实施基础技能-视频和音频的方法和事件应用实例

    8.6 项目实施基础技能-HTML5音、视频发展趋势

    8.7 项目实施-制作音乐播放界面

    视频数7
  • 项目九  作业测试
    项目九 制作工作日天气预报(高阶级)

    9.1 项目实施基础技能-CSS3过渡效果实现

    9.2 项目实施基础技能-CSS3变形效果实现

    9.3 项目实施基础技能-CSS3动画效果实现

    9.4 项目实施-制作工作日天气预报

    视频数4
  • 项目十  作业测试
    项目十 电商网站首页项目实战(高阶级)

    10.1 准备工作

    10.2 制作头部、导航及视频内容

    10.3 制作内容部分(新品)

    10.4 制作内容部分(试妆)

    10.5 制作内容部分(评测)

    10.6 制作底部部分

    视频数6
  • 期末考试