關(guān)于HTML5的網(wǎng)頁(yè)設(shè)計(jì)實(shí)現(xiàn)分析

1、-. z.信息商務(wù)學(xué)院網(wǎng)頁(yè)制作技巧與實(shí)戰(zhàn)大作業(yè)題目：關(guān)于HTML5的網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)院(系)別建筑工程系專(zhuān)業(yè)工程造價(jià)班級(jí) ZB造價(jià)161 * 8 *王非指導(dǎo)教師董智勇2016年11月27日目錄關(guān)于HTML5的網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)一、引言及什么是html5二、網(wǎng)頁(yè)制作7 TOC o 1-3 h z u HYPERLINK l _Toc468027172一、制作步驟 PAGEREF _Toc468027172 h 3HYPERLINK l _Toc468027173頁(yè)面的制作，首先在根據(jù)客戶的要求下，完成首頁(yè)的制作，在經(jīng)客戶確定后，再制作其他的頁(yè)面，制作完成后，交給客戶驗(yàn)收，然后發(fā)給客戶確定，待所有的頁(yè)面

2、的都經(jīng)客戶確定后，完成網(wǎng)頁(yè)的制作進(jìn)程，交給程序員添加程序。 PAGEREF _Toc468027173 h 3HYPERLINK l _Toc468027174二、網(wǎng)頁(yè)布局 PAGEREF _Toc468027174 h 3HYPERLINK l _Toc468027175三、常用工具介紹 PAGEREF _Toc468027175 h 3HYPERLINK l _Toc468027176三、HTML5的改良特性 PAGEREF _Toc468027176 h 3HYPERLINK l _Toc468027177一HTML5新元素 PAGEREF _Toc468027177 h 3HYPERL

3、INK l _Toc468027178二異常處理 PAGEREF _Toc468027178 h 3HYPERLINK l _Toc468027179四、完畢語(yǔ) PAGEREF _Toc468027179 h 3摘要隨著Internet的誕生和開(kāi)展，許多人不再僅僅局限于網(wǎng)上沖浪，而是參與到建立中。企業(yè)建站相當(dāng)于在網(wǎng)上建立一個(gè)家，你就可以在這里向客戶介紹你的企業(yè)，展示你的實(shí)力，推銷(xiāo)你的產(chǎn)品，網(wǎng)頁(yè)制作作為制作中一個(gè)重要的環(huán)節(jié)，相對(duì)于傳統(tǒng)的平面設(shè)計(jì)而言，網(wǎng)頁(yè)設(shè)計(jì)具有更多的新穎性，更多可以表現(xiàn)的手法。結(jié)合本人的實(shí)習(xí)過(guò)程，現(xiàn)就建立與管理過(guò)程中，網(wǎng)頁(yè)設(shè)計(jì)與制作的具體經(jīng)歷，包括：網(wǎng)頁(yè)設(shè)計(jì)與制作過(guò)程中的網(wǎng)頁(yè)布

4、局、色彩構(gòu)置，框架構(gòu)造等相關(guān)事項(xiàng)做以下論述。關(guān)鍵詞:HTML5;網(wǎng)頁(yè)制作;HBuilder-. z.一、引言隨著互聯(lián)網(wǎng)的不斷開(kāi)展，互聯(lián)網(wǎng)對(duì)人們的生活也在不斷地開(kāi)展和加強(qiáng)，人們漸漸開(kāi)場(chǎng)習(xí)慣于互聯(lián)網(wǎng)帶來(lái)的各類(lèi)效勞和應(yīng)用，便利和豐富。隨著互聯(lián)網(wǎng)的根底用戶和開(kāi)發(fā)者不斷增多，人們不斷地去創(chuàng)造和完善它的速度也越來(lái)越快，無(wú)論從技術(shù)層面還是商業(yè)層面，新的模式和方法層出不窮，整個(gè)行業(yè)新代不斷加速，新的應(yīng)用和新的公司不斷地挑戰(zhàn)著新的技術(shù)和新的模式。畢竟整個(gè)互聯(lián)網(wǎng)是一個(gè)開(kāi)放的環(huán)境，大家需要一種標(biāo)準(zhǔn)，所以HTML5這種更加新的標(biāo)準(zhǔn)和技術(shù)體系在不斷地革新中開(kāi)展壯大。HTML5成為不斷被提及的熱門(mén)話題，不少人預(yù)言HTML

