網頁設計相關文章

上次我們介紹了jsFiddle，這次我們來介紹一樣是線上編輯器也很受歡迎的Codepen：https://codepen.io/。簡潔的黑底介面設計，與jsFiddle相比美觀許多，點進網頁就可以看到許多具有精湛效果的範例，讓人一點擊進來便足以被吸引目光，不像jsFiddle需要註冊登入才可分享，Codepen的首頁直接讓你看到來自世界各地的優秀作品！   可以註冊使用，也可以保持未登入的狀態，若是登入使用的話，在尋找過去所寫過的代碼時會比較方便，如果是未登入則必須記得系統生成的保存網址。    使用說明： 按右上角「Create」裡的New Pen可以新增檔案   開起來的頁面，分成HTML、CSS、JS和演示效果共四大區塊。   可以從上方Change View中，依照個人使用習慣改變排版方式。 效果可即時預覽，不像jsFiddle得按Run才會顯示。   點開CSS旁的齒輪圖示可做進階設定，像是CSS Preprocessor可以選SASS、SCSS、LESS等等。 CSS Base可直接載入reset.css，Add External CSS可以載入外部的CSS   JS也一樣可以做設定   完成之後按Save，上面的網址就是你這篇demo的保存網址囉！ 但是若需要使用嵌入功能(Embed)的話，必須註冊登入後才可以唷！   範例：一樣以上次的下拉式選單做例子 See the Pen <a href='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/'>brVqKq</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='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' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>. https://codepen.io/bok770/pen/brVqKq

jsFiddle是相當實用且受歡迎的線上編輯器，能夠線上測試、檢查所撰寫的code，也可以分享自己寫的code範例，給其他人觀看、修改、學習等等，以達到交流的效果。 jsFiddle：https://jsfiddle.net/ 欄位有html、CSS、javascript、result四欄。 javascript欄位可以自由選擇版本，如jQuery、YUI、ExtJS等等。 一開始左上角有Run、Save、Tidy、Collaborate四個選項 Run：執行代碼並顯示在result Save：儲存 Tidy：將代碼排版弄整齊 Collaborate：可以將自己所寫的代碼拿給其他人討論，限登入使用 註冊步驟簡單，只要有帳密和電子信箱即可。 按Save儲存後，左上角的選項會多出Update、Fork、Set as base   Update：儲存更新版本，每儲存一次，網址上會多一個版本序號。如下圖：   Fork：另存新檔，會另開一個新網址。 Set as base：如果版本存到第二版以後，會將這一版設定為初版的範本。 若要在網頁中嵌入的話，只要點開Embed，將EMBED CODE中的碼複製貼到網頁中就好囉。   若是想用iframe也可選擇，只要按上方的prefer iframe就會產生iframe碼。     範例：在jsFiddle製作下拉式選單  https://jsfiddle.net/bok770/f07pgr91/

