2012年4月22日星期日

網頁設計-HTML5使用的四大理由

網頁設計-HTML5使用的四大理由
在過去幾年裏,人們對HT網頁設計ML5的主要關注點是其在鬥爭中扮演的角色:蘋果是否將標准化HTML5?谷歌是否利用其對Flash的支持來進行對抗?

  如果你想提升你的搜索名次,那麽你最好支持移動用戶,改台中網頁設計變你的開發程序,現在是時候將HTML5整合到你的網頁之中了。

  1、更快的圖片下載速度,尤其是對于移動用戶

  在中,“漸變”是一種背景效果:你的網頁上的“窗口”擁有更精致的底紋或紋理。設計人員有更大的空間來平衡明暗度、匹配邊界,實現讓大數浏覽者歎爲觀止的色彩或風格。

  漸變效果的頭二十年是通過“著色”來取得的。在HTML5之前,背景必須作爲一個圖片(或是由多個子圖疊加在一起)被提供。例如,Photoshop有一個“漸變工具”。該工具主要用于構建一個背景圖片以作爲漸變色使用。這一功能獲得了很大的成功。每一名稱職的網頁設計者通常都會使用已經有的漸變色作爲背景圖片。

  HTML5的出現改變了這一用法。HTML5的CSS3部分通過語義表達漸變,也就是說用有意義的單詞,而不是用圖片表達。例如:

  。gradientArea { background: -o-linear-gradient(#FFB260, #FF7F13); filter: progid:DXImageTransform。Microsoft。gradient( startColorstr=´#ffb260´, endColorstr=´#ff7f13´, GradientType=0); } }

  這一範例的句法細節並不重要,重要的是其通過單詞而不是圖像來展示這種效果。

  首先,其非常簡潔。CSS3漸變規範通常有數百個字節,而表達漸變的背景圖片通常會有數千個字節。除了這一優勢外,CSS3的是漸變是內聯的,其傳輸不需要打開其它的文件。當大量網站浏覽者通過帶寬有限的移動浏覽器訪問時,讓用于網頁渲染的輔助連接的數量保持低水平對于提升性能非常關鍵。

  你的網頁設計人員能夠像以往那樣做同樣的事情——使用Photoshop的漸變工具或是類似工具,然後導出至CSS3而不是HTML4或XHTML。終端用戶在他們的浏覽器上的效果幾乎沒有什麽差別,但是下載速度卻提升了許多。此外,CSS3漸變色還能夠更容易的生就不同的屏幕尺寸和各種分辨率。

  其它技術優勢還包括:

  •總體上,其能夠內聯老式的漸變色,因此能夠減少下載成本。

  • 除了CSS3之外,HTML5還包括了其它的漸變效果。

  • 漸變色的CSS3支持將可編程性提升到了一個新的水平。例如,設計人員可以根據浏覽者的年齡和位置調整漸變背景。

  雖然這些功能對于編程者具有很高的娛樂性,但是我們並不推薦使用它們。不要讓它們將你的注意力從HTML5的可語義表達漸變色這一主要功能上吸引開。它們具有更快的下載速度、更容易輸出到移動設備上,維護成本也相對較低。

  2、SEO(搜索引擎優化)得到提升

  一些常用的圖形效果有CSS3表達方式,包括不透明貼圖、圓角、陰影。這些效果與CSS3漸變色一起使得上傳更爲簡潔,跨平台維網頁設計護也更爲容易。此外,它們還在SEO(搜索引擎優化)方面具有優勢。

  爲了理解SEO,我們還要回到剛才提到的漸變色。CSS3漸變色的另一個優勢是它們可以更好的向下兼容源代碼控制系統(SCCS)。在CSS3出現之前,漸變色通過圖片實現。在常用的SCCS中調整圖片是一個不透明的過程。

  通過CSS3的漸變色語義標記,SCCS能夠很方便在表面漸變的文本進行操作。SCCS能夠在特定時間自動報告,漸變色彩的變化或是飽和度。其格式如下:

  < background: -o-linear-gradient(#FFB260, #FF7F13); --- > background: -o-linear網頁設計公司-gradient(#FFB260, #FF3F13);

  編程人員發現這非常有用,他們通過管理源代碼的工作能夠讓Web設計的圖形結構成更爲自然。

  這上優勢也提升了不透明貼圖和其它的CSS3標記。假設一個名爲Acme Widgets的想通過不透明貼圖在其網頁上標記的名稱。在CSS3出現之前,他們需要使用Photoshop或類似工具才行,這導致需要設計一個圖片,通過一張不透明的貼圖顯示Acme Widgets。

  由于內容是內嵌在圖片中的,因此Acme Widgets根據無法被搜索引擎找到。CSS3的出現改變了這一情況。

没有评论:

发表评论