基于HTML5Canvas的畫圖板設(shè)計(jì)與實(shí)現(xiàn)

1、 摘 要 Web2.0帶來的豐富互聯(lián)網(wǎng)技術(shù)讓所有人都享受到了技術(shù)發(fā)展和體驗(yàn)進(jìn)步的樂趣。而作為下一代互聯(lián)網(wǎng)標(biāo)準(zhǔn)，HTML5自然也是備受期待和矚目。HTML5是近十年來Web開發(fā)標(biāo)準(zhǔn)巨大的飛躍。和以前的版本不同，HTML5并非僅僅用來表示W(wǎng)eb內(nèi)容，它的新使命是將Web帶入一個(gè)成熟的應(yīng)用平臺，在HTML5平臺上，視頻、音頻、圖象、動(dòng)畫，以及同電腦的交互都被標(biāo)準(zhǔn)化。現(xiàn)階段對于HTML5技術(shù)的研發(fā)和開發(fā)工作主要集中在技術(shù)草案的確立與新互聯(lián)網(wǎng)應(yīng)用的開發(fā)上，而隨著互聯(lián)網(wǎng)的發(fā)展，HTML標(biāo)準(zhǔn)也在不斷變化，HTML標(biāo)準(zhǔn)已經(jīng)走過第4代了，因?yàn)樗軌蛴煤唵蔚臉?biāo)簽元素，代替屬性能實(shí)現(xiàn)之前需要用很多復(fù)雜JavaScr

2、ipt代碼才能有實(shí)現(xiàn)的功能，HTML5越來越受到歡迎。 HTML5帶來很多令人激動(dòng)的新特性，這在之前的HTML中是不可見到的。其中一個(gè)最值得提及的特性就是用于繪畫的 HTML Canvas，可以對2D或位圖進(jìn)行動(dòng)態(tài)、腳本的渲染。本文詳細(xì)分析了HTML5技術(shù)的簡介和發(fā)展前景，并深入探討了HTML5引入的核心標(biāo)簽Canvas元素，介紹了Canvas可以實(shí)現(xiàn)的主要功能，在此基礎(chǔ)上實(shí)現(xiàn)了部分類似Windows畫圖板的功能，包括鉛筆、圖章仿制、畫直線、圓、矩形、橡皮擦、背景圖、取色板、插入文字等功能，在實(shí)現(xiàn)過程中也利用了最新的CSS3技術(shù)，最后再次總結(jié)了這次畢設(shè)的經(jīng)驗(yàn)和對未來的展望。 本文針對其引入的C

3、anvas繪圖元素進(jìn)行了深入的研究，此元素可以替代畫圖作為動(dòng)畫渲染的工具，效率與安全性更高，開發(fā)更便捷，必將是以后的動(dòng)畫，游戲等應(yīng)用首選的開發(fā)方式，前景非常好。【關(guān)鍵詞】Web2.0 HTML5 CSS3 CanvasABSTRACTWeb2.0 brings a wealth of Internet technology for all to enjoy the fun of technology development and experience progress. As a next-generation Internet standard, HTML5 is naturally hi

4、ghly anticipated and attention. HTML5 is a huge leap over the past decade Web development standards. Unlike the previous version,HTML5 is not just used to represent Web content, its new mission is the Web into a full-fledged application platform, HTML5 platform, video, audio, image, animation, and i

5、nteraction with the computer be standardized. At this stage for the HTML5 technology and development work focused on the establishment of the draft technology and new Internet application development, HTML standards are changing with the development of the Internet, HTML standard has gone through fo

6、ur generations, because it simple label elements, instead of before the property can be realized with a lot of complex JavaScript code in order to achieve the functions, HTML5 has been more popular.HTML5 brings a lot of exciting new features. This is not seen in the previous HTML. One of the most wo

7、rth mentioning the characteristics is HTML Canvas for painting, 2D or bitmap rendering of dynamic script. I detailed analysis the HTML5 technology introduction and development prospects, a deeper look into the core of the introduction of HTML5 tag Canvas element, the Canvas can be achieved, based on

8、 the a similar Windows drawing board, including pencil, stamp imitation, draw a straight line, circle, rectangle, eraser, background image, take a swatch in the realization of the process also takes advantage of the latest CSS3 techniques and, finally, this complete set up experience and vision for

9、the future.This paper introduces the Canvas drawing elements which conducted research, this element can replace the drawing as a tool for animation rendering, higher efficiency and security, the development of more convenient, be the future animation, games and other application development method o

10、f choice , the outlook is very good.【Key words】WEB2.0 HTML5 CSS3 Canvas目 錄前 言1第一章 關(guān)于HTML5和畫圖板2第一節(jié) HTML5簡介2第二節(jié) HTML5特性2第三節(jié) HTML5國內(nèi)外發(fā)展現(xiàn)狀3第四節(jié) 畫圖工具4第二章 相關(guān)技術(shù)簡介5第一節(jié) Canvas元素簡介5第二節(jié) 第一個(gè)Canvas程序的實(shí)現(xiàn)5第三節(jié) JavaScript及jQuery簡介7第四節(jié) CSS3簡介9第五節(jié) 開發(fā)工具DreamWeaver介紹12第六節(jié) 調(diào)試工具Firefox及Firebug簡介13第三章 功能設(shè)計(jì)16第一節(jié) 需求設(shè)計(jì)16第二節(jié) 基本

