PDF《《六十分钟迅速提高教程》》

WE MAKE THE WEB WORK 《六十分钟迅速提高教程》 欢迎来到 SiteServer CMS 内容管理系统《六十分钟迅速提高教程》 ,本教程由百容千 域文档团队发起制作,本文档面向人群为已经阅读过《十分钟快速入门教程》的使用者,若 您还未阅读,请点击 http://help.

siteserver.cn/channels/138.html 找到《十分钟快速 入门教程》阅读. 本教程基于您已经在本机安装了 SiteServer CMS,如果还未安装请务必参考《系统安 装教程(非服务器环境) 》进行安装(注:各种命名规则也请与教程保持一致) . 本教程包含了新建站点、栏目及内容添加、模板制作、栏目属性设置、生成网站等一系 列的操作过程.旨在通过建立一个简单的网站,让刚开始接触 SiteServer CMS 不久的用户 利用最短的时间了解该系统建站时的流程,感受其方便程度的同时能有所提高. 本教程因编写时间有限,难免有纰漏或者未讲解详细之处,请广大 SiteServer CMS 使用者谅解并敬请斧正,更多详细帮助信息可以通过我们的官方帮助网站:http://help.siteserver.cn/查询. 通过《系统安装教程(非服务器环境) 》我们已经成功的安装了 SiteServer CMS,并且 建立了一个 wwwroot 虚拟目录,下面我们就从这里开始吧!

一、利用官方发布的站点模板建立网站

1、 下载站点模板: 访问官方模板网站 http://moban.siteserver.cn/ , 选择您心仪的站点 模板进行下载,我们以下载站点模板 工程建设集团 为例讲解.

2、 将下载的站点模板 工程建设集团 (T_gcjs.rar ) 放在WE MAKE THE WEB WORK D:upload_filesSiteFilesSiteTemplates 里面并 解压缩到当前文件夹 ;

3、 运行 http://localhost/wwwroot/siteserver 进入 SiteServer CMS 登陆界面,输入帐 号、密码及验证码进入后台,因为是第一次登陆后台,系统会提示 选择站点模板 : 我们选中站点模板 工程建设集团 ,点击 下一步 , 输入 站点名称 (根据实际情况可任意起名,例如 我的第一个站点 ) ,输入 文件夹名 称 (需以英文或拼音取名,例如 first ) ,点击 下一步 ,稍等片刻, 我的第一个站 点 创建成功! WE MAKE THE WEB WORK 说明: 打开 D:upload_files,会看到下图所示,原来的系统目录里面多了一个 first 文件夹 first 就是 我的第一个站点 的站点文件夹,关于本站的所有文件都在该文件夹中, 点击 first 文件夹看到如下图所示, 因为是引用站点模板 工程建设集团 新建的站点,所以 first 文件夹里面的文件和原 工程建设集团 网站是一致的;

其中: channels 里面存放着所有生成的静态栏目页;

contents 里面存放着所有生成的静态内容页;

css 里面是本站点引用的 css 样式文件;

flash 里面是本站点引用的 flash 文件;

iamges 里面存放着本站点中所用到的图片;

WE MAKE THE WEB WORK include 文件夹保存着站点头部、尾部等包含文件;

Template 中存放着页面模板,打开即能看见所有栏目模板,其中的 Template/Content 文件夹中存放着是内容模板;

upload 里面存放着上传的标题图片、视频等文件 index.html 是网站首页生成后的静态页面;

T_系统首页模板.html 是首页模板;

如果不是第一次登录 SiteServer CMS 系统后台,并且系统中也无任何可管理的站点, 那么登录后, 系统左侧菜单会提示 新建站点 , 点击其新建站点或者点击系统顶部导航 站 点配置 ,找到 系统站点管理 ,找到 新建站点 ,点击进入管理界面,其中会看到本 系统中的站点模板,选中一个站点模板点击 下一步 ,以后的工作与前面所述一致;

当我们利用一个站点模板建了一个网站之后, 我们就可以用这个模板改成自己想要的网 站,如何修改见《如何利用站点模板建设网站》教程.

二、利用一组静态页面建立网站 在这里我们将用一组静态页面为大家建立一个简单的小网站, 所谓静态页面是指美工人 员切好图的 html 页面,这样的页面是制作网站的基础,做一个这样的网站目的在于让大家 了解 SiteServer CMS 建站的先后程序、模板的应用以及利用 SiteServer CMS 建立的网站的 整体架构. 通过点击:http://data.siteserver.cn/tutorial/jingtaiye.rar 下载这一组静态页 面,我们利用这组静态页来实际的制作一个 教程网站 . 将 jingtaiye.rar 下载到本机的任意地方,完毕后解压缩到当前文件夹,打开后: ? css 中存放着控制页面样式的 css 文件;

