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

信息商務(wù)學(xué)院網(wǎng)頁制作技巧與實戰(zhàn)大作業(yè)題目：關(guān)于HTML5的網(wǎng)頁設(shè)計與實現(xiàn)院(系)別建筑工程系專業(yè)工程造價班級ZB造價161學(xué)號201611032128姓名王非指導(dǎo)教師董智勇2016年11月27日目錄關(guān)于HTML5的網(wǎng)頁設(shè)計與實現(xiàn)一、引言及什么是html 5二、網(wǎng)頁制作7（一）、制作步驟 7頁面的制作，首先在根據(jù)客戶的要求下，完成首頁的制作，在經(jīng)客戶確定后，再制作其他的頁面，制作完成后，交給客戶驗收，然后發(fā)給客戶確定，待所有的頁面的都經(jīng)客戶確定后，完成網(wǎng)頁的制作進程，交給程序員添加程序。 8（二）、網(wǎng)頁布局 8（三）、常用工具介紹 9三、HTML5的改進特性 10（一）HTML5新元素 10（二）異常處理 11四、結(jié)束語 12摘要隨著Internet的誕生和發(fā)展，許多人不再僅僅局限于網(wǎng)上沖浪，而是參與到網(wǎng)站建設(shè)中。企業(yè)建站相當(dāng)于在網(wǎng)上建立一個家，你就可以在這里向客戶介紹你的企業(yè)，展示你的實力，推銷你的產(chǎn)品，網(wǎng)頁制作作為網(wǎng)站制作中一個重要的環(huán)節(jié)，相對于傳統(tǒng)的平面設(shè)計而言，網(wǎng)頁設(shè)計具有更多的新穎性，更多可以表現(xiàn)的手法。結(jié)合本人的實習(xí)過程，現(xiàn)就網(wǎng)站建設(shè)與管理過程中，網(wǎng)頁設(shè)計與制作的具體經(jīng)歷，包括：網(wǎng)頁設(shè)計與制作過程中的網(wǎng)頁布局、色彩構(gòu)置，框架結(jié)構(gòu)等相關(guān)事項做以下論述。關(guān)鍵詞:HTML5;網(wǎng)頁制作;HBuilder一、引言隨著互聯(lián)網(wǎng)的不斷發(fā)展，互聯(lián)網(wǎng)對人們的生活也在不斷地發(fā)展和加強，人們漸漸開始習(xí)慣于互聯(lián)網(wǎng)帶來的各類服務(wù)和應(yīng)用，便利和豐富。隨著互聯(lián)網(wǎng)的基礎(chǔ)用戶和開發(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ù)體系在不斷地革新中發(fā)展壯大。HTML5成為不斷被提及的熱門話題，不少人預(yù)言HTML5的發(fā)展將給移動互聯(lián)網(wǎng)產(chǎn)業(yè)帶來革命性的深刻變化。HTML5是幾十年來Web標(biāo)準(zhǔn)最巨大的飛躍。和以前的版本不同，HTML5并非僅僅用來表示W(wǎng)eb內(nèi)容，它的使命是將Web帶入一個成熟的應(yīng)用平臺，在這個平臺上，視頻、音頻、圖像和動畫，以及同電腦的交互都被標(biāo)準(zhǔn)化。盡管HTML5還有很長的路要走，但HTML5正在改變Web。另外，目前的互聯(lián)網(wǎng)不僅僅是傳統(tǒng)意義上面的互聯(lián)網(wǎng)，所有的傳統(tǒng)應(yīng)用和模式正在向著更加移動和便捷發(fā)展，人們可以通過手機和平板電腦等各類移動設(shè)備來獲取信息和使用更加豐富的應(yīng)用。什么是HTML5？HTML5將成為HTML、XHTML以及HTMLDOM的新標(biāo)準(zhǔn)。HTML的上一個版本誕生于1999年。自從那以后，Web世界已經(jīng)經(jīng)歷了巨變。HTML5仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些HTML5支持。HTML5是如何起步的？HTML5是W3C與WHATWG合作的結(jié)果。W3C指WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟。WHATWG指WebHypertextApplicationTechnologyWorkingGroup。WHATWG致力于web表單和應(yīng)用程序，而W3C專注于XHTML2.0。在2006年，雙方?jīng)Q定進行合作，來創(chuàng)建一個新版本的HTML。二、網(wǎng)頁制作（一）、制作步驟網(wǎng)站是網(wǎng)頁的集合，一個站點用的所有網(wǎng)頁構(gòu)成一個網(wǎng)站，網(wǎng)頁是網(wǎng)站的表現(xiàn)形式，網(wǎng)頁設(shè)計是指對網(wǎng)站整體頁面的設(shè)計，包括頁面風(fēng)格、配色、布局、內(nèi)容等。網(wǎng)頁設(shè)計包含的內(nèi)容非常多，大體分為兩個方面：一方面是純網(wǎng)站本身的設(shè)計，如文字、排版、圖片制作、平面設(shè)計、靜態(tài)圖文和動態(tài)聲音、影像等；另一方面是網(wǎng)站的延伸設(shè)計，包括網(wǎng)站主題、瀏覽群的定位、智能交互、制作策劃、形象包裝和宣傳營銷等。設(shè)計頁面的第一步就是設(shè)計片面布局，就像報刊雜志版面設(shè)計一樣，我們可以看作一張報約或者一份雜志來進行排版布局。1.草稿新頁面就像一張白紙，沒有任何的約定俗成的東西，可以盡可能地發(fā)揮想象力、創(chuàng)造力，將想象的布局到上面去。這是原創(chuàng)階段，你不必講究細(xì)膩工整，你也可在草稿本上先畫出整個布局框架，把多個版塊的位置先粗略的布置上去以往下一步工作的展示，這一步也可以借住PHOTOSHOP或其他工具軟件來完成。2.粗略布局在草稿的基礎(chǔ)上，將需要的功能模塊放到頁面上去，這時要遵循突出重點、整體協(xié)調(diào)的原則，首先將網(wǎng)站標(biāo)志、導(dǎo)航條、廣告條等最主要的模塊放在最突出位置，然后考慮其他模塊的布局。3.定稿定稿即將粗略布局精細(xì)化、具體化，完成整個頁面的設(shè)計。頁面的制作，首先在根據(jù)客戶的要求下，完成首頁的制作，在經(jīng)客戶確定后，再制作其他的頁面，制作完成后，交給客戶驗收，然后發(fā)給客戶確定，待所有的頁面的都經(jīng)客戶確定后，完成網(wǎng)頁的制作進程，交給程序員添加程序。（二）、網(wǎng)頁布局常見網(wǎng)頁版式布局結(jié)構(gòu)有以下幾種：兩欄式結(jié)構(gòu)，即頁面頂部為網(wǎng)站標(biāo)志或廣告條，下面分為左右兩欄，一般左欄式導(dǎo)航或分類信息，右欄為主要內(nèi)容，這種布局很容易掌握，但如果在色彩上不加以注意的，很容易給人一種“乏味”的感覺。三欄式結(jié)構(gòu)是一些大型網(wǎng)站常用的布局結(jié)構(gòu)，一般為上面是橫幅的廣告條，下面分為三豎欄，中間較大，是主要的信息，左右是小條內(nèi)容或者廣告條。三欄式給人一種充實的感覺，但頁面擁擠，不夠靈活，是網(wǎng)站常用的一種布局形式?！叭毙徒Y(jié)構(gòu)，這種結(jié)構(gòu)多用于國外網(wǎng)站或者視頻類網(wǎng)站，其特點是分類清晰，展示方便。左右框架型，是企業(yè)網(wǎng)站或論壇常用的布局，頁面分為左右兩部分，左邊一般為導(dǎo)航部分，右邊是與導(dǎo)航相對應(yīng)的內(nèi)容。左右框架型的結(jié)果非常清晰，內(nèi)容一目了然，便于信息的查詢。上下框架型與左右框架型類似，其區(qū)別僅僅在于形式。頁面整體為橫向分布，上面為導(dǎo)航，中間的大展式窗口很突出，整個網(wǎng)站顯得簡潔明亮，這種結(jié)構(gòu)適合于信息量不大，主要靠圖片展示內(nèi)容的網(wǎng)站。Flash型主要采用現(xiàn)在流行的Flash技術(shù)，頁面表達的內(nèi)容較為豐富，給人視覺和聽覺上很大的沖擊，處理得當(dāng)會達到Web頁面難以達到的效果。（三）、常用工具介紹用來制作效果圖的軟件并沒有明確的規(guī)定?？梢允褂酶鞣N圖形制作軟件和處理軟件，現(xiàn)在通常使用的軟件是PHOTOSHOOP和FIREWORKS。在制作效果圖時，使用的軟件對最終結(jié)果并沒有什么影響，用自己精通的即可。HBuilder是一款非常好用的平面設(shè)計軟件。由Adobe公司開發(fā)設(shè)計，其用戶界面易懂、功能完善、性能穩(wěn)定，是比較專業(yè)的圖像處理軟件，它具有強大的濾鏡功能。所以，在很多的的廣告、出版、軟件公司，HBuilder都是首選的平面工具，它有很多的快捷方式，如抓手工具H鍵，TABLE鍵切換顯示或隱藏所有的控制板，D鍵、X鍵迅速切換前景色和背景色等，靈活的運用快捷鍵，可以使設(shè)計的速度大大提高。Fireworks是網(wǎng)頁開發(fā)圖形處理工具，可以做出矢量的圖形，主要是和Dreamweaver配合做網(wǎng)頁。對處理一般的網(wǎng)頁圖片比較實用，而且學(xué)起來也比Photoshop易上手，是一個入門級的網(wǎng)頁設(shè)計軟件。三、HTML5的改進特性（一）HTML5新元素HTML5提供了一些新的元素和屬性，例如<nav>（網(wǎng)站導(dǎo)航塊）和<footer>。這種標(biāo)簽將有利于搜索引擎的索引整理，同時更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如<audio>和<video>標(biāo)記。1.取消了一些過時的HTML4標(biāo)記其中包括純粹顯示效果的標(biāo)記，如<font>和<center>，它們已經(jīng)被CSS取代。HTML5吸取了XHTML2一些建議，包括一些用來改善文檔結(jié)構(gòu)的功能，比如，新的HTML標(biāo)簽header,footer,dialog,aside,figure等的使用，將使內(nèi)容創(chuàng)作者更加語義地創(chuàng)建文檔，之前的開發(fā)者在實現(xiàn)這些功能時一般都是使用div。2.將內(nèi)容和展示分離b和i標(biāo)簽依然保留，但它們的意義已經(jīng)和之前有所不同，這些標(biāo)簽的意義只是為了將一段文字標(biāo)識出來，而不是為了為它們設(shè)置粗體或斜體式樣。u，font，center，strike這些標(biāo)簽則被完全去掉了。3.一些全新的表單輸入對象包括日期，URL，Email地址，其它的對象則增加了對非拉丁字符的支持。HTML5還引入了微數(shù)據(jù)，這一使用機器可以識別的標(biāo)簽標(biāo)注內(nèi)容的方法，使語義Web的處理更為簡單?？偟膩碚f，這些與結(jié)構(gòu)有關(guān)的改進使內(nèi)容創(chuàng)建者可以創(chuàng)建更干凈，更容易管理的網(wǎng)頁，這樣的網(wǎng)頁對搜索引擎，對讀屏軟件等更為友好。4.全新的，更合理的Tag多媒體對象將不再全部綁定在object或embedTag中，而是視頻有視頻的Tag，音頻有音頻的Tag。5.本地數(shù)據(jù)庫這個功能將內(nèi)嵌一個本地的SQL數(shù)據(jù)庫，以加速交互式搜索，緩存以及索引功能。同時，那些離線Web程序也將因此獲益匪淺。不需要插件的富動畫。6.Canvas對象將給瀏覽器帶來直接在上面繪制矢量圖的能力，這意味著用戶可以脫離Flash和Silverlight，直接在瀏覽器中顯示圖形或動畫。7.瀏覽器中的真正程序?qū)⑻峁〢PI實現(xiàn)瀏覽器內(nèi)的編輯，拖放，以及各種圖形用戶界面的能力。內(nèi)容修飾Tag將被剔除，而使用CSS。Html5取代Flash在移動設(shè)備的地位。（二）異常處理HTML5(text/html)瀏覽器將在錯誤語法的處理上更加靈活。HTML5在設(shè)計時保證舊的瀏覽器能夠安全的忽略掉新的HTML5代碼。與HTML4.01相比，HTM