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

1 示例网站

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

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

2 维护后台数据

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

2.1 维护产品分类

添加完分类后，点击保存

2.2 添加产品

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

2.3 维护文章分类

2.4 添加文章

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

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

3 编辑网站页面

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

3.1 上传页面素材

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

3.2 删除原网站页面

把原网站的页面全部删除

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

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

3.3 创建新页面

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

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

3.4 编辑底版

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

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

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

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

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

3.4.1 添加页眉

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

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

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

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

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

最后的效果

3.4.2 添加导航栏部分

添加图片和文本

添加导航栏控件

导航栏选用默认页面类型

选择样式6

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

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

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

设置主菜单悬停颜色

效果如下

3.4.3 添加大图

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

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

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

设置按钮文本、样式

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

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

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

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

3.4.4 添加右侧的客服

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

预览查看浮动客服

3.4.5 添加页脚部分

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

添加通栏并设置背景颜色

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

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

添加文本、图片

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

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

设置样式

添加搜索框

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

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

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

3.5 编辑产品详情页

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

添加图片、文本

3.5.1 添加产品分类

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

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

3.5.2 添加产品详情

3.6 编辑首页

展开页面管理，点击首页

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

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

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

点击增加，并维护图片

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

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

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

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

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

3.6.2 添加关于我们

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

具体步骤可查看2.4.3

添加图片

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

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

添加文本

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

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

3.6.3 添加产品展示

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

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

调整通栏的背景颜色

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

添加产品列表

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

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

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

3.7 编辑关于我们页

切换到关于我们编辑页面

添加图片和文本

3.7.1 添加图片轮播插件

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

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

选择样式

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

添加文本

3.7.2 添加图片翻转插件

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

把4组图片挨个添加进来

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

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

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

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

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

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

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

3.8 编辑产品展示页

切换到产品展示页

添加图片和文本

3.8.1 添加产品分类

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

选择样式6

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

3.8.2 添加产品列表

选择第一个样式

设置分页

设置跳转链接

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

设置图片大小

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

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

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

设置产品列表的背景颜色

设置图片特效

3.9 编辑最新动态页

切换到最新动态

添加图片和文本

3.9.1 添加左侧的文章分类

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

选择样式6

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

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

3.9.2 添加走马灯插件

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

设置走马灯

3.9.3 添加文章列表

设置分页

分类这里使用默认的全部

选择样式

选择置顶文章

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

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

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

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

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

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

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

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

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

删除页面中的文章列表

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

切换回最新动态页面

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

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

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

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

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

3.10 编辑合作案例页

添加图片和文本

添加图片特效插件

选择样式

添加图片源

添加图片描述

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

3.11 编辑在线咨询页

添加图片和文本

3.11.1 添加插件-留言

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

选择样式

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

3.11.2 添加图片+按钮控件

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

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

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

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

3.12 编辑联系我们页

添加图片和文本

3.12.1 添加按钮+文本+图片

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

设置边框、字体颜色

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

添加图片和文本

3.12.2 添加百度地图插件

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

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

改通栏背景颜色

设置文本

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

云速建站之从0开始.pdf

作者：建站小哥

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

【云速建站】文件专题（上传、下载、管理）
[摘要] 本章介绍后台文件的管理及使用,包括上传和下载文件,使用外部存储保存大型文件(视频.超大文档等)并通过外链形式链接到网站中使用. 1 站点配额以入门版站点为例,说一下站点的配额 1 ...
云图说丨初识云速建站服务
摘要:云速建站服务是一款帮助您搭建网站的华为云服务. 本文分享自华为云社区<[云图说]第252期初识云速建站服务>,作者:阅识风云. 云速建站服务(Cloud Site-building ...
【云速建站】表单应用
[摘要] 云速建站的留言插件是网站唯一一个表单类插件,留言插件的字段类型有下拉框,单复选,文本框,图片上传,三级联动,日期等,通过这些不同类型字段的组合,可以实现多样化的表单功能.本篇重点介绍留言插件 ...
【云速建站】购买前的指导
1.哪一个版本适合我? 版本主要能力举例入门版-单PC 作为最入门版本,仅支持PC网站,没有手机和微信公众号维护功能. 信息发布,子网站入门版-三合一用于展示型网站.以图文展示为主,页面展示 ...
云速建站：购买前的指导
1.哪一个版本适合我? 版本主要能力举例入门版-单PC 作为最入门版本,仅支持PC网站,没有手机和微信公众号维护功能. 信息发布,子网站入门版-三合一用于展示型网站.以图文展示为主,页面展示 ...
【云速建站】后台数据批量导入导出
[摘要] 主要分享了云速建站后台管理的批量导入数据操作方法,如产品分类.产品.淘宝在售产品等的批量导入 1 产品分类的导入导出 1.1 进入后台管理首先登录云速建站控制台,进入后台管理-产 ...
【云速建站】让你轻轻松松建立属于自己的网店
[摘要] 通过使用华为云云速建站,轻松创建网店,大家快来一起体验吧. 1 控制台订购 1.1 购买站点/模板首先我们需要购买一个站点,如果还未注册华为云,还要先注册成为华为云用户 ...
【云速建站】一键生成手机页
[摘要]在开始前,需要说明一点,PC站和手机站的编辑是分离的,即PC站的页面编辑后,不会自动同步到手机站,如果手机站也需要PC站相同的编辑效果,是需要给手机站进行同样的编辑设置才可以的.本文是以未购买 ...
【云速建站】底版的创建和使用
[摘要] 建站底版可以节省相同的页面元素维护的工作量,设计一次多次使用. 更新了页面插件闪退或失效解决方法(主要针对从底版继承的插件失效问题) 1.1 进入站点编辑界面 1.2 切换到底版管理 1 ...

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

1 示例网站

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

2 维护后台数据

2.1 维护产品分类

2.2 添加产品

2.3 维护文章分类

2.4 添加文章

3 编辑网站页面

3.1 上传页面素材

3.2 删除原网站页面

3.3 创建新页面

3.4 编辑底版

3.4.1 添加页眉

3.4.2 添加导航栏部分

3.4.3 添加大图

3.4.4 添加右侧的客服

3.4.5 添加页脚部分

3.5 编辑产品详情页

3.5.1 添加产品分类

3.5.2 添加产品详情

3.6 编辑首页

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

3.6.2 添加关于我们

3.6.3 添加产品展示

3.7 编辑关于我们页

3.7.1 添加图片轮播插件

3.7.2 添加图片翻转插件

3.8 编辑产品展示页

3.8.1 添加产品分类

3.8.2 添加产品列表

3.9 编辑最新动态页

3.9.1 添加左侧的文章分类

3.9.2 添加走马灯插件

3.9.3 添加文章列表

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

3.10 编辑合作案例页

3.11 编辑在线咨询页

3.11.1 添加插件-留言

3.11.2 添加图片+按钮控件

3.12 编辑联系我们页

3.12.1 添加按钮+文本+图片

3.12.2 添加百度地图插件

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

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

最新文章

热门文章