作家
登录

网页设计必备工具 firefox Web Developer插件 CSS工具组教程

作者: 来源:www.28hudong.com 2012-11-19 14:24:40 阅读 我要评论

该插件在火狐浏览器中安装。Web Developer 插件强大的功能超乎你的想象,用于CSS网页布局开发调试只是它强大功能的一部分,对于网络程序的开发也提供了非常强大的辅助设计功能,我们不将它完全的展开探讨,我们仅针对CSS网页布局开发调试对它进行了解,有兴趣的朋友可以详细的研究一下它的强大功能。 CSS工具 是我们需要了解的重点,它提供了许多功能来辅助我们查看网页,废话少说,我们往下深入,看图片先: 1、Disable Style 禁用样式  可以用来禁用当前页面的某些或全部样式的显示。 ·All Style  禁用所有样式,页面中将没有任何样式效果。 ·Browser Default Styles 应用浏览器默认样式,意义不大的功能。 ·Embedded Styles 禁用放置在页面中 的内部样式表,其它无影响。 ·Inline Styles  禁用行间样式表,即使用style=""形式的将不显示。 ·Linked Style Sheets  禁用以link标签链接外部样式表。 ·Print Sytles  禁用打印样式表。 ·Individual Style Sheet  单独设置所链接的外部样式表是否显示。例如:当前页面链接了三个外部样式表,1.css、2.css、3.css我们可以通过此功能将某一个样式表禁用。请你注意这个功能其实是非常有用的,可以帮助我们在调试时找到问题是出在哪里,我们禁用某个样式,看引发的问题是不是依然存在。如果禁用了某一个样式,问题消失了,那一样是这个被禁用的样式表文件中的某些设置出现了问题。 2、Display CSS By Media Type 按媒体的类型显示样式。此功能与此类似。不过目前只支持两种媒体类型:掌上设备、打印。 3、View CSS 用来查看CSS文件代码,点击该命令会打开一个新的FF标签页,显示当前页面的CSS,如果当前页面Link有多个CSS文件,会给出该文件的URL,或者显示出此样式为行间样式或内部样式。如下图: 4、View Style Information 查看样式信息。非常实用的学习与辅助设计功能,在点击开启这个选项以后,在FF的状态栏,会给我当前鼠标所在位置的样式信息。鼠标停留在某一个元素上时,也会显示出该元素在当前CSS样式表中的层次。这个功能可以非常方便的学习别人的CSS网页布局设计,我们在浏览他人的作品里,对某一效果不知道如何实现,我们可以应用这一功能立刻找到所应用的样式,知道它的层次关系,可以在CSS文件中找到相应的编码。此功能的效果如下图:   5、Add User Style Sheet 增加用户样式。我们可以对当前页面的样式设置自己浏览时的样式,网站的当前页面能够按自己编写的样式来显示。我们在学习他人的作品时,可以进行举一反三的改进,或进行其它的优化。我们在设计自己的页面时,这也可以使我们对文件进行临时修改,立即查看效果。进行细节的微调与设计。 6、Edit CSS 编辑CSS。这是Web Developer 插件最大的亮点之一,是我们最常用到的功能。点击这个命令,FF左侧打开一个编辑窗口,将已有的CSS样式已经放置其中了,如果有N个CSS文件组成,会列出标签式的选项卡,我们可以随意的切换。显示出的CSS编辑,我们可以在这个窗口中随意的更改与编辑,并且右侧的网页将按修改后的样式实时显示出来。如果我们改变了h1的样式,则在右侧的网页窗口中立即可以看到编辑后的效果!如下图: Web Developer插件的这个功能,我不用多说,大家也可以明白它可以干什么了。我们可以在开发网站时,在查看效果的同时,可以用此功能直接打开CSS文件进行编辑,并随时掌握修改后的成效,修改满意了,点击窗口上方的保存按钮,可以将当面样式表保存到指定的位置。真正实现了便捷的辅助设计与开发。我们学习别人的作品,可以用它来查看网页上的CSS文件,查看别人的编码,试着修改别人的编码并可以立即查看到变化后的效果,思考别人为什么这样写,为什么这样进行设置,有什么道理。以此来学习,我们可以更方便的学习优秀网站的CSS技术应用。 7、Use Border Box Model 使用边框式盒模型,这是一个并不常用的功能,你可以点选此命令查看一下页面的变化。

  推荐阅读

  整洁漂亮的网页设计的4项原则

本文将讨论这4项与web设计相关的原则。只要在脑海中牢牢记住了这4项原则,你就一定可以设计出更加整洁漂亮的网页。 1.反差效果 好的反差效果设计可以给用户一个极好的第一印象。如果用户的眼睛没有焦点,注意力>>>详细阅读


本文标题:网页设计必备工具 firefox Web Developer插件 CSS工具组教程

地址:http://www.17bianji.com/kaifa/yejie/16215.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)