{|ihower.tw| blog } » CSS http://ihower.tw/blog Ruby, Ruby on Rails, Mac and Agile development Sun, 05 Sep 2010 05:43:39 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Bulletproof Web Design http://ihower.tw/blog/archives/1461 http://ihower.tw/blog/archives/1461#comments Mon, 21 Aug 2006 16:47:01 +0000 dick http://ihower.idv.tw/blog/archives/1461 這篇書評跟摘要是我向某網頁設計師 Dick 邀稿的，Dick 目前正潛心研究CSS中。

0321346939.jpgBulletproof web Design
無懈可擊的網站設計
Improving flexibility and protecting against worst-case scenarios with XHML and CSS
用XHTML和CSS來改善網頁彈性並針對最差的情況作準備

基本上，這本應該說是CSS入門。導入的觀念相當強調網頁的親和力，裡面有很多NOTE和TIP很一針見血。整本書都著重在設計階段的全盤考量夠不夠，尤其在不同解析度或是不同字體大小的狀況下整個頁面會不會走樣，你可以暸解到一般設計容易犯的缺點，也順便教你怎樣可以設計的更好考慮到更多種的狀況。

如果是要自己開始親手打造網頁，這本書算是不錯的入門引導。對那些拿CSS來做純粹文字樣式的人很適合，中級以上的想學習的話直接看看他的最後一章範例大概就能夠窺探整本書的精神了。

第一章 活動的文字

  • 以關鍵字指定文字大小，提供使用者掌控、提高彈性。
  • 考量IE的使用者需能自動調整字的大小
  • 善用關鍵字定義讓使用者可以很容易的理解以及控制
  • 使用百分比定義字體能夠使整個網站字體獲得整體有效控制
  • 即便在瀏覽器的初始設定;仍然可提供較好的文字瀏覽

第二章 高延展性的導覽

  • 提高導覽本身的延展性;不論前景的文字多寡或是多大;導覽的內容量都能夠處理不同的情況
  • 避免採用圖片做導覽連結;容易造成低階使用者無法正常瀏覽
  • 利用簡單的法則來設計導覽(善用水平條列),提高親和力以及各種瀏覽器或裝置的接受程度
  • 以純文字做的導航容易維護;不需要像圖片一樣每次都要修改原始圖檔
  • 導覽背景在設計的階段應該要考慮到當文字變大時；應該還是要能讓使用者正常瀏覽

第三章 可擴充的表列

  • 盡量少對水平元件指定高度
  • 可適當的把背景設計在CSS之內有助於程式碼的精簡
  • 利用背景可以以百分比位置固定在兩側的浮動方式來設計水平元件
  • 例用兩個背景靠其左右;可以讓元件因應不同的寬度作變化
  • 設計之前要先想好元件的擴充性; 高度和寬度問題;背景會不會穿梆

第四章 創意浮動

  • 以浮動元件達成表格的效果。
  • 一開始設計的時候就先考慮最優的設計方式來設計複雜的結構;
  • 標題前面可以利用浮動方式加入圖片;並且讓圖片與文字水平對齊
  • 多做幾種測試來確認你的浮動版型不會因為不同的設定產生無法瀏覽的狀況

第五章 不會破格的方框

  • 先替不知道內容的方框樣式作準備
  • 利用兩張背景圖片來設計固定的寬度的橢圓角方框
  • 需要考慮內容高度或寬度來設計背景
  • 兩張背景或許只各用到一部份;但是組合起來仍可以正常瀏覽 

第六章 不支援圖檔？不支援 CSS？沒有問題。

  • 確保內容在不支援圖檔、CSS 的瀏覽器之內仍能正常顯示。
  • 10秒鐘來測試你的網頁圖片和CSS是否容易閱讀;並不斷因應更多的情況修改設計
  • 背景能夠採用色碼就用色碼;好過採用背景圖；確保低頻寬用戶可以快速讀取頁面
  • 加強驗證可以減少頁面設計的錯誤

第七章 表格的轉換

  • 移除資料表內的展示設定，重新以 CSS 整修。
  • ＜table Cellspacing=”0″＞並移除表格內的寬度背景和邊距設定,重新寫在CSS
  • 記得要寫caption
  • 利用th和td的屬性來設計表格
  • 可以利用tr加入背景設計

第八章 活動的版型

  • 實驗能擴大、收縮的頁面佈局。
  • 採用float屬性來設計滿版FOOTER的多欄式版型
  • 利用百分比相減可設定各欄之間的寬度和相隔或是利用外包DIV的方式來設定每個欄寬
  • 實驗等高可變動的多欄位的設計方法

第九章 整合應用

  • 將「無懈可擊的概念」應用到整個頁面設計裡。
  • 把前幾章提到的設計方法同時應用到一個例子
  • 針對高度和footer問題以及CSS HACK的註解說明
]]> http://ihower.tw/blog/archives/1461/feed 2 針對 IE 的 CSS 做補強支援 http://ihower.tw/blog/archives/1328 http://ihower.tw/blog/archives/1328#comments Wed, 15 Mar 2006 15:34:11 +0000 ihower http://ihower.idv.tw/blog/archives/1328 大家都知道 IE 6/5.5 支援的 CSS 少了幾樣重要的東西，這時候用以下的 javascript 就可以做修正了:

當然大家都改用 Firefox 是很美好，但是我比較期待微軟趕快讓大家都 自動更新到 IE7 吧，這比較可能發生 ~  