上次我們介紹了如何安裝Sublime Text 3，這次我們來簡單介紹幾個Sublime Text 3相當實用的套件。     Emmet  快速提示功能，加速建置原始碼，可減少html和css的撰寫時間 例如： HTML5網頁架構的步驟： 新開檔案，右下角點選html->輸入html:5或是! 再按tab鍵就完成了!   選擇HTML   有了Emmet，只要打上簡易語法+[tab]就可快速產生原始碼　 例如：html:5+[tab] 就可以產出htnl5的網頁架構 官方提供的速查表：https://docs.emmet.io/cheat-sheet/   Color Highlighter  點選色碼時會顯示該顏色   ColorPicker  調色盤，按ctrl+shift+c就可以叫出色盤自由選色囉!   P.S.預設中ColorPicker的快捷鍵會跟ConvertToUTF8的衝突到，因此會發生按了快捷鍵卻叫不出色盤的情況，解決方法如下： Perferences> Browse Packages，找到ConvertToUTF8的資料夾   依照自己的作業系統開啟檔案做修改，這邊以windows系統做示範。修改ConvertToUTF8的快捷鍵為[ctrl+shift+c+alt]（可依自己的習慣作調整   ConvertToUTF8  Sublime Text 3預設不支援中文編碼，開啟big5會亂碼，因此需要安裝此套件來解決問題。   AutoFileName 輸入路徑或url時，自動抓取檔案路徑   SublimeCodeIntel 功能強大的代碼提示工具。   SublimeLinter 用於提示寫的代碼中錯誤的地方，支持Javascript、CSS、HTML、Java、PHP、Python、Ruby 必須先安裝Node.js http://nodejs.org 接著挑選你要安裝的部分，假如你要檢查CSS的部分，一樣先呼叫Package Control，然後打上SublimeLinter-csslint按enter即可安裝。 Html：SublimeLinter-contrib-htmlhint js：SublimeLinter-jshint 如果不想邊打字邊檢查的話，可以改成存檔再一次檢查的設定。 打SublimeLinter便會有選項讓你挑，選擇Choose Lint Mode 接著會有四個選項，分別是： Background：工作中一直在檢查 Load/save：剛開檔案和存檔時檢查 Save only：只有存檔時檢查 Manual：手動檢查   Sublimerge Pro  可以快速比對兩個檔案的內容差異，雖然Sublime Text本身就可以開兩欄或多欄，但必須以人工方式比對內容太耗時間，此套件可快速標示出兩檔案的差異之處。 先安裝此套件-->將要比對的檔案開啟-->在檔案按右鍵Sublimerge > Compare to你要比對的另一個檔案   兩邊不同的地方會被框起來，對照查看相當方便。   Alignment  自動對齊代碼，使得排列更為整齊美觀。快捷鍵：ctrl+alt+a     以上便是Sublime Text3常用的套件，能夠有效加速開發效率，也還有許多其他的套件可以嘗試使用看看唷！    

Sublime Text 3是相當好用的文字編輯器，有許多方便的套件可以安裝，增進開發效率。 首先到官網下載安裝 http://www.sublimetext.com/3   安裝套件： 開啟Sublime Text 3，從上面主選單的view>show console(或是按快捷鍵ctrl+ˋ) 複製貼上出現的指令碼到主控台命令列中(或是直接到https://packagecontrol.io/installation#st3複製文字內容)，然後直接按下enter執行，便可安裝完成。 右邊為整個檔案的縮圖，可以點擊並快速跳到欲修改的部分。   Sublime Text 3預設為英文介面，若不擅長英文也可改成中文，從上方選單： Help>Language>Traditional Chinese(繁體中文)   接著便可以從Preferences > Package Control來啟用 Package Control此套件管理員，許多套件都必須透過它來安裝唷！ 快捷鍵:ctrl+shift+p然後輸入install按enter   再來便可以安裝一些套件了！ 每個套件都是如上步驟：先按ctrl+shift+p ->輸入install按enter，因此ctrl+shift+p是滿重要的快捷鍵唷！若要移除套件，輸入remove即可。       以上便是Sublime Text 3的安裝入門，下一次我們再來介紹Sublime Text 3推薦安裝的套件！

