利用本系统的皮肤编辑器制作皮肤，就算不懂相应的代码，也能进行皮肤的制作。
第一步：设计皮肤初稿并切图处理或收集图片
如果你会 photoshop 或其它相应的图片处理软件，而且对于页面设计有一定的制作水平的话，可以先在相应的软件上设计好自己所要制作的皮肤页面初稿。再通过相应的切图工具，对其进行相应的切图处理。最后把有用的切片选中存到同一个目录下备用。
如果你不会，那也没有关系，你可以到网上搜索一些漂亮的栏目标题图片、横幅图片、插图等或选择某个你喜欢的风格的网站，在相应的图片上通过点击鼠标右键――“背景另存为”或“图片另存为”，把相应的一些可用的图片下载到自己的本地计算机的同一个目录下备用。
第二步：新建皮肤文件并上传图片组
做好前面的图片处理或图片收集工作后，就可以在系统后台的“系统模板管理”下的“皮肤管理”模块上单击进入该模块：
图 1 皮肤管理
按“添增”，在按钮与下面的上传、打包区中间会多出一项添加区：
图 2 添加 CSS 皮肤
在其间输入相应的数据，完成设置再按“添加”按钮（文件夹名称按“添加”后将不可改），即可完成新建皮肤的工作。此时将弹出该皮肤文件的 CSS 编辑器窗口：
图 3 图片编辑器界面
为了更快、更好地上传自己所需的所有图片，直接用图片编译器界面的顶部“上传图片”标签页中的 “图片组文件上传”工具，单击它，打开图片上传助手窗口（第一次打开使用时，需要在相应的地方单击下载并安装相应的控件，方可使用）：
图 4 利用图片上传助手上传图片组
只需在左边找出相应的文件夹，那么该文件夹内的文件都将浏览在右侧窗口，只需在图片上单击就可选中相应的图片，也可用右上角的“全部选择”。选好后，直接按右上角的“立即上传”即可。
第三步：借助工具或手动书写代码
图片上传后，就可以开始编写 CSS 代码。
图 5 图片编辑器的工具条及代码编辑区部分图
如果会编写 CSS 代码的，那就直接在编辑器的代码编辑区进行代码的编辑。如想要随时查看编辑后的显示效果，可以点击下面的“ CSS 预览”按钮，进行实时预览。
如果不会 CSS 代码的编写，也没有关系，本系统的 CSS 编辑器提供有“常用 CSS 插入”功能，足以满足你编辑皮肤所需。通过工具栏中的“模块定位”定位到你所要编辑的相应模块，把光标移到该模块相应的标识项中的大括号内，再用工具栏中的“常用 CSS 插入”插入相应的 CSS 代码，对其进行适当的调整与修改即可（相关的代码介绍与说明请参考最后的“常用 CSS 插入的相关代码说明”）。
例１ ： 在“搜索模块”的“整体样式”项插入一像素色彩为 #e4e4e4 的灰色实线边框线
点击工具条中的“模块定位”，在弹出的对话框中选择“搜索模块”：
图 6 模块定位对话框
按“定位到该模块”按钮后：
图 7 定位后显示如图
２、在提示“ /* 搜索模块 整体样式 */ ”后的“ .SearchModule .Box{ ”后单击鼠标，再单击工具条上的“常用 CSS 插入”，选择“边框设定”再点击“插入当前位置”就要“ .SearchModule .Box ｛”后插入了“ border:1px solid #000000; ”把 #000000 改为 #e4e4e4 即可。
第四步：上传皮肤示意图并保存
代码设置完成后，即可完成最后一步的操作，就是上传皮肤示意图并保存。
图 8 皮肤编辑器的文件信息区
示意图 ：可以截取皮肤的一个小部分来当示意图，图片大小为宽高各 60 像素。
上传示意图 的方法有两个：一是通过示意图右侧的“上传 CSS 示意图”弹出的图片上传编辑器上传示意图，二是在前面上传图片组时一并上传（注意：该 CSS 示意图的名称必须与该文件夹名称同名。）。
保存 ：设置完成后，直接单击下面的“保存”按钮即可完成保存操作。按“ CSS 预览”也能自动保存相应的设置。
常用 CSS 插入的相关代码说明
注：列表中的代码必须插入到相应项的大括号中才能起作用； px 是长度单位－像素， pt 也长度单位－点；每段代码后面的分号不可少。
| CSS说明 |
插入后显示的代码 |
说明及修改方法 |
| 横幅背景 |
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="http://userludl.growupedu.com/Styles/064/banner.jpg", sizingMethod="scale"); |
设置带滤镜显示的横幅背景，会随着栏目的大小而成比例缩放。
把 banner.jpg 换成你要更换的横幅背景图文件名；再在后面加上“ width:80px;height:20px; ”其中数字换成该图片的宽 (width) 与高 (height) 。 |
| 背景图片 |
background-image:url(background.jpg) top left no-repeat; |
设置相应模块的背景图片显示效果。
把 background.jpg 换成你要更换的背景图片名。 Top left 设的是背景图片的显示位置，居上居左显示，也可以改成 bottom right （居下居右）或是 center （居中）显示。 No-repeat 是背景不平铺，也可改为 repeat-x （横向平铺）、 repeat-y （纵向平铺）或 repeat （平铺）。 |
| 背景颜色 |
background-color:#ffffff; |
设置相应模块的背景颜色。
把 #ffffff 改成你想要更换的色彩名或表示相应色彩的代码。 |
| 边框补白 |
padding:0px 0px 0px 0px; |
设置边框内边距。
从左到右分别代表上、右、下、左四边距的大小，直接把0改成相应的数字即可。 |
| 字体 |
font-family:@ 宋体 ; |
设置相应模块的文字字体。
把宋体改成你想要的字体。 |
| 字体大小 |
font-size: 12pt ; |
设置相应模块的文字大小。
把 12pt 改成你想要的字体大小。 |
| 字符对齐 |
text-align:left; |
设置字符对齐方式。
可把 left 换成 right 或 center ，使文字居左、居右或居中显示。 |
| 光标图像 |
cursor:pointer; |
设置光标显示的效果。
可把 pointer 换成其它一些光标显示效果的代码。 |
| 边框设定 |
border:1px solid #000000; |
设置相应模块的边框线效果。
1px 设置线的粗细； solid 设置线的样式（实线）； #000000 设置线的色彩。都可根据需要更改其值。 |
回顶部