文章專區

網頁設計相關文章

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;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%!        

ARTICLE

9

CSS的text-indent

 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可以幫助調整文字版面,算是個網頁設計上的小技巧,不妨善加使用唷。
CSS Lint是線上CSS檢測工具,能夠線上分析你所寫的網站CSS有無潛在問題,會清楚列出出錯行數與問題所在,方便進行修改。 步驟如下: 1.進入CSS Lint網站http://csslint.net/ 2.在大白框裡複製貼上寫好的CSS碼,按LINT!鍵     3.會列出有多少錯誤與警告(如下圖的CSS列出了0個錯誤與43個警告   下方會列出警告的清單,包含行數與問題敘述,之後便可針對一個個警告進行CSS修改了唷!   網頁設計師不妨在寫完後貼上檢測看看,有助於讓你的CSS樣式表更精簡唷!