2/28/2007

支援各種平台的網站製作方式

W3C已經將手持裝置(Handheld, PDA和Mobile等行動裝置), TV(數位電視), projection(投影機)列入css的支援項目. 相信不久之後, 就可以在同一個頁面設計不同平台需要呈現的樣式, 不用一一開發PDA版, 手機版, 或iTV版的網頁, 只要在<head>連結不同版本的css就可以了. 但是支援的目標只是讓使用者都能存取網站內容資訊, 如文字, 影像, 多媒體物件等, 不代表所有平台都呈現相同畫面.

連結不同平台css只要在media指定支援的媒體形式即可, 寫法如下:
全部: <link rel="stylesheet" type="text/css" href="css/link_all.css" media="all" />
電腦螢幕: <link rel="stylesheet" type="text/css" href="css/link_screen.css" media="screen" />
印表機: <link rel="stylesheet" type="text/css" href="css/link_print.css" media="print" />
手持裝置: <link rel="stylesheet" type="text/css" href="css/link_handheld.css" media="handheld" />
投影機: <link rel="stylesheet" type="text/css" href="css/link_projection.css" media="projection" />
數位電視: <link rel="stylesheet" type="text/css" href="css/link_tv.css" media="tv" />

各平台瀏覽器的css支援情況如以下網址: (目前大多已經支援all, screen和print項目)
http://w3development.de/css/assigning_external_css/link.html

為了製作支援各種平台的網站, 是有必要開始改變一下製作網站的方式, 這是可預見未來2~3年的事, 提早準備應該可以免除很多將來改版時的困擾, 而且小修改就可以做到

1. 使用xhtml標記語言取代html

xhtml已經取代html4.01為目前網頁標記語言的標準, 主要原因是html標記不夠嚴謹, 允許標記沒有開始或結束的寫法(p,br,li等), 造成其他平台可能無法顯示的狀況. 再者是為了和xml銜接. 目前建議使用的標準版本為XHTML 1.0 Transitional.

2. 建立結構化的格式

文字資料的格式由結構化的標記建立, 標記語言結構化是指"根據文意建立文件結構". 有利於上述平台broswer解譯文件內容, 所以使用標記時必須考量標記所代表的意義. 例如標題為<H>, 段落為<P>, 項目條例為<li>或<dt><dd>等. 如果以<br>斷行取代項目條例或是使用<div>取代標記將會導致內容無法結構化, 在不支援css的平台上容易造成閱讀困難, 例如文字閱讀器. 結構化文件範例如下:

<h1>建立結構化標記</h1>

<h2>結構</h2>
<dl>
<dt>Html項目</dt>
<dd>Html 說明文字, html標記應用缺點</dd>
<dt>Xhtml項目</dt>
<dd>Xhtml 說明文字, xhtml標記應用優點</dd>
<dl>

<h2>格式</h2>
<p>以css取代老式的html表格配置, ....... </p>

沒有css情況下, 以結構化標記製作的網頁螢幕顯示為:


建立結構化標記

結構

Html項目
  Html 說明文字, html標記應用缺點
Xhtml項目
  Xhtml 說明文字, xhtml標記應用優點

格式

以css取代老式的html表格配置, .......


上述方式可以很容易讀出那一句是標題, 那一句是項目條列, 那一句是段落. 相對的, 沒有css情況下, 不結構化的網頁就無法讀出文件格式, 螢幕顯示可能為

建立結構化標記

結構

Html項目Html
說明文字, html標記應用缺點

Xhtml項目Xhtml
說明文字, xhtml標記應用優點

格式
以css取代老式的html表格配置, .......

3. 建立結構與格式各自獨立的css

以css取代html的表格配置, 開發人員可以隨意變更xhtml而不用擔心破壞版面配置, 在建立不同平台的css時也會比較容易轉換. 比較簡潔的寫法是儘量避免為標記加上class, 例如 <h1 class="head">, <h2 class="sub_head">, <dt class="data">, <p class="text1">...... 尤其要避免將slye寫在標記裡面, 例如 <h1 style=" background:background-......">, 這種方式比較浪費客戶端的頻寬

參考範例如下:

<div id="content">

<h1>建立結構化標記</h1>

<div class="news1">
<h2>結構</h2>
<dl>
<dt>Html項目</dt>
<dd>Html 說明文字, html標記應用缺點</dd>
<dt>Xhtml項目</dt>
<dd>Xhtml 說明文字, xhtml標記應用優點</dd>
<dl>
</div>

<div class="news2">
<h2>格式</h2>
<p>以css取代老式的html表格配置, ....... </p>
</div>

</div>


css寫法為:
#content {........}

h1 {........}
h2 {........}

.news1 {........}
.news1 dl {........}
.news1 dt {........}
.news1 dd {........}
.news1 dd a {........}
.news1 dd a hover {........}

.news2 {........}
.news2 p {........}
.news2 p a {........}
.news2 p a:hover {........}

運用上述方式編寫網頁, 將來需開始支援其他平台時, 應該可以避免很多資料轉換這種疲累的狀況了

2 則留言:

randylien 提到...

看完之後終於了解CSS的關鍵意義了,如果可以習慣利用語意標籤來進行結構化文件編排可以讓文件看起來更加清新,此外樣式表建立之後,以後就可以重複使用在類似的場合,想到之前使用WORD或者是其他網頁製作軟體產生的標籤真的是噩夢一場。
我還要多加練習才能掌握到CSS格式化的精隨阿。

Jane 提到...

衷心的建議改用Dreamweaver 吧!