拓展模块10.6开发简单HTML5应用项目教学课件.pptx

10信息技术（拓展模块）模块10 数字媒体技术 数字媒体是指以二进制数的形式记录、处理、传播、获取过程的信息载体，这些载体包括逻辑媒体和实物媒体。数字媒体就是以数字化形式（0 或 1）传送信息，并通过计算机存储、处理和传播信息的媒体。教师： 【学习目标】【学习目标】(1)了解数字媒体概念、数字媒体属性、数字媒体特征等；(2)了解数字媒体技术概念和特性、研究应用领域、未来发展及趋势；(3)了解数字文本处理的技术过程、数字文本编辑、存储、传输及展现；(4)了解数字图像处理的技术过程、数字图像处理的主要技术；(5)了解数字声音处理的技术过程、数字声音的编辑和应用；(6)了解数字视频处理技术过程、数字视频的编辑和应用(7)开发简单的HTML5 应用项目、HTML5制作方法和HTML5发布 【知识图谱知识图谱】目 录CONTENTS1010.1.1认知数字媒体和数字媒体技术认知数字媒体和数字媒体技术1010.2.2了解数字文本处理了解数字文本处理1010.3.3了解数字图像处理了解数字图像处理1010. .4 4了解数字声音处理了解数字声音处理1010. .5 5了解数字视频处理了解数字视频处理1010. .6 6开发简单开发简单HTML5HTML5应用项目应用项目1010.6.6 开发简单开发简单HTML5HTML5应用项目应用项目061010.6.6.1.1 认知认知HTML5HTML51.HTML5的概念 HTML5是构建Web内容的一种语言描述方式，是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。作为Web中核心语言，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，是新时代的新背景下，一种新型互联网传播模式，也简称为H5。1010.6.6.1.1 认知认知HTML5HTML52.HTML5技术的优势 新一代互联网技术的发展，使H5技术能够在多媒体终端灵活地实现跨模式输出，输出模式也从传统的单向模式变成了双向互动模式，使用户的互联网体验大大提升。用户获取的信息载体成多元化方式发展，H5以其节约化的图像、个性化交互的方式成为热门的互联网传播模式。往往具有设计方法灵活，方便修改；具有丰富多彩的交互先进技术；具有较低的维护开发成本等优势。1010.6.6.2.2 使用使用HTMLHTML标签编写网页的结构标签编写网页的结构 对于HTML5来讲，在网页结构上标签定义与使用更加语义化，让搜索引擎以及工程师更加迅速理解当前网页的整个重心所在。传统HTML页面布局和HTML5布局1010.6.6.2.2 使用使用HTMLHTML标签编写网页的结构标签编写网页的结构 HTML5中新增的主体结构元素：article元素、section元素、aside元素、nav元素、time元素、pubdate元素，在结构标签、多媒体标签、web应用标签、注释标签等方面有了新的补充和变化，具有更加丰富多元的媒体表现，增强了浏览器的原生功能，减少浏览器插件flash应用，提高用户体验满意度，让开发更加方便。1010.6.6.3.3 使用浮动、定位、使用浮动、定位、FlexFlex精细控制网页布局精细控制网页布局 浮动与定位在网页设计中应用得很广泛，是两种主要布局方式的实现方法。一般在网页中，块标签是自上而下的一块块堆叠，行内标签则在一行内从左到右依次并排，较为单调，浮动能够让标签内容脱离这种文档流，通过left、right浮动值向左、向右浮动，可以把元素移到浏览器边沿的左边或右边，呈现粘粘在边沿效果，它下边的文本则会充斥在它的一边或者下面。1.浮动和定位 浮动效果1010.6.6.3.3 使用浮动、定位、使用浮动、定位、FlexFlex精细控制网页布局精细控制网页布局 定位，用于控制网页上元素的位置，将其放置合适地方，比如浏览网页会发现顶部导航栏总是悬浮在顶部，即便向下滚动网页，这就是定位的很好体现。使用了position属性，值为fixed，即固定，规定了left、right和top属性，离左边、右边和顶部的距离，就完成了定位。1.浮动和定位1010.6.6.3.3 使用浮动、定位、使用浮动、定位、FlexFlex精细控制网页布局精细控制网页布局 移动端目前较为流行的布局，Flex布局也称弹性盒布局，往往是通过给父集加子集实现效果。比如flex-direction、flex-wrap 、flex-basis、Justify-content，设置排列、缩放和对其方式。2.Flex布局1010.6.6.4.4 装饰美化网页内容装饰美化网页内容 网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容那么如何用处处流露着细腻和创意的动效细节打动人，HTML5往往通过与CSS的配合达到装饰美化网页的效果，其中各种滤镜和特效，可以运用到web 项目中。CSS代码1010. .6.56.5使用转换、过渡、动画等高级特性使用转换、过渡、动画等高级特性translate()方法 CSS3动画提供了2D和3D以及常规动画属性接口，它可以工作在页面的任何一个元素的任意一个属性，CSS3的动画是利用C语言编写的，它是系统层面的动画。在2D转换上CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。transform属性适用于2D或3D转换的元素，transform-origin属性，设置转化元素位置。1.转换1010. .6.56.5使用转换、过渡、动画等高级特性使用转换、过渡、动画等高级特性过渡属性语法形式 CSS中用于设置过渡特效的属性 transition，该属性允许CSS的属性值在一定的时间区间内平滑地过渡，依靠了CSS3版本标准之前对“JavaScript”和“Flash”的依赖，使页面的性能得以提升。这种效果可以在鼠标悬浮（:hover）、鼠标单击（:active）、表单元素获得焦点（:focus）或对元素任何改变以及在JavaScript中某些事件执行后触发，并圆滑（若不对时间曲线进行特殊设置）地以动画效果改变CSS的属性值。2.过渡1010. .6.56.5使用转换、过渡、动画等高级特性使用转换、过渡、动画等高级特性HTML5/CSS3滑块动画菜单图标动画 HTML5动画效果的实现Canvas，CSS3和Javascript，通过合理的选择，来实现最优的呈现。3.动画1010. .6.6.6 6发布发布HTML5HTML5应用应用 在当下，HTML5应用程序（WEB APP）为企业提供了对本地应用程序开发的简单替代，尤其是随着更多HTML5开发框架的出现。任何组织在多个平台上实现移动应用程序都会优先考虑HTML5发布应用。HTML5应用程序（WEB APP）作为为移动设备优化的网页集合，为流式视频和音频数据、图形处理和动画以及离线支持提供了高级功能，并且语义元素、表单控件和多媒体组件，以及许多支持地理定位服务、拖放操作、本地应用程序缓存等为应用程序的开发提供了多元的支持。本节结束教师：李冰玉