11、原理17第三節(jié) 布局及界面設(shè)計(jì)19第四節(jié) JavaScript設(shè)計(jì)20第四章 功能的實(shí)現(xiàn)21第一節(jié) 簡單功能的實(shí)現(xiàn)21第二節(jié) 前臺顯示實(shí)現(xiàn)24第三節(jié) JavaScript畫圖實(shí)現(xiàn)25第四節(jié) 最終效果32第五節(jié) 不足之處38第五章 結(jié)束語39致 謝40參考文獻(xiàn)41附 錄42前 言隨著互聯(lián)網(wǎng)時(shí)代的高速發(fā)展，上網(wǎng)早已經(jīng)成為人民日常生活中一個(gè)必不可少的部分，人們可以在網(wǎng)絡(luò)上獲取信息，甚至于在網(wǎng)絡(luò)上完成日常的正常生活?？葱侣劊措娨?，訂餐等等。HTML的上個(gè)版本早在1999年制定，隨著21世紀(jì)網(wǎng)絡(luò)的不斷發(fā)展，已經(jīng)不能適應(yīng)當(dāng)前的需求，于是HTML5營運(yùn)而生了。HTML5是HTML下一個(gè)的主要修訂版本，以期

12、能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求，現(xiàn)仍處于發(fā)展階段。它希望能夠減少瀏覽器對豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)的插件的需要，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。HTML5的出現(xiàn)再次告訴我們，我們的生活，日常辦公，越來越有可能全在網(wǎng)頁端實(shí)現(xiàn)了。如今很多人喜歡在電腦上繪圖，畫圖版作為一個(gè)日常的生活工具，如今也能在我們網(wǎng)頁端實(shí)現(xiàn)了。HTML5一個(gè)很有用實(shí)用的特性是用于繪畫的Canvas元素，Canvas擁有許多繪制功能如畫筆、矩形、圓形、字符以及圖像處理的方法，他為人們在網(wǎng)頁繪圖及圖像處理帶來了方便。第一章 關(guān)于HTML5和畫圖板第一節(jié) HTML5簡介HTML標(biāo)準(zhǔn)自1999年12月發(fā)

13、布的HTML4.01后，后繼的HTML5和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng)Web標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián)合起來，成立了一個(gè)叫做 Web Hypertext Application Technology Working Group （Web超文本應(yīng)用技術(shù)工作組，WHATWG） 的組織。WHATWG 致力于 Web 表單和應(yīng)用程序，而W3C（World Wide Web Consortium，萬維網(wǎng)聯(lián)盟） 專注于 XHTML 2.0。在 2006 年，雙方?jīng)Q定進(jìn)行合作，來創(chuàng)建一個(gè)新版本的 HTML。HTML5 草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出

14、，于2007年被W3C接納，并成立了新的 HTML 工作團(tuán)隊(duì)。HTML5 的第一份正式草案已于2008年1月22日公布。HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。2012年12月17日，萬維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱：“HTML5是開放的Web網(wǎng)絡(luò)平臺的奠基石?！敝С諬TML5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內(nèi)的傲游瀏覽器（Maxthon），以及基于IE所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽

15、器、獵豹瀏覽器等國產(chǎn)瀏覽器同樣具備支持HTML5的能力。HTML5提供了一些新的元素和屬性，例如（網(wǎng)站導(dǎo)航塊）和。這種標(biāo)簽將有利于搜索引擎的索引整理，同時(shí)更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如和標(biāo)記。第二節(jié) HTML5特性一、取消了一些過時(shí)的HTML4標(biāo)記其中包括純粹顯示效果的標(biāo)記，如和，它們已經(jīng)被CSS取代。新的HTML5 吸取了XHTML2 一些建議，包括一些用來改善文檔結(jié)構(gòu)的功能，比如，新的HTML 標(biāo)簽 header, footer, dialog, aside, figure 等的使用，將使內(nèi)容創(chuàng)作者更加語義地創(chuàng)建文檔，之前的開發(fā)者在實(shí)現(xiàn)這些

16、功能時(shí)一般都是使用DIV。二、將內(nèi)容和展示分離b 和 i 標(biāo)簽依然保留，但它們的意義已經(jīng)和之前有所不同，這些標(biāo)簽的意義只是為了將一段文字標(biāo)識出來，而不是為了為它們設(shè)置粗體或斜體式樣。u，font，center，strike 這些標(biāo)簽則被完全去掉了。三、一些全新的表單輸入對象包括日期，URL，Email 地址，其它的對象則增加了對非拉丁字符的支持。HTML5 還引入了微數(shù)據(jù)，這一使用機(jī)器可以識別的標(biāo)簽標(biāo)注內(nèi)容的方法，使語義Web 的處理更為簡單?？偟膩碚f，這些與結(jié)構(gòu)有關(guān)的改進(jìn)使內(nèi)容創(chuàng)建者可以創(chuàng)建更干凈，更容易管理的網(wǎng)頁，這樣的網(wǎng)頁對搜索引擎，對讀屏軟件等更為友好。四、全新的，更合理的Tag多媒體

