The Will Will Web

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

網站建置不是件簡單的事 @ 跨瀏覽器網頁設計密技 (1)

自從上次發表【網站建置不是件簡單的事 @ 打造網站的步驟】之後收到許多網友熱烈的迴響,因此萌生撰寫系列文章的想法,為了要延續【網站建置不是件簡單的事】系列,我想對設計師來說最痛苦的事莫過於跨瀏覽器網頁設計,我們通常在設計好網頁後,會進入「跨瀏覽器相容性測試」的步驟,這時幾乎 100% 都會遇到網頁相容性的問題,同一份網頁在不同瀏覽器裡顯示時多少都會有些差異,接下來的文章就是分享一些我們經常使用的跨瀏覽器網頁設計技巧,礙於篇幅考量,我會依據不同主題拆成多篇文章撰寫。

... 繼續閱讀 ...

網站建置不是件簡單的事 @ 打造網站的步驟

在筆者這十多年的工作歲月中,大部分的時間都與網站建置這件事糾纏不清,最早期剛接觸網頁時還是用HE5 (漢書) 或 Notepad 開始撰寫 HTML 開發網站,偶爾回想起來感覺當時寫網頁好辛苦,都沒有設計工具或開發工具可用,不過若換個角度想,其實當時才是最幸福的,你想想今日的網頁設計即便有那麼多好用的工具支援,但設計網頁的過程中有變簡單嗎?有太多網頁設計相關的問題需要被克服,像是跨瀏覽器相容性的問題、互動網頁的挑戰、伺服器端的程式開發、針對海量網頁要求的架構、AJAX、JSON、HTML5、CSS3、…,有太多東西要學了。

... 繼續閱讀 ...

使用 CSS Sprites 設計網頁但不用 background-image 的技巧

使用 CSS Sprites 技巧可以有效減少 HTTP Request 的數量並且加速網頁載入與顯示的速度。簡單的來說,CSS Sprites 就是將頁面中會用到的背景圖檔全部集中放在一個圖片檔中,並利用 CSS 的 background-image 與 background-position 屬性將欲顯示的背景圖部分露出,對瀏覽器來說,如果整頁的背景圖原本有 30 張就會有 30 個 HTTP Request,但全部合在一張圖片後就只需要一個 HTTP Request 而已,還可以透過 HTTP Cache 技巧將圖片快取在瀏覽器中。

... 繼續閱讀 ...

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

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

... 繼續閱讀 ...