WebPlus网站群平台操作指南—进阶篇

上一篇文章中介绍了站群的基本操作方法和一些需要注意的地方，本篇整理一些比较复杂的操作。

如何调整原始模板

通常，拿到一个默认模版后，结构会比较混乱。所以我们应该想办法把它调整得协调一些。

调整的思路其实是多样的，要根据实际的模板情况灵活运用。有冗余模块则去掉，有缺失模块则添加，如果出现样式问题则开审查调试样式。不过这里仍给出一个一般的操作顺序供以参考。

删除

第一步是删除。首先将模板中无用的模块或冗余的模块删除。

注意：请提前备份好删除之前的模版，因为删除操作是无法撤销的。

例如，站群默认设置的站点logo存在一些问题，我们需要把这个模块删掉，后期换上自制的logo。只需要点击模块右上角的叉号，在弹出框中点击确定后即可删除。

如果因遇到未知原因导致模块无法删除的，可以考虑在本地删除相应代码。

作为内嵌模块的代码有这样的一个规律，它们的最根层的div含有一个frag="窗口xx"的属性。如果要对模块进行修改，改动这些地方的代码即可。

对模块内部元素的直接CSS修改是有可能不生效的，如果有对模块的CSS修改需求，建议在预览界面使用审查定位到具体的CSS元素。

增加

经过一番删除之后，现在的模板应该是一种比较干净的状态。接下来就可以在上面增加内容了。

提示：在编辑界面看到的结构可能是显示不正常的，尽管预览时一切正常。这是站群的一个缺陷。

点击右上角的设计按钮，可以看到整个页面的大概布局。在这个页面点击配置按钮即可返回编辑界面。

如果出现拖动模块报错的情况，类似下图，此时考虑清除模块配置或者直接点进编辑查看是否已经存在需要的模块。

注意：诸如导航栏等三个页面都会有的模块，应该在三个页面模板中都做出相应的修改。不能仅修改main.htm。

添加导航菜单

添加导航菜单时，先查看站点下的目录是否齐全，如果目录不全则先切换到栏目管理增加相应栏目。不要忘记同时添加栏目下的子栏目。顺序是不重要的，因为在添加时会以手动选择的顺序为主。

将导航菜单模块拖动至导航栏所在的模块，即弹出配置页面。按照原型图的顺序依次点入即可。

添加新闻列表

与添加导航菜单的操作类似，还是需要先拖动导航菜单模块到相应区域。当然，如果该区域已经有了导航菜单模块可以直接点击进入配置。

点击某一个栏目选择导入，该新闻列表就会展示此栏目下的文章标题。

提示：如果你选择了多个栏目，在导入时会增加一个虚拟目录存放整合的信息，该虚拟目录不会在列表中显示。使用这个操作也可以做到信息聚合的作用。

内容定义配置完毕后，有时还需要在展示配置中调整其他信息。

箭头所示的选项为平时修改频率较高的选项。窗口标题按照具体需求修改，显示条数需要根据实际显示效果确定，太多或太少都会不协调。标题长度默认为15字符，但是在有些比较宽的列表中太短的标题长度会导致右边有大量留白，此时可以考虑将标题长度适当加长，或直接改为-1（无限制）。More图标有些老师会要求去掉，在设置中修改选项就可以。

注意：如果标题长度限制过长导致有些标题变成了两行显示，这一般是不被允许的，要考虑把显示长度调短一些。

添加轮播大图

轮播图模块的名称叫多图交替，一般位于导航栏正下方。对轮播图的修改一般是以尺寸和显示内容为主。有些模板会自定义好轮播图的样式，所以不需要我们去过多改动。

轮播图的本质其实仍然是一个新闻列表。播放的图片为文章的封面图。在基础篇中有提到过一个操作是，建立一篇只有图片的文章，放入轮播栏目内，即可完成单图片显示。如果需要轮播图点击进入具体文章，则简单修改即可。

展示方式中有两个是需要着重注意的。

与新闻列表类似，显示条数也要按照具体需求改动。缩略图的显示尺寸是需要重点考虑的问题。通常的，如果要做宽屏的大轮播，需要把显示模式改为指定高度。固定宽度的显示方式对多尺寸显示非常不友好，在制作响应式布局时会带来麻烦。

注意：在改为指定宽度或指定高度模式时，未指定的参数会继承原来的设置。所以有时候你需要手动把宽高度按当前分辨率改好后再修改设置，这是站群的一个缺陷。通常内容主体部分的宽度为1200px，这或许是一个有借鉴意义的参考值。

调整

将模块基本设置完毕后，接下来的任务是对页面的样式进行调整。

