电子课件《网页制作高级特效》A063371模块一HTML高级特效.ppt

1、模块一HTML 高级特效网页制作高级特效网页制作高级特效123课题 使用 Emmet 高效布局网页课题 使用内嵌框架制作画中画特效课题 使用 HTML5 制作验证码特效目录课题课题 使用使用 Emmet 高效布局网页高效布局网页v 学习目标.了解静态网站和静态网页的概念，能正确创建静态网站，建立和测试了解静态网站和静态网页的概念，能正确创建静态网站，建立和测试静态网页。静态网页。.掌握掌握 Emmet 基本语法，能使用基本语法，能使用 Emmet 快速生成快速生成 HTML 和和 CSS 代码，代码，加快网站开发速度。加快网站开发速度。v 相关知识静态网站是指全部由 HTML 代码格式页面组成

2、的网站，完全采用 HTML 代码格式的网页通常被称为静态网页。课题课题 使用使用 Emmet 高效布局网页高效布局网页一、创建本地站点.使用使用 Dreamweaver CS3/CS4 创建本地站点创建本地站点.使用使用 Dreamweaver CS5/CS6/CC 创建本地站点创建本地站点课题课题 使用使用 Emmet 高效布局网页高效布局网页二、Emmet.Emmet 的简介的简介Emmet 插件的前身为 Zen Coding，是一个文本编辑器的插件，使用 Emmet 可以快速生成 HTML 和 CSS 代码，从而加速 Web 前端开发。.Emmet 的安装的安装目前很多流行的文本编辑器都

3、支持 Emmet 插件。()Dreamweaver CS3()Dreamweaver CS6()Dreamweaver CC 2015课题课题 使用使用 Emmet 高效布局网页高效布局网页.Emmet 的使用的使用任何一个 HTML 文档都具有一些默认的文档结构，使用 Emmet 可以创建 HTML 文档初始结构。使用 Emmet 生成 HTML 文档初始结构课题课题 使用内嵌框架制作画中画特效使用内嵌框架制作画中画特效v 学习目标掌握内嵌框架的用法，能在内嵌框架中正确显示文本、图像、动画和 HTML 文档，实现局部刷新，形成“画中画”的特效。v 相关知识一、内嵌框架iframe 是 Inl

4、ine Frame 的缩写，也是框架的一种形式。与框架(frame)不 同的是，iframe 非常灵活，可以嵌在网页的任意部分，将嵌入的文档与整个页面的内容相互融合，形成一个整体，因此 iframe 被称为内嵌框架或内联框架。课题课题 使用内嵌框架制作画中画特效使用内嵌框架制作画中画特效使用内嵌框架可以将文本、图片、动画或 HTML 文档嵌入在一个 HTML 中显示，结合数据库技术可以在静态页面中嵌入动态内容，实现数据的增加、删除、查询、修改等操作，形成“画中画”的效果。重载页面时不需要重载整个页面，只需要重载页面中的内嵌框架，减少了数据传输，增加了网页下载速度。课题课题 使用内嵌框架制作画中

5、画特效使用内嵌框架制作画中画特效二、内嵌框架的属性 iframe 标签的常用属性课题课题 使用内嵌框架制作画中画特效使用内嵌框架制作画中画特效 iframe 标签的常用属性课题课题 使用使用 HTML5 制作验证码特效制作验证码特效v 学习目标掌握 canvas 标签的用法，能使用 HTML5 的 canvas 标签和 JavaScript 制作“验证码”特效。v 相关知识“验证码”是用一串随机产生的数字或符号生成的一幅图片，其中还会加入一些干扰像素防止 OCR(Optical Character Recognition 光学字符识别)。使用时，用户肉眼识别其中的验证码信息，输入表单提交网站验

6、证，验证成功后才能使用某项功能。使用验证码可以防止恶意破解密码、刷票、论坛灌水、刷页。不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。课题课题 使用使用 HTML5 制作验证码特效制作验证码特效canvas 是在 HTML5中新增的标签，用于在网页实时生成图像，并且可以操作图像内容。使用 HTML5中的 canvas 标签再结合 JavaScript 可以制作“验证码”特效。课题课题 使用使用 HTML5 制作验证码特效制作验证码特效一、canvas 标签canvas 的中文含义为“画布”，画布的坐标原点(0，0)在左上角，水平方向为 x 轴，垂直方向为 y 轴。can

7、vas 标签和其他标签的用法一样，语法格式如下：画布坐标课题课题 使用使用 HTML5 制作验证码特效制作验证码特效绘制图形前，需要使用 getContext()方法返回一个用于在画布上绘图的环境，语法格式如下：canvas.getContext（context ID）其中，参数 context ID 指定了画布上绘制图形的类型，当前唯一的合法值是“2d”，它指定了二维绘图(即可以绘制直线、矩形、圆形、文本等)。目前 canvas 标签不支持三维绘图。综上所述，使用 canvas 标签绘图的基本结构如下：无标题文档 课题课题 使用使用 HTML5 制作验证码特效制作验证码特效var canva

8、s=document.getElementById(myCanvas);/查找 id为 myCanvas的画布var ctx=canvas.getContext(2d);/获取该 canvas的2D绘图环境 /此处添加画图(直线、矩形、圆形、文本、图像等)语句课题课题 使用使用 HTML5 制作验证码特效制作验证码特效二、基本图形的画法.画直线画直线ctx.moveTo(50，20)；/定义绘画开始的位置，将画笔移到坐标(50，20)ctx.lineTo(150，80)；/画一条直线，结束点坐标是(150，80)ctx.lineWidth=2；/定义线的宽度ctx.strokeStyle=re

9、d；/定义描边颜色为红色。注意：要在 stroke()之前使用ctx.stroke()；/描边直线显示效果课题课题 使用使用 HTML5 制作验证码特效制作验证码特效.画矩形画矩形/*-1.绘制实心矩形-*/ctx.fillStyle=#F00；ctx.fillRect(20，20，40，60)；/从画布上(20，20)开始，绘制宽40像素、高60像素的实心矩形/*-2.绘制空心矩形-*/ctx.strokeStyle=#0F0；/定义描边颜色为绿色ctx.strokeRect(80，20，40，60)；/从画布上(80，20)开始，绘制宽40像素、高60像素的空心矩形/*-3.矩形的填充与描

10、边-*/课题课题 使用使用 HTML5 制作验证码特效制作验证码特效ctx.rect(140，20，40，60)；/画矩形ctx.fillStyle=#EEE；/定义填充颜色为浅灰色ctx.fill()；/填充。当矩形既有描边又有填充时，必须先填充ctx.strokeStyle=#000；/定义描边颜色为黑色ctx.strokeRect(140，20，40，60)；/在填充后，再描边，描边才能显示出来矩形显示效果课题课题 使用使用 HTML5 制作验证码特效制作验证码特效.画圆画圆(弧线弧线)如果要创建一个圆形、半圆或弧线，可以使用 arc()方法。arc 的中文含义是“弧线”，arc()方法是用一个中心点和半径，为一个画布的当前子路径添加一条弧线。一个圆的弧线是 360或 2 弧度(用 Math.PI*2 表示)。画圆(弧线)的语法格式如下：课题课题 使用使用 HTML5 制作验证码特效制作验证码特效arc 参数含义谢谢