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

article/2025/6/10 0:27:17

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

1 示例网站

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

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

2 维护后台数据

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

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 上传页面素材

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

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

作者：建站小哥

http://chatgpt.dhexx.cn/article/poJMDTIw.shtml

相关文章

【云速建站】让你轻轻松松建立属于自己的网店

【云速建站】让你轻轻松松建立属于自己的网店

【摘要】通过使用华为云云速建站，轻松创建网店，大家快来一起体验吧。 1 控制台订购 1.1 购买站点/模板首先我们需要购买一个站点，如果还未注册华为云，还要先注册成为华为云用户。链接https://console.huaweicloud.…

阅读更多...

【云速建站】表单应用

【云速建站】表单应用

【摘要】云速建站的留言插件是网站唯一一个表单类插件，留言插件的字段类型有下拉框，单复选，文本框，图片上传，三级联动，日期等，通过这些不同类型字段的组合，可以实现多样化的表单功能…

阅读更多...

【云速建站】文件专题（上传、下载、管理）

【云速建站】文件专题（上传、下载、管理）

【摘要】本章介绍后台文件的管理及使用，包括上传和下载文件，使用外部存储保存大型文件（视频、超大文档等）并通过外链形式链接到网站中使用。 1 站点配额以入门版站点为例，说一下站点的配额 1.1 华为云空…

阅读更多...

【云速建站】后台配置邮费

【云速建站】后台配置邮费

【摘要】介绍后台配送费用的设置本章主要是介绍一下云速建站后台配置运费的相关事项。 1 进入后台管理登录云速建站控制台，点击后台登录 2 维护快递公司数据 3 设置运费点击电子商务设置-配送设置 3.1 设置免邮添加免邮配送方式支持…

阅读更多...

【云速建站】网站备份

【云速建站】网站备份

【摘要】在编辑网站的过程中，勤备份是有益无害的，备份操作也不复杂麻烦。通过备份我们可以恢复到创建该备份时的网站页面。在编辑网站页面时，常做保存备份，对于因意外情况需要重新编辑，或者是觉得当前编辑不好&…

阅读更多...

【云速建站】底版的创建和使用

【云速建站】底版的创建和使用

【摘要】建站底版可以节省相同的页面元素维护的工作量，设计一次多次使用。更新了页面插件闪退或失效解决方法（主要针对从底版继承的插件失效问题） 1.1 进入站点编辑界面 1.2 切换到底版管理 1.3 创建新底版 1.4 编辑底版 1.5 使用底版…

阅读更多...

云图说丨初识云速建站服务

云图说丨初识云速建站服务

摘要：云速建站服务是一款帮助您搭建网站的华为云服务。本文分享自华为云社区《【云图说】第252期初识云速建站服务》，作者：阅识风云。云速建站服务（Cloud Site-building Service）是一款帮助您搭建网站的华为云服务…

阅读更多...

【云速建站】关于企业版的几点说明

【云速建站】关于企业版的几点说明

【摘要】企业版是云速建站用户网站升级的选择之一，它具有独立的带宽和IP，提供更强的抗干扰能力。更因为具有独立IP，它将可配合CDN，WAF等其他云服务。为后期网站做大做强提供了基础保证。本文参考一篇网文“使用独立ip的主机对网站…

阅读更多...

【云速建站】视频播放专题

【云速建站】视频播放专题

【摘要】本文将逐一演示云速建站支持的几种视频添加方式。关于视频播放，首先要明确的是出于考虑网站访问用户体验的原因，云速建站上传的文件种类和大小是有限制的。且不支持视频直接上传到建站空间。视频需要使用外部链接的方式添加。如添加优酷视频…

阅读更多...

【云速建站】模板的购买及使用

【云速建站】模板的购买及使用

