WebPlus网站群平台操作指南—初级篇

网站群平台是我校用于维护官网页面的集成工具，尽管系统相对老旧一些，但仍然能完成完整的站点建设工作。为了方便后续同学的维护工作，提升学习效率，我将一些基本操作整理了下来，方便同学们查询阅读。

写在前面

站群的操作几乎完全是前端方面的内容，基于模板+模块的形式，在模板内更改网站基本样式，在模块里设置具体显示内容。学校站点并不是不需要后端，而是后端被站群系统以图形化形式集成在了管理界面中。

对页面的调试可能是一个漫长而又繁琐的工作，请保持有充分的耐心。如果遇到实在无法完成的需求，请记得及时向老师或学长学姐联系。

在开始之前，你需要基本掌握以下内容：

• HTML/CSS语法基础，盒模型布局理论，响应式布局理论
• Adobe Dreamweaver的基本操作方法
• Adobe Photoshop的基本操作方法
• 在主流浏览器（如Chrome，Firefox等）使用审查元素调试页面的能力
• 校内VPN的使用方法（如果你在校外）

本文默认你已经基本学会了这些内容，这里不会对这些内容做出过多提及。那么，我们开始吧。

起步

登录学校站群系统需要校园网环境，如果不使用校园网的话是无法进入系统的。如果要在校外使用此系统，需要连接校内VPN。

打开http://webplus.qlu.edu.cn/，输入老师提供的账号密码，即可进入后台。如果是系统管理员的话，第一次进入的页面应该是这样：

这里是整个网站的后台设置，一般来说我们是不需要动这里的内容的，而且有些操作比较敏感，不慎操作容易造成事故。如果要修改某个具体页面的话，要在右上角的搜索框中进入要修改的页面。

搜索框内有下拉菜单，可以看到全部的院系页面分布。

如果你登录的是某个学院或者部门的分账号，则应该会直接进入对应的后台。

这里我们以学校教务处的页面为例。

在搜索框内可以搜索到对应页面，点击进入就能进入教务处后台。

有3个功能是我们最常使用的，这里对它们进行一些简单的介绍。

模板管理

这里是模板管理的界面，在这里可以查看模板的目录结构，修改模板内容，更改资源或更改代码。通常的，当我们需要修改页面上的结构或显示方式时，会用到这里的功能。

我们来简单说一下会用到的地方。

整体模板管理

操作现有模板

这个模块是用来管理模板整体的，可以在多个模板之间切换，也可以上传新模板。默认模板为网站上线后默认展示的模板。点击左右两边的箭头按钮可以滚动查看不同的模板。在你进行修改工作时，一定要记清楚自己修改的是哪一个模板，避免出现修改混淆的情况。

当你要下载某一个模板到本地进行修改时，就点击这个下载按钮。

下载选项有三个，分别是仅模板，模板及配置，模板、配置及内容项。通常的，如果你要把某个网站的模板提取出来构建一个新网站的话，就选择仅模板，如果你要在已经配置好的模板上进行改动时，最好选择模板、配置及内容项，这样在上传之后不需要重新配置模块展示的内容。

当你要在现有的模板上覆盖上传时，就要点击这个修改按钮。

在这里可以上传本地已经改好并且压缩完毕的模板包，模板包规则如图所示。下面的模板名称，模板语言等默认不用修改，而模板状态和生成静态页面这两个按钮需要点击成启用才可以使用。本图演示的模板为默认模板，模板状态和生成静态页面是强制开启的，所以无法修改。非默认模板这两个按钮是可以点击修改的。

创建新模板

要新建一个模板也是很简单的，只要点击此栏的“创建新模板”即可。创建新模板可以通过本地上传，也可以调取在线模板。

如果需要自己建立模板，可以在模板库中寻找模板进行创建。如果有提供的模板，则使用本地上传即可。

模板目录结构

结构概览