另外如果還有用別的 Javascript 的話，小心可能衝到 (我用 script.aculo.us 就跟 Edge Positioning 那個衝到了@.@)。之前有提過 dean.edwards.name/IE7/，試著通盤解決 IE 的 CSS 問題，不過很可惜周邊效應太多無法預期，跟其他 Javascript 混用出問題也很難debug，實在很難實戰用途。

]]> http://ihower.tw/blog/archives/1328/feed 0 The 10 Best Resources for CSS http://ihower.tw/blog/archives/1159 http://ihower.tw/blog/archives/1159#comments Tue, 16 Aug 2005 17:44:05 +0000 ihower http://ihower.idv.tw/blog/?p=1184 http://www.sitepronews.com/archives/2005/july/20.html

]]> http://ihower.tw/blog/archives/1159/feed 0 修正 IE CSS 三個小js http://ihower.tw/blog/archives/1157 http://ihower.tw/blog/archives/1157#comments Wed, 10 Aug 2005 18:08:32 +0000 ihower http://ihower.idv.tw/blog/?p=1184 一直被IE不支援CSS min-height所苦…
本來以為之前找到的 IE7 http://dean.edwards.name/IE7/ 可以解決所有IE CSS煩惱…
但是用下去發現他更動了很多地方… 讓本來看很多沒問題的地方又亂掉了… >”<

心血來潮找找Google吧~看有沒有小巧簡單的解決方案…
結果找到 http://www.doxdesk.com/software/
作者提供三個IE fix的js程式，而且是 use freely
只要include就可以修好IE了… 真是方便好用… :D

]]> http://ihower.tw/blog/archives/1157/feed 0 Developing With Web Standards http://ihower.tw/blog/archives/1145 http://ihower.tw/blog/archives/1145#comments Fri, 29 Jul 2005 15:34:16 +0000 ihower http://ihower.idv.tw/blog/?p=1184 http://www.456bereastreet.com/lab/developing_with_web_standards/

將架構語呈現分離的作法，Johansson 的論文

]]> http://ihower.tw/blog/archives/1145/feed 0 Beautiful Interfaces with CSS The beauty of CSS http://ihower.tw/blog/archives/1143 http://ihower.tw/blog/archives/1143#comments Thu, 28 Jul 2005 15:16:34 +0000 ihower http://ihower.idv.tw/blog/?p=1184 http://stopdesign.com/present/2004/ddw-seattle/beauty/

承上一篇… 這篇講CSS… 不只是簡單介紹而已喔… 後面有講到advanced技法… :D

]]> http://ihower.tw/blog/archives/1143/feed 0 No More Tables http://ihower.tw/blog/archives/1142 http://ihower.tw/blog/archives/1142#comments Thu, 28 Jul 2005 14:42:59 +0000 ihower http://ihower.idv.tw/blog/?p=1184 超讚的CSS教學文

http://www.stopdesign.com/present/2004/ddw-seattle/tables/

投影片超漂亮.. 而且有實用的例子喔…

]]> http://ihower.tw/blog/archives/1142/feed 0 CSS 透明 http://ihower.tw/blog/archives/1141 http://ihower.tw/blog/archives/1141#comments Thu, 28 Jul 2005 14:35:01 +0000 ihower http://ihower.idv.tw/blog/?p=1184 http://www.domedia.org/oveklykken/css-transparency.php

跟

http://www.domedia.org/oveklykken/css-transparency-image.php

]]> http://ihower.tw/blog/archives/1141/feed 0 CSS Image Maps http://ihower.tw/blog/archives/1105 http://ihower.tw/blog/archives/1105#comments Wed, 22 Jun 2005 01:07:02 +0000 ihower http://ihower.idv.tw/blog/?p=1184 介紹類似Flickr的圖片上加註的做法…

http://www.frankmanno.com/ideas/css-imagemap/#

]]> http://ihower.tw/blog/archives/1105/feed 0 CSS 國外資源整理 http://ihower.tw/blog/archives/1031 http://ihower.tw/blog/archives/1031#comments Thu, 07 Apr 2005 06:14:52 +0000 ihower http://ihower.idv.tw/blog/?p=1184 http://www.dezwozhere.com/links.html

一大堆… ^^||

]]> http://ihower.tw/blog/archives/1031/feed 0 TopStyle CSS / XHTML / HTML Editor http://ihower.tw/blog/archives/975 http://ihower.tw/blog/archives/975#comments Wed, 09 Feb 2005 11:52:32 +0000 ihower http://ihower.idv.tw/blog/?p=1184 之前好像沒有介紹過CSS編輯器 & 剛剛介紹PHP編輯器

http://www.bradsoft.com//topstyle/index.asp

雖然只有 Lite 版可以免錢用… 但也是不錯了…
最常用的兩個功能:關鍵字幫你快取輸入跟選取子的選單有就好了.. :p

]]> http://ihower.tw/blog/archives/975/feed 0 Web Standards Solutions http://ihower.tw/blog/archives/958 http://ihower.tw/blog/archives/958#comments Fri, 28 Jan 2005 14:48:48 +0000 ihower http://ihower.idv.tw/blog/?p=1184

又k完一本了… XD
前半講標籤運用… 還蠻實用的…
他會提出幾種方法來討論優缺… 很啟發性…
後半講CSS… 我就沒有認真唸了(大都知道啦~)… :p

待整理到wiki.

]]> http://ihower.tw/blog/archives/958/feed 1