分類: 技術

Less Framework 4

adaptive web design的CSS framework：Less Framework 4，方便好上手，應用在製作adaptive website相當快速。目前測試結果，除了PC上的IE7、IE8不支援(Who cares ?)，IE9有作用，其他最新版瀏覽器，包括chrome、firefox、opera、safari都ok。再次印證了IE系列瀏覽器的顧人怨。

實做測試網頁

讓DIV乖乖等高的方法

以下文章介紹四種常見方法
Four Methods to Create Equal Height Columns
簡體版翻譯在這

最讓人拍案叫絕的第四種方法，真的是江湖一點訣，說出來不值錢。主要靠float和position搭配使用的技巧，把DIV左移右移，就解決了多欄DIV等高配置的難題，沒有使用容易被瀏覽器版本限制的javascript，沒用到亂七八糟的CSS hack特效藥，也不像背景圖repeat-y僅適用於結構簡單易拆解的layout，況且調整版面時容易牽一髮動全身。第四種做法都沒有上述的缺點，而且完全符合CSS的解釋邏輯，這才是最根本的解決方法！只要掌握CSS最重要的定位和浮動規則，這方法的原理其實很容易懂。

第四種方法的原文如下
Equal Height Columns with Cross-Browser CSS and No Hacks
同樣的，翻譯又是簡體版……
纯 CSS 无 Hack 跨浏览器的多列等高

CSS minimum and maximum sizes

讓CSS的max-width、min-width設定在IE/Win起作用的javascript

steps:
1.先抓js檔
2.在HTML貼上<script type="text/javascript" src="minmax.js"></script>
3.在CSS設定max-width或min-width的大小

這方法比用expression語法直覺快速，缺點是沒照顧到IE/Mac的使用者，還有停用javascript的人。

網站上還有另一個很實用的工具 : Fixed positioning，用法和上面差不多，也是為了治療IE/Win看不懂"background-attachment:fixed"的毛病。

近期很流行的圖片開啟效果

 

在很多網站上陸續出現這個開啟圖片的方式，好處是不需要另開視窗，視覺效果也比較優，就連改版後的msn space也採用這個效果了。

原始檔案出處在此…..

設定方法:
1.按照以下順序，在html中塞入以下語法:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

再來是css連結
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
也要確定css中使用的圖檔有放在正確的資料夾

2..在設定連結的影像加入rel屬性，要顯示圖片說明可以加title屬性
ex:<a href="xxxxxxx" rel="lightbox" title="這裡的文字開啟lightbox後會顯示…."><img src="xxxxxx"></a>

3.相片群組設定 : rel="lightbox[xxxx]"
群組數量不限，"[  ]"中的關鍵字不同即可；群組中的圖片數量也不限。
<a href="xxxxxxx" rel="lightbox[day001]" title="這裡的文字開啟lightbox後會顯示…."><img src="xxxxxx"></a>
<a href="xxxxxxx" rel="lightbox[day001]"  title="這裡的文字開啟lightbox後會顯示…."><img src="xxxxxx"></a>
<a href="xxxxxxx" rel="lightbox[day00002]" title="這裡的文字開啟lightbox後會顯示…."><img src="xxxxxx"></a>
<a href="xxxxxxx" rel="lightbox[day00002]" title="這裡的文字開啟lightbox後會顯示…."><img src="xxxxxx"></a>

原作者另外提到一些注意事項，像是網頁尚未下載完成前，lightbox不會起作用；在lightbox中也無法置入圖檔以外其他格式的元件等等。我測試的時候發現另外一個缺憾，就是當使用者點選圖片連結，開啟lightbox，這時改變瀏覽器視窗大小，蓋住網頁內容的半透明黑色色塊還是維持原來大小，不會跟著改變尺寸。

寫到這裡才發現另一個更強大的玩意ThickBox 3.1，和lightbox類似，但支援功能更廣泛，也沒有上述的缺點。
再找時間研究看看好了……

將邊框轉圓角的Javascript

網頁上的圓角邊框非常普遍，轉角的視覺效果較柔和，沒有生硬感。一般作法是把圓角的部份包含在切圖當中，切法有很多種，置入網頁編排的方法也很多，總之都是要切就對了。有時在做這類型的視覺效果會很煩，不光是要先想好欄位是固定大小或自由大小的問題；如果還有網頁背景，背景有漸層或圖案的花樣，圓角處與背景銜接的順暢度便是製作上的門檻，經常需要反覆測試各種情況，或是修改原訂設計，確定不會出現重大瑕疵才ok，不知不覺就會佔用許多開發時間。定稿後最最不希望發生的慘劇，就是改背景，真的是牽一髮動全身………

