Pbuilder的工作原理就是基于组件来做拼装,因此首先我们就要了解从组件到网页实现的工作流程。Pbuilder的工作流程非常简单,具体来说就是分为三步:

挑选组件 > 设计组件样式 > 预览并保存样式

一、排序:挑选组件

首先我们需要切换到最左边的「排序」这个工作模式下,在这里将组件工具箱中需要的组件拖入到画板中。这时的画板就是你要编辑的页面,要仔细考虑你正在编辑的页面的特点来挑选不同的组件。

image

当鼠标悬停于某一组件上方时,这个组件会呈现色彩并在画板上可以预览展示其效果。当你的鼠标移走,画板当中的组件预览就会消失。

image

其次,将画板中不同的组件进行排序,所谓的排序就是调整它们在网页中的上下顺序。不需要的组件也可以在这里点击关闭按钮进行删除。

image

排序模式下的组件是不能进一步进行样式编辑的。

二、设计:设计组件样式

组件样式的设计是在「设计」这个工作模式下进行的,这里可以对大部分的组件进行外观的编辑,也可以对组件内的内容进行编辑。不同的组件的编辑方式不同,一般来说组件分为静态组件和动态组件,它们的编辑方式是不同的,进入这篇文章我们会详细和大家讲解静态组件和动态组件,以及它们不同的编辑方式。

组件编辑器可以完成组件样式的设计,还是对网页内容进行上传的主要工具。正在被编辑的组件显示高亮蓝紫色边框作为标识,同时,已经有参数的选项,将在编辑器当中采用蓝紫色高亮显示。

image

三、预览并保存:预览网页样式并保存

如果网页编辑好了,就可以点击切换到「预览」的工作模式,查看在不同宽度下的浏览器的网页样式,确定没任何修改了以后就点击右上角的「保存」按钮。

image

这三种工作模式对应着不同阶段的工作流程,因此只要熟悉了工作流程,就知道网页目前是进行到了哪一个阶段,也可以自由来回切换。如果放弃自己所做的修改,还可以点击退出直接回到 pagepan 主界面。