【云速建站】按照给定模板从0开始编辑网站页面

【摘要】 本文以一个示例网站为模板，用云速建站从0开始一步步编辑网站页面内容。

1      示例网站

这次已示例网站为模板，从零开始编辑建设网页

示例网站地址：http://security-456.view.websiteonline.cn/

2      维护后台数据

登录云速建站console，找到购买的站点后台管理并点击

2-1.png

2.1      维护产品分类

2.1-1.png

添加完分类后，点击保存

2.1-2.png

2.2      添加产品

点击添加产品，填写产品信息后，点击保存，在产品管理处即可看到添加的产品了。

2.2.png

2.3      维护文章分类

2.3.png

2.4      添加文章

与添加产品一样，填写文章信息后点击保存，在文章管理处即可看到添加的文章数据

2.4.png

添加完产品数据和文章数据后，基本的网站数据就有了，现在进入编辑界面编辑网站

3      编辑网站页面

点击站点编辑，进入编辑界面

3-1.png

3.1      上传页面素材

点击上传文件，把准备好的页面图片（主要用到的也是图片）上传到网站后台

3.1.png

3.2      删除原网站页面

把原网站的页面全部删除

3.2-1.png

3.2-2.png

删除后（页面前边带有小房子图标的为首页，是删除不掉的。可以保留首页，然后把页面中的所有控件删除，重新编辑；

或者是新建一个页面把该页面设置为首页，这时原来的首页就会变为非首页就可以删除了。）

3.2-3.png

3.3     创建新页面

点击创建新页面，输入页面名称、先选择不使用底版、开启导航栏可见

3.3-1.png

先把所有页面创建出来，先不编辑，稍后再逐个维护

3.3-2.png

3.4      编辑底版

通过查看页面内容，可以看到页眉、导航栏、导航栏下的大图、右侧的客服是每个页面都有的元素，我们可以把这些放进底版中，

其他页面复用这个底版就可以继承到这些页面元素，减少页面的维护工作量。

3.4-1.png

点击底版管理，切换到底版管理

3.4-2.png

这里，我们新建一个底版页面

3.4-3.png

3.4-4.png

点击创建后，会自动切换到新建的底版页面（红框处显示的页面表示当前编辑的页面）

3.4-5.png

3.4.1        添加页眉

因为页眉有一个全屏的背景色，这个需要用通栏实现，直接找到通栏控件，拖拽到页面中即完成添加通栏的操作

3.4.1-1.png

点击通栏，会出现通栏的编辑菜单，点击属性按钮，维护通栏的背景颜色

3.4.1-2.png

3.4.1-3.png

分别添加图片和文本，维护电话图标和热线电话

3.4.1-4.png

3.4.1-5.png

页眉右侧的设为首页则需要用到“网站书签”插件，把插件拽到页面右上角

3.4.1-6.png

设置完后可以直接点击“X”关闭设置框

3.4.1-7.png

最后的效果

3.4.1-8.png

3.4.2        添加导航栏部分

添加图片和文本

3.4.2-1.png

添加导航栏控件

3.4.2-2.png

导航栏选用默认页面类型

3.4.2-3.png

选择样式6

3.4.2-4.png

然后维护导航栏的样式设置（包括颜色、悬停、宽高等）

3.4.2-5.png

移除背景颜色，开启默认悬停

3.4.2-6.png

把字体颜色改为黑色，选择分割线3，修改分割线颜色

3.4.2-7.png

设置主菜单悬停颜色

3.4.2-8.png

效果如下

3.4.2-9.png

3.4.3        添加大图

同样的，因为是全横屏的图，要使用到通栏

3.4.3-1.png

修改通栏背景图，选择已上传的背景图片

3.4.3-2.png

3.4.3-3.png

添加图中的文本，按钮控件

3.4.3-4.png

设置按钮文本、样式

3.4.3-5.png

设置按钮文本及背景的默认、悬停颜色

3.4.3-6.png

设置按钮链接，链到“联系我们”页面

3.4.3-7.png

3.4.3-8.png

