当前位置:首页 > DIV+CSS教程 > 正文

DIV+CSS设计必备工具:Web Developer插件 Miscellaneous工具教程

作者:不详 来源:source 【 】 浏览: 添加日期:2007-06-27 我要评论(1)     

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教程〗Tags: DIV+CSS 设计 Firefox Miscellaneous 插件

所属专题:火狐插件火狐插件

更多评论(1)..会员评论

evercetap(92.48.*.*) 发表于:2009-04-26 17:40:55
This site is very cool throughout the Internet by a hot girl Clik

出差旅游免费预订酒店

【视频教程】新手常见问题