以標準方式重構Talkonly網站

目的

重構的目的就是為了加深大家對網絡標準、CSS的認識，同時亦可訓練一下自己。

其實我對CSS和XHTML都不算熟悉(精通)，只算是略懂而已，畢竟這些太博大精深了。所以當你發現有更好的做法時請指教。

這個重構全屬我個人的行為，與Talkonly是沒關的。同時，我沒有通知Talkonly方面，我在此希望Talkonly方面諒解我的行為。

規則

盡量符合標準。
所有瀏覽器都能夠完整觀看。
盡量重現網站原貌。
要有改進。

以下的圖片截取自 Windows XP SP1 上官方的 Firefox 1.5.0.1 正(繁)體中文版。

XHTML部份

DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

以上這段稱為DTD，用來向瀏覽器宣告這個文件使用什麼格式(標準)，方便在各瀏覽器上得出一致的結果。

網頁描述

<meta name="description" content="香港網上電台。節目內容包括電腦業界、時事，另設有PODCAST頻道。" />

用來描述這一頁，描述會在搜尋器的搜尋結果顯示出來。而且部份瀏覽器(Firefox、Opera)把網頁加到書籤時，描述會自動加進書籤的描述部份。

不少人都誤以為搜尋器不看這段，但搜尋器不看的是meta name="keywords"。

RSS

<link rel="alternate" type="application/rss+xml" title="講台talkonly(精華版)" href="http://feeds.feedburner.com/talkonlypodcast" />

用來宣告RSS的網頁及標題。加上之後，Firefox這類較新的瀏覽器會出現那個RSS圖示。

頁頂

由於MSN跟Skype的地址跟頁頂內容沒關，所以沒有把它們寫進來。

節目推介部份

由於這部份一直都沒有固定格式，所以決定繼續使用圖片來顯示內容。

節目直播部份

<caption>直播連結</caption>

表格的標題。

<th><img src="winamp.gif" alt="Winamp" height="32" width="32" /></th>

<th>即Table Header，效果跟<td>(Table Data)相同，但語意是不同的。

<img>中的<alt>用途是代替無法顯示的圖片，彈出式提示應使用<tltle>，它能夠在<img>以外使用。

另外，<alt>並非只對純文字瀏覽器有用的，圖片載入中和無法載入時都會顯示出來。

節目重溫部份

<option value="0">其他重溫 (YY/MM/DD)</option>

加入「(YY/MM/DD)」，避免瀏覽者混淆年份、日期、月份。

<optgroup label="06/03/03">
<option value="http://listen.talkonly.net/LONG/LONG-20060303/long.060303.0.mp3">節目重溫風波</option>
<option value="http://listen.talkonly.net/LONG/LONG-20060303/long.060303.1.mp3">綜緩141</option>
<option value="http://listen.talkonly.net/LONG/LONG-20060303/long.060303.2.mp3">自由人珍藏</option>
</optgroup>

使用<optgroup label="06/03/03">分組後，選單變得更容易觀看。

PODCAST頻道部份

<h3><a href="http://feeds.feedburner.com/talkonlypodcast">講台talkonly(精華版)</a></h3>
<ul>
<li><a href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=77016318">以iTunes訂閱</a></li>
<li><a href="http://www.bloglines.com/sub/http://feeds.feedburner.com/talkonlypodcast">以Bloglines訂閱</a></li>
<li><a href="http://www.multirss.com/rss/http://feeds.feedburner.com/talkonlypodcast">MultiRSS</a></li>
</ul>

Podcast的RSS並非只有iTunes用戶使用，所以在此方便線上RSS Reader。由於Bloglines的用戶最多，所以其餘的由MultiRSS解決。

直接加上Podcast連結是為了方便RSS Reader的bookmarklets。

其餘

餘下的「id="poster"」、「id="im"」、「id="forum"」不放進「id="content"」內是有原因的，當這三個部份放於「id="content"」再以絕對定位固定，會在IE中消失，所以只好放出外面。

一點改進

能夠以「podcast」在搜尋引擎搜尋得到。(原來的網頁是不能的)

可改進的地方

節目重溫部份不能在停用Javascript下正常使用。
曾試過加上Play Tagger，但播放時的速度會加快很多。
可把討論區的搜尋器放進來，方便聽眾在收聽後尋找相關資料。但討論區的搜尋只供會員使用且僅搜索標題，搜尋引擎的cache又並非即時收錄。

CSS部份

CSS寫得比較亂，而且沒有加上註解，所以理解時需要多花一點時間。

字型

由於我不擅長設定字型，所以字型部份照搬了原本的設定。

重現虛線

雖然在「#podcast」加上border-left:1px dashed #999能夠重現虛線效果，但這會引申出一個小問題，由於border是從區塊的外面套上的，所以「Podcast頻道」跟上面的「節目直播」會有1px之差，所以我在「#live」加上border-left:1px solid #7CC576。

重現圓角

由於只需要一個圓角，所以能夠在不修改XHTML下重現。把邊角的部份製成一張圖片，去除非白色部份再貼到右上角。

background-image:url('corners.gif');
background-repeat:no-repeat;
background-position:top right;

重現誠邀部份

在原本的網頁上這部份是一張圖，但XHTML的這部份連半張圖也沒用上，那到底如何重現呢?

根據原圖的大小來設定「#poster」的高和闊，然後用border:1px solid #000重現邊線。

以position:absolute;top:450px;left:270px;定好位置。由於從開始到現在都以px單位設定距離，所以不需擔心在別的瀏覽器會走位，因為它們有同樣的偏差值。

background-image:url('ren.gif');
background-repeat:no-repeat;
background-position:center bottom;

以這段貼好圖後，就只差「talkonly wants you」這幾個字。雖然CSS2未能在同一元素貼多張圖，但還有h2這個元素可用。

letter-spacing:-999px;
background-image:url('wantsyou.gif');
background-repeat:no-repeat;
background-position:center top;
width:211px;
height:56px;

letter-spacing的用途是設定字距，當數值為負數時，部份瀏覽器會把文字弄不見，避免文字和圖片的內容重疊起來。由於有部份瀏覽器會繼續顯示該段文字，所以將文字的大小設為1px以減低影響。

成品

除了使用Windows XP下的Firefox 1.5.0.1、Internet Explorer 6.0、Opera8.53測試外，再以SafariTest跟Browsershots粗略測試過。

圖片方面，由於沒有原圖的關係，所以圖片的質素會比較差。

網絡笨貓 Journey of Blog

搜尋此網誌