劳动出版社精品课件 《网页制作高级特效》 A063371模块一HTML高级特效

1、模块一 HTML 高级特效,网页制作高级特效,1,2,3,课题 使用 Emmet 高效布局网页,课题 使用内嵌框架制作画中画特效,课题 使用 HTML5 制作验证码特效,目录,课题 使用 Emmet 高效布局网页,学习目标 . 了解静态网站和静态网页的概念，能正确创建静态网站，建立和测试静态网页。 . 掌握 Emmet 基本语法，能使用 Emmet 快速生成 HTML 和 CSS 代码，加快网站开发速度。 相关知识 静态网站是指全部由 HTML 代码格式页面组成的网站，完全采用 HTML 代码格式的网页通常被称为静态网页。,课题 使用 Emmet 高效布局网页,一、创建本地站点 . 使用 Dreamweaver CS3 / CS4 创建本地站点 . 使用 Dreamweaver CS5 / CS6 / CC 创建本地站点,课题 使用 Emmet 高效布局网页,二、Emmet . Emmet 的简介 Emmet 插件的前身为 Zen Coding，是一个文本编辑器的插件，使用 Emmet 可以快速生成 HTML 和 CSS 代码，从而加速 Web 前端开发。 . Emmet 的安装 目前

2、很多流行的文本编辑器都支持 Emmet 插件。 () Dreamweaver CS3 () Dreamweaver CS6 () Dreamweaver CC 2015,课题 使用 Emmet 高效布局网页,. Emmet 的使用 任何一个 HTML 文档都具有一些默认的文档结构，使用 Emmet 可以创建 HTML 文档初始结构。,使用 Emmet 生成 HTML 文档初始结构,课题 使用内嵌框架制作画中画特效,学习目标 掌握内嵌框架的用法，能在内嵌框架中正确显示文本、图像、动画和 HTML 文档，实现局部刷新，形成 “画中画” 的特效。 相关知识 一、内嵌框架 iframe 是 Inline Frame 的缩写，也是框架的一种形式。与框架 ( frame) 不 同的是，iframe 非常灵活，可以嵌在网页的任意部分，将嵌入的文档与整个页面的内容相互融合，形成一个整体，因此 iframe 被称为内嵌框架或内联框架。,课题 使用内嵌框架制作画中画特效,使用内嵌框架可以将文本、图片、动画或 HTML 文档嵌入在一个 HTML 中显示，结合数据库技术可以在静态页面中嵌入动态内容，实现数据的

3、增加、删除、查询、修改等操作，形成 “画中画” 的效果。重载页面时不需要重载整个页面，只需要重载页面中的内嵌框架，减少了数据传输，增加了网页下载速度。,课题 使用内嵌框架制作画中画特效,二、内嵌框架的属性,iframe 标签的常用属性,课题 使用内嵌框架制作画中画特效,iframe 标签的常用属性,课题 使用 HTML5 制作验证码特效,学习目标 掌握 canvas 标签的用法，能使用 HTML5 的 canvas 标签和 JavaScript 制作 “验证码” 特效。 相关知识 “验证码” 是用一串随机产生的数字或符号生成的一幅图片，其中还会加入一些干扰像素防止 OCR (Optical Character Recognition 光学字符识别)。使用时，用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。使用验证码可以防止恶意破解密码、刷票、论坛灌水、刷页。不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。,课题 使用 HTML5 制作验证码特效,canvas 是在 HTML5中新增的标签，用于在网页实时生成图像，并且可以操作图像内

4、容。使用 HTML5中的 canvas 标签再结合 JavaScript 可以制作 “验证码” 特效。,课题 使用 HTML5 制作验证码特效,一、canvas 标签 canvas 的中文含义为 “ 画布”，画布的坐标原点 (0，0) 在左上角，水平方向为 x 轴，垂直方向为 y 轴。 canvas 标签和其他标签的用法一样，语法格式如下： ,画布坐标,课题 使用 HTML5 制作验证码特效,绘制图形前，需要使用 getContext ( )方法返回一个用于在画布上绘图的环境，语法格式如下： canvas. getContext（ context ID ） 其中，参数 context ID 指定了画布上绘制图形的类型，当前唯一的合法值是 “2d”，它指定了二维绘图 ( 即可以绘制直线、矩形、圆形、文本等)。目前 canvas 标签不支持三维绘图。 综上所述，使用 canvas 标签绘图的基本结构如下： 无标题文档 ,课题 使用 HTML5 制作验证码特效, var canvas=document.getElementById(“myCanvas“); /查找 id为 myCanvas的

5、画布 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=“red“； /定义描边颜色为红色。注意：要在 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. 矩形的填充与描边 - */,课题 使用 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 参数含义,谢谢,

《劳动出版社精品课件 《网页制作高级特效》 A063371模块一HTML高级特效》由会员E****分享，可在线阅读，更多相关《劳动出版社精品课件 《网页制作高级特效》 A063371模块一HTML高级特效》请在金锄头文库上搜索。