作者 主題: (個人感想)為何及如何採用 CSS 處理網頁風格  (閱讀 5040 次)

0 會員 與 1 訪客 正在閱讀本文。

slime

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
(最近練習使用 CSS 後的感想, 如果有疏漏還請指教)

一、使用 HTML Tag 處理網頁風格的特點.
二、為何採用 CSS 處理網頁風格.
三、如何採用 CSS 處理網頁風格.
四、其他

一、使用 HTML Tag 處理網頁風格的特點.
HTML Tag 是網頁的主要元素(element), 包括用來分段、換行的 p, br, 用來定義標題的 h1~h6, 在版本更新時, 也逐漸增加了顏色變化, 寬度等與風格有關的設計; 而常見的網頁設計軟體, 以"所見即所得"為原則, 當使用者在畫面上修改了某個風格, 就直接在原始檔內加上對應的 HTML Tag , 當一個網頁經過多次修改後, 可能會出現類似的結果:
代碼: [選擇]
<font color="#ff0000"><font size="3"><font face="標楷體">&nbsp;</font></font></font><font color="#ff0000"><font size="3"><font face="Arial">1.</font></font></font><font color="#ff0000"><font size="3"><font face="標楷體">&nbsp;</font></font></font>

二、為何採用 CSS 處理網頁風格.
CSS 也是處理網頁風格的一種技術, 和使用 HTML Tag 有所不同是, CSS 將資料內容與風格的處理分開, 在網頁內保留資料內容及基本的 HTML Tag , 將風格部份獨立處理, 有引用 CSS 檔, 或者套用於單一網頁, 以及對單一 HTML Tag 指定風格等三種方式.
網頁設計人員可以將風格原則建立於 CSS 檔內, 套用於網頁內, 以後要修改風格時, 只要修改風格原則, 可以省下逐一修改各網頁的工作; 如果要修改網頁內容時, 也可以較完整找出內容部份.

三、如何採用 CSS 處理網頁風格.
如果要採用 CSS 技術處理網頁風格, 大概有這些步驟:
1. 將資料內容與風格分開
如果是還沒設計的網頁, 可以先構思網頁呈現的顏色, 位置等, 再找出對應的 CSS 格式設定元素; 如果是已經完成的網頁, 可以考慮先將影響風格的部份, 改用<tag style="">的方式, 保留單一個 HTML Tag , 風格有關的設定改寫到style=內.

2. 對於同樣的風格加以分類
對於風格相同, 數量較多的網頁, 在網頁上必定有部份風格是相同的, 比如相同的標頭(header)顏色, 相同的文字屬性等; 透過class的分類及id的指定, 把相同屬性的風格歸類在一起.
比如所有的網頁都有標頭, 就可以指定<tag class="header">, 把網頁的標頭都指定同樣的分類(class); 一方面容易分類, 另一方面採用較易閱讀的名稱(例如: header), 將來改寫網頁或風格時, 也較容易判斷修改的部份.
而 id 則較適合用在指定特定資料, 比如網頁要讓使用者有親切感, 可以指定<tag id="loggeduser">, 當使用者登入後, 有關使用者的部份, 會以特定的風格顯示, 因為這些資料可能分散於網頁內許多地方, 並不容易歸類, 所以用id來指定.

3. 對於相同分類的風格, 彙整在一起
同樣的風格, 可以重複套用於許多網頁上, 所以在經過上面的重新整理後, 就可以挑出幾種風格特性:
a. 許多網頁共用的風格彙整於同一個 css 檔: 比如一般公司的產品介紹, 畫面上的配色通常都是同一套, 因此可以將共用的風格寫入 css 檔, 在網頁引用, 效果範圍最廣.
b. 網頁內的風格彙整於網頁開頭: 比如短篇論文, 文章內都有"章", "節"等區別, 會分別有不同的風格, 因此可以將對應的風格寫在網頁最前面, 對於整個網頁產生效果.
c. 對單一 HTML Tag 的風格: 對於單一的 HTML Tag , 也可以將風格都寫在<tag style="">內, 簡化 HTML Tag , 讓網頁內容更容易處理.

