当前位置: 模板下载 > 学习教程 > 网页设计 > DIV+CSS教程 > 详细信息

DIV+CSS制作必备软件:Web Developer插件 Outline、Resize软件教

时间:2010-08-13

Outline线框工具提供将元素使用线框标识出来的功能。我们可以辅助查看各细部的元件。如下图:

 

 

 

我们列举一此常用的功能如下:

1、Outline Frames 线框显示出框架,如果使用了框架技术,可以用线条标注出来。

2、Outline Headings 标注标题元素,如果页面中使用了h1~h6对象,会用线条标注出来。

3、Outline Table Cells 标注单元格,如果页面是用传统的表格进行布局,往往表格线是不可见的,表格只是布局的需要,根本没有边框线,使用这个命令可以将它们都用线框标识出来。

4、Outline Tables 类似于上面一个命令,区别在于上面的是显示单元格,而这个命令只显示表格。如上面的显示的是tr、td。这个命令只显示table。

5、Outline BLock Level Elements 标注出对象的嵌套级别。

6、Outline Deprecated Elements 标注出网页中存在的不合法的对象。合法与否根据网页的文档对象模型doctype来判断。

7、Outline Positioned Elements 标注出定位对象,可以单独的标注出来四种定位方式:Absolute、Fixed、Float、Relative。

8、Outline External Links 标注出外部链接,请注意是指链接向站外的链接,外部链接。

9、Outline Links Without Title Attributes 标识出所有的显示,并且不显示title属性的值。

10、Outline Current Element 标识鼠标位置的当前对象。

11、Outline Custom Elements 自定义标注,点选该命令会打开对象框,要求设置标注哪些对象,如键入“h1”,并设置相应的颜色。

12、Show Element Names When Outlining 点选该命令会在标注的同时,显示对象的名称。

Resize尺寸工具 这是一个小巧而实用的工具,我们可以利用它来改变窗口的大小,我们在开发CSS网页布局时,屏幕尺寸或许很大,但要兼顾到小尺寸的访客的需求,我们可以用此工具来预览小尺寸显示的效果。如下图:

 

1、Display Window Size 显示当前窗口的大小,点选该命令会直接弹出一个对话框显示信息。

2、Display Window Size In Title 将窗口的大小放置于标题栏,这是一个非常方便的功能,我们可以自由的拖动缩放窗口的大小,在标题栏立即就能知道当前的窗口是多大。如下图:

 

 

 

3、Resize Window 可以键入数值修改窗口的大小。

4、800*600 网页设计制作中,最需要关注的就是800*600大小的窗口中显示的情况,Web Developer插件预设了这个尺寸。直接点选即可。
 

至此,我们的教程基本结束了。相信你对Web Developer插件强大的功能已经有足够的了解,至少在CSS网页布局开发中,应该如何发挥它的功能你已经非常清楚了。但还需要提醒你注意,我们所开发的网站,并非全部在FF浏览器中运行,我们需要考虑更多的兼容因素,当前的网络浏览器还是以IE为主流。我们需要明白,我们要借助于的是Web Developer插件强大的功能,但它并不是万能的,我们的开发还需要进入IE中进行调试与预览。我们可以用它来帮助我们开发与找出问题,帮助我们学习他人的成功作品。非常欢迎大家光临我的小站www.52css.com这里有一些教程或许可以助你一臂之力,我们也提供了一些CSS模板大家可以下载学习,我们也列出一些CSS优秀站点,大家可以多看大师的作品!祝愿大家尽快的掌握CSS技术,为WEB标准在中国的普及作出自己的贡献!