JavaScript程序设计案例教程第2版许旻配套教学课件PPT第9章.ppt 23页

3.24 MB
2022-04-29 14:31:25 发布

JavaScript程序设计案例教程第2版许旻配套教学课件PPT第9章.ppt

关闭预览

23页
当前文档由用户上传发布，收益归属用户

下载提示
文本预览

1、本文档共5页，可阅读全部内容。
2、本文档内容版权归属内容提供方，所产生的收益全部归内容提供方所有。如果您对本文有版权争议，可选择认领，认领后既往收益都归您。
3、本文档由用户上传，本站不保证质量和数量令人满意，可能有诸多瑕疵，付费之前，请仔细先通过免费阅读内容等途径辨别内容交易风险。如存在严重挂羊头卖狗肉之情形，可联系本站下载客服投诉处理。
文档侵权举报电话：19940600175。

'第9章HTML5+CSS3技术 HTML5和CSS3代表了下一代的HTML和CSS技术，JavaScript语言作为目前流行的脚本语言，与HTML5密不可分，HTML5中的核心功能基本都要JavaScript语言的支持。CSS3可以设置网页上的样式和布局，增加网页静态特效，将JavaScript和CSS3结合可以创建出大量的动态特效。使用HTML5+CSS3+JavaScript技术构建网页，使网页样式布局更标准、样式更美化。学习目标知识目标了解HTML5和CSS3的新功能熟悉HTML5中的Canvas元素熟悉CSS3中的媒体查询功能熟悉JavaScript常用插件的使用能力目标能够熟练HTML5和CSS3的新功能编写并美化网页能够熟练使用JavaScript和Canvas绘制图形能够熟练使用CSS3中的媒体查询功能使网页自适应布局能够在HTML中插入JavaScript常用插件实现浏览器兼容问题教学内容4案例陈述123案例实施知识准备本章小结5课后习题5 本案例使用HTML5中的canvas画布和Javascript技术在首页中绘制指针式动态时钟，效果如图9.1所示。9.1【案例16】绘制指针式动态时钟图9.1指针式动态时钟效果图 1)使用Dreamweaver将网页“Case17.html”另存为网页“Case19.html”，将画布代码添加到网页代码…

中。2)在中添加绘制动态时钟代码。9.1案例实施你的浏览器不支持canvas

知识点1HTML5新功能1)简化的文档类型和字符编码2)新增语义化标记，使文档结构明确3)form表单增强功能4)实现2D绘图的Canvas对象5)无需插件支持的视频/音频6)离线应用缓存7)可编辑内容、拖放9.1知识准备【实例9-1】HTML5文档结构应用。实例要求使用HTML5语法改写【实例2-8】中的页面结构。9.1知识准备图9.2使用HTML5编写的页面图知识点2使用JavaScript绘制图形JavaScript通过调用HTML5中的canvas元素来实现绘制图形和动画功能。1)创建canvas元素

知识点2使用JavaScript绘制图形2)使用JavaScript实现绘图的流程画布canvas本身不具有绘制图形的功能，只是一个容器，所有的绘制工作需在JavaScript内部完成。使用canvas结合JavaScript绘制图形，一般有以下步骤。(1)使用document对象的getElementById()方法获取页面中的画布canvas对象。(2)创建二维的绘图上下文对象(3)绘制图形9.1知识准备varcanvas=document.getElementById("mycanvas");varcontext=canvas.getContext(“2d”);context.fillStyle="#ffdd00";context.fillRect(0,0,150,150); 知识点2使用JavaScript绘制图形3)绘图API提供的属性和方法(1)设置颜色、样式和阴影。(2)绘制矩形。(3)绘制路径。(4)绘制图像。(5)像素操作。(6)绘制渐变图形。(7)绘制变换图片。(8)绘制文本。(9)图形组合，即把一个图像绘制在另一个图形之上。(10)图形的保存与恢复。9.1知识准备【实例9-2】使用canvas元素绘制图形。实例效果：画面中有一个棒棒糖人，由脸和上半身躯组成，脸是圆形，其中包括带线性渐变的矩形眼睛和笑状弧形嘴巴，身躯由三条直线组成。初始状态手向上，鼠标移入画布时手向下，鼠标移出后恢复初始状态。9.1知识准备图9.3棒棒糖人初始状态图9.4鼠标移入画布时状态图本案例主要实现学习风采照片墙效果：在页面内摆放15张照片，每张照片都有不同程度的旋转，并指定旋转的原点，其中有几张照片初始呈模糊状态。鼠标移入照片时，照片会以左上角为原点调整至正常的角度并放大清晰显示，鼠标离开后，照片就恢复成原来的状态；文字“JavaScript课程学习风采”使用CSS3动画特性制作仿Flash遮罩。效果如图9.5所示。并将此案例实现的网页作为首页图片“学习风采”超链接。9.2【案例20】学习风采照片墙图9.5chrome浏览器中运行效果图 1)新建网页“Case20-1.html”，在使用

