雲端教學課程
2013 / 05 / 09
HTML基礎教學(EDITOR及DEBUG工具)
DEBUG工具
網頁截圖已經不可信...
DEBUG工具 - #1
- IE - F12開發者工具
- Firefox - 網頁工具箱、FireBug
- Chrome - Developer Tools
- OPERA - Dragonfly
- Safari - Web Inspector
應該還有沒列出來的，
但最常用的會是Chrome跟IE
IE 10 的DEBUG工具有問題，建議換回 IE 9。
DEBUG工具 - #2
這畫面應該也算是DEBUG之後的結果...
DEBUG工具 - #3
IE及Chrome - Debug教學
在IE按下F12，會跳出開發者工具，
從右上角選擇DEBUG版本。
DEBUG工具 - #4
IE開發者工具
瀏覽模式跟文件模式設相同版本就行。
- 瀏覽器模式：決定了IE送給Web Server
的User-Agent (UA) 字串內容；及JavaScript姐解讀方式。
-
文件模式：決定要以什麼版本的Trident Engine (排版引擎)
來reder HTML內容。
DEBUG工具 - #5
練習 : 用IE開發者工具模擬各版本的IE
IE8不支援CSS3的圓角 -
IE7版面跑掉-
DEBUG工具 - #6
練習 : IE選取元素
IE要先按開發者工具上的"重新整理"才能選取
接下來
DEBUG工具 - #7
Google Chrome選取元素
下載Google Chrome
按F12進入開發者工具
接下來的練習會非常有趣....
DEBUG工具 - #8
練習 : 改學校公告 - It's a joke.
DEBUG工具 - #9
FireFox 網頁工具箱 - 3D檢視，能看網頁疊了幾層
DEBUG工具 - #10
Google Chrome Debug 手機網頁
EDITOR
網路上很多推薦的編輯器
EX : Notepad ++、 sublime text 2
因為很多同學都碰過Dreamwaver，
而且電腦教室有，我們就來用DW當作IDE吧!!
PS. 別再用 FrontPage了，他已經被淘汰了。
EDITOR - #1
開啟DW，選擇新增HTML
EDITOR - #2
我們DW只當作IDE使用，
所以請直接切到程式碼頁面。
右上角也切換到程式設計師模式，
再按F4把旁邊的框架收起來。
EDITOR - #3
把輸入法關掉時會有程式碼提示，
這時按ENTER就行。
EDITOR及DEBUG工具
By jackai
