遨游浏览器皮肤编辑指南.docx
《遨游浏览器皮肤编辑指南.docx》由会员分享，可在线阅读，更多相关《遨游浏览器皮肤编辑指南.docx（18页珍藏版）》请在冰豆网上搜索。
遨游浏览器皮肤编辑指南
第一部分：
皮肤制作文档
一、皮肤构成
皮肤由一些图片、图标、一个皮肤预览图及皮肤描述文件组成。
其中：
∙皮肤预览图：
放在皮肤文件夹下。
用于在选项的"皮肤和外观"页面显示该皮肤的预览。
∙皮肤描述文件：
放在皮肤文件夹下。
规定了界面上的元素对应的图片、图标，以及界面上的元素的颜色、位置、大小、填充方式等。
二、皮肤特性
世界之窗皮肤可以实现的效果：
∙标签样式：
（经典样式）
（Chrome样式）
标签样式在皮肤制作工具的标签栏分类中可选择
∙边框宽度：
（1像素边框线）
（添加了图片边框）
在皮肤制作工具的边框和按钮效果分类中可设置
∙标签间距：
（标签彼此压住1像素）
（标签彼此分离4像素）
在皮肤制作工具的标签栏分类调整标签压住相邻标签的大小即可控制标签间距
∙标签栏透明：
（标签栏完全透明）
（标签栏半透明）
不指定标签栏背景则可以让标签栏完全透明（不指定标签栏背景时，您必须手动指定标签栏的高度）
世界之窗的皮肤要用什么样的图片？
推荐使用PNG格式图片。
PNG图片支持Alpha透明通道，可以用来实现按钮、标签等地方的半透明效果。
请按照以下方法保存PNG图片，以便让图片在各种Windows系统下显示正常，同时还能减小图片体积。
1.在Photoshop的文件菜单，选择“储存为Web和设备所用格式...”
2.在弹出的对话框上选择PNG-24,，并勾选transparency（支持透明通道）进行保存
图片类型：
∙等分图片：
这类按钮图片的宽度通常是4的整数倍，以下图片分为四等分，从左到右代表的状态依次是正常、悬停、激活、不可用。
四等分图片包括：
标题栏按钮、工具栏按钮、标签相关按钮、按钮效果等。
例如：
∙背景图片：
这类图片将被用来缩放、平铺等绘制才能形成背景。
所以请不要将背景图宽度制作得太小，以免缩放或平铺时消耗较多的CPU资源。
建议这些图片的宽度不小于150像素。
背景图片包括：
标签、标签栏、标题栏、工具栏、状态栏、地址栏、搜索栏、侧边栏的背景等。
例如：
∙ImageList图片：
这类图片将同类相似的按钮整合到一张图片上。
这些按钮的宽度固定，整个图片的宽度=按钮的宽度x按钮个数。
ImageList图片包括：
查找栏按钮、状态栏按钮、标签加载动画等。
例如：
∙图标：
通常仅制作16x16尺寸即可。
若需要自定义程序图标，即ICON_APP，则还需要制作32x32尺寸，用于在对话框及Alt+Tab时显示。
参数介绍：
∙数值型，通过改变数字的大小调整元素：
Height=25
∙逻辑型，通过使用不同的数字，选择不同的模式：
BackMode=3
∙字符型，可使用任何文字：
Author=PhoenixStudio
∙颜色值，使用十六进制的字符表示颜色。
在PhotoShop的拾色器里可查看颜色值：
TitleTextColor=0x9CA6B6
∙版本号，用于在线安装时的版本识别：
Version=1.0.1
注意事项：
1.手动保存时，请将ini保存为Unicode或者ANSI编码格式，这样才能被程序正确识别。
使用记事本的另存为功能，可以选择编码。
2.使用#开头的行为注释行，注释行仅用来说明它上面一行内容的含义。
注释行将被浏览器忽略，所以它可以是任意文字。
发布皮肤的时候，中可不包含注释行。
三、打包及解压皮肤
1.打包皮肤时，请使用zip，而不是rar格式，以便Windows下能直接解压。
2.打包皮肤时，请在所在的文件夹下全选文件，然后打包。
不要在上一层将文件夹打包。
这样可以避免在解压缩时不同的习惯导致出现重复路径。
3.打包皮肤后，请打开压缩包，查看各个文件夹里是否有名为的隐藏文件。
是Windows系统中的缩略图缓存文件，在皮肤里属于无用文件。
删除该文件可以大大减少皮肤的体积。
4.解压皮肤压缩包时，右击，选择“解压到XXX”。
5.解压多个皮肤压缩包时，选中这些压缩包后，右击，选择“解压每个压缩文件到单独的文件夹”。
.......................................................................................................................................................................................
第二部分：
本文原出自于皮肤ini文件注释
#皮肤信息
∙[General]
∙Name=TheWorld3Default
∙#皮肤名称
∙Author=PhoenixStudio
∙#作者名称
∙Comment=DefaultSkin
∙#皮肤简介，请注意不要换行
∙Version=1.0.1
∙#皮肤版本信息，用于在线安装时的版本识别，若更新了皮肤，请将皮肤版本号升高
∙App=3
∙#用来判断该皮肤是否为的皮肤
#边框和圆角
∙[Wnd]
∙FrameStyle=0
∙#皮肤样式-0标签栏在地址栏下方的经典样式，1标签栏在上方的Chrome样式
∙Corner=-1
∙#标题栏的圆角的大小。
0为不使用圆角，-1为使用默认的圆角大小
∙BottomCorner=0
∙#窗口底部是否使用圆角-0否，1底边使用和标题栏一样的圆角
∙Border=1
∙#是否使用窗口边框线-0不使用，1使用
∙BarBorder=8
∙#标准按钮区域左右留空
∙TabBarBorder=4
∙#标签栏区域左右留空-新建按钮在左边即NewInLeft=1时，仅对标签栏右边区域生效
#标签栏的设置
∙[TabScrollBar]
∙Width=50
∙#标签栏标签滚动滑块区域的宽度
#标题栏设置
∙[TitleBar]
∙BackMode=5
∙#标签栏的背景填充方式
∙#1整体缩放
∙#2整体平铺
∙#3三段式-左右部分原始，中部缩放
∙#4三段式-左右部分缩放，中部居中
∙#5三段式-左右部分原始，中部平铺
∙Height=25
∙#标题栏高度
#工具栏区域设置
∙[Rebar]
∙BackMode=5
∙#工具栏和状态栏区域的背景填充方式：
∙#1整体缩放
∙#2整体平铺
∙#3三段式-左右部分原始，中部缩放
∙#4三段式-左右部分缩放，中部居中
∙#5三段式-左右部分原始，中部平铺
∙RowLine=5
∙#0为不使用分割线，5为最常见的分割线样式。
通过增加以下数值可调整分割线的具体样式：
∙#在网页上的最下面一个工具栏下方添加分割线：
+8。
经典样式皮肤下是指在标签栏下方，Chrome样式皮肤下是指在收藏栏（或者标准按钮栏，因为收藏栏可隐藏）下方
∙#使用1个像素的分割线（默认为2个像素）：
+16
#工具栏设置
∙[ToolBar]
∙Shadow=1
∙#工具栏文字是否使用文字阴影（包括标题栏、收藏栏和状态栏）
∙MenuShadow=0
∙#菜单栏文字是否使用文字阴影
∙MaskNormal=0
∙#对于按钮正常状态下是否使用Mask图片，如无需要，设置0可节省资源
∙MainCY=35
∙#标准按钮区域高度
∙AddressCY=26
∙#地址栏高度，与标准按钮在一行时，标准按钮区域高度生效
∙SearchCY=26
∙#搜索栏高度，与标准按钮在一行时，标准按钮区域高度生效
∙FavoriteCY=24
∙#收藏栏高度
∙StatusCY=22
∙#状态栏高度
∙ProgressLeft=0
∙#状态栏页面进度条，刻度区域在背景边框的留空
∙ProgressGaugeMode=3
∙#状态栏页面进度条，刻度区域的填充方式：
∙#1整体缩放
∙#2整体平铺
∙#3三段式-左右部分原始，中部缩放
∙#4三段式-左右部分缩放，中部居中
∙#5三段式-左右部分原始，中部平铺
∙ButtonColorAdjust=1
∙#界面调色时对按钮是否调色
∙ShowPrivacyText=1
∙#在隐私浏览窗口里地址栏前是否显示“隐私浏览”文字
#输入框设置
∙[COMBOBOX]
∙AddressLeftPad=9
∙#地址栏网站图标距地址栏左边框的距离
∙AddressImgTextPad=5
∙#地址栏文字距网站图标的距离
∙AddressRightPad=0
∙#地址栏文字距右边按钮的距离
∙AddressListLeftPad=4
∙#地址栏下拉列表距地址栏左边框的距离
∙AddressListRightPad=2
∙#地址栏下拉列表距地址栏右边框的距离
∙AddressListTopPad=27
∙#地址栏下拉列表距地址栏上端的距离
∙SearchLeftPad=11
∙#搜索栏搜索引擎图标距搜索栏左边框的距离
∙SearchImgTextPad=4
∙#搜索栏文字距搜索引擎图标的距离
∙SearchRightPad=5
∙#搜索栏文字距右边按钮的距离
#标签栏设置
∙[TabBar]
∙BackMode=5
∙#标签栏的背景填充方式：
∙#1整体缩放
∙#2整体平铺
∙#3三段式-左右部分原始，中部缩放
∙#4三段式-左右部分缩放，中部居中
∙#5三段式-左右部分原始，中部平铺
∙ItemLeft=15
∙ItemRight=15
∙#由于标签的宽度是会变化的，标签绘制的时候可以让标签图片左右固定一段，仅让中间的部分来适应标签的宽度变化
∙#ItemLeft和ItemLeft分别为标签图片左、右固定的大小，剩下的中间区域用来拉伸填充标签
∙NewInLeft=1
∙#新建按钮的位置，0为放在标签右侧，1为放在标签栏左端
∙IBorder=5
∙#标签上图标和文字距标签左边的距离
∙CBorder=5
∙#标签上的关闭按钮距标签右边的距离
∙VBorder=0
∙#标签栏上图标和文字的显示位置，正数为偏下，负数为偏上
∙PBorder=1
∙#标签压住相邻标签的大小，正数为压住，负数为远离
∙NBorder=0
∙#新建按钮压住相邻标签的大小，正数为压住，负数为远离。
仅新建按钮在右边，即NewInLeft=0时生效
∙ColorMode=3
∙#标签分组颜色图片的填充方式：
∙#0整体缩放
∙#1整体平铺
∙#2固定在标签左端
∙#3固定在标签右端
∙HeightNormal=
∙#标签栏的高度。
通常和标签栏背景图片使用相同高度
∙HeightMax=
∙#仅在Chrome标签样式下生效。
通常和标签栏背景图片使用相同高度
#查找框设置
∙[EDIT]
∙LeftPad=6
∙RightPad=6
∙#查找栏文字距左右边框的距离
#图标元素定义
∙[ICON]
∙ICON_FAVURL=
∙#网站默认图标
∙ICON_SEARCH=
∙#搜索引擎默认图标
∙ICON_FAVADD=
∙#添加收藏图标
∙ICON_FAVFOLDER=
∙#收藏夹文件夹图标
∙ICON_FAVSIDEBAR=
∙#侧边栏收藏夹图标
∙ICON_NET_NOT_LOGIN=
∙#网络收藏夹未登录图标
∙ICON_NET_LOGIN=
∙#网络收藏夹登录后的图标
∙ICON_APP=
∙#程序图标
#图像元素定义
∙[IMG]
∙#标题栏图片
∙BG_TITLEBAR=
∙#标题栏的背景
∙BG_TITLEBAR_MAX=
∙#最大化时，标题栏的背景
∙BTN_TITLE_CUS=
∙#显示/隐藏菜单栏的按钮
∙BTN_TITLE_MIN=
∙#最小化按钮
∙BTN_TITLE_MAX=
∙#切换最大化按钮
∙BTN_TITLE_MAX2=
∙#最大化时，还原按钮
∙BTN_TITLE_CLOSE=
∙#关闭按钮
∙
∙#工具栏区域的图片
∙BG_TOPBAR=
∙#工具栏、收藏栏背景
∙BTN_NEW=
∙#新建按钮
∙BTN_BACKWARD=
∙#后退按钮
∙BTN_FORWARD=
∙#前进按钮
∙BTN_NAVIHISTORY=
∙#查看浏览记录按钮
∙BTN_STOP=
∙#停止按钮
∙BTN_REFRESH=
∙#刷新按钮
∙BTN_HOME=
∙#主页按钮
∙BTN_RESTORE=
∙#恢复标签按钮
∙BTN_FAVORITES=
∙#收藏夹按钮
∙BTN_TOOL=
∙#常用工具按钮
∙REBAR_CHEVRON=
∙#收藏栏显示更多的下拉按钮
∙
∙#地址栏和搜索栏的图片
∙BG_ADDRESS=
∙#地址栏背景
∙BTN_PRIVATE=
∙#隐私浏览窗口地址栏前面的按钮
∙BTN_GO=
∙#访问按钮
∙BTN_STOP_COMBINE=
∙#停止按钮（合并刷新和停止按钮时）
∙BTN_REFRESH_COMBINE=
∙#刷新按钮（合并刷新和停止按钮时）
∙BTN_THUMB=
∙#地址栏下拉列表按钮
∙BG_SEARCH=
∙#搜索栏背景
∙BTN_SEARCH=
∙#搜索按钮
∙IMG_SEARCHARROW=
∙#搜索栏搜索引擎图标右侧的下箭头
∙
∙#标签栏的图片
∙TAB_BG=
∙#标签栏背景
∙TAB_ITEM=
∙#标签背景
∙TAB_BTNNEW=
∙#标签栏左端的新建按钮
∙TAB_NEW=
∙#标签右侧的新建按钮
∙TAB_CLOSE=
∙#标签上的关闭按钮
∙TAB_COLOR=
∙#标签分组颜色
∙TAB_BUTTON=
∙#标签列表按钮
∙TAB_BUTTON2=
∙#标签栏上的关闭按钮
∙TAB_PROGRESS=
∙#标签上的页面加载动画。
每16个像素为一桢，循环播放，可制作任意多个
∙BG_SCROLL=
∙#标签滚动滑块区域的背景，通常指定为标签栏背景图片
∙BG_SCROLL_H=
∙#标签滚动滑块的背景
∙IMG_SCROLL_GAUGE_H=
∙#标签滚动滑块
∙TAB_DRAGMARK=
∙#移动标签位置时的提示
∙IMG_LOCK=
∙#锁定标签时的图标
∙
∙#查找栏和状态栏的图片
∙BG_BOTTOMBAR=
∙#查找栏和状态栏背景
∙BG_EDIT=
∙#查找框背景
∙IL_STATUSITEM=
∙#状态栏按钮
∙IL_FINDBARITEM=
∙#查找栏按钮
∙IMG_PROGRESS=
∙#页面加载进度。
图片左部为进度背景，右部为刻度
∙SIZE_STATUSBAR=
∙#右下角调整窗口大小的把手
∙
∙#窗口边框图片
∙BG_FRAME_BORDER_HB=
∙#底部边框
∙BG_FRAME_BORDER_VL=
∙#左侧边框
∙BG_FRAME_BORDER_VR=
∙#右侧边框
∙
∙#按钮的图片
∙BTN_MASK=
∙#收藏栏、状态栏等处的按钮效果
∙BTN_MENUMASK=
∙#菜单栏的按钮效果，仅在菜单栏显示在标题栏上时生效，菜单栏单独一行时，使用BTN_MASK
∙BTN_DROPDOWN=
∙#按钮上的下箭头
∙BTN_LINE=
∙#按钮上的图标或文字与下箭头的分割线
∙
∙#网页工具栏的图片
∙BG_PAGEBAR=
∙#网页工具栏背景
∙BTN_SIDEBAR_HIDE=
∙#隐藏侧边栏的按钮
∙BTN_SIDEBAR_SHOW=
∙#显示侧边栏的按钮
∙
∙#侧边栏的图片
∙BG_SIDETOOLBAR=
∙#侧边栏工具栏的背景
∙BG_SIDEBAR_TOOL=
∙#侧边栏的项目里，工具栏的背景。
如侧边栏收藏夹添加收藏所在工具栏的背景
∙BTN_SIDECLOSE=
∙#侧边栏关闭按钮
∙BTN_SIDEMENU=
∙#侧边栏样式选择按钮
∙BG_SIDEPANEL=
∙#列表样式时，侧边栏项目切换区域的背景。
依次为正常、鼠标悬停、激活3个状态
∙IMG_SIDEOLS=
∙#列表样式时，侧边栏项目切换区域顶部的分割线
∙BG_SIDEBAR_MINI=
∙#精简样式时，侧边栏项目图标所在的长条区域的背景
∙BTN_SIDEMASK=
∙#精简样式时，侧边栏项目图标的按钮效果
∙
∙#菜单
∙BG_MENU=
∙#菜单的背景
∙BG_MENU_HILIGHT=
∙#菜单上，鼠标悬停时该项的背景
∙IL_MENUICON=
∙#菜单上的勾选及圆点图标
∙
∙#其他图片
∙BTN_SELECT=
∙#选中项的背景，如自定义工具栏对话框的选中项
∙BTN_CLOSE=
∙#气泡提示窗的关闭按钮
#颜色配置
∙[COLOR]
∙FrameBorder=0x9ca6b6
∙#浏览器窗口边框颜色
∙TitleTextColor=0x545963
∙#标题栏文字颜色
∙TitleTextColor2=0x444477
∙#浏览器窗口处于未激活状态时的标题栏文字颜色
∙MenuBarText=0x545963
∙#菜单栏文字颜色，仅在菜单栏显示在标题栏上时生效，菜单栏单独一行时，颜色使用
∙ToolBarTextColor=0x062d75
∙#侧边栏、查找栏、工具按钮下的文字等处的颜色
∙MenuText=0x545963
∙#收藏栏文字颜色
∙StatusTextColor=0x0
∙#状态栏文字颜色
∙StatusTextHotColor=0x004eff
∙#状态栏链接鼠标悬停时颜色
∙ToolBarTextShadow=0xffffff
∙#文字阴影颜色
∙TabHotText=0xffffff
∙#当前激活的标签文字颜色
∙TabText=0x9dabbf
∙#未激活的标签文字颜色
∙TabFocusText=0x717987
∙#鼠标悬停时的标签文字颜色
∙TextColor=0x0
∙#地址栏域名部分及所有输入框输入时的文字颜色
∙TextColorGray=
∙#地址栏域名以外部分的文字颜色
∙TextColorFloat=
∙#输入框浮动的文字颜色，如搜索栏的搜索引擎名称
∙Rebar_Line=0xebeef2
∙#工具栏分割线颜色
∙Rebar_Line2=0xffffff
∙#工具栏分割线颜色2
∙Status_Line=0xc5cbd8
∙#状态栏分割线颜色
∙Sidebar_Line=0xc5cbd8
∙#侧边栏分割线颜色
∙PopupBorder=0x6ca0e7
∙#小窗口的边框颜色，如隐私浏览窗口的边框颜色
#菜单相关设置
∙[Menu]
∙BKColor=0xfafbfc
∙#菜单背景色，菜单背景不使用图片时生效
∙HorzBarColor=0xfafbfc
∙#菜单左侧图标区域背景色，菜单背景不使用图片时生效
∙BorderColor=0x90b7f1
∙#菜单边框颜色
∙TextColor=0x383a3e
∙#菜单文字颜色
∙HilightBKColor=0x7b94cf
∙#鼠标悬停项的背景色
∙HilightBorder=0x536fb1
∙#鼠标悬停项的边框颜色
∙HilightTextColor=0x35598f
∙#鼠标悬停项的文字颜色
∙GrayHilightBKColor=
∙#无效菜单项鼠标悬停的背景色
∙HightlightGray=1
∙#无效菜单项鼠标悬停时是否使用背景色
∙GrayTextColor=0xaba89f
∙#无效菜单项的文字颜色
∙SeparatorColor=0xc9cbd2
∙#菜单分割线颜色
∙ImgSize_X=
∙#图标宽度
∙ImgSize_Y=
∙#图标高度
∙ImagePadding_left=2
∙#图标左侧空出宽度
∙ImagePadding_right=2
∙#图标右侧空出宽度
∙ImagePadding_top=2
∙#图标顶部空出高度
∙TextPadding_left=2
∙#文字左侧空出宽度
∙TextPadding_right=16
∙#文字右侧空出宽度
∙TextPadding_top=2
∙#文字顶部空出高度
升级会员 