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

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

2、的都經(jīng)客戶確定后，完成網(wǎng)頁的制作進(jìn)程，交給程序員添加程序。 PAGEREF _Toc468027173 h 3HYPERLINK l _Toc468027174二、網(wǎng)頁布局 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四、完畢語 PAGEREF _Toc468027179 h 3摘要隨著Internet的誕生和開展，許多人不再僅僅局限于網(wǎng)上沖浪，而是參與到建立中。企業(yè)建站相當(dāng)于在網(wǎng)上建立一個家，你就可以在這里向客戶介紹你的企業(yè)，展示你的實力，推銷你的產(chǎn)品，網(wǎng)頁制作作為制作中一個重要的環(huán)節(jié)，相對于傳統(tǒng)的平面設(shè)計而言，網(wǎng)頁設(shè)計具有更多的新穎性，更多可以表現(xiàn)的手法。結(jié)合本人的實習(xí)過程，現(xiàn)就建立與管理過程中，網(wǎng)頁設(shè)計與制作的具體經(jīng)歷，包括：網(wǎng)頁設(shè)計與制作過程中的網(wǎng)頁布

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

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

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

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

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

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

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

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

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

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

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