SiteServer教学文档

马鞍山职业技术学院校企合作教材

SiteServer CMS 3.5教程

(项目导向教学模式)

黎元彪编著

马鞍山职业技术学院

二Ｏ一二年二月

SiteServer CMS 3.5教程

（项目导向教学法）

1. CMS及SiteServer CMS简介

1.1. 什么是CMS

CMS是Content Management System的缩写，意为“内容管理系统”。通俗地说，CMS 帮你把一个网站的数据库和服务器程序的工作都做完了，你只需做一个网站美工部份的工作即可。设计一些静态网页模板，这样，一个门户级网站就出来了。

目前，CMS的软件有很多，常见的有：帝国CMS、DEDECMS、PHPCMS、动易、SiteServer CMS等。

1.2. SiteServer CMS简介

SiteServer CMS是北京百容软件公司开发的一款CMS软件。SiteServer CMS是基于微软.NET 平台开发的网站内容管理系统，它集成了内容发布管理、多站点管理、定时内容采集、定时生成、多服务器发布、搜索引擎优化、流量统计等多项强大功能，独创的STL 模板语言，通过Dreamweaver 可视化插件能够任意编辑页面显示样式，生成纯静态页面。

1.3. 教学方式

与SiteServer技术文档和传统教学模式不同，本教程采用项目导向教学法。通过一个典型网站的设计过程，将SiteServer CMS的各知识点溶入在项目设计过程中。读者在学会网站设计过程的同时，也掌握了SiteServer CMS主要知识和应用技能。SiteServer CMS应用的重点就在于模板设计，这也是本教学过程的重点。

注：有关本教学过程典型网站的界面与功能，请观看视频教学文件。以下图片为本教学网站示例的首页界面。

2. SiteServer CMS安装及SiteServer CMS后台管理系统2.1. SiteServer CMS安装

1．在百容千域公司网站https://www.sodocs.net/doc/1212809738.html, 可免费下载SiteServer v3.5软件及相关技术文档。

2．在用户计算机上安装如下软件：

Windows 操作系统；

●.NET Framework 2.0；

●Microsoft Access 2003；

●IIS或Visual Studio .NET 2005以上版本；

●Dreamweaver。

3．找到本机安装Dreamweaver的位置，例如：C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration。将SiteServer软件中“SiteServer V3.5\模板制作插件\需要覆盖\”下所有文件夹复制并粘贴到C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration中，全部覆盖。这样在Dreamweaver中就会出SiteServer的模板制作插件，如下图所示：

4．在本机新建自己网站的文件，例如：D:\FirstWeb。将SiteServer V3.5\upload_files 文件夹中所有文件复制到D:\FirstWeb中，并将D:\FirstWeb文件夹的权限设置为可读写。

5．在IIS中新建一网站并将网站主目录指向D:\FirstWeb并作如下设置：

●在IIS中设置网站执行权限为纯脚本；

●设置https://www.sodocs.net/doc/1212809738.html,版本为2.0；

●在文档中添加Index.htm文件

6．在IIS中打开网站目录SiteServer，浏览login.aspx文件。

注：当用户安装了Visual Studio .NET时，可在Visual Studio .NET中以网站方式打开D：\FirstWeb文件夹，并浏览SiteServer\login.aspx文件。

2.2. SiteServer CMS后台管理系统

首次浏览网站后台文件时，会进入如下安装页面：

按向导进行操作，当进行到“数据库设置”时，选择Access数据库。在“安装产品”中选中所有产品，之后设置后台管理员和密码，登录后进入如下界面：

点击SiteServer CMS进入如下界面：

新建站点：

3. 网站设计文档

在做网站前，必须写好网站设计文档，这一点很重要。本教程以“皖北牛肉当涂专卖店”网站为基础，介绍如何利用SiteServer CMS制作该网站的过程。

与通常的网站设计文档不同，利用SiteServer CMS制作网站的设计文档不需要设计数据库和后台管理，因为SiteServer CMS已将数据库和后台管理封装了，用户只需要设计网站前台的内容即可。以下给出“皖北牛肉当涂专卖店”网站设计文档。

“皖北牛肉当涂专卖店”网站设计文档

1．需求分析

1.1 背景描述

企业网站给人们提供了一个了解企业、与企业交流的平台，提升了企业的知名度，使企业经营水平上升到一个新的高度。通过本网站，用户可了解本店的起源、发展、经营等情况，浏览本店食品的外观、种类、价格等指标，查询本店在当涂各分店的联系方式及位置。此外，用户还可通过网站留言，提出用户的意见和建议。

1.2 系统功能

1．首页

导航条：以超链接方式导航到网站主要栏目：首页、关于我们、公司新闻、产品展示、店面位置、

