从零开始构建网站

本教程将引导你逐步实现一个简单企业网站的搭建,并且不需要你有任何编程的基础。在此过程中你会学习到一些关于样板、区块的基本知识,完全理解它们可以让你能制作更加复杂与个性化的网站。

开始学习本教程前你需要先拥有一个子牙建站的站点账户,没有账户的用户可以点击这里免费申请。

教程分成以下几个部分:

  • 给网站设置一个空的模板
  • 使用站点编辑器搭建网站
  • 如何在后台更新网站新闻

给网站设置一个空的模板

使用您的账户登录站点管理后台,然后在左边菜单栏点击”外观“选项,在主题列表中启用“CustomTheme”主题。

左边菜单栏的“外观”选项
主题列表中的“CustomTheme”主题

主题启用成功后查看站点即可看到空的网站模板效果,接下来会介绍如何在此空的模板上搭建一个完整的网站。

空模板的示意图

使用站点编辑器搭建网站

站点编辑器是一种可视化编辑器,使用它可以轻松构建网站导航、设置网站样式、管理页面与模板,还可以使用我们提供的样板来快速搭建您心中理想的网站。

如何访问站点编辑器

通过点击外观->编辑或当前主题的自定义按钮打开站点编辑器。

访问站点编辑器的编辑选项与自定义按钮
站点编辑器

创建网站导航

创建一个常见的网站导航,它是由首页、关于我们、新闻中心与联系我们四个页面组成。

站点编辑器的导航选项
点击导航后打开的默认导航菜单

在进行导航菜单设置前,我们要先在后台创建关于我们、联系我们的页面与新闻中心的文章分类。

点击站点编辑器左上角的站点 Logo 图标切换到后台。

站点 Logo 图标

移除默认的示例页面

进入网站后台后点击左边菜单栏中的页面选项进入页面管理页,移除默认的示例页面。

左边菜单栏中的页面选项
鼠标悬浮在示例页面上时出现的移至回收站按钮
移除示例页面后

创建关于我们与联系我们页面

点击 页面->新建页面 分别创建关于我们、联系我们页面。

打开新建页面后的页面编辑器

在页面编辑器中输入关于我们标题然后点击右上角的发布按钮,页面就创建成功了。

输入关于我们的页面标题后发布按钮变成可发布状态

为了对用户与搜索引擎更加友好,我们需要对页面的URL进行进一步的设置,把URL的结尾名称换成英文about。

点击URL选项后出现的操作框
在固定链接的文本框中输入about后进行发布

点击发布按钮后会在右边栏出现发布确认的对话框,再次点击确认发布按钮进行页面发布。如果不想每次发布前都进行确认操作,可以取消勾选底部的“总是显示发布前检查”选项。

发布确认对话框

接下来我们继续创建联系我们页面,联系我们的URL结尾名称换成英文contact。

联系我们的页面设置

联系我们页面创建成功后点击左上角的站点 Logo 图片返回至后台。

站点 Logo 图标

切换至后台后,你将在页面管理中查看到之前创建成功的关于我们与联系我们页面。

创建完关于我们与联系我们页面后的页面管理页

创建新闻中心的文章分类

点击 文章->分类目录 创建名称为新闻中心的文章分类。为了对用户与搜索引擎更加友好,我们需要对分类的别名进行设置,把别名设置为英文news。设置完成后点击添加新分类按钮创建分类。

设置完分类名称与别名后
新闻中心分类创建成功后

在站点编辑器中添加导航

点击 外观->编辑 进入站点编辑器,在站点编辑器中打开导航菜单,点击导航菜单中的编辑按钮进行导航编辑。

导航菜单中的编辑按钮
点击编辑导航后

由于之前我们在后台页面中移除了示例页面,所以在导航这里出现的示例页面会显示无效,这里需要再进行移除操作。

鼠标点击示例页面一栏后再点击工具栏中的设置按钮,在设置面板进行导航菜单的添加、修改、删除排序等操作。

打开菜单设置面板后

鼠标悬浮在设置面板中的示例页面选项后会在右侧出现三个点按钮,点击三个点按钮后出设置选项,点击移除选项移除示例页面。

菜单操作选项
移除示例页面后