17、對象將不再全部綁定在object或 embed Tag 中，而是視頻有視頻的Tag，音頻有音頻的Tag。五、本地?cái)?shù)據(jù)庫這個(gè)功能將內(nèi)嵌一個(gè)本地的SQL 數(shù)據(jù)庫，以加速交互式搜索，緩存以及索引功能。同時(shí)，那些離線Web 程序也將因此獲益匪淺。不需要插件的富動(dòng)畫。六、Canvas 對象將給瀏覽器帶來直接在上面繪制矢量圖的能力，這意味著用戶可以脫離Flash 和Silverlight，直接在瀏覽器中顯示圖形或動(dòng)畫。七、瀏覽器中的真正程序?qū)⑻峁?API 實(shí)現(xiàn)瀏覽器內(nèi)的編輯，拖放，以及各種圖形用戶界面的能力。內(nèi)容修飾Tag 將被剔除，而使用CSS。 第三節(jié) HTML5國內(nèi)外發(fā)展現(xiàn)狀國內(nèi)市場支持HTML5標(biāo)

18、準(zhǔn)的瀏覽器已經(jīng)從2010年的不到2%發(fā)展到2012年超過三成的比例，2013年這一比例將有望突破突破70%。越來越多PC瀏覽器開始重視并且支持HTML5發(fā)展的同時(shí)，HTML5也越來越受到移動(dòng)互聯(lián)網(wǎng)的重視。相對于 PC 平臺而言，移動(dòng)平臺一直是開發(fā)者更為關(guān)心的，因?yàn)橐苿?dòng)平臺瀏覽器品種較少，版本也普遍集中在最新正式版。同時(shí)，由于移動(dòng)設(shè)備的更新?lián)Q代速度要比 PC 更快，硬件支持和瀏覽器的狀況都要比 PC平臺的狀況更好。移動(dòng)平臺上主流的 5 款瀏覽器(iOS Safari 6.0、Android Browser 4.1、Opera Mobile 12.1、Chrome for Android 18.0

19、、Firefox for Android 15.0)，目前對標(biāo)準(zhǔn)的支持度均高于 60%。其中表現(xiàn)居首的是 Chrome for Android，而支持度相對較低的 Android 系統(tǒng)自帶的瀏覽器 Android Browser 對 HTML5 的支持度也在 60%以上。此外，硬件加速促進(jìn)了HTML5標(biāo)準(zhǔn)的發(fā)展和應(yīng)用。在使用 HTML5 開發(fā)時(shí)，開發(fā)者經(jīng)常會(huì)談到的一個(gè)問題就是性能。使用 HTML5 動(dòng)畫、Canvas、WebGL 究竟能否帶來更好的用戶體驗(yàn)，與其實(shí)際性能密不可分。目前國內(nèi)外主流瀏覽器均支持硬件加速，這對 HTML5 的發(fā)展無疑是個(gè)好消息?？梢灾С钟布铀俚臑g覽器版本有：Chro

20、me 18+、Firefox 4+、IE 9+、Safari 5.1+、Opera 12+。國內(nèi)的有360 安全瀏覽器、搜狗瀏覽器以及QQ 瀏覽器。手機(jī)系統(tǒng)情況也比較樂觀，主流的智能手機(jī)系統(tǒng) iOS、Android 以及 Windows Phone 上的原生瀏覽器都已經(jīng)支持硬件加速。Android 4.0+上的 Chrome在硬件加速方面更是超越了原生瀏覽器的表現(xiàn)。2012 年 12 月 17日，W3C 發(fā)布了 HTML5 以及 Canvas 2D 兩個(gè)標(biāo)準(zhǔn)的完全定義版本，標(biāo)志著 HTML5 的標(biāo)準(zhǔn)已經(jīng)在趨向穩(wěn)定。在2013年，支持 HTML5 的 PC 瀏覽器將會(huì)有一個(gè)較大的增長。 除Chr

21、ome、Firefox 之外，微軟推出的 IE9、IE10 對HTML5 的支持度都大幅提升，相信 HTML5 大面積使用只是時(shí)間問題。此外，移動(dòng)平臺的HTML5比PC平臺發(fā)展的更快。由于移動(dòng)設(shè)備的更新?lián)Q代速達(dá)遠(yuǎn)遠(yuǎn)超過PC，而且硬件性能也能夠完全支持HTML5。許多大公司在HTML5 Canvas開發(fā)上下足了功夫， 2013年或成為HTML5更普及的一年。 第四節(jié) 畫圖工具畫圖板簡單靈巧，深得廣大用戶的喜愛，其占用資源少、操作簡單、功能等特點(diǎn)為用戶的小型圖形開發(fā)工作帶來了很多便利。當(dāng)用戶要處理一些要求不是很高的工作時(shí)，可以利用畫圖的工具來完成，比如實(shí)現(xiàn)一些簡單的操作如畫直線，圖片，圖片圖片等功

