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

1.1 HTML5简介

1.2 HTML5文件的编写方法

第1章上机操作作业

第2章. HTML5网页文档结构

2.1 Web标准

2.2 HTML5文档的基本结构

2.3 综合案例――制作符合W3C标准的网页

上机练习 :制作符合W3C标准的HTML5网页

第3章 HTML5与HTML4的区别

3.1新增的主体结构元素

3.2新增的非主体结构元素

3.3新增其他常用元素

3.4新增全局属性

3.5新增的其他属性

上机练习:使用新增标签制作网页

第4章. 设计网页文本的内容

第1篇回顾总结与第2篇开篇介绍

4.1 标题文本

4.2 文字格式

4-3 设置文本风格

4-4设置文本的阴影

4-5控制换行

按样张要求完成上机作业----中国共产党第十九次全国代表大会 (党的十九大)

第5章 网页列表与段落设计

5.1 网页文本列表设计

按样张要求完成作业1:模拟制作百度新闻footer(已附图片及文本资源)作业2:设计制作新闻早知道网页

第6章 HTML5网页中的图像

6.1 网页中的图像

6.2 在网页中插入图像

6.3 网页图片的编辑

6.4 将图片设置为网页背景

6.5 制作图片滑动动画

按样张要求制作“人民公安爱人民”主题的网页

第7章 使用HTML5建立超链接

7.4 创建图片热区超链接

7.5 综合案例

制作简易电子书网页

7.1 网页超链接的概念

7.2 超链接的类型及URL

7.3 创建锚点超链接

第8章  使用HTML5创建表单

8.4正则表达式编辑教学内容

8.1认识表单

8.2input表单元素的创建

8.3input表单元素的属性

本次作业含3个题目,涉及audio标签和marquee标签

制作用户注册页面

第9章 使用HTML5创建表格

9.1  创建简易表格

9-2表格的合并与拆分

9.3 制作推荐表

9.4 带标题与表头的表格

9.5 结构化表格制作

本章作业包括:1.购物商品清单表格制作(静态)2.公司2017年各部门各季度财务结算表(静态)

第10章 HTML5中的多媒体

10.3 综合案例-带有背景音乐和动画的网页

本次作业含3个题目,涉及audio标签和marquee标签

10.1 声音标签audio的基本属性及使用

10.2 不同浏览器对不同声音格式的支持情况

第11章使用 HTML5绘制图形

11-9综合案例

11-4使用路径绘制自定义形状

作业视频-1

11-7使用三次贝塞尔曲线制作水波动画

作业视频-2

11-5绘制圆和圆弧

11-8save与restore

作业视频-4

11.1 什么是Canvas

11.2 定义画布

11.3 绘制直线段

作业视频-3

11-6绘制二次贝塞尔曲线

canvas绘图与动画制作

第12章使用CSS3绘制图形

12.1使用css3绘制直线

12.6制作圆摆动动画

12.9制作心形

12.10制作鸡蛋

自主学习部分-css3渐变填充制图

12.4绘制圆角矩形

12.23绘制三角形和梯形

12.3使用css3绘制多边形

12.8制作太极

12.7制作水滴状标题装饰图

12.5绘制园和椭圆

第12章第一次作业--我爱我的国

第12章第二次作业--使用css3绘制小猪

预备知识

Javascript脚本语言、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?

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