The Will Will Web

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

介紹好用工具:JS Bin ( 網站前端工程師的學習利器 )

我好像很久沒有介紹好用工具了,並不是我偷懶不玩工具,而是最近介紹工具的資訊大多分享在 Will 保哥的技術交流中心 為主,不知道的人記得過去按「」喔。今天這篇文章,主要介紹 JS Bin 這套好用的網頁前端工具,我覺得 JS Bin 介面非常簡潔,非常對我的胃口,雖然此工具還在不斷發展,但是目前的品質已經非常好了,因此覺得可以發表一篇文章來介紹這套工具,並分享一些不容易發現的使用技巧!

... 繼續閱讀 ...

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

設計跨瀏覽器網頁經常要在不同瀏覽器版本之間進行微調,調整的地方不一定只有 CSS 樣式,我們有時候會為了避開一些瀏覽器在特定版本下的 JavaScript 臭蟲,也會需要針對不同的瀏覽器版本撰寫不同的程式碼來因應,在這篇文章裡我會介紹各瀏覽器 CSS Hack 技巧以及 IE 條件式註解,幫助各位更輕易的設計出跨瀏覽器網頁。

... 繼續閱讀 ...

Visual Studio 11 新功能介紹:CSS 與 JavaScript 編輯器

之前在 Visual Studio 2010 中要編寫 CSS 或 JavaScript 不是很方便,充其量只能說是個「文字編輯器」而已,不能被稱為「開發工具」,但這些編輯器在 Visual Studio 11 已經大幅進化,眾多的貼心功能不得不大聲叫好,尤其是 CSS 編輯器改進的幅度最大,就讓我們來看看有哪些增進的好用功能吧。

... 繼續閱讀 ...

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

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

... 繼續閱讀 ...

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

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

... 繼續閱讀 ...

介紹好用工具:jsFiddle - Online Editor for the Web

今天介紹這工具可說是在 Web 界非常實用的線上編輯器,編輯什麼呢?就是 HTML, CSS, JavaScript 這些東西啦。以往為了要展示或分享一些 JavaScript 的功能或 CSS 樣式,必須要架設一個網站放這些檔案才能讓其他人知道這東西執行後的結果,但 jsFiddle 的出現可謂是佛心來的,幫我們「代管」這個程式碼在「雲」上,讓我們可以將任意網頁內容放上去測試、驗證、存檔、分享。

... 繼續閱讀 ...

善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度

在很久以前我們都是用 Table 在排版的,我相信現在還是有不少人還是在用 Table 進行排版而非現在較為流行的 CSS 排版,使用 Table 排版最大的好處就是版面在各瀏覽器中顯示比較不會亂掉。但最大的缺點就是版面調整不像 CSS layout 那麼方便,而且網頁出現的時間比較長,版面的問題應該無解,但表格顯示的速度卻可以利用 table-layout 屬性的設定達到目標。

... 繼續閱讀 ...

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

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

... 繼續閱讀 ...