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

1、HTML5+CSS3网页设计基础教程第18章 综合实例第1页第第18章章 综合实例综合实例本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础教程第18章 综合实例第2页本章概述本章概述l前面的章节系统地介绍了前面的章节系统地介绍了HTML5和和CSS3中的主中的主要知识点，对于核心的知识点，提供了相应的示要知识点，对于核心的知识点，提供了相应的示例。但是，许多读者发现，哪怕是将例。但是，许多读者发现，哪怕是将HTML5和和CSS3中的每个知识点都看过一遍并敲过一遍代中的每个知识点都看过一遍并敲过一遍代码，所有知识点熟记于心，到了实际项目开发中，码，所有知识点熟记于心，到了实际项目

2、开发中，仍然有不知从何下手的感觉。事实上，很多大学仍然有不知从何下手的感觉。事实上，很多大学生毕业生在从学校毕业跨入社会求职时，都会遇生毕业生在从学校毕业跨入社会求职时，都会遇到这样的焦虑到这样的焦虑好像自己学了很多知识，发现好像自己学了很多知识，发现对实际工作没什么用，或者是不知道怎么下手应对实际工作没什么用，或者是不知道怎么下手应用所学得的技术去做实际项目。用所学得的技术去做实际项目。l因此，本章将结合实际的项目开发流程，根据实因此，本章将结合实际的项目开发流程，根据实际的业务需求，来讲解如何使用际的业务需求，来讲解如何使用HTML5和和CSS3来开发实际的项目或产品。来开发实际的项目或产

3、品。HTML5+CSS3网页设计基础教程第18章 综合实例第3页本章的学习目标本章的学习目标l前端应用的开发现状与趋势；前端应用的开发现状与趋势；lWeb应用开发流程；应用开发流程；l如何进行需求分析；如何进行需求分析；l如何将需求转换为产品框架；如何将需求转换为产品框架；l如何为项目建立数据库；如何为项目建立数据库；l跨平台接口规划；跨平台接口规划；l开发及实施部署事项。开发及实施部署事项。HTML5+CSS3网页设计基础教程第18章 综合实例第4页主要内容主要内容18.1 前端应用开发的现状与趋势前端应用开发的现状与趋势 18.2 网站开发流程网站开发流程18.3 企业网站企业网站18.4

4、 手机阅读器手机阅读器18.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第18章 综合实例第5页18.1 前端应用开发的现状与趋前端应用开发的现状与趋势势 l18.1.1 HTML5应用现状应用现状l18.1.2 HTML5行业发展趋势行业发展趋势HTML5+CSS3网页设计基础教程第18章 综合实例第6页18.1.1 HTML5应用现状应用现状l从软件角度来看，桌面浏览器对从软件角度来看，桌面浏览器对HTML5的支持高于移动的支持高于移动浏览器，最高可达浏览器，最高可达95%，但从整体上而言，移动浏览器对，但从整体上而言，移动浏览器对HTML5的支持却优于桌面浏览器，手机浏览器

5、几乎完全的支持却优于桌面浏览器，手机浏览器几乎完全支持支持HTML5、CSS3的新增功能。的新增功能。lHTML5具有较好的浏览器向后兼容性，开发者能对浏览具有较好的浏览器向后兼容性，开发者能对浏览器不支持的情形设计各种各样的回退方案。因此，器不支持的情形设计各种各样的回退方案。因此，HTML5页面的实际显示性能与开发者、制作平台密切相页面的实际显示性能与开发者、制作平台密切相关。在商业需求的驱动下，关。在商业需求的驱动下，HTML5页面设计目的性更强页面设计目的性更强，获得最好传播效果的基本是经过一定时间策划，在团队，获得最好传播效果的基本是经过一定时间策划，在团队操作下有针对性进行投放的企

6、业案例。操作下有针对性进行投放的企业案例。HTML5+CSS3网页设计基础教程第18章 综合实例第7页18.1.2 HTML5行业发展趋势行业发展趋势l伴随着伴随着HTML5兴起是兴起是Flash的没落，的没落，HTML5除了移动设除了移动设备的跨平台性和较好的做媒体支持外，它的应用范围也广备的跨平台性和较好的做媒体支持外，它的应用范围也广于于HTML5。近几年，。近几年，HTML5在以下四大方面突破巨大。在以下四大方面突破巨大。往重度内容化方向发展往重度内容化方向发展往网页游戏方向发展往网页游戏方向发展往虚拟现实、人工智能方向发展往虚拟现实、人工智能方向发展往在线应用方向发展往在线应用方向发