2006年出現一樣javascriptc超級好物 : Nifty Corners Cube，我竟然最近才知道，天ㄚ~這兩年當中浪費在做圓角的時間真不值得……

原始檔在範例網頁的最下方，超級好用!! 設定簡單不說，功能還很強大!!!它對CSS selector的支援廣泛，html標籤、id、class、後代選擇器(Descendant selectors)都可以用，邊框的四個角落可以分別設定，圓角大小預設big(10px)、normal(5px)、small(2px)3種，也差不多夠用了。套用圓角設定的邊框和色塊背景銜接順暢，要注意的重點是當網頁背景採用pattern或漸層，也要一併設定和背景圖案接近的background-color，圓角處才不會出現明顯的破綻。

這個工具厲害之處不只是動態圓角，最夠力的功能是same-height的設定，它可以把要設定的欄位調整為相同高度，這非常實用!!!不然用float排版要應付棘手的欄位不等高問題，很頭痛；出一張欄位並排可以repeat-y的背景圖也不是不行，限制在於寬度定義後不能隨意變動。所以只要使用者的瀏覽器沒有停用javascript，這方法快速、直覺、自由度高，應該就是最佳方案了~~~

不過測試到目前為止發現一個same-height的缺憾….

若字型未鎖死，或採用比例單位，如百分比、em(網頁標準基本教義派超愛…)，當使用者在瀏覽器工具列更改字級大小後(如IE的"檢視">"字型">"最大")，欄位高度立即隨著字級變化後向下延伸或者縮短，但"Nifty Corners Cube"的javascript不會偵測到這個變化，same-height設定值失效，兩欄的高度會發生無法等高的情況，要等使用者自行按下"重新整理"後，javascript才會重新偵測執行，並套用same-height設定至對應的欄位，此時欄位才會回到等高的狀態。

解決這個窘境，有個最簡單的方法 : 就用css的絕對單位把字級鎖死吧~~pt或px都行，顧不了這麼多了，不然怎辦??  用javascript把工具列關掉也可以避免這困擾…. 

example

超級正點又好上手的3D Flash image gallery

tileviewer
無意中發現這個超級人性化、視覺效果一流的Flash 3D相簿，網站有提供免費下載。這個小型Flash 3D相簿網站的更新程序超級簡單，只要按照說明步驟做，三兩下就搞定了。更新相片主要有兩種方式，一是連結到相簿網站，載入個人相簿裡的圖檔，像是Flickr；另一種是自己手動更新，把圖檔丟到指定的資料夾中，再修改xml中的標籤，完成！

效果預覽

 

清除絕對定位配置

網頁用div絕對配置的方法做排版，優點是直覺快速，但最棘手的關鍵在於網頁高度的變化。一旦設定絕對配置的div下方還有內容，該div的高度就無法隨意變化，太長會蓋住下方的內容；縮短常會空出過大的留白。若是由後端更新資料的動態網頁，很難規範後續維護人員上傳的資料量，內容過多的話版面會出狀況，使用者將看到網頁上的內容出現圖層般相疊的結果，有部份內容會被絕對定位的元素遮蓋住。根據莫非定律，該發生的總是會發生，所以要事先打預防針。

針對這個困擾，Shaun Inman提出一項解決方案，只要使用者的瀏覽器設定沒有停用javascript，這方法簡單又有效~
article:
ABSOLUTE CLEARANCE
example:
Single instance

用連結語法隔離舊版瀏覽器套用CSS樣式

Step1.
Netscape4.X以前版本僅認得預設的meida=”screen”，因此採其他寫法讓Netscape4.X以前版本的流覽器跳過套用CSS，但其他較新版本瀏覽器仍可正常顯示CSS的設定樣式，如media=”all”；或是填入多種裝置媒體，如media=”screen print”
Ex :
<link rel=”stylesheet” href=”css/main.css” type=”text/css” media=”all”>

Step2.
接著，開啟main.css，輸入import其他css檔的指令，不做任何樣式設定。老舊的browser不支援在css檔中匯入其他css的作法，所以不會顯示任何樣式。另一個好處是html中都是連結同一個main.css檔，之後要新增CSS檔或是拆開原本的CSS檔，只需更動main.css中的import連結即可，不必更改html中的CSS連結，因此更便利網站的製作、維護(特別是大型網站~~)
Ex :
/*老舊browser不認得以下寫法*/
@import url(“layout.css”);
@import url(“font.css”);
@import url(“footer.css”);
/*再繼續往下import CSS檔，網頁會立即套用新增的樣式設定*/

以上內容整理自"Web Standards Solutions網頁設計標準規格"