December 10, 2005
![[黑客人生]](http://Jedi.org/blog/icons/hack.png "黑客人生")
Firefox 與網頁設計
added
-10,7 +10,7
在這個視窗中，妳可以看到整個網頁的文件物件模型架構，妳可以點選任何節點，得知其屬性值；另外，妳也可以點選圖中左上角的圖示，然後再用滑鼠游標點選網頁上的某個地方， DOM Inspector 就會告訴妳那個地方是文件中的那個節點，非常好用。除此之外， DOM Inspector 也可以用來取得 CSS 資訊及 JavaScript 資訊，算是一開始學習網頁設計時，不可或缺的良伴。
接下來我要介紹的擴充套件叫 Aardvark ，這個套件目前釋出到 1.0 1.1 版。它的功能很有趣，不但可以讓妳得知特定物件的 id 或 class ，還可以讓妳進行一些「調整」。要使用這個擴充套件，首先要從「工具」選單裏選「 Start Aardvark 」，接下來當妳把滑鼠游標移到網頁組件上時，就會如圖出現相關資訊的說明：
Aardvark 會用紅色框框標示出該組件的範圍，並在框框左下角以小標籤顯示該組件為何、其 class 或 id 又為何。這個時候透過鍵盤操作，還可以有一些額外的功能： W 可以讓該組件的範圍變寬而 N 則是變窄， Q 是離開 Aardvark 而 U 是還原最後一次操作， R 是刪除所選的組件而 I 則是刪除所有環繞著所選組件的其他組件然後 E 會刪除該組件的內容， B 是把組件內一律設為白底黑字而 C 都是隨機設定組件的底色， V 是檢視所選組件的原始碼，然後 D 則是移除任何該組件的固定寬度值。
![[創用 CC 授權條款]](https://i.creativecommons.org/l/by/3.0/80x15.png)
〈Firefox 與網頁設計〉由 Jedi 製作，所有內容如無特別聲明，一律以創用 CC 姓名標示 3.0 台灣版授權條款釋出。
- 無障礙網頁開發規範 2.0 版 A 等級可沿用 1.0 版檢測碼之部分
- 聽障居家生活無障礙
- 瀏覽器．夢想
- 配色與易讀性
- 《網頁親和力》簡體版
- 千呼萬喚書上架
- W3C Chinese HTML Interest Group
- Firefox for U3 自製更新版心得
- 從 Firefox 擴充套件之戰談起
- 讓人再三失望的 Google
- 創用 CC 網頁多媒體編撰套件
- 免 IE 的玉山銀行 WebATM
- 「十件你所不知道的……」先賣個關子
- 再看 Google Chrome
- 淺談 aDesigner
- 親和力的設計花樣──打造有力的首頁
- 親和力的設計花樣──建立導覽框架
- 親和力部門的八項重要任務
- Opera 版網頁親和力工具列
- 色彩對比分析
- 網頁親和力工具列 2.0 繁體中文版文件
- 《網頁親和力》助寫贊助暨初回限定版預購
- 網頁親和力工具列 2.0 繁體中文版
- aDesigner 和 aiBrowser
- 再談親和力部門──從執行長說起
- 初談親和力部門
- 語意與尺寸的親和力兩難
- 新書計畫中
- 其他與語言相關的網頁親和力實務
- 多語環境中的網頁親和力
- 再見了，火狐
- 自然語言的親和力原則
- 親和力的非技術性層次
- 網頁內容親和力與無障礙
- 好孩子的網頁設計
- 徵求測試：網站親和力工具列
- 色彩對比分析程式
- 網頁親和力工具列
- 我的 FireFox 擴充套件清單
- W3C Ruby
- 真正的無遠弗屆 ── 談網頁內容的親和力
- 打造具親和力的網站
- 用 TopStyle 來編輯 Movable Type 模版
- 驚爆布朗大學 (Brown University) 評比內幕
- 網路無障礙與網頁親和力
- 在台大新聞所的演說經驗
- Dive Into Accessibility
- 我的網頁哲學
- 婆婆娑
- 無障礙空間
太感謝了！
原本只在 Firefox 用 Web Developer，沒想到還有那麼多方便的工具
除了原有的Web Developer之外，我只加裝了Aardvark ，原先有裝的DOM Inspector 我把它移除了，因為太複雜了。
由 waterbee 發表於 December 12, 2005 11:36 PM十分有趣的……今天剛更新FireFox1.5版
一堆舊套件完全都不能使用了
沒想到上來你這就看到這篇文章，真的是太巧了
多謝嚕
太感謝Jedi，正在自學JavaScript，幫助很大。其實這次中時舉辦的華文部落格，遺珠之憾應該是您沒參加，不過您可能不屑參加吧，畢竟已經不需要獎項來添花了。
由 Philipz 發表於 December 18, 2005 11:21 PM感謝Jedi兄的這篇文章
請恕小弟轉此連結至telnet://icbbs.shu.edu.tw
中的web_publish一版
今天在公司用firefox瀏覽網站，有同事看到后說，這個是什麽。我的公司是做IT，突然覺得自己好孤立了。終于在這裡找到一些安慰。謝謝你的訊息。
由 Ivy 發表於 December 28, 2005 11:53 PM其實還有一套滿方便的外掛叫做
X-Ray它可以不需要切換原始碼地況態下快速顯示網頁標籤的結構
https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=697
本來firefox有收錄的,但是不知道為什麼現在拿掉了
感謝 提供這麼多訊息.
不過 firefox 有個 關卡.
那就是 對於javascript 目前 很多 web developer 過於依賴 Jscript (for IE). 而標準可以在firefox 上跑的 要查個api 資源又太少.
實在 是個劣勢!
應該這樣說，我不覺得設計出一個在 IE 上很正常，但是拿其他瀏覽器來看就破綻百出、甚至有各種安全漏洞的網頁，是怎樣的「優勢」了。
由 Jedi 發表於 February 1, 2006 02:00 AM想問一下你那個...
for IE 的網站親和力檢測bar
裡面關於 AAA AA A A+ 這種檢測
好像都是連過去研考會的網站
enable.nat.gov.tw 去檢測...
但我想要讓他能夠從 http://localhost
傳送本地端檔案去檢測
就像是 Fx 的 Web developer 那樣..
或者 我有裝那個freego （就是研考會下載的那個）
能設定那個檢測bar 把我正在看的這個
http://localhost 的文件
直接送進freego 的軟體檢測嗎？
說一下...
我留言後按預覽...
你網頁整個跑掉...
沒看到預覽.. 而且還沒有發表送出的按鈕
差點白po
好險我有檢視你網頁的原始碼發現快速鍵Alt-s
不然就 ooxx
我的環境是 WINXP PRO SP2, FX1.5.0.1
由 ileadu 發表於 March 4, 2006 03:59 PM除了 Web Developer, 另一個也是不可錯過的 extension: FireBug - https://addons.mozilla.org/firefox/1843/ .
由 路人甲 發表於 May 18, 2006 11:05 AM對了, 忘了介紹一個我最愛的 extension. 沒有它沒辦法工作啊~~
mozex - http://mozex.mozdev.org/ . 我最常用的功能, 就是用外部編輯器來 textarea 的內容. textarea 裡只有最基本的編輯功能, 遠比不上自己慣用的文字編輯器來得順手. 它原本是設計在 mozilla 上使用, 要安裝在 firefox 會有問題, 得花很多功夫讓它正常. 沈寂兩三年之後, 終於有人接手發展了. 現在還在 development revision, 不過可用了.
由 路人甲 發表於 May 22, 2006 10:18 AM果真是很多好用的工具,小弟想請教一下,有沒有一種 firefox extension 是可以 screen html code? 例如只要我設定一個 keyword. 當在 view 網頁時,遇到符合的 keyword, 就可以觸發另一個程式 (或發出聲音).
謝謝你
由 kevin 發表於 November 10, 2006 02:02 PM另一個我很愛用的, 就是 Mouse Gestures (http://optimoz.mozdev.org/gestures/). 用 nb 的人可能不會覺得它好用, 但是使用滑鼠的人, 請務必試試. 不用使用鍵盤, 不需把滑鼠移到 menu, 只要一隻滑鼠, 就可以控制 firefox 諸如上一頁, 下一頁, 開新 tab, 關 tab 等等的動作.
由 路人葵 發表於 December 12, 2006 09:14 PMDOM Inspector 在Firefox 1.8版本以後就不能用了
可以取代的元件有YSlow+Firebug
| 
|
