【火星人】开讲：JS Browser 与如何编制 MXP

导读：
　　右侧会随着 Vertical Scroll Bar上下移动的「目录」
　　关闭後，只要在网页的任何地方按一下，就可以还原
　　。目录会被 iFrame挡住
　　。目录的隐藏部份，会挡到其後方的链结 ( 目录关闭时，会挡到其後方的链结与目录还原 )
　　。若是分页发生错误时，目录就无法随着卷轴移动，请按「重新整理 ( F5)」即可
　　( 这个目录语法，虽然实用便捷，但是却消耗不少系统资源，请留意 )
　　 【前言】
　　 DreamWeaver这个杀手级软体( Killer Application) ...
　　很多 user误以为 DreamWeaver只是一种「网页美编」的软体，实则不然：
　　.
　　□ DreamWeaver、 FireWorks、 Flash已构成网页设计，最坚实的攻防线
　　□ Director、 Flash的 ShockWave技术，已可轻易嵌入到 DreamWeaver中
　　□ DreamWeaver UltraDev，让 IT工程师多了一种更视觉化的 Solution
　　□ ColdFusion与 Generator则提供 Server端，更简易又强大的新方案
　　□ ……
　　在影像绘图，您可能还是采用 Photoshop、 PhotoImpact，而不是 Macromedia公司的 xRES
　　在向量绘图，您可能还是采用 CorelDRAW !、 Illustrator，而不是不是 Macromedia公司的 Freehand
　　.
　　但是眼见很快的未来，在您的公司里
　　 IT工程师与 WebMaster，可能都会开始搭配 ColdFusion + Generator + DreamWeaver UltraDev
　　美编，当然会采用 DreamWeaver、 Flash
　　这中间的互通核心，几乎都是绕着 DreamWeaver...
　　.
　　但吊诡的是：
　　工程师适用的 Script语法，美编不会、也不需要学
　　美编适用的 Script语法，工程师不熟、也懒得学、更懒得教美编如何撰写与修改
　　.
　　本案例 ( JSBrowser) 就是具有代表性的例子：
　　工程师觉得改一改语法就好了 ( 虽然很多工程师也搞不懂、更不会修改 )
　　但是要美编看得懂这些「有字天书」，简直是要他们的命
　　 DreamWeaver解决了上述吊诡的困境
　　一如 Photoshop的 Plug-ins： DreamWeaver也发展了 MXP...
　　( 虽然 Flash也支援 MXP，但是讨论 DreamWeaver的 MXP，则比较浅显易懂 )
　　.
　　有了 MXP後，美编只要懂一点简单的 HTML与 Script，从此就可以告别「求爷爷、告奶奶」的窘境：
　　 MXP自动帮您产生九成九最困难与繁杂的语法部份
　　剩下最简单的零点一成，您再自行手动修改即可
　　闲话不说，就入主题 ...
　　.
　　翻译名词，要能够「信、雅、达」，确实很困难…
　　马上要介绍的这个东东
　　国外叫做「 Chromeless Window」，可是左看右看，都与「铬( Chrome)」无关
　　翻译成「无边框网页」、「无 IE外观的网页」、…也都马怪怪的
　　由於这种功能，是以 J ava S cript写成的 quasi- Browser，故还是称其为 JS Browser还比较适当一点
　　
　　
　　.
　　
　　
　　不管您英文阅读的能力好不好，看到上图这样子硬绑绑的东西，实在是难以下咽…，辅之：
　　■ 没有 WindowTitle( TitleBar) 之 Icon的功能
　　( TitleBar 的 LOGO Icon，在商业用途上，是重要的 )
　　■ TitleBar在拖曳时，游标不会变成拖曳的符号
　　( 没有移动时的游标变化，总是觉得怪怪的 )
　　■ 版本考虑不周到 ( 以下是同一个 MXP在 DreamWeaver 3中所看到的画面 )
　　
　　
　　由於 DreamWeaver 4提供了很方便的吸色函数功能，可以让 MXP有所发挥
　　( 再加上 DreamWeaver 4也已推出好一阵子了)
　　
　　
　　故应该放弃 DreamWeaver 3的 MXP( 或是重写一个 for DreamWeaver 3 only 的 MXP)
　　.
　　本 MXP会侦测并拒绝在 DreamWeaver 3 + Extension Manager下安装，故无版本困扰之疑虑
　　
　　
　　.
　　
　　
　　.
　　
　　
　　( 练习时，您最好是新建一个档案夹，所有的 HTML档与图档，都存在这个档案夹中)
　　刚才开启 MXP时，要先存档，是因为 MXP会自动加进一些程式码到那个档案 ( index.htm) 中
　　如果您不存档先， MXP就不知道是哪一个档、更没办法加东西进去…
　　现在的这个 URL，则是会弹出来的 JS Browser，如果您没有先编制个 HTML档放着，请问要弹出谁呢 ?
　　您可以先随便做一个 HTML档 ( jsbrowser01.htm ) 来当做是练习
　　 再於方框中键入路径与档案 ( 或是按 JS Browser的按键，直接指定该档 )
　　
　　
　　大家常会把上图的 WindowName 与右图的 WindowTitle ( TitleBar )搞混…
　　您只要依照上图 ( WindowName) 所述，就不会有问题了
　　( WindowName只是供 IE辨视，只有当弹出两个以上的视窗时，才需要注意其命名不要相同 )
　　( WindowName只是供 IE辨视，并不会出现在任何一个视窗的画面中、也不会出现在 TitleBar上 )
　　 WindowTitle( TitleBar) 的文字属性，一看就懂，无庸赘述
　　当您设定好所有的项目，存档後
　　会在您刚存档的那一个档案夹中
　　自动产生一些档案 ( 如右图 )
　　您只要编制一张 20 px× 20 px的 GIF图档
　　再覆盖过 LOGO.gif，即可变更 TitleBar之 Icon
　　
　　
　　
　　
　　吸色功能：不限在色盘中吸色，您也可以吸取 DreamWeaver编排中的任何网页物件之颜色
　　
　　
　　除非您有特殊的需要，不然， JS Browser就是置於萤幕的正中央
　　( 也就是上图的 CheckBox是处於 打勾的状态 )
　　取消打勾的状态时，您就要输入距离萤幕左上角之 X、 Y的座标 ( pixel) 了
　　.
　　 MXP不是万能的，也不需要是万能的：
　　□ 一个「万能」的 MXP，就意味着「界面复杂」与「难学难懂」
　　故一个「好」的 MXP，则是求得 化繁为简、操作简易、仍保有扩充性的平衡点
　　□ 即令 MXP的功能有多强大，很多地方，还是得套用 HTML、 Script
　　故一个「好」的 MXP，则是只处理难懂的、复杂的、需要模组化的部份
　　简单的 HTML、 Script 的部份，则留给 user 去修改
　　→如此一来，初入门的 user，除了方便省事之外，更可以了解 HTML、 Script 的基本架构
　　→更保留了许多的可扩充性
　　【火星人】的 JS Browser，就是基於上述的考量，故不把「首页 JS Browser化」写进 MXP里面
　　当您在 DreamWeaver设定好参数、存档後， MXP会帮您在同一个档案夹中，产生的一些档案：
　　
　　
　　请参考「读我先. txt」，有关於修改「首页 JS Browser化」的部份：
　　如果您想要让首页一启动就自动消失，只剩下弹出的无边框 JS Browser
　　( 让人误以为 JS Browser就是首页 )
　　( 即：首页无边框化 )
　　请在刚才新建的档案夹中，先找到「 _index.htm」
　　参考原始码中的中文说明，复制与贴上後，再将档名改成 index.htm即可
　　( 原来的 index.htm，当然要先更名 or移到别的档案夹中，以便日後还原← DW只认识这个档案 )
　　( 如果您仍要保留有 IE工具 Bar与边框的首页，请删掉 _index.htm)
　　
　　
　　至此，您不但可以轻易编制出 JS Browser
　　稍微改一下语法，连首页都会自动消失→即「首页 JS Browser化」
　　( 这一招，可是连老外都不会喔…^_^|||… )
　　小弟俺请教您一个问题：
　　▲ 当您千辛万苦看完【火星人】吹捧自己的臭文章，才搞出漂漂亮亮的「首页 JS Browser化」时
　　当网友想要把您千辛万苦才搞出来的〝大作 〞给 BookMark到「 IE/ 我的最爱」时
　　请问，要用手来ㄅㄨˋㄎㄜˇ? 还是用脚来ㄇㄚˋㄎㄜˇ?　( 因为 IE的工具列，全都不见蛋了… )
　　△ 不要指望很多笨 ( 初学 ) 网友会知道可以按滑鼠的右键
　　然後就会跳出右图的这个功能
　　 Never !
　　△ 即令网友不笨
　　但是很多人都喜欢把网页从头到尾给 Flash化
　　这时，右键的功能，一样会突凸捶 ( 如下图 )
　　
　　
　　.
　　
　　
　　
　　
　　.
　　■ 想知道 MXP的 原始码吗?
　　■ 想知道如何制作 MXP的 安装程式吗?
　　有眼镜的，请扶好您的眼镜，没有眼镜的，请扶好别人的眼镜：( 准备跌破眼镜吧 !!! )
　　请先下载并安装〝加入到「我的最爱」 MXP〞 ( 即上述的 BookMark MXP)
　　接着，请对照下图，进入您 DreamWeaver的安装目录 / Configuration/ Actions/【火星人】/ 视窗类的档案夹中
　　
　　
　　对 ! 看到没 ? 不要怀疑 ! 就是它们 !!!
　　而且就只有这两个档案…
　　■ A00.png就是底图
　　■ MarsMXPA00.htm就是原始档
　　这个档案夹中，其它的档案，就是一部份「 JS Browser」的 MXP原始档：
　　请注意：「 JS Browser」的 MXP原始档，不是只有这些，还有其它的原始档，是放置在别的档案夹中
　　 JS Browser的 MXP编撰，复杂许多，故省略之
　　先看一下 MarsMXPA00.htm在 DreamWeaver 4 中的长相：
　　
　　
　　嗯，很好，人模人样的…
　　再看一下 MarsMXPA00.htm的原始档长相：
　　
　　………
　　<script LANGUAGE="javascript">
　　function canAcceptBehavior(){
　　return true;
　　}
　　function KBAddFavorite(theTit){
　　IE4=(document.all)? 1 : 0
　　if (IE4) {
　　theSite=window.location
　　window.external.AddFavorite(theSite,theTit)
　　}
　　}
　　function behaviorFunction(){
　　return " KBAddFavorite"
　　}
　　function applyBehavior(){
　　var theTitle=document.theForm.theTitle.value
　　return " KBAddFavorite('"+theTitle+"')"
　　}
　　function browseFile(){
　　var fileName = browseForFileURL();
　　if (fileName) document.theForm.theTitle.value = fileName;
　　}
　　function inspectBehavior(argStr){
　　var argArray = getTokens(argStr, "(),'")
　　document.theForm.theTitle.value=argArray[1]
　　}
　　function initializeUI(){
　　document.theForm.theTitle.focus();
　　}
　　</script>
　　
　　
　　
　　………
　　
　　………
　　
　　
　　妈呀 ! 这是什麽怪物 ?
　　有人见人怕的「抓蛙屎怪婆」-- JavaScript
　　 JavaScript码中，还藏着 DreamWeaver专属的函数
　　纯 HTML码 ( …) 中，还要呼叫上述两者
　　好 ! 你是有为的青年：不怕苦、不怕难、不怕继续往下看
　　可是这样怎麽会变成「安装程式 ( *. MXP)」呢 ?　根据 Macromedia的官方说法，有两大步骤：
　　□ 在您 DreamWeaver的安装目录 / Extension Manager/ DreamWeaver的档案夹中
　　有三个档案：
　　
　　
　　您可以用「记事本」打开 Blank.mxi：参考一下完全空白的 MXI ( MX P的 I nstaller)，需要俱备那些东东
　　接着，再看看人家是怎麽从 Blank.mxi→ Sample.mxi的
　　最後，再看看 Sample. mxi与 Sample. htm有何关联 ? …
　　□ 对 ! Macromedia公司早就料到天底下没有人 ( 包括本人 ) 会看得懂这鬼玩艺儿
　　所以又特别准备了另一个让人更看不懂的东东： mxi_file_format .pdf　( 下载 _96K)
　　对 ! 下载也是白下载，还是先看本人的范例比较快　( 下载)
　　一如 *.htm档，您只要将 MXI档，拖曳到「记事本」中，就可以看到原始码
　　 【环境清空】
　　■ 请先把 DreamWeaver的安装目录 / Configuration/ Actions/【火星人】/ 视窗类档案夹中的
　　 A00. png
　　 MarsMXPA00. htm
　　复制到新建的档案夹中
　　■ 再将刚下载的 MarsDWMXP_A00. mxi、 mxi_file_format. pdf也一并复制进来
　　■ 最後，将〝加入到「我的最爱」〞、〝弹出无边框网页〞都 移除掉
　　 【( 重现 ) 编制流程】
　　反覆测试几次、再找朋友帮忙除错，就可以发布了

本文转自
http://www.heyshow.com/tips/tipspool/MarsMXP/