Web Developer教程

现在我们介绍一种网页调试的辅助工具：Web Developer！ 它是运行在FF（指Firefox浏览器下同）环境中的插件，是目前公认为最为优秀的网页调试工具。

Web Developer作为FF的插件存在，主要功能表现在几个重要的方面：

对页面中的文本、图像、媒体文件进行控制，对网页所应用的CSS文件的id与class辅助查看，表格辅助查看，可以实现修改CSS文件实时显示出得到的页面效果等等。

Web Developer插件能够帮助我们对CSS网站进行分析，我们使用FF对网页进行浏览，运用Web Developer插件不仅仅只是能看到对方的源代码，还能方便的分析出页面的布局结构，CSS书写方式，鼠标所在位置的id或class是什么等等，使我们能迅速的理解、学习别人的成功经验，进而更加方便快捷的掌握CSS布局技术。

Web Developer插件 概要

Web Developer 插件以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的更多信息，使我们进一步的了解当前所浏览的网页。

在Web Developer 插件工具栏中，主要由以下几个部分组成：Disable、Cookies、CSS、Forms、Images、Information、Miscellaneous、Outline、Resize、Tools、View Source、Options。下面我们就对其概况进行介绍。

Disable禁用工具 可以暂时的屏蔽当前页面中的某些东东，如JavaScript脚本、缓存、mete自动重新定向、将网页显示为黑色（图片除外）、禁用弹窗等等。如下图：

Cookies工具 可以用此工具查看当前页面的Cookies信息，可以按不同的域名或路径进行查看，而且可以手工增加一个Cookies，这对于后台网络编程的开发调试来说是非常方便而得力的工具。如下图：

CSS样式表工具 这是一个非常强大的工具，基于CSS网页布局有这个得力的助手，工作与学习都将变的非常简单，可以控制CSS是否应用，查看页面的CSS文件，并进行实时的编辑，并在浏览器窗口中立即反应出编辑后的效果。关于此工具，我们后面将作更加深入细致的介绍。

Forms表单工具 其主要作用是对页面的表单进行控制，其中的很多功能对于表单程序的开发有着非常非常大的帮助，由于我们的重点是CSS网页布局，此工具我们不作深入的探讨。如下图：

Images图像工具 可以对当前页面的图像进行设定，可以显示所有图片的alt信息，对背景等也可以进行是否显示的设定。如下图：

Information信息工具 此工具在我们的CSS网页布局设计中也经常用到，我们可以用它来查看页面中所有的id、class及table等元素的名称、占位等信息，关于此工具，我们后面将作更加深入细致的介绍。

Miscellaneous其他 这是一个非常“好玩”的工具，它所提供的功能是我们所梦寐以求的，在页面布局中，我们可以用它来达到很多有意思的功能，如辅助线、面积、测量等，我们在CSS网页布局设计中也经常用到，关于此工具，我们后面将作更加深入细致的介绍。

Outline线框工具 这组工具对我们CSS网页布局设计是非常有用的，线框显示工具能够将页面中的某些元素使用线框描边，使我们可以更好的查看其占位信息，我们可以使用它给div、h1-h6、表单等进行线框描边，关于此工具，我们后面将作更加深入细致的介绍。

Resize尺寸工具 我们可以用它来改变浏览器窗口的尺寸，如果我们使用了1600*1200的分辨率，我们可以借助此工具来模拟1027*768的窗口效果。关于此工具，我们后面将作更加深入细致的介绍。

Tools工具 对于我们CSS网页布局设计，它的最大功能在于将CSS及XHTML校验工具整合在一起，可以点击此工具中的校验选项对当前页面进行检验，它会自动链接到相关校验页面，并返回校验结果。如下图：

View Source查看源代码 用于查看页面的源文件。

Options选项 用于Web Developer 插件的参数设置。如下图：

 Web Developer CSS工具

Web Developer 插件强大的功能超乎你的想象，用于CSS网页布局开发调试只是它强大功能的一部分，对于网络程序的开发也提供了非常强大的辅助设计功能，我们不将它完全的展开探讨，我们仅针对CSS网页布局开发调试对它进行了解，有兴趣的朋友可以详细的研究一下它的强大功能。

CSS工具　是我们需要了解的重点，它提供了许多功能来辅助我们查看网页，废话少说，我们往下深入，看图片先：

1、Disable Style 禁用样式 可以用来禁用当前页面的某些或全部样式的显示。

·All Style 禁用所有样式，页面中将没有任何样式效果。

·Browser Default Styles　应用浏览器默认样式，意义不大的功能。

·Embedded Styles　禁用放置在页面中的内部样式表，其它无影响。

