網頁制作技巧與實戰(zhàn)大作業(yè)-關于html5的網頁設計與實現

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