下面该图就是本系统自带的皮肤编辑器的主界面。分四个部分，自上而下是图片提示区、编辑工具栏、CSS代码编辑区、皮肤文件信息区。

图1 皮肤编辑器主界面

1、图片提示区

图片提示区用于显示相应的样式效果图及用户上传图片。故其又分为两部分，显示在两个标签页中，分别是样式效果图、上传图片。

样式效果图：用于提示用户相应的CSS类选择符所定义相应栏目样式效果示意图。

图2 图片提示区的样式效果图标签内容

上传图片：用于上传该CSS文件需要的图片或图片组。

图3 图片提示区的上传图片标签部分内容

2、编辑工具栏

图4 皮肤编辑器的编辑工具栏

该工具栏用于显示调节编辑器各部分的显示比例工具及相应的CSS代码查找/替换、定位、插入工具。

具体工具介绍

CSS编辑全屏：设置CSS代码编辑区全屏显示。只要用户点击即可全屏显示，效果图如下：

图5 全屏显示的CSS代码编辑区

平分CSS编辑和图片提示：设置CSS代码编辑区与图片提示区平分显示。只要用户点击即可平分显示，效果图如图5?1所示。

图片提示全屏：设置图片提示区全屏显示。只要用户点击即可全屏显示，效果图如下：

图6 全屏显示的图片提示区

查找替换：用于在CSS代码编辑区查找或替换相应的CSS代码。用户根据实际需要进行查找或替换操作。

图7 查找替换窗口

模块定位：用于在CSS代码编辑区选择并定位到相应的模块，为进行后面对相应模块代码的查看与修改等操作提供方便。用户只需在“选择模块”右侧的选择框中选择相应的模块（该样式中的所有模块都在其选择项中），再按“定位到该模块”按钮，CSS代码编辑区的相应模块的类选择符就被选中高亮显示。

图8 模块定位窗口

常用CSS插入：用于插入常用的一些CSS代码。如横幅背景、背景图片、背景颜色、边框补白、字体、字体大小、字符对齐、光标图标、边框设定等。用户只需把光标定位在CSS代码编辑区中需插入代码的位置，再单击“常用CSS插入”文字，就会出现该窗口，再在选择模块后的选择框中选择相应的功能模块，按“插入当前位置”即可在该位置插入相应的代码。如插入“横幅背景”，在其CSS代码编辑区便会显示。“filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Styles/063/banner.jpg", sizingMethod="scale");”，用户只需把其中的banner.jpg文件名改成自己上传的图片文件名即可。

图9 常用CSS插入窗口

3、CSS代码编辑区

图10 系统样式的CSS代码编辑区

用于查看、编辑修改其编辑区的CSS代码。想要了解CSS相关代码的相关应用，可查看网上的CSS速查手：http://www.host01.com/onlinebook/css/

4、皮肤文件信息区

图11 皮肤编辑器中的皮肤文件信息区

用于设置该皮肤文件的相关信息查看与设置，完成相应的操作。如修改皮肤名称、查看该皮肤所在的文件夹名称、上传或修改CSS示意图、进行保存等操作。

皮肤名称：显示该皮肤名称，可修改。如修改后，按下面的“保存”按钮即可完成修改操作。

文件夹名称：显示该皮肤所在的文件夹名，不可改。

上传CSS示意图：上传或修改CSS示意图。用户点击“上传CSS示意图”字样，即可打开系统自带的图片上传编辑器，上传相应的示意图文件。
设置完成后，可对其进行保存、关闭、CSS预览操作。对皮肤的任意一处进行修改后，要切记按“保存”按钮来完成修改操作。完成设置或修改后，可按“关闭”按钮关闭窗口，也可按右上角的窗口关闭按钮。想要立马查看修改后的皮肤显示效果，可按“CSS预览”按钮，来即时查看修改效果，按此键后，也可起到保存皮肤的功能。

回顶部