網頁設計相關文章

網頁的文字單位大致上分成四種，px、%、em、rem px為最常見的，屬於絕對單位；%、em、rem則為相對單位。 %單位的算法： 預設網頁上的文字大小為16px， 假如設定font-size: 75%，意思就是將預設文字大小改成：16 X 0.75=12px   那麼em、rem看起來很像的兩者，又有什麼差異呢？ em是以父元素為基準的文字單位，適合使用在限制區塊的內容，例如：ul li、p、div等等，em可以快速地從父元素改變內容文字的大小。 範例： See the Pen <a href='https://codepen.io/bok770/pen/NymyOv/' _fcksavedurl='https://codepen.io/bok770/pen/NymyOv/'>NymyOv</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>.   rem的文字則是以根元素為基準，而根元素就是指標籤。適合用在整體網頁的尺寸切換，可以依據不同的螢幕尺寸，統一改變網頁全部的文字大小。而要注意的是，rem不支援IE8之前的瀏覽器唷！ 範例： See the Pen <a href='https://codepen.io/bok770/pen/PQgQvp/' _fcksavedurl='https://codepen.io/bok770/pen/PQgQvp/' _fcksavedurl='https://codepen.io/bok770/pen/PQgQvp/' _fcksavedurl='https://codepen.io/bok770/pen/PQgQvp/'>PQgQvp</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='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' _fcksavedurl='https://codepen.io'>CodePen</a>.

 如果想控制float元素的排版，了解clear屬性是十分重要的，兩者可謂息息相關。 可能的值有： left：消除左邊的浮動 right：消除右邊的浮動 both：消除左右兩邊的浮動 none：預設值，不消除任何一邊的浮動 inherit：繼承浮動，IE未支持此屬性值 其中尤以both最常被使用，因為當我們使用float元素時，由於區塊是浮動的，所以若下一個區塊未使用float屬性的話，可能在排版上會往上跑，造成跑版的現象，而使用clear:both可以適當地解決這個問題。   請先看以下範例： See the Pen <a href='https://codepen.io/bok770/pen/gvZQBy/' _fcksavedurl='https://codepen.io/bok770/pen/gvZQBy/'>gvZQBy</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>.  前兩個區塊都使用了float:left，然而第三塊(紫色)未使用浮動，因此區塊往上跑被擋在第一塊的下方。   再看以下範例： See the Pen <a href='https://codepen.io/bok770/pen/yvGQVN/' _fcksavedurl='https://codepen.io/bok770/pen/yvGQVN/'>yvGQVN</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>.  在兩個float區塊後面加上clear:both，如此一來便清除了上面的浮動，下面的內容就不會因為float屬性而受到影響。  

關於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檔。   如此便可以存到完整的頁面了喔！