文章專區

網頁設計相關文章

WINDOW RESIZER為chrome瀏覽器的擴充外掛套件,可以模擬各種螢幕的寬度及高度,而如今的手機螢幕長寬比琳瑯滿目,除了提供幾款常見的尺寸(1080X768、640X480等等)以外,若要特地針對某個機型做數值設定的話,WINDOW RESIZER也可以自己設定尺寸幫助設計師調整畫面。   首先到chrome套件安裝畫面,加到CHROME     之後便可在右邊看到外掛安裝的圖示,點開會看到預設的一些基本尺寸。     點選上面想要預覽的尺寸,視窗即可跟著縮放到指定的長寬。     若要自定義螢幕大小,首先點擊右邊齒輪圖示(setting)     接著便會跳到設定畫面,點選presets     會列出目前可以選擇的尺寸,按右上角的加號圖示即可新增   如此便可以使用新增的尺寸了唷! 
 我們在作視覺設計時,在字型的選用上,若想要嘗試平常不用的字型,可能會需要一個個試,相當麻煩,尤其如果安裝的字型一多,會顯得浪費時間和心力,如果可以一次看到所有字型顯示的樣子,就方便許多了,而現在線上就有提供預覽字型的網站唷!只要打上文字,按下Enter,網站就會直接顯示你電腦裡所安裝的所有字型,十分快速! 以下介紹兩個:MyFontbook 與 wordmark   MyFontbook是線上字型檢視器,不僅可以預覽字型,而且可以根據個人的使用習慣分類和加標籤,甚至能夠替字型評分!不過加標籤和評分等這些功能,都必須註冊帳號才可以使用,註冊步驟很簡單,只要有電子信箱與密碼即可唷。   進入首頁後按「Launch Viewer」     網站會請你登入或註冊,如果還不想註冊的話可以按右邊的「Demo」,但要注意的是Demo版有些功能無法使用唷。      wordmark (https://wordmark.it/) 比起MyFontbook更加直覺方便,但功能方面跟MyFontbook相較之下,就較簡陋了,只提供預覽字型,而沒有加標籤等功能。 而字型又分成個人電腦擁有的以及Google Fonts。 到首頁,輸入你想檢視的文字,按下「Enter」,即可顯示唷!          
在網頁上的區塊是依照html的書寫順序排列,但如果換成設計RWD自適應網頁時,有時為了閱覽方便或其他需求,會需要將原本的區塊順序作更動,雖然可以用float浮動或是position定位來設定,在調整上較為麻煩,這時我們可以使用flexbox(詳細介紹請看: CSS3的flexbox版面配置-flex container(容器)可用的屬性和CSS3的flexbox版面配置-flex items(子項目)可用的屬性) 裡的order屬性,此屬性可以直接以數字設定區塊的前後順序,非常快速!   首先寫一個html框架,內有四個div區塊,為方便區分設定order的前後差異,依照html裡的順序分別設001、002、003、004。 將最外圍的div的class命名為container,設display:flex   顯示出的如下圖   然後設order屬性,此範例設定四個div的順序為反過來,在html碼裡排列第一的div(001)設為order:4,以此類推。   為方便看出差異,另外加上每個div的order數值   可以清楚地發現,div的排列會跟著order的數值作更動。
網頁設計上時常需要各式各樣的icon,網路上也有許多資源可以使用,像是知名的Font-Awesome(可看此介紹Font-Awesome-簡單又好用的icon素材網 ,只要一行字即可直接使用!) 若想嘗試不一樣風格的話,不妨來試試這款線稿風格的icon,讓整體畫面看起來更清爽! 首先到下載網址 按「Clone or Download」即可下載   下載回來將檔案解壓縮後,有個「fonts資料夾」和「style.css」,只要將這兩者放到你的檔案目錄裡即可   打開index.html就可以看到圖示和各自對應的class名稱一覽表   先將style.css置入連結,然後複製要使用的圖示名稱,貼到class裡去,就可以使用了唷!   比如說我要用icon-documents這個icon,便將它加進class裡。   還可以根據自己的需求更改圖示大小唷,相當實用。
雖然電腦有內建截圖工具,但是大部分只能截取全螢幕,如果需要截整條頁面時,就必須滑動滾輪分段截,然後再用修圖工具拼起來,相當麻煩。不過現在有個chrome外掛套件可以輕鬆截取整個網頁唷!讓你不用再特地分好幾次截圖了!   首先到外掛頁面選取,點選「加到chrome」。 下圖因為已安裝外掛,所以上面直接顯示的是「已加到chrome」   FireShot安裝外掛請點此   在想截取的頁面上按右鍵,移到「捕捉網頁截圖 -捕捉FireShot的」,選擇「捕捉整個頁面」,或是依自己需求也可以選擇「捕捉可見部分」,也就是全螢幕。   如此就可以另存為圖片囉,圖檔為PNG,也可以保存成PDF檔。   如此便可以存到完整的頁面了喔!  
在設計網頁時通常會加進一些豐富活潑的動畫特效,不僅能夠增進瀏覽者與網頁的互動性,也加強了設計上的視覺效果。而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」即可下載,如前面所說有四種格式可挑選,之後就可以拿來自由使用了唷!   分別選擇四種格式下載後的檔案,十分快速方便!