·Inline Styles 禁用行间样式表，即使用style=""形式的将不显示。

·Linked Style Sheets　禁用以link标签链接外部样式表。

·Print Sytles　禁用打印样式表

·Individual Style Sheet　单独设置所链接的外部样式表是否显示。例如：当前页面链接了三个外部样式表，1.css、2.css、3.css我们可以通过此功能将某一个样式表禁用。请你注意这个功能其实是非常有用的，可以帮助我们在调试时找到问题是出在哪里，我们禁用某个样式，看引发的问题是不是依然存在。如果禁用了某一个样式，问题消失了，那一样是这个被禁用的样式表文件中的某些设置出现了问题。

2、Display CSS By Media Type 按媒体的类型显示样式。我曾经介绍过在DreamWeaver中可以按媒体查看方式查看页面效果（http://www.52css.com/article.asp?id=301），此功能与此类似。不过目前只支持两种媒体类型：掌上设备、打印。

3、View CSS 用来查看CSS文件代码，点击该命令会打开一个新的FF标签页，显示当前页面的CSS，如果当前页面Link有多个CSS文件，会给出该文件的URL，或者显示出此样式为行间样式或内部样式。如下图：

4、View Style Information 查看样式信息。非常实用的学习与辅助设计功能，在点击开启这个选项以后，在FF的状态栏，会给我当前鼠标所在位置的样式信息。鼠标停留在某一个元素上时，也会显示出该元素在当前CSS样式表中的层次。这个功能可以非常方便的学习别人的CSS网页布局设计，我们在浏览他人的作品里，对某一效果不知道如何实现，我们可以应用这一功能立刻找到所应用的样式，知道它的层次关系，可以在CSS文件中找到相应的编码。此功能的效果如下图：

5、Add User Style Sheet 增加用户样式。我们可以对当前页面的样式设置自己浏览时的样式，网站的当前页面能够按自己编写的样式来显示。我们在学习他人的作品时，可以进行举一反三的改进，或进行其它的优化。我们在设计自己的页面时，这也可以使我们对文件进行临时修改，立即查看效果。进行细节的微调与设计。

6、Edit CSS 编辑CSS。这是Web Developer 插件最大的亮点之一，是我们最常用到的功能。点击这个命令，FF左侧打开一个编辑窗口，将已有的CSS样式已经放置其中了，如果有N个CSS文件组成，会列出标签式的选项卡，我们可以随意的切换。显示出的CSS编辑，我们可以在这个窗口中随意的更改与编辑，并且右侧的网页将按修改后的样式实时显示出来。如果我们改变了h1的样式，则在右侧的网页窗口中立即可以看到编辑后的效果！如下图：

Web Developer插件的这个功能，我不用多说，大家也可以明白它可以干什么了。我们可以在开发网站时，在查看效果的同时，可以用此功能直接打开CSS文件进行编辑，并随时掌握修改后的成效，修改满意了，点击窗口上方的保存按钮，可以将当面样式表保存到指定的位置。真正实现了便捷的辅助设计与开发。我们学习别人的作品，可以用它来查看网页上的CSS文件，查看别人的编码，试着修改别人的编码并可以立即查看到变化后的效果，思考别人为什么这样写，为什么这样进行设置，有什么道理。以此来学习，我们可以更方便的学习优秀网站的CSS技术应用。

7、Use Border Box Model 使用边框式盒模型，这是一个并不常用的功能，你可以点选此命令查看一下页面的变化。

Web Developer Information工具

Web Developer插件的Information工具是一个包罗很多实用功能的地方，有些东西对于我们CSS网页布局设计显得非常有用。Information工具提供的功能非常多，我们仅挑一些CSS网页布局设计中常用的功能加以介绍。该工具菜单如下图：

1、Display Blocks Size 显示块元素对象的尺寸。该功能将页面中所有div描边为红色进行区域划分，同时显示出该div区域的尺寸。如下图：

2、Display Div Order 显示网页中div在xhtml代码中的顺序与编号。用红色的线框进行区域划分，并显示div编号。如下图：

3、Display Element Information 显示元素信息。非常实用的功能之一，点选该命令，会在网页中显示一个浮动的窗口，鼠标移动到不同的网页对象上时，会用红线框标识当前对象，并且显示该对象的一些信息：名称、样式、title、target、href等等。该功能会折叠显示一些信息，如定位等。如下图：

4、Display ID & Class Details 显示ID和Class的细节。点选该功能，将对页面中的对象标出其ID和Class的名称。如下图：

5、Display Link Details 显示链接的信息。此功能将在页面中标注出链接的URL。

