高等教育课程平台
首页
课程
教材
虚仿实验
教师教研
研究生教育
创课平台
课外成长
专题
慕课西部行
资讯
HTML5+CSS3网页设计
HTML5+CSS3网页设计
5000+ 人选课
更新日期：2024/05/04
开课平台智慧树
开课高校厦门兴才职业技术学院
开课教师杨婷婷、蔡燕萍、葛武灯、张烨红
学科专业
开课时间2024/01/21 - 2024/07/20
课程周期26 周
开课状态开课中
每周学时-
课程简介
基于专业人才培养方案，根据网页设计师岗位实际工作需求，为培养学生网页设计和网站建设与维护的实际操作能力而开设的一门实践性课程。通过本课程的学习，使学生具备网站建设与发布的基本知识，掌握HTML5+CSS3的原理和使用方法，学会使用常用的网页设计工具和脚本语言构建网页的方法，能够设计并发布小型静态网站，提高学生的自学能力和动手解决问题的能力，培养创新精神和良好的职业道德，以适应网站建设相关岗位群的实际工作需要。
课程大纲

在线教程

章节简介教学计划
萌新入门-网页设计的概述
登录后可预览视频
●
网页概念和组成
杨婷婷
●
网页设计类工具的介绍
杨婷婷
●
HTML5的优势与结构
杨婷婷
●
HTML5标签概述
杨婷婷
新手上路- 网页基本结构
●
HTML5头部相关标记
●
HTML5头部标签
杨婷婷
●
HTML5页面元素及属性
●
文本控制标记
杨婷婷
●
图像标签及路径
杨婷婷
●
结构元素（Ⅰ）
杨婷婷
●
结构元素（Ⅱ）
杨婷婷
●
分组元素和页面交互元素
杨婷婷
●
文本层次语义元素和全局元素
杨婷婷
●
阶段实训--制作电影影评网
杨婷婷
新手之路-网页初装扮
●
CSS3简介
杨婷婷
●
CSS核心基础
●
CSS样式规则和引入方式
杨婷婷
●
CSS基础选择器
杨婷婷
●
CSS复合选择器
杨婷婷
●
文本样式属性
●
CSS字体样式属性
杨婷婷
●
CSS文本外观属性Ⅰ
杨婷婷
●
CSS文本外观属性Ⅱ
杨婷婷
●
CSS高级特性
杨婷婷
●
阶段实训--制作服装推广软文
杨婷婷
渐熟之路-网页巧装扮
●
属性选择器和关系选择器
杨婷婷
●
结构化伪类选择器
蔡燕萍
●
伪元素选择器及阶段实训--制作新闻标题效果
蔡燕萍
升级资深-万能盒子
●
认识盒子模型
蔡燕萍
●
盒子模型的相关属性
蔡燕萍
●
CSS3新增盒子模型属性
蔡燕萍
●
元素的类型和转换
●
元素的类型
蔡燕萍
●
元素类型的转换
蔡燕萍
●
块元素垂直外边距的合并及阶段实训--盒子模型下的图文混排
张烨红
资深之路-列表与超链接
●
列表标签及CSS控制列表样式
张烨红
●
超链接标签及阶段实训--制作新闻列表效果
张烨红
资深之路- 表格与表单
●
表格以及CSS控制表格样式
张烨红
●
表单
●
表单的构成与创建以及input控件
张烨红
●
textarea控件以及select控件
张烨红
●
HTML5表单新属性
●
全新的form属性和全新表单控件
葛武灯
●
全新的input控件类型
葛武灯
●
全新的input属性
葛武灯
●
CSS控制表单样式及阶段实训--用户注册登录页面
葛武灯
升级精英-DIV+CSS布局
●
布局概述
葛武灯
●
布局常用属性
●
标签的浮动属性
葛武灯
●
标签的定位属性
葛武灯
●
布局其他属性
葛武灯
●
布局类型
●
页面布局类型
葛武灯
●
HTML5结构元素
葛武灯
精英之路-多媒体嵌入
●
嵌入视频和音频
葛武灯
●
CSS控制视频的宽高
葛武灯
●
阶段实训--音乐播放页面
葛武灯
精英之路-过渡、变形和动画
●
过渡
葛武灯
●
变形
葛武灯
●
动画
葛武灯
●
阶段实训--制作笑脸动画
葛武灯
大师养成-综合实训项目
●
智慧养老数字平台-整体布局
张烨红
●
智慧养老数字平台-页面结构搭建原理
杨婷婷
●
智慧养老数字平台-页面结构盒子模型（1）
杨婷婷
●
智慧养老数字平台-页面结构盒子模型（2）
杨婷婷
●
智慧养老数字平台-网页元素的浮动与直播频道布局
葛武灯
●
智慧养老数字平台-服务器部署与网站发布
邹艺滨

  • 绪章萌新入门-网页设计的概述

    介绍网页概念和组成、网页设计类工具的介绍、HTML5的优势与结构、HTML5标签概述

  • ●0.1网页概念和组成

    介绍网页概念和组成

  • ●0.2网页设计类工具的介绍

    网页设计类工具的介绍

  • ●0.3HTML5的优势与结构

    HTML5的优势与结构

  • ●0.4HTML5标签概述

    HTML5标签概述

  • 第一章新手上路- 网页基本结构

    介绍HTML5头部相关标记、HTML5页面元素及属性和阶段实训--制作电影影评网

  • ●1.1HTML5头部相关标记

    介绍HTML5头部相关标记

  • ●1.2HTML5页面元素及属性

    介绍文本控制标记、图像标签及路径、结构元素（Ⅰ）、结构元素（Ⅱ）、5分组元素和页面交互元素、文本层次语义元素和全局元素

  • ●1.3阶段实训--制作电影影评网

    阶段实训--制作电影影评网

  • 第二章新手之路-网页初装扮

    介绍CSS3简介、CSS核心基础、文本样式属性、CSS高级特性以及阶段实训--制作服装推广软文

  • ●2.1CSS3简介

    关于CSS3简介

  • ●2.2CSS核心基础

    介绍CSS样式规则和引入方式、CSS基础选择器、CSS复合选择器

  • ●2.3文本样式属性

    介绍CSS字体样式属性和CSS文本外观属性

  • ●2.4CSS高级特性

    介绍CSS高级特性

  • ●2.5阶段实训--制作服装推广软文

    阶段实训--制作服装推广软文

  • 第三章渐熟之路-网页巧装扮

    介绍属性选择器和关系选择器、结构化伪类选择器、伪元素选择器及阶段实训--制作新闻标题效果

  • ●3.1属性选择器和关系选择器

    介绍属性选择器和关系选择器

  • ●3.2结构化伪类选择器

    介绍结构化伪类选择器

  • ●3.3伪元素选择器及阶段实训--制作新闻标题效果

    伪元素选择器及阶段实训--制作新闻标题效果

  • 第四章升级资深-万能盒子

    介绍认识盒子模型、盒子模型的相关属性、CSS3新增盒子模型属性、元素的类型和转换 4.5块元素垂直外边距的合并及阶段实训--盒子模型下的图文混排

  • ●4.1认识盒子模型

    认识盒子模型

  • ●4.2盒子模型的相关属性

    介绍盒子模型的相关属性

  • ●4.3CSS3新增盒子模型属性

    介绍CSS3新增盒子模型属性

  • ●4.4元素的类型和转换

    介绍元素的类型和转换

  • ●4.5块元素垂直外边距的合并及阶段实训--盒子模型下的图文混排

    块元素垂直外边距的合并及阶段实训--盒子模型下的图文混排

  • 第五章资深之路-列表与超链接

    介绍列表标签及CSS控制列表样式和超链接标签及阶段实训--制作新闻列表效果

  • ●5.1列表标签及CSS控制列表样式

    介绍列表标签及CSS控制列表样式

  • ●5.2超链接标签及阶段实训--制作新闻列表效果

    超链接标签及阶段实训--制作新闻列表效果

  • 第六章资深之路- 表格与表单

    介绍表格以及CSS控制表格样式、表单 、HTML5表单新属性、CSS控制表单样式

  • ●6.1表格以及CSS控制表格样式

    介绍表格以及CSS控制表格样式

  • ●6.2表单

    介绍表单的构成与创建以及input控件和textarea控件以及select控件

  • ●6.3HTML5表单新属性

    介绍全新的form属性和全新的表单控件、全新的input控件类型、全新的input属性

  • ●6.4CSS控制表单样式及阶段实训--用户注册登录页面

    介绍CSS控制表单样式

  • 第七章升级精英-DIV+CSS布局

    介绍div+css布局的概述、常用的浮动属性和定位属性、以及其他属性和类型

  • ●7.1布局概述

    介绍布局概述、布局常用属性、布局其他属性、布局类型

  • ●7.2布局常用属性

    介绍标签的浮动属性和标签的定位属性

  • ●7.3布局其他属性

    介绍overflow属性与Z-index标签

  • ●7.4布局类型

    介绍页面布局类型、HTML5结构元素

  • 第八章精英之路-多媒体嵌入

    介绍嵌入视频和音频、CSS控制视频的宽高

  • ●8.1嵌入视频和音频

    介绍嵌入视频和音频

  • ●8.2CSS控制视频的宽高

    介绍CSS控制视频的宽高

  • ●8.3阶段实训--音乐播放页面

    阶段实训--音乐播放页面

  • 第九章精英之路-过渡、变形和动画

    介绍过渡、变形、动画

  • ●9.1过渡

    介绍过渡transition属性

  • ●9.2变形

    介绍变形transform属性

  • ●9.3动画

    介绍动画规则@keyframes

  • ●9.4阶段实训--制作笑脸动画

    阶段实训--制作笑脸动画

  • 第十章大师养成-综合实训项目

    大师养成-综合实训项目

  • ●10.1智慧养老数字平台-整体布局

    智慧养老数字平台-整体布局

  • ●10.2智慧养老数字平台-页面结构搭建原理

    智慧养老数字平台-页面结构搭建原理

  • ●10.3智慧养老数字平台-页面结构盒子模型（1）

    智慧养老数字平台-页面结构盒子模型（1）

  • ●10.4智慧养老数字平台-页面结构盒子模型（2）

    智慧养老数字平台-页面结构盒子模型（2）

  • ●10.5智慧养老数字平台-网页元素的浮动与直播频道布局

    智慧养老数字平台-网页元素的浮动与直播频道布局

  • ●10.6智慧养老数字平台-服务器部署与网站发布

    智慧养老数字平台-服务器部署与网站发布

  • 开始学习
  • 绪章  作业测试
    绪章萌新入门-网页设计的概述

    0.1 网页概念和组成

    0.2 网页设计类工具的介绍

    0.3 HTML5的优势与结构

    0.4 HTML5标签概述

    视频数4
  • 第一章  作业测试
    第一章 新手上路- 网页基本结构

    1.1 HTML5头部相关标记

    1.2 HTML5页面元素及属性

    1.3 阶段实训--制作电影影评网

    视频数8
  • 第二章  作业测试
    第二章 新手之路-网页初装扮

    2.1 CSS3简介

    2.2 CSS核心基础

    2.3 文本样式属性

    2.4 CSS高级特性

    2.5 阶段实训--制作服装推广软文

    视频数9
  • 第三章  作业测试
    第三章 渐熟之路-网页巧装扮

    3.1 属性选择器和关系选择器

    3.2 结构化伪类选择器

    3.3 伪元素选择器及阶段实训--制作新闻标题效果

    视频数3
  • 第四章  作业测试
    第四章 升级资深-万能盒子

    4.1 认识盒子模型

    4.2 盒子模型的相关属性

    4.3 CSS3新增盒子模型属性

    4.4 元素的类型和转换

    4.5 块元素垂直外边距的合并及阶段实训--盒子模型下的图文混排

    视频数6
  • 第五章  作业测试
    第五章 资深之路-列表与超链接

    5.1 列表标签及CSS控制列表样式

    5.2 超链接标签及阶段实训--制作新闻列表效果

    视频数2
  • 第六章  作业测试
    第六章 资深之路- 表格与表单

    6.1 表格以及CSS控制表格样式

    6.2 表单

    6.3 HTML5表单新属性

    6.4 CSS控制表单样式及阶段实训--用户注册登录页面

    视频数7
  • 第七章  作业测试
    第七章 升级精英-DIV+CSS布局

    7.1 布局概述

    7.2 布局常用属性

    7.3 布局其他属性

    7.4 布局类型

    视频数6
  • 第八章  作业测试
    第八章 精英之路-多媒体嵌入

    8.1 嵌入视频和音频

    8.2 CSS控制视频的宽高

    8.3 阶段实训--音乐播放页面

    视频数3
  • 第九章  作业测试
    第九章 精英之路-过渡、变形和动画

    9.1 过渡

    9.2 变形

    9.3 动画

    9.4 阶段实训--制作笑脸动画

    视频数4
  • 第十章  作业测试
    第十章 大师养成-综合实训项目

    10.1 智慧养老数字平台-整体布局

    10.2 智慧养老数字平台-页面结构搭建原理

    10.3 智慧养老数字平台-页面结构盒子模型（1）

    10.4 智慧养老数字平台-页面结构盒子模型（2）

    10.5 智慧养老数字平台-网页元素的浮动与直播频道布局

    10.6 智慧养老数字平台-服务器部署与网站发布

    视频数6
  • 期末考试