Entries Tagged '組織活動' ↓

幫OPCafé做了新名片：

原稿是也：

咦，題目好像訂很大？其實我沒打算寫什麼東西，只是想推薦大家讀讀哞姐這篇「從《萬古江河》小談中文書刊排版」，真的是好文章喔。就算你只做網頁設計，相信也可以獲得些啟發。

就我自己的觀念來講，網頁與平面設計，實在是很不一樣的兩件事。如果你原本學習的是平面設計，想把觀念直接套用在網頁設計上，想必會跌上不少次跤。最主要的原因，應該是在瀏覽器裡，網頁通常是一路到底，而不是分成一頁頁的內容。當然許多人都試著把一份長文分成許多頁，不過通常來說，把一份網頁內容硬分成數個頁面，對使用者來說，往往缺點會大於優點。（對網站本身或許是好處，增加許多pageview與廣告收益……）所以我在看許多網站的文章時，就會尋尋覓覓，找到列印頁面，然後快快樂樂地一次盡收眼底。

不過平面設計……你知道的嘛，實在是比網頁設計早上幾百（幾千？）年，有許多東西都是網頁設計沒考慮到，或是還做不到的。比方說避頭點，或是中文的text-align: justify;，都是不知道哪年才會有的東西……

看完我這篇胡扯亂聊的讀者大人，辛苦您了阿（鞠躬）。

上一篇講到OSDC的網站設計問題。喔，附帶一提，沒報名的要動作快，剛剛看到還剩不到六十個名額。

講別人設計不好，自己當然不能光說不練。所以我弄了個議程表的範例，它們看起來像這樣：1, 2。有興趣的話，你可以用這種網址試試看自己寫的樣式表：

http://hlb.yichi.org/design/css/table/osdc/schedule.php?css=YOUR_CSS_FILE_URL

我的樣式表裡面，並沒有什麼特殊技巧，也沒有半張圖片（我有在想，三個議程表格，背景應該各放「鐵拳無敵孫中山」、「穿林北腿蔣中正」、「共殘狂人毛澤東」的……）下面大概提到幾個地方，跟大家作個分享。

內容置中的部份，就是 margin: auto 配合IE的 text-align: center。如果你不知道為什麼，可以參考這篇翻譯裡「追求卓越」的部份：

/* center DIV */
body {
text-align: center; /* IE */
}

#content {
margin: 0 auto;
text-align: left; /* IE */
width: 760px;
}

表格邊框的部份，就是裡面欄位畫左、上邊框，表格本身畫右、下邊框：

/* TABLE */
table {
border-bottom: 1px solid #999; 
border-right: 1px solid #999; /* Safari render <caption> width incorrectly */
}

th,
td {
border-left: 1px solid #999;
border-top: 1px solid #999;
}

因為同時有三個議程並行，所以就用float: left; width: 32%;，中間的表格加點邊界(margin)比較好看。因為三個表格都是浮動元件，所以後面要加上<hr class="split" />：

/* TABLE: 3 col */
.col3 { }

    .col3 table {
    float: left;
    width: 32%;
    }

    .col3 table.second {
    margin: 0 4px;
    }

.split {
clear: both;
visibility: hidden;
}

最後呢，雖然手寫字體有不容易辨識的問題，不過在這邊用起來倒是挺不錯的：

h2, caption {
font-family: 'Lucida Handwriting', cursive;
font-weight: normal;
}

如果你改出什麼有趣的作品，一定要告訴我喔！ XD

昨天粽大師在聊天室提到Vienna這個RSS閱讀程式（請看介紹）。其實我現在都很習慣用NetNewsWire，不過大師說了句真言：「Open Source」，我就熱血地裝起來玩一玩，結果發現它的樣式設定跟NNW還真像。所以一時興起，大大方方地抄襲（CC真正好！）了NNW上超好看的Softcover樣式，改了套給Vienna用。有興趣可以下載試試看。喔另外，預設字體對中文來說實在很小，記得改大一點才好看

今天晚上跑到天工開物聽連俊傑先生講Motion Graphics（什麼是Motion Graphics？），有做一點筆記（UTF-8編碼）。我也錄了一段最後的Q&A時間，不過先看看天工開物有沒有打算放錄音或錄影出來吧