6、Display Stack Levels 显示层级关系。若页面中使用了z-index属性的定位，将显示对象的z-index属性值。

7、Display Table Information　显示表格信息。与上面的一些功能相似，标注显示出表格的详细信息。

其它的信息大家自己试一下就能明白它的作用，我们这里就不详细的深入了，需要提示你注意View Color Information查看色彩信息，会将页面中应用的色彩用方块以一个新的标签页显示出来，对于页面美工的色彩设计有非常大的作用。

Web Developer Miscellaneous工具

Miscellaneous工具包含了很多有意思的功能，我们只讲三个与CSS网页布局开发有关系的功能。如下图：

1、Display Line Guides 辅助线功能，我们在Photoshop或Fireworks等图象处理软件中，提供了额外的辅助线功能，方便图片文件在处理过程中的对齐等。在Web Developer插件所提供的这个功能，达到了同样的效果。我们点选该命令就可以看到辅助线了，如下图：

我们发现当鼠标移到辅助线的时候，还会提供一些额外的信息，如当前的绝对位置是多少，距离上一条、下一条辅助线的距离。我们可以通过面板中的Add Horizontal Line Guide增加一条水平辅助线；Add Vertical Line Guide可以增加一条垂直辅助线。通过Color改变辅助线的颜色。是不是非常方便？快试试吧！吼吼。

2、Display Ruler 标尺或测量工具。点选这个命令，可以在页面中的任何位置画一个矩形，会有一个TIP提示相关的信息，坐标、长与宽等。在移动鼠标的时候，这个TIP也会提示相应的值，如下图：

3、Edit HTML 编辑HTML工具。大家一定还记得CSS工具菜单下的Edit CSS工具，这个功能与之类似，不同的是编辑的是xhtml代码。点击这个命令，FF左侧打开一个编辑窗口，将网页源文件xhtml代码放置其中了，我们可以在这个窗口中随意的更改与编辑，并且右侧的网页将按修改后的代码实时显示出来。够爽吧，前面的编辑了CSS，这个实时调整一下XHTML，并且能实时查看效果。如下图：

有了这个功能，我们可以真正的实现了在这个环境中进行开发，而且学习别人的作品时，也能兼顾xhtml编码的学习。方便实用！

Web Developer Outline、Resize工具

Outline线框工具 提供将元素使用线框标识出来的功能。我们可以辅助查看各细部的元件。如下图：

我们列举一此常用的功能如下：

1、Outline Frames线框显示出框架，如果使用了框架技术，可以用线条标注出来。

2、Outline Headings 标注标题元素，如果页面中使用了h1～h6对象，会用线条标注出来。

3、Outline Table Cells 标注单元格，如果页面是用传统的表格进行布局，往往表格线是不可见的，表格只是布局的需要，根本没有边框线，使用这个命令可以将它们都用线框标识出来。

4、Outline Tables　类似于上面一个命令，区别在于上面的是显示单元格，而这个命令只显示表格。如上面的显示的是tr、td。这个命令只显示table。

5、Outline BLock Level Elements 标注出对象的嵌套级别。

6、Outline Deprecated Elements　标注出网页中存在的不合法的对象。合法与否根据网页的文档对象模型doctype来判断。

7、Outline Positioned Elements 标注出定位对象，可以单独的标注出来四种定位方式：

8、Outline External Links　标注出外部链接，请注意是指链接向站外的链接，外部链接。

9、Outline Links Without Title Attributes　标识出所有的显示，并且不显示title属性的值。

10、Outline Current Element 标识鼠标位置的当前对象。

11、Outline Custom Elements 自定义标注，点选该命令会打开对象框，要求设置标注哪些对象，如键入“h1”，并设置相应的颜色。如下图：

12、Show Element Names When Outlining　点选该命令会在标注的同时，显示对象的名称。

Resize尺寸工具 这是一个小巧而实用的工具，我们可以利用它来改变窗口的大小，我们在开发CSS网页布局时，屏幕尺寸或许很大，但要兼顾到小尺寸的访客的需求，我们可以用此工具来预览小尺寸显示的效果。如下图：

1、Display Window Size 显示当前窗口的大小，点选该命令会直接弹出一个对话框显示信息。

2、Display Window Size In Title 将窗口的大小放置于标题栏，这是一个非常方便的功能，我们可以自由的拖动缩放窗口的大小，在标题栏立即就能知道当前的窗口是多大。如下图：

3、Resize Window 可以键入数值修改窗口的大小。

4、800*600 在网页设计制作中，最需要关注的就是800*600大小的窗口中显示的情况，Web Developer插件预设了这个尺寸。直接点选即可。