22、能。用過微軟Windows操作系統(tǒng)的人一定都對Windows自帶的畫圖板非常的熟悉。同圖像處理軟件界的“大哥大”Photoshop比起來，它雖然不及Photoshop的功能強(qiáng)大、內(nèi)容豐富，但是作為Windows一直以來都內(nèi)帶的附件程序，它具有小巧玲瓏、簡單實(shí)用等其它繪圖軟件所不具備的優(yōu)點(diǎn)。同時(shí)它的風(fēng)格也被許多其它繪圖軟件所效仿。Windows 畫圖程序一直伴隨著 Windows 各個(gè)版本，這個(gè)很簡單，幾乎沒有什么用處的程序擁有最基本的繪圖功能，很適合用來涂鴉。HTML5 的 Canvas 對象使在線繪圖成為可能，雖然 HTML5 還遠(yuǎn)未成熟，但很多人已經(jīng)迫不及待地用它設(shè)計(jì)一些讓人驚嘆的應(yīng)用。第

23、二章 相關(guān)技術(shù)簡介第一節(jié) Canvas元素簡介Canvas元素最先由蘋果公司的Safari瀏覽器引入，后來Chrome和Firefox也都支持了這一元素，目前該元素已被加入HTML5標(biāo)準(zhǔn)的草案，并且得到了所有主流瀏覽器的支持。HTML5 的 Canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素。Canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。向 HTML5 頁面添加 Canvas 元素并規(guī)定元素的 ID、寬度和高度：這樣就可創(chuàng)建Canvas元素。第二節(jié) 第一個(gè)Canvas程序的實(shí)現(xiàn)HTML5 Canvas Demoback

24、這個(gè) Canvas 的寬度和高度均為 400 像素，邊框?yàn)辄S色，背景為藍(lán)色。Canvas 上沒有任何實(shí)際繪圖。繪圖通過屬于 Canvas 的 JavaScript 方法完成。下面我們介紹下Canvas的方法：表2.1 Canvas方法介紹方法用途getContext(contextId)公開在 Canvas 上繪圖需要的 API。惟一（當(dāng)前）可用的 contextID 是 2d。height設(shè)置 Canvas 的高度。默認(rèn)值是 150 像素。width設(shè)置 Canvas 的寬度。默認(rèn)值是 300 像素。createLinearGradient(x1,y1,x2,y2)創(chuàng)建一個(gè)線性漸變。起始坐標(biāo)

25、為 x1,y1，結(jié)束坐標(biāo)為 x2,y2。createRadialGradient(x1,y1,r1,x2,y2,r2)創(chuàng)建一個(gè)放射狀漸變。圓圈的起始坐標(biāo)是 x1,y1，半徑為 r1。圓圈的結(jié)束坐標(biāo)為 x2,y2，半徑為 r2。addColorStop(offset,color)向一個(gè)漸變添加一個(gè)顏色停止。顏色停止（color stop） 是漸變中顏色更改發(fā)生的位置。offset 必須介于 0 到 1 之間。fillStyle設(shè)置用于填充一個(gè)區(qū)域的顏色在這里就例如說，fillStyle=rgb(255,0,0).strokeStyle設(shè)置用于繪制一根直線的顏色在這里就例如說，fillStyle=

26、rgb(255,0,0).fillRect(x,y,w,h)填充一個(gè)定位于 x 和 y，寬度和高度分別為 w 和 h 的矩形。strokeRect(x,y,w,h)繪制一個(gè)定位于 x 和 y，寬度和高度分別為 w 和 h 的矩形的輪廓。moveTo(x,y)將繪圖位置移動(dòng)到坐標(biāo) x,y。lineTo(x,y)從繪圖方法結(jié)束的最后位置到 x,y 繪制一條直線。 Canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：var c=document.getElementById(mycanvas);var cxt=c.getContext(2d);cxt.fil

27、lStyle=#FF0000;cxt.fillRect (0, 0, 150, 75);JavaScript 使用 ID 來尋找 Canvas 元素：var c=document.getElementById(mycanvas);然后，創(chuàng)建 context 對象：var cxt=c.getContext(2d);getContext(2d) 對象是內(nèi)建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法，目前還沒有3d的對象。下面的兩行代碼繪制一個(gè)紅色的矩形：cxt.fillStyle=#FF0000;cxt.fillRect (0, 0, 150, 75);fillSt

