四、添加并编辑皮肤文件
当前面的一切工作都做完后，接下来就可以真正进入编辑皮肤文件的阶段了。
由于一般情况下，系统皮肤用户是不能进行添加、修改的，所以这里的说明，以自定义皮肤为例。
1 、添加皮肤
第一步 添增皮肤文件
在后台中依次单击布局管理－“自定义皮肤管理”，在“自定义皮肤管理”页面中单击“添增”按钮。
第二步 设置皮肤相关属性
单击“添增”按钮后，在按钮下显示皮肤的相关信息编辑区，在其间输入“显示名称”、“文件夹名称”、“显示顺序”，并设置“显示控制”后，单击“添加”按钮，就会自动打开一个新的皮肤编辑窗口（如 图 11 ）。
图 11 新的皮肤编辑窗口
2 、上传皮肤文件
在编辑皮肤文件代码之前，把切割好的图片，通过图片上传工具一并上传。
第一步 切换到上传图片页面
单击编辑窗口中上半部分的“上传图片”标签按钮，即可切换到上传图片页面。
第二步 用图片上传工具上传图片
在上传图片页面的“图片组上传”文字链接上单击，会弹出“本地文件上传工具”窗口（如 图 12 ）。
图 12 本地文件上传工具
在此，您只需在左侧中找到并打开图片所在的本地文件夹，右侧即可显示所有图片文件的缩略图，单击右上角的“全部选择”或依次单击图片缩略图来勾选需上传的文件，再单击“确定”按钮即可上传。
3 、编辑皮肤文件代码
第一步 了解一些 css 的相关知识
（１）样式表的继承规则：外部的元素样式会保留下来继承给这个元素所包含的其他元素。
（２）选择符之间的优先级由高往低排列为： ID 选择符、类选择符、 HTML 标记选择符。以前面所举表格的单元格为例，如果给相应的选择符定义 css 样式：
#TOP{color:blue;} /* ID 选择符：定义的是加入了“ id=TOP” 的单元格的文字颜色 */
.line{color:red;} /* 类选择符：定义的是加入了“ class=line” 的单元格的文字颜色 */
TD{color:blank;} /* HTML 标记选择符：定义的是所有单元格的文字颜色 */
其中在 {} 内的是属性设置，属性与属性值用冒号隔开，如需指定多个属性，用分号断开。另外 /**/ 内的文字是注释内容，用于说明用户代码的意思，有利于用户或别人以后编辑和更改代码时理解代码的含义。
如果同一个单元格里同时加入了 id 与 class 标识定义，那么文字显示为蓝色， ID 选择符优先；
如果一个单元格中只加入了 class 标识定义，那么文字显示为红色，类选择符优先；
如果一个单元格中什么标识也没加，那么文字显示黑色。
（３）遇到冲突的地方会以最后定义的为准。
（４）具体的样式属性及属性值，可查阅手册。
第二步 了解皮肤文件中自带的代码结构
（１）分三个大区：顶部是整体设置区，用于整体设置同类选择符的样式；中间是具体栏目设置区，用于分块设置同类栏目的样式；底部是自定义设置，用于设置定制皮肤时在模板中加入的 ID 选择符、类选择符的样式。
（２）具体栏目中选择符的安排，是以栏目结构从外到内，从左到右，从整体到局部排列的，可以间接地了解到相应栏目的布局结构。
第三步 编辑皮肤代码
还是以“图片新闻”栏目的设计效果为例，因为标识为 RIGHT_T 区域中的所有栏目效果都是相同的，可以以 #RIGHT_T 标识来统一定义。
方法一：直接编辑代码
#RIGHT_T .lm_tl{background:url(tianyi_title02l.gif) 0 0 no-repeat;width:7px;height:28px;}/* 标题左上角：背景图片左上角对齐、不重复以及该单元格的宽高 */
注： 其中的“ 0 0 ”表示的是背景图片的 x 、 y 向的定位，与“ left top ”是一样的效果，只不过设数字的话，可以精确地定位图片的显示位置，还可在数字前面加减号，来表示显示的反方向位置移动。如设“ -5px 10px ”则表示该图片左侧从 5 像素处、距上面 10 像素处开始显示图片。
方法二：通过插入常用 css 代码编辑
首先，在自定义设置区空白处输入 ID 选择符、类选择符如“ #RIGHT_T .lm_tl{} ”
接着，把光标定位到 {} 中间，再单击中间的黄色工具条中的“常用 css 插入”，在弹出的窗口中的“选择模块”内选择“背景图片”，再单击“插入当前位置”按钮。此时在 {} 中已插入“ background-image:url(background.jpg) top left no-repeat; ”。
再把“ background.jpg ”换成你所需要它显示的图片文件名“ tianyi_title02l.gif ”。
最后，再加入指定单元格宽高的代码“ width:7px;height:8px; ”。
设置完成后，单击“ CSS 预览”效果（如 图 13 ）。
图 13 标题左上角设置后的显示效果
最后，对其他几项进行设置如下：
#RIGHT_T .Head{background:url(tianyi_title02c.gif) 0 0 repeat-x;height:28px;}
#RIGHT_T .HeadIcon{background:url(tianyi_icon04.gif) 0 6px no-repeat;height:28px;width:6px;}
#RIGHT_T .Head,#RIGHT_T .Head div,#RIGHT_T .Head p{color:#033d7c;font-weight:700;line-height:28px;text-indent:10px;}
#RIGHT_T .lm_tr{background:url(tianyi_title02r.GIF) 0 0 no-repeat;width:7px;height:28px;}
#RIGHT_T .Box{border:1px solid #81c7fa;margin:0 0 5px;padding:5px;}
预览效果如 图 14 、 图 15 所示。
图 14 新闻图片栏目最后显示效果图
图 15 整个 RIGHT_T 区域的两个栏目显示效果
其他的设置，方法相同。相关 css 的属性可能参考手册里的一些说明，一些栏目的具体设置项，可以查看或直接复制下来，在自定义设置区加入 ID 选择符加以定义，再设置相应的属性，就可以了。
五、进行兼容调试
整个页面美工都设置完成后，记得到各种浏览器（如 IE6 、 IE7 、 FireFox 等）中浏览一下显示效果，看看是否有出入，如果有，再加以修正、完善。关于兼容问题的解决方法，网络上也有许多说明文章，可以搜索查找，加以学习与应用。
同时推荐一些调试工具，都是浏览器插件。一个是在 IE 下的由微软自己出的 Internet Explorer Developer Toolbar ，就是英文版的。还有个就是 Firefox 的 Web Developer Extension 。可以在网络中找到并下载，十分方便。
回顶部