这可能会是一个漫长而又繁琐的过程。既需要按照原型图和需求去改，又要参照设计的基本原则。需要不断地重复这样的一个操作：把模板下载到本地，使用dw修改后再打包上传，在预览中调试页面并做出修改。这样来回几次后，直到基本满意，才算结束。

注意：假如在某次操作后改动了模块内容，则必须要以当前最新改动的版本为基础进行修改，否则会修改掉对模块的设置。此时的下载请选择模板，配置及内容项。

假如我要对这个导航栏做出改动：

现在这个模块有什么问题？

1. 它不够居中
2. 按照需求，要把它的主题色变成蓝色

接下来我们一点一点的尝试解决这两个问题。打开审查元素，定位到问题元素所在位置，分析此处代码。

可以发现，该元素通过设定外边距来保持与相邻元素之间的间距。目前的左右间距为23px，但是这太小了。经过简单调试后，发现在36px时是可以正常显示的。

但是在审查中修改的元素只能临时生效，想要保存这个修改要怎么办？看到这里：

这表示，当前选择器位于style.css的第91行，那么我们只需要在dw里跟踪到这个位置，并将修改同步，就可以了。

然后再来解决颜色的问题。首先定位到某一个选项，发现在这个选项的代码中没有对颜色的设置，所以我们一级一级的向上寻找，直到找到可以修改颜色的代码段为止。

最终我们定位到这个元素：

那么问题来了，这个颜色要修改成什么呢？为了保持与原模板的风格相似度，我选择改动为原海洋学院模板的主体颜色。打开现在的海洋学院网站，使用审查元素或吸色工具获取主体颜色。另外，注意到在footer部分也有同样的颜色配置，所以建议在替换时将那些颜色同时换掉。

然而，仍然有一些颜色我们没有修改，这仍然会影响用户体验。注意看下图：

鼠标浮动上去之后的显示颜色仍然是红色。要修改这个显示样式，仍然需要定位到控制它的CSS。

hover型元素是无法直接聚焦到的，但是在开启审查元素面板时鼠标浮动会让控制此样式的代码显示出来。这样只需要按照相同的方式修改属性就可以。

提示：直接点击右上角的示踪标记可以进入审查元素中的CSS编辑界面，hover元素鼠标移开代码就会在审查中消失，但是可以根据记忆在原CSS中进入所在位置修改，效果相同。

修改完成的示例：

经过这样几番调整之后，你就可以把当前的本地文件夹打包成zip文件，上传到站群系统中了。之后再按照需求对其余的模块进行调试，直到基本满足效果。

解决显示bug

由于模板与模板之间不相同的特性，显示bug的类型非常繁杂，并且有可能并非是看到的错误。在模板显示出现问题时，可以往两个方向去思考。

第一个方向是由于出错位置本身的设置问题导致的错误，比如因为边距过大导致的导航栏折行bug。这种类型比较好办，只需要将出错位置直接定位修改即可。第二个方向是由于其他元素的设置问题导致原本显示正常的模块显示不正常。比如下图这种显示错位问题，看似是导航栏折行导致的显示错位，但是无论怎么修改导航栏都无法让显示变为正常。最后经过排查发现，是父级元素的宽度太窄，将其改大一些一切变回正常。

当显示出现问题时，仍然可以选用上面那种一级一级向上排查的方法，考虑到所有可能的问题所在，比如边距，长宽等。耐心查错总能发现问题。

高度自定义页面

响应式布局

对一些模板原生支持响应式，且需求需要适应移动端显示时，需要考虑响应式布局。这里我们以招生办公室主页为例。

上图为最常见的宽屏PC端，旧式4:3屏幕上的显示是基本一致的，只是两边留白小了一些。

上图为pad端，在本模板中结构与手机端是一致的。

上图为手机端。手机端由于机型繁杂多样，尺寸也可能不尽相同。在设计的时候我们可以仅以几种机型为例测试，可以直接使用Chrome调试中默认的iPhone尺寸作为调试基础，基本显示正常的话即可认为它能适应大部分机型。实际上，Android机型的尺寸和iPhone机型的尺寸大多是基本相同的，所以完全可以按照机型更少的iPhone端来进行测试，会方便一些。

以Responsive模式下进行的调试是可以任意改变屏幕尺寸的宽高的。这种方式比较灵活但也有它自己的局限性。在这个模式下，由于尺寸改变导致的显示bug，有可能并不是实际的显示bug，原因很简单，实际的设备并不会随意改变自己的尺寸。倒不如设定好某个尺寸后刷新一下页面，让它在这个尺寸下重新加载，这样看到的才是接近真实的效果。

