天天看點

怎樣向web标準過渡

        web标準的目标是實作網頁結構、表現、行為的分離,達到最佳架構,提高網站可用性與使用者體驗。web标準中包括了衆多技術标準,包括相似的HTML與XHTML等,以目前web标準的技術架構來看,用以下幾個标準及方法進行網站建構是目前最為理想的選擇。

1、從HTML轉向HTML

        為什麼要放棄HTML去使用XHTML

        事實上XHTML就是HTML的下一個版本,用于替代HTML并幫助轉向XML的一套過渡型标記語言,HTML是一個非常優秀的頁面描述語言,至少在過去的幾年裡為我們創造了太多便于使用的空間。

        無論是HTML還是XHTML,說到底是一門讓機器看的語言,通路者是不會去關心HTML源代碼的,他們隻關心眼中所看到的網頁呈現出來的内容,而作為網頁設計師而言,網頁設計隻有一個目的,就是讓通路者看得更清楚,用起來更友善。

        HTML和XHTML是面向機器的,并非面向通路者。通過設計設計師良好的代碼編寫,才能讓IE或是firefox等浏覽器能夠充分的去解析HTML或XHTML并渲染出最終頁面。在強調表現與内容分離的web标準時代,HTML的文法模式已經不能滿足需求,取而代之的将是新一代的标記語言,結構與标記更嚴謹。

        XHTML是一門面向結構的語言,設計目的不像HTML僅僅是為了網頁設計與表現,XHTML的設計目的并不是為了最終表現,XHTML主要用于對網頁内容進行結構設計,其嚴謹的文法結構有利于浏覽器進行解析處理,是一門面向文檔結構的設計語言。

        目前XHTML的使用标準也存在着多種選擇,包含Transitional、Strict和Freamset三種應用方式。

        ◆  Transitional方式代表一種松散過渡型的XHTML應用,允許使用者使用一部分舊式的HTML标簽來編寫XHTML文檔,以幫助使用者慢慢适用HTML的編寫(推薦)。

        ◆  Strict方式是一種種嚴格型的應用方式,在這種形勢下XHTML中不能使用任何樣式表現的标簽及屬性。

        ◆  Frameset方式是針對架構頁面的應用方式,如果使用架構式網頁應當使用此方式。

        面向結構的XHTML設計語言在面向結構的設計思想上能帶給我們超越HTML的實質性内容,面向結構的設計能幫助我們适應更多終端的需求,對于不同的應喲娜給終端,如PC、PDA、手機及其他産品,隻要這些裝置能接受我們的結構語言XHTML,那麼我們就能對資訊進行再設計重新釋出以适用不同的終端需要。

        XHTML另一方面也是XML的過渡型語言,XML是完全面向結構的設計語言,XHTML幫助我們快速适應結構化的文檔設計,幫助我們平滑過渡到XML,并能與XML及其他程式語言之間良好的互動工作,幫助我們擴充其應用。

2、發揮CSS2.0的作用

        相對于結構設計來說,表現層的樣式設計變化更豐富,也更難掌握,對于千變萬化的網頁設計來說,如何将設計編碼成機器識别的樣式語言是CSS的工作重點,CSS豐富的樣式表現也對設計者提出了更高的要求。

        合理的CSS檔案結構

        雖然CSS做到了樣式設計與内容的分離,但CSS檔案本身也應該擁有良好的層次結構及規範,目的是進一步改善樣式設計的可維護性,CSS本身隻是import導入功能,針對于大型網站的設計,不妨使用分離的CSS檔案來組織樣式,如将字型樣式專門使用font.css這樣一個檔案來編寫,表單的設計放到form.css中,通過合理的組織檔案,帶來後期維護的便利性,也友善網站程式能夠根據浏覽器版本或是終端裝置進行檔案的調用,進一步提升CSS跨平台能力。

        繼承與重用的優勢

        使用CSS的優勢在于其良好的重用特性,一段CSS設計代碼可以供多個區域同時使用,然而除了重用功能以外,CSS還可以實作類似面向對象程式設計中的繼承機制,通過繼承機制能進一步完善網站的樣式結構。如在CSS對應的XHTML中,每一級的标簽總是首先使用其本身标簽的樣式設計,接着使用父級标簽的樣式,這樣部分代碼就可以分别放在各級别中,互相發揮作用,統一代碼放在最上一級标簽。通過這種具有繼承機制的功能,能夠進一步減小在樣式設計中的代碼量,進一步改善設計。

        設計跨平台的代碼

        CSS也有美中不足,由于不同品牌浏覽器及不同版本之間的渲染方式的不同,對CSS的解析也存在着一定差異。另外就是PC機下與MAC機下浏覽器産品的不同。針對這些原因,CSS的設計也應具有一定的跨平台與相容特性,編碼時盡量減少生僻屬性的使用,如果想相容舊版本的浏覽器也應當注意留有一定的CSS hack代碼進行編寫。

相關連結:CSS hack

        CSS hack是一個被設計師們習慣使用的一個名稱。他表現一種類似于欺騙浏覽器的編寫方式,由于存在浏覽器相容性問題,而且A浏覽器不支援某些标簽而B浏覽器則支援,是以使用這種欺騙方法,我們可以寫一段CSS樣式隻被B浏覽器解析,而A浏覽器則會忽略,反之相同。是以CSS hack是目前最流行也是最行之有效的修補浏覽器解析問題的方式。

        具有良好可用性的CSS樣式設計

        可用性随着計算機人際互動技術的發展不斷擴充其内容與形式,可用性的目标是我們的互動式産品(軟體、網站)對使用者的需求提供最大限度的滿足,使得産品更容易被使用者使用,他從根本上改變使用者與産品互動的主觀過程,提升産品價值,為産品及使用者帶來爽方面的利益。CSS作為樣式設計代碼,也包含着對于可用性層次的設計内容。

        CSS樣式的設計意味着你對網站整體風格的把握需要重新考慮,從視覺設計上為了達到最大限度的重用與合理的結構,需要統一的字型字号及排版形式,這些統一的設計都有助于視覺設計上可用性的提升。對于網站上的細節表現,如連結改變提示、連結區域、導航的操作感等也都是CSS在可用性上設計的目的,最終目的都是希望通過良好的設計創造更好的互動式網站以友善使用者使用,為網站及使用者創造價值。

        使用基于DOM的腳本語言來編寫互動

        DOM的生産也是為了實作腳本語言的跨平台與跨浏覽器。DOM的全稱是Document Object Model 文檔對象模型。是由W3C制定的一種與浏覽器無關的接口,他對網頁中的标準元件如HTML标簽做出技術性的統一規範,使得我們的腳本語言能夠通路這些元件,而前提是浏覽器支援這種基于DOM的定義規範。就目前來說大部分浏覽器都支援标準的DOM。使用符合DOM的浏覽器,相同的代碼就能完成所有支援的操作。目前的JavaScript是符合DOM标準的腳本語言。有關DOM的詳細資料可以通路W3C的DOM專欄 [url]http://www.w3c.org/dom[/url] 。