CornGuo's Blog @ Blogspot: [Computers, Diary] 今天的主題是網頁

2008/03/08

[Computers, Diary] 今天的主題是網頁

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

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

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

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

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

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

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

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

用到的 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

/* 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

/* 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;
 }