四、其他
雖然將網頁內容及風格分開, 可以減少網頁設計的例行性工作, 但是 CSS 本身只是一個方便的技術, 仍然有部份缺點或使用者需要注意的地方:
1. 瀏覽器間的相容性
雖然 CSS 與 HTML Tag 都有對應的標準版本, 但是各瀏覽器往往有特殊版本, 或者對於某些 CSS 語法有不同的表現; 因此設計一組風格後, 最好仍經過幾套常見, 不同核心的瀏覽器測試過.

2. CSS 無法取代美術設計
雖然 CSS 可以方便將風格彙整, 修改後直接套用, 但是在配色, 版面等美術設計上, 仍要由使用者自己來處理.

3. 建立好的檔案及風格名稱管理
對於風格, 我覺得建立自己的管理方式, 也是很重要的, 比如:
CSS檔
bamboo_common.css : 共用的青草風格(與字形無關的設定)
bamboo_en.css : 適用於英文的青草風格(與字形有關的設定)
bamboo_tw.css : 適用於繁體中文的青草風格(與字形有關的設定)

class(bamboo_en.css 或 bamboo_tw.css 內容都包含這幾個)
bamboo_header : 青草風格的標頭
bamboo_footer : 青草風格的落腳
bamboo_sidebar_left : 青草風格的左側欄

id
new_product : 新產品特殊風格

以後有新網頁時, 再直接查對應的表格即可, 而且有特定的名稱時, 將來修改網頁, 只要用 sed 找到網頁內有關風格的字串換掉就可以了. (懶? 不....是科技始終來自於人性 :lol: )

謝謝收看, 如果有任何指教, 歡迎直接回應文章.
恕我不回應特定風格的效果或語法的問題, 我比較習慣用查表的方式, 再比較效果.
冷笑話: 我的 IP 是 127.0.0.1

slime

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
(個人感想)使用 CSS 提高網頁可近性
« 回覆 #1 於: 2006-09-11 00:27 »
(個人感想)使用 CSS 提高網頁可近性(註0)
1. 哪些功能會降低網頁可近性?
2. 如何提高網頁可近性?
3. CSS 可以提供哪些替代方案?
4. 感想與其他.

註0: 也有人稱為"無障礙網頁", 不過我比較喜歡用"網頁可近性"這用語.

1. 哪些功能會降低網頁可近性?
隨著科技進步, 網頁的設計往往有幾個特徵:
a. 圖文並茂
b. 動態功能多
c. 選項層次多
d. 輔助程式多

卻也造成了這些情況:
a. 身心障礙網友難以瀏覽
b. 佔用資源多(網站空間及頻寬)
c. 著重手段(技巧及花樣)忽略目的(內容呈現)

特別是這些技術:
a. Flash : 佔用資源多(CPU運算, 記憶體), 無法透過搜尋器找到資料, 受限特定數種瀏覽器(至少要有安裝 Flash Player Plug-in ).
b. Script : 無論是 JavaScript 或 VBScript , 在純文字瀏覽器(註1, 2)上難以發揮作用.
c. "不適當"的網頁設計: 透過純文字瀏覽器(註1, 2), 可以發現許多網頁的順序, 與圖形化的效果完全不同; 特別是透過輔助設計程式來處理的網頁(例如 FrontPage 或 Dreamweaver 等).

註1: 如果網頁能用純文字瀏覽, 也就可以配合發聲器或點字轉換器, 給身心障礙朋友"瀏覽", 還是有其他輔助性的瀏覽器可以選用.
註2: 文字瀏覽器在 Linux 或 Windows 環境都可以找到, 可以選用 lynx , link , w3m 等.

2. 如何提高網頁可近性?
雖然 FrontPage 或 Dreamweaver 做出來的網頁會降低可近性, 但是對網頁設計人員提供不少方便, 所以也不必堅持土法煉鋼(用記事本來拼 HTML tag), 而是在設計時, 記得一些原則, 提高網頁可近性:

