前一篇(SublimeText3編輯器(一){精簡強大的外掛管理})介紹過Sublime的外掛管理工具,但好用的外掛絕對不止這些,當然最重要的還是編寫完後要看到的效果,如果能夠及時預覽更新就太方便了,不用一直重新整理網頁,有雙螢幕的話也只需要開著另個視窗就可以知道現在寫的CODE有沒有問題;當然影響網頁視覺最主要的當然是HTML本體和CSS樣式表啦,所以這次會介紹兩個外掛LiveReload、LiveStyle來幫助我們加速開發!!
標籤彙整: html
製作選單列 nav ul li
在製作導覽列的時候通常會用<nav>標籤,而裡面的選項通常會用<ul>跟<li>的項目清單來整理。
閱讀全文 製作選單列 nav ul li
RWD網頁切版 – 基本網頁框架練習(一)
RWD網頁切版(二){CSS如何控制HTML物件、常用css屬性}
寫css的地方
1.<head></head>
在<head></head>之間寫<style></style>,就可以把css寫在<style></style>裡了~

閱讀全文 RWD網頁切版(二){CSS如何控制HTML物件、常用css屬性}
css padding (內距)、margin (外距)、border (邊框) 四邊向屬性值 (CSS padding, margin, border four direction values)
CSS需要寫四個邊向數位的屬性常用的有三個,padding (內距)、margin (外距)、border (邊框),寫四邊向數值的時候可以用不同的方式來寫,可以更快更好~
屬性加方向:
最簡單的寫法就是在這三個屬性的後面加上方向就可以,這是用在單純想指定某一邊向數值的時候。
padding-top: 5px; (上內距)
padding-bottom: 5px; (下內距)
padding-left: 5px; (左內距)
padding-right: 5px; (右內距)
margin-top: 5px; (上外距)
margin-bottom: 5px; (下外距)
margin-left: 5px; (左外距)
margin-right: 5px; (右外距)
border-top: 5px; (上邊框)
border-bottom: 5px; (下邊框)
border-left: 5px; (左邊框)
border-right: 5px; (右邊框)
閱讀全文 css padding (內距)、margin (外距)、border (邊框) 四邊向屬性值 (CSS padding, margin, border four direction values)
網頁開發人員必備工具 – Chrome F12 開發人員工具
Chrome 的開發人員工具在製作網頁的過中程真的可以幫很大的忙,來看看要怎麼開啟吧~
開啟要檢查的網頁後在Chrome右上角的選單 > 更多工具 > 開發人員工具
閱讀全文 網頁開發人員必備工具 – Chrome F12 開發人員工具
不用再記相對路徑 – dreamweaver 建立管理網站
利用dreamweaver 開發網頁最方便的就是自動對照相對路徑的功能了,想要有這個功能首先要先健立管理網站才行,這一篇介紹建立管理網站的方法。
閱讀全文 不用再記相對路徑 – dreamweaver 建立管理網站
去除網頁預設邊框
瀏覽器預設網頁會保留邊框,大概是4px左右,但在設計滿版網頁的時候卻常常會造成視覺不連續,其實只要在css設定一下就可以了~
閱讀全文 去除網頁預設邊框
輕鬆整理網頁原始碼 – dreamweaver 套用原始碼格式,CC版、CS版
自己寫語法的時候如果沒有每次換行都按tab鍵整理語法的話,寫了一段之後語法常常會亂得看不懂,這時候可以利用dreamweaver的工具幫忙整理一下~
CC版本跟CS版本整理的方法不一樣:
CC版本
CS版本
閱讀全文 輕鬆整理網頁原始碼 – dreamweaver 套用原始碼格式,CC版、CS版
dreamweaver CSS設計工具 連結css檔
不喜歡寫語法的人其實可以利用dreamweaver的工具,它可以自動產生大部份簡單的語法,這一篇介紹連結css檔的方法:
1.設定完管理網站後開啟.html檔
閱讀全文 dreamweaver CSS設計工具 連結css檔