7、展往内容直接填充方向发展往内容直接填充方向发展HTML5+CSS3网页设计基础教程第18章 综合实例第8页主要内容主要内容18.1 前端应用开发的现状与趋势前端应用开发的现状与趋势 18.2 网站开发流程网站开发流程18.3 企业网站企业网站18.4 手机阅读器手机阅读器18.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第18章 综合实例第9页18.2 网站开发流程网站开发流程l随着这几年，传统行业的不景气，越来越多企业随着这几年，传统行业的不景气，越来越多企业开始尝试网络营销策略。这种时候，建设一个优开始尝试网络营销策略。这种时候，建设一个优秀的网站来宣传，甚至在网站上去成交客

8、户，是秀的网站来宣传，甚至在网站上去成交客户，是必不可少的。本节就来简单介绍网站的开发流程。必不可少的。本节就来简单介绍网站的开发流程。确定建站目标确定建站目标进行需求分析进行需求分析绘制网站原型绘制网站原型系统整理所需资料系统整理所需资料与网站设计美工确定布局和风格与网站设计美工确定布局和风格程序员完成网站功能实现程序员完成网站功能实现网站上线测试网站上线测试网站推广网站推广HTML5+CSS3网页设计基础教程第18章 综合实例第10页主要内容主要内容18.1 前端应用开发的现状与趋势前端应用开发的现状与趋势 18.2 网站开发流程网站开发流程18.3 企业网站企业网站18.4 手机阅读器手

9、机阅读器18.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第18章 综合实例第11页18.3 企业网站企业网站l本节将以一个企业网站为实例，介绍如何综合运本节将以一个企业网站为实例，介绍如何综合运用用HTML5中的这些结构性元素，页面中每个结构中的这些结构性元素，页面中每个结构性元素起到的作用，以及应该展现哪些内容等。性元素起到的作用，以及应该展现哪些内容等。组织网页结构组织网页结构构建网页标题构建网页标题构建侧边栏构建侧边栏构建主体内容构建主体内容构建版权信息构建版权信息HTML5+CSS3网页设计基础教程第18章 综合实例第12页主要内容主要内容18.1 前端应用开发的现状与

10、趋势前端应用开发的现状与趋势 18.2 网站开发流程网站开发流程18.3 企业网站企业网站18.4 手机阅读器手机阅读器18.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第18章 综合实例第13页18.4 手机阅读器手机阅读器l本节介绍的示例页面是一款手机阅读器的主体阅读页面，本节介绍的示例页面是一款手机阅读器的主体阅读页面，效果如图所示，该页面分为上中下效果如图所示，该页面分为上中下3个部分。其中，上部个部分。其中，上部分是手机导航条，单击分是手机导航条，单击“返回书架返回书架”可以返回到书架页面；可以返回到书架页面；中间是小说内容显示区域；底部是常用工具条，其中显示中间是小说

11、内容显示区域；底部是常用工具条，其中显示“目录目录”、“字体字体”和和“夜间夜间”模式切换按钮。模式切换按钮。HTML5+CSS3网页设计基础教程第18章 综合实例第14页主要内容主要内容18.1 前端应用开发的现状与趋势前端应用开发的现状与趋势 18.2 网站开发流程网站开发流程18.3 企业网站企业网站18.4 手机阅读器手机阅读器18.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第18章 综合实例第15页18.5 本章小结本章小结 l本章首先从业务发展角度介绍了本章首先从业务发展角度介绍了HTML5的应用现的应用现状和发展趋势。由于状和发展趋势。由于HTML5技术属于前端技

12、术，技术属于前端技术，而前端又恰好是网站开发流程中的一环，因此紧而前端又恰好是网站开发流程中的一环，因此紧接着向读者介绍了整个网站的开发流程，以使读接着向读者介绍了整个网站的开发流程，以使读者明白整个网站项目的开发流程以及前端处于流者明白整个网站项目的开发流程以及前端处于流程上的位置。最后，根据主流的程上的位置。最后，根据主流的HTML5应用场景，应用场景，向读者提供了两个示例，一个示例是经典的企业向读者提供了两个示例，一个示例是经典的企业网站开发方法；另一个示例是手机网站开发方法；另一个示例是手机APP的开发。的开发。通过本章的内容及前面章节介绍的知识，读者应通过本章的内容及前面章节介绍的知识，读者应能够对能够对HTML5和和CSS3的整个知识体系有一个整的整个知识体系有一个整体性的认识，对体性的认识，对Web开发流程以及前端在整个流开发流程以及前端在整个流程中的位置有一个明确的认识，并能够利用这些程中的位置有一个明确的认识，并能够利用这些知识来开发基本的知识来开发基本的Web页面即手机页面。页面即手机页面。