HTML5+CSS3网页设计基础教程第18章 综合实例

1、第1页,第18章 综合实例,本章概述 本章的学习目标 主要内容,第2页,本章概述,前面的章节系统地介绍了HTML5和CSS3中的主要知识点，对于核心的知识点，提供了相应的示例。但是，许多读者发现，哪怕是将HTML5和CSS3中的每个知识点都看过一遍并敲过一遍代码，所有知识点熟记于心，到了实际项目开发中，仍然有不知从何下手的感觉。事实上，很多大学生毕业生在从学校毕业跨入社会求职时，都会遇到这样的焦虑好像自己学了很多知识，发现对实际工作没什么用，或者是不知道怎么下手应用所学得的技术去做实际项目。 因此，本章将结合实际的项目开发流程，根据实际的业务需求，来讲解如何使用HTML5和CSS3来开发实际的

2、项目或产品。,第3页,本章的学习目标,前端应用的开发现状与趋势； Web应用开发流程； 如何进行需求分析； 如何将需求转换为产品框架； 如何为项目建立数据库； 跨平台接口规划； 开发及实施部署事项。,第4页,主要内容,18.1 前端应用开发的现状与趋势 18.2 网站开发流程 18.3 企业网站 18.4 手机阅读器 18.5 本章小结,第5页,18.1 前端应用开发的现状与趋势,18.1.1 HTML5应用现状 18.1.2 HTML5行业发展趋势,第6页,18.1.1 HTML5应用现状,从软件角度来看，桌面浏览器对HTML5的支持高于移动浏览器，最高可达95%，但从整体上而言，移动浏览器

3、对HTML5的支持却优于桌面浏览器，手机浏览器几乎完全支持HTML5、CSS3的新增功能。 HTML5具有较好的浏览器向后兼容性，开发者能对浏览器不支持的情形设计各种各样的回退方案。因此，HTML5页面的实际显示性能与开发者、制作平台密切相关。在商业需求的驱动下，HTML5页面设计目的性更强，获得最好传播效果的基本是经过一定时间策划，在团队操作下有针对性进行投放的企业案例。,第7页,18.1.2 HTML5行业发展趋势,伴随着HTML5兴起是Flash的没落，HTML5除了移动设备的跨平台性和较好的做媒体支持外，它的应用范围也广于HTML5。近几年，HTML5在以下四大方面突破巨大。 往重度内

4、容化方向发展 往网页游戏方向发展 往虚拟现实、人工智能方向发展 往在线应用方向发展 往内容直接填充方向发展,第8页,主要内容,18.1 前端应用开发的现状与趋势 18.2 网站开发流程 18.3 企业网站 18.4 手机阅读器 18.5 本章小结,第9页,18.2 网站开发流程,随着这几年，传统行业的不景气，越来越多企业开始尝试网络营销策略。这种时候，建设一个优秀的网站来宣传，甚至在网站上去成交客户，是必不可少的。本节就来简单介绍网站的开发流程。 确定建站目标 进行需求分析 绘制网站原型 系统整理所需资料 与网站设计美工确定布局和风格 程序员完成网站功能实现 网站上线测试 网站推广,第10页,

5、主要内容,18.1 前端应用开发的现状与趋势 18.2 网站开发流程 18.3 企业网站 18.4 手机阅读器 18.5 本章小结,第11页,18.3 企业网站,本节将以一个企业网站为实例，介绍如何综合运用HTML5中的这些结构性元素，页面中每个结构性元素起到的作用，以及应该展现哪些内容等。 组织网页结构 构建网页标题 构建侧边栏 构建主体内容 构建版权信息,第12页,主要内容,18.1 前端应用开发的现状与趋势 18.2 网站开发流程 18.3 企业网站 18.4 手机阅读器 18.5 本章小结,第13页,18.4 手机阅读器,本节介绍的示例页面是一款手机阅读器的主体阅读页面，效果如图所示，

6、该页面分为上中下3个部分。其中，上部分是手机导航条，单击“返回书架”可以返回到书架页面；中间是小说内容显示区域；底部是常用工具条，其中显示“目录”、“字体”和“夜间”模式切换按钮。,第14页,主要内容,18.1 前端应用开发的现状与趋势 18.2 网站开发流程 18.3 企业网站 18.4 手机阅读器 18.5 本章小结,第15页,18.5 本章小结,本章首先从业务发展角度介绍了HTML5的应用现状和发展趋势。由于HTML5技术属于前端技术，而前端又恰好是网站开发流程中的一环，因此紧接着向读者介绍了整个网站的开发流程，以使读者明白整个网站项目的开发流程以及前端处于流程上的位置。最后，根据主流的HTML5应用场景，向读者提供了两个示例，一个示例是经典的企业网站开发方法；另一个示例是手机APP的开发。通过本章的内容及前面