在网页模板中，通常会留有独立出来的响应式设置CSS，比如media.css或responsive.css，建议将响应式代码写在这种专门的CSS里面，也是为了后续维护方便。

提示：由于解析顺序不同，响应式CSS应当在主CSS之后再进行引入，不然会导致响应式设置无效。

要考虑到因为响应式设置造成的结构改变可能带来的问题，诸如显示错位等问题是非常常见的。仍然需要耐心修改并仔细调试。尽管并不要求模板能在任何的宽高尺寸下都可以显示正常，但必须要保证在主流分辨率下它是可以正常显示的。可以借助dw中的预览显示帮助确定响应式范围。

上图红框中每一个标记都代表代码中有一个此种范围的媒体查询，在不同的范围之内存在着不同的样式设置。这也许能比较直观的帮助你调试。

不要忘记真机测试

这是我个人的一点经验之谈，写在这里供给大家参考。在实际的开发中，我偶然发现到，预览的真机界面和实际的真机界面有时仍然是略有差距的，这不仅与机型相关，还与用户所使用的浏览器相关。在电脑端模拟上看似结构完整的，在真机上可能就会因为浏览器默认设置或尺寸的细微差异而导致结构错位。这就需要我们在设计响应式布局时要尽量设计的更能适应更多的尺寸条件，简单来说，不去强求，但尽量做到。

嵌入自定义结构

有时候，站群提供的模块并不能满足全部的需求。比如招生办公室页面中专业介绍的菜单：

新教务处（开发中）的快捷入口：

甚至头部的logo都是自定义结构：

这些站群中没有的结构只能依靠自己开发完成。拥有良好的盒模型构建基础的话写出这样的结构并不是一件困难的事情。需要注意的是代码块编写的位置和响应式。尽量不要把代码块放在模块里面，这可能会造成一些未知的结果，在编写之前最好明确一下页面的结构，确定好这块代码是要放在哪里和哪里之间。同时要考虑到的问题是，新加入的模块有可能破坏了原有的结构布局，比如依靠绝对定位的模块会出现高度“变矮”而表现出一种“穿模”的现象。此时需要改动一些CSS以适应新加入的模块。此外，如果引入了一些其他的框架库，可能会导致由于它的全局设置而改变了其他原本正常元素的显示方式。

专业介绍列表中我使用了bootstrap的流式网格布局，但引入bootstrap导致了原本显示正常的页面出现了一些其他问题，后来我选择保留该模块，手动修复那些因引入bootstrap而导致显示错位的问题。

自定义结构与站群模块的混合

实际上，站群的每一个目录建立好之后，进入它的链接也随之固定了。只需要掌握了链接生成的规律就能将进入某个模块的入口混合到自定义结构当中。

首先要明确要制作的页面的域名是什么，链接的地址必须是在那个域名之下。实际上，在调试的时候，显示的地址和实际的地址是不一样的。

尽管都是招生办公室的主页，但是域名不一样，也就说明它们是不一样的页面。以webplus.qlu.edu.cn打头的地址是调试地址，链接模块时不能以这个为准，会造成打不开的现象。

我们任意点进一个二级页面，看它的地址是：

接下来发挥合理作死精神，把可疑的2909换成2910试试？奇怪的事情发生了：

它变成了下一个栏目。为什么会这样呢？我们进入栏目管理，就可以发现真相：

没错，起作用的是这个虚拟目录。我们只需要知道相对应的虚拟目录就可以进入到该列表中。有多级目录的话也是同理。

提示：链接可以最短简化成下图这样。

现在你就可以把一些栏目的链接通过此种方法找到，并写在自定义结构下的超链接中了。该操作的反向操作比较简单，即为在目录中添加外链，该部分已在基础篇有过讲解。

信息采集与一键扒站

本部分操作官方文档解释的很详细，这里将它们转载来。

信息采集

信息采集工具是针对互联网页面的源代码进行一定的人工分析，获取唯一规则后，由服务器端进行访问获取文章的标题，内容，发布时间，浏览次数等信息。站群中，只有站点管理员和系统管理员才拥有信息采集权限。简单来讲就是把一些非站群页面中的文章列表和正文通过一种类似于爬虫的东西全部爬进来，一般用于将非站群页面的网站转换到站群页面来。现在这样的需求应该比较少了。

详情请参考http://pro.webplus.net.cn/_s80/xxcj/list.psp

一键扒站

用于把别的网站的页面转化成站群可用的模板，需要对页面结构比较熟悉，而且扒下来后可能会有很多bug需要修复。

详情请参考http://121.40.124.129/_s80/59/19/c1236a22809/page.psp