Sunday, July 15, 2007

Figugle首頁編排

首頁主要的架構是依照奇摩的樣式來的
整體來說,整個框架共有11個分割
包含有上端的 search engine 、 左邊的 sidebar
中間的 left1、left2、left3、left4
以及右邊的 right1、right2、right3、ad
還有下面的 tip

首先先講到分割 div
一般人在設計網頁的時候,在編排上
往往會使用表格去調整,但是表格會有一個缺點
那就是在編排時,常常會分割出額外的儲存格
這些儲存格往往只是用來定位某些東西,沒有其他用途
而且用表格定位,往往就被定死了,其他的東西你很難調整
因此,這對使用上,多少會增加額外浪費

所以為了改進這個,我們可以使用 div
使用div的好處是他可以隨著你要加入網頁的東西
進行大小的配置,位置的話也可以由css進行定位
因此,他的位置可以浮動,不會被定的死死的
而且由於其大小可以自由設定,也較不會浪費空間
但是缺點是過度分割的結果,程式難免會覺得凌亂

在來說到這11個分割,基本上裡面的東西都一樣
在div當中,都有一個表格加以呈現
其中 sidebar 是導覽列
left1、left2、left3、left4則分別表示課業分享、日記類、同學、娛樂
right1、right2、right3則分別表示動態變化列、更新列、訪客人數
tip則為版權、日期及服務介紹列
search engine 則使用Google的搜尋引擎

另外,本頁面也可以改變版面的顏色
當使用者改變頁面的時候,會有一個cookie紀錄在客戶端
在之後使用者再進到這個頁面時,網頁會先去偵查客戶端的cookie
假若沒有cookie紀錄,則網頁會使用原來的灰色頁面
反之,則會使用使用者先前選擇的

No comments: