網頁製作

網頁中的字型呈現，都是以瀏覽者電腦有安裝的字型為主，因此，即便是網頁製作時，所使用的字體有多美觀，除非瀏覽者的電腦有相同的字型。為解決此一困擾，因此便有網頁字型託管服務，像是 Google web fonts 由 Google 所提供的網頁字型應用服務 便是一例，現在，Adobe 也推出的 Edge Web Fonts 免費網頁字型託管服務，提供超過 500 種以上的免費字型，其中也包含所有在 Google Web Fonts 裡的開放原始碼字型，使用時，只需要將其生成的 JavaScript 語法複製到網站裡，便能以 CSS 的 font-family 方式來使用該字型，相當方便。

對初學網頁製作的人來說，當需要對「按鈕」元件進行美工時，若能參考別人寫好的 CSS Code 是一個事半功倍的好方法。Call-to-Action Button Generator 是一個可即時預覽的 CSS 按鈕線上產生器，不但提供按鈕顏色、文字、陰影、ICON 等屬性自訂外，還可自動產生所需的 CSS Code 與 PNG 圖檔，讓使用者方便影用到網頁的任意處，相當方便。

網頁內包含 HTML、JavaScript 及主要內容還有就是用來排版的 CSS語法，因此當檢視網頁原始碼的時候這些全部都會出現，而 Content Parser Website 這個網站可將網頁解析、篩選過雜結構並單純提取成 Markdown 標記式語言、Html 語法或是 Text，使用方式很簡單，僅需輸入網址選擇要提取的格式，就可以在線上預覽提取後的各種格式，方便使用者做後續的應用。

如果不熟悉 HTML 與 CSS ，卻想要將自己所拍攝或蒐集來的圖片，放到網頁上，該如何做呢？Cyotek Spriter 這套免費的應用程式應該可以幫到你，從網頁布局、圖片挑選、CSS 套用、特效等，都可以透過圖形化的介面來操作，完成後，可預覽，並自動產生 HTML 及 CSS 程式碼，省去學習門檻，專注在攝影領域。

不論是海報文宣還是網頁製作都會需要美工，如何讓其中的英文字顯得生動活潑、與眾不同，就是靠字型，從既有的字型，再轉到美工軟體進行後續調整，想要取得英文免費字型，dafont.com 這個網站號稱有近 3萬之多的英文字型，供你免費下載與使用。

瀏覽網站時，如果遇到喜歡的字體，該如何找出該字體名稱與下載呢？這時候，我們可以透過 Font of Web 這個線上工具來協助，只要輸入該網站網址，便可以找出該網站所使用的字體，並產生該字體的下載連結，但，並非所有字體都能產生下載連結，另外該網站會分析輸入網址的主要的 HTML Tag 像是 h1、span、p...等的與字體相關的 CSS，這對要參考其他網站來定義自己網頁字體的大小、字重或 Line Height 也有參考價值，另外，字體下載須注意版權，該網站並不保證所下載的字體可以用於個人或商業。

雖說現在用 CSS 語法就在網頁上產生漸層效果，不需要用到圖片，但同一種語法各家瀏覽器不見得都能通用就是個麻煩，且如果是做文宣品或非在網頁上顯示的色彩漸層，大概也只能用圖片來實現。Gradient Actualizer 是一套免安裝的漸層色彩圖片產生器，只要設定好三種顏色，就能自動幫由上到下、由左至右、垂直向兩側與水平往上下的色彩漸層圖片，可以旋轉，可以自訂圖片大小，簡單且好用。

有做過網站的人一定都有相同的經驗，那就是寫好的網頁在IE6的版本顯示正常，為什麼到IE7的時候，樣式(CSS)卻不是在IE6的樣子，所以為了保持網頁在IE各個版本中能顯示正常，便在作業系統裡裝了IE各個版本，方便網頁製作時的測試與調整，而這款 IETester 的出現就是為了解決上述的問題，雖然沒有修正的功能，但是至少讓我們在測試在IE版本不同間，節省很多時間。

漸層色的運用，能讓用戶感覺到色彩的層次感，在網頁中要使用漸層色彩可以使用圖片，亦可以利用 CSS 語法來完成，但如果是用於文書、簡報、文宣美工等產品，則必免不了要使用圖片。NOISE & GRADIENT 是個線上漸層圖片產生器，透過網頁上的介面，使用者可以自行選擇漸層要搭配的顏色(最多 6種)，而使用空白鍵可隨機產生漸變色彩的各種組合，另外，還可以加入將色彩顆粒化的 CHAOS、GRAIN 兩項因子，完成後，可以免費下載 1000×1000px 的圖片。

相同的網頁在不同尺寸的電腦螢幕上所呈現的頁面視覺效果可能有些不同，通常網頁設計師，為了方便來訪的使用者，都會盡量減少使用滾動條(scrollbar)尤其是下方的左右滾動條。TestSize 是一個免費的線上服務，只要將給予網址 URL，內建有固定的 640X480、800X600、1024X600、1024X800、1280X1024、1366X768 及 1920X1024，或是自行輸入要測試的尺寸，就能測試網頁在不同的電腦螢幕尺寸中所顯示的效果。

色彩的運用不論是採純色、漸層色或兩者搭配都是不錯的選擇，以網頁要使用漸層色來說，可以使用圖片亦可以使用 CSS 語法來產生，CSSGradients 這個網站免費提供 11000+個以 CSS 語法配置好的漸層色彩模板，使用者僅需選擇要使用的色彩模板，就可以複製該模板的 CSS 語法，運用到網頁任何位置，相當方便。