编辑“SiteFactoryCMS:网页构成基础”

__NOTOC__
<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;">系统提供模板方案对整个[[网站]]的版式、风格及其显示样式进行预设，模板方案中包含网站的版式模板与风格模板。要理解这二大模板分类，我们要从[[网页]]的主要构成说起。一个网页一般主要由四大部分组成：内容（Content）、结构（Structure）、表现（Presentation）和行为（Behavior）。</p>
<h4>基本概念</h4>
<p style="text-indent:2em;">'''内容：'''网页中实际要传达的纯粹数据的内容信息（如网页中所显示的文字、数据、或者图片等信息）。</p>
<p style="text-indent:2em;">'''结构：'''是指将内容进行格式化，使内容更具有逻辑性、易读性（如将一段文字分成标题、作者、章、节、段落和列表等格式）。</p>
<p style="text-indent:2em;">'''表现：'''是指信息经过修饰后的展示形式（如给识文字加上字号、字体、背景、布局排版等显示样式），用来改变内容外观的方式。</p>
<p style="text-indent:2em;">'''行为：'''是对内容的交互及操作效果（如使用[[javascript]]使内容在鼠标经过时动起来、判断表单提交等）。</p>
<p style="text-indent:2em;">温馨提示：对于内容、结构、表现和行为，以形象一点的比喻来说明：内容是人，结构是用来标明是头还是身体、四肢等各个部位，表现则是给各部位加上服装以打扮漂亮，行为是四肢在特定环境下所呈现的交互行为。</p>
<div style="width:798px; border:1px solid #000;">
[[{{ns:image}}:sf572.jpg]]</div>
<h4>结构与表现分离实验</h4>
<p style="text-indent:2em;">近年来在网页设计中以“[[DIV]]+[[CSS]]”的设计方式进行重构（即为“[[WEB]]标准”），这是因为利用 “DIV+CSS”构建的网页能简化网页代码、加快网页显示速度。真正符合标准的网页设计是指能够灵活使用Web标准对Web内容进行结构、表现与行为的分离棗即表现与内容分离的设计。系统也是遵循这一原则进行默认模板及模板方案而设计的，使用[[XHTML]]+CSS来制作网站，实现使结构与表现彻底相分离的目标。</p>
<p style="text-indent:2em;">为了理解这些内容，我们可以先做小试验来理解一下结构与表现彻底相分离的含义：</p>
'''操作步骤：'''
<p style="text-indent:2em;">1.以记事本打开\Skin\Default\default.css（在修改前请复制一个default.css以备恢复时使用），找到网页中部控制布局定位与宽度的定义：</p>
<pre style="width:488px; border:1px solid #000; background:white;">
/* ==center_all(中部)定义开始== */

……

#main_left /* 网页中部左侧整体定义 */

{

float: left;

width: 210px;

}

#main_right /* 网页中部右侧整体定义1 */

{

float: right;

width: 100%;

margin-left: -210px;

text-align: left;

}
#main_right_box /* 网页中部右侧整体定义2 */

{

margin-left: 215px;

}

#r_main /* 中部右侧定义 */

{

float: right;

width: 200px;

text-align: left;

}

#main_box /* 中部整体定义 */

{

margin: 0px;

}

.c_main /* 中部中间定义 */

{

margin-right: 205px;

}

…… 
</pre>
<p style="text-indent:2em;">2.根据以下操作步骤修改几个简单的CSS定义：</p>
<p style="text-indent:3em;">-> 将#main_left中的“float: left;”定义改成“float: right;”。</p>
<p style="text-indent:3em;">-> 将#main_right中的“float: right;”定义改成“float: left;”。</p>
<p style="text-indent:3em;">-> 将#main_right和#main_right_box “margin-left:”定义改成“margin-right:”。</p>
<p style="text-indent:3em;">-> 将#main_bg中的“background: url(images/left-bg.gif) #fff repeat-y left;”定义改成“background: url(images/left-bg.gif) #fff repeat-y right;”。</p>
<p style="text-indent:2em;">3.刷新访问一下网站首页，是否看到整体中部的“左小右大”布局已经对调变成了“左大右小”布局？如果我们再修改一下：</p>
<p style="text-indent:3em;">-> 将#r_main中的“float: right;”改成“float: left;”。</p>
<p style="text-indent:3em;">-> 将.c_main中的“margin-right:”定义改成“margin-left:”。</p>
<p style="text-indent:2em;">这时再刷新网站首页，可看到原中部页面右侧的“左大右小”布局已经对调变成了“左小右大”布局。</p>
<p style="text-indent:2em;">4.访问一下文章中心首页，在IE6浏览器下可以看到右侧（原左侧）应该与左侧并列但现下坠在右侧下方，查找并修改下面几个定义即可修正：</p>
<pre style="width:488px; border:1px solid #000; background:white;">
/* 栏目页 */

.childclass_main

{

margin- left: -5px;

}

* html .childclass_main

{

margin- left: -10px;

}

/* 父栏目二列式左右循环 */

.childclass_main_box

{

float: left;

border: 1px solid #9bbde6;

width: 379px;

margin: 5px 5px 0px 0px;

} 
</pre>
<p style="text-indent:3em;">-> 将.childclass_main和* html .childclass_main中的“margin-left:”改成“margin-right:”。</p>
<p style="text-indent:3em;">-> 将.childclass_main_box中的“margin: 5px 0px 0px 5px;”定义改成“margin: 5px 5px 0px 0px;”。</p>
<p style="text-indent:3em;">至此，我们只通过更改少数CSS定义，就将整体页面布局对调了下，即更改CSS定义来改变页面布局。通过这个小试验，我们可以更直观地理解默认模板基于 DIV+CSS设计，将页面布局与显示样式完全分离，通过对样式的修改即可调整页面布局，以实现网页结构与表现分离的含义。理解了上面的含义后，我们就比较容易理解前章“模板方案管理”中对于版式模板和风格模板的概念了。</p>





[[category:SiteFactoryCMS模板管理]]