2006-03-14

以標準方式重構Talkonly網站

目的

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

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

這個重構全屬我個人的行為,與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圖示。

Firefox的情況
頁頂

由於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測試外,再以SafariTestBrowsershots粗略測試過。

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

使用工具

相關連結

起於:12/10/2005

沒有留言:

發佈留言

沒帳戶請選擇「Name/URL」或「Anonymous」,不需為留言而註冊