自定义页面样式 1 使用说明： 1 页面结构 2 头部说明 4 主体定制8主体背景（跨三栏）设置 8左边栏背景设置 8 中间栏背景设置 8 右边栏背景设置 9 底部定制 10 底部背景修改 10 底部文字修改 10 模块定制 11 模块标题修改 11 模块边框修改 12 模块背景修改 12 普通文字修改 12 链接文字修改 13 学校名称修改13模块标题文字修改 13 明细页标题文字修改 14 信息陈列标题文字修改 14 简单说明文字修改 14 分类列表文字修改 15 页首连接文字修改16小技巧 17 CSS 标签定义对照表 18样式结构图 21Pictures 图文件范例说明24小图示 24 论坛图档 25伺服網路科技股份有限公司 (02)2711-7555建立日期：2006/10 修改日期：2006/10 版 本：1.0自定义页面样式使用说明：本软件的页面样式设计采用了大量的ＣＳＳ定义，因此，本手册仅限于熟悉ＣＳＳ编写规则的专业网页设计制作人员使用。
当从往站后台下载自定义页面样式文件后，解压缩您可以看到如下所示一些档案：∙如图所示，在Example目录下，有两个文件夹（catalog、style）和一个档案（index.html）。
catalog文件夹内存放网页范例内容，供您预览使用，请不要随意更改；style文件夹包含两个档案（style.css、font.css）以及两个文件夹（images、pictures），更改这些档案将从新设定当前页面样式的显示效果：o style.css主样式表单，包含绝大部分的样式定义；o font.css字型样式表单，简要定义了一些字型与字号大小；o images存放样式表单中引用到的图档的文件夹，在样式表单里引用到的所有背景图都存放在此；o pictures是存放样式表单中没有引用、但在页面中引用的图档。
∙双击"index.html"，开启网页制作范本页面、预览当前所有页面的显示效果；同样，您对css样式的任意修改都可以通过刷新该范例页面来预览。
页面结构页面的结构如下图：背景修改请通过修改样式表单来设定页面整体背景的背景色或者背景图。
修改背景色o用任意文本编辑器打开style.css，找到下面这段样式：body {...background: #8DCF2F url("images/bg.gif");...}o其中background: #8DCF2F url("images/bg.gif")便是设置页面的背景，将以上css代码改动如下，页面的背景色就变成了black（黑色）：body {...background: black;...}修改背景图o同上，找到"body"所在的那段代码片段。
o将以上CSS代码改动如下，页面的背景图就变成了mybg.gif：body {...background: url("images/mybg.gif");...}间距修改请按照下列方法，设定网页与浏览器的间距。
用任意文本编辑器打开style.css，找到下面这段样式：body {margin: 10px;......}将上面这段css代码改动如下，网页与浏览器的间距（上下左右都有间距）就变成了25像素：body {margin: 25px;...}头部说明头部的结构如下图：学校名称文字修改用任意文本编辑器打开font.css，找到下面这段样式，修改"｛｝"内的样式代码。
pany {font-family: Arial, T ahoma, "MS Sans Serif", Geneva, sans-serif;font-size: 14px;font-weight: bold;}提示："font-family"设定字型，"font-size"设定字号，"font-weight"设定文字的粗细。
关于文字样式的设定，请参考「文字修改」中的「普通文字样式修改方法」。
页首连结定制请通过修改样式表单来修改文字前的小图、链接文字的颜色，调整整个页首链接导航条的位置等。
∙页首连结小图修改o用任意文本编辑器打开style.css，找到下面这段样式，"nav_li1.gif "为默认的显示图形，"nav_li2.gif" 为鼠标移上后的小图。
div.navbar li a,div.navbar li a:link,div.navbar li a:visited {......background: url("images/nav_li.gif") no-repeat 0 50%;}div.navbar li a:hover {......background: url("images/nav_li2.gif") no-repeat 0 50%;}o如果要修改这两张图形，请重新制作两张新的图形，覆盖images文件夹内的原有档案；如果不需要小图显示，请将"background..."这行代码删除。
∙页首链接文字样式修改o用任意文本编辑器打开font.css，找到下面这段样式，横线上方为鼠标移上前的文字样式，横线下方为鼠标移上后的文字样式。
div.navbar li a,div.navbar li a:link,div.navbar li a:visited {font-weight: bold;color: #FFF;text-decoration: none;}div.navbar li a:hover {color: #FF0;border-top: 1px #FF0 solid;}o提示：关于文字样式设定，请参照「文字修改」中的「带链接的文字样式修改方法」。
∙页首连结定位o用任意文本编辑器打开style.css，找到下面这段样式，其中"bottom:0px"表示导航栏与头部的最下端的距离为0，"right:-1px"表示导航栏与头部右端的距离为-1像素，也就是导航栏超出头部的右侧一个像素。
div.navbar {position: absolute;bottom: 0px; right: -1px; z-index: 100;......}∙banner定位用任意文本编辑器打开style.css，找到下面这段样式，"right:10%"表示banner与头部的最右端的距离为头部宽度的10%，"top:10px"表示banner与头部顶端的距离为10像素。
div.banner {......top: 10px;right: 10%;}头部高度设定当logo高度较小或者banner高度过大时，banner将盖住网页的部分内容，此时请通过在样式表单中修改网页头部高度来解决这个问题。
∙用任意文本编辑器打开style.css，找到下面这段样式div.head yer_03 {background: url("images/hd_bgr.gif") no-repeat top right;}∙在"div.head yer_03 {}"中增加一个高度"heigh t"的设定，改动如下，头部的高度就变成您所设定的值（本例中设定头部的高度为150像素）。
div.head yer_03 {background: url("images/hd_bgr.gif") no-repeat top right; height: 150px;主体定制主体背景（跨三栏）设置∙用任意文本编辑器打开style.css，找到下面这段样式，其中，background已经定义了主体的背景，将制作好主体背景图命名为"bd_bg.gif"，放到images文件夹中即可。
以下例子中背景是居左朝下并且不平铺，如需要对背景的平铺方式进行修改。
table.container td.body {...background: #FFF url("images/bd_bg.gif") no-repeat left bottom;...}左边栏背景设置∙用任意文本编辑器打开style.css，找到下面这段样式，background已经定义了主体的背景，制作好第一栏背景图，命名为"col_01bg.gif"，放到images文件夹中即可；以下例子中背景是朝上对齐并且横向平铺，如果需要对背景的平铺方式进行修改。
td.col_01 {border-right: 1px #6CA51A solid;background: url("images/col_01bg.gif") repeat-x;}中间栏背景设置∙用任意文本编辑器打开style.css，找到下面这段样式。
td.col_02 {}∙如下，在其后添加另一段样式代码，并制作好第二栏背景图，命名为"col_02bg.gif"，放到images文件夹中；以下例子中背景是朝上对齐并且横向平铺，如果需要对背景的平铺方式进行修改。
td.col_02 {background: url("images/col_02bg.gif") repeat-x;}右边栏背景设置用任意文本编辑器打开style.css，找到下面这段样式。
td.col_03 {}如下，在其后添加另一段样式代码，并制作好第三栏背景图，命名为"col_03bg.gif"，放到images文件夹中；以下例子中背景是朝上对齐并且横向平铺，如果需要对背景的平铺方式进行修改。
td.col_03 {background: url("images/col_03bg.gif") repeat-x;}底部定制底部背景修改用任意文本编辑器打开 style.css，找到下面这段样式。
div.foot yer_01 { ... background: #8B720C url("images/ft_bg.gif") repeat-x; ... }底部文字修改用任意文本编辑器打开 font.css，找到下面这段样式。
div.foot div.copyright { font-size: 9pt; font-family: verdana, Tahoma, "MS Sans Serif", Geneva, sans-serif; color: #000; }10模块定制模块标题修改标题小图修改 将制作好标题小图命名为 bd_bg.gif，放到 images 文件夹中即可；如果要更改标题文字与 小图的距离，请用任意文本编辑器打开 style.css，找到下面这段样式，修改"padding: 5px 0 1px 20px"中的"20px"，该值越大则文字离图越远，反之则越近。