.demo-2:before,.demo-2 after{position:absolute;}.demo-2 a:hover:before,.demo-2 a:hover:after{color:#F48627;}.demo-2 a:hover:after{right:-20px;content:"]";}.demo-2 a:hover:before{content:"[";left:-20px;} before和after是偽元素，顧名思義就是元素的「前」與「後」，可以在指定元素的前後插入其他內容。 範例：       加入before和after後 CSS .demo-1:before{ content:"一化科技－"; color:#257DB4; font-size:28px;} .demo-1:after{ content:"的專業首選";color:#DF5D22;}   「content」為before與 after必須設置的屬性，意思是插入的「內容」，可以是圖片、文字等等，若未填此屬性，偽元素將不會發生任何作用。 例：content:url ( "img/logo.png" ) 例：content:"一化科技" 若不需要內容的話，可以寫成content:""   以下我們來介紹幾項應用範例：   1.清除浮動 常常清除浮動是設個div{clear:both}，但如此一來便會多個無意義的空白元素，我們可以利用after來清浮動。 例： .demo-3{float:left;} .demo-3:after{ content:""; clear:both; display:none; width:0;}   2.配合attr使用 attr是取得選取元素的屬性，例如attr(href)是取得href屬性 以下例子是取得a的title屬性： a::before{content:attr(title)} 效果相當於     3.特效 可以做出在鼠標靠近時文字增加外框的特效   例： E-Work   Html  CSS .demo-2:before, .demo-2 after{ position:absolute;} .demo-2 a:hover:before, .demo-2 a:hover:after{color:#F48627;} .demo-2 a:hover:after{ right:-20px; content:"]";} .demo-2 a:hover:before{ content:"[";left:-20px;}   製作陰影        可以運用偽元素、box-shadow以及z-index:-1來做兩邊陰影。 範例： Html   CSS .box{ width:300px; height:200px;         background:#A7C7D3;         position:relative;         box-shadow:0 0 3px rgba(0, 0, 0, 0.2); } .box:before, .box:after{ width:50%;                                       background:#000;                                       z-index:-1;                                       position: absolute; top:10px; bottom:15px; left:10px;                                       content:"";                                       box-shadow:0 15px 10px rgba(0, 0, 0, 0.5);                                       　　　　　　　　　     -webkit-transform: rotate(-3deg);                                      -moz-transform:rotate(-3deg);                                      -o-transform:rotate(-3deg);                                      -ms-transform:rotate(-3deg);                                      transform: rotate(-3deg);} .box:after{ right:10px; left:auto;                  -webkit-transform:rotate(3deg);                  -moz-transform:rotate(3deg);                  -o-transform:rotate(3deg);                  -ms-transform:rotate(3deg);                  transform: rotate(3deg);                 }   before和after的瀏覽器兼容性相當好，除了IE6 IE7以外不用加上前綴。且可以簡化網頁的html標籤和class數量。

我們常常在修改完CSS上傳後，對方看到的卻還是未改過的舊畫面，這是因為瀏覽器會暫存CSS、js等等這些靜態網頁，雖然按ctrl+F5或是有像「CSS Reloader」這種讓瀏覽器清除快取、重新載入最新CSS的配件可以安裝，然而也不太可能要求每個客戶都這麼做吧！ 這時就得用一些小撇步讓瀏覽器加載網頁最新版，讓瀏覽器認為URL變得不同，向伺服器請求新的下載，這樣一來對方就能夠直接看到新頁面了。   方法如下： CSS後面加上?以及日期、亂數、版本等都可以強制瀏覽器讀取最新的CSS唷！ 1.CSS?後面加上日期。如：style.css?20170620  2. CSS?後面加上亂數。如：style.css?3344qwe 3.CSS?後面加上版本。如：style.css?v2.11.1 圖片也可以運用唷！ 例如： CSS內用到的圖片也行 如：.AD{background:url(../images/banner.png?20170808);} js也可以加上，方法亦同。(如首圖範例)   只要簡單改一下，就可以保證瀏覽器讀取的是最新頁面！

.article{width:960px;max-width:70%;margin:0 auto;height:400px;padding:40px;font:24px 'Arial';background-repeat:no-repeat;background-attachment:fixed;background-position:center center;background-size:cover;line-height:28px;}.section1{color:#fff;background-image:url("img/upload//pic-4.jpg");text-shadow:5px 4px 5px #575353;font-weight:bold;}.section2{color:#fff;background-image:url("img/upload//pic-6.jpg");font-weight:bold;text-shadow:3px 4px 5px #373030;}.section3{color:#fff;background-image:url("img/upload//pic-3.jpg");text-shadow:3px 4px 5px #373030;} 什麼是視差滾動呢？其實就是當使用者滾動滑鼠滾輪（捲軸）時，將多層背景以不同速度移動，形成3D的垂直運動效果，造成視覺上的錯覺並增加趣味性。 網路上多的是用CSS搭配JS寫出來的，以下來介紹如何只用CSS表現出最簡單入門的視差滾動。 只要想成背景圖的尺寸必須比包住它的div還大，並且在頁面上須是固定住的，因此在向下滾動時，背景就會固定在原地，但是其上的內容和包住的div卻會隨著滾輪而向上移動，這樣就形成最簡單的視差滾動了。 範例：           Travel     Travel     Travel                 Enjoy Your Life     Enjoy Your Life     Enjoy Your Life     Enjoy Your Life                 HAVE FUN!     HAVE FUN!     HAVE FUN!       Html CSS 要注意的是背景圖的高(height)一定要比div還長，否則向下滾動時就會露餡了！  以上範例便是最基本的視差滾動，很適合想嘗試看看的新手唷！

 fliter:drop-shadow顧名思義就是投影濾鏡，因此透明的部分不會有效果，可以用在將圖片加上陰影等等。 chrome瀏覽器需加上-webkit- 數值設定: fliter:drop-shadow(x偏移 y偏移  模糊大小 顏色)   例：fliter:drop-shadow(4px 5px 5px #000)   fliter:drop-shadow與box-shadow的差異 可能看上面範例會覺得跟box-shadow這屬性沒什麼兩樣，但看以下範例就能清楚明瞭：   .pic01{-webkit-filter: drop-shadow(5px 5px 8px #000); }   .pic03{ box-shadow:5px 5px 8px #000; }   明明png圖片的背景是透明的，但是box-shadow的陰影卻還是以白背景做呈現，而fliter:drop-shadow卻能夠以實際投影的方式做出陰影效果。兩者的陰影效果也有所不同，box-shadow的陰影較深且模糊範圍較小，fliter:drop-shadow則是陰影較淺、模糊範圍偏大。   下次發現圖片加陰影還是會留一大片空白時，不妨使用fliter:drop-shadow唷！  

繼上次的文章介紹了CSS Lint這項可以線上檢查CSS的工具後，這次介紹CSS Compressor這個能夠精簡壓縮CSS的工具。 1.進入CSS Compressor的網站http://www.pagecolumn.com/tool/css_compressor.htm   2.將寫好的CSS複製貼上，按下GO鍵。   3.壓縮完成之後，可以看到壓縮前與壓縮後的檔案大小，以及壓縮率。   如圖中例子的CSS從21kb壓縮到16kb，足足減少了5kb，壓縮率近23%！        

 text-indent屬性可以幫段落文字做縮排與凸排，將文字調到想要的位置上，相當方便唷！ 比如說想將第一行文字凸出一個字的空間，如下範例：   CSS: ul{font-family:'微軟正黑體'; font-size:16px; line-height:24px; padding-left:1em;} ul li{text-indent:-1em;}   裡面要作凸排的文字設text-indent:-1em表示向左移動一個字的空間(1em)，em是文字的單位之一，取決於你當時設定的文字大小，如上述範例設定font-size:16px，那麼在這段文字裡1em=16px。同理，若你要設定向左移動三個字的話，便設text-indent:-3em即可。 而由於text-indent的值設定成負數會使得文字凸出區塊之外，所以外面的容器要設定成padding-left:1em 將整塊文字往右移。   常見的文字首行縮排也是如上作法，只是將text-indent的數值從負數寫成正數而已，而容器則不須另外設定。 CSS: ul{font-family:'微軟正黑體'; font-size:16px; line-height:24px; padding-left:-1em;} ul li{text-indent:1em;}   善用text-indent可以幫助調整文字版面，算是個網頁設計上的小技巧，不妨善加使用唷。