【摘要】本章介绍模板的购买、使用以及注意事项首先不用多说，我们需要登录云速建站控制台 1.1 关于模板首先我们要明白一点：模板不是云建站的必须品。如果可以花几天时间专门用来熟悉后台编辑，完全可以不用模板自己做出一个比较不错…

阅读更多...

【云速建站】域名配置指导

【云速建站】域名配置指导

【摘要】云速建站域名绑定演示，绑定时可能出现的常见问题，如域名打不开，403错误等内容包括【支持三种场景域名配置】【网站打不开？配置域名问题三步自检】【其他可能遇见的问题】【空主机记录域名配置】【企业版域名配置说明】…

阅读更多...

【云速建站】几个基本概念和流程解释

【云速建站】几个基本概念和流程解释

【摘要】本文对一些经常被问到的概念采用图文流程的方式解释，希望帮助云速建站的用户了解到一些常见疑问内容包括：域名支持几种配置？模版安装是否会影响数据？云空间怎么访问？建站五合一指的什么？网站如何…

阅读更多...

【华为云技术分享】快速搭建网站之云速建站

【华为云技术分享】快速搭建网站之云速建站

随着互联网的普及，目前已有85%的用户通过搜索引擎寻找产品或服务，越来越多的中小企业及个人意识到搭建网站，小程序等进行宣传，推广以及销售的重要性，如何低门槛快速搭建自己的网站成了众多中小企业和个人关心的重点&am…

阅读更多...

mysql数据库培训感受_聊聊MySQL数据库的优点及特性

mysql数据库培训感受_聊聊MySQL数据库的优点及特性

MySQL数据库应用极其广泛，由于MySQL数据库速度快、可靠性强，而且极具适应性，深得用户喜欢和认可。MySQL是管理内容的最好选择，尤其是对于在不需要事务化处理的情况下。有些人或许对MySQL并不是太熟悉，在这里&#xff0…

阅读更多...

Mysql索引的优点、缺点、分类及使用方法

Mysql索引的优点、缺点、分类及使用方法

文章目录一、前言二、优点三、缺点四、分类及创建方式1.功能上分类<1>普通索引<2>唯一索引<3>主键索引<4>全文索引<5>空间索引 2.物理实现上分类<1>聚簇索引<2>非聚簇索引【二级索引、辅助索引】<3>二者区别 3.字段个数上分类…

阅读更多...

关闭端口命令,如何关闭电脑80端口

关闭端口命令,如何关闭电脑80端口

有很多用户都知道80端口是上网使用最多的协议，网页服务默认端口都是80，不过有一些木马专门针对80端口攻击计算机，为了保证电脑的安全，很多用户都会把80端口关闭，那么如何关闭80端口呢?下面，小编给大家用ii…

阅读更多...

windows中使用命令查看端口和关闭端口进程

windows中使用命令查看端口和关闭端口进程

1.windowsr 输入cmd 打开命令提示符 2.输入 netstat -ano |findstr （需要关闭的端口） 3.输入taskkill /t /f /pid (根据端口得到的进程号)或 taskkill /pid 13324 -t -f

阅读更多...

Windows 端口关闭命令

Windows 端口关闭命令

5472为端口PID

阅读更多...

Mac如何关闭指定端口

Mac如何关闭指定端口

命令很简单，但每次都记不住，都要去查。。。背景就是项目运行过程中想重新打包，因为上一个进程没结束掉，导致原来的端口被占用掉了，打包提示我新开一个端口，但是我就是想要原来的端口（主要是不…

阅读更多...

如何禁用计算机开放的端口,关闭端口命令,教您如何关闭电脑80端口

如何禁用计算机开放的端口,关闭端口命令,教您如何关闭电脑80端口

有很多用户都知道80端口是上网使用最多的协议，网页服务默认端口都是80，不过有一些木马专门针对80端口攻击计算机，为了保证电脑的安全，很多用户都会把80端口关闭，那么如何关闭80端口呢?下面，小编给大家分享…

阅读更多...

推荐文章