CSS | The Will Will Web

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

電子報的版型越來越難設計了

由於我們公司有提供電子報發送平台的服務,目前也有不少客戶利用我們的平台發送與管理電子報,有些客戶僅僅發送 E-DM 都是提供整張圖片發送出去,所以比較沒有版型壞掉的問題,但有些客戶發的是有許多內容的電子報,這樣的電子報若是經過網頁設計師精心設計過的話,恐怕是會失望大過於成就感的。

... 繼續閱讀 ...

分享 30 多種動態的頁籤(Tab)介面與 Accordion 相關程式

我想大家都知道何謂頁籤(Tab)頁面,不過你知道網路上大家都怎麼使用頁籤嗎?最近看到一則 30+ Animated Tab-Based Interface and Accordion Scripts 文章,裡面介紹了 30 多種頁籤介面,每一個頁籤介面都有原始碼可以下載,也都有提供預覽(Preview)頁面可供線上測試,多看看別人的創意,自己也會想出不少新點子。

... 繼續閱讀 ...

介紹好用工具:Firebug ( Web 開發人員必備的工具 )

Firebug 應該是所有開發人員必備的工具了,這是一個 Firefox 的外掛程式,它提供一大堆跟 Web 開發相關的工具,可以幫助你編輯、修改網頁的 DOM 物件,對 JavaScript 除錯,可以查看任何一個元素的 CSS, HTML 設定,還可以分析網頁下載的效能,甚至於還可以自己寫程式擴充 Firebug 的功能,功能多到很難一下學會所有功能。

... 繼續閱讀 ...

撰寫跑馬燈/廣告輪播的好工具:jQuery Cycle Plugin

jQuery 是我最常用的 JavaScript Library,而且外掛程式超多,有空的人是可以多上去看看有什麼新玩意,保證有許多驚喜!我大約是在一年前得知有 jQuery Cycle Plugin 這個 jQuery 外掛套件吧,當時為了找一個可以「跨瀏覽器」的廣告輪播套件找了好久,也試用了好幾套,不過大部分廣告輪播或跑馬燈的 JavaScript Library 都不盡理想,最後才選擇用 jQuery Cycle Plugin 來做為跑馬燈/廣告輪播的撰寫工具。

... 繼續閱讀 ...

修正 IE 5.5 / 6 不支援 PNG 圖片透明背景的問題

IE 5.5 / 6 只要遇到有使用「透明背景」設定的 PNG 圖片,就會發生問題,原本應該要透明的部分都會變成灰色的,而這個小瑕疵一直到 IE 7 才做出修正,不過現在還有很多人還在使用 IE 6 瀏覽器,像我 Blog 的訪客當中,就還有 49.5 % 的使用者是使用 IE 6 的版本,是所有瀏覽器中所佔的百分比最多的。

... 繼續閱讀 ...

如何顯示固定寬度的 Label, 超過會顯示 ...

我們在套版的時候,常常會遇到那種「文字寬度固定」的版型,我們通常的作法都是用 Substring 將長篇的文字擷取一部份起來顯示,但問題是「中文字的寬度常常無法估計」,但客戶又要求寬度一定要跟設計師設計的一模一樣,文字太多的時候不能超出版面,以免破壞美美的版面。

... 繼續閱讀 ...

簡易克服 CSS 被瀏覽器快取(Cache)的問題

我們建置網站完成後,接下來就是將網站上線了,但當發現網站有問題要修改的時候,可能會遇到一個問題,就是當我們修改 JavaScript 或 CSS 的時候,預設的情況下 *.js 或 *.css 這類靜態網頁通常會被 Browser 快取(Cache)起來,除非你先主動清除這些快取資料,或人工將頁面重新整理才能讀到新的資料。但這個「人工手動」的動作客戶可無法接受!因為大部分網友不會知道需要做這個「重新整理」的步驟,看到的可能是錯誤的畫面、或 JavaScript 的問題。

... 繼續閱讀 ...

CSS 與網頁編碼(Charset Encoding)的關係

我之前曾經發生過一件事,就是明明載入了 CSS 檔,但是所有的樣式都無法套用,怎麼改都沒用,只要把 CSS 複製到原本網頁的 <head> 中就可以運作了,除錯了很久才發現,原來 *.css 檔的檔案編碼必須跟網頁(*.htm, *.aspx)的編碼一致,瀏覽器才會正確的辨識,且不止 *.css 也包括 *.js 與其他動態載入的文字格式的檔案都需要有相同的編碼。

... 繼續閱讀 ...

修正 The Coolest DHTML Calendar 套件在 IE 7 的定位問題

我們在輸入日期欄位時,常常用 The Coolest DHTML Calendar 這個套件來增加輸入日期的易用度,但是自從 2005 年 3 月 7 日以後,就一直停在 v1.0 版沒有更新,導致一些錯誤都沒有修正,尤其是常見的定位問題,因為 IE 7 變的比較符合 W3C 的標準了,所以在 CSS Positioning 的部分跟 IE 6 不相容,也造成了 The Coolest DHTML Calendar 這個套件的 Popup Calendar 的部分定位常常會跑掉!

... 繼續閱讀 ...