在站群系统中，所有的模板都是按照多级页面的结构来整体划分的。所以必须包含一级页面main.htm，二级页面listcolunm.htm还有三级页面displayinfo.htm这三个文件，它们的文件名是不可以被修改的。通过名字不难看出，一级页面便是我们通常所说的站点主页，二级页面为栏目模块的文章列表页，三级页面为文章正文页。这三个文件之外的文件便是页面需要的资源文件，比如要显示的图片，使用的CSS文件和JS文件等。一些比较小型的页面会将图片文件，CSS文件和JS文件放在同级目录下，但也会有一些比较复杂的页面将它们进行分类。

提示：在某栏目下只有一篇文章时，二级页面将直接显示正文。

常用操作

对文件的操作通常有三种，这里简单一一介绍一下。

首先是源代码编辑按钮，点击后可以直接在站群系统内编辑代码文件，但除非临时修改或其他极端情况（如上传无效），一般不建议从这里对代码进行修改。这里的修改界面没有语法高亮，没有缩进，排版等提示，非常不方便使用，只能当作一个备用的解决方案使用。

中间的这个是模板配置按钮，点击后可以进入该页面的模板配置界面。该界面是配置模块等内容的核心界面，在后面的章节中将对它进行详细讲解。

最右边这个放大镜按钮为预览按钮，可以对该模板进行一个整体的预览，在这里显示的效果即为实际上线后显示的效果，通常会在这里打开审查对页面进行调试，修改存在的问题。该界面是调试页面的核心界面，在后面的章节中将对它进行详细讲解。

栏目管理

栏目管理负责文件目录的增删改，每个目录都可以作为显示内容的载体，当需要建立某些栏目的时候，需要打开它的父级目录显示的列表，才能建立到正确的位置。

简单来说，这里的根目录是教务处，诸如教务处首页、教务管理、学籍管理等目录是在根目录下面。如果要建立一个与学籍管理相同层次的栏目，则需要点击教务处目录，再新建。如果点击学籍管理目录去新建栏目的话，它就会变成学籍管理目录下的子栏目。

对栏目的具体操作界面是这样的：

增加与修改

默认情况下，增加栏目只需要写个名字就好。要注意同级目录下名字是不可以重复的。修改同理。

高级属性

高级属性中用到较多的为图中的三个选项。

导航栏中一般放置的是栏目，如果想让某个栏目直接链接到比如学校主页等特定页面的话，就需要使用外链功能。打开方式为当前窗口和新窗口两个方式。默认为当前窗口打开。如果需要新窗口打开则在这里调整。子栏目排序可以调整栏目的排列顺序，有新建在后和新建在前两个选项，如果有修改需求请在这里修改，如无则可以不动。

列表显示配置

在一些需要显示缩略图列表的场合需要用到这个功能。举例说明：

这里的列表带有了缩略图，并且是多列显示。其显示方式便是由列表显示配置修改而成。

可以很明显的看到，这里的显示为图片列表，行列布局为4行2列。缩略图的尺寸也是可以固定的。

注意：该布局模式并非现代化布局，使用的是不支持响应式的table，如果需要做到适应性布局建议使用overflow: scroll;限制区域。

文档管理

文档管理负责的是三级页面中的内容，即文章正文。很多时候我们并不需要帮助撰写文章，这些文章都会由负责相关页面的老师编辑发布。但有时候是需要我们帮助发布一些文章的。这时候就需要用到这里的功能。

增加与修改

点击增加或者修改，可以弹出这样的一个编辑界面。

和一般的word用起来区别不太大，如果老师给了word文档直接全选复制粘贴就能解决问题。可以通过预览查看展示效果，如果展示有问题则根据实际情况修改即可。完成的文章会处于定稿状态，还不会立即发布。需要点击发布才可以直接发布文章。默认发布文章以时间最新排序。

提示：在文中上传的第一张图片会被默认为封面图，这在轮播图等图片展示组件内会被展示。所以有些轮播图可以使用正文内仅放一张图片来当作内容。

多栏发布

多栏发布一般用于这样的需求：

