文章專區

網頁設計相關文章

網站的運行速度對於瀏覽量占有舉足輕重的影響,而影響速度的原因之一就是圖片! 圖片若尺寸太大或數量太多勢必會跑得比較久,就算只是幾秒的差異,但這就會使得用戶等得不耐煩而離開網站,導致跳出率提升,對網站排名也會有不好的影響。 那麼該怎麼處理圖片才能減低對網站速度的影響呢?首先就是將圖片的容量壓到最低,但該如何既不影響到圖檔本身的畫質,又可有效降低容量大小呢?   這篇就來介紹線上的圖片壓縮工具-TinyPNG,還有另一個網站是TinyJPG,可以針對這兩種圖檔,在不破壞原有圖片品質的情況下,進行最佳化的壓縮。   TinyJPG:https://tinyjpg.com/ TinyPNG:https://tinypng.com/   1. 進入TinyJPG網站後,可以直接將欲壓縮的圖片拖進虛線框中,不過一次的壓縮張數是有限制的唷!最多可以壓縮20張圖片,如果數量很多的話必須分批壓縮。而單張照片的容量則不能超過5MB。   2. 在上傳完之後,TinyJPG就會開始進行壓縮,並顯示壓縮後的大小以及節省了多少容量。  
我們在使用網路上的字型時,在粗細上並不是只有正常和粗體兩種而已,Font-weight屬性可以設定字體的粗細變化,除了normal是預設值、bold是粗體、inherit是繼承父元素之外,數字設定是從100、200~900,一共有九種,此外bold粗體是700,normal是400,設定值是純數字時,不需要在後面加上任何單位唷。 下面以網頁常使用的繁中字型-微軟正黑體做示範: See the Pen MErNBE by Ya (@bok770) on CodePen. font-weight屬性相當容易使用,不妨善用這個屬性讓網頁上的字體更有變化性唷!
 之前曾介紹一個大家較熟悉的icon素材網-Font-Awesome,這次介紹的雖然也是提供icon下載使用,但是比較特別的是,Devicon提供的圖示是較偏向於技術性相關的,我們有時需要在網站放一些這種icon,以告訴客戶支援了哪些技術、瀏覽器(Google Chrome、Firefox、Safari)、使用何種設計軟體(photoshop、illustrator)製作等等,這種常見的技術相關標誌,在這個網站都找得到。 Devicon:https://konpa.github.io/devicon/ 圖示提供了SVG和字型版本(Font version)。最上方可以輸入關鍵字搜尋你要的icon名稱。   首先選擇一個圖示,這邊選擇Google Chrome的icon作示範,點了之後右列會顯示字型版本與SVG版本,各版本又有好幾種不同的外型,如示範中的Chrome,字型版本和SVG版本各有四種,不同點是加入英文字或是改了顏色之類的,可以依據自己的需求來使用。下有原始碼可直接複製到自己的檔案中使用。要注意的是字型版本需要多加一行在裡。   若要下載原檔的話可以滑到下方下載。 Devicon提供各種技術開發者會用到的icon和logo,只要複製貼上即可快速使用!
