全平台網站 icon 生成器

記得早期做網頁的時候,網站完成後會另外畫一個 16×16 的小 icon,這個小 icon 會出現在網址列及我的最愛中,取代瀏覽器原本的預設 icon,成為一個私人的小特色。但後來由於設備的發展一日千里,手機、平板、iOS、Android、MAC、Windows 等等,每種平台對這些小 icon 接受的大小、格式及規範都有些許不同,如果要個別針對這些平台去製作小 icon 變得有點麻煩,且不一定有相關的設備可以提供測試,這時,該怎麼辦呢?

如何讓 Google Map 支援 RWD 的效果

我們在製作一些與行程或地點有關的網頁時,有時候會希望附上相關的地圖,好方便使用者了解附近的地理位置及規劃路線,這類的地圖應用以 Google Map 最常見,但 Google Map 內嵌到網頁的方式是使用 iframe,對一般的網頁也許不受影響,但如果遇到 RWD 的網頁時,就會發現 Google Map 提供的 iframe 並不會隨著設備的不同而去調整適當的比例,這時,你可以試試下面的方式。

如何製作一個吸頂式的選單列

一個好用的選單系統,可以幫助使用者快速找到所需的內容,如果你經常觀察網頁的趨勢,因該很容易發現許多網站開始將選單列常駐在頁面的頂部,而不會隨著頁面的捲動而消失。這樣的做法可以幫助使用者在切換頁面單元時,不用為了點選選單而去捲動頁面,算是一個很貼心的 UX 規劃。做法也有很多種,從純粹的 CSS 到 Javascript 都有,網路上也有很多現成的範例,下面我們以 On Scroll Header Effects 為例:

如何自訂 Scrollbar 的捲軸樣式

在規劃活動網站的設計時,會常遇到需要放置一些注意事項或者活動辦法的訊息,這類資訊通常會比較長篇,內容也比較乏味,但它對活動網站來說又很重要。如果沒有經過適當的整理,往往都會佔據較大的頁面空間,造成編排上的麻煩。因此大多數的時候,網頁設計師們會將這類資訊放在有 Scrollbar 的區塊內,讓這些長篇的內容可以控制在固定的範圍內。但這樣做又會產生一個新問題,那就是瀏覽器預設的 Scrollbar 樣式和網站的風格相比,如果沒有經過特別的處理會顯得非常突兀,而 jQuery custom content scroller 是一個 jQuery 的外掛,可以用來自訂上述所需的 Scrollbar 捲軸樣式,讓你在設計畫面時,可以配合網站的視覺來調整適當的 Scrollbar 樣式。

設計的素材不足時該怎麼辦?

記得以前讀復興商工的時候,有一門課程叫基礎造型。課程內容是透過尺規作圖的方式處理一些點、線、面的造型變化;像是先畫一條一公釐寬的線段,然後再畫兩公釐、三公釐、四公釐…依此類推,直線畫完改畫折線,折線畫完改曲線,或者是畫一個方形漸變到圓形、由大到小、由遠到近、由亮到暗、區分強弱,練習對一個造型的平塗、漸層、明濁等等。由於當時還未電腦化,所有的動作都要透過尺規、廣告顏料、平塗筆及鴨嘴筆一筆一畫完成,最後學期末就是要透過這些基本造型繪製一幅表板尺寸的圖像。由於這門課程的李美惠老師非常嚴格,繳交的作業如果未達李老師的標準,常常會當面撕毀,加上學長姐的種種傳說,所以對這門課的印象非常深刻。當時年幼,大多數的時間裡都無法體會這門課的趣味及重要性,只覺得平塗一個造型實在非常枯燥乏味,遠比不上可以大筆揮毫的水彩、油畫來的痛快有趣,同學們也多半苦不堪言。

如何同時 Hightline 表格中的行及列

要將表格中的某一行 Highlight 起來很容易,你只要 tr:hover{background:yellow;} 就可以完成。但,如果你想同時 Highlight 行及列的時候,麻煩就會出現,因為在現有的 HTML & CSS 中,沒有針對「列」的設定。關於這個問題 MATT WALTON 提出一個解決的方式。

CSS 屬性選擇器-新手入門篇

大多數的 HTML 標籤都包含相對多組的屬性,例如常見的連結 a 標籤可以加 href、style、target、title 等屬性,而 CSS 屬性選擇器可以讓 CSS 依屬性的差異給予該標籤不同的設定,這樣做一來可以減少 class 或 id 的使用,讓 HTML 更加精簡好閱讀,二來可以增加維護的便利性,三來可以更便利的控制網頁上的每個元素,好處不少。

如何製作 RWD 響應式的影片?

有時客戶會希望在網頁中插入一段 Youtube 影片讓畫面更活潑點,如果是一般的網頁,你只需要直接將 Youtube 的給你的 Code 嵌在網頁裡即可。但如果你正在做 RWD 的網頁,你會發現直接使用 Youtube 給你的 Code 版面會無法隨視窗大小進行縮放,這是因為 Youtube 給你的 Code 使用的單位都是 px 的絕對單位,加上影片有長寬比的問題。常見的有 4:3 及 16:9,使用錯誤的比例會造成變形。如果你將絕對單位改成百分比。比如將影片寬設成 100%,高度設成 auto。這個想法沒有錯,但實作後你會發現影片的高度不會隨寬度自動等比例縮放,造成長、寬比例錯誤而導致影片變形,因此我們需要一點小技巧,讓影片可以配合響應式網頁的縮放需要。