第三步,HTML 窗口的使用。在 HTML 窗口中可以查看到页面的源代码。除了可以查看页面的源代码外,还可以使用 Firebug 的编辑功能直接对页面进行编辑。
图 11. 使用 Firebug 的编辑页面功能
如图 11 所示,在处于 HTML 窗口的模式下,点击 Edit 按钮,将切换查看模式到编辑模式。需要注意的是,在使用 Edit 模式前,最好如图 11 先提前选中页面的 body 代码区块。
图 12. 使用 Edit 后的页面效果
如图 12 所示,在 Edit 模式下,在页面代码的最后加上了字符串“ bbbb ”,然后在页面的相应位置也直接显示了字符串“ bbbb ”。需要注意的是,在页面新加完代码后,需要点击一下页面的其它任何地方,则其效果才会在页面上加载。
图 13. HTML 模式下的 Style,Layout,DOM 三窗口
如图 13 所示,在 HTML 窗口模式下,与 HTML 窗口相对应,在其右边有 Style,Layout,DOM 三个用于查看页面对应部分相关属性的窗口。当选中页面中的某个部分时,Style 显示选中部分的 CSS 属性,Layout 显示 CSS 的盒式模型,DOM 显示其选中部分的所有 DOM 对象。结合使用 Inspect 功能可以方便选择页面中所需要关注的部分。
在图 13 中所显示的是在使用了 Inspect 功能选中一个 Dojo 文本框后,其所显示的 Dojo 文本框的 CSS 修饰。这些 CSS 修饰是通过加载 Dojo 的 CSS 文件来实现的。