注意：因为按钮是放置在通栏中，两者存在层级关系，如果页面中添加了按钮，但是实际预览时找不到，这时可以点击向上箭头，

把按钮的层级往上调，使按钮层级在通栏之上。

3.4.3-9.png

3.4.4        添加右侧的客服

3.4.4-1.png

3.4.4-2.png

保存后，编辑界面是看不到客服的，只能看到客服的控件文本，需要预览查看

3.4.4-3.png

预览查看浮动客服

3.4.4-4.png

3.4.4-5.png

3.4.5        添加页脚部分

观察可知，页脚元素放置在一个通栏中

添加通栏并设置背景颜色

3.4.5-1.png

添加导航栏并设置颜色、字体、悬停等

值得注意的是这里鼠标移至菜单项时字体会变粗，所以主菜单悬停字体那里需要选择粗体

3.4.5-2.png

添加文本、图片

3.4.5-3.png

黑色背景的圆框可以用“按钮”插件实现，添加后设置一下样式、颜色即可

3.4.5-4.png

右侧这里是文章列表，所以添加一个文章列表在这里

3.4.5-5.png

设置样式

3.4.5-6.png

3.4.5-7.png

添加搜索框

3.4.5-8.png

样式中选择样式6，并设置字体、按钮、文本等

3.4.5-9.png

编辑完底版后，切换到页面管理

3.4.5-10.png

3.4.5-11.png

页面管理下页面都选用“我的底版”

3.4.5-12.png

3.5     编辑产品详情页

创建产品详情页，并使用刚刚维护的“我的底版”

3.5-1.png

添加图片、文本

3.5-2.png

3.5.1        添加产品分类

3.5.1-1.png

3.5.1-2.png

点击设置，选择产品分类，并维护跳转链接。

3.5.1-3.png

然后在样式设置里设置背景颜色、字体颜色、悬停等

3.5.1-4.png

3.5.2        添加产品详情

3.5.2-1.png

3.5.2-2.png

3.6      编辑首页

展开页面管理，点击首页

3.6-1.png

底下这块是页脚区域，先不管，如果是页面空白区域不够了，可以鼠标左键按住页脚区，然后往下拉，扩大页面的空白区域

3.6-2.png

3.6-3.png

3.6.1        添加各个产品分类的图标

鼠标移至图片，图片会变，这个需要用到“图片翻转”插件

3.6.1-1.png

点击增加，并维护图片

3.6.1-2.png

调整图片大小，宽度，悬停效果使用“默认”（悬停效果有多个，可以自行尝试效果）

3.6.1-3.png

3.6.1-4.png

添加图标的跳转链接，确保点击图标可以跳转到产品页并显示该图标的产品

这里每个图标链接设置需要选择图标对应的产品分类

3.6.1-5.png

添加图标下的文本，这里我们需要文本整齐，可以把文本放置在容器中

3.6.1-6.png

3.6.1-7.png

添加完文本后，把容器的背景颜色去掉

3.6.1-8.png

3.6.1-9.png

3.6.2        添加关于我们

很明显，这里也是需要用到了通栏，添加通栏控件并维护背景图

具体步骤可查看2.4.3

3.6.2-1.png

添加图片

3.6.2-2.png

添加的图片可以根据需要缩放，调整到合适的大小

3.6.2-3.png

我们可以借助右上角的对齐功能键把图片居中。先点击选中图片，然后点击右上角的对齐，找到居中

3.6.2-4.png

添加文本

3.6.2-5.png

添加图片，设置图片的跳转链接

3.6.2-6.png

选择跳转到“关于我们”页面

3.6.2-7.png

3.6.3        添加产品展示

一样的，我们使用图片和文本控件，因为3.6.2添加过相同的控件，这里也可以选中3.6.2中的关于我们，然后Ctrl+C、Ctrl+V复制下来。

3.6.3-1.png

接下来是添加一个通栏，在通栏里边添加一个导航栏

调整通栏的背景颜色

3.6.3-2.png

添加一个产品分类到通栏中，并设置样式、跳转链接

3.6.3-3.png

3.6.3-4.png

3.6.3-5.png

添加产品列表

3.6.3-6.png

