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

PAGEPAGE12濱江學院學年論文題目關(guān)于HTML5的網(wǎng)頁設(shè)計與實現(xiàn)院系濱江學院專業(yè)軟件工程學生姓名胡飛學號20082344062指導教師鄭關(guān)勝職稱副教授二Ｏ一一年十二月五目錄一引言 2二網(wǎng)站建設(shè)的流程 2三網(wǎng)頁制作 3（一）制作步驟 3（二）常用參數(shù) 3（三）網(wǎng)頁布局 4（四）網(wǎng)頁色彩 5（五）細節(jié)的把握 6（六）常用工具介紹 7四HTML5的改進特性 7（二）程序接口 8（三）元素變化 9（四）異常處理 9五結(jié)束語 10關(guān)于HTML5的網(wǎng)頁設(shè)計與實現(xiàn)胡飛南京信息工程大學濱江學院軟件工程專業(yè)南京210044摘要：關(guān)鍵字：一引言隨著Internet的誕生和發(fā)展，許多人不再僅僅局限于網(wǎng)上沖浪，而是參與到網(wǎng)站建設(shè)中。企業(yè)建站相當于在網(wǎng)上建立一個家，你就可以在這里向客戶介紹你的企業(yè)，展示你的實力，推銷你的產(chǎn)品，網(wǎng)頁制作作為網(wǎng)站制作中一個重要的環(huán)節(jié)，相對于傳統(tǒng)的平面設(shè)計而言，網(wǎng)頁設(shè)計具有更多的新穎性，更多可以表現(xiàn)的手法。結(jié)合本人的實習過程，現(xiàn)就網(wǎng)站建設(shè)與管理過程中，網(wǎng)頁設(shè)計與制作的具體經(jīng)歷，包括：網(wǎng)頁設(shè)計與制作過程中的網(wǎng)頁布局、色彩構(gòu)置，框架結(jié)構(gòu)等相關(guān)事項做以下論述。什么是HTML5？HTML5將成為HTML、XHTML以及HTMLDOM的新標準。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)站建設(shè)的流程1．定義合適的域名。由域名構(gòu)成的網(wǎng)址會像商標一樣，有助于將來塑造網(wǎng)上的形象。域名除了要符合公司的性質(zhì)以及信息內(nèi)容的特征外，還要具有簡潔、易記、具有沖擊力的特點。2．租用虛擬服務(wù)器。有了域名后，就需要一個空間存放網(wǎng)站，這個空間就是Internet上的服務(wù)器。一般虛擬主機提供商都能向用戶提供大容量、高速度的服務(wù)器，用戶可根據(jù)網(wǎng)站的內(nèi)容設(shè)置及其發(fā)展前景來選擇。3．設(shè)計網(wǎng)頁。網(wǎng)頁的設(shè)計制作可以自己完成，也可以通過虛擬主機提供商或?qū)I(yè)的網(wǎng)頁設(shè)計制作商來完成。設(shè)計網(wǎng)頁前要收集所有需要放在網(wǎng)站上的文本資料、圖片等，并盡量用文字詳細說明制作的框架結(jié)構(gòu)，將收集的材料提供給網(wǎng)頁設(shè)計者。4．ICP備案。網(wǎng)站備案的目的就是為了防止在網(wǎng)上從事非法的網(wǎng)站經(jīng)營活動，打擊不良互聯(lián)網(wǎng)信息的傳播，如果網(wǎng)站不備案的話，很有可能被查處以后關(guān)停。ICP備案可以自主通過官方備案網(wǎng)站在線備案或者通過當?shù)仉娦挪块T兩種方式來進行備案。三網(wǎng)頁制作（一）制作步驟網(wǎng)站是網(wǎng)頁的集合，一個站點用的所有網(wǎng)頁構(gòu)成一個網(wǎng)站，網(wǎng)頁是網(wǎng)站的表現(xiàn)形式，網(wǎng)頁設(shè)計是指對網(wǎng)站整體頁面的設(shè)計，包括頁面風格、配色、布局、內(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)階段，你不必講究細膩工整，你也可在草稿本上先畫出整個布局框架，把多個版塊的位置先粗略的布置上去以往下一步工作的展示，這一步也可以借住PHOTOSHOP或其他工具軟件來完成。2.粗略布局在草稿的基礎(chǔ)上，將需要的功能模塊放到頁面上去，這時要遵循突出重點、整體協(xié)調(diào)的原則，首先將網(wǎng)站標志、導航條、廣告條等最主要的模塊放在最突出位置，然后考慮其他模塊的布局。3.定稿定稿即將粗略布局精細化、具體化，完成整個頁面的設(shè)計。頁面的制作，首先在根據(jù)客戶的要求下，完成首頁的制作，在經(jīng)客戶確定后，再制作其他的頁面，制作完成后，交給客戶驗收，然后發(fā)給客戶確定，待所有的頁面的都經(jīng)客戶確定后，完成網(wǎng)頁的制作進程，交給程序員添加程序。（二）常用參數(shù)圖片質(zhì)量與下載速度由于網(wǎng)絡(luò)速度問題，我們要考慮圖片的大小對傳輸速度的影響，如果圖片太大就會影響瀏覽速度，訪問者很快就對這個網(wǎng)站失去了興趣，只有充分了解圖片質(zhì)量與下載速度的關(guān)系，并了解不同的文件格式，才能更有效的表達內(nèi)容。1.分辨率理解圖像分辨率可以直接控制文件大小和下載速度，進而影響訪問者的人數(shù)，創(chuàng)建WEB圖片的要求是小、快、好。顯示器的分辨率起決定性的作用，大多數(shù)顯示器使用的是1024*768的分辨率，因為要通過顯示器頁面，所以用高分辨率并不會增加圖片質(zhì)量相反還會降低圖片的下載速度。2.位圖習慣性稱為圖像，而將矢量圖稱為圖形，位圖是位映射圖像的簡稱，也可叫柵格圖。它將一幅圖像分成許多柵格，柵格的每一個點就是圖像的像素，其值就是像素的亮度和色彩度，擴大位圖尺寸的效果是增多像素，從而將使線條和形狀顯得的參次不齊，位圖的與其分辨率密切相關(guān)，因此在處理位圖圖像時，必須設(shè)置合適的圖像分辨率，否則輸出圖像時會遺漏細節(jié)，使圖像模糊。3.矢量矢量圖也稱為面向?qū)ο竦膱D像或繪圖圖像，它使用一組線段造型描述一段圖像，圖像中包含的直線，弧線和造型的設(shè)置與開關(guān)是由指令描述的，矢量圖適用于描述色彩簡單的圖像，矢量文件中的圖像元素稱為對象，每一個對象都是一個自成一體的主體，它具有形狀、輪廓、大小和屏幕位置等屬性。放大位圖會失真，但放大矢量圖不會失真。4.圖片格式制作好的效果圖可以保存為各種格式，包括GIF格式，JPEG格式和PNG格式等各個圖片格式之間的區(qū)別為：GIF格式即圖形交換格式；GIF格式的圖片只能使用256種顏色，不適合顯示色彩豐富的圖像內(nèi)容。其特點是1.采用隔行掃描的顯示方式；2.可以設(shè)置背景透明；3.可以制作簡單的動畫。JPEG格式可以顯示顏色復雜的圖片，但是在處理大面積的顏色塊時可能會出現(xiàn)明顯的壓縮痕跡。PNG格式的圖片兼有GIF和JPEG的優(yōu)點。（三）網(wǎng)頁布局常見網(wǎng)頁版式布局結(jié)構(gòu)有以下幾種：兩欄式結(jié)構(gòu)，即頁面頂部為網(wǎng)站標志或廣告條，下面分為左右兩欄，一般左欄式導航或分類信息，右欄為主要內(nèi)容，這種布局很容易掌握，但如果在色彩上不加以注意的，很容易給人一種“乏味”的感覺。三欄式結(jié)構(gòu)是一些大型網(wǎng)站常用的布局結(jié)構(gòu)，一般為上面是橫幅的廣告條，下面分為三豎欄，中間較大，是主要的信息，左右是小條內(nèi)容或者廣告條。三欄式給人一種充實的感覺，但頁面擁擠，不夠靈活，是網(wǎng)站常用的一種布局形式。“三”型結(jié)構(gòu)，這種結(jié)構(gòu)多用于國外網(wǎng)站或者視頻類網(wǎng)站，其特點是分類清晰，展示方便。左右框架型，是企業(yè)網(wǎng)站或論壇常用的布局，頁面分為左右兩部分，左邊一般為導航部分，右邊是與導航相對應(yīng)的內(nèi)容。左右框架型的結(jié)果非常清晰，內(nèi)容一目了然，便于信息的查詢。上下框架型與左右框架型類似，其區(qū)別僅僅在于形式。頁面整體為橫向分布，上面為導航，中間的大展式窗口很突出，整個網(wǎng)站顯得簡潔明亮，這種結(jié)構(gòu)適合于信息量不大，主要靠圖片展示內(nèi)容的網(wǎng)站。Flash型主要采用現(xiàn)在流行的Flash技術(shù)，頁面表達的內(nèi)容較為豐富，給人視覺和聽覺上很大的沖擊，處理得當會達到Web頁面難以達到的效果。（四）網(wǎng)頁色彩1.色彩模式。在自然界看到的各種色彩都是由三種色光或三種顏色組成的，而他們本身不能再分拆出其他的顏色成分，所以稱為三原色。三原色分為光學三原色和物理三原色。這兩種三原色各自混合后，分別形成了不同的色彩體系。RGB模式：R代表紅色，G代表綠色，B代表藍色，三種色彩疊加形成了其它的色彩。因為三種顏色都有256個亮度水平級，所以三種色彩疊加就形成1670萬種顏色了，通過它們足以再現(xiàn)絢麗的世界。就編輯圖象而言，RGB色彩模式也是最佳的色彩模式，因為它可以提供全屏幕的24bit的色彩范圍，即真彩色顯示。CMYK模式：CMYK代表印刷上用的四種顏色，C代表青色，M代表洋紅色，Y代表黃色，K代表黑色。因為在實際引用中，青色、洋紅色和黃色很難疊加形成真正的黑色，最多不過是褐色而已。因此才引入了K——黑色。黑色的作用是強化暗調(diào)，加深暗部色彩。CMYK模式是最佳的打印模式，RGB模式盡管色彩多，但不能完全打印出來?？梢韵扔肦GB模式進行編輯工作，再用CMYK模式進行打印工作，在打印前才進行轉(zhuǎn)換，然后加入必要的色彩校正，銳化和休整。2.色彩的心理表現(xiàn)。色彩具有精神的價值，人們常常能感受到色彩對自己心理的影響，這些影響總是在不知不覺中發(fā)揮作用，影響我們的情緒。色彩的心理效應(yīng)法是在不同層次中，有些色彩對人有直接的刺激，有些則需要通過間接的聯(lián)想，更高層次的則涉及人的觀念與信仰。3.色彩的表達感覺。不同的色彩給人不同的心理暗示。對色彩的不同感覺和認知，對色彩搭配所產(chǎn)生的心理聯(lián)想，會導致不同的心理反應(yīng)?？臻g感——色彩的空間感與色彩對比的知覺度有關(guān)，對比度強和高純度的色彩具有前進感，對比度弱和低純度色的色彩具有后退感。色彩的空間感，具體表現(xiàn)在利用色彩的明度對比層次、形與色的排列轉(zhuǎn)折、大小彎曲等秩序節(jié)奏，從而有意識地形成凹凸深遠的空間感，甚至利用人的錯覺形成假象空間色彩的前進、后退感形成的距離措視原理、在網(wǎng)頁中常被用來加強畫面的空間層次。親切感——色彩的親切感是指人對色彩的對比變化所產(chǎn)生的親近的心理感覺。通常較為明快柔和的色彩都能使人產(chǎn)生親切感，色彩的純度對比和明度對比較弱時，也會使整體色調(diào)變得柔和、輕快。產(chǎn)生親切感的網(wǎng)頁一般采用同類色、類似色和鄰近色。使用具有親切感的色彩，可以用來表現(xiàn)家具網(wǎng)站、兒童網(wǎng)站和女性網(wǎng)站、服裝網(wǎng)站及日用消費品網(wǎng)站等。莊重感——通常，明度較低、純度不高的色彩能給人以莊重感、常用的有黑、棕色、深藍和褐色等。在使用時要注意搭配，搭配不當則會產(chǎn)生沉悶、呆板的感覺。神秘感——色彩的神秘感，并不是色彩本身具有的，而是人的聯(lián)想所產(chǎn)生的心理感覺。一般能使人感到神秘的色彩，多為明度較低、色相不明確、純度也不高的色彩，如昏黃的氛圍、幽暗的巷子、夜晚的角落，都可以用來營造色彩的神秘感。興奮和憂郁感——色彩和人的個性一樣，具有明朗與憂郁的區(qū)分。明朗的色彩必然是明度高、對比較強的色彩，以及純度偏純的色彩，憂郁的色彩則是明度低、對比較弱的色彩，以及純度偏低且色性偏冷的色彩。一般來說，暖色較易引起心理的亢奮和積極性，屬于興奮色，其中朱紅色最具興奮作用，其他明度較高、純度較高的顏色（如黃色、橘黃色等）也具有煽動性、傾向于興奮色。4.網(wǎng)頁色彩的搭配。將色彩具體到網(wǎng)頁搭配中，應(yīng)遵循一定的方法。同色搭配，該方法采用一種顏色的深淺搭配，盡管網(wǎng)站設(shè)計要避免采用單一色彩，以免產(chǎn)生單調(diào)的感覺，但通過調(diào)整色彩的飽和度和透明度也可以產(chǎn)生變化，使網(wǎng)站避免單調(diào)。鄰近色搭配，使用在色帶上相鄰近的顏色，如綠色和藍色、紅色和黃色。采用鄰近色彩設(shè)計網(wǎng)頁可以使網(wǎng)頁避免色彩雜亂，易于達到頁面的和諧統(tǒng)一。對比色搭配，該方法使用兩種完全不同的顏色搭配。對比色可以突出重點，產(chǎn)生強烈的視覺效果。通過合理使用對比色，能夠使網(wǎng)站特色鮮明，重點突出。在設(shè)計時一般以一種顏色為主色調(diào)，對比色作為點綴，起到畫龍點睛的作用。明度推移色彩搭配，有兩種方法操作：通過加入等量的白色，使一種顏色漸亮；或者通過加入等量的黑色，使顏色變暗。這兩種方法都可以產(chǎn)生色彩明度漸變的效果。（五）細節(jié)的把握網(wǎng)站的品位，除了頁面本身整體的視覺效果外，往往更突出在一些細節(jié)上，只有把握住細節(jié)，才能更好地提高瀏覽者的使用友好度，給瀏覽者留下深刻的印象。1．