5、5的開(kāi)展將給移動(dòng)互聯(lián)網(wǎng)產(chǎn)業(yè)帶來(lái)革命性的深刻變化。HTML5是幾十年來(lái)Web標(biāo)準(zhǔn)最巨大的飛躍。和以前的版本不同，HTML5并非僅僅用來(lái)表示W(wǎng)eb容，它的使命是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)，在這個(gè)平臺(tái)上，視頻、音頻、圖像和動(dòng)畫(huà)，以及同電腦的交互都被標(biāo)準(zhǔn)化。盡管HTML5還有很長(zhǎng)的路要走，但HTML5正在改變Web。另外，目前的互聯(lián)網(wǎng)不僅僅是傳統(tǒng)意義上面的互聯(lián)網(wǎng)，所有的傳統(tǒng)應(yīng)用和模式正在向著更加移動(dòng)和便捷開(kāi)展，人們可以通過(guò)手機(jī)和平板電腦等各類(lèi)移動(dòng)設(shè)備來(lái)獲取信息和使用更加豐富的應(yīng)用。什么是HTML5？HTML5 將成為 HTML、*HTML 以及 HTML DOM 的新標(biāo)準(zhǔn)。HTML 的上一個(gè)版本誕

6、生于 1999 年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。HTML5 仍處于完善之中。然而，大局部現(xiàn)代瀏覽器已經(jīng)具備了*些 HTML5 支持。HTML5 是如何起步的？HTML5 是 W3C 與 WHATWG 合作的結(jié)果。W3C 指 World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟。WHATWG 指 Web Hyperte*t Application Technology Working Group。WHATWG 致力于 web 表單和應(yīng)用程序，而 W3C 專(zhuān)注于 *HTML 2.0。在 2006 年，雙方?jīng)Q定進(jìn)展合作，來(lái)創(chuàng)立一個(gè)新版本的 HTML。-. z.二、網(wǎng)頁(yè)制作一、制

7、作步驟是網(wǎng)頁(yè)的集合，一個(gè)站點(diǎn)用的所有網(wǎng)頁(yè)構(gòu)成一個(gè)，網(wǎng)頁(yè)是的表現(xiàn)形式，網(wǎng)頁(yè)設(shè)計(jì)是指對(duì)整體頁(yè)面的設(shè)計(jì)，包括頁(yè)面風(fēng)格、配色、布局、容等。網(wǎng)頁(yè)設(shè)計(jì)包含的容非常多，大體分為兩個(gè)方面：一方面是純本身的設(shè)計(jì)，如文字、排版、圖片制作、平面設(shè)計(jì)、靜態(tài)圖文和動(dòng)態(tài)聲音、影像等；另一方面是的延伸設(shè)計(jì)，包括主題、瀏覽群的定位、智能交互、制作籌劃、形象包裝和宣傳營(yíng)銷(xiāo)等。設(shè)計(jì)頁(yè)面的第一步就是設(shè)計(jì)片面布局，就像報(bào)刊雜志版面設(shè)計(jì)一樣，我們可以看作一報(bào)約或者一份雜志來(lái)進(jìn)展排版布局。1. 草稿新頁(yè)面就像一白紙，沒(méi)有任何的約定俗成的東西，可以盡可能地發(fā)揮想象力、創(chuàng)造力，將想象的布局到上面去。這是原創(chuàng)階段，你不必講究細(xì)膩工整，你也可在

