網頁設計相關文章

在設計網頁時通常會加進一些豐富活潑的動畫特效，不僅能夠增進瀏覽者與網頁的互動性，也加強了設計上的視覺效果。而CSS3提供了不少相關的特效屬性，但是語法相當複雜，因此，我們來介紹一個可以直接套用CSS3特效的套件，讓你輕鬆展示網頁效果。 首先到套件下載網站 ianlunn.github.io/Hover   裡面有許多簡單特效   還有icon的特效   點Clone or Download 下載   解壓縮檔案，點進CSS的資料夾 找到hover.css或是hover-min.css，將這支css放到自己的專案裡。並家連結在檔案裡。   那麼重點來了，該如何套用這支css裡的特效呢？ 首先到下載網站(ianlunn.github.io/Hover)裡，開啟瀏覽器的使用者開發工具(例：chrome瀏覽器－在頁面上按右鍵-->檢查），找到自己想套用的特效，看class的名稱。   例如想要套用shrink的特效，便打開工具檢查發現此特效的class名稱為''hvr-shrink''，便複製這行到自己的檔案裡欲套用的項目，就可以直接使用了唷！  

設計字型永遠不嫌多，雖然台灣網頁在內容上中文字佔大部分，但是適當地加上美觀的英文字，可以提高整體的質感唷！ 這次來介紹相當方便也算常見的英文字型下載網站－1001 fonts https://www.1001freefonts.com/ 上面的類別繁多、清楚明瞭，分類上也相當仔細，可以幫助你更快速地找到想要的字型。   選好想要的風格類別後便會跳出該風格的搜尋結果，只要按右邊的「download」鍵即可下載。   點進字型可預覽   下載有分100%免費和供個人免費使用，如果只想免費使用但又有可能用在商業用途時可以選擇此類，而標示為供個人使用(Free for Personal Use)的字型，這類型的若要商業使用的話，必須選擇購買(Buy Commercial License)。購買方式依據作者不同而有不同的價格和方案。 如下圖的字型價格為20美元，買到的字型就是擁有不可轉讓、可商業使用的永久權利。另外也可以捐贈作者(Donate To Designer)支持一下唷！  

Elastislide是一款精美的響應式jquery圖片循環展示套件，類似底片的排列方式，水平垂直皆可，只要點其中一張圖片即可觀看大圖，實用而常見。 首先到https://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/下載壓縮檔，解壓縮後便會有此特效所需要的CSS和JS。 而此網站也提供了相關範例可以參考唷。https://tympanus.net/Development/Elastislide/   以下以Example 4 ( https://tympanus.net/Development/Elastislide/index4.html )為例。   HTML 前面放大的原圖，後面放排列的小圖。     CSS 直接放入elastislide.css、custom.css、demo.css的連結，別忘了修改檔案的路徑唷！ 若想修改樣式可更改demo.css內容的設定   JS 同css一樣放入以下連結：      

在網頁設計上時常需要放許多內容，但是如果照實排列會使得版面顯得冗長，因此為了節省空間，許多網頁會使用Tab頁籤的展示方式，使用者點擊想看的標題(頁籤)，其下的內容就會展開，反之其他內容則會隱藏起來，因此可以自由選擇想看的內容來點擊進行切換，相當方便且常見。而這功能用jQuery再加上CSS美化便可以直接實現了！   1. 首先在最外圍設個div   2. 將要做的頁籤內容(即點擊後展開之內容)設個共用的class，並以id命名，以便之後製作頁籤可以各自對應其內容。 例如：   3. 之後用ul、li 製作頁籤，設a連結至該對應內容。 例如：   整體html   jQuery設定 裡面的class名稱換上自己的命名。   之後寫一些CSS加以美化，就是最基本的Tab頁籤切換效果囉！ 範例： See the Pen <a href='https://codepen.io/bok770/pen/qVYyvx/' _fcksavedurl='https://codepen.io/bok770/pen/qVYyvx/'>qVYyvx</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.

若在網頁製作時，預期頁面在載入時必須花較長時間時，通常會在等待網頁載入的期間加入一個loading的動畫圖示來表示，避免用戶誤以為網頁無回應而離開，若是圖示美觀有趣的話，甚至會吸引瀏覽者的注意力。   我們來介紹一個方便製作圖示的網站是loading.io( https://loading.io/)，是線上loading動畫圖示產生器，支援gif、SVG、CSS、APNG，尤其是SVG相較於gif檔案更小，圖案也較不失真，是很好的選擇，而APNG跟gif差在支援的色彩較多在表現上更豐富(24bit)，gif則只有8bit。   loading.io目前提供了許多圖示可以使用，快速又便利，有免費的跟付費的。   在設定上可以依自身需求調整右方的選項，依圖示的不同，可以調整的部分也有些許差異，除了最基本的色彩、尺寸、背景色和動畫速度之外，若一個圖示內含有好幾個物件，有的還可以調整各自的顏色，甚至是輪廓的設定也可以很自由，比如例子中的圖示，不僅可以調整方塊長寬的數量(Block Count)，還有方塊間的間隔(margin)、方塊的寬度(block width)，非常有彈性。   下載步驟如下：   首先選擇一個想要的圖示，依調整顏色、尺寸、動畫速度等等。 設定好之後按「download」即可下載，如前面所說有四種格式可挑選，之後就可以拿來自由使用了唷！   分別選擇四種格式下載後的檔案，十分快速方便！

通常我們在設計網頁切版時，很少會切不規則的形狀，但現在可以透過CSS設定來給圖片作多種形狀的繪製了唷！但是在數值的設定上太過複雜而難以上手怎麼辦呢？別擔心，有個線上繪製器可以直接使用喔！只要利用CSS clip-path maker設定clip-path屬性，就可輕鬆產出自己想要的形狀了唷！   首先我們到CSS clip-path maker網站：http://bennettfeely.com/clippy/   右邊有許多現成的幾何形狀可以選擇。   下方有尺寸的設定並提供了一些背景圖片做參考。   可以先在右邊填上尺寸，再選好想要的形狀後，依自己需求調整錨點以改變輪廓。   調整好了之後複製最下方的原始碼，加上尺寸(width和 height)的數值，就可以使用了。   範例： See the Pen &lt;a href='https://codepen.io/bok770/pen/pdeoxb/' _fcksavedurl='https://codepen.io/bok770/pen/pdeoxb/'&gt;pdeoxb&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.   利用此項線上工具可以對背景圖片快速地進行裁切，增添網頁設計上排版的趣味度和豐富性，不妨嘗試使用看看喔！  

在網頁設計時，有時會需要製作圖片互換的效果，只要用CSS就可以實現，還可以加入淺入淺出的動畫效果唷。 首先將兩張圖片透過定位(position)疊在一起，然後將原本顯示的圖片透明度數值設定成0，這樣滑入時就能看見疊在底下的圖片，如此一來，只需要少少程式碼，也無須寫JS，就可以達成簡單的圖片切換了。是不是很簡單呢？ HTML   CSS   成果如下 原本顯示如圖   滑入後切換第二張圖    例子： See the Pen &lt;a href='https://codepen.io/bok770/pen/yPejPN/' _fcksavedurl='https://codepen.io/bok770/pen/yPejPN/'&gt;yPejPN&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.

在設計網頁時，有時需要調整圖片的透明度，如我們所知用CSS調整透明度的作法就是設定opacity屬性，然而設置此屬性的元素都會受到其影響，也就是說，若只是單純想調整圖片的透明度，設定opacity屬性之後，卻會連帶地使得置於其上的文字也一起具有透明性，然而又不希望文字也跟著透明化，這樣的情況該如何解決呢？ 一般在設定opacity時可能會如以下情況，以設60%不透明度為例，我們可能會設opacity:0.6，但是如此一來，文字的透明度也跟圖片一起變化了(如最下方範例的第一塊div)，此時我們可以將顏色的設定改以CSS3的rgba(red, green, blue, alpha)來表示，rgba最後的a代表alpha，是指透明度，設定的數值從0到1，例如60%不透明度要設成0.6，rgba(red, green, blue, 0.5)，如最下方範例的第二塊div。 但是這屬性IE6、7、8不支持，IE9及以上版本和其他瀏覽器都支持。   因此若是要只針對IE6、7、8的兼容性的話，還有一個方法便是使用filter:Alpha(opacity=x)，x 的取值從 0 到 100，例如60%不透明度便是filter:Alpha(opacity=60) ，範例如最下方的第三塊div。 因為此範例僅是針對IE6、7、8、9，所以對IE10及以上版本和其他瀏覽器不會起作用。 範例： See the Pen <a href='https://codepen.io/bok770/pen/vWBrOm/' _fcksavedurl='https://codepen.io/bok770/pen/vWBrOm/' _fcksavedurl='https://codepen.io/bok770/pen/vWBrOm/'>vWBrOm</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.  

fancybox是乾淨美觀的jQuery燈箱套件，在相片的展示上呈現簡潔漂亮的視覺效果，在網頁設計上泛用性高。  fancybox官網(http://fancyapps.com/fancybox/)有幾項描寫詳盡的範例，可以依據自己需求選擇適合的demo來做。 首先到官網下載有全部檔案的壓縮檔，以自己所設的連結放進裡面 href裡放的圖片連結是點擊後放大的圖，img src裡的則是小圖，class部分為自己命名。   範例：https://codepen.io/bok770/pen/yoEVvm  See the Pen &amp;lt;a href='https://codepen.io/bok770/pen/yoEVvm/' _fcksavedurl='https://codepen.io/bok770/pen/yoEVvm/'&amp;gt;yoEVvm&amp;lt;/a&amp;gt; by Ya (&amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;gt;@bok770&amp;lt;/a&amp;gt;) on &amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;gt;CodePen&amp;lt;/a&amp;gt;.

網站的運行速度對於瀏覽量占有舉足輕重的影響，而影響速度的原因之一就是圖片！ 圖片若尺寸太大或數量太多勢必會跑得比較久，就算只是幾秒的差異，但這就會使得用戶等得不耐煩而離開網站，導致跳出率提升，對網站排名也會有不好的影響。 那麼該怎麼處理圖片才能減低對網站速度的影響呢？首先就是將圖片的容量壓到最低，但該如何既不影響到圖檔本身的畫質，又可有效降低容量大小呢？   這篇就來介紹線上的圖片壓縮工具－TinyPNG，還有另一個網站是TinyJPG，可以針對這兩種圖檔，在不破壞原有圖片品質的情況下，進行最佳化的壓縮。   TinyJPG：https://tinyjpg.com/ TinyPNG：https://tinypng.com/   1. 進入TinyJPG網站後，可以直接將欲壓縮的圖片拖進虛線框中，不過一次的壓縮張數是有限制的唷！最多可以壓縮20張圖片，如果數量很多的話必須分批壓縮。而單張照片的容量則不能超過5MB。   2. 在上傳完之後，TinyJPG就會開始進行壓縮，並顯示壓縮後的大小以及節省了多少容量。