《工業(yè)可視化》課件 任務(wù)1.2 設(shè)計(jì)工業(yè)企業(yè)信息頁(yè)面 -任務(wù)實(shí)施

項(xiàng)目一：工業(yè)企業(yè)信息的可視化設(shè)計(jì)任務(wù)1.2設(shè)計(jì)工業(yè)企業(yè)信息頁(yè)面>>※任務(wù)實(shí)施《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程湖南三一工業(yè)職業(yè)技術(shù)學(xué)院《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程目錄1.任務(wù)分析2.設(shè)計(jì)標(biāo)題及集團(tuán)信息3.設(shè)計(jì)宣傳視頻展示4.設(shè)計(jì)研發(fā)創(chuàng)新展示5.設(shè)計(jì)產(chǎn)品輪播展示6.預(yù)覽頁(yè)面效果1.任務(wù)分析在項(xiàng)目背景中，甲方公司需要展示的企業(yè)信息內(nèi)容包括：公司簡(jiǎn)介、介紹視頻、核心產(chǎn)品圖片、研發(fā)創(chuàng)新數(shù)據(jù)、集團(tuán)大樓、當(dāng)前日期和時(shí)間等，相關(guān)內(nèi)容展示需要用的組件如表所示。展示內(nèi)容條目名稱(chēng)使用組件數(shù)據(jù)源備注公司介紹公司簡(jiǎn)介文本組件無(wú)客戶(hù)提供文字宣傳視頻視頻組件無(wú)客戶(hù)提供視頻核心產(chǎn)品圖片輪播組件無(wú)客戶(hù)提供圖片公司實(shí)力研發(fā)數(shù)據(jù)圖片組件無(wú)客戶(hù)提供圖片集團(tuán)大樓圖片組件無(wú)客戶(hù)提供圖片其他當(dāng)前日期和時(shí)間文本組件系統(tǒng)時(shí)間日期無(wú)2.設(shè)計(jì)標(biāo)題及集團(tuán)信息添加文本組件（1）把文本組件拖拽添加到頁(yè)面的標(biāo)題位置。2.設(shè)計(jì)標(biāo)題及集團(tuán)信息設(shè)置文本屬性（2）按照?qǐng)D中的線(xiàn)框內(nèi)的參數(shù)，修改頁(yè)面標(biāo)題的文本屬性，其他采用默認(rèn)設(shè)置。2.設(shè)計(jì)標(biāo)題及集團(tuán)信息設(shè)置文本屬性（3）按上述步驟操作完成之后，頁(yè)面布局如圖所示。說(shuō)明：本書(shū)的示例參數(shù)僅供參考，實(shí)際可根據(jù)用戶(hù)的審美偏好進(jìn)行調(diào)整。2.設(shè)計(jì)標(biāo)題及集團(tuán)信息設(shè)計(jì)集團(tuán)介紹（4）按照前3個(gè)步驟的操作，完成集團(tuán)介紹欄中的文本組件的添加，文字屬性可自定義調(diào)整，如圖所示，文字內(nèi)容可使用教材配套的“集團(tuán)介紹.txt”文檔中的文字內(nèi)容。設(shè)置系統(tǒng)時(shí)間2.設(shè)計(jì)標(biāo)題及集團(tuán)信息（5）添加一個(gè)文本組件在頁(yè)面右上角，并按照?qǐng)D中的文本屬性參數(shù)來(lái)修改，注意“文本”中可以不需要輸入信息。2.設(shè)計(jì)標(biāo)題及集團(tuán)信息設(shè)置系統(tǒng)時(shí)間（6）屬性修改完成之后，切換到數(shù)據(jù)源編輯區(qū)，在“類(lèi)型”選項(xiàng)框的下拉菜單選擇“系統(tǒng)時(shí)間日期”，在“時(shí)間類(lèi)型”選項(xiàng)框的下拉菜單選擇合適的時(shí)間類(lèi)型。3.設(shè)計(jì)宣傳視頻展示添加視頻組件（1）添加視頻組件在頁(yè)面如圖所示的位置，并設(shè)置視頻大小屬性，調(diào)整其至居中位置，其他屬性不需要調(diào)整。3.設(shè)計(jì)宣傳視頻展示設(shè)置介紹視頻（2）添加視頻組件完成后，在選中組件，開(kāi)始編輯視頻來(lái)源，在“我的素材庫(kù)”中找到視頻資源，本書(shū)示例使用的是“素材庫(kù)→我的素材庫(kù)→工業(yè)可視化課程素材→項(xiàng)目1素材”文件夾下的“公司視頻”，將選中的視頻拖拽到視頻來(lái)源屬性的“本地”框中。4.設(shè)計(jì)研發(fā)創(chuàng)新展示設(shè)計(jì)研發(fā)創(chuàng)新（1）直接將“項(xiàng)目1素材”中的研發(fā)創(chuàng)新圖片拖拽到研發(fā)如圖所示的頁(yè)面位置，可以根據(jù)需求調(diào)整圖片的大小，盡量保持長(zhǎng)寬比。說(shuō)明：圖片的“屬性—屏幕大小”可以任意設(shè)置，但應(yīng)盡量保持跟需要加載的圖片文件像素的長(zhǎng)寬比一致，防止變形。4.設(shè)計(jì)研發(fā)創(chuàng)新展示設(shè)計(jì)集團(tuán)大樓（2）重復(fù)前一個(gè)步驟，完成頁(yè)面中間“集團(tuán)大樓”圖片組件的編輯，本書(shū)示例中使用的是“素材庫(kù)→我的素材庫(kù)→工業(yè)可視化課程素材→項(xiàng)目1素材”文件夾下的“集團(tuán)大樓”圖片，如圖所示。5.設(shè)計(jì)產(chǎn)品輪播展示添加輪播組件（1）添加圖片輪播組件在頁(yè)面“產(chǎn)品展示”裝飾框內(nèi)，在“屬性”設(shè)置欄中設(shè)置“屏幕大小”，并調(diào)整其至合適位置，其他屬性不需要調(diào)整。5.設(shè)計(jì)產(chǎn)品輪播展示添加輪播圖片（2）添加圖片輪播組件完成后，選中組件，單擊屬性欄中“添加圖片”標(biāo)簽后的“+”圖標(biāo)，可多次單擊“+”來(lái)增加多個(gè)圖片。5.設(shè)計(jì)產(chǎn)品輪播展示添加輪播圖片（3）在“我的素材庫(kù)”中找到相應(yīng)的產(chǎn)品圖片，本書(shū)示例中使用的是“素材庫(kù)→我的素材庫(kù)→工業(yè)可視化課程素材→項(xiàng)目1素材”文件夾下的產(chǎn)品圖片，依次拖拽到添加的圖片框中。6.預(yù)覽頁(yè)面效果預(yù)覽頁(yè)面（1）頁(yè)面編輯過(guò)程中可以通過(guò)單擊“保存”按鈕手動(dòng)保存頁(yè)面設(shè)計(jì)，完成了所有組件的配置之后，單擊“預(yù)覽”按鈕。6.預(yù)覽頁(yè)面效果預(yù)覽頁(yè)面預(yù)覽效果分為網(wǎng)頁(yè)預(yù)覽、大屏預(yù)覽、手機(jī)預(yù)覽，可分別單擊查看。6.預(yù)覽頁(yè)面效果預(yù)覽頁(yè)面（2）選擇任一預(yù)覽模式后，單擊“全屏”可以查看更真實(shí)的效果，如圖所示為“網(wǎng)頁(yè)預(yù)覽”模式下的