網頁設計師在寫CSS時,是不是有時會發生明明已寫好屬性設定,但卻無法套用進頁面的情形呢?遇到這情況,不妨檢查看看CSS優先權的設定唷!CSS提供許多選擇器類型,當使用不同的選擇器時,套用樣式的優先權也會不同。 這邊整理優先順序的幾個原則,讓你在寫CSS時可以更容易掌握唷!   越左邊權限越高 元素內的樣式>頁面內的樣式>外部載入 元素內的樣式 例子:   頁面內的樣式 例子:   外部載入 例子: 以@import方式載入 在頁面內以 link 方式載入   後設定>前設定 最後設定的樣式將蓋過之前設定的樣式 例子:   最後會套用的屬性是 width:250px; height:50px; background:#fff;   Id>class 由於 id 具有不可重複性,而class則是可重複的,所以 id 在層級上大於 class, 如果一個元素同時有 id 跟 class 兩種屬性,且互有所衝突時,id 優先權大於 class。   !important 為最高優先 !important 的作用為強制提高優先權,照理說越後面設定的越優先,但若使用了 !important,會使得最前面的設定成了最優先,使用!important的 CSS 樣式幾乎等於無敵。 當出現二個!important時,優先權就是依先後順序,與其它的選擇器的原理相同,因此非必要的話,最好盡量少用!important。  
展開收合效果是常見的網頁技巧,不僅提高版面布局的美觀性,也能有效縮短文章的長度, 讓我們來看看如何使用jQuery達到這效果吧! HTML CSS JS   範例:https://codepen.io/bok770/pen/qXZyPN See the Pen <a href='https://codepen.io/bok770/pen/qXZyPN/' _fcksavedurl='https://codepen.io/bok770/pen/qXZyPN/'>qXZyPN</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></div>
mmenu此套件位於側欄,可應用於RWD響應式網頁設計,選單以點擊滑動來作展開,也包括了階層式選單,相當方便套用。 首先到官網下載檔案解壓縮http://mmenu.frebsite.nl/ 接著到demo資料夾,找其中的一個範例來做,這裡找default.html來做示範   所需的css有jquery.mmenu.all.css js則需要jquery.mmenu.min.all.js  jquery.min.js可以直接從資料夾取得。 並加上   Html 首先建立個div    在page裡加入   在header裡加入   以及選單列表   範例: See the Pen &lt;a href='https://codepen.io/bok770/pen/mMPjgL/' _fcksavedurl='https://codepen.io/bok770/pen/mMPjgL/' _fcksavedurl='https://codepen.io/bok770/pen/mMPjgL/'&gt;mMPjgL&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='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' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.
平時我們在設計網頁時,常需要假圖來做預覽圖用。 這裡有個很好用的網站lorempixel ( http://lorempixel.com/ ),只要填入所需圖片的各項設定,例如像素尺寸,選擇橫向或直向,黑白或彩色、主題(EX:食物、動物、人物等等),如此就可以隨機產生網路假圖囉,而且圖片都相當精美。   可依圖片需求填入設定   如此就可產生符合尺寸需求又精美的圖片囉!    
之前介紹了:nth-child(n)和:nth-of-type(n)這兩項常見的選擇器,這次來介紹:not這個可能比較少見的選擇器。 not跟前兩者其實很像,只是選取的情況是「反過來」的,排除了指定的元素不被選取,也就是說,除了指定的元素以外的其他元素都會被選取。   寫法: div:not(:first-child){ color:red; }  div除了第一個以外其他都會變紅色 p:not(:nth-child(3n)){ display:none }  p除了3的倍數的以外其他皆不會顯示   泛用性很廣,比如要排div順序為由左到右時,可能每個div會設個margin-right:10px的間隔,而最後一個會設:last-child { margin-right: 0 } 然而你卻可以改用not來選取其他的元素,設成div:not(:last-child){ margin:10px }即可。 例子: CSS . div-list div:not(:last-child){ margin-right:10px;} 若你要設個導覽列的話,在每個標題右邊設框線(border-right),但是最後一個不用,可以這樣設:   CSS .not-list li:not(:last-child){ border-right:1px solid #fff;} 善加使用各項選擇器,對於 class選取元素的狀況,可以更靈活地應用掌握唷。  
大圖輪播已經是許多網站的常見功能了,除了在剛進入網站的時候能夠立即吸引使用者的目光以外,還可以搭配炫目的動畫達成一定的互動效果。 此套件必須包含flexslider.css、jquery.flexslider.js、jquery.min.js,可以到Flexslider官網下載資料夾。https://woocommerce.com/flexslider/   JS方面除了上述以外需加入以下   若要改項目參數可以看官網步驟四有詳細的項目列表 例:   HTML   CSS flexslider.css裡的設定可依據實際需要自由修改   範例:https://codepen.io/bok770/pen/zdvZVe  
有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用,它們到底有甚麼功用呢?各有甚麼不同呢?以下讓我們來簡單介紹一下。 大於符號(>) 大於(>)就是選取底下直接的子元素。 以大於符號(.box > p)和空格(.box p)來做比較,先看以下例子:   CSS 使用空格的情況 .box p{ font-size:20px; color:#216AAD;}   使用大於符號的情況下 .box > p{font-size:20px; color: #216AAD; } 由上可知.box p會影響到box這個div底下所有的p元素,而因為「>」只會影響到直接的子元素,所以例子中box底下直接接觸到的p元素只有001跟004,所以只有這兩者會改變。   加號符號(+)則是會影響到後方同層級的第一個元素 範例: html   CSS div + p{ font-size:20px; color:#216AAD;} 由於跟div同層級又直接位於div後方的只有003,所以只有003改變。   而取代符號(~)是影響到後方同層級的全部元素,因此除了003以外004也會改變。 div ~ p{ font-size:20px; color:#216AAD;}   雖然只是CSS撰寫上的小技巧,但是若能夠善加使用這些符號的話,將可以很好地規避每個CSS之間的影響,想必將更有利於撰寫CSS和減少class的數量唷!