《遨游3皮肤制作教程（精品）》由会员分享，可在线阅读，更多相关《遨游3皮肤制作教程（精品）（10页珍藏版）》请在金锄头文库上搜索。
1、MX3 皮肤制作教程对应皮肤框架版本号: 1.0.10文档版本: 1.0.7mx3 的界面引擎在制作 mx3 的皮肤之前, 需要先了解一下mx3界面引擎.mx3 的界面引擎基于 HTML+CSS 技术实现.也就是说, mx3所有的界面都是通过 HTML 和 CSS 文件来描述的.这个界面引擎除了基本的 HTML 4.0 和 CSS 2.1 支持外, 还有自行扩展的一些样式和控件.可以提供极高的界面定制能力.对界面引擎的详细介绍可以参阅mx3-界面引擎特性介绍文档.因此, 如果你有网页制作方面的经验的话, 做 mx3 的皮肤会很容易上手.mx3 的皮肤文件在哪里mx3 的皮肤文件放置在如下文件夹
2、内:%AppData%Maxthon3Skins你会在此目录下看到类似以下文件包的若干文件, 它们就是 mx3 的皮肤包文件.mx3 除了支持文件包形式的皮肤之外, 也支持目录形式的皮肤, 以便皮肤制作者修改测试.你只需在 Skins 目录下创建一个子目录, 并在里面放入皮肤所需的文件即可.提示: 你可以用皮肤打包/解包工具解开别人制作的皮肤, 看看别人的皮肤是怎么实现的.制作你的第一个mx3皮肤1. 创建皮肤目录打开windows的资源管理器, 在地址栏里面输入 %AppData%Maxthon3Skins这时资源管理器应该跳转到了 Maxthon 的皮肤目录.在这个目录里面新建一个文件夹.
3、 我们这里给这个文件夹取名: first2. 撰写皮肤描述文件在刚才创建的first目录里面里面新建一个 skin3.ini 并写入以下内容:skin_def=1.0.0version=1.0.0stylesmain=*style-mainname = My First Skinnamezh = 我的第一个皮肤thumbnail = thumbnail.pngbaseStyle = classicmainFolder = mainmainFile = index.htm最前面的 _def 定义了此皮肤对应的皮肤引擎版本. 一般照抄就可以.version 定义了这个皮肤的版本号. 这里我们写 1
4、.0.0 就行了.styles 的内容我们不必关心. 毕竟那个是为更高级的皮肤开发者准备的.name, 顾名思义就是皮肤的名称. 默认的 name 必须填写英文的皮肤名字.中文的皮肤名用下面的 namezh 指定.这样做是为了保证良好的多语言支持.thumbnail 指定的是皮肤的缩略图. 可以使用 JPG, PNG 格式, 大小为 100x100 像素.这个缩略图会在浏览器的皮肤选择对话框和分享网站上展示.我们随意做个图像放着就行了.baseStyle 指定我们的皮肤是基于哪个内置皮肤制作的.除了这里写的classic 外(使用经典皮肤作为基准), 还可以用 modern 表示基于现代皮肤制
5、作.皮肤引擎在处理皮肤文件时, 会按这里指定的基准皮肤进行替代式处理.我们这里选择使用经典皮肤作为基准, 因为现代皮的按钮替换得太大不怎么好看.剩下的 mainFolder 和 mainFile 不是我们现在需要关心的.做好这个 skin3.ini 文件, 你就可以在mx3的皮肤中心里面看到你的皮肤了.不过因为它是个空皮肤, 所以点击后, 除了切换到经典皮肤外, 没有别的变化.3. 替代式皮肤处理正式动手做皮肤之前, 还是让我们了解下mx3的皮肤文件处理模式.mx3 的皮肤文件处理方式是替代式的.什么叫替代式处理? 以内建的皮肤文件为基准o 用户制作的皮肤都是基于内建的皮肤文件衍生的.o 可以
6、通过 skin3.ini 里面的 baseStyle 指定现代风格还是经典风格的文件作为基准皮肤. 用皮肤包里面的文件覆盖基准皮肤的文件o 皮肤包中与基准皮肤同名的文件, 使用皮肤包里的文件替代o 皮肤包中没有的文件, 使用基准皮肤的文件 最后产生的文件集便是界面展示的皮肤文件.举个例子:假定皮肤的 skin3.ini 里面指定了 baseStyle=modern皮肤引擎会以内建的现代皮肤文件作为基准, 将皮肤包的文件覆盖上去.皮肤包中的文件skin3.inithumbnail.pngmainskin.cssmainimagesnav_back.pngmainimagesnav_forward
7、.pngmainimagesmy_logo.png内建的基准皮肤文件skin3.inithumbnail.jpgmainskin.cssmainimagesnav_back.pngmainimagesnav_forward.pngmainimages*.*mainindex.cssmainindex.htmmainlayout.cssmainlayout.htmmainmain-menu*.*mainnavbar*.*mainfavbar*.*mainobjects*.*最终结果皮肤文件skin3.inithumbnail.jpgthumbnail.pngmainskin.cssmainima
8、gesnav_back.pngmainimagesnav_forward.pngmainimagesmy_logo.pngmainimages*.*mainindex.cssmainindex.htmmainlayout.cssmainlayout.htmmainmain-menu*.*mainnavbar*.*如果 skin3.ini里面指定的是 baseStyle=classic那么内建的基准皮肤会对应到经典皮肤的 main.classic 目录下的文件.皮肤包中的文件skin3.inithumbnail.pngmainskin.cssmainimagesnav_back.pngmaini
9、magesnav_forward.pngmainimagesmy_logo.png内建的基准皮肤文件skin3.inithumbnail.jpgmain.calssicskin.cssmain.calssicimagesnav_back.pngmain.calssicimagesnav_forward.pngmain.calssicimages*.*main.calssicindex.cssmain.calssicindex.htmmain.calssiclayout.cssmain.calssiclayout.htmmain.calssicmain-menu*.*main.calssicna
10、vbar*.*main.calssicfavbar*.*main.calssicobjects*.*最终结果皮肤文件skin3.inithumbnail.jpgthumbnail.pngmainskin.cssmainimagesnav_back.pngmainimagesnav_forward.pngmainimagesmy_logo.pngmainimages*.*mainindex.cssmainindex.htmmainlayout.cssmainlayout.htmmainmain-menu*.*mainnavbar*.*4. 基准皮肤之前我们在skin3.ini 里面用 baseS
11、tyle 指定了经典界面作为基准皮肤.那么基准皮肤有什么内容呢?你可以解包 Maxthon 安装目录下的 Binui.dat 文件, 查看内建的的皮肤内容.几个重要的目录:base共享样式的定义. 包括基本控件, 菜单, 工具栏和非 Aero 系统主题下窗口边框的定义文件.icons共享的图标文件main现代皮肤的目录main.classic经典皮肤的目录main 和 main.classic 目录都有统一的目录结构和文件结构, 以便理解和修改.mx3内建的皮肤文件已经按结构进行了细分和拆解.制作皮肤时只需要将要替换的文件打包即可. 其他文件可以不附带.对里面文件结构的详细描述, 请参阅mx3
12、皮肤系统参考文档的默认皮肤结构说明一节.这种处理方式有什么好处呢? 修改的范围和程度可以灵活控制o 普通皮肤制作者可以方便地替换图像和修改颜色, 而不必深入了解结构o 高水平的皮肤作者可以全面替换和重写界面 可以方便的对局部界面进行修改, 而不用从头写起o 界面的文件已经按布局和功能块进行了拆分 避免升级时造成皮肤完全不可用o 一般皮肤对结构的修改有限, 也被限制在几个文件之中 可以减小皮肤包的文件大小o 不需要把所有文件都打包进去当然, 如果你做的皮肤要完全改变mx3的界面交互体验, 就不用关心内建皮肤的结构了.5. 把按钮换成别的图像了解了皮肤文件的处理机制和基准皮肤的结构之后, 就可以入
13、手制作我们自己的皮肤了.导航图标和其他界面图像一起, 都放在内建皮肤的 mainimages 目录中.所以, 首先要在我们的皮肤目录 first 里面新建出对应的 mainimages 目录.然后把我们准备好的要替换的导航按钮图标复制到 mainimages 目录中去.然后将要替换的按钮图像复制到目录中.现在打开 mx3的皮肤中心对话框, 找到你的皮肤, 点击它重新载入皮肤.点击它, 你就可以看到主界面切换到经典皮肤的布局, 同时工具栏的按钮变成了我们的替换的图标.这样, 我们就完成了一个最简单的换按钮图标的皮肤.6. 修改工具栏背景接下来我们要把工具栏的背景换个更合适的样子.解析皮肤的贴图方
14、法先让我们在内建皮肤的 main.classicimages 目录里面找到内建的的背景图:这么小的一张图是怎么贴出这一片背景的?让我们翻一下内建皮肤的目录, 这部分的定义在 main.classiclayout.css 里面:.top-blocks flow: horizontal;padding: 4 4 0 4;background: url(images/toolbar_bg.png) expand;background-position: 6 6 6 6;background-repeat: stretch-left stretch-right stretch-middle;这段 CSS 定义是什么意思呢?background 这行将 toolbar_bg.png 指定为背景图, 并指定了贴图的模式为 expand (即切图填充).background-position 则指定了切图的位置(按上右下左的