? images 中存放着页面的图片文件;

? index.html 页为首页表现形式,我们要用它做成 T_系统首页模板 ;

? info.html 页为最终内容显示表现形式,我们要用它做成 T_系统内容模板 ;

? list.html 页为内容列表表现形式,我们要用它做成 T_系统栏目模板 ;

? 栏目设置.xls 为 教程网站 的栏目设置;

WE MAKE THE WEB WORK 打开后台:http://localhost/wwwroot/siteserver,输入帐号、密码以及验证码进入 SiteServer CMS 管理后台;

点击系统顶部导航 站点配置 , 然后在左侧菜单找到 系统站点管理 中的 新建站 点 ,点击后进入管理界面, 其中会看到本系统中的站点模板,不勾选 使用 ,点击 下一步 ,以后的步骤就与前面所 述一致了,例如我们建立了一个站点名为 新手提高 ,文件夹名为 tigao 的站点;

打开 D:upload_files,会看到下图所示,原来的系统目录里面多了一个 tigao 文件夹;

点开 tigao ,如下图 然后将 jingtaiye.rar 中的 css 和 images 文件夹考入 tigao 目录中,如下图: 点开 Template 以及 Template/Content 只能看见 T_系统栏目模板.html 以及 WE MAKE THE WEB WORK T_系统内容模板.html ,这些是一个网站的基本配置,也就是如果没有特殊要求,我们只 需要 T_系统首页模板.html、 T_系统栏目模板.html、 T_系统内容模板.html 三个模板就能建 设一个网站;

点击站点 新手提高 进入该站点的管理界面,

一、添加栏目 点击 栏目管理 ,点击 快速添加 ,为站点 新手提高 添加栏目,栏目以我们下载 的 jingtaiye.rar 中的 栏目设置.xls 为准,如下图: WE MAKE THE WEB WORK 这样的添加方式实现的效果为:在 首页 下面添加了 关于我们 新闻中心 等一 级栏目,以及 公司简介 、 企业文化 、 公司新闻 、 业内新闻 等二级栏目,点击 确定 后栏目结构如下图所示:

二、设置栏目组 在 信息管理 中找到 归类管理 点开,点击进入 栏目组管理 ,点击 添加栏目 组 ,添加一个名称为 主导航 的栏目组,如下图:

三、设置栏目属性 点击 栏目管理 , 点击 关于我们 , 为该栏目设置栏目索引(一般都和栏目名称一样) 以及勾选上 主导航 ,如下图: WE MAKE THE WEB WORK 依次点开其他一级栏目进行同样的设置. (注:a、不要为二级栏目设置这样的属性;

b、 栏目索引一般是和栏目名称是一致的,将来在【channelIndex= 栏目索引 】中用到) .设 置完之后是如下图所示:

四、制作页面模板 在制作模板之前请大家先熟悉一下我们会用到几个语言: : http://help.siteserver.cn/stl/trigger.html : http://help.siteserver.cn/stl/a.html : http://help.siteserver.cn/stl/channels.html {Stl.SiteUrl}: http://help.siteserver.cn/stl/41/286.html : http://help.siteserver.cn/stl/include.html : http://help.siteserver.cn/stl/contents.html : http://help.siteserver.cn/stl/content.html :http://help.siteserver.cn/stl/focusViewer.html :http://help.siteserver.cn/stl/marquee.html :http://help.siteserver.cn/stl/pageContents.html WE MAKE THE WEB WORK 双击打开 jingtaiye.rar 中的 index.html 页,然后右键点击 查看源文件 ,弹 出一个记事本,记事本中的代码为该页面的 html 代码,将代码全部选中,选择 复制 ;

在SiteServer CMS 系统后台 新手提高 站点中找到 显示管理 --- 模板管理 ,点开 系 统首页模板 , 将代码粘贴在 模板文件内容 中, 然后点 修改 ;

用同样的方法将 list.html 的代码粘贴在 系统栏目模板 ,将 info.html 的代码粘贴在 系统内容模板 ;

打开 tigao 站点文件夹,在其中建一个新文件夹 include ,打开后,建两个空文 件,分别为 head.html 和 bottom.html ,如下图: 这两个文件就是包含文件中的 头部 和 尾部 ,因为我们发现这三个静态页的头部 和尾部是一样的,所以,我们将 头部 和 尾部 做成包含文件,将来在所有模板中引用;

