Web Developer教程.docx
《Web Developer教程.docx》由会员分享，可在线阅读，更多相关《Web Developer教程.docx（18页珍藏版）》请在冰豆网上搜索。
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中可以按媒体查看方式查看页面效果（
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，并且能实时查看效果。
如下图：
有了这个功能，我们可以真正的实现了在这个环境中进行开发，而且学习别人的作品时，也能兼顾xhtml编码的学习。
方便实用！
WebDeveloperOutline、Resize工具
Outline线框工具提供将元素使用线框标识出来的功能。
我们可以辅助查看各细部的元件。
如下图：
我们列举一此常用的功能如下：
1、OutlineFrames线框显示出框架，如果使用了框架技术，可以用线条标注出来。
2、OutlineHeadings标注标题元素，如果页面中使用了h1～h6对象，会用线条标注出来。
3、OutlineTableCells标注单元格，如果页面是用传统的表格进行布局，往往表格线是不可见的，表格只是布局的需要，根本没有边框线，使用这个命令可以将它们都用线框标识出来。
4、OutlineTables 类似于上面一个命令，区别在于上面的是显示单元格，而这个命令只显示表格。
如上面的显示的是tr、td。
这个命令只显示table。
5、OutlineBLockLevelElements标注出对象的嵌套级别。
6、OutlineDeprecatedElements 标注出网页中存在的不合法的对象。
合法与否根据网页的文档对象模型doctype来判断。
7、OutlinePositionedElements标注出定位对象，可以单独的标注出来四种定位方式：
8、OutlineExternalLinks 标注出外部链接，请注意是指链接向站外的链接，外部链接。
9、OutlineLinksWithoutTitleAttributes 标识出所有的显示，并且不显示title属性的值。
10、OutlineCurrentElement标识鼠标位置的当前对象。
11、OutlineCustomElements自定义标注，点选该命令会打开对象框，要求设置标注哪些对象，如键入“h1”，并设置相应的颜色。
如下图：
12、ShowElementNamesWhenOutlining 点选该命令会在标注的同时，显示对象的名称。
Resize尺寸工具这是一个小巧而实用的工具，我们可以利用它来改变窗口的大小，我们在开发CSS网页布局时，屏幕尺寸或许很大，但要兼顾到小尺寸的访客的需求，我们可以用此工具来预览小尺寸显示的效果。
如下图：
1、DisplayWindowSize显示当前窗口的大小，点选该命令会直接弹出一个对话框显示信息。
2、DisplayWindowSizeInTitle将窗口的大小放置于标题栏，这是一个非常方便的功能，我们可以自由的拖动缩放窗口的大小，在标题栏立即就能知道当前的窗口是多大。
如下图：
3、ResizeWindow可以键入数值修改窗口的大小。
4、800*600在网页设计制作中，最需要关注的就是800*600大小的窗口中显示的情况，WebDeveloper插件预设了这个尺寸。
直接点选即可。
升级会员 