框/线/列布局

在 WebAcappella 中,元素的组织遵循精确的结构:

  • 方框是结构页面的主要容器。

  • 线条可直接嵌入方框,实现横向组织。

  • 列与其他元素(文本、图片、按钮)一样,都是元素,应拖入一行,以便垂直组织内容。

这种层次结构使得设计灵活、自适应的页面布局成为可能。

颜色图例

在 WebAcappella 界面中,构成页面的每个元素都用特定的颜色表示:

  • 棕色的箱子。

  • 粉红色的线条。

  • 绿色代表圆柱。

选中一个项目时,其周围会有相同颜色的边框。

捕捉说明元素的颜色及其选择框架的图片

创建新页面

  1. 在 WebAcappella 中创建新页面。

  2. 包含一行的方框会自动放置在这里。

    ../../_images/step_10.png

为一行添加列

  1. 每行分为 12 个凹槽,便于调整列的宽度。

  2. 将一个或多个列拖放到行中。

  3. 重复操作,并排添加多列。

  4. 通过调整列的比例来调整列的大小。

  5. 在创建的每一列中,拖动所需的元素(文本、图片、按钮等)以占据列的宽度。

    ../../_images/step_20.png

添加方框和线条

  1. 您可以根据需要在同一页面上拖动多个方框。

    ../../_images/step_30.png

实用建议

  • 通过使用几个方框来组织页面,营造清晰的结构。

  • 使用列来平衡页面布局,但要避免过多,以免移动显示屏不堪重负。

  • 定期测试响应模式,确保在所有屏幕上都能正确显示。