点击设置面板中的+号按钮添加新的导航菜单,在弹出的选项框中选择页面链接,在页面链接的列表中选择要添加的关于我们页面,接下来继续添加联系我们页面。

点击+号按钮后出现的选项框
点击页面链接后出现的页面选项
关于我们页面添加成功后
联系我们页面添加成功后

关于我们与联系我们添加成功后,我们接下来继续添加新闻中心链接。新闻中心是一个分类链接,它和页面链接的添加方式不同,点击设置面板中的+号按钮,在弹出选项框中的搜索框中输入”分类“字符查询,在查询结果中选择分类链接,在分类链接的列表中选择要添加的新闻中心链接。

输入分类后查询到的分类链接
点击分类链接后出现的分类选项

新闻中心链接添加成功后,我们接下来给导航添加一个首页的链接,点击设置面板中的+号按钮,在弹出选项框中的搜索框中输入”首页“字符查询,在查询结果中选择首页链接。

输入首页后查询到的首页链接
首页链接添加成功后

首页、关于我们、新闻中心与联系我们的导航链接到这里就添加完成了,添加完成后记得点击右上角的保存按钮来保存我们创建的导航。

接下来介绍导航链接的次序调整,把首页链接调整到第一位,联系我们链接调整到最后一位。

两种给导航链接排序的方法:

  1. 在右侧设置面板中鼠标移动到要调整次序的链接上后长按鼠标左键拖动链接到指定的位置后松开排序
设置面板拖动导航菜单排序
  1. 鼠标点击导航区域的目标链接,在出现的工具栏中点击左右移动按钮调整次序
使用工具栏中的左右移动按钮排序

导航创建成功后点击左上角站点 Logo 图标返回导航设置页,最终的导航为首页、关于我们、新闻中心与联系我们。

站点 Logo 图标
最终的网站导航菜单

点击导航菜单左侧的返回按钮直到回到设计主面板,接下来介绍网站样式的设置。

返回按钮
设计面板

网站样式管理

本教程中构建网站的样式已经预设过,跳过本章将不影响网站的继续搭建。

通过样式管理可以设置网站的排版、颜色与布局,本教程中我们只介绍颜色的设置,想要了解更多可以参考 WordPress 官方文档样式一章。

点击样式打开样式设置面板,在样式设置面板中点击颜色选项进入颜色设置面板,在颜色设置面板可以设置网站的调色盘。

打开调色盘

网站页面管理

在创建网站导航一节介绍过在后台添加页面的方法,这里可以暂时忽略。

站点编辑器中的页面选项

创建网站的页眉和页脚

页眉通常包含标题、 logo 和主导航、页脚通常包含站点信息、社交链接或额外区块的组合。页眉与页脚通常是网站所有页面公用的部分,所以这里需要单独管理页眉和页脚的模板。

通过设计面板中的样板选项进入样板面板,然后找到页眉对应的Header组件,点击Header组件后在右侧内容区域中点击对应的模板进行编辑。

编辑页眉模板
页眉编辑状态

在编辑页眉时可以使用快捷键Shift+Alt+O或点击站点编辑器工具栏中的列表视图按钮打开列表视图。

打开左侧列表视图面板后

鼠标放在列表视图面板的区块上之后编辑区对应的内容会显示框选的状态,反之鼠标点击编辑区域的内容在列表视图也会出现选中的状态。

选中区块示意

删除默认的页眉内容

鼠标在列表视图面板选中当前页眉所有的群组,使用快捷键Shift+Alt+Z或点击后面三个点的菜单后在弹出的操作框中选择删除按钮来删除当前的页眉。

区块的删除按钮
默认页眉内容删除后

使用样板添加新的页眉内容

点击站点编辑器工具栏上的+号按钮,在添加面板中切换到样板,在样板列表中选择页眉,从系统预置的页眉列表中选择目标页眉添加。

使用样板添加新的页眉

添加完页眉后,再次打开列表视图,能看到目前的导航是不可用状态。

添加完成页眉后

接下来,选中视图列表面板中的导航按钮,然后在右侧的设置面板的菜单中选择之前创建的名为Navigation的导航菜单,添加完成后记得点击右上角的保存按钮。

选择名为Navigation的导航菜单

删除默认的页脚内容