28、yle 方法將方塊染成了紅色，fillRect 則方法規(guī)定了形狀、位置和尺寸。相類似的就可以通過瀏覽器提供的基礎(chǔ)方法，構(gòu)建出激動(dòng)人心的應(yīng)用。 第三節(jié) JavaScript及jQuery簡介JavaScript是一種由Netscape的LiveScript發(fā)展而來的原型化繼承的面向?qū)ο蟮膭?dòng)態(tài)類型的區(qū)分大小寫的客戶端腳本語言，主要目的是為了解決服務(wù)器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。當(dāng)時(shí)服務(wù)端需要對數(shù)據(jù)進(jìn)行驗(yàn)證，由于網(wǎng)絡(luò)速度相當(dāng)緩慢，只有28.8kbps，驗(yàn)證步驟浪費(fèi)的時(shí)間太多。于是Netscape的瀏覽器Navigator加入了JavaScript，提供了數(shù)據(jù)驗(yàn)證

29、的基本功能。由于AJAX的出現(xiàn)，JavaScript的功能被越來越多的豐富，能做的事情也越來越多，是Web2.0時(shí)代的象征。一個(gè)完整的 JavaScript 實(shí)現(xiàn)是由以下 3 個(gè)不同部分組成的：核心（ECMAScript）、文檔對象模型（Document Object Model，簡稱DOM）、瀏覽器對象模型（Browser Object Model，簡稱BOM）。JavaScript的一個(gè)重要功能就是面向?qū)ο蟮墓δ?，通過基于對象的程序設(shè)計(jì)，可以用更直觀、模塊化和可重復(fù)使用的方式進(jìn)行程序開發(fā)。jQuery是繼prototype之后又一個(gè)優(yōu)秀的JavaScript框架。它是輕量級的JS庫(壓縮后

30、只有21k) ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用戶能更方便地處理HTML documents、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的HTML頁面保持代碼和HTML內(nèi)容分離，也就是說，不用再在HTML里面插入一堆JS來調(diào)用命令了，只需定義id即可。如今，jQuery已經(jīng)成為最流行的JavaScript庫，在世界前10000個(gè)訪問最多的網(wǎng)

