HTML5网页设计
分享
课程详情
课程评价
spContent=HTML5是HTML的最新版本,它独特的语义赋予网页更好的意义和结构;本地存储让基于HTML5开发的网页APP拥有更短的启动,更快的联网;内嵌的本地 数据库,加速了搜索功能;Canvas及CSS3的动画功能,带来炫酷的效果。Audio、Video等多媒体支持功能、跨平台及自适应设计…HTML5为你打造全新的网页设计体验。
—— 课程团队
课程概述

 《HTML5网页设计》是一门实践性较强的课程,因此,本课程在教授过程中,融入了460个案例,4个项目,通过视频教学、在线答疑、自主学习等方式让大家看得懂、学得会、做得出。

在内容编排上,本教程的教学紧密结合深入学习HTML5技术的先后过程,从HTML5的基本概念开始,带领大家逐步深入学习各种应用技术,侧重实践技能,使用简单易懂的实际案例进行分析和操作指导,使学习过程简明轻松,操作过程有章可循。

  课程第1篇“基础知识”主要讲解初识HTML5HTML5网页文档结构、HTML5HTML4的区别等;第2篇“核心技术”主要讲解设计网页文本内容、网页列表与段落设计、HTML5网页中的图像、使用HTML5建立超链接、使用HTML5创建表单、使用HTML5创建表格、 HTML5中的多媒体、使用HTML5绘制图形、HTML 5中的文件与拖放等;第3篇“高级应用”主要讲解获取地理位、Web通信新技术、数据存储技术、使用Web Worker处理线程、HTML5服务器发送事件、构建离线的Web应用等;第4篇“项目案例实战”主要讲解HTML5CSS3JavaScript的搭配应用案例,制作电子商务类网页,制作休闲娱乐类网页,制作企业门户类网页。

授课目标
通过学习本课程,使学生能独立运用HTML5的理论知识,逐步形成运用HTML5的核心技术进行网页设计制作的能力。
课程大纲


课次

项目名称

任      务

1.       

初识HTML5

HTML5简介

2.       

HTML5文件的编写方法

3.       

使用浏览器查看HTML5文件

4.       

HTML5文档结构

Web标准

5.       

HTML5文档的基本结构

6.       

综合案例:符合W3C标准的HTML5网页

7.       

HTML5与HTML4的区别

新增的主体结构元素

8.       

新增的非主体结构元素

9.       

新增的其它常用元素及属性

10.   

设计网页的文本内容

标题文本的建立

11.   

设置文字及格式

12.   

综合案例:成才教育网文本文本设计

13.   

网页列表与段落设计

网页文字列表设计

14.   

网页段落格式设计

15.   

综合案例:制作图文混排型旅游网页

16.   

HTML5网页中的图像

在网页中插入图像

17.   

编辑网页中的图像

18.   

实战:图文并茂房屋装饰装修网页

19.   

使用HTML5建立超链接

网页超链接的概念

20.   

建立网页超链接

21.   

综合案例:使用锚链接制作电子书网页

22.   

使用HTML5创建表单

表单基本元素的使用

23.   

表单高级元素的使用

24.   

综合案例:创建用户反馈表单

25.   

使用HTML5创建表格

表格的基本结构

26.   

使用HTML5创建表格

27.   

综合案例:制作商品报价表

28.   

HTML5中的多媒体

网页音乐标签audio

29.   

网页视频标签video

30.   

添加网页音频、视频及滚动文字

31.   

使用HTML5绘制图形

使用canvas绘制基本形状

32.   

使用canvas绘制渐变图形

33.   

使用canvas绘制其它图形

34.   

使用HTML5绘制图形

使用图像

35.   

图形的存贮与恢复

36.   

综合案例:绘制图形商标

37.   

HTML5中的文件与拖放

选择文件

38.   

使用FileReader接口读取文件

39.   

使用HTML5实现文件的拖放

40.   

获取地理位置

Geolocation API获取地理位置

41.   

目前浏览对地理定位的支持情况

42.   

综合案例:在网页中调用Google地图

43.   

Web通信新技术

跨文档消息传输

44.   

WebSockets API

45.   

综合案例:编写简单的WebSockets API

46.   

数据存储技术

认识Web存储

47.   

使用HTML5 Web Storage API

 

48.   

综合案例:制作简单Web

49.   

使用Web Worker处理线程

Web Worker

50.   

线程嵌套

51.   

综合案例:创建Web Worker

52.   

HTML5服务器发送事件

服务器发送事件概述

53.   

服务器发送事件的实现过程

54.   

综合案例:服务器发送事件实战应用

55.   

构建离线的Web应用

实例:使用HTML5离线Web应用API

56.   

实例:使用HTML5离线Web应用构建应用

57.   

综合案例:离线定位跟踪

58.   

HTML5、CSS3和JavaScript的搭配应用案例

打字效果、文字升降、跑马灯

59.   

闪烁图片、左右移动图片、向上滚动菜单、跟随鼠标移动图片、树形菜单

60.   

时钟特效、颜色选择器制作、绘制火柴棒人物

61.   

制作电子商务类网页

整体布局、模块组成

62.   

样式表、网页头部、主体第一通栏

63.   

主体第二通栏、主体第三通、网页底部

64.   

制作休闲娱乐类网页

整体布局、模块组成

65.   

制作样式表、Logo与导航菜单、搜索条

66.   

视频模块、评论模块、热门推荐、底部

67.   

制作企业门户类网页

整体布局、模块组成

68.   

样式表、网页头部、导航菜单栏

69.   

中间主体栏、网页底部


预备知识

Photoshop图像处理及计算机基础相关知识

证书要求



  本课程总分100分,考核包含每节的案例作品、综合案例作品两个部分。其中,节案例作品占40%,综合案例作品占60%。课程总分60分以上(含60分)将发放课程合格证书;80分以上(含80分)将发放优秀证书。


参考资料

常见问题
  1. HTML5新增性能会被所有的浏览器支持吗?

    答:支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的傲游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

  2. HTML5是HTML的最新版本,是不是说它是最安全的?

    答:HTML5新,但并不意谓着它安全。 HTML5所构建的网页和其他语言编写的网页一样容易泄露一些敏感数据。

  3. 为什么HTML5去掉了很多HTML4标签,比如u,font,center,strike?

    答:为了更好的实现内容和展示分离