# 企业全景画像

预计用时:45分钟

本课程以企业全景画像页面为例,介绍SuperPage页面布局逻辑和常用的布局方式以及交互的应用等内容。

学习小贴士

可以按照下方课程讲解的分解步骤进行学习,学习完之后别忘了完成练习哦!
如遇视频无法播放,可点击链接跳转观看:企业全景画像 (opens new window)

# 学习目标

学习本课程可以掌握到如下知识点:

  • 层层递进分析页面的布局逻辑
  • SuperPage常用的布局方式
  • 打开链接交互以及交互中参数的传递

学习完本课程后,即可掌握到一个基础网页的基本制作。本课程将以企业全景画像网页为例来展开学习,企业全景画像展示了如下信息:

全景画像

  • 企业全景画像一共分为了上下两部分
  • 上部分主要展示的是企业名称信息以及注册信息等,上部分的布局能够很好的体现SuperPage布局中的各种嵌套
  • 下部分主要利用标签页切换显示基本信息、许可信息、警示信息
  • 可以通过点击上节课制作出的企业信息分类表中的企业名称,跳转到对应企业的全景画像页面

# 课程讲解

下面一起学习制作企业全景画像页面,本课程从零开始一步步介绍如何制作企业全景画像页面,建议在学习过程中跟着步骤练习操作。

  • (02:19)引入企业基本信息表
    观看视频
    。更多布局的设置说明,可查看文档布局
  • (03:14)名称信息部分制作
    观看视频
  • (08:20)注册信息部分制作
    观看视频
  • (11:01)页面下半部分布局
    观看视频
  • (11:28)标签页制作
    观看视频
    。更多标签页的设置说明,可查看文档标签页
  • (12:35)基本信息部分制作
    观看视频
    。更多多页面板的设置说明,可查看文档多页面板
  • (15:57)切换多页面板
    观看视频
    。更多切换多页面板交互的设置说明,可查看文档切换多页面板
  • (16:31)页面美化
    观看视频
  • (19:29)过滤模型表数据以及打开链接交互
    观看视频
    。更多参数与打开链接交互的设置说明,可查看文档参数打开链接

# 总结与练习

到这里本节课程就结束了,通过上面的学习请完成练习:

  1. 按照视频制作企业全景画像页面,如下步骤需更新做法:
    1. (04:50-05:42)
      名称信息部分制作
      中的经营状态的样式调整,直接采用风格中标签2制作。见图1.1
    2. (08:20-11:00)
      注册信息部分制作
      的整体布局采用纵向布局嵌套多个横向布局构成。见图1.2
    3. (16:32-17:50)
      页面美化
      中的将标题与内容的样式存风格,应用风格完成其他文本的样式设置。见图1.3
图1.1 图1.2 图1.3

1

2

3

  1. 扩展文档学习:
    1. 应用设计器:学完这篇文档后,请描述如何新建一个SuperPage页面
    2. 布局:学完这篇文档后,请练习卡片式布局
    3. 数据集类型:学完这篇文档后,请简述引入企业基本信息表的步骤3中为何将数据集类型设置为单行
    4. 风格:学习完这篇文档后,请简述练习1.2中为什么将样式存风格,以及什么情况下会更倾向于将样式存风格
    5. 标签页:学习完这篇文档后,请列举标签页的常见用法(至少两种)
    6. 多页面板切换多页面板:学习完这两篇文档后,请实现通过上一页下一页按钮对应切换多页面板的上一页与下一页
    7. 参数:学习完这篇文档后,请总结参数的用途(至少两种)
    8. 打开链接:学习完这篇文档后,请简述该交互中如何传递参数
是否有帮助?
0条评论
评论