目录

  • 1 内容简介
    • 1.1 教材简介
    • 1.2 课程简介
    • 1.3 1+X标准
  • 2 学习单元01 搭建项目开发环境
    • 2.1 任务概述
    • 2.2 知识结构(图)
    • 2.3 知识链接
    • 2.4 任务1:安装Chrome浏览器
    • 2.5 任务2:安装HBuilderX开发IDE
    • 2.6 任务3 :使用HBuilderX创建项目
    • 2.7 单元小结
  • 3 学习单元02 制作课程基础页面
    • 3.1 任务概述
    • 3.2 知识结构(图)
    • 3.3 知识链接
    • 3.4 任务1:制作页面通用尾部内容
    • 3.5 任务2:制作页面通用头部内容
    • 3.6 任务3:制作课程说明页面
    • 3.7 单元小结
  • 4 学习单元03 制作课程播放页面
    • 4.1 任务概述
    • 4.2 知识结构(图)
    • 4.3 知识链接
    • 4.4 任务1:制作课程视频列表
    • 4.5 任务2:制作课程推荐列表
    • 4.6 任务3:制作课程资源表格
    • 4.7 任务4:制作课程播放区域
    • 4.8 单元小结
  • 5 学习单元04 使用表单制作页面
    • 5.1 任务概述
    • 5.2 知识结构(图)
    • 5.3 知识链接
    • 5.4 任务1:制作信息登记页面
    • 5.5 任务2:制作用户登录页面
    • 5.6 任务3:制作用户注册页面
    • 5.7 单元小结
  • 6 学习单元05 向项目中引入CSS
    • 6.1 任务概述
    • 6.2 知识结构(图)
    • 6.3 知识链接
    • 6.4 任务1:美化课程说明页面
    • 6.5 任务2:美化课程播放页面
    • 6.6 单元小结
  • 7 学习单元06 使用CSS3美化页面
    • 7.1 任务概述
    • 7.2 知识结构(图)
    • 7.3 知识链接
    • 7.4 任务1:美化页面通用尾部
    • 7.5 任务2:美化页面通用头部
    • 7.6 任务3:美化课程资源表格
    • 7.7 任务4:制作课程推荐部分
    • 7.8 单元小结
  • 8 学习单元07 使用盒子模型布局页面
    • 8.1 任务概述
    • 8.2 知识结构(图)
    • 8.3 知识链接
    • 8.4 任务1:制作课程视频列表
    • 8.5 任务2:美化用户登录页面
    • 8.6 任务3:美化用户注册页面
    • 8.7 单元小结
  • 9 学习单元08 使用CSS3浮动布局页面
    • 9.1 任务概述
    • 9.2 知识结构(图)
    • 9.3 知识链接
    • 9.4 任务1:使用浮动左右布局
    • 9.5 任务2:使用浮动单行布局
    • 9.6 任务3:使用浮动多行布局
    • 9.7 单元小结
  • 10 学习单元09 使用CSS3定位布局页面
    • 10.1 任务概述
    • 10.2 知识结构(图)
    • 10.3 知识链接
    • 10.4 任务1 :制作课程层叠角标
    • 10.5 任务2 :绝对定位实现登陆页面居中
    • 10.6 任务3 :固定定位置顶按钮
    • 10.7 任务4:粘性定位页面通用头部
    • 10.8 单元小结
  • 11 学习单元10 利用CSS3动画美化页面
    • 11.1 任务概述
    • 11.2 知识结构(图)
    • 11.3 知识链接
    • 11.4 任务1:制作鼠标悬浮过渡效果
    • 11.5 任务2:使用动画制作轮播图
    • 11.6 单元小结
  • 12 学习单元11 使用CSS3弹性盒子布局页面
    • 12.1 任务概述
    • 12.2 知识结构(图)
    • 12.3 知识链接
    • 12.4 任务1 :使用弹性盒子布局推荐页面
    • 12.5 任务2 :使用弹性盒子布局课程页面
    • 12.6 单元小结
  • 13 学习单元12 使用CSS3媒体查询实现页面响应式
    • 13.1 任务概述
    • 13.2 知识结构(图)
    • 13.3 知识链接
    • 13.4 任务1:用户登录页面增加响应式
    • 13.5 任务2:将课程推荐页面增加响应式
    • 13.6 单元小结
  • 14 封底
    • 14.1 封底
任务概述

任务概述

创新是引领发展的第一动力,随着“互联网+”的迅速发展,“互联网+教育”就是教育模式的创新。为了适应这种新形势的发展,为学习者提供便捷有效的学习形式,打破时空限制,提升教学质量,接下来我们将利用HTML 5+CSS 3技术来完成“新云课堂”在线学习平台的设计和开发。

HTML 5是一种用来描述网页的语言。我们在浏览器中所看到的页面是通过浏览器内部的解析器对HTML 5文档内容的识别与渲染的结果。HTML标准是一种受到广泛认可的网页规范标准,不仅在网页的开发中重要,在嵌入式开发、移动端开发、PC端开发等场景下,也有广泛的应用。所以掌握当前最新的HTML 5标准已成为广大开发者的必备基础技能。HTML 5文档包含HTML 5标签和内容,通过一个个标签来展示页面内容,通过标签的嵌套配合,组成一个内容丰富的网页。制做网页的过程就像是搭积木,HTML部分就是需要先搭建的基础积木,待基础搭建完毕后,再通过CSS为积木上色美化,从而完成网页制作。

素质目标

培养学生创新精神和合作意识。

培养学生编码的规范意识和职业素养。

知识目标

掌握HTML基础语法

掌握HTML基础标签

掌握语义化结构标签

了解HTML5的特点

技能目标

熟练使用HBuilderX编写简单HTML页面