根据页面设置产品列表的样式

3.6.3-7.png

添加文本框，并给文字添加超链接，使之跳转到产品页

3.6.3-8.png

选中文字后，点击添加超链接

3.6.3-9.png

3.7      编辑关于我们页

切换到关于我们编辑页面

3.7-1.png

添加图片和文本

3.7-2.png

3.7.1        添加图片轮播插件

文本右侧是一个图片轮播，我们去插件-图片特效中找，关于使用哪个插件可以达到效果，这个需要多试几个，

不要害怕添加的插件不对，这都是可以删除重新添加一个新的插件的

3.7.1-1.png

选择样式

3.7.1-2.png

选择轮播图片，由于原页面图片也没有自动轮播，所以这里就不需要把全局设置里边的自动播放勾选，点击保存设置。

3.7.1-3.png

3.7.1-4.png

添加文本

3.7.1-5.png

3.7.2        添加图片翻转插件

添加插件-图片特效-图片翻转

3.7.2-1.png

把4组图片挨个添加进来

3.7.2-2.png

3.7.2-3.png

设置图片的宽度、高度、间距等，使图标对齐

3.7.2-4.png

3.7.2-5.png

图标下边的4个框框可以用文本实现

文本四周的边框可以通过属性-边框，把上下左右的边框都选择实线并把线宽调为1，颜色选择黑色

3.7.2-6.png

3.7.2-7.png

如果这里的4个文本框不好调整水平，可以借助其他控件来调整（如文本、容器）

我们可以添加一个插件-容器到空白处

3.7.2-8.png

把文本框拖至容器中时，会出现一个虚线框表示该文本已经拖进容器中，文本框和下虚线重合，这样4个文本框就处于一个水平线上了。

3.7.2-9.png

再把容器的背景颜色调为白色

3.7.2-10.png

3.7.2-11.png

3.8      编辑产品展示页

切换到产品展示页

3.8-1.png

添加图片和文本

3.8-2.png

3.8.1        添加产品分类

3.8.1-1.png

选择分类，链接选择跳转到产品展示页

3.8.1-2.png

选择样式6

3.8.1-3.png

设置样式（背景色、字体色、悬停色）

3.8.1-4.png

3.8.1-5.png

3.8.1-6.png

3.8.2        添加产品列表

3.8.2-1.png

选择第一个样式

3.8.2-2.png

设置分页

3.8.2-3.png

设置跳转链接

3.8.2-4.png

分类选择本网站的分类（这里因为我的站点还有其他分类，所以勾选一下，正常来说这里使用默认的选择全部分类即可）

3.8.2-5.png

设置图片大小

3.8.2-6.png

样式设置这里，只留下产品名称、产品简介（我是把产品编号那些信息维护到产品简介中，所以此处也把简介勾选）

其他的都把复选框取消勾选，并且维护名称和简介的字体颜色、加粗，间距等

3.8.2-7.png

把搜索栏的复选框都取消勾选，这里不需要

3.8.2-8.png

设置产品列表的背景颜色

3.8.2-9.png

设置图片特效

3.8.2-10.png

3.9      编辑最新动态页

切换到最新动态

3.9-1.png

添加图片和文本

3.9-2.png

3.9.1        添加左侧的文章分类

3.9.1-1.png

选择所有分类，跳转链接暂时不维护

3.9.1-2.png

选择样式6

3.9.1-3.png

样式设置（设置主菜单的分割线、字体、背景色），记得把字体居中显示

3.9.1-4.png

设置主菜单悬停的字体、背景色

3.9.1-5.png

3.9.1-6.png

3.9.2        添加走马灯插件

文章分类下边动态展示产品的，我们可以用插件-走马灯来实现

3.9.2-1.png

设置走马灯

3.9.2-2.png

3.9.2-3.png

3.9.2-4.png

3.9.3        添加文章列表

3.9.3-1.png

设置分页

3.9.3-2.png

分类这里使用默认的全部

3.9.3-3.png

选择样式

3.9.3-4.png

选择置顶文章

3.9.3-5.png

设置【详细】的字体颜色（其他的如分割线，图文间距等可按需求自行设置）