a. 區分重要的內容與次要的內容
比如 Flash 與 Script , 雖然可以提供更多變化及動態, 所以用在娛樂等次要效果時非常有用; 但是重要的內容, 就要避免使用 Flash 與 Script .

b. 注意網頁產生的順序及網頁結構
比如功能表, 下拉選單等, 在一般瀏覽器上是點選時才會顯示, 但是在文字瀏覽器, 就要注意該功能的順序是否出現在適當的地方, 比如:
代碼: [選擇]
文字瀏覽器看到的較不適當結構:
 子選單1
 子選單2
 子選單3
主選單
內容

代碼: [選擇]
文字瀏覽器看到的較適當結構:
主選單
 子選單1
 子選單2
 子選單3
內容

另外也還是要注意這些選單有沒有使用 Script 功能, 以及有些選單在文字瀏覽器下並不需要連結, 則建議取消<a href="">等做法, 讓文字瀏覽器不會以為這邊有連結.

c. 增加必要的註解, 減少不必要的註解.
比如在嵌入圖形(<img>)時, 可以加上 alt= 為圖片提供說明, 而使用 lynx 瀏覽時, 原本的圖片就會顯示 alt= 提供的說明; 但是有些圖片是為了在排版上佔用空間, 或是為了美觀的輔助性圖片, 加上說明反而會造成閱讀上的障礙, 比如:
代碼: [選擇]
小花圖示 公司簡介 產品介紹 .... 小花圖示
所以必要的 logo , 照片說明, 產品圖示說明等, 加上適當的說明是必要的; 而輔助性的圖片, 則應該減少不必要的說明.

註3: 雖然 W3C 建議用<object>取代<img>, 不過我用起來還不太習慣.

3. CSS 可以提供哪些替代方案?
以往有不少網頁, 使用了 HTML 的表格(<table>), 定位(<align>, <valign>), 空格(&nbsp;)等方式, 作為排版的定位; 但是這做法有些不方便的地方:
a. 跨瀏覽器相容性低: 比如不同瀏覽器對於定位採用文字底線或文字中線, 就會造成不同瀏覽器看到的效果不同.
b. 多種設定互相影響: 比如設定字形時, 會改變空白的大小及位置等.
c. 維護不方便: 由於整個網頁大致是從左到右, 從上到下; 所以中間插入的物件, 會影響右邊及下方的物件位置.

使用 CSS , 可以提供幾個方向:
a. 將內容分段:
利用 divspan 等語法, 可以將完全不相關的內容分段, 再各自賦予不同風格.
b. 取代排版用的表格與空白:
透過 positionleft, right, top, bottom 等語法指定選單位置, 取代使用表格的排版方式.
c. 提供其他訊息:
CSS 也提供了 display, visibility 等顯示控制的語法, 可以指定某些資料平常不顯示, 而使用不支援 CSS 的瀏覽器時才出現.

比如一般瀏覽器看到的:
代碼: [選擇]
選單列
主標題
次標題
內容

採用 CSS 時, 可以先以 div 將網頁四個項目分開, 改變網頁的結構後, 再使用 position 等語法改變選單列位置, 讓一般瀏覽器看到的畫面相同, 而純文字瀏覽器可以更容易閱讀:
代碼: [選擇]
主標題
次標題
內容
選單列


4. 感想與其他
在實作過程中, 覺得提高網頁可近性, 可以提供身心障礙網友更方便瀏覽外, 把內容與風格分開, 也更容易產生"列印版"網頁, 以及把網頁內容改成 XML 版, 應用於 RSS 上, 只要想著: 內容 => 文字模式 , 內容 => 稍微修改產生 RSS , 內容 + 風格1 => 一般網頁 , 內容 + 簡化風格 => 列印版網頁.

另外也參考了行政院研考會的無障礙認證, 看過受認證的網站後, 覺得還是自己拿多種瀏覽器測試, 比申請那認證實用多了.  :evil:
冷笑話: 我的 IP 是 127.0.0.1