编辑“SiteFactoryCMS:默认风格定义说明”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[SiteFactoryCMS:动易模板体系揭秘|上一页]] | {{Template:PowerEasy导航}}</span>
<div style="clear:both;"></div>
<p style="text-indent:2em;">[[CSS]]（Cascading Style Sheets）中文翻译为“层叠样式表”，简称样式表或CSS样式，它是一种制作[[网页]]的新技术。</p>
<p style="text-indent:2em;">网页设计最初是用[[HTML]]标记来定义页面文档及格式，例如标题<nowiki><h1></nowiki>、段落<nowiki><p></nowiki>、表格<nowiki><table></nowiki>、链接 <nowiki><a></nowiki>等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年[[W3C]](The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括[[JavaScript]]、[[VBscript]]等)、支持动态效果的[[浏览器]](包括[[Internet Explorer]]、[[Netscape]] Nav�i�ga�tor等)和CSS样式表。</p>
<p style="text-indent:2em;">在系统中，风格模板以CSS样式语句来定义文档的样式，以控制版式模板最终显示样式和整个[[网站]]的风格样式。风格模板默认保存在Skin目录中（默认为/ Skin/ Default）。本节将以系统提供的默认模板方案重点讲解如何以后台管理的方式管理风格模板，文件形式管理模板请直接在网站相应目录中进行操作。</p>
<p style="text-indent:2em;">温馨提示：CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的值（value）。基本格式为： selector {property: value;}（选择符 {属性：值;}）。选择符是可以是多种形式，一般是为要定义样式的HTML标记，例如BODY、P、TABLE……或自定义名，通过格式定义它的属性和值，属性和值要用冒号隔开，值以分号结束。关于CSS基础知识请参阅相关知识。</p>
<p style="text-indent:2em;">在雅蓝模板方案[[首页]]结构示意图中，可以看出相关结构代码关键的CSS定义。这些定义控制着各个区块的位置、边框、背景等样式。在前节基本概念中我们讲过， “[[DIV]]+CSS”设计使用[[XHTML]]+CSS方式来制作网站可以实现结构与表现彻底分离，这样可以通过控制和更换CSS以实现快速切换网站样式的目的。本节将重点讲述默认雅蓝模板方案所使用的模板风格的主要定义，您可以结合雅蓝模板方案首页结构示意图理解本节内容。</p>
<p style="text-indent:2em;">在上节模板方案管理的基本概念中，我们通过更改CSS定义来改变页面布局理解了页面布局与显示样式完全分离的含义。这里我们再做个小试验，以快速更改页面宽度定义实现整屏的布局效果。</p>
<h4>操作步骤：</h4>
<p style="text-indent:2em;">1. 以记事本打开\Skin\Default\default.css（在修改前请复制一个default.css以备恢复时使用），找到控制网页整体布局定义的定义：</p>
<pre style="width:858px; border:1px solid #000; background:white;">
/* ==整体布局定义开始== */

/* head(网页头部)、menu(网页头部导航菜单)、main_bg(网页中部主要内容)、foot(网页底部) */

#head, #menu, #foot, #main_bg, .c_padding

{

padding: 0px;

margin: 0px auto;

width: 980px;

}

#main_bg, .c_padding

{

width: 982px;

}

…… 
</pre> 
<p style="text-indent:2em;">2. 删除“width: 980px;”和“width: 982px;”定义，此时不固定宽度，则相关DIV区块会自动延伸为整屏。</p>
<p style="text-indent:2em;">3. 刷新访问一下网站首页，可以看到则原固定宽度的布局已经改成了整屏的布局效果。</p>
<p style="text-indent:2em;">由此可以看出，在“DIV+CSS”的设计中，CSS样式将DIV布局和最终显示结果起着非常重要的作用。系统默认的CSS定义一般将一些布局控制归类在一起，以方便查找和修改。</p>
<p style="text-indent:2em;">默认的CSS样式文件保存在\Skin\Default目录中，打开Default目录，可以看到以下文件及文件夹：</p>
<p style="text-indent:2em;">Images：存放风格图片文件。</p>
<p style="text-indent:2em;">default.css：模板方案主要及通用CSS样式定义。</p>
<p style="text-indent:2em;">article.css：文章中心CSS样式定义。</p>
<p style="text-indent:2em;">soft.css：下载CSS样式定义。</p>
<p style="text-indent:2em;">photo.css：图片中心CSS样式定义。</p>
<p style="text-indent:2em;">product.css：商店CSS样式定义。</p>
<p style="text-indent:2em;">special.css：专题CSS样式定义。</p>
<p style="text-indent:2em;">user.css：会员中心CSS样式定义。</p>
<p style="text-indent:2em;">commentary.css：评论CSS样式定义。</p>
<div style="width:790px; border:1px solid #000;">
[[{{ns:image}}:sf599.jpg]]</div>
<p style="text-indent:2em;">为了方便修改与调用，default.css是模板方案主要CSS样式定义，包括各节点所通用的CSS样式定义。 article.css、soft.css等CSS文件主要定义本节点所使用的一些CSS样式，相对内容少一些。</p>
<p style="text-indent:2em;">同时因系统的页面全部采用标准的[[UTF-8]]编码格式，因此在新建和保存CSS文件时，要将文件保存为与网页一致的UTF-8编码格式（如果与页面编码不一致，则CSS中某些中文注释下的CSS定义会失效）。</p>
<p style="text-indent:2em;">温馨提示：以记事本打开CSS文件，依次点击顶部菜单中“文件”->“另存为”，在出现的另存窗口底部的“编码”中选择“UTF-8”，单击“保存”按钮覆盖原文件即可保存为UTF-8编码格式。</p>
<p style="text-indent:2em;">在各模板中，以外链的方式调用相应的CSS，如网站[[首页]]为：</p>
<p><nowiki><link href="Skin/Default/default.css" rel="stylesheet" type="text/css" /></nowiki></p>
<p style="text-indent:2em;">文章中心首页为：</p>
<p><nowiki><link href="Skin/Default/default.css" rel="stylesheet" type="text/css" /></nowiki></p>
<p><nowiki><link href="Skin/Default/article.css" rel="stylesheet" type="text/css" /></nowiki></p>
<p style="text-indent:2em;">将各节点所需使用的一些通用CSS定义放在default.css中，在模板页面中分开调用。这种方法一方面能减小单个CSS文件的大小，加快页面下载速度。另一方面即使是通用定义，在某个节点中要更改样式，也可以在本节点的CSS中重复使用CSS名重新定义。以下内容将主要针对default.css进行说明。</p>
<p style="text-indent:2em;">温馨提示：根据CSS优先级规则，article.css调用时放在default.css下方，article.css中的重名定义才会生效。</p>






[[category:SiteFactoryCMS模板管理]]