3.9.3-6.png

3.9.3-7.png

3.9.4        维护文章分类、列表的跳转链接

上边我们只是添加了文章分类、列表等，但并没有设置他们的跳转链接，这时点击分类或者是列表中的文章都是不会跳转的。

下面我们开始维护跳转链接。根据示例网站，我们可以看到点击文章后，依然是在最新动态这个页面显示文章详情，

所以文章详情我们需要添加到一个和最新动态页面基本一致的页面上，这时我们可以复制最新动态页，起名为文章详情。

在页面管理下，找到最新动态页，点击后边的复制按钮

3.9.4-1.png

起名为文章详情，上级页面我们选择最新动态

3.9.4-2.png

点击保存后，会自动跳到文章详情页，可以直接编辑该页面。这时点击页面管理可以看到文章详情和最新动态之间的上下级关系。

我们把文章详情关闭导航显示（单击一下眼睛图标，让图标处于闭眼状态）

3.9.4-3.png

删除页面中的文章列表

3.9.4-4.png

3.9.4-5.png

然后我们添加一个文章详情插件

3.9.4-6.png

3.9.4-7.png

切换回最新动态页面

3.9.4-8.png

设置文章分类的跳转链接，根据示例网站，这里选择跳转到最新动态页。这里需要说明的是文章分类选择跳转链接这里，

需要页面中存在文章列表插件才会显示下拉框中。大家也可以新建一个“文章列表”页，把文章列表插件添加到“文章列表”页中，

然后跳转链接这里选择“文章列表”。

3.9.4-9.png

设置文章列表的跳转链接（选择刚才维护的文章详情页）

3.9.4-10.png

3.5.1处页脚中的文章列表未维护链接，在这里已经有文章详情页了，可以把跳转链接补上

3.9.4-11.png

3.10      编辑合作案例页

添加图片和文本

3.10-1.png

添加图片特效插件

3.10-2.png

选择样式

3.10-3.png

添加图片源

3.10-4.png

3.10-5.png

添加图片描述

3.10-6.png

3.10-7.png

接下来的图片翻转及文本框可以参考3.7.2，步骤一样的。

3.10-8.png

3.11      编辑在线咨询页

添加图片和文本

3.11-1.png

3.11.1        添加插件-留言

3.11.1-1.png

字段设置（2先把原字段删除， 3再新增字段）

3.11.1-2.png

3.11.1-3.png

选择样式

3.11.1-4.png

设置默认样式中的字体颜色、边框圆角等，最终如下

3.11.1-5.png

3.11.2        添加图片+按钮控件

留言框右侧是一张图片+一堆按钮控件

3.11.2-1.png

设置按钮的样式、字体并给按钮添加链接

3.11.2-2.png

第10这里是哪个分类的按钮就选择哪个分类

3.11.2-3.png

3.11.2-4.png

下边的图片轮播插件参考3.10

3.11.2-5.png

3.12      编辑联系我们页

添加图片和文本

3.12-1.png

3.12.1        添加按钮+文本+图片

页面中的正圆我们可以用按钮实现，然后在按钮中添加文本和图片，同样的，我们这里也可以使用容器来对齐4个圆圈

3.12.1-1.png

3.12.1-2.png

3.12.1-3.png

设置边框、字体颜色

3.12.1-4.png

然后手动调整一下圆圈的大小

3.12.1-5.png

添加图片和文本

3.12.1-6.png

3.12.1-7.png

3.12.1-8.png

3.12.1-9.png

3.12.1-10.png

3.12.2        添加百度地图插件

3.12.2-1.png

如果不知道所在位置的经纬度，可以点击2链接去获取

3.12.2-2.png

3.12.3        添加通栏+走马灯+文本

改通栏背景颜色

3.12.3-1.png

设置文本

3.12.3-2.png

添加走马灯（具体操作参考3.9.2）

3.12.3-3.png

3.12.3-4.png

云速建站之从0开始.pdf

作者：建站小哥

posted @ 2019-08-28 15:42  华为云官方博客  阅读(627)  评论(0)  编辑  收藏  举报