文章專區

網頁設計相關文章

關於CSS的一個重要概念就是盒子模型(box model),它控制著頁面各元素的寬與高,比如當我們設定了一個元素的寬高時,所設定的數值還要再加上padding和border,最後才會是這個元素的實際尺寸。 所以若要準確控制版面不破版,原本所設定的尺寸還需要再扣掉border/padding,但是這樣每次設尺寸都要做計算,顯得太麻煩了,這時可以使用box-sizing此屬性,方便我們在設定width、height上更直觀。   box-sizing的設定值 content-box:預設值,實際寬高=所設定的數值+border+padding border-box:實際寬高=所設定的數值(已包含border和padding)   若要確保各瀏覽器皆可套用的話可直接加上以下前綴,此屬性從IE8後便開始支援:  -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;   範例: See the Pen <a href='https://codepen.io/bok770/pen/OQmeeQ/' _fcksavedurl='https://codepen.io/bok770/pen/OQmeeQ/'>OQmeeQ</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>.
Pixeden是一個提供免費資源的網站,提供的資源相當多元,最上面有五大分類-Print、Webs、Icons、Vectors、Graphics,也就是包括網頁、名片、圖示、背景素材等等,相當多元,而且都滿有質感的,就算不下載素材也可以在這裡找到不少靈感唷! 除了少部分需要註冊才可下載或是付費才能使用的功能以外,其他大部分的素材都可以自由下載。 Pixeden:https://www.pixeden.com/ 點進網頁後,在上方選擇想要的類別後,會有許多子分類,相當詳細。   如果只想找免費素材的話,可以直接點選上面的「free」類別。   滑到素材圖面上時會顯示該素材的下載和加進喜歡的次數   點進素材介紹頁面,點擊「Download」即可下載。   解壓縮後,可以看到有供預覽的jpg圖片檔和psd原檔。   點開psd檔,就有完整的包括電腦、平版、手機的模板可以使用囉。
CSS的連結樣式可以針對網頁中的連結,依據使用狀態提供不一樣的效果,能夠讓原本單純的連結有更多視覺上的變化,可以設定的屬性像是文字顏色、字型、粗細等等。   連結狀態共有四種: a:link – 一般的、未被點擊過的連結 a:visited -已被點擊的連結 a:hover - 滑鼠指標移到連結上方時的狀態 a:active - 連結被點擊時的狀態   而若這四種狀態皆要設定的話,必須依照以下順序規則: a:hover 必須位於a:link 和a:visited 之後 a:active 必須位於a:hover 之後   另外,text-decoration 屬性大多用於去除掉連結的下劃線 範例: a:link { text-decoration:none; } 範例: See the Pen payRKr by Ya (@bok770) on CodePen.
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)支持一下唷!