電子課件《網(wǎng)頁制作高級特效》A063371模塊一HTML高級特效

1、模塊一HTML 高級特效網(wǎng)頁制作高級特效123課題 使用 Emmet 高效布局網(wǎng)頁課題 使用內(nèi)嵌框架制作畫中畫特效課題 使用 HTML5 制作驗證碼特效目錄課題 使用 Emmet 高效布局網(wǎng)頁學(xué)習(xí)目標(biāo). 了解靜態(tài)網(wǎng)站和靜態(tài)網(wǎng)頁的概念，能正確創(chuàng)建靜態(tài)網(wǎng)站，建立和測試靜態(tài)網(wǎng)頁。. 掌握 Emmet 基本語法，能使用 Emmet 快速生成 HTML 和 CSS 代碼，加快網(wǎng)站開發(fā)速度。相關(guān)知識靜態(tài)網(wǎng)站是指全部由 HTML 代碼格式頁面組成的網(wǎng)站，完全采用 HTML 代碼格式的網(wǎng)頁通常被稱為靜態(tài)網(wǎng)頁。課題 使用 Emmet 高效布局網(wǎng)頁一、創(chuàng)建本地站點. 使用 Dreamweaver CS3 / CS

2、4 創(chuàng)建本地站點. 使用 Dreamweaver CS5 / CS6 / CC 創(chuàng)建本地站點課題 使用 Emmet 高效布局網(wǎng)頁二、Emmet. Emmet 的簡介Emmet 插件的前身為 Zen Coding，是一個文本編輯器的插件，使用 Emmet 可以快速生成 HTML 和 CSS 代碼，從而加速 Web 前端開發(fā)。. Emmet 的安裝目前很多流行的文本編輯器都支持 Emmet 插件。() Dreamweaver CS3() Dreamweaver CS6() Dreamweaver CC 2015課題 使用 Emmet 高效布局網(wǎng)頁. Emmet 的使用任何一個 HTML 文檔都具有

3、一些默認的文檔結(jié)構(gòu)，使用 Emmet 可以創(chuàng)建 HTML 文檔初始結(jié)構(gòu)。使用 Emmet 生成 HTML 文檔初始結(jié)構(gòu)課題 使用內(nèi)嵌框架制作畫中畫特效學(xué)習(xí)目標(biāo)掌握內(nèi)嵌框架的用法，能在內(nèi)嵌框架中正確顯示文本、圖像、動畫和 HTML 文檔，實現(xiàn)局部刷新，形成 “畫中畫” 的特效。相關(guān)知識一、內(nèi)嵌框架iframe 是 Inline Frame 的縮寫，也是框架的一種形式。與框架 ( frame) 不 同的是，iframe 非常靈活，可以嵌在網(wǎng)頁的任意部分，將嵌入的文檔與整個頁面的內(nèi)容相互融合，形成一個整體，因此 iframe 被稱為內(nèi)嵌框架或內(nèi)聯(lián)框架。課題 使用內(nèi)嵌框架制作畫中畫特效使用內(nèi)嵌框架可以

4、將文本、圖片、動畫或 HTML 文檔嵌入在一個 HTML 中顯示，結(jié)合數(shù)據(jù)庫技術(shù)可以在靜態(tài)頁面中嵌入動態(tài)內(nèi)容，實現(xiàn)數(shù)據(jù)的增加、刪除、查詢、修改等操作，形成 “畫中畫” 的效果。重載頁面時不需要重載整個頁面，只需要重載頁面中的內(nèi)嵌框架，減少了數(shù)據(jù)傳輸，增加了網(wǎng)頁下載速度。課題 使用內(nèi)嵌框架制作畫中畫特效二、內(nèi)嵌框架的屬性 iframe 標(biāo)簽的常用屬性課題 使用內(nèi)嵌框架制作畫中畫特效 iframe 標(biāo)簽的常用屬性課題 使用 HTML5 制作驗證碼特效學(xué)習(xí)目標(biāo)掌握 canvas 標(biāo)簽的用法，能使用 HTML5 的 canvas 標(biāo)簽和 JavaScript 制作 “驗證碼” 特效。相關(guān)知識“驗證碼”

5、 是用一串隨機產(chǎn)生的數(shù)字或符號生成的一幅圖片，其中還會加入一些干擾像素防止 OCR (Optical Character Recognition 光學(xué)字符識別)。使用時，用戶肉眼識別其中的驗證碼信息，輸入表單提交網(wǎng)站驗證，驗證成功后才能使用某項功能。使用驗證碼可以防止惡意破解密碼、刷票、論壇灌水、刷頁。不少網(wǎng)站為了防止用戶利用機器人自動注冊、登錄、灌水，都采用了驗證碼技術(shù)。課題 使用 HTML5 制作驗證碼特效canvas 是在 HTML5中新增的標(biāo)簽，用于在網(wǎng)頁實時生成圖像，并且可以操作圖像內(nèi)容。使用 HTML5中的 canvas 標(biāo)簽再結(jié)合 JavaScript 可以制作 “驗證碼” 特效

6、。課題 使用 HTML5 制作驗證碼特效一、canvas 標(biāo)簽canvas 的中文含義為 “ 畫布”，畫布的坐標(biāo)原點 (0，0) 在左上角，水平方向為 x 軸，垂直方向為 y 軸。canvas 標(biāo)簽和其他標(biāo)簽的用法一樣，語法格式如下： 畫布坐標(biāo)課題 使用 HTML5 制作驗證碼特效繪制圖形前，需要使用 getContext ( )方法返回一個用于在畫布上繪圖的環(huán)境，語法格式如下：canvas. getContext（ context ID ）其中，參數(shù) context ID 指定了畫布上繪制圖形的類型，當(dāng)前唯一的合法值是 “2d”，它指定了二維繪圖 ( 即可以繪制直線、矩形、圓形、文本等)。目

7、前 canvas 標(biāo)簽不支持三維繪圖。綜上所述，使用 canvas 標(biāo)簽繪圖的基本結(jié)構(gòu)如下：無標(biāo)題文檔 課題 使用 HTML5 制作驗證碼特效var canvas=document.getElementById(myCanvas); /查找 id為 myCanvas的畫布var ctx=canvas.getContext(2d); /獲取該 canvas的2D繪圖環(huán)境 /此處添加畫圖(直線、矩形、圓形、文本、圖像等)語句課題 使用 HTML5 制作驗證碼特效二、基本圖形的畫法. 畫直線ctx.moveTo(50，20)；/定義繪畫開始的位置，將畫筆移到坐標(biāo)(50，20)ctx.lineTo(1

8、50，80)；/畫一條直線，結(jié)束點坐標(biāo)是(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.stro

9、keRect(80，20，40，60)；/從畫布上(80，20)開始，繪制寬40像素、高60像素的空心矩形/* -3. 矩形的填充與描邊 - */課題 使用 HTML5 制作驗證碼特效ctx.rect(140，20，40，60)；/畫矩形ctx.fillStyle=#EEE；/定義填充顏色為淺灰色ctx.fill( )；/填充。當(dāng)矩形既有描邊又有填充時，必須先填充ctx.strokeStyle=#000；/定義描邊顏色為黑色ctx.strokeRect(140，20，40，60)；/在填充后，再描邊，描邊才能顯示出來矩形顯示效果課題 使用 HTML5 制作驗證碼特效. 畫圓 (弧線)如果要創(chuàng)建一個圓形、半圓或弧線，可以使用 arc