8、草稿本上先畫(huà)出整個(gè)布局框架，把多個(gè)版塊的位置先粗略的布置上去以往下一步工作的展示，這一步也可以借住PHOTOSHOP或其他工具軟件來(lái)完成。2. 粗略布局在草稿的根底上，將需要的功能模塊放到頁(yè)面上去，這時(shí)要遵循突出重點(diǎn)、整體協(xié)調(diào)的原則，首先將標(biāo)志、導(dǎo)航條、廣告條等最主要的模塊放在最突出位置，然后考慮其他模塊的布局。3. 定稿定稿即將粗略布局精細(xì)化、具體化，完成整個(gè)頁(yè)面的設(shè)計(jì)。頁(yè)面的制作，首先在根據(jù)客戶的要求下，完成首頁(yè)的制作，在經(jīng)客戶確定后，再制作其他的頁(yè)面，制作完成后，交給客戶驗(yàn)收，然后發(fā)給客戶確定，待所有的頁(yè)面的都經(jīng)客戶確定后，完成網(wǎng)頁(yè)的制作進(jìn)程，交給程序員添加程序。二、網(wǎng)頁(yè)布局常見(jiàn)網(wǎng)頁(yè)版式

9、布局構(gòu)造有以下幾種：兩欄式構(gòu)造，即頁(yè)面頂部為標(biāo)志或廣告條，下面分為左右兩欄，一般左欄式導(dǎo)航或分類(lèi)信息，右欄為主要容，這種布局很容易掌握，但如果在色彩上不加以注意的，很容易給人一種乏味的感覺(jué)。三欄式構(gòu)造是一些大型常用的布局構(gòu)造，一般為上面是橫幅的廣告條，下面分為三豎欄，中間較大，是主要的信息，左右是小條容或者廣告條。三欄式給人一種充實(shí)的感覺(jué)，但頁(yè)面擁擠，不夠靈活，是常用的一種布局形式。三型構(gòu)造，這種構(gòu)造多用于國(guó)外或者視頻類(lèi)，其特點(diǎn)是分類(lèi)清晰，展示方便。左右框架型，是企業(yè)或論壇常用的布局，頁(yè)面分為左右兩局部，左邊一般為導(dǎo)航局部，右邊是與導(dǎo)航相對(duì)應(yīng)的容。左右框架型的結(jié)果非常清晰，容一目了然，便于信息

10、的查詢(xún)。上下框架型與左右框架型類(lèi)似，其區(qū)別僅僅在于形式。頁(yè)面整體為橫向分布，上面為導(dǎo)航，中間的大展式窗口很突出，整個(gè)顯得簡(jiǎn)潔明亮，這種構(gòu)造適合于信息量不大，主要靠圖片展示容的。Flash型主要采用現(xiàn)在流行的Flash技術(shù)，頁(yè)面表達(dá)的容較為豐富，給人視覺(jué)和聽(tīng)覺(jué)上很大的沖擊，處理得當(dāng)會(huì)到達(dá)Web頁(yè)面難以到達(dá)的效果。三、常用工具介紹用來(lái)制作效果圖的軟件并沒(méi)有明確的規(guī)定。可以使用各種圖形制作軟件和處理軟件，現(xiàn)在通常使用的軟件是PHOTOSHOOP和FIREWORKS。在制作效果圖時(shí)，使用的軟件對(duì)最終結(jié)果并沒(méi)有什么影響，用自己精通的即可。HBuilder是一款非常好用的平面設(shè)計(jì)軟件。由Adobe公司開(kāi)發(fā)

