前一篇(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檔