《工业可视化》课件 任务1.2 设计工业企业信息页面 -任务实施.pptx

项目一：工业企业信息的可视化设计任务1.2设计工业企业信息页面※任务实施《工业可视化》/工业互联网系列课程湖南三一工业职业技术学院

《工业可视化》/工业互联网系列课程目录1.任务分析2.设计标题及集团信息3.设计宣传视频展示4.设计研发创新展示5.设计产品轮播展示6.预览页面效果

1.任务分析在项目背景中，甲方公司需要展示的企业信息内容包括：公司简介、介绍视频、核心产品图片、研发创新数据、集团大楼、当前日期和时间等，相关内容展示需要用的组件如表所示。展示内容条目名称使用组件数据源备注公司介绍公司简介文本组件无客户提供文字宣传视频视频组件无客户提供视频核心产品图片轮播组件无客户提供图片公司实力研发数据图片组件无客户提供图片集团大楼图片组件无客户提供图片其他当前日期和时间文本组件系统时间日期无

2.设计标题及集团信息添加文本组件（1）把文本组件拖拽添加到页面的标题位置。

2.设计标题及集团信息设置文本属性（2）按照图中的线框内的参数，修改页面标题的文本属性，其他采用默认设置。

2.设计标题及集团信息设置文本属性（3）按上述步骤操作完成之后，页面布局如图所示。说明：本书的示例参数仅供参考，实际可根据用户的审美偏好进行调整。

2.设计标题及集团信息设计集团介绍（4）按照前3个步骤的操作，完成集团介绍栏中的文本组件的添加，文字属性可自定义调整，如图所示，文字内容可使用教材配套的“集团介绍.txt”文档中的文字内容。

设置系统时间2.设计标题及集团信息（5）添加一个文本组件在页面右上角，并按照图中的文本属性参数来修改，注意“文本”中可以不需要输入信息。

2.设计标题及集团信息设置系统时间（6）属性修改完成之后，切换到数据源编辑区，在“类型”选项框的下拉菜单选择“系统时间日期”，在“时间类型”选项框的下拉菜单选择合适的时间类型。

3.设计宣传视频展示添加视频组件（1）添加视频组件在页面如图所示的位置，并设置视频大小属性，调整其至居中位置，其他属性不需要调整。

3.设计宣传视频展示设置介绍视频（2）添加视频组件完成后，在选中组件，开始编辑视频来源，在“我的素材库”中找到视频资源，本书示例使用的是“素材库→我的素材库→工业可视化课程素材→项目1素材”文件夹下的“公司视频”，将选中的视频拖拽到视频来源属性的“本地”框中。

4.设计研发创新展示设计研发创新（1）直接将“项目1素材”中的研发创新图片拖拽到研发如图所示的页面位置，可以根据需求调整图片的大小，尽量保持长宽比。说明：图片的“属性—屏幕大小”可以任意设置，但应尽量保持跟需要加载的图片文件像素的长宽比一致，防止变形。

4.设计研发创新展示设计集团大楼（2）重复前一个步骤，完成页面中间“集团大楼”图片组件的编辑，本书示例中使用的是“素材库→我的素材库→工业可视化课程素材→项目1素材”文件夹下的“集团大楼”图片，如图所示。

5.设计产品轮播展示添加轮播组件（1）添加图片轮播组件在页面“产品展示”装饰框内，在“属性”设置栏中设置“屏幕大小”，并调整其至合适位置，其他属性不需要调整。

5.设计产品轮播展示添加轮播图片（2）添加图片轮播组件完成后，选中组件，单击属性栏中“添加图片”标签后的“+”图标，可多次单击“+”来增加多个图片。

5.设计产品轮播展示添加轮播图片（3）在“我的素材库”中找到相应的产品图片，本书示例中使用的是“素材库→我的素材库→工业可视化课程素材→项目1素材”文件夹下的产品图片，依次拖拽到添加的图片框中。

6.预览页面效果预览页面（1）页面编辑过程中可以通过单击“保存”按钮手动保存页面设计，完成了所有组件的配置之后，单击“预览”按钮。

6.预览页面效果预览页面预览效果分为网页预览、大屏预览、手机预览，可分别单击查看。

6.预览页面效果预览页面（2）选择任一预览模式后，单击“全屏”可以查看更真实的效果，如图所示为“网页预览”模式下的全屏效果。

20THANKYOU工业可视化课程组：湖南三一工业职业技术学院树根互联股份有限公司广州番禺职业技术学院湖南信息职业技术广东轻工职业技术学院河南机电职业学院