打开 Dreamweaver,找到如下图红框所示的部分,这一部分为 tigao 站点文件夹, 我们现在就结合 Dreamweaver 以及 SiteServer CMS 系统来制作页面模板:

1、 制作包含文件(头部文件 head.html) (1)在Dreamweaver 中找到 tigao ,找到 T_系统首页模板 ,双击打开,在代码中找到 下面一段代码,如下图: WE MAKE THE WEB WORK 选中上图红框中以上所有的代码,选择 剪切 ,这段代码就是每一页开头都 一样的代码,即 头部 代码! (注意:a、看清楚上图是从哪里开始剪切的,其中有个明显 的地方是 联系我们 ;

b、是以上所有的代码) ;

(2)在Dreamweaver 中找到 tigao ,点开 include ,双击 head.html ,把上面剪切 下来的代码拷入,点保存! (3)在 head.html 中找到: 在css 前面加上 {Stl.SiteUrl}/ ,如下图: 将 head.html 里面的所有 images 前面加上 {Stl.SiteUrl}/ ,如下图所示: WE MAKE THE WEB WORK 在后面加上 ,如下图所示: 然后找到下面一段代码: 将红框中的代码嵌套进语言后,变成如下图所示: 头部文件 head.html 制作完毕!

2、制作包含文件(尾部文件 bottom.html) WE MAKE THE WEB WORK (1)在Dreamweaver 中找到 tigao ,找到 T_系统首页模板 ,双击打开,在代码中找到 下面一段代码,如下图: 选中上图红框中以下所有的代码,选择 剪切 ,这段代码就是每一页结尾都一 样的代码,即 尾部 代码! (注意:a、看清楚上图是从哪里开始剪切的;

b、是 以下所有的代码) ;

(2)在Dreamweaver 中找到 tigao ,点开 include ,双击 bottom.html ,把上面剪 切下来的代码拷入,点保存! (3)在 bottom.html 中找到:background= images/default_126.gif ,在images 前面 加上 {Stl.SiteUrl}/ ,点保存, 尾部 文件制作完毕!

3、制作系统首页模板(T_系统首页模板.html) (1)在Dreamweaver 中找到 tigao ,点开 T_系统首页模板.html ;

(2)在模板开始和结束分别插入 head.html 、 bottom.html ,这是指在模板中引用 头部 和 尾部 文件.如下图: WE MAKE THE WEB WORK (3)制作 图片新闻 栏目,这个栏目是 新闻中心 栏目中所有内容的集合. 首先在后台给 新闻中心 下面的 公司新闻 业内新闻 两个栏目添加几条测试性 的内容,并任选其中几条内容上传标题图片(注:a、不要给 新闻中心 栏目加内容,而 是给它的下级栏目 公司新闻 业内新闻 添加内容;

b、标题图片格式为 jpg ) .然后 在 T_系统首页模板.html 找到如下图所示的这段代码: 红框中部分将作为一个循环嵌套进语言,嵌套后如下: WE MAKE THE WEB WORK 嵌套完毕后把其他与循环部分相同的代码删掉,以上嵌套完的概念是:将栏目 新闻中 心 (channelInex= 新闻中心 )中所有的下级栏目(scope= All )的内容作为列表在前 台页面输出, 一共显示

6 条(totalNum=

6 ) , 每条标题最多

16 个字 (titleWordNum=

16 ) ;

然后进入后台,点开站点 新手提高 ,点开 生成管理 ,生成首页后点击 新手提高 看 看效果! (4)制作焦点图.这里是栏目 新闻中心 中所有带有标题图片的内容集合以焦点图的形 式显示在前台页面.在之前我们已经为 公司新闻 业内新闻 两个栏目添加了几条测试 性的内容,其中有几条是上传了标题图片的.在 T_系统首页模板.html 找到如下图所示 的这段代码: 将嵌套进去,如下图: 然后打开首页,双击页面看看显示效果! (5)制作 通知公告 . 因为一开始我们在添加栏目时没有这个栏目,所以要在 栏目管理 中添加 通知公告 栏目. WE MAKE THE WEB WORK 进入后台,点击 栏目管理 ? 快速添加 ,添加 通知公告 栏目后,为其设置属 性:为其建立栏目索引 通知公告 ,由于该栏目不在主导航中显示, 故不要勾选 主导航 . 添加完该栏目后为其添加几条测试性内容.然后在 T_系统首页模板.html 找到如下图所 示的这段代码: 嵌........