有多个栏目下拥有“通知公告”子栏目，现在想要在首页建立一个栏目，可以将这些通知公告聚合起来展示。

当然，手动操作是完全ok的，但如果文章数量很多，工作量可想而知。

多栏发布可以用于将多个栏目下的文章整合起来到一个栏目下，进行一个信息的聚合，方便展示。只要选中一个或多个文章，点击多栏发布，再点击要发布到的栏目，就可以了。

提示：有多栏发布信息的目录文件夹会变成蓝色。

调试与改动

在拿到一份修改需求后，我应该怎么做？

简单来讲就是所见即所得，需要什么就做出什么。需要开栏目我就开栏目，需要加文章我就加文章。如果需要动结构或者模块，则需要慢慢调试。

增加模块

以这个页面为例，它的结构非常简单明了，在header下面有一个导航栏，导航栏下面是大轮播图，中间的“教学服务”等板块为自定义内容，下面是新闻列表。

上方的选择菜单是可供选用的模块形式。由于模板已经基本写好了对应模块的CSS，所以这个大可不必太过担心，如果有显示问题再慢慢调整就可以。

最常用的三个模块是新闻列表，导航菜单和多图交替。新闻列表用于显示一切列举菜单的东西，包括各种形式的信息展示，点击进去是正文。而导航菜单一般用于显示目录列表，一般用于页面头部，点击进去是二级菜单。如果需要增加某个模块，只要把模块拖进相应的位置就可以。

提示：当你拖动模块到一个已经有内容的模块上时有可能会报错，此时可以先清除模块配置再拖动进去。

改动模块

当你把鼠标移动到某个模块上时，会出现一系列可选操作。这里目前只介绍修改和清除。

点击这里可以对板块的内容进行修改。

不同的板块其设置内容也不尽相同。以新闻列表为例，可以设置的内容有以上这些。诸如标题，显示条数，打开方式，标题长度，发布时间等样式可以在这里设置。

在内容定义中可以添加目录，如果是新闻列表的话则会直接显示当前目录下的文章标题列表。如果是导航菜单的话会显示当前目录下的子目录列表。

一般来说，首先需要将模板下载到本地，用dw打开，在页面预览上使用审查排查可能存在的问题，或根据老师的需求修改样式。需要看的地方都有哪些呢？

• 板块之间有没有不协调的位置，比如导航栏有没有被折成两行
• 模块有没有因为尺寸不合适越出应该出现的位置，此时需要改动一下模块的设置
• 样式有没有不协调的地方，有的话应该去修改对应的CSS
• 在移动端显示时有没有显示不正常，有的话应该要去修改

清除模块配置

如果这个模块出现了设置问题，或者需要换入新模块，则需要清除模块配置。

提示：该操作不可逆，请谨慎使用。

调试页面

页面调试是一个很难仔细去讲的过程。因为不同页面之间的修改需求是不一样的，也需要随机应变的去修改一些属性。不过要相信的是，所有的样式问题都能找到它根本的设置问题。可以从审查中直接定位到出现问题的位置，再去排查。假如某个元素的显示不正常，但是这个元素没有相应的设置，这时候需要在审查里一级一级的向上跳着看他的父级元素是不是哪里设置出了问题，然后改参数或者加属性调整，直到满意后从dw里把刚才的修改实装一下。

简单来说，实践出真知。多调试总会找到调试的窍门。

如果某个属性是定死在标签里面的，或者页面一动就会又变回来，那大概率这个属性是通过模块或者JS代码修改的。这样的操作起来就有一点麻烦。对于这样的情况，在之后的篇章中再继续讨论。

危险操作

要注意，有些操作是没有撤销的。

比如在模块编辑时对模块的改动，以及覆盖上传模版，对栏目的修改，对文章的修改，有很多的操作无法进行撤销，如果出现了模块丢失或文章丢失，处理起来会比较麻烦。所以这里建议下手时一定要多加小心，对不清楚是否可以回退的操作一定要提前做好备份，以防万一。

一定要做好备份，一定要做好备份，一定要做好备份！