31、站中，有超過55%在使用jQuery。jQuery包含以下特點(diǎn)： 動(dòng)態(tài)特效； 異步的AJAX； 通過插件來擴(kuò)展； 方便的工具 - 例如瀏覽器版本判斷； 漸進(jìn)增強(qiáng)； 鏈?zhǔn)秸{(diào)用； 多瀏覽器支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+；jQuery庫是一個(gè)單獨(dú)的JavaScript文件，可以保存到本地或者服務(wù)器直接引用，也可以從多個(gè)公共服務(wù)器中選擇引用。有Media Temple、Google、Microsoft等多家公司給jQuery提供CDN服務(wù)，比較常用的引用地址如下：目前的版本是1.9.0（截止2013年1

32、月）。最常使用的jQuery基礎(chǔ)方法是.ready()方法：$(document).ready (function () /script goes here);或者其簡寫：$(function () /script goes here);當(dāng)DOM加載完就可以執(zhí)行（比window.onload更早），在同一個(gè)頁面里可以多次出現(xiàn).ready()。實(shí)例：為元素添加單擊事件，發(fā)生對象隱藏效果。 $(document).ready (function () $(p).click (function () $(this).hide (); );); If you click on me, I will d

33、isappear. 結(jié)果：隱藏頁面內(nèi)的標(biāo)簽。選擇器：jQuery 使用 sizzle引擎，支持CSS選取，Xpath選取等方式。以下列舉了幾個(gè)特征：$(p) 選取全部 元素；$(ro) 選取所有包含class為intro的 元素；$(#demo) 選取 id為demo 的元素；$(href) 選取所有帶有 href 屬性的元素；$(href=#) 選取所有帶有 href 值等于 # 的元素；$(href!=#) 選取所有帶有 href 值不等于 # 的元素；$(href$=.jpg) 選取所有 href 值以 .jpg 結(jié)尾的元素；$(href=/imgaes/) 選取所有 href

34、 值以 /imgaes/ 開頭的元素；更多詳細(xì)信息請參見jQuery API的Selectors部分。事件處理：直接綁定指定事件，事件類型即方法名，支持click、focus、blur、submit等。$(#button).click (function () /script goes here);用on來綁定事件，off來解綁事件，第一個(gè)參數(shù)為事件名，第二個(gè)參數(shù)為回調(diào)函數(shù)。1.7.2版本開始支持。$(#button).onclick (function ()/script goes here);在1.7.1或更早版本，需要用bind/unbind（常規(guī)綁定），live/die（預(yù)綁定）來替代

35、on/off。更多詳細(xì)信息請參見jQuery API的Events部分。動(dòng)態(tài)特效：$(#msg).show (fast);$(#msg).hide (slow);$(#msg).fadeIn ();$(#msg).fadeOut ();以上代碼實(shí)現(xiàn)一個(gè)ID為Msg的jQuery對象的漸入和淡出。函數(shù)接受的參數(shù)除了快慢等，還可以接收整型，作為漸入或淡出的完成時(shí)間，單位為MS。更多詳細(xì)信息請參見jQuery API的Effects部分。 第四節(jié) CSS3簡介 CSS即層疊樣式表（Cascading Stylesheet）。 在網(wǎng)頁制作時(shí)采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它

36、效果實(shí)現(xiàn)更加精確的控制。 只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。CSS3帶來無與倫比的頁面表現(xiàn)能力，而這些在以前只能靠圖片，多層的標(biāo)簽嵌套或者JS才能實(shí)現(xiàn)，現(xiàn)在只需要幾行CSS3就能實(shí)現(xiàn)，效率也比原來要高很多。一、布局Grid布局應(yīng)用很廣泛，最簡單的例子就是內(nèi)容的分欄顯

37、示。對于這個(gè)布局復(fù)雜的三欄網(wǎng)頁來說，如果使用CSS3Grid布局的話，我們只需這樣寫：body columns:3;column-gap:0.5in;img float:pagetopright;width:3gr;其中，body部分聲明頁面為3欄，欄間距為0.5英寸；img中float屬性指明圖片浮動(dòng)位置為頁面的右上角，而寬度為3個(gè)欄寬。只需這樣兩行CSS，就可以實(shí)現(xiàn)這個(gè)復(fù)雜布局。 二、邊框border-color：控制邊框顏色，并且有了更大的靈活性，可以產(chǎn)生漸變效果；border-image：控制邊框圖象；border-corner-image：控制邊框邊角的圖象；border-radiu

38、s：能產(chǎn)生類似圓角矩形的效果；三、背景background-origin：決定了背景在盒模型中的初始位置，提供了3個(gè)值，border, padding和content；border：控制背景起始于左上角的邊框；padding：控制背景起始于左上角的留白；content：控制背景起始于左上角的內(nèi)容；background-clip：決定邊框是否覆蓋住背景（默認(rèn)是不覆蓋），提供了兩個(gè)值，border和padding；border：會(huì)覆蓋住背景；padding：不會(huì)覆蓋背景；background-size：可以指定背景大小，以象素或百分比顯示。當(dāng)指定為百分比時(shí)，大小會(huì)由所在區(qū)域的寬度、高度，以及bac

39、kground-origin的位置決定；multiple backgrounds：多重背景圖象，可以把不同背景圖象只放到一個(gè)塊元素里。4、 特性 圓角表格，對應(yīng)屬性：border-radius。 以往對網(wǎng)頁上的文字加特效只能用filter這個(gè)屬性，這次CSS3中專門制訂了一個(gè)加文字特效的屬性，而且不止加陰影這種效果。對應(yīng)屬性：font-effect。 豐富了對鏈接下劃線的樣式，以往的下劃線都是直線，這次可不一樣了，有波浪線、點(diǎn)線、虛線等等，更可對下劃線的顏色和位置進(jìn)行任意改變。（還有對應(yīng)頂線和中橫線的樣式，效果與下劃線類似）對應(yīng)屬性：text-underline-style，text-unde

40、rline-color，text-underline-mode，text-underline-position。 在文字下點(diǎn)幾個(gè)點(diǎn)或打個(gè)圈以示重點(diǎn)，CSS3也開始加入了這項(xiàng)功能，這應(yīng)該在某些特定網(wǎng)頁上很有用。對應(yīng)屬性：font-emphasize-style和font-emphasize-position。五、顏色HSL colors：除了支持RGB顏色外，還支持HSL（色相、飽和度、亮度）。以前一般都是作圖的時(shí)候用HSL色譜，但這樣一來會(huì)包括更多的顏色。H用度表示，S和L用百分比表示，比如HSL（0,100%, 50%）。HSLA colors：加了個(gè)不透明度（Apacity），用0到1之間

41、的數(shù)來表示，比如hsla（0,100%,50%,0.2）。Opacity：直接控制不透明度，用0到1之間的數(shù)來表示。RGBA colors：和HSLA colors類似，加了個(gè)不透明度。一直以來，瀏覽器的透明一直無法實(shí)現(xiàn)單純的顏色透明，每次使用alpha后就會(huì)把透明的屬性繼承到子節(jié)點(diǎn)上。換句話說，很難實(shí)現(xiàn)背景顏色透明而文字不透明的效果。直到RGBA顏色的出現(xiàn)這一切將成為現(xiàn)實(shí)。實(shí)現(xiàn)這樣的效果非常簡單，設(shè)置顏色的時(shí)候我們使用標(biāo)準(zhǔn)的RGBA（）單位即可，例如RGBA（255,0,0,0.4）這樣就出現(xiàn)了一個(gè)紅色同時(shí)擁有alpha透明為0.4的顏色。經(jīng)過測試Firefox3.0、Safari3.2、O

42、pera10都支持了RGBA單位。Resize：可以由用戶自己調(diào)整DIV的大小，有horizontal（水平）vertical（垂直）或者both（同時(shí)），或者同時(shí)調(diào)整。如果再加上max-width或min-width的話還可以防止破壞布局。六、文字效果text-shadow：文字投影，可能是因?yàn)镸AC OSX的Safari瀏覽器開始支持投影才特意增加的。text-overflow：當(dāng)文字溢出時(shí)，用“”提示。包括ellipsis、clip、ellipsis-word、inherit，前兩個(gè)CSS2就有了，目前還是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一個(gè)

43、單詞，對中文意義不大，inherit可以繼承父級元素。七、選擇器CSS3增加了更多的CSS選擇器，可以實(shí)現(xiàn)更簡單但是更強(qiáng)大的功能，比如：nth-child()等。Attribute selectors：在屬性中可以加入通配符，包括,$,*等；att=val：表示開始字符是val的att屬性； att$=val：表示結(jié)束字符是val的att屬性；att*=val：表示包含至少有一個(gè)val的att屬性。其它模塊：media queries：感覺叫媒體選擇比較合適，可以為網(wǎng)頁中不同的對象設(shè)置不同的瀏覽設(shè)備比如可以為某一塊分別設(shè)置屏幕瀏覽樣式和手機(jī)瀏覽樣式，以前則只能設(shè)置整個(gè)網(wǎng)頁；multi-colu

44、mn layout：多列布局，讓文字以多列顯示，包括column-width、column-count、column-gap三個(gè)值；column-width：指定每列寬度；column-count：指定列數(shù)；column-gap：指定每列之間的間距；column-rule-color：控制列間的顏色；column-rule-style：控制列間的樣式；column-rule-width：控制列間的寬度；column-space-distribution：平均分配列間距。八、影響CSS3將完全向后兼容，所以沒有必要修改現(xiàn)在的設(shè)計(jì)來讓它們繼續(xù)運(yùn)作。網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。CSS3主要的影

45、響是將可以使用新的可用的選擇器和屬性，這些會(huì)允許實(shí)現(xiàn)新的設(shè)計(jì)效果（譬如動(dòng)態(tài)和漸變），而且可以很簡單的設(shè)計(jì)出現(xiàn)在的設(shè)計(jì)效果（比如說使用分欄）。 第五節(jié) 開發(fā)工具DreamWeaver介紹DreamWeaver是個(gè)原本由Macromedia公司所開發(fā)的著名網(wǎng)站開發(fā)工具。它使用所見即所得的接口，亦有HTML編輯的功能。它現(xiàn)在有Mac和Windows系統(tǒng)的版本。隨Macromedia被Adobe收購后，Adobe也開始計(jì)劃開發(fā)Linux版本的Dreamweaver了。 Dreamweaver自MX版本開始，使用了Opera的排版引擎 Presto 作為網(wǎng)頁預(yù)覽。Dreamweaver可以用最快速的方式

46、將Fireworks，F(xiàn)reeHand，或Photoshop等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁安全色。對于選單，快捷鍵與格式控制，都只要一個(gè)簡單步驟便可完成。Dreamweaver能與您喜愛的設(shè)計(jì)工具，如Playback Flash，Shockwave和外掛模組等搭配，不需離開Dreamweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動(dòng)開啟Firework或Photoshop來進(jìn)行編輯與設(shè)定圖檔的最佳化。Dreamweaver是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具。它包含Home

47、Site和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無法想像。進(jìn)階表格編輯功能使您簡單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，Dreamweaver 支援精準(zhǔn)定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進(jìn)行版面配置。所見即所得 Dreamweaver成功整合動(dòng)態(tài)式出版視覺編輯及電子商務(wù)功能，提供超強(qiáng)的支援能力給Third-party廠商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango與自行發(fā)展的應(yīng)用軟體。當(dāng)您正使用Dreamweaver在設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁時(shí)，所見即所得的功能，讓您不需要

48、透過瀏覽器就能預(yù)覽網(wǎng)頁。夢幻樣版和XML Dreamweaver將內(nèi)容與設(shè)計(jì)分開，應(yīng)用于快速網(wǎng)頁更新和團(tuán)隊(duì)合作網(wǎng)頁編輯。建立網(wǎng)頁外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會(huì)不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出XML內(nèi)容。 全方位的呈現(xiàn)利用Dreamweaver設(shè)計(jì)的網(wǎng)頁，可以全方位的呈現(xiàn)在任何平臺的熱門瀏覽器上。對于cascading style sheets的動(dòng)態(tài)HTML支援和鼠標(biāo)換圖效果，聲音和動(dòng)畫的DHTML效果資料庫可在Netscape和Microsoft瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能，Dreamweaver可以告知您在不同

49、瀏覽器上執(zhí)行的成效如何。當(dāng)有新的瀏覽器上市時(shí)，只要從Dreamweaver的網(wǎng)站在下載它的描述檔，便可得知詳盡的成效報(bào)告。第六節(jié) 調(diào)試工具Firefox及Firebug簡介Firefox（火狐）是一款著名的瀏覽器軟件，由美國Mozilla與開源團(tuán)體共同開發(fā)。Firefox適用于Windows、Linux和MacOS X平臺，它體積小速度快，主要特性有：自由開源、標(biāo)簽式瀏覽、安全保護(hù)、立體搜索等。Firefox從發(fā)行初期就開始屢獲殊榮，下載數(shù)量持續(xù)增加，市場占有率不斷攀高。根據(jù)Netapplication調(diào)研網(wǎng)站的最新數(shù)據(jù)，到2012年10月份，F(xiàn)irefox在全球的市場占有率達(dá)到19.99%。

50、Firefox在剛推出的時(shí)候是世界上最先進(jìn)的瀏覽器，當(dāng)時(shí)出現(xiàn)了很多網(wǎng)頁都只支持Firefox瀏覽器，以至于其他瀏覽器為了適應(yīng)這些網(wǎng)站，直到現(xiàn)在，幾乎所有的UserAgent都以Mozilla/5.0開頭。Firebug是網(wǎng)頁瀏覽器 Mozilla Firefox 下的一款開發(fā)類插件，現(xiàn)屬于Firefox的五星級強(qiáng)力推薦插件之一。它集HTML查看和編輯、JavaScript控制臺、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開發(fā)JavaScript、CSS、HTML和AJAX的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個(gè)不同的角度剖析Web頁面內(nèi)部的細(xì)節(jié)層面，給Web開發(fā)者帶來很大的便利。例如 Yahoo

51、! 的網(wǎng)頁速度優(yōu)化建議工具 YSlow。Firebug也是一個(gè)除錯(cuò)工具。用戶可以利用它除錯(cuò)、編輯、甚至刪改任何網(wǎng)站的 CSS、HTML、DOM 以及JavaScript 代碼。Firebug的CSS調(diào)試器是專為網(wǎng)頁設(shè)計(jì)師們量身定做的。如今的網(wǎng)頁設(shè)計(jì)言必稱DIV+CSS，如果你是用Table套出來的HTML頁面，就得按這規(guī)矩重構(gòu)一遍，否則顯得你不夠時(shí)髦！用DIV做出來的頁面的確能精簡HTML代碼，HTML標(biāo)簽減肥的結(jié)果就是CSS樣式表的編寫成了頁面制作的重頭戲。Firebug的CSS查看器不僅自下向上列出每一個(gè)CSS樣式表的從屬繼承關(guān)系，還列出了每一個(gè)樣式在哪個(gè)樣式文件中定義。你可以在這個(gè)查看器

52、中直接添加、修改、刪除一些CSS樣式表屬性，并在當(dāng)前頁面中直接看到修改后的結(jié)果。也許有一天，你的老板或者客戶找到你，抱怨你制作的網(wǎng)頁速度奇慢，你該如何應(yīng)對？你或許會(huì)說這可能是網(wǎng)絡(luò)問題，或者是電腦配置問題，或者是程序太慢，或者直說是他們的人品問題？不管怎么說，最后你可能被要求去解決這個(gè)有多種可能的問題。 網(wǎng)絡(luò)狀況監(jiān)視器能幫你解決這個(gè)棘手問題。Firebug的網(wǎng)絡(luò)監(jiān)視器同樣是功能強(qiáng)大的，它能將頁面中的CSS、JavaScript以及網(wǎng)頁中引用的圖片載入所消耗的時(shí)間以矩狀圖呈現(xiàn)出來，也許在這里你能一把揪出拖慢了你的網(wǎng)頁的元兇，進(jìn)而對網(wǎng)頁進(jìn)行調(diào)優(yōu)，最后老板滿意客戶歡喜，你的飯碗也因此而牢固。Fireb

53、ug的JavaScript調(diào)試器是一個(gè)很不錯(cuò)的JavaScript腳本調(diào)試器，占用空間不大，但是單步調(diào)試、設(shè)置斷點(diǎn)、變量查看窗口一個(gè)不少。正所謂麻雀雖小，五臟俱全。如果你有一個(gè)網(wǎng)站已經(jīng)建成，然而它的JavaScript有性能上的問題或者不是太完美，可以通過面板上的Profile來統(tǒng)計(jì)每段腳本運(yùn)行的時(shí)間，查看到底是哪些語句執(zhí)行時(shí)間過長，一步步的來排除問題?？刂婆_能夠顯示當(dāng)前頁面中的JavaScript錯(cuò)誤以及警告，并提示出錯(cuò)的文件和行號，方便調(diào)試，這些錯(cuò)誤提示比起瀏覽器本身提供的錯(cuò)誤提示更加詳細(xì)且具有參考價(jià)值。而且在調(diào)試AJAX應(yīng)用的時(shí)候也是特別有用，你能夠在控制臺里看到每一個(gè)XMLHttpRequests請求post出去的參數(shù)、URL，HTTP頭以及回饋的內(nèi)容，原本似乎在幕后黑匣子里運(yùn)作的程序被清清楚楚地展示在你面前。第一次看到Firebug強(qiáng)大的HTML代碼查看器，就覺得它與眾不同，相比于Firefox自帶的HTML查看器，它的功能強(qiáng)大了許多。DOM(Document Object Mode