雲端教學課程

網頁截圖已經不可信...

• IE - F12開發者工具
• Firefox - 網頁工具箱、FireBug
• Chrome - Developer Tools
• OPERA - Dragonfly
• Safari - Web Inspector

應該還有沒列出來的，

但最常用的會是Chrome跟IE

這畫面應該也算是DEBUG之後的結果...

在IE按下F12，會跳出開發者工具，

從右上角選擇DEBUG版本。

IE開發者工具

 

瀏覽模式跟文件模式設相同版本就行。

• 瀏覽器模式：決定了IE送給Web Server
  的User-Agent (UA) 字串內容；及JavaScript姐解讀方式。
  
• 文件模式：決定要以什麼版本的Trident Engine (排版引擎)
  來reder HTML內容。

練習 : 用IE開發者工具模擬各版本的IE

http://twitter.github.io/bootstrap/examples/carousel.html

IE8不支援CSS3的圓角 - 

IE7版面跑掉-

練習 : IE選取元素

IE要先按開發者工具上的"重新整理"才能選取

接下來

Google Chrome選取元素

下載Google Chrome

http://www.google.com/intl/zh-TW/chrome/browser/

按F12進入開發者工具

接下來的練習會非常有趣....

練習 : 改學校公告 - It's a joke.

FireFox 網頁工具箱 - 3D檢視，能看網頁疊了幾層

Google Chrome Debug 手機網頁

網路上很多推薦的編輯器

EX : Notepad ++、 sublime text 2

因為很多同學都碰過Dreamwaver，

而且電腦教室有，我們就來用DW當作IDE吧!!

開啟DW，選擇新增HTML

我們DW只當作IDE使用，

所以請直接切到程式碼頁面。

右上角也切換到程式設計師模式，

再按F4把旁邊的框架收起來。

把輸入法關掉時會有程式碼提示，

這時按ENTER就行。