今天的主題是網頁

這真是一個網路爆炸的時代呢。

從春假前到現在,其實我一直都在忙,
其中有一項工作是校內的數位典藏計畫,
後端的資料庫與程式碼部分之前曾經提過,
很多的時間都不在 coding,而只是在找解決方案 = =||

程式碼撰寫的部份不太費事,但因為趕進度而急就章地寫,
有些 code 到今天我已經看不懂了 Orz

如果之後有時間,真應該再重新 refine 程式碼才是。

比較起後端,花了更多時間的其實是網頁 layout,
雖然不是計畫要求,但我總覺得網頁該盡可能符合標準,
而因為政府機關似乎網頁都要能符合有障礙無障礙規範,
為此也將廣義的 Accessability 納入考慮。

嗯,不過我不敢說這個計畫的網頁是有高度可及性的,
目前只俱備「拿掉 styles 與圖檔後,仍可閱讀」的能力,
至於未來計畫會不會繼續,我也不知道 @@


我覺得網頁設計最惱人的部份,不是後端的程式碼或資料庫,
而是前端的 layout 與 styling.. @@

下面是期望看到的網頁樣式,用 ul 跟 li 實作:

20080307_ODAP-Opera

用到的 CSS code 大概是這樣:

#contenttext .tabbed li {
border:4px solid #CCC;
float:left;
list-style:none;
margin:10px 20px;
padding:4px;
text-align:center;
width:180px;
}

接著,用各版的 IE 打開時..

IE6

20080307_ODAP-IE6

/* IE6 */
#contenttext .tabbed li {
text-align:center;
list-style:none;
display:inline;
border:4px solid #CCC;
margin:10px 20px;
width:196px;
padding:4px;
}

/* standard browser */
html>/**/body #contenttext>.tabbed>li {
float:left;
width:180px;
}

IE7

20080307_ODAP-IE7

/* IE6 */
#contenttext .tabbed li {
text-align:center;
list-style:none;
display:inline;
border:4px solid #CCC;
margin:10px 20px;
width:196px;
padding:4px;
}

/* IE7 */
*:first-child+html #contenttext .tabbed>li {
display:block;
width:180px;
height:157px;
float:left;
margin:10px 20px;
}

/* standard browser */
html>/**/body #contenttext>.tabbed>li {
float:left;
width:180px;
}

IE8

20080307_ODAP-IE8

目前無解 (默)


嗯,希望之後不要出現版面大改動這種劇碼.. ||

Ref. 好用的 CSS Hacks