中的文字删除，替换为图片并超链接于网页“Case20-1.html”。8)将网页“Case20.html”另存为网页“index.html”，设置网站中所有的链接，代码详见书本配套资源。9.2案例实施知识点3CSS3新功能1)功能强大的选择符。2)边框和背景。3)文字效果。4)色彩模式。5)渐变。6)多栏布局。7)变形和过渡。9.2知识准备-webkit-linear|radial-gradient([|],,[,]);//Webkit引擎-moz-linear-gradient([|],,[,]);//Mozilla引擎-o-linear-gradient([|],,[,]);//Opera引擎知识点3CSS3新功能8)动画。使用CSS3可以创建动画关键帧，对关键帧动画设置播放时间、播放次数、播放方向等，实现更加复杂、灵活的动画，并可以在许多网页中取代动画图片、Flash动画以及JavaScript。其中，表示动画的名称，必须定义一个动画名称，方便与动画属性animation绑定；表示动画持续时间的百分比，也可以是from和to，from对应的是0%，to对应的是100%，建议使用百分比；表示设置一个或多个合法的样式属性。9)媒体查询。提供丰富的媒体查询功能，可以根据不同的设备、不同的屏幕尺寸来自动调整页面布局。也可为网页中不同的对象设置不同的浏览设备。9.2知识准备@keyframes{

}} 【实例9-3】使用CSS3新增属性实现导航栏。9.2知识准备图9.7CSS3新增属性应用效果图【实例9-4】CSS3动画。图9.8CSS3动画效果图知识点4媒体查询@media规则是包含有查询表达式的媒体样式表定义规则。语法如下：9.2知识准备@media：：[[","]*]?：[only|not]?[and]*|[and]*："("[:]?")" 知识点4媒体查询页面中引入媒体类型方法也有多种，第一种和第四种是在项目制作中是常用的方法：1)link方法引入2)xml方式引入3)@import方式引入4)@media引入9.2知识准备@importurl("css/reset.css")screenand(width:800px);@mediascreen{选择器{属性：属性值；}}@importurl("css/style.css")all; 【实例9-5】使用MediaQueries媒体查询实现多种设备的样式表方案。9.2知识准备图9.9width小于660px运行图图9.10width介于660px-1000px运行图图9.11width大于1000px运行图知识点5JavaScript插件JavaScript插件有很多种，用户也可以自己开发js插件，插件里面就是一个或多个函数的组合，只需要将一些能实现某些功能的代码做成函数，再将这些函数全部放在一个js文件里面，到需要用的时候直接调用这个js文件里面的方法即可。9.2知识准备本章节主要介绍HTML5和CSS3的新增功能，重点介绍了使用HTML5中的canvas元素和JavaScript绘制图形，使用CSS3中的MediaQueries实现自适应屏幕响应，以及在网页中插入JavaScript插件。通过本章节的学习，读者可以结合使用HTML5、CSS3技术和JavaScript技术构建标准布局、精美样式和动态效果的网页。9.3本章小结 (1)使用HTML5中的canvas实现如图9.12的效果。(2)使用CSS3实现如图9.13的效果。(3)使用CSS3实现如图9.14的进度条。9.4操作题图9.12canvas应用效果图图9.13CSS3变形效果图图9.14进度条效果图'

JavaScript程序设计案例教程第2版许旻配套教学课件PPT第9章.ppt 23页

JavaScript程序设计案例教程第2版许旻配套教学课件PPT第9章.ppt

您可能关注的文档

相关文档

最近下载