客户留言。

●企业小公告：滚动显示。

●企业联系方式：以文本方式介绍企业下属各分店地址、联系电话。

●公司新闻：按新闻发布日期顺序显示前7条新闻的日期和标题。点击某一新闻标题后，在另一面

显示该新闻的详细内容。

●以图片切换方式显示部分新闻图片。

●食品展示：以页标签切换方式显示各类食品前八种的图片、价格等信息。点击某一食品后，在另

一面显示该食品详细内容。

●关于我们：以文本、图片方式显示部分企业内容介绍，通过“更多”链接到“关于我们”页面。

●营业证照：以静态图片方式显示显示营业证照。

●网上调查：可对公司产品、服务质量等指标进行网上调查。

2．关于我们

以文字和图片的方式介绍企业的起源、发展史、企业性质、经营情况、获奖证书等。

3．公司新闻

按新闻发布日期顺序分页显示所有新闻的日期和标题，最近的新闻排列在最前。点击某一新闻标题后，在另一面显示该新闻的详细内容。

4．产品展示

以小图标方式分类显示本店各食品，并在每一图标下方标有该食品的名称、单价等信息，点击某一食品后，在另一面显示该食品详细内容。类别分为肉食类、素食类和小包装类。

5．店面位置

在当涂县地图上标出各分店的位置。

6．客户留言

该板块提供了网站客户与公司进行交流的平台。用户可在此页面中输入留言主题、留言内容、Email 等信息并提交到网站服务器。

2．网站栏目及其结构图

根据功能设计，可得出网站栏目如下：首页、关于我们、公司新闻、产品展示、店面位置、客户留言、肉食类、素食类、小包装类。栏目结构图如下：

3．网站模板页布局图

通常，一个网站所有具有统一的风格。为此，需设计风格一致的模板页，如：首页模板、栏目页模板、内容页模板等。为简单起见，本站所有页面只采用一个模板，其布局图如下：

4. 设计网站模板页

根据设计文档，美工人员用Photoshop设计并绘制出模板页如下：

利用Photoshop切片工具切片，并将图片存储为Web格式。所有图片存放在网站根目录

下Images文件夹中。然后，由网页设计人员用div+css标签进行布局设计，得到网页代码如下：

"https://www.sodocs.net/doc/1212809738.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

上述文件中只有部分样式放在网站根目录下style文件夹的myStyle.css文件中。从规范的角度出发，网页中所有CSS样式都应放在一单独的样式表文件中，请读者自行完成上述文件中CSS样式的规范化。myStyle.css文件代码如下：

a:link

{

text-decoration: none;

color: #000000;

}

a:visited

{

text-decoration: none;

color: #000000;

}

a:hover

{

text-decoration: none;

color: #000000;

}

a:active

{

text-decoration: none;

color: #000000;

}

body

{

background-color:#eff6eb;

margin:0px auto;

}

img

{

border:none;

}

.nav

{

filter: alpha(opacity=70);

opacity: 0.7;

}

5. 包含文件

登录SiteServer CMS后台管理，点击“站点管理”，进入“皖北牛肉当涂专卖店”网站管理。

点击“显示管理”—>“包含文件管理”后，会在网站目录下新建一“include”文件夹，在Dreamweaver中新建Top.htm和Bottom.htm二文件，存放在include文件夹。

将模板文件中从开始到注释之间的代码粘贴到Top.htm文件中，模板文件中从注释到最后的代码粘贴到Bottom.htm文件中。设置二文件的字符编码为utf-8。

注：本网站所有文件的字符编码统一使用utf-8。

6. 添加网站栏目及内容

6.1. 添加网站栏目

点击“栏目管理”—>“快速添加”后，按网站设计文档中栏目结构图输入栏目。

为每一个栏目添加一栏目索引。栏目索引不要用中文，通常用英文字母和数字。本网站各栏目的索引分别为：Index、AboutUs、News、Product、p1、p2、p3、Location、Message。

6.2. 添加网站内容

点击“内容管理”后，就可在相应栏目下添加内容。

6.2.1 “首页”栏目内容

在“首页”栏目中添加一条内容：

标题：滚动公告内容

内容：

1.我店从2010年4月8日起到5月8日止实行让利销售，所有食品全部9.5折，对本店会员一按9折销售。

2.凡在本店一次消费满50元，均可办理会员卡一张。

3.我店最近新增一些食品种类，欢迎新老顾客光临！

6.2.2 “关于我们”栏目内容

在“关于我们”栏目中添加一条内容：

标题：关于我们内容

内容：（自定，但至少包含一幅图片）

6.2.3 “公司新闻”栏目内容

