web developer教程

《web developer教程》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、WebDeveloper教程作者：佚名　来源：52css　发布时间：2011年09月18日　点击数：1165现在我们介绍一种网页调试的辅助工具：WebDeveloper！它是运行在FF（指Firefox浏览器下同）环境中的插件，是目前公认为最为优秀的网页调试工具。WebDeveloper作为FF的插件存在，主要功能表现在几个重要的方面：对页面中的文本、图像、媒体文件进行控制，对网页所应用的CSS文件的id与class辅助查看，表格辅助查看，可以实现修改CSS文件实时显示出得到的页面效果等等。WebDeveloper插件能够帮助我们对CSS网站进行分析，我们使用FF对网页进行

2、浏览，运用WebDeveloper插件不仅仅只是能看到对方的源代码，还能方便的分析出页面的布局结构，CSS书写方式，鼠标所在位置的id或class是什么等等，使我们能迅速的理解、学习别人的成功经验，进而更加方便快捷的掌握CSS布局技术。WebDeveloper插件概要WebDeveloper插件以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的更多信息，使我们进一步的了解当前所浏览的网页。在WebDeveloper插件工具栏中，主要由以下几个部分组成：Disable、Cookies、CSS、Forms、Imag

3、es、Information、Miscellaneous、Outline、Resize、Tools、ViewSource、Options。下面我们就对其概况进行介绍。Disable禁用工具可以暂时的屏蔽当前页面中的某些东东，如JavaScript脚本、缓存、mete自动重新定向、将网页显示为黑色（图片除外）、禁用弹窗等等。如下图：Cookies工具可以用此工具查看当前页面的Cookies信息，可以按不同的域名或路径进行查看，而且可以手工增加一个Cookies，这对于后台网络编程的开发调试来说是非常方便而得力的工具。如下图：CSS样式表工具这是一个非常强大的工具，基于CSS网

4、页布局有这个得力的助手，工作与学习都将变的非常简单，可以控制CSS是否应用，查看页面的CSS文件，并进行实时的编辑，并在浏览器窗口中立即反应出编辑后的效果。关于此工具，我们后面将作更加深入细致的介绍。Forms表单工具其主要作用是对页面的表单进行控制，其中的很多功能对于表单程序的开发有着非常非常大的帮助，由于我们的重点是CSS网页布局，此工具我们不作深入的探讨。如下图：Images图像工具可以对当前页面的图像进行设定，可以显示所有图片的alt信息，对背景等也可以进行是否显示的设定。如下图：Information信息工具此工具在我们的CSS网页布局设计中也经常用到，我们可以用

5、它来查看页面中所有的id、class及table等元素的名称、占位等信息，关于此工具，我们后面将作更加深入细致的介绍。Miscellaneous其他这是一个非常“好玩”的工具，它所提供的功能是我们所梦寐以求的，在页面布局中，我们可以用它来达到很多有意思的功能，如辅助线、面积、测量等，我们在CSS网页布局设计中也经常用到，关于此工具，我们后面将作更加深入细致的介绍。Outline线框工具这组工具对我们CSS网页布局设计是非常有用的，线框显示工具能够将页面中的某些元素使用线框描边，使我们可以更好的查看其占位信息，我们可以使用它给div、h1-h6、表单等进行线框描边，关于此工具

6、，我们后面将作更加深入细致的介绍。Resize尺寸工具我们可以用它来改变浏览器窗口的尺寸，如果我们使用了1600*1200的分辨率，我们可以借助此工具来模拟1027*768的窗口效果。关于此工具，我们后面将作更加深入细致的介绍。Tools工具对于我们CSS网页布局设计，它的最大功能在于将CSS及XHTML校验工具整合在一起，可以点击此工具中的校验选项对当前页面进行检验，它会自动链接到相关校验页面，并返回校验结果。如下图：ViewSource查看源代码用于查看页面的源文件。Options选项用于WebDeveloper插件的参数设置。如下图：WebDeveloperCSS工具

7、WebDeveloper插件强大的功能超乎你的想象，用于CSS网页布局开发调试只是它强大功能的一部分，对于网络程序的开发也提供了非常强大的辅助设计功能，我们不将它完全的展开探讨，我们仅针对CSS网页布局开发调试对它进行了解，有兴趣的朋友可以详细的研究一下它的强大功能。CSS工具　是我们需要了解的重点，它提供了许多功能来辅助我们查看网页，废话少说，我们往下深入，看图片先：1、DisableStyle禁用样式可以用来禁用当前页面的某些或全部样式的显示。·AllStyle禁用所有样式，页面中将没有任何样式效果。·Brow