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

HTML5+CSS3网页设计基础教程第18章综合实例第1页第18章综合实例本章概述本章的学习目标主要内容HTML5+CSS3网页设计基础教程第18章综合实例第2页本章概述前面的章节系统地介绍了HTML5和CSS3中的主要知识点，对于核心的知识点，提供了相应的示例。但是，许多读者发现，哪怕是将HTML5和CSS3中的每个知识点都看过一遍并敲过一遍代码，所有知识点熟记于心，到了实际项目开发中，仍然有不知从何下手的感觉。事实上，很多大学生毕业生在从学校毕业跨入社会求职时，都会遇到这样的焦虑——好像自己学了很多知识，发现对实际工作没什么用，或者是不知道怎么下手应用所学得的技术去做实际项目。因此，本章将结合实际的项目开发流程，根据实际的业务需求，来讲解如何使用HTML5和CSS3来开发实际的项目或产品。HTML5+CSS3网页设计基础教程第18章综合实例第3页本章的学习目标前端应用的开发现状与趋势；Web应用开发流程；如何进行需求分析；如何将需求转换为产品框架；如何为项目建立数据库；跨平台接口规划；开发及实施部署事项。HTML5+CSS3网页设计基础教程第18章综合实例第4页主要内容18.1前端应用开发的现状与趋势18.2网站开发流程18.3企业网站18.4手机阅读器18.5本章小结HTML5+CSS3网页设计基础教程第18章综合实例第5页18.1前端应用开发的现状与趋势18.1.1HTML5应用现状18.1.2HTML5行业发展趋势HTML5+CSS3网页设计基础教程第18章综合实例第6页18.1.1HTML5应用现状从软件角度来看，桌面浏览器对HTML5的支持高于移动浏览器，最高可达95%，但从整体上而言，移动浏览器对HTML5的支持却优于桌面浏览器，手机浏览器几乎完全支持HTML5、CSS3的新增功能。HTML5具有较好的浏览器向后兼容性，开发者能对浏览器不支持的情形设计各种各样的回退方案。因此，HTML5页面的实际显示性能与开发者、制作平台密切相关。在商业需求的驱动下，HTML5页面设计目的性更强，获得最好传播效果的基本是经过一定时间策划，在团队操作下有针对性进行投放的企业案例。HTML5+CSS3网页设计基础教程第18章综合实例第7页18.1.2HTML5行业发展趋势伴随着HTML5兴起是Flash的没落，HTML5除了移动设备的跨平台性和较好的做媒体支持外，它的应用范围也广于HTML5。近几年，HTML5在以下四大方面突破巨大。►往重度内容化方向发展►往网页游戏方向发展►往虚拟现实、人工智能方向发展►往在线应用方向发展►往内容直接填充方向发展HTML5+CSS3网页设计基础教程第18章综合实例第8页主要内容18.1前端应用开发的现状与趋势18.2网站开发流程18.3企业网站18.4手机阅读器18.5本章小结HTML5+CSS3网页设计基础教程第18章综合实例第9页18.2网站开发流程随着这几年，传统行业的不景气，越来越多企业开始尝试网络营销策略。这种时候，建设一个优秀的网站来宣传，甚至在网站上去成交客户，是必不可少的。本节就来简单介绍网站的开发流程。►确定建站目标►进行需求分析►绘制网站原型►系统整理所需资料►与网站设计美工确定布局和风格►程序员完成网站功能实现►网站上线测试►网站推广HTML5+CSS3网页设计基础教程第18章综合实例第10页主要内容18.1前端应用开发的现状与趋势18.2网站开发流程18.3企业网站18.4手机阅读器18.5本章小结HTML5+CSS3网页设计基础教程第18章综合实例第11页18.3企业网站本节将以一个企业网站为实例，介绍如何综合运用HTML5中的这些结构性元素，页面中每个结构性元素起到的作用，以及应该展现哪些内容等。►组织网页结构►构建网页标题►构建侧边栏►构建主体内容►构建版权信息HTML5+CSS3网页设计基础教程第18章综合实例第12页主要内容18.1前端应用开发的现状与趋势18.2网站开发流程18.3企业网站18.4手机阅读器18.5本章小结HTML5+CSS3网页设计基础教程第18章综合实例第13页18.4手机阅读器本节介绍的示例页面是一款手机阅读器的主体阅读页面，效果如图所示，该页面分为上中下3个部分。其中，上部分是手机导航条，单击“返回书架”可以返回到书架页面；中间是小说内容显示区域；底部是常用工具条，其中显示“目录”、“字体”和“夜间”模式切换按钮。HTML5+CSS3网页设计基础教程第18章综合实例第14页主要内容18.1前端应用开发的现状与趋势18.2网站开发流程18.3企业网站18.4手机阅读器18.5本章小结HTML5+CSS3网页设计基础教程第18章综合实例第15页18.5本章小结本章首先从业务发展角度介绍了HTML5的应用现状和发展趋势。由于HTML5技术属于前端技术，而前端又恰好是网站开发流程中的一环，因此紧接着向读者介绍了整个网站的开发流程，以使读者明白整个网站项目的开发流程以及前端处于流程上的位置。最后，根据主流的HTML5应用场景，向读者提供了两个示例，一个示例是经典的企业网站开发方法；另一个示例是手机APP的开发。通过本章的内容及前面章节介绍的知识，读者应能够对HTML5和CSS3的整个知识体系有一个整体性的认识，对Web开发流程以及前端在整个流程中的位置有一个明确的认识，并能够利用这些知识来开发基本的Web页面即手机页面。