11、設(shè)計(jì)，其用戶界面易懂、功能完善、性能穩(wěn)定，是比擬專(zhuān)業(yè)的圖像處理軟件，它具有強(qiáng)大的濾鏡功能。所以，在很多的的廣告、出版、軟件公司，HBuilder都是首選的平面工具，它有很多的快捷方式，如抓手工具H鍵，TABLE鍵切換顯示或隱藏所有的控制板，D鍵、*鍵迅速切換前風(fēng)光和背風(fēng)光等，靈活的運(yùn)用快捷鍵，可以使設(shè)計(jì)的速度大大提高。Fireworks是網(wǎng)頁(yè)開(kāi)發(fā)圖形處理工具，可以做出矢量的圖形，主要是和Dreamweaver配合做網(wǎng)頁(yè)。對(duì)處理一般的網(wǎng)頁(yè)圖片比擬實(shí)用，而且學(xué)起來(lái)也比Photoshop易上手，是一個(gè)入門(mén)級(jí)的網(wǎng)頁(yè)設(shè)計(jì)軟件。-. z.三、HTML5的改良特性一HTML5新元素HTML5提供了一些新的元

12、素和屬性，例如導(dǎo)航塊和。這種標(biāo)簽將有利于搜索引擎的索引整理，同時(shí)更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如和標(biāo)記。1.取消了一些過(guò)時(shí)的HTML4標(biāo)記其中包括純粹顯示效果的標(biāo)記，如和，它們已經(jīng)被CSS取代。HTML5 吸取了*HTML2 一些建議，包括一些用來(lái)改善文檔構(gòu)造的功能，比方，新的HTML 標(biāo)簽 header, footer, dialog, aside, figure 等的使用，將使容創(chuàng)作者更加語(yǔ)義地創(chuàng)立文檔，之前的開(kāi)發(fā)者在實(shí)現(xiàn)這些功能時(shí)一般都是使用div。2.將容和展示別離b 和 i 標(biāo)簽依然保存，但它們的意義已經(jīng)和之前有所不同，這些標(biāo)簽的意義只

13、是為了將一段文字標(biāo)識(shí)出來(lái)，而不是為了為它們?cè)O(shè)置粗體或斜體式樣。u，font，center，strike 這些標(biāo)簽則被完全去掉了。3.一些全新的表單輸入對(duì)象包括日期，URL，Email 地址，其它的對(duì)象則增加了對(duì)非拉丁字符的支持。HTML5 還引入了微數(shù)據(jù)，這一使用機(jī)器可以識(shí)別的標(biāo)簽標(biāo)注容的方法，使語(yǔ)義Web 的處理更為簡(jiǎn)單?？偟膩?lái)說(shuō)，這些與構(gòu)造有關(guān)的改良使容創(chuàng)立者可以創(chuàng)立更干凈，更容易管理的網(wǎng)頁(yè)，這樣的網(wǎng)頁(yè)對(duì)搜索引擎，對(duì)讀屏軟件等更為友好。4.全新的，更合理的Tag 多媒體對(duì)象將不再全部綁定在 object 或 embed Tag 中，而是視頻有視頻的Tag，音頻有音頻的 Tag。5.本地?cái)?shù)據(jù)

14、庫(kù)這個(gè)功能將嵌一個(gè)本地的SQL 數(shù)據(jù)庫(kù)，以加速交互式搜索，緩存以及索引功能。同時(shí)，那些離線Web 程序也將因此獲益匪淺。不需要插件的富動(dòng)畫(huà)。6.Canvas 對(duì)象將給瀏覽器帶來(lái)直接在上面繪制矢量圖的能力，這意味著用戶可以脫離Flash 和Silverlight，直接在瀏覽器中顯示圖形或動(dòng)畫(huà)。7.瀏覽器中的真正程序?qū)⑻峁?API 實(shí)現(xiàn)瀏覽器的編輯，拖放，以及各種圖形用戶界面的能力。容修飾Tag 將被剔除，而使用CSS。Html5取代Flash在移動(dòng)設(shè)備的地位。二異常處理HTML 5(te*t/html)瀏覽器將在錯(cuò)誤語(yǔ)法的處理上更加靈活。HTML 5在設(shè)計(jì)時(shí)保證舊的瀏覽器能夠平安的忽略掉新的HTML 5代碼。與HTML 4.01相比