WebDeveloper教程

WebDeveloper教程作者：佚名来源：52css发布时间：2011年09月18日点击数：1165现在我们介绍一种网页调试的辅助工具：WebDeveloper！它是运行在FF（指Firefox浏览器下同）环境中的插件，是目前公认为最为优秀的网页调试工具。WebDeveloper作为FF的插件存在，主要功能表现在几个重要的方面：对页面中的文本、图像、媒体文件进行控制，对网页所应用的CSS文件的id与class辅助查看，表格辅助查看，可以实现修改CSS文件实时显示出得到的页面效果等等。WebDeveloper插件能够帮助我们对CSS网站进行分析，我们使用FF对网页进行浏览，运用WebDeveloper插件不仅仅只是能看到对方的源代码，还能方便的分析出页面的布局结构，CSS书写方式，鼠标所在位置的id或class是什么等等，使我们能迅速的理解、学习别人的成功经验，进而更加方便快捷的掌握CSS布局技术。WebDeveloper插件概要WebDeveloper插件以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的更多信息，使我们进一步的了解当前所浏览的网页。在WebDeveloper插件工具栏中，主要由以下几个部分组成：Disable、Cookies、CSS、Forms、Images、Information、Miscellaneous、Outline、Resize、Tools、ViewSource、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校验工具整合在一起，可以点击此工具中的校验选项对当前页面进行检验，它会自动链接到相关校验页面，并返回校验结果。如下图：ViewSource查看源代码用于查看页面的源文件。Options选项用于WebDeveloper插件的参数设置。如下图：WebDeveloperCSS工具WebDeveloper插件强大的功能超乎你的想象，用于CSS网页布局开发调试只是它强大功能的一部分，对于网络程序的开发也提供了非常强大的辅助设计功能，我们不将它完全的展开探讨，我们仅针对CSS网页布局开发调试对它进行了解，有兴趣的朋友可以详细的研究一下它的强大功能。CSS工具是我们需要了解的重点，它提供了许多功能来辅助我们查看网页，废话少说，我们往下深入，看图片先：1、DisableStyle禁用样式可以用来禁用当前页面的某些或全部样式的显示。·AllStyle禁用所有样式，页面中将没有任何样式效果。·BrowserDefaultStyles应用浏览器默认样式，意义不大的功能。·EmbeddedStyles禁用放置在页面中的内部样式表，其它无影响。·InlineStyles禁用行间样式表，即使用style=形式的将不显示。·LinkedStyleSheets禁用以link标签链接外部样式表。·PrintSytles禁用打印样式表·IndividualStyleSheet单独设置所链接的外部样式表是否显示。例如：当前页面链接了三个外部样式表，1.css、2.css、3.css我们可以通过此功能将某一个样式表禁用。请你注意这个功能其实是非常有用的，可以帮助我们在调试时找到问题是出在哪里，我们禁用某个样式，看引发的问题是不是依然存在。如果禁用了某一个样式，问题消失了，那一样是这个被禁用的样式表文件中的某些设置出现了问题。2、DisplayCSSByMediaType按媒体的类型显示样式。我曾经介绍过在DreamWeaver中可以按媒体查看方式查看页面效果（=301），此功能与此类似。不过目前只支持两种媒体类型：掌上设备、打印。3、ViewCSS用来查看CSS文件代码，点击该命令会打开一个新的FF标签页，显示当前页面的CSS，如果当前页面Link有多个CSS文件，会给出该文件的URL，或者显示出此样式为行间样式或内部样式。如下图：4、ViewStyleInformation查看样式信息。非常实用的学习与辅助设计功能，在点击开启这个选项以后，在FF的状态栏，会给我当前鼠标所在位置的样式信息。鼠标停留在某一个元素上时，也会显示出该元素在当前CSS样式表中的层次。这个功能可以非常方便的学习别人的CSS网页布局设计，我们在浏览他人的作品里，对某一效果不知道如何实现，我们可以应用这一功能立刻找到所应用的样式，知道它的层次关系，可以在CSS文件中找到相应的编码。此功能的效果如下图：5、AddUserStyleSheet增加用户样式。我们可以对当前页面的样式设置自己浏览时的样式，网站的当前页面能够按自己编写的样式来显示。我们在学习他人的作品时，可以进行举一反三的改进，或进行其它的优化。我们在设计自己的页面时，这也可以使我们对文件进行临时修改，立即查看效果。进行细节的微调与设计。6、EditCSS编辑CSS。这是WebDeveloper插件最大的亮点之一，是我们最常用到的功能。点击这个命令，FF左侧打开一个编辑窗口，将已有的CSS样式已经放置其中了，如果有N个CSS文件组成，会列出标签式的选项卡，我们可以随意的切换。显示出的CSS编辑，我们可以在这个窗口中随意的更改与编辑，并且右侧的网页将按修改后的样式实时显示出来。如果我们改变了h1的样式，则在右侧的网页窗口中立即可以看到编辑后的效果！如下图：WebDeveloper插件的这个功能，我不用多说，大家也可以明白它可以干什么了。我们可以在开发网站时，在查看效果的同时，可以用此功能直接打开CSS文件进行编辑，并随时掌握修改后的成效，修改满意了，点击窗口上方的保存按钮，可以将当面样式表保存到指定的位置。真正实现了便捷的辅助设计与开发。我们学习别人的作品，可以用它来查看网页上的CSS文件，查看别人的编码，试着修改别人的编码并可以立即查看到变化后的效果，思考别人为什么这样写，为什么这样进行设置，有什么道理。以此来学习，我们可以更方便的学习优秀网站的CSS技术应用。7、UseBorderBoxModel使用边框式盒模型，这是一个并不常用的功能，你可以点选此命令查看一下页面的变化。WebDeveloperInformation工具WebDeveloper插件的Information工具是一个包罗很多实用功能的地方，有些东西对于我们CSS网页布局设计显得非常有用。Information工具提供的功能非常多，我们仅挑一些CSS网页布局设计中常用的功能加以介绍。该工具菜单如下图：1、DisplayBlocksSize显示块元素对象的尺寸。该功能将页面中所有div描边为红色进行区域划分，同时显示出该div区域的尺寸。如下图：2、DisplayDivOrder显示网页中div在xhtml代码中的顺序与编号。用红色的线框进行区域划分，并显示div编号。如下图：3、DisplayElementInformation显示元素信息。非常实用的功能之一，点选该命令，会在网页中显示一个浮动的窗口，鼠标移动到不同的网页对象上时，会用红线框标识当前对象，并且显示该对象的一些信息：名称、样式、title、target、href等等。该功能会折叠显示一些信息，如定位等。如下图：4、DisplayID&ClassDetails显示ID和Class的细节。点选该功能，将对页面中的对象标出其ID和Class的名称。如下图：5、DisplayLinkDetails显示链接的信息。此功能将在页面中标注出链接的URL。6、DisplayStackLevels显示层级关系。若页面中使用了z-index属性的定位，将显示对象的z-index属性值。7、DisplayTableInformation显示表格信息。与上面的一些功能相似，标注显示出表格的详细信息。其它的信息大家自己试一下就能明白它的作用，我们这里就不详细的深入了，需要提示你注意ViewColorInformation查看色彩信息，会将页面中应用的色彩用方块以一个新的标签页显示出来，对于页面美工的色彩设计有非常大的作用。WebDeveloperMiscellaneous工具Miscellaneous工具包含了很多有意思的功能，我们只讲三个与CSS网页布局开发有关系的功能。如下图：1、DisplayLineGuides辅助线功能，我们在Photoshop或Fireworks等图象处理软件中，提供了额外的辅助线功能，方便图片文件在处理过程中的对齐等。在WebDeveloper插件所提供的这个功能，达到了同样的效果。我们点选该命令就可以看到辅助线了，如下图：我们发现当鼠标移到辅助线的时候，还会提供一些额外的信息，如当前的绝对位置是多少，距离上一条、下一条辅助线的距离。我们可以通过面板中的AddHorizontalLineGuide增加一条水平辅助线；AddVerticalLineGuide可以增加一条垂直辅助线。通过Color改变辅助线的颜色。是不是非常方便？快试试吧！吼吼。2、DisplayRuler标尺或测量工具。点选这个命令，可以在页面中的任何位置画一个矩形，会有一个TIP提示相关的信息，坐标、长与宽等。在移动鼠标的时候，这个TIP也会提示相应的值，如下图：3、EditHTML编辑HTML工具。大家一定还记得CSS工具菜单下的EditCSS工具，这个功能与之类似，不同的是编辑的是xhtml代码。点击这个命令，FF左侧打开一个编辑窗口，将网页源文件xhtml代码放置其中了，我们可以在这个窗口中随意的更改与编辑，并且右侧的网页将按修改后的代码实时显示出来。够爽吧，前面的编辑了CSS，这个实时调整一下XHTML，并且能实时查看效果。如下图：有了这个功能，我们可以真正的实现了在这个环境中进行开发，而且学习别人的作品