首页 遨游3皮肤制作教程

遨游3皮肤制作教程

举报
开通vip

遨游3皮肤制作教程MX3 皮肤制作教程 对应皮肤框架版本号: 1.0.10 文档版本: 1.0.7 mx3 的界面引擎 在制作 mx3 的皮肤之前, 需要先了解一下mx3界面引擎. mx3 的界面引擎基于 HTML+CSS 技术实现. 也就是说, mx3所有的界面都是通过 HTML 和 CSS 文件来描述的. 这个界面引擎除了基本的 HTML 4.0 和 CSS 2.1 支持外, 还有自行扩展的一些样式和控件. 可以提供极高的界面定制能力. 对界面引擎的详细介绍可以参阅"mx3-界面引擎特性介绍"文档. 因此, 如果你有网页制作方...

遨游3皮肤制作教程
MX3 皮肤制作 教程 人力资源管理pdf成真迷上我教程下载西门子数控教程protel99se入门教程fi6130z安装使用教程 对应皮肤框架版本号: 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皮肤 1. 创建皮肤目录 打开windows的资源管理器, 在地址栏里面输入 %AppData%\Maxthon3\Skins\ 这时资源管理器应该跳转到了 Maxthon 的皮肤目录. 在这个目录里面新建一个文件夹. 我们这里给这个文件夹取名: first 2. 撰写皮肤描述文件 在刚才创建的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 = classic 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的皮肤中心里面看到你的皮肤了. 不过因为它是个空皮肤, 所以点击后, 除了切换到经典皮肤外, 没有别的变化. 3. 替代式皮肤处理 正式动手做皮肤之前, 还是让我们了解下mx3的皮肤文件处理模式. mx3 的皮肤文件处理方式是替代式的. 什么叫替代式处理? · 以内建的皮肤文件为基准 · 用户制作的皮肤都是基于内建的皮肤文件衍生的. · 可以通过 skin3.ini 里面的 baseStyle 指定现代风格还是经典风格的文件作为基准皮肤. · 用皮肤包里面的文件覆盖基准皮肤的文件 · 皮肤包中与基准皮肤同名的文件, 使用皮肤包里的文件替代 · 皮肤包中没有的文件, 使用基准皮肤的文件 · 最后产生的文件集便是界面展示的皮肤文件. 举个例子: 假定皮肤的 skin3.ini 里面指定了 baseStyle=modern 皮肤引擎会以内建的现代皮肤文件作为基准, 将皮肤包的文件覆盖上去. 如果 skin3.ini里面指定的是 baseStyle=classic 那么内建的基准皮肤会对应到经典皮肤的 main.classic 目录下的文件. 4. 基准皮肤 之前我们在skin3.ini 里面用 baseStyle 指定了经典界面作为基准皮肤. 那么基准皮肤有什么内容呢? 你可以解包 Maxthon 安装目录下的 Bin\ui.dat 文件, 查看内建的的皮肤内容. 几个重要的目录: base\ 共享样式的定义. 包括基本控件, 菜单, 工具栏和非 Aero 系统主 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 下窗口边框的定义文件. icons\ 共享的图标文件 main\ 现代皮肤的目录 main.classic\ 经典皮肤的目录 main 和 main.classic 目录都有统一的目录结构和文件结构, 以便理解和修改. mx3内建的皮肤文件已经按结构进行了细分和拆解. 制作皮肤时只需要将要替换的文件打包即可. 其他文件可以不附带. 对里面文件结构的详细描述, 请参阅"mx3皮肤系统参考文档"的"默认皮肤结构说明"一节. 这种处理方式有什么好处呢? · 修改的范围和程度可以灵活控制 · 普通皮肤制作者可以方便地替换图像和修改颜色, 而不必深入了解结构 · 高水平的皮肤作者可以全面替换和重写界面 · 可以方便的对局部界面进行修改, 而不用从头写起 · 界面的文件已经按布局和功能块进行了拆分 · 避免升级时造成皮肤完全不可用 · 一般皮肤对结构的修改有限, 也被限制在几个文件之中 · 可以减小皮肤包的文件大小 · 不需要把所有文件都打包进去 当然, 如果你做的皮肤要完全改变mx3的界面交互体验, 就不用关心内建皮肤的结构了. 5. 把按钮换成别的图像 了解了皮肤文件的处理机制和基准皮肤的结构之后, 就可以入手制作我们自己的皮肤了. 导航图标和其他界面图像一起, 都放在内建皮肤的 main\images\ 目录中. 所以, 首先要在我们的皮肤目录 first\ 里面新建出对应的 main\images\ 目录. 然后把我们准备好的要替换的导航按钮图标复制到 main\images\ 目录中去. 然后将要替换的按钮图像复制到目录中. 现在打开 mx3的皮肤中心对话框, 找到你的皮肤, 点击它重新载入皮肤. 点击它, 你就可以看到主界面切换到经典皮肤的布局, 同时工具栏的按钮变成了我们的替换的图标. 这样, 我们就完成了一个最简单的换按钮图标的皮肤. 6. 修改工具栏背景 接下来我们要把工具栏的背景换个更合适的样子. [解析皮肤的贴图方法] 先让我们在内建皮肤的 main.classic\images\ 目录里面找到内建的的背景图: 这么小的一张图是怎么贴出这一片背景的? 让我们翻一下内建皮肤的目录, 这部分的定义在 main.classic\layout.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 则指定了切图的位置(按上右下左的顺序), 按上面的设置, 是离边缘6像素的位置切图. 像下面这样: 图像切割后就会像下图的B状态那样贴满元素的背景. 你会发现B状态下背景看起来有点别扭. 因为部分切片是按平铺方式绘制的. 这时候就需要用background-repeat 定义切图模式下各个图像切片的拉伸方式了. 在加上 background-repeat: stretch-left stretch-right stretch-middle; 后, 就变成了我们想要的 C 状态效果. (因为我们这里用的图上下部分不需要拉伸, 所以就没有指定. 需要时你可以加上 stretch-top 和 stretch-bottom 设置.) [替换皮肤的贴图] 讲解完毕, 那么我们开始换图吧. 因为我们的修改不大, 所以不用修改CSS 的贴图设置, 直接替换图像就行了. 做个简单的半透明图放到我们 first 皮肤的 main\images\toolbar_bg.png 然后在mx3的皮肤中心里面再点击一次 My First Skin 皮肤, 就可以看到效果了: 再替换下标签栏和地址栏的几个图像文件. 结果如下: 换了图片之后, 收藏栏和非激活标签的文本都看不清了. 那么接下来, 我们就要通过微调皮肤的设置来把它改好. 7. 通过CSS样式修改皮肤 mx3 内建皮肤里面有很多 CSS 文件. 它们定义了皮肤的方方面面, 要完全了解需要些时间. 这里我们只做简单的介绍. 修改收藏栏上条目的文本颜色 收藏栏内容的样式是在 main.classic\favbar\container.css 文件中定义的. 不过在条目的定义里面并没有指定文本的颜色. 因此我们只需要在 skin.css 增加指定颜色的样式就行了: .fav-container > li, .fav-container > .split-button{ color: #CCC; } 重新载入皮肤看看效果: 顺道把标签栏的文本颜色调整下: (原始定义在内建皮肤的 main.classic\tabbar\container.css 里面) .tab-container .tab { color: #EEE; } 修改收藏栏上条目的图标 让我们再看看现在的效果. 嗯, 收藏栏上面的文件图标貌似不怎么搭. 让我们做几个新的图像放到皮肤的 main\images\ 目录下: (它们依次分别是默认文件图标, 文件夹图标, 快捷组图标) 然后在 main\skin.css 里面增加以下 css 代码改写内建皮肤的设置: (内建皮肤引用的是全局共享的图标文件. 内建皮肤这些图标的定义在 main.classic\favbar\container.css 里面.) .fav-container > li > .icon, .fav-container > .split-button > li > .icon{ foreground-image: url(images/favbar_file.png); } .fav-container > li:has-child-of-type(menu) > .icon{ foreground-image: url(images/favbar_folder.png); } .fav-container > .split-button > li > .icon{ foreground-image: url(images/favbar_group.png); } 现在看起来就好多了. 但最前面那个收藏按钮的图还是有点不协调. 修改收藏栏最前面的按钮 再加个图像来替换它吧. 把准备好的 favbar_root.png 复制到皮肤的 main\images\ 目录下. 然后, 在内建皮肤的css文件里面找找, 发现没有对应的样式定义. 那就看看对应的 HTML文件吧. 打开 main.classic\favbar\container.htm 发现这个按钮是这样定义的:
… 那我们就自己写个 CSS Selector 来对应它吧. 在 skin.css 里面加上下面的 CSS: .favbar .item-container .item:first-child .icon{ foreground-image: url(images/favbar_root.png) !important; } 这里的 !important 表示强制使用设置的 css 样式, 忽略其它的样式定义. 因为原皮肤中的这个图标是写在 DIV 元素的 style 属性里面的, 优先级比一般css样式高, 只有用 !important 才能替代. 重新载入下皮肤看看: 然后把收藏栏的 favicon 处理一下: .fav-container > li:not(:hover) > .icon[style], .fav-container > .split-button:not(:hover) > li > .icon[style]{ foreground-image-transformation: colorize(#525B65); } 这里利用了皮肤引擎的前景图片变换功能. 除了鼠标悬停的条目外, 其它 favicon 都变为单色调. 效果如下: 小结 基于内建皮肤修改皮肤的样式的过程: 首先, 找出要修改的样式在基准皮肤的哪里定义的. 如果基准皮肤里面有对应的定义, 就在已有定义的基础上附加自己的修改. 如果基准皮肤里面没有, 则查看对应的 HTML文件, 然后自己写定义来进行修改. 8. 打包皮肤 经过了上面的修改, 我们的第一款皮肤就已经有点样子了. 接下来再进行一些小修小改就可以打包发布了. mx3皮肤SDK文件包中有一个 mxpak 目录. 里面是用于打包的工具. 这个命令行工具的用法很简单. makpak first\ first.mxskin 第一个参数 first是要打包的输入目录. 第二个参数 first.mxskin是输出的文件名. 执行完后就会在当前目录生成一个皮肤文件包: 然后你就可以用这个文件包把你的皮肤分享给其它的 mx3用户了. 为了方便打包和解包, mx3皮肤SDK里面预先写好了两个批处理文件: · _build.bat 将 first目录的内容打包成 first.mxskin 文件 · _explode.bat 将 first.mxskin 的内容解到 first 目录. 需要的时候双击执行对应的批处理文件就可以了. <文档结束> 皮肤包中的文件 skin3.ini thumbnail.png main\skin.css main\images\nav_back.png main\images\nav_forward.png main\images\my_logo.png 内建的基准皮肤文件 skin3.ini thumbnail.jpg main\skin.css main\images\nav_back.png main\images\nav_forward.png main\images\*.* main\index.css main\index.htm main\layout.css main\layout.htm main\main-menu\*.* main\navbar\*.* main\favbar\*.* main\objects\*.* … 最终结果皮肤文件 skin3.ini thumbnail.jpg thumbnail.png main\skin.css main\images\nav_back.png main\images\nav_forward.png main\images\my_logo.png main\images\*.* main\index.css main\index.htm main\layout.css main\layout.htm main\main-menu\*.* main\navbar\*.* … 皮肤包中的文件 skin3.ini thumbnail.png main\skin.css main\images\nav_back.png main\images\nav_forward.png main\images\my_logo.png 内建的基准皮肤文件 skin3.ini thumbnail.jpg main.calssic\skin.css main.calssic\images\nav_back.png main.calssic\images\nav_forward.png main.calssic\images\*.* main.calssic\index.css main.calssic\index.htm main.calssic\layout.css main.calssic\layout.htm main.calssic\main-menu\*.* main.calssic\navbar\*.* main.calssic\favbar\*.* main.calssic\objects\*.* … 最终结果皮肤文件 skin3.ini thumbnail.jpg thumbnail.png main\skin.css main\images\nav_back.png main\images\nav_forward.png main\images\my_logo.png main\images\*.* main\index.css main\index.htm main\layout.css main\layout.htm main\main-menu\*.* main\navbar\*.* …
本文档为【遨游3皮肤制作教程】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
下载需要: 免费 已有0 人下载
最新资料
资料动态
专题动态
is_228828
暂无简介~
格式:doc
大小:364KB
软件:Word
页数:10
分类:互联网
上传时间:2011-11-29
浏览量:18