您当前位置:产品文档 >企业服务 >智能建站 >PC网站设计器 >浏览文章

页面的类型

 

链接与页面

无论是网站还是小程序均是由单个或多个页面构成的。当页面中的某个元素被点击时,除了出现一个弹窗或动作反馈以外,大多数情况下,常见的都是呈现了新的整页内容,这种情况下就是打开了一个新的页面。

因此,当您希望访客访问您的站点时,点击某个元素时打开新页面的话。则需要先创建一个新页面,并把这个页面的内容进行完善,然后在您希望点击进入这个页面的元素上设置链接指向,使其指向这个页面就可以了。

页面类型

1.png

AIPage系统将页面的类型分为了“普通页面”和“系统页面”两种:

一、普通页面:普通页面可随意创建,创建后可根据自身需求编辑制作里面的内容。创建页面时可以命名页面的名称、访问路径及SEO相关信息。您可以将其中一个普通页面设置“小房子”图标,然后此页面就会成为访客进入您的网站时默认展示的“首页”。

2.png


二、系统页面:系统页面是站点内用作公共内容(动态数据)呈现时所需要的一种页面。系统页面内包含了必备的动态数据的处理和加载模块,因此是普通页面不可替代的,所以AIPage将这种类型的页面归类为了系统页面。

比如:用户搜索某个产品关键词后,都是由“产品搜索结果页”这个系统页面来索引关键词相关产品的动态数据后展现的内容结果。

比如:用户点击某个文章分类后,都是由“文章分类列表页”这个系统页面来索引该分类下的所有文章数据后展现该分类下的文章列表。

比如:用户快捷登录页面,有动态获取的账号及验证过程,这个页面也是系统页面。

比如:用户会员中心,有动态加载的会员资料信息及订单等数据,这个页面也是系统页面。

基于以上举例,可见系统页面是十分重要的页面类型。系统页面内除了包含比较重要模块外,您依然可以采用自定义设计方式,自由增添版块及元素。

网站页面与小程序页面

3.png


设计器顶部有设计模式的切换按钮,您可以切换设计:PC网站、手机网站、小程序。

需要注意的是,PC网站页面和手机网站页面实际上是同一个页面。因为,我们必然是希望当某个PC网站页面在电脑浏览器上可以打开,那么它的地址发送到手机设备上,被手机浏览器访问时依然也可以正常打开,并且展示的是手机版的样式。所以,在PC网站设计模式下创建的页面同样在手机网站设计模式下也会有,同理,在手机网站设计模式下创建的页面在PC网站设计模式下也会有。

即,若PC网站模式下创建了A页面作为首页,B、C页面作为子页面。那么进入手机网站设计模式下,则无需再创建A、B、C三个页面,您可以直接看到这三个页面,对它们进行编辑即可。

但是,网站的页面结构跟小程序的页面结构并不互通,小程序的页面结构比网站一般会简单一些。所以,您在设计小程序时,需要重新建立各个所需页面。

 


概述

 

界面概览

小程序设计器与PC网站设计器、手机网站设计器的交互差异较大,请认真了解。

1.png 

① 系统LOGO:系统默认的logo标志,点击此处可返回“站点控制台”

② 页面切换:点击可下拉可查看当前所有的普通页面和系统页面、创建新的页面、删除页面、设置页面的基本信息、设置页面的SEO信息等,当点击某个页面的名称时,编辑器将打开此页面,并可以对其进行编辑。

③ 设计模式切换:可以便捷的切换PC网站设计器、手机网站设计器、小程序设计器,进入对该端的设计状态。

④ 撤销&重做:撤销之前的操作行为或重做之前的操作行为。

⑤ 功能按钮区

【保存】为保存当前修改的内容;

【实时预览】使用AIPage提供的公用账号,在“真机”上进行浏览,以便更直观的感受效果;

【测试&发布】使用您自己的小程序账号进行测试预览及操作正式发布上线;

⑥ 菜单按钮区:

【添加版块】可选择使用系统内置的成品版块,拖拽方式放置入手机视图区域内,随后可在里面任意增删“元素”。

【添加组件】系统内置的功能组件,拖拽方式放置进入手机视图区域内,随后可进行编辑。

【视图结构】可查看当前页面内所有的版块,对其进行上下排序、隐藏、删除等操作。

【全局设置】可设置页面加载动效、顶部标题栏、底部导航栏及主题信息。

【授权信息】可在其内操作授权绑定您的百度智能小程序、微信小程序、支付宝小程序。

【更换模版】用于更换整站或当前页面的模版。

【素材管理】管理所有上传到站点上的素材文件。

【管理后台】点击可进入当前小程序的管理后台。

⑦ 设置菜单:可对已选中的版块或元素做快捷设置。

实操说明

页面整体结构

本系统的页面结构采用版块式结构,即自上到下是由一个个版块堆叠而成,小程序设计器“无”公共头尾部概念,所有版块均可在左侧的“页面视图”中查看并便捷的调整版块的上下排序。如下图所示:

2.png 

添加版块&组件

版块和组件的添加方式为拖拽进入设计视图内,当手机视图内的“可添加区域”呈现蓝色“加深”状态时,松开鼠标的按键,该版块或组件即可置入完成。

3.png 

自定义元素设置

组件中的自定义元素(自由元素)是拖拽进入设计视图内的,当点击自由元素时,其会呈现被选中的状态。按住鼠标按键拖动可摆放在页面内的任意位置。同时在选中状态下,右侧会出现属性面板,可对其进行详细的属性设置。如若修改自由元素的大小,可直接拖动自由元素边缘的小圆点调整大小。

4.png