制作网页一般都用什么软件呢?记事本?notepad?DW?firework?UltraEdit?FrontPage?

相信写过网页代码的人见到这些软件都不生疏,其实这些专业的软件以为,还有一些比较小巧的软件,应用起来也是很方便了,当然功能性可能会欠缺一些,比如说DW的联想功能,只需要输入一部分标签就可以出现下拉选择自己要书写的代码,但是作为辅助功能还是很好用的,下面就来讲一下。


综合开发工具

综合的网站开发工具几乎都是浏览器的插件,提供了许许多多的功能,例如:

开关 CSS、开关 Javascript、开关 Cache:

可以马上看到你的网页在浏览器中没有 CSS、没有 Javascript 或没有快取时的是长怎么样子。为什么要看没有 CSS 和 Javascript 的状况呢?一切都是为了 Accessibility 啊!

检视页面中文件的 DOM 结构和指定范围的原始码。

检视每个元素或 DIV 的ID、Class、目前的CSS样式(包括继承的样式),也可以将元素或 DIV 的外框显示出来。对于找出 CSS 和 Javascript 的问题十分有用。

检验 HTML 和 CSS 语法是否正确、符合 W3C 的标准。

因为这些工具是属于浏览器的插件,所以又分为给 IE 和 Firefox (缩写为FF) 所使用的版本,包括有:

Internet Explorer Developer Toolbar (IE)

Web Developer Extension (FF)

Firebug (FF)

HTTP 呼叫检视工具

让你可以很容易看到任何由浏览器所发出的 HTTP Request 的一切细节,包括档头资讯、所传递的参数、档案大小、传输速度和时间…等等。用来观察 Ajax 呼叫的行为和排错最方便。

HttpWatch (IE)

Firebug (FF)

原始码工具

其实大部分的综合开发工具就已经有这样的提供功能,让你单独检视网页中某个区域的原始码,或是帮你检查语法的正确性,另外也有单独小巧的原始码相关工具可以使用。想要鼠标滑过去就立刻看到该范围的原始码吗?而不需要在茫茫“码“海中捞针。

Instant Source (IE, 不是免费的)

HTML VALIDATOR (FF)

图形相关工具

除了用 Photoshop、Fireworks 这类标准的大型软件来切图以外,对于平常一些简单的工作,杀机焉用牛刀呢?

Color Cop:可以吸取画面上任何地方的颜色色码。

MeasureIt (FF):测量画面上的像素距离,例如想知道行距、边界要设为多少像素时,就靠他了。

Screen Calipers:这是另一套用来测量画面上像素距离的小软件。

Split Browser (FF):将 Firefox 同一个浏览器视窗分为上下或左右两半,让你可以在同一个画面上同时看到两个或多个不同的网页内容,互相做比对,而不需要在多个视窗中切换来切换去。

IE Tab (FF):虽然是叫做 IE Tab,但这可是 Firefox 的插件。让你在 Firefox 的浏览器视窗中开启 IE,神奇吧!

MWSnap:免费的萤幕抓图软件,用来切图也很方便,只要用秀图软件将原始网页设计的整张图打开、显示在萤幕上,就可以用萤幕抓图软件,撷取出某个范围的图形了。

HyperSnap:另一套好用的萤幕抓图软件,但不是免费的。

Picasa:Google 的免费秀图、图片管理软件。

Adobe Labs’ Kuler:Adobe 提供配色参考的网站,想不出要用什么颜色时,看一看也许会有不一样的灵感。

除了以上这些其实chrome的审查元素功能也是很好的查错排错功能,现在比较主流的浏览器基本上都有这个功能,利用360浏览器(极速模式或者极速版)就有。


Tag: 网站 网站开发 网站开发工具 网站开发软件