莫相离 发表于 2015-1-16 10:39:01

DIV教程之网页计划必备工具:Web Developer插件 CSS工具组教程

兼容做法就是都设置float属性。但是记住有设置过float就要将floatclear掉,不然下面的div会叠在已float的div上。

[*]
[*]
WebDeveloper插件壮大的功效超乎你的设想,用于CSS网页结构开辟调试只是它壮大功效的一部分,关于收集程序的开辟也供应了十分壮大的帮助计划功效,我们不将它完整的睁开切磋,我们仅针对CSS网页结构开辟调试对它举行懂得,有乐趣的伴侣能够具体的研讨一下它的壮大功效。
CSS工具 是我们必要懂得的重点,它供应了很多功效来帮助我们检察网页,空话少说,我们往下深切,看图片先:



1、DisableStyle禁用款式能够用来禁用以后页面的某些或全体款式的显现。
·AllStyle禁用一切款式,页面中将没有任何款式效果。
·BrowserDefaultStyles 使用扫瞄器默许款式,意义不年夜的功效。
·EmbeddedStyles 禁用安排在页面中的外部款式表,别的无影响。
·InlineStyles禁用行间款式表,即便用style=""情势的将不显现。
·LinkedStyleSheets禁用以link标签链接内部款式表。
·PrintSytles禁用打印款式表。
·IndividualStyleSheet独自设置所链接的内部款式表是不是显现。比方:以后页面链接了三个内部款式表,1.css、2.css、3.css我们能够经由过程此功效将某一个款式表禁用。请你注重这个功效实际上是十分有效的,能够匡助我们在调试时找到成绩是出在那里,我们禁用某个款式,看激发的成绩是否是仍然存在。假如禁用了某一个款式,成绩消散了,那一样是这个被禁用的款式表文件中的某些设置呈现了成绩。
2、DisplayCSSByMediaType 按媒体的范例显现款式。此功效与此相似。不外今朝只撑持两种媒体范例:掌上设备、打印。
3、ViewCSS 用来检察CSS文件代码,点击该命令会翻开一个新的FF标签页,显现以后页面的CSS,假如以后页面Link有多个CSS文件,会给出该文件的URL,大概显现出此款式为行间款式或外部款式。以下图:



4、ViewStyleInformation 检察款式信息。十分有用的进修与帮助计划功效,在点击开启这个选项今后,在FF的形态栏,会给我以后鼠标地点地位的款式信息。鼠标停止在某一个元素上时,也会显现出该元素在以后CSS款式表中的条理。这个功效能够十分便利的进修他人的CSS网页结构计划,我们在扫瞄别人的作品里,对某一效果不晓得怎样完成,我们能够使用这一功效立即找到所使用的款式,晓得它的条理干系,能够在CSS文件中找到响应的编码。此功效的效果以下图:




5、AddUserStyleSheet 增添用户款式。我们能够对以后页面的款式设置本人扫瞄时的款式,网站确当前页面可以按本人编写的款式来显现。我们在进修别人的作品时,能够举行触类旁通的改善,或举行别的的优化。我们在计划本人的页面时,这也能够使我们对文件举行一时修正,当即检察效果。举行细节的微调与计划。
6、EditCSS 编纂CSS。这是WebDeveloper插件最年夜的亮点之一,是我们最经常使用到的功效。点击这个命令,FF左边翻开一个编纂窗口,将已有的CSS款式已安排个中了,假如有N个CSS文件构成,会列出标签式的选项卡,我们能够随便的切换。显现出的CSS编纂,我们能够在这个窗口中随便的变动与编纂,而且右边的网页将按修正后的款式及时显现出来。假如我们改动了h1的款式,则在右边的网页窗口中当即能够看到编纂后的效果!以下图:



WebDeveloper插件的这个功效,我不必多说,人人也能够分明它能够干甚么了。我们能够在开辟网站时,在检察效果的同时,能够用此功效间接翻开CSS文件举行编纂,并随时把握修正后的效果,修正中意了,点击窗口上方的保留按钮,能够将劈面款式表保留到指定的地位。真正完成了便利的帮助计划与开辟。我们进修他人的作品,能够用它来检察网页上的CSS文件,检察他人的编码,试着修正他人的编码并能够当即检察到变更后的效果,思索他人为何如许写,为何如许举行设置,有甚么事理。以此来进修,我们能够更便利的进修优异网站的CSS手艺使用。
7、UseBorderBoxModel 利用边框式盒模子,这是一个其实不经常使用的功效,你能够点选此命令检察一下页面的变更。


并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的话,两个浏览器下会有区别,具体有一个会产生间隙。

海妖 发表于 2015-1-18 07:46:23

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

因胸联盟 发表于 2015-1-26 20:47:59

还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

灵魂腐蚀 发表于 2015-2-4 21:41:08

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

老尸 发表于 2015-2-10 19:30:54

在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。

柔情似水 发表于 2015-3-10 20:58:53

Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

莫相离 发表于 2015-3-17 11:07:16

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

若相依 发表于 2015-3-24 08:39:09

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
页: [1]
查看完整版本: DIV教程之网页计划必备东西:Web Developer插件 CSS东西组教程