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

第1页第18章综合实例本章概述本章的学习目标主要内容第1页第18章综合实例本章概述第2页本章概述前面的章节系统地介绍了HTML5和CSS3中的主要知识点，对于核心的知识点，提供了相应的示例。但是，许多读者发现，哪怕是将HTML5和CSS3中的每个知识点都看过一遍并敲过一遍代码，所有知识点熟记于心，到了实际项目开发中，仍然有不知从何下手的感觉。事实上，很多大学生毕业生在从学校毕业跨入社会求职时，都会遇到这样的焦虑——好像自己学了很多知识，发现对实际工作没什么用，或者是不知道怎么下手应用所学得的技术去做实际项目。因此，本章将结合实际的项目开发流程，根据实际的业务需求，来讲解如何使用HTML5和CSS3来开发实际的项目或产品。第2页本章概述前面的章节系统地介绍了HTML5和CSS3中的第3页本章的学习目标前端应用的开发现状与趋势；Web应用开发流程；如何进行需求分析；如何将需求转换为产品框架；如何为项目建立数据库；跨平台接口规划；开发及实施部署事项。第3页本章的学习目标前端应用的开发现状与趋势；第4页主要内容18.1前端应用开发的现状与趋势

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

18.2网站开发流程18.3企业网站18.4手机阅读器18.5本章小结第4页主要内容18.1前端应用开发的现状与趋势第20页18.1前端应用开发的现状与趋势18.1.1HTML5应用现状18.1.2HTML5行业发展趋势第5页18.1前端应用开发的现状与趋势18.1.1第21页18.1.1HTML5应用现状从软件角度来看，桌面浏览器对HTML5的支持高于移动浏览器，最高可达95%，但从整体上而言，移动浏览器对HTML5的支持却优于桌面浏览器，手机浏览器几乎完全支持HTML5、CSS3的新增功能。HTML5具有较好的浏览器向后兼容性，开发者能对浏览器不支持的情形设计各种各样的回退方案。因此，HTML5页面的实际显示性能与开发者、制作平台密切相关。在商业需求的驱动下，HTML5页面设计目的性更强，获得最好传播效果的基本是经过一定时间策划，在团队操作下有针对性进行投放的企业案例。第6页18.1.1HTML5应用现状从软件角度来看，桌面第22页18.1.2HTML5行业发展趋势伴随着HTML5兴起是Flash的没落，HTML5除了移动设备的跨平台性和较好的做媒体支持外，它的应用范围也广于HTML5。近几年，HTML5在以下四大方面突破巨大。往重度内容化方向发展往网页游戏方向发展往虚拟现实、人工智能方向发展往在线应用方向发展往内容直接填充方向发展第7页18.1.2HTML5行业发展趋势伴随着HTML5第23页主要内容18.1前端应用开发的现状与趋势18.2网站开发流程18.3企业网站18.4手机阅读器18.5本章小结第8页主要内容18.1前端应用开发的现状与趋势第24页18.2网站开发流程随着这几年，传统行业的不景气，越来越多企业开始尝试网络营销策略。这种时候，建设一个优秀的网站来宣传，甚至在网站上去成交客户，是必不可少的。本节就来简单介绍网站的开发流程。确定建站目标进行需求分析绘制网站原型系统整理所需资料与网站设计美工确定布局和风格程序员完成网站功能实现网站上线测试网站推广第9页18.2网站开发流程随着这几年，传统行业的不景气，第25页主要内容18.1前端应用开发的现状与趋势18.2网站开发流程18.3企业网站18.4手机阅读器18.5本章小结第10页主要内容18.1前端应用开发的现状与趋势第26页18.3企业网站本节将以一个企业网站为实例，介绍如何综合运用HTML5中的这些结构性元素，页面中每个结构性元素起到的作用，以及应该展现哪些内容等。组织网页结构构建网页标题构建侧边栏构建主体内容构建版权信息第11页18.3企业网站本节将以一个企业网站为实例，介绍第27页主要内容18.1前端应用开发的现状与趋势18.2网站开发流程18.3企业网站18.4手机阅读器18.5本章小结第12页主要内容18.1前端应用开发的现状与趋势第28页18.4手机阅读器本节介绍的示例页面是一款手机阅读器的主体阅读页面，效果如图所示，该页面分为上中下3个部分。其中，上部分是手机导航条，单击“返回书架”可以返回到书架页面；中间是小说内容显示区域；底部是常用工具条，其中显示“目录”、“字体”和“夜间”模式切换按钮。第13页18.4手机阅读器本节介绍的示例页面是一款手机阅第29页主要内容18.1前端应用开发的现状与趋势18.2网站开发流程18.3企业网站18.4手机阅读器18.5本章小结第14页主要内容18.1前端应用开发的现状与趋势第30页18.5本章小结本章首先从业务发展角度介绍了HTML5的应用现状和发展趋势。由于HTML5技术属于前端技术，而前端又恰好是网站开发流程中的一环，因此紧接着向