HTML5+CSS3网页设计实例教程-第1章-网页设计新时代.ppt

HTML5+CSS3网页设计实例教程第1章网页设计新时代第1章网页设计新时代本章概述本章的学习目标主要内容第*页本章概述从2010年开始，HTML5和CSS3就一直是互联网技术中最受关注的两个话题。2010年MIX10大会上微软的工程师在介绍IE9时，从前端技术的角度把互联网的发展分为3个阶段：第一阶段是以Web1.0为主的网络阶段，前端主流技术是HTML和CSS；第二阶段是Web2.0的Ajax应用阶段，热门技术是JavaScript/DOM/异步数据请求；第三阶段即为HTML5+CSS3阶段，这两者相辅相成，使网页设计进入了一个崭新的时代。第*页本章的学习目标了解WEB开发基本原则了解HTML5是如何形成的了解HTML5的设计原则了解HTML5页面的特征了解网页的基本元素和网页设计的常用技术使用HTML创建一些Web页面第*页主要内容1.1WEB网页设计原则1.2HTML5概述1.3HTML5页面的特征1.4WEB网页设计基础1.5编写一个简单的Web页面1.6本章小结第*页1.1WEB网页设计原则本节介绍开放Web标准的重要性、构造良好的语义化标记技术，以及编写良好的HTML是网页设计过程的一部分；简单、直白的HTML结构应当用CSS进行样式化等。第*页Web标准成立于1998年的WebStandardsProject(Web标准项目，WaSP)一直致力于跨不同浏览器的标准实现和基于标准的Web设计方法。其目标是降低Web开发的成本与复杂性，并通过使Web内容在不同设备和辅助技术之间更具一致性和兼容性的办法，提高Web页面的可访问性。什么是Web标准使用Web标准的好处语义化标记Web标准层次。第*页Web标准与浏览器的兼容性浏览器的前景正在朝着标准的方向演化和靠拢。Firefox、Safari、Opera、Chrome，当然也包括古老的IE，都在以不同的速度朝着全面支持HTML5、CSS3等标准的方向前进。随着访问Web内容的设备种类越来越多，精确预测网站在各种用户设备上的外观变得越来越困难。因此，网页的设计不应受像素完美控制的困扰，而是要接纳这种不确定性，设计出可适应不同浏览环境的柔性网站。第*页可访问性使用Web设计标准会在更广泛的设备上有更好的可访问性、带来更多样的用户等。设计网页首先要关注不同用户如何使用Web。有些人使用不同的设备或低速的Web连接；有些人只使用键盘；有些人使用屏幕阅读器阅读Web页面；有些人听不到音频内容。因此要熟悉形形色色的Web用户。不要只是假设所有人都用相同的模式在使用Web。HTML5给Web网页的可访问性带来的更广泛的便利。第*页结构化文档的Web可以把Web想象成一个由文档组成的大海，文档之间相互关联，并且与日常生活中遇到的打印文档有着很多相似性新闻网站中文章的结构与报纸上的文章结构类似。每一篇文章包含标题、文本段落以及一些图片（有时可能以视频代替图片）。相同点非常明显，而唯一的不同就是，在报纸上可以在一个版面上拥有多篇故事，而在网页上每篇故事则倾向于独占一个页面。新闻网站还经常使用首页显示新闻头条以及故事梗概。在编写Web页面时，HTML代码会告知Web浏览器需要显示的信息结构，即什么文本放在标题、段落或表格中等，从而浏览器能够恰当地将其呈现给用户。第*页主要内容1.1WEB网页设计原则1.2HTML5概述1.3HTML5页面的特征1.4WEB网页设计基础1.5编写一个简单的Web页面1.6本章小结第*页1.2HTML5概述2004年成立的Web超文本应用技术工作组（WHATWG）创立了HTML5规范，同时开始专门针对Web应用开发新的功能。2006年，W3C介入HTML5的开发，并于2008年发布了HTML5的工作草案。2009年，W3C停止了对XHTML2的更新。2010年HTML5开始用于解决实际问题。这时各大浏览器厂商开始对旗下产品进行升级以支持HTML5的新功能，因此，HTML5规范也得到了持续性的完善。第*页传统HTML与XHTML标记语言在我们的日常计算中无处不在。在传统的文字处理文档中，用于描述结构与外观的标记代码常常不是后台编码的。在Web文档中，传统HTML和XHTML（XHTML是HTML基于XML语法规则建立的标记语言）的标记代码是明显可见的。这些非后台的标记语言能够将Web页面的结构与外观传递给Web浏览器。从1991年底开始推出至今，HTML和基于XML的XHTML都发生了许多变化。最早构建Web页面的HTML版本并没有严格的定义。然而在1993年，I