在“公司新闻”栏目中添加十五条以上新闻内容，必须在部分新闻中插入图片。

6.2.4 “产品展示”栏目内容

由于产品中涉及到单价、单位、食品图片三个字段，在添加产品内容前需要先添加这三个字段。具体操作如下：

1.点击“信息管理”—>“内容模型”—>“内容字段管理”；

2.在栏目下拉列表框中选择“产品展示”栏目后，点击下方“新增虚拟字段”按钮，

新增“单价”、“单位”和“食品图片”三个虚拟字段。在新增“食品图片”字段时，一定要设置表单提交类型为“图片”。

在新增了三个字段后，可在分别在“肉食类”、“素食类”、“小包装类”三个栏目上添加若干条内容。

7. 首页模板

用SiteServer CMS设计网站的每一页时，都是先设计该页的模板页，然后再利用模板页生成该页的静态页。

首页界面如下图所示：

7.1. STL语言简介

在SiteServer模板页中，可插入STL语言。STL 语言全称为SiteServer CMS 模版语言（SiteServer CMS Template Language），是一种用来创建模版的服务器端语言。它由百容软件创建。

STL 语言由STL元素和STL实体二部分组成。STL 元素的作用是在模板页面中插入各种对象。STL 实体的作用是在HTML元素或STL元素的属性中插入信息。

STL元素样式及示例如下：

上式用于生成客户端超链接标签。

STL实体样式及示例如下：

{Stl.SiteUrl}

上式表示获取网站域名地址。

有关STL语言的系统介绍，请读者自行参考SiteServe技术文档。

7.2. 利用网站模板制作首页模板

●在网站根目录下新建文件夹Images和Style，并将网站所需的图片和样式表文件复

制到相应的文件夹中。

●在Dreamweaver中打开网站根目录下的“T_系统首页模板.htm”文件，输入如下代

码并保存。

注：由于将“模板制作插件”复制到了用户计算机的Dreamweaver文件中，所以可用“SiteServer CMS 模板”工具生成上述代码。

●点击“生成管理”—>“生成首页”后。

●点击“栏目管理”后，再点击右边“首页”栏目左边的文件夹图标，就可在浏览器

中看到生成的首页了。此时，生成的静态网页index.htm存放在网站根目录下。

注：在后面的内容中，我们将接触更多的模板页，每当模板内容变化后，都要重新生成对应的静态页。

7.3. 显示“滚动公告”

滚动公告部分的代码在Top.htm文件中，公告内容存放在“首页”栏目中，将Top.htm 文件中……用如下代码替换：

上述代码中有三个STL元素，其中，用于滚动显示，用于指定哪个栏目下的内容列表，用于显示内容中哪个字段的值。

7.4. 显示“店面信息”

本店有多个分店，考虑以后还可能新增店面或更改分店信息，为此，需要将店面信息存放在数据库中，以便动态修改。具体操作如下：

●在“首页”栏目下新增“店面信息”栏目，将栏目索引设置为LocationInformation；

●在“店面信息”栏目中新增“Telphone”虚拟字段

在“店面信息”栏目中新增四条内容，其中，标题字段存放店面位置，电话字段存放分店电话。

显示店面信息的代码入在Top.htm文件中，将Top.htm文件中显示店面信息的

……

7.5. 网上调查

本网站对公司产品满意度进行网上调查，实现网上调查功能步骤如下：

1.点击“功能管理”——>“投票管理”——>“新增投票”——>输入投票名称、标

题以及投票项的标题后按“添加”按钮。（本网站各项的设置值依次为：VProduct、你对本公司产品满意吗、满意、一般、不满意。）

2.在Top.htm文件中“店面信息”下面的某个位置输入如下代码即可。

3.点击“功能管理”——>“投票管理”，就可查看投票情况。

7.6. 显示“公司新闻”和“焦点图片”

首页中“公司新闻”板块，采用二列布局，左边显示前7条新闻，每条新闻标题最多显示16个字符；右边显示3幅动态切换的新闻图片。“公司新闻”板块代码如下：

上述代码解释如下：

●更多…在是超链接，其中的channelIndex="News"表

示链接到“公司新闻”栏目。放在栏目列表中的超链接会链接到相应新闻记录对应的静态页面。

●用于显示新闻栏目

中前7条新闻列表，每条新闻标题最多显示16个字符。

●为焦点图片新闻，它会从新闻栏

目中选择有图片的3条记录切换显示。

●点击某条新闻或某个焦点图片后，会在另一浏览器窗口中显示该条新闻的详细内

容，具体显示新闻详细内容的页面设计将在第9章内容模板中介绍。

7.7. 显示“主要产品”

首页中主要产品板块采用三个页标签方式分别显示每类产品的前八项，其代码如下：