顏色。在初學網(wǎng)頁設(shè)計的時候，在用色方面要非常注意，如果對網(wǎng)頁用色沒有太大的把握，那么就先選擇好網(wǎng)頁的基本色調(diào)，然后針對這一種顏色去進行變化，如需加其他顏色，可以試著加些灰色，因為灰色是中色調(diào)，不會對頁面顏色造成太大的沖突。這樣做出的網(wǎng)頁整體顏色會非常協(xié)調(diào)統(tǒng)一。2．線條的運用。很多朋友在制作網(wǎng)頁的時候，在兩塊過渡的地方，如banner和導航條之間會用一條細線區(qū)分開，此時往往會畫上一條直直的線，這樣給人感覺會很突兀。3．圖標。網(wǎng)站中在各個標題的前面適當?shù)募有﹫D標點綴網(wǎng)頁，可以使網(wǎng)頁效果更加出彩，但是切忌網(wǎng)頁圖標使用過多，圖標的色調(diào)也要一致，避免雜亂。4．文字。網(wǎng)站中文字的運用，用戶在瀏覽網(wǎng)頁時，主要是要看網(wǎng)頁當中的文字內(nèi)容，所以要特別注意文字的處理。一是文字的顏色不要和背景顏色相近，這樣用戶在瀏覽文字信息時會非常的吃力；二是不要亂用字體，你使用的字體在本機上可以顯示，但是到了別人的電腦上就不一定能顯示出來了；三是注意文字之間的行距，通常我們不對文字進行行距的設(shè)置時，文字間的行距會非常??；影響頁面的美觀度，注意文字間的行距，使其不會顯得特別擠，做到寬松有序。（六）常用工具介紹用來制作效果圖的軟件并沒有明確的規(guī)定?？梢允褂酶鞣N圖形制作軟件和處理軟件，現(xiàn)在通常使用的軟件是PHOTOSHOOP和FIREWORKS。在制作效果圖時，使用的軟件對最終結(jié)果并沒有什么影響，用自己精通的即可。Photoshop是一款非常好用的平面設(shè)計軟件。由Adobe公司開發(fā)設(shè)計，其用戶界面易懂、功能完善、性能穩(wěn)定，是比較專業(yè)的圖像處理軟件，它具有強大的濾鏡功能。所以，在很多的的廣告、出版、軟件公司，Photoshop都是首選的平面工具，它有很多的快捷方式，如抓手工具H鍵，TABLE鍵切換顯示或隱藏所有的控制板，D鍵、X鍵迅速切換前景色和背景色等，靈活的運用快捷鍵，可以使設(shè)計的速度大大提高。Fireworks是網(wǎng)頁開發(fā)圖形處理工具，可以做出矢量的圖形，主要是和Dreamweaver配合做網(wǎng)頁。對處理一般的網(wǎng)頁圖片比較實用，而且學起來也比Photoshop易上手，是一個入門級的網(wǎng)頁設(shè)計軟件。四HTML5的改進特性（一）HTML5新元素HTML5提供了一些新的元素和屬性，例如<nav>（網(wǎng)站導航塊）和<footer>。這種標簽將有利于搜索引擎的索引整理，同時更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如<audio>和<video>標記。1.取消了一些過時的HTML4標記其中包括純粹顯示效果的標記，如<font>和<center>，它們已經(jīng)被CSS取代。HTML5吸取了XHTML2一些建議，包括一些用來改善文檔結(jié)構(gòu)的功能，比如，新的HTML標簽header,footer,dialog,aside,figure等的使用，將使內(nèi)容創(chuàng)作者更加語義地創(chuàng)建文檔，之前的開發(fā)者在實現(xiàn)這些功能時一般都是使用div。2.將內(nèi)容和展示分離b和i標簽依然保留，但它們的意義已經(jīng)和之前有所不同，這些標簽的意義只是為了將一段文字標識出來，而不是為了為它們設(shè)置粗體或斜體式樣。u，font，center，strike這些標簽則被完全去掉了。3.一些全新的表單輸入對象包括日期，URL，Email地址，其它的對象則增加了對非拉丁字符的支持。HTML5還引入了微數(shù)據(jù)，這一使用機器可以識別的標簽標注內(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。8.Html5取代Flash在移動設(shè)備的地位。（二）程序接口除了原先的DOM接口，HTML5增加了更多API,如：1．用于即時2D繪圖的Canvas標簽2．定時媒體回放3．離線數(shù)據(jù)庫存儲4．文檔編輯5．拖拽控制6．瀏覽歷史管理（三）元素變化新的解析順序新的元素：section,video,progress,nav,meter,time,aside,canvasinput元素的新屬性：日期和時間，email,url。新的通用屬性：ping,charset,async全域?qū)傩裕篿d,tabindex,repeat。移除元素：center,font,strike。（四）異常處理HTML5(text/html)瀏覽器將在錯誤語法的處理上更加靈活。HTML5在設(shè)計時保證舊的瀏覽器能夠安全的忽略掉新的HTML5代碼。與HTML4.01相比，HTML5給出了解析的詳細規(guī)則，力圖讓不同的瀏覽器即使在發(fā)生語法錯誤時也能返回相同的結(jié)果。（五）特殊邊框代碼展示<footer> <sectionid="footer-area"> <sectionid="footer-outer-block"> <asideclass="footer-segmentfirst"> <h4>   </h4> <!--<ul> <li><ahref="#">onelinkylink</a></li> <li><ahref="#">twolinkylinks</a></li> <li><ahref="#">threelinkylinks</a></li> </ul> --> </aside> <!--endof#firstfootersegment--> <asideclass="footer-segmentsecond"> <h4>   </h4> <!--<ul> <li><ahref="#">onelinkylink</a></li> <li><ahref="#">twolinkylinks</a></li> <li><ahref="#">threelinkylinks</a></li> </ul> --> </aside> <!--endof#secondfootersegment--> <asideclass="footer-segmentthird"> <h4>   </h4> <!--<ul> <li><ahref="#">onelinkylink</a></li> <li><ahr