模块一　HTML 高级特效（课件）-《网页制作高级特效》同步教学（劳动版）

模块一　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 的安装 目前很多流行的文本编辑器都支持 Emmet 插件。 (１) Dreamweaver CS3 (２) Dreamweaver CS6 (３) Dreamweaver CC 2015 课题 １　使用 Emmet 高效布局网页 ３. Emmet 的使用 任何一个 HTML 文档都具有一些默认的文档结构，使用 Emmet 可以创建 HTML 文档初始结构。 使用 Emmet 生成 HTML 文档初始结构 课题 ２　使用内嵌框架制作画中画特效 学习目标 掌握内嵌框架的用法，能在内嵌框架中正确显示文本、图像、动画和 HTML 文档，实现局部刷新，形成 “画中画” 的特效。 相关知识 一、内嵌框架 iframe 是 Inline Frame 的缩写，也是框架的一种形式。与框架 ( frame) 不 同的是，iframe 非常灵活，可以嵌在网页的任意部分，将嵌入的文档与整个页面的内容相互融合，形成一个整体，因此 iframe 被称为内嵌框架或内联框架。 课题 ２　使用内嵌框架制作画中画特效 使用内嵌框架可以将文本、图片、动画或 HTML 文档嵌入在一个 HTML 中显示，结合数据库技术可以在静态页面中嵌入动态内容，实现数据的增加、删除、查询、修改等操作，形成 “画中画” 的效果。重载页面时不需要重载整个页面，只需要重载页面中的内嵌框架，减少了数据传输，增加了网页下载速度。 课题 ２　使用内嵌框架制作画中画特效 二、内嵌框架的属性 iframe 标签的常用属性 课题 ２　使用内嵌框架制作画中画特效 iframe 标签的常用属性 课题 ３　使用 HTML5 制作验证码特效 学习目标 掌握 canvas 标签的用法，能使用 HTML5 的 canvas 标签和 JavaScript 制作 “验证码” 特效。 相关知识 “验证码” 是用一串随机产生的数字或符号生成的一幅图片，其中还会加入一些干扰像素防止 OCR (Optical Character Recognition 光学字符识别)。使用时，用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。使用验证码可以防止恶意破解密码、刷票、论坛灌水、刷页。不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。 课题 ３　使用 HTML5 制作验证码特效 canvas 是在 HTML5中新增的标签，用于在网页实时生成图像，并且可以操作图像内容。使用 HTML5中的 canvas 标签再结合 JavaScript 可以制作 “验证码” 特效。 课题 ３　使用 HTML5 制作验证码特效 一、canvas 标签 canvas 的中文含义为 “ 画布”，画布的坐标原点 (0，0) 在左上角，水平方向为 x 轴，垂直方向为 y 轴。 canvas 标签和其他标签的用法一样，语法格式如下： < canvas > </ canvas > 画布坐标 课题 ３　使用 HTML5 制作验证码特效 绘制图形前，需要使用 getContext ( )方法返回一个用于在画布上绘图的环境，语法格式如下： canvas. getContext（ context ID ） 其中，参数 context ID 指定了画布上绘制图形的类型，当前唯一的合法值是 “2d”，它指定了二维绘图 ( 即可以绘制直线、矩形、圆形、文本等)。目前 canvas 标签不支持三维绘图。 综上所述，使用 canvas 标签绘图的基本结构如下： <html> <head> <title>无标题文档 </titl