Web Developer插件 Miscellaneous工具教程_Div+CSS教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

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编码的学习。方便实用!

来源:模板无忧//所属分类:Div+CSS教程/更新时间:2012-08-06
相关Div+CSS教程