可以通过点击站点编辑器顶部工具栏中的搜索命令或使用快捷键Ctrl+K打开搜索栏,在搜索栏中输入页脚打开页脚编辑页。删除默认页脚内容的方法与页眉相同。

搜索栏示意图
页脚编辑页
删除默认页脚内容

使用样板添加新的页脚内容

点击站点编辑器工具栏上的+号按钮,在添加面板中切换到样板,在样板列表中选择页脚,从系统预置的页脚列表中选择目标页脚添加。

添加页脚

页眉与页脚创建完成

页眉与页脚创建完成后,点击左上角的站点 Logo 图标打开导航,鼠标移动到左上角站点标题一栏后会出查看站点链接的按钮,点击此按钮查看网站。

鼠标移动到站点标题一栏后出现的查看站点链接图标

如果你看到下面的画面,那么恭喜你完成了网站的页眉与页脚的制作!

页眉与页脚制作完成后的站点首页

制作网站首页

让我们重新回到站点编辑器的设计面板,在模板选项我们将完成网站首页模板的制作。

设计面板的模板选项

打开模板选项进入模板面板,点击面板右上角的+号按钮,在右侧弹出的内容框中选择首页,然后选择默认的样板添加首页。

创建网站首页模板

首页模板创建完成后可以点击站点编辑器顶部工具栏中的查看按钮来查看在桌面端、平板电脑与移动端的显示效果。

站点编辑器中的查看按钮

切换至移动端发现页脚的导航菜单属于折叠状态,在这里我们需要把它设置成展开状态,首先选中导航区块,然后在右侧的设置面板切换到设置一栏,在叠加菜单状态中选择禁用状态。

切换至移动端后
禁用页脚导航在移动端的叠加状态

页脚导航设置完成后我们切换至桌面端继续制作网站首页模板。使用快捷键Shirt+Alt+O打开列表视图,通过列表视图面板选中群组并删除。

删除默认的页面内容

接下来我们将以视频的形式来演示如何使用系统预置的样板制作网站首页。

使用样板制作网站首页

制作关于我们页面

让我们重新回到站点编辑器的设计面板,在模板选项我们将完成关于我们模板的制作。

设计面板的模板选项

打开模板选项进入模板面板,点击面板右上角的+号按钮,在右侧弹出的内容框中选择页面,然后在新的弹框中选择第二项页面(指定单个项目使用),在页面列表中选择关于我们,接着选择默认的样板添加关于我们。

创建关于我们页面模板

接下来我们将以视频的形式来演示如何使用系统预置的样板制作关于我们页面。

使用样板制作关于我们页面

制作联系我们页面

联系我们页面的制作流程参考关于我们页面,下面以视频的形式来演示如何使用系统预置的样板制作联系我们页面。

使用样板制作联系我们页面

制作新闻中心页面

新闻中心的页面模板与前面制作的关于我们和联系我们页面不同,新闻中心模板中的新闻列表是后台添加的动态内容,新闻列表还需要有分页功能。除了动态更新的内容之外,创建模板的流程与前面的页面模板相似。

回到站点编辑器的设计面板,打开模板选项进入模板面板,点击面板右上角的+号按钮,在右侧弹出的内容框中选择Category Archives,然后在新的弹框中选择第一项所有分类(对所有分类使用),接着选择默认的样板添加。

创建新闻中心页面模板

接下来我们将以视频的形式来演示如何使用系统预置的样板制作新闻中心页面。

使用样板制作新闻中心模板

制作新闻详情页

新闻详情页面模板的内容是动态内容,这里我们将使用区块来制作,创建模板的流程与前面的页面模板相似。

回到站点编辑器的设计面板,打开模板选项进入模板面板,点击面板右上角的+号按钮,在右侧弹出的内容框中选择单篇文章,接着选择默认的样板添加。

创建新闻详情模板

接下来我们将以视频的形式来演示如何使用区块制作新闻详情页面。

使用区块制作文章详情页

首页、关于我们、新闻中心、新闻详情与联系我们的模板全部制作完成了,现在查看站点就能看一个完整的网站了。

还有一点小问题,新闻中心页面是空的,原因是后台还未添加新闻,下面将介绍如何在后台更新网站新闻。

如何在后台更新网站新闻

点击左上角的站点 Logo 图标直至返回网站后台,在后台左边菜单栏点击文章->写文章发布新闻。

发布新闻演示