妙用网站设计“探测仪”
站长空间
网站设计风格是否有独到之处，是每个站长都应该仔细揣摩的。对于那些优秀网站，其色彩搭配、整体布局、图片、按钮等元件的制作都非常讲究，可以说每个细节都考虑得很周到。多数站长在钦佩之余，更希望能够学习借鉴，以快速提高自己的造诣。本文将为大家介绍两招制作网页“探测仪”的方法，从而提高自己的设计能力。
一、网站配色探测
如果你喜欢某个网站的配色，可以使用Colorcombos网站（http://www.colorcombos.com）提供的服务，自动探测并获取该网站配色方案。点击Colorcombos网站首页的“Grab Website Colors”选项，在“Enter URL”栏中输入指定网站地址，再点击“Get”按钮。而后自动切换到“Combo Tester”标签页，在此可看到探测到的指定网站使用的所有颜色（图1）。
我们看到各个颜色区域面板上都有Hex文本框，其中的一串数值即是该种颜色的色值，可以在主页制作工具中将这套配色方案应用于自己的网站中。如果你想在此基础上适当调节一下某种配色，使之更符合自己的网站风格，可点击颜色面板上端的左数第一个按钮，而后网站会弹出一个调色板，我们可随意设置组合颜色方案。如果你想舍弃某种颜色，可点击该面板右上端的叉号按钮将它关闭。
此外，若要用文字更清楚地标示这些颜色，可点击该页面上端的下拉列表，选择其中的“Show Text”。在该下拉列表中还可获取图像的颜色，再探测其它网站的配色方案，甚至能够自行创建配色模板。
二、网站源码探测
通过常规的源代码查看方式，无法获取外部样式表及Java脚本等代码，而且查看方式也不够灵活。使用Instant Source（下载地址：http://hbcnc.driversky.com/down/isrc2003_144_ch.exe）这款IE插件不仅能够浏览到所有网页元素，而且还可实现即指即现（某个元素或部分）HTML源代码。
下载并安装Instant Source程序后，重新启动IE，查看工具栏，点击新增的“Instant Source”按钮，而后在浏览器下端会出现一个代码显示窗口。不过，默认状态下显示的是整个网页的源代码，若要实现即指即现的效果须进行相关的设置。
点击Instant Source工具栏上的“选项”按钮，在弹出窗口中查看“常规设置”标签页中的“显示模式”，在此激活“鼠标所指的HTML元素”选项，再选择通过何种方式即指即现（例如在自由模式下只要将鼠标指针移动到某个元素上即显示源码，而按Ctrl键则会显示HTML上级元素）。此外，为了使代码显示得更明晰，我们可切换到“字体和颜色”标签页，重新设置背景色、文本颜色与字体。确认操作后，把鼠标指针放置于当前网页中的某个元素上，会看到在下方源代码显示区域中仅显示出了该元素的HTML代码（图2）。
如果想了解一下网页中某段文字的格式及字体属性等设置，则可点击“Instant Source”工具栏上的“显示”向下箭头按钮，在弹出菜单中选择“选定文本”。而后，在网页中选择任意一段文字（也可包括图片等元素），即会自动显示选定区域的源代码。
如果不满足于获取当前网站的源代码，还想借鉴其JS脚本及图片等网页元素，则可利用Instant Source的网页分析功能将它们导出。点击工具栏上的“另存为”按钮，弹出“页面对象”窗口，在“此页面的外部对象”列表框中，分类显示了“图像”、“Flash电影”、“脚本”及“样式表”等外部对象（图3）。我们可选择其中需要的对象保存至本地硬盘或复制其链接，也可选择全部保存。
提示：如果你使用的是Maxthon浏览器，可以使用更为简便的方法，将下面这段网友提供的代码复制于Maxthon的“简易收集面板”中，再点击“内容作为Script执行”按钮，而后将鼠标指针放置于网页元素上即会在提示栏中显示其源代码。不过，其弊端在于关闭Maxthon后就失效了，若要长期使用，可将这段代码保存为标签，以便随时调用。
＜script language="javascript"＞
function document.onmouseover() {
if ((/^(a|img|input)$/gi).test(window.event.srcElement.tag
Name)) {
if ((event.srcElement.instantSource==null)||(event.srcElement.instantSource==undefined)) {
event.srcElement.instantSource=event.srcElement.outer
HTML;}
event.srcElement.title=event.srcElement.instantSource;
}
}
＜/script＞