遨游3皮肤制作教程.docVIP

MX3 皮肤制作教程 对应皮肤框架版本号: 1.0.10 文档版本: 1.0.7 mx3 的界面引擎 在制作 mx3 的皮肤之前, 需要先了解一下mx3界面引擎. mx3 的界面引擎基于 HTML+CSS 技术实现. 也就是说, mx3所有的界面都是通过 HTML 和 CSS 文件来描述的. 这个界面引擎除了基本的 HTML 4.0 和 CSS 2.1 支持外, 还有自行扩展的一些样式和控件. 可以提供极高的界面定制能力. 对界面引擎的详细介绍可以参阅mx3-界面引擎特性介绍文档. 因此, 如果你有网页制作方面的经验的话, 做 mx3 的皮肤会很容易上手. mx3 的皮肤文件在哪里 mx3 的皮肤文件放置在如下文件夹内: %AppData%\Maxthon3\Skins\ 你会在此目录下看到类似以下文件包的若干文件, 它们就是 mx3 的皮肤包文件. mx3 除了支持文件包形式的皮肤之外, 也支持目录形式的皮肤, 以便皮肤制作者修改测试. 你只需在 Skins 目录下创建一个子目录, 并在里面放入皮肤所需的文件即可. 提示: 你可以用皮肤打包/解包工具解开别人制作的皮肤, 看看别人的皮肤是怎么实现的. 制作你的第一个mx3皮肤 创建皮肤目录 打开windows的资源管理器, 在地址栏里面输入 %AppData%\Maxthon3\Skins\ 这时资源管理器应该跳转到了 Maxthon 的皮肤目录. 在这个目录里面新建一个文件夹. 我们这里给这个文件夹取名: first 撰写皮肤描述文件 在刚才创建的first目录里面里面新建一个 skin3.ini 并写入以下内容: [skin] _def=1.0.0 version=1.0.0 [styles] main=* [style-main] name = My First Skin name[zh] = 我的第一个皮肤 thumbnail = thumbnail.png baseStyle = mainFolder = main mainFile = index.htm 最前面的 _def 定义了此皮肤对应的皮肤引擎版本. 一般照抄就可以. version 定义了这个皮肤的版本号. 这里我们写 1.0.0 就行了. [styles] 的内容我们不必关心. 毕竟那个是为更高级的皮肤开发者准备的. name, 顾名思义就是皮肤的名称. 默认的 name 必须填写英文的皮肤名字. 中文的皮肤名用下面的 name[zh] 指定. 这样做是为了保证良好的多语言支持. thumbnail 指定的是皮肤的缩略图. 可以使用 JPG, PNG 格式, 大小为 100x100 像素. 这个缩略图会在浏览器的皮肤选择对话框和分享网站上展示. 我们随意做个图像放着就行了. baseStyle 指定我们的皮肤是基于哪个内置皮肤制作的. 除了这里写的classic 外(使用经典皮肤作为基准), 还可以用 modern 表示基于现代皮肤制作. 皮肤引擎在处理皮肤文件时, 会按这里指定的基准皮肤进行替代式处理. 我们这里选择使用经典皮肤作为基准, 因为现代皮的按钮替换得太大不怎么好看. 剩下的 mainFolder 和 mainFile 不是我们现在需要关心的. 做好这个 skin3.ini 文件, 你就可以在mx3的皮肤中心里面看到你的皮肤了. 不过因为它是个空皮肤, 所以点击后, 除了切换到经典皮肤外, 没有别的变化. 替代式皮肤处理 正式动手做皮肤之前, 还是让我们了解下mx3的皮肤文件处理模式. mx3 的皮肤文件处理方式是替代式的. 什么叫替代式处理? 以内建的皮肤文件为基准 用户制作的皮肤都是基于内建的皮肤文件衍生的. 可以通过 skin3.ini 里面的 baseStyle 指定现代风格还是经典风格的文件作为基准皮肤. 用皮肤包里面的文件覆盖基准皮肤的文件 皮肤包中与基准皮肤同名的文件, 使用皮肤包里的文件替代 皮肤包中没有的文件, 使用基准皮肤的文件 最后产生的文件集便是界面展示的皮肤文件. 举个例子: 假定皮肤的 skin3.ini 里面指定了 baseStyle=modern 皮肤引擎会以内建的现代皮肤文件作为基准, 将皮肤包的文件覆盖上去. 如果 skin3.ini里面指定的是 baseStyle=classic 那么内建的基准皮肤会对应到经典皮肤的 main.classic 目录下的文件. 基准皮肤 之前我们在skin3.ini 里面用 baseStyle 指定了经典界面作为基准皮肤. 那么基准皮肤有什么内容呢? 你可以解包 Maxthon 安装目录下的 Bin\ui.dat 文件, 查看内建的的皮肤内容. 几个重要的目录: base\ 共享样式的定义. 包括基本控件, 菜