H5 頁面設(shè)計（Mugeda版）全套教學(xué)課件

現(xiàn)代

編著技術(shù)數(shù)字第1章認識H5頁面H5頁面設(shè)計（Mugeda版）（微課版）全套可編輯PPT課件1.1H5概述1.2H5頁面的設(shè)計原則1.3H5頁面的設(shè)計規(guī)范1.4H5頁面的設(shè)計流程1631.1.1H5是什么而H5則是HTML5的縮寫，HTML5是第5代超文本標記語言的簡稱。，使用HTML5制作的頁面不僅視覺效果有較大的提升，還具有較強的可操作性與互動性，并且展示方式多樣、表現(xiàn)形式豐富、視聽效果好。HTML（HyperTextMarkupLanguage，超文本標記語言）“超文本”指的是頁面內(nèi)可以包含圖片、鏈接、音樂、程序等非文字元素，“標記”則代表這些超文本必須通過起始標簽和結(jié)束標簽進行標記?！?022大話之旅”H5頁面1.1.2H5頁面的基本特點H5頁面可以在各種操作系統(tǒng)（如Windows、macOS、iOS和Android等）和不同設(shè)備（如計算機設(shè)備、移動設(shè)備和智能電視等）上展示，具有極強的兼容性。兼容性強支持多媒體互動性強H5頁面中可以包含文字、圖像、動畫、音頻、視頻等媒體元素，設(shè)計師可以綜合應(yīng)用多種媒體元素設(shè)計出具有吸引力的H5頁面，從而更好地傳遞信息，提升用戶體驗。H5頁面可以通過手勢交互、硬件交互（如攝像頭、陀螺儀等）以及技術(shù)交互（如滑動、拖動、點擊等）等方式，實現(xiàn)更多樣化、個性化的互動，以增強用戶的參與感，提升用戶體驗和留存率。1.1.3H5頁面的應(yīng)用活動宣傳產(chǎn)品展示或推廣品牌宣傳公益宣傳1.1.4H5頁面的風(fēng)格扁平化風(fēng)格水墨風(fēng)格實景風(fēng)格1.1.4H5頁面的風(fēng)格科技風(fēng)格卡通風(fēng)格混合風(fēng)格1.2H5概述1.1H5頁面的設(shè)計原則1.3H5頁面的設(shè)計規(guī)范1.4H5頁面的設(shè)計流程1.2.1一致性原則一致性原則貫穿H5頁面設(shè)計的全過程，在設(shè)計H5頁面時，頁面的版式、文字字體，以及圖片或圖形的顏色、風(fēng)格、色調(diào)等要做到基本統(tǒng)一和協(xié)調(diào)；在展示頁面內(nèi)容時，內(nèi)容主題和動效風(fēng)格設(shè)置需要保持一致等?！癆E動效設(shè)計”課程的H5頁面該頁面均以藍色為背景色，以黃色和黑色為輔助色，采用扁平化風(fēng)格，以及與風(fēng)格統(tǒng)一的圖形和文字元素，直觀地展現(xiàn)了課程信息。1.2.2簡潔性原則在設(shè)計H5頁面時需始終堅持簡潔性原則，可對內(nèi)容進行刪減并簡化布局，專注于核心內(nèi)容的展示，避免過多的裝飾和復(fù)雜的元素，同時適當(dāng)留白，使頁面看起來清晰和整潔，以幫助用戶更好地理解H5頁面中的內(nèi)容。“一顆膠囊的神奇之旅”H5頁面該頁面在內(nèi)容上采用圖文搭配的方式，圖片直觀、簡潔，無過多裝飾，直接展現(xiàn)需要傳達的內(nèi)容；簡明、扼要的文字則對圖片內(nèi)容進行解釋，使頁面更加清晰、易懂。1.2.3條理性原則在設(shè)計H5頁面前需要梳理內(nèi)容，分清主次關(guān)系，先展示比較簡單的內(nèi)容，然后依次展示更復(fù)雜的內(nèi)容，由易到難，循序漸進。為了避免用戶難以理解內(nèi)容，在進行H5頁面設(shè)計時最好做到“一個頁面只講一件事”。“騰訊應(yīng)急”H5頁面”該H5頁面共5個場景，分別為校園、家庭、鄉(xiāng)村、社區(qū)、企業(yè)，各場景內(nèi)容主次分明、條理清楚。1.2.4切身性原則切身性原則需要設(shè)計師從用戶熟悉的生活和熱點事件中尋找突破點或共鳴點，并將其以創(chuàng)意的方式呈現(xiàn)出來。例如運用動畫、插畫、互動性元素等來營造令人印象深刻的視覺效果，引發(fā)用戶共鳴，加深用戶印象，從而達到信息傳播的目的。品牌招商H5頁面該H5頁面以用戶切身關(guān)注的問題為出發(fā)點（如牧場、牧草、土地和奶牛等是否優(yōu)質(zhì)），然后通過對產(chǎn)品的詳細介紹，使用戶能感受到該品牌對這些問題的注重程度，引發(fā)用戶的共鳴和認同。1.2.5創(chuàng)新性原則運用圖片、視頻、動畫等媒體元素，使頁面更加生動、有趣；或是通過講述一個有趣的故事或在頁面中呈現(xiàn)一個生動的場景，以彰顯頁面的設(shè)計感。使用不同的字體、大小、顏色和樣式，創(chuàng)造出獨特的視覺效果，也可以使用有趣的文案和口號來吸引用戶的注意力，并激發(fā)他們的興趣?！胺蛉舜伞の骱{”H5頁面該頁面采用插畫的方式將產(chǎn)品融入生活場景中，在具有美觀性的同時也具有創(chuàng)新性。1.3H5概述1.1H5頁面的設(shè)計原則1.2H5頁面的設(shè)計規(guī)范1.4H5頁面的設(shè)計流程1.3.1頁面尺寸手機是最常見的終端設(shè)備之一，設(shè)計H5頁面時可根據(jù)特定手機型號的屏幕尺寸進行設(shè)計。雖然型號不同的手機尺寸不同，但目前H5頁面普遍采用的頁面尺寸是在640像素×1136像素的基礎(chǔ)上，減去微信或瀏覽器觀看時的手機頂部高度128像素，得到最終的H5頁面尺寸640像素×1008像素。1.3.2頁面適配為了確保制作完成后的H5頁面能夠適配不同屏幕尺寸的手機，很多H5制作工具或平臺都有“自動適配”功能，只需選擇一種手機屏幕尺寸進行設(shè)計，即可實現(xiàn)對其他手機屏幕尺寸的適配。為了避免使用“自動適配”功能后，仍出現(xiàn)部分頁面邊緣區(qū)域無法完整顯示的情況出現(xiàn)，設(shè)計師可以將重要內(nèi)容居中放在安全框中（安全框指手機屏幕中可以完整顯示內(nèi)容的安全區(qū)域，該區(qū)域不會被屏幕裁剪或者遮擋），以確保其在各種屏幕上都能夠清晰展示。為了測試頁面適配效果，可以生成二維碼并在手機端進行預(yù)覽，這樣可以更準確地判斷頁面在手機上的實際顯示效果，以進行調(diào)整和優(yōu)化。0102031.3.3文件大小Mugeda平臺要求一張圖片不超過10MB，一個視頻不超過20MB。當(dāng)圖片或視頻過大時，可對素材進行壓縮。圖片壓縮視頻壓縮壓縮視頻可以使用專業(yè)的多媒體文件處理軟件，如格式工廠等。也可使用一些在線編輯器來完成，如Video2Edit等，設(shè)計師無須下載和安裝，只需在其網(wǎng)站首頁選擇“壓縮影片”選項，打開“在線壓縮視頻”頁面，將需要壓縮的視頻拖動到紫色的方塊中，在其下方還可設(shè)置文件大小和格式，單擊“開始”按鈕后便可壓縮視頻。1.4H5概述1.1H5頁面的設(shè)計原則1.2H5頁面的設(shè)計規(guī)范1.3H5頁面的設(shè)計流程1.4.1明確設(shè)計目的在設(shè)計之初，客戶往往會提供設(shè)計需求，設(shè)計師需要先仔細閱讀設(shè)計需求，理解H5頁面的整體目標和設(shè)計目的。明確到底要做什么，需要在其中表達什么內(nèi)容，并將重點信息羅列出來，確定H5頁面所要實現(xiàn)的具體目標，如宣傳企業(yè)形象、提高品牌知名度、推廣產(chǎn)品或服務(wù)等，為H5頁面的內(nèi)容策劃提供方向。1.4.2策劃內(nèi)容1.構(gòu)建內(nèi)容大綱用戶分析了解目標用戶的年齡、性別、受教育程度、興趣和行為習(xí)慣，分析目標用戶的需求和期望，確定內(nèi)容大綱中需要包含的關(guān)鍵信息。品牌分析了解品牌的核心價值觀、聲譽和風(fēng)格定位，確定H5頁面應(yīng)體現(xiàn)品牌的哪些信息，以及如何對品牌進行宣傳與推廣。產(chǎn)品分析了解產(chǎn)品的功能、賣點和定位，確定H5頁面應(yīng)展示產(chǎn)品的哪些方面，如何提升更多用戶對產(chǎn)品的了解程度，以及如何營銷和推廣產(chǎn)品。1.4.2策劃內(nèi)容2.規(guī)劃結(jié)構(gòu)和內(nèi)容根據(jù)內(nèi)容大綱，對主要內(nèi)容的相關(guān)性和從屬關(guān)系進行組織和劃分，考慮哪些內(nèi)容需要在同一頁展示，哪些內(nèi)容可以分散到不同頁面中展示。根據(jù)內(nèi)容的數(shù)量和相關(guān)性，確定H5頁面的結(jié)構(gòu)和頁數(shù)?？紤]整體的敘述邏輯和頁面間的銜接性，確保用戶能夠順利瀏覽和理解每一頁內(nèi)容。根據(jù)設(shè)計目的和內(nèi)容需求，確定每一頁的重點和焦點，明確每一頁要傳達的主題和核心信息。根據(jù)內(nèi)容大綱和設(shè)計需求，決定每項內(nèi)容的呈現(xiàn)形式，如文本、圖片、視頻、動畫等，考慮如何利用空間和媒體元素來傳達信息，以吸引用戶的注意力。組織相關(guān)內(nèi)容劃分頁面結(jié)構(gòu)確定每一頁的核心內(nèi)容決定內(nèi)容的呈現(xiàn)形式1.4.2策劃內(nèi)容3.選擇內(nèi)容風(fēng)格選擇合適的風(fēng)格能夠提升H5頁面的吸引力、可讀性和用戶體驗。不同的內(nèi)容其適合的風(fēng)格存在差別，設(shè)計師可以從目標用戶和品牌的需求等方面進行考慮。另外，不同風(fēng)格的設(shè)計效果不同，設(shè)計師應(yīng)注意選擇合適的表現(xiàn)方式，如扁平化風(fēng)格強調(diào)簡潔和平面化，常采用簡單、明快的圖形和色塊來表現(xiàn)。1.4.2策劃內(nèi)容4.組織和布局內(nèi)容設(shè)計師常通過軟件或手繪的方式繪制H5頁面原型圖，在繪制原型圖的過程中，設(shè)計師還可與企業(yè)管理者、產(chǎn)品管理者、內(nèi)容策劃者等溝通，確保在進行H5頁面的設(shè)計時能夠更加全面地了解設(shè)計內(nèi)容、設(shè)計難點和設(shè)計周期等情況。1.4.3搜集素材完成原型圖的繪制后，需要根據(jù)原型圖標注的內(nèi)容來搜集素材，常見的素材有文案、圖片、視頻、音效等。通常來說，與企業(yè)產(chǎn)品和活動相關(guān)的文字、圖片、視頻等資源，主要由企業(yè)提供，設(shè)計師也可以前往企業(yè)進行拍攝與錄制等；頁面設(shè)計的裝飾素材、美化素材，如頁面背景、按鈕、圖標等素材，可以通過網(wǎng)絡(luò)下載，或由設(shè)計師自行設(shè)計。1.4.4進行頁面設(shè)計在Mugeda中選擇合適的模板，并將之前搜集的素材添加到編輯器中，替換模板內(nèi)容。使用模板設(shè)計H5頁面使用圖像工具設(shè)計H5頁面直接使用Mugeda設(shè)計H5頁面使用圖像工具設(shè)計H5頁面時多使用Photoshop、Illustrator等。在設(shè)計時可根據(jù)原型圖的要求繪制頁面，再將完成后的頁面導(dǎo)入Mugeda中。Mugeda是一款專業(yè)的H5編輯器，設(shè)計師可直接在其中使用各種工具繪制和調(diào)整圖形，添加媒體文件與文字等，完成H5頁面的設(shè)計。1.4.5進行交互設(shè)計使用模板設(shè)計的H5頁面，大多已經(jīng)包含交互效果。而對于使用圖像工具或直接使用Mugeda設(shè)計的H5頁面，則要根據(jù)需求依次對頁面中的元素添加動畫、音效、互動等，使其具有交互效果。在Mugeda中為節(jié)約用水H5頁面添加預(yù)設(shè)動畫1.4.6生成和發(fā)布H5完成H5的交互設(shè)計后，即可預(yù)覽完成后的效果。若需要將H5發(fā)布到微信或網(wǎng)頁中，可在發(fā)布頁面通過二維碼或鏈接的方式生成與發(fā)布H5。節(jié)約用水H5廣告的發(fā)布頁面祝學(xué)習(xí)進步?。5頁面設(shè)計（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字現(xiàn)代

編著技術(shù)數(shù)字第2章Mugeda的基本操作H5頁面設(shè)計（Mugeda版）（微課版）2.1初識Mugedea2.2新建、管理和發(fā)布H52.3模板管理與素材管理2.4Mugeda中的H5編輯器界面2.1.1認識Mugeda平臺Mugeda除了可用于H5的制作外，還可用于一站式制作有關(guān)App、微信公眾號、網(wǎng)頁等的內(nèi)容，以及編輯與處理圖片、視頻、數(shù)據(jù)圖表等素材，充分滿足大部分內(nèi)容生產(chǎn)者的需求。Mugeda內(nèi)置功能強大的API，擁有業(yè)界較強的動畫編輯能力和較為自由的創(chuàng)作空間，設(shè)計師和團隊在瀏覽器中就可以直接使用Mugeda創(chuàng)建表現(xiàn)力豐富的交互動畫，高效地完成H5的制作發(fā)布、賬號管理、協(xié)同工作、數(shù)據(jù)收集等。2.1.2Mugeda的優(yōu)勢和功能Mugeda的操作界面干凈、簡潔，設(shè)計師易上手，學(xué)習(xí)成本不高。操作簡單提供可視化制作工具支持跨平臺Mugeda提供了直觀的可視化制作工具，讓設(shè)計師可以在不編寫代碼的情況下，通過拖曳、調(diào)整屬性和設(shè)置參數(shù)等簡單的操作，完成復(fù)雜的交互設(shè)計。Mugeda制作的H5作品可在多種平臺和設(shè)備上播放，設(shè)計師可通過生成二維碼或者導(dǎo)出發(fā)布的方式，將作品分享給其他人，讓他們可以隨時隨地瀏覽H5作品。1.Mugeda的優(yōu)勢2.1.2Mugeda的優(yōu)勢和功能2.Mugeda的功能云計算功能矢量造型功能動畫設(shè)計功能導(dǎo)出功能企業(yè)賬號和團隊管理功能2.2初識Mugedea2.1新建、管理和發(fā)布H52.3模板管理與素材管理2.4Mugeda中的H5編輯器界面2.2.1新建H5頁面登錄Mugeda后，在工作臺首頁的左側(cè)導(dǎo)航窗格中，單擊“新建作品”按鈕，在打開的下拉列表中羅列了可新建的作品類目。選擇“H5（專業(yè)版編輯器）”選項后，將自動打開Mugeda的H5編輯器界面，并自動打開“新建”對話框，其中羅列了常用的H5頁面尺寸，若需要重新自定義尺寸，可在“自定義”欄中輸入W和H的數(shù)值，然后單擊“創(chuàng)建”按鈕，完成新建操作。01022.2.2管理H5作品1.新建文件夾在“H5作品”頁面中單擊“新建文件夾”按鈕，打開“新建文件夾”對話框。在該對話框的“文件夾名稱”文本框中輸入文件夾名稱，單擊“確定”按鈕。然后，可發(fā)現(xiàn)在作品的左側(cè)有一個新建的文件夾。2.2.2管理H5作品2.移動H5作品選擇要移動的H5作品，此時可發(fā)現(xiàn)選擇的H5作品的左上角的復(fù)選框呈選中狀態(tài)，此時在頁面右側(cè)將出現(xiàn)“移動到”按鈕，單擊該按鈕，打開“移動H5”對話框，在其中選擇目標文件夾，單擊“確定”按鈕。此時將出現(xiàn)“提示”對話框，提示是否進行移動操作，單擊“確定”按鈕，可發(fā)現(xiàn)H5作品已經(jīng)移動到選擇的目標文件夾中。2.2.2管理H5作品3.重命名H5作品為了便于識別H5作品，可對其進行重命名操作。選擇要重命名的H5作品，單擊右下角的按鈕，此時可發(fā)現(xiàn)名稱欄呈可編輯狀態(tài)，在其中輸入新的名稱，然后單擊其他空白區(qū)域，完成重命名操作。2.2.2管理H5作品4.刪除H5作品選擇要刪除的H5作品，單擊作品上方的按鈕，或直接單擊頁面右上角的按“刪除”鈕，會打開“刪除項目”對話框，單擊“確定”按鈕，完成刪除操作。2.2.3發(fā)布H5作品發(fā)布H5作品查看發(fā)布結(jié)果任何作品在第一次發(fā)布時都將顯示發(fā)布進度，發(fā)布成功后顯示“發(fā)布成功！”提示，并會在“發(fā)布地址”欄中顯示作品的地址。2.3初識Mugedea2.1新建、管理和發(fā)布H52.2模板管理與素材管理2.4Mugeda中的H5編輯器界面2.3.1將H5作品轉(zhuǎn)換為模板在“我的作品”頁面中選擇要轉(zhuǎn)換為模板的H5作品，單擊按鈕，按鈕下方會彈出下拉列表，選擇“轉(zhuǎn)為私有模板”選項，彈出模板轉(zhuǎn)換成功提示對話框，單擊“查看”按鈕，進入“我的模板”頁面，查看新生成的模板。2.3.2模板管理預(yù)覽模板選擇需要預(yù)覽的模板，單擊“預(yù)覽”按鈕，可在打開的頁面中預(yù)覽模板效果。編輯模板選擇需要編輯的模板，單擊“使用”按鈕，打開“選擇編輯器”對話框。然后根據(jù)需要選擇對應(yīng)的編輯方式，即可進入編輯頁面中編輯模板。共享模板選擇需要共享的模板，單擊其下方的“共享”超鏈接，在打開的提示對話框中單擊“確認”按鈕，即可在團隊與企業(yè)賬號內(nèi)部成員之間共享該模板。2.3.3素材管理編輯素材選擇需要編輯的素材，單擊按鈕，打開“編輯圖片文件”頁面，在其中可對素材進行刪除、打開、選擇、裁剪、旋轉(zhuǎn)、導(dǎo)出等操作。編輯文件夾在“素材庫”頁面中，單擊“新建文件夾”按鈕，可新建一個文件夾。若要編輯文件夾，可單擊選中的文件夾右側(cè)的按鈕，利用彈出的下拉列表中的選項進行添加子文件夾、編輯文件夾名、刪除文件夾等操作。2.4初識Mugedea2.1新建、管理和發(fā)布H52.2模板管理與素材管理2.3Mugeda中的H5編輯器界面2.4.1菜單欄1.“文件”菜單項“文件”菜單項中包括對H5頁面進行管理和對文件資源進行基本處理的命令。2.“編輯”菜單項“編輯”菜單項中包括H5頁面基本編輯操作的相關(guān)命令，設(shè)計師可通過這些命令增強H5頁面效果，從而創(chuàng)造出豐富多樣的交互內(nèi)容。2.4.1菜單欄3.“視圖”菜單項“視圖”菜單項主要用于調(diào)整Mugeda各個窗口（面板）的顯示與隱藏情況。”4.“動畫”菜單項動畫”菜單項主要用于對動畫進行插入與編輯操作。VS2.4.1菜單欄“拓展工具”菜單項主要用于對第三方應(yīng)用軟件進行相關(guān)操作?！皫椭辈藛雾椫饕糜跒樵O(shè)計師提供有關(guān)Mugeda的幫助和支持。5.“拓展工具”菜單項6.“幫助”菜單項2.4.2工具欄工具欄默認位于菜單欄的下方，主要展示了常用工具。2.4.3“時間線”面板“時間線”面板是用來對畫面進行精確控制的操作區(qū)，可通過把圖層、圖像、幀按時間進行組合和播放來形成動畫?！皶r間線”面板可用于制作多種動畫，如關(guān)鍵幀動畫、進度動畫、變形動畫、遮罩動畫等，是制作動畫的關(guān)鍵。2.4.4工具箱工具箱集合了H5頁面設(shè)計過程中頻繁使用的工具，包含選擇、媒體、繪制、預(yù)置考題、控件、表單、微信七大工具板塊。2.4.5“頁面編輯”面板“頁面編輯”面板主要用于展示H5作品各頁面的縮略圖，以及進行插入、刪除、預(yù)覽和復(fù)制等操作。2.4.6頁面編輯區(qū)頁面編輯區(qū)位于“頁面編輯”面板和“屬性”面板之間，頁面編輯區(qū)主要由頁面適配方式、手機型號、舞臺縮放和舞臺4個部分組成。2.4.6頁面編輯區(qū)1.頁面適配方式選擇好適配方式后，頁面編輯區(qū)中會出現(xiàn)一個方框指示指定設(shè)備的安全框。如果舞臺上添加的內(nèi)容超出了指定設(shè)備的安全框，方框會顯示為紅色，以提示設(shè)計師需要調(diào)整元素位置；如果沒有元素超出安全框，方框會顯示為綠色。為了方便設(shè)計師更好地編輯內(nèi)容，防止內(nèi)容在設(shè)備上超出可見顯示范圍（安全框），Mugeda提供了顯示屏幕適配范圍的輔助線。設(shè)計師只需單擊頁面適配方式右側(cè)的下拉按鈕，在打開的下拉列表中將顯示各種適配方式，設(shè)計師可根據(jù)手機型號選擇合適的適配方式。2.4.6頁面編輯區(qū)2.手機型號“無”選項的效果“華為Mate40”選項的安全框效果“小米2”選項的安全框效果2.4.6頁面編輯區(qū)3.舞臺縮放4.舞臺舞臺位于頁面編輯區(qū)中間，是設(shè)計H5頁面的核心區(qū)域，也是H5作品的顯示窗口。發(fā)布H5作品后，用戶只能瀏覽舞臺中的內(nèi)容，而舞臺四周灰色區(qū)域中的內(nèi)容將不會顯示。VS舞臺縮放主要用于調(diào)整舞臺的縮放比例，方便H5設(shè)計師在創(chuàng)作過程中觀察作品局部的細節(jié)或查看H5作品的整體效果。2.4.7“屬性”面板基礎(chǔ)屬性主要用于對基礎(chǔ)屬性，如作品尺寸、填充色、邊框色、邊框類型、透明度、透視度等進行設(shè)置。高級屬性主要用于對預(yù)置動畫、濾鏡、動作等進行設(shè)置。專有屬性主要用于設(shè)置在舞臺上所選元素的特有屬性，所選元素不同，其屬性內(nèi)容也存在區(qū)別。祝學(xué)習(xí)進步?。5頁面設(shè)計（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字現(xiàn)代

編著技術(shù)數(shù)字第3章繪制與調(diào)整圖形H5頁面設(shè)計（Mugeda版）（微課版）3.1繪制圖形3.2調(diào)整圖形3.3圖形的排列與組合3.1.1直線繪制直線繪制斜線繪制豎線繪制直線后，在右側(cè)的“屬性”面板中可設(shè)置直線的基本屬性，包括長、寬、高，以及填充顏色、位置等。除此之外，在“端點”下拉列表中可設(shè)置端點樣式，包括尖角、圓角、方角。3.1.2矩形繪制矩繪制正方形矩形可用作H5頁面的背景裝飾，增強頁面的美感和層次感；也可用于繪制圖表和展示進度條；還可用作圖片或文字的容器，以方便在頁面中凸顯圖片和文字。在工具箱中選擇“矩形”工具或按【R】鍵，在舞臺上按住鼠標左鍵不放并向某個方向拖曳可繪制矩形。如果拖曳的同時按住Shift】鍵，可繪制正方形。3.1.3橢圓繪制圓“OPPOR9s拍照體驗季”H5頁面效果橢圓可以用來強調(diào)H5頁面中的重點內(nèi)容或元素，也可作為背景或是裝飾元素以提升頁面美觀度。在工具箱中選擇“橢圓”工具或按【E】鍵，在舞臺上按住鼠標左鍵不放并拖曳至某個方向可繪制橢圓，如果拖曳的同時按住【Shift】鍵，可繪制圓形。該頁面采用圓形作為基本框架，將主要內(nèi)容放在圓形內(nèi)使視覺效果更加集中。3.1.4圓角矩形繪制圓角矩形并設(shè)置專有屬性在工具箱中選擇“圓角矩形”工具或是按【O】鍵，在舞臺上按住鼠標左鍵不放并拖曳至某個方向可繪制圓角矩形。繪制完成后，在右側(cè)的“屬性”面板中，除了可設(shè)置基本屬性如長、寬、高、填充色、邊框色、邊框類型等外，還可在“專有屬性”欄中設(shè)置圓角半徑、背景圖片、圖片位置、圖片尺寸、水平偏移、垂直偏移、端點、接合等。3.1.5多邊形選擇“多邊形”工具或按【P】鍵，在舞臺上按住鼠標左鍵不放并拖曳，可繪制多邊形。多邊形可用來強調(diào)H5頁面中的關(guān)鍵區(qū)域及高亮交互元素，常用于頁面背景的制作。繪制完成后，同樣可以在右側(cè)的“屬性”面板中設(shè)置多邊形的屬性，其設(shè)置方法與其他圖形類似。3.1.6曲線使用“曲線”工具可繪制各種帶有弧度的圖形，如彎曲的河流、月亮等圖形；也可繪制圖表，如折線圖、曲線圖、雷達圖等，獨特的曲線形狀能起到提高辨識度和美觀度的作用。在工具箱中選擇“曲線”工具或按【C】鍵，在舞臺中單擊確定起點，將鼠標指針移動到線段的終點位置，按住鼠標左鍵不放，進行拖動將出現(xiàn)控制柄，拖動控制柄可調(diào)整所繪線段的弧度，使其形成曲線效果。3.1.7實戰(zhàn)案例：制作旅行網(wǎng)圖標（1）新建文件（2）繪制橢圓（3）設(shè)置寬和高3.1.7實戰(zhàn)案例：制作旅行網(wǎng)圖標（4）調(diào)整顏色（5）繪制曲線（6）取消邊框效果3.1.7實戰(zhàn)案例：制作旅行網(wǎng)圖標（7）繪制并調(diào)整山脈形狀的顏色（8）繪制輪船形狀（9）繪制其他圖形3.2繪制圖形3.1調(diào)整圖形3.3圖形的排列與組合3.2.1調(diào)整圖形平滑度在Mugeda中調(diào)整圖形平滑度時可先選擇需要調(diào)整的圖形，然后編輯圖形的節(jié)點。使用“選擇”工具在舞臺中單擊想要調(diào)整的圖形即可選擇該圖形，然后選擇“節(jié)點”工具，此時可發(fā)現(xiàn)選擇的圖形將顯示所有的節(jié)點。調(diào)整圖形平滑度還可通過重置、刪除和添加節(jié)點來完成，選擇要編輯的節(jié)點，單擊鼠標右鍵，在彈出的快捷菜單中選擇“節(jié)點”命令，在彈出的子菜單中羅列了“重置選中節(jié)點”“刪除選中節(jié)點”“添加節(jié)點（細分）”3種命令。3.2.2變換圖形形態(tài)重置選中的節(jié)點刪除選中的節(jié)點添加節(jié)點3.2.3實戰(zhàn)案例：繪制小貓形狀（1）繪制小貓的大致輪廓（2）填充顏色并重置選中節(jié)點（3）調(diào)整冰添加節(jié)點3.2.3實戰(zhàn)案例：繪制小貓形狀（4）繪制小貓耳朵（5）繪制小貓眼睛（6）繪制其他細節(jié)3.3繪制圖形3.1調(diào)整圖形3.2圖形的排列與組合3.3.1排列使用Mugeda的排列功能可以調(diào)整圖形的上下順序。只需選擇要排列的圖形，單擊鼠標右鍵，在彈出的快捷菜單中選擇“排列”命令，在彈出的子菜單中羅列了“上移一層”“下移一層”“移至頂層”“移至底層”命令，根據(jù)需要選擇排列命令即可調(diào)整圖形排列順序。3.3.2對齊選擇需要對齊的圖形（2個及以上），單擊鼠標右鍵，在彈出的快捷菜單中選擇“對齊”命令，在彈出的子菜單中選擇相應(yīng)的對齊命令即可進行對齊；或選擇【編輯】/【對齊】命令，在彈出的子菜單中選擇對齊命令，也可對齊圖形。3.3.3變形選擇需要變形的圖形，單擊鼠標右鍵，在彈出的快捷菜單中選擇“變形”命令；或選擇【編輯】/【變形】命令，在彈出的子菜單中選擇相應(yīng)的變形命令即可進行變形操作3.3.4組合選擇同一個圖層中需要組合的圖形，選擇【對象】/【組】/【組合】命令，或按【Ctrl+G】組合鍵，或單擊鼠標右鍵后在彈出的快捷菜單中選擇【組】/【組合】命令，即可組合所選對象。組合后單擊該組中的任何一個對象，都將選擇該組的所有對象。除此之外，若需要重新編輯組合中的圖形，可選擇【對象】/【組】/【取消組合】命令，取消圖形組合。3.3.5合并合并就是對兩個或兩個以上的圖形（注意該圖形主要指在Mugeda中繪制的可編輯圖形）進行合并、相交或裁剪處理，使其成為一個新的圖形。選中兩個或兩個以上的圖形，單擊鼠標右鍵，在彈出的快捷菜單中選擇“合并”命令，在彈出的子菜單中羅列了“合并”“相交”“用上層物體裁剪”“用下層物體裁剪”4個命令。3.3.5合并合并相交用上層物體裁剪用下層物體裁剪3.3.6實戰(zhàn)案例：繪制音樂圖標（1）繪制形狀并用上層物體裁剪（2）繪制圓角矩形并用上層物體裁剪（3）翻轉(zhuǎn)圖形并繪制不同大小的矩形，對齊冰復(fù)制和移動矩形祝學(xué)習(xí)進步??！H5頁面設(shè)計（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字現(xiàn)代

編著技術(shù)數(shù)字第4章添加媒體文件與文字H5頁面設(shè)計（Mugeda版）（微課版）4.1添加媒體文件4.2輸入與編輯文字4.1.1添加圖片批量上傳：單擊“批量上傳”選項卡，將要上傳的多個圖片拖曳到“批量上傳”選項卡下的空白處，此時空白處將會出現(xiàn)綠色虛線框，釋放鼠標即可添加圖片，稍等片刻便可在空白處查看添加的圖片。選擇【文件】/【導(dǎo)入】/【圖片（PNG/JPG/GIF/SVG）】命令，或選擇“導(dǎo)入圖片”工具。4.1.1添加圖片掃碼上傳輸入網(wǎng)址單擊“輸入網(wǎng)址”選項卡，在地址欄中輸入要上傳的圖片文件鏈接，單擊“抓取”按鈕，彈出提示對話框，單擊“確定”按鈕。單擊“掃碼上傳”選項卡，使用手機或者其他移動終端掃描出現(xiàn)的二維碼，然后在移動終端中選擇需要上傳的圖片，單擊“確定”按鈕，即可將移動終端中的圖片上傳到素材庫中。4.1.2添加音頻/音效在Mugeda中添加音頻/音效主要使用“導(dǎo)入聲音”工具，選擇該工具后，將自動打開“素材庫”對話框，選擇要添加的音頻/音效，單擊“添加”按鈕。4.1.3添加視頻在Mugeda中添加視頻可選擇“導(dǎo)入視頻”工具，將打開“素材庫”對話框，選擇要添加的視頻，然后單擊“添加”按鈕，完成視頻的添加。4.1.4添加幻燈片選擇“幻燈片”工具，然后在舞臺上拖曳鼠標，繪制出一個幻燈片圖形，選擇該圖形，在“屬性”面板中可設(shè)置幻燈片的寬度、高度、透明度等，在“專有屬性”欄中可設(shè)置幻燈片的展示方向、顯示方式、自動播放，以及添加圖片列表等。4.1.5添加網(wǎng)頁選擇“網(wǎng)頁”工具，然后在舞臺上拖曳鼠標，繪制出一個網(wǎng)頁圖形，選擇該圖形，在“屬性”面板中可設(shè)置網(wǎng)頁的寬度、高度、透明度等，在“專有屬性”欄的“網(wǎng)頁地址”輸入框內(nèi)輸入網(wǎng)址可添加網(wǎng)頁。添加網(wǎng)頁后，單擊工具欄的“內(nèi)容共享”按鈕，用手機掃描出現(xiàn)的二維碼，即可查看網(wǎng)頁效果4.1.6實戰(zhàn)案例：制作旅行宣傳H5頁面①添加文件夾②上傳并添加背景圖片4.1.6實戰(zhàn)案例：制作旅行宣傳H5頁面③上傳音樂④添加新頁面⑤調(diào)整圖片后繪制幻燈片圖形4.1.6實戰(zhàn)案例：制作旅行宣傳H5頁面⑥添加幻燈片⑦選擇幻燈片⑧添加視頻⑨添加圖片4.1.6實戰(zhàn)案例：制作旅行宣傳H5頁面預(yù)覽效果4.1.7添加圖表①使用圖表工具繪制矩形框

②顯示曲線圖表

③編輯圖表數(shù)據(jù)4.1.7添加圖表④選擇圖表類型

⑤設(shè)置圖表內(nèi)容4.1.8添加虛擬現(xiàn)實在工具箱中選擇“虛擬現(xiàn)實”工具，在舞臺上拖動鼠標，繪制一個虛擬現(xiàn)實圖形，然后會自動打開“導(dǎo)入全景虛擬場景”對話框。4.1.9添加直播在工具箱中選擇“直播”工具，在舞臺上拖曳鼠標，繪制一個直播圖形，選中直播圖形，在“屬性”面板“專有屬性”欄的“直播地址”輸入框中輸入直播地址（僅支持手機播放直播流內(nèi)容，PC端無法直接預(yù)覽）。4.1.10實戰(zhàn)案例：制作年中總結(jié)H5頁面①添加素材并新建頁面②添加場景③設(shè)置場景1熱點4.1.10實戰(zhàn)案例：制作年中總結(jié)H5頁面⑤調(diào)整圖片大?、尢砑訄D表并選擇圖表類型④設(shè)置場景2熱點4.1.10實戰(zhàn)案例：制作年中總結(jié)H5頁面⑧添加直播⑦設(shè)置圖表內(nèi)容添加媒體文件4.14.2輸入與編輯文字4.2.1輸入文字在Mugeda中輸入文字可先選擇“文字”工具，在舞臺中單擊，將出現(xiàn)文本框。刪除文本框中的默認內(nèi)容“Text”，即可輸入需要的文字內(nèi)容，如輸入“大會開始”文字。輸入文字后，在文本框以外的舞臺任意位置單擊以結(jié)束編輯狀態(tài)，文字將被完整地顯示出來。4.2.2編輯文字設(shè)置預(yù)置文本、文字樣式、字體、大小、垂直對齊、文字超出時、行高、字間距等，都可通過“屬性”面板中的“專有屬性”欄進行操作。此外，在“字體”下拉列表中向上拖動右側(cè)的滑塊，將出現(xiàn)“云字體”選項，單擊“選擇云字體”按鈕，即可上傳或選擇使用云字體（僅支持TTF格式）。4.2.3實戰(zhàn)案例：制作七夕節(jié)H5頁面①輸入文字②調(diào)整文字屬性③拖動文字調(diào)整點4.2.7實戰(zhàn)案例：制作企業(yè)員工評選H5頁面④復(fù)制并修改文字⑤輸入并編輯文字⑥直排顯示文字現(xiàn)代

編著技術(shù)數(shù)字祝學(xué)習(xí)進步??！H5頁面設(shè)計（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字第5章幀動畫與動畫技術(shù)H5頁面設(shè)計（Mugeda版）（微課版）5.1幀動畫5.2特型動畫5.3預(yù)置動畫5.1.1幀的基本類型播放標記：該標記是一條黃色的指示線，主要有兩個作用，一是瀏覽動畫，二是選擇指定的幀。幀編號：用于提示當(dāng)前幀數(shù)，每10幀顯示一個編號。幀刻度：每一個刻度代表一個幀。5.1.1幀的基本類型關(guān)鍵幀關(guān)鍵幀是指在動畫播放過程中，定義了動畫關(guān)鍵變化環(huán)節(jié)的幀。關(guān)鍵幀在“時間線”面板中以黑色小圓表示?？瞻钻P(guān)鍵幀空白關(guān)鍵幀就是關(guān)鍵幀中沒有任何對象，它主要用于在關(guān)鍵幀與關(guān)鍵幀之間形成間隔?？瞻钻P(guān)鍵幀在“時間線”面板中以白色小圓表示，若在空白關(guān)鍵幀中添加內(nèi)容，該空白關(guān)鍵幀將會變?yōu)殛P(guān)鍵幀。普通幀普通幀是指常用幀，它在“時間線”面板中以灰色方塊表示，具有過濾和延長內(nèi)容顯示的功能。普通幀越多，關(guān)鍵幀與關(guān)鍵幀之間的過渡就越緩慢。0102035.1.2幀的基本操作1.插入幀插入關(guān)鍵幀插入普通幀單擊想要插入普通幀的位置，選擇【動畫】/【插入幀】命令，或按【F5】鍵。單擊想要插入關(guān)鍵幀的位置，選擇【動畫】/【插入關(guān)鍵幀】命令，或按【F6】鍵。2.選擇幀編輯幀前，需要選擇該幀。若要選擇一個幀，可以單擊該幀將其選中。若要選擇多個連續(xù)的幀，可以拖動鼠標框選。5.1.2幀的基本操作選擇要復(fù)制的幀后，可以通過【動畫】/【復(fù)制幀】命令，或按【Ctrl+C】組合鍵復(fù)制幀；定位鼠標指針到需要粘貼的位置后，再通過【動畫】/【粘貼幀】命令，或按【Ctrl+V】組合鍵粘貼幀。3.復(fù)制幀、粘貼幀4.刪除幀選擇要刪除的幀，單擊鼠標右鍵，在彈出的快捷菜單中選擇“刪除幀（可多選）”命令，或按【Ctrl+F5】組合鍵，可刪除普通幀；選擇“刪除關(guān)鍵幀（可多選）”命令，或按【Ctrl+F6】組合鍵，可刪除關(guān)鍵幀。5.1.3關(guān)鍵幀動畫關(guān)鍵幀動畫是通過設(shè)定動畫的起點幀和終點幀兩個關(guān)鍵幀，然后通過軟件自動生成動畫過程的動畫形式。制作時在終點幀上單擊鼠標右鍵，在彈出的快捷菜單中選擇“插入關(guān)鍵幀動畫”命令，此時起點幀和終點幀之間的區(qū)域?qū)⒊示G色顯示，然后通過調(diào)整終點幀或起點幀上的圖形，可生成連續(xù)的動畫效果，而起點幀和終點幀的中間區(qū)域為過渡幀。5.1.4序列幀動畫序列幀動畫是把多張靜態(tài)圖片按指定順序播放，使畫面具有連貫性的動畫。單擊需要添加序列幀動畫的幀位置，打開“素材庫”對話框，勾選“全選”“以序列幀形式添加”復(fù)選框，單擊“添加”按鈕，此時舞臺中將生成序列幀動畫。5.1.5實戰(zhàn)案例：制作汽車公司H5進入頁和首頁①添加序列幀動畫素材并查看效果②復(fù)制并粘貼關(guān)鍵幀5.1.5實戰(zhàn)案例：制作汽車公司H5進入頁和首頁③添加圖層⑤調(diào)整文字④設(shè)置文字專有屬性5.1.5實戰(zhàn)案例：制作汽車公司H5進入頁和首頁⑥新建頁面⑧輸入并設(shè)置文字⑦添加背景幀動畫5.15.2特型動畫5.3預(yù)置動畫5.2.1元件動畫元件動畫就是將這些元件看作一個一個的“零件”，然后用這些“零件”進行拼裝，從而快速組成完整的動畫。制作元件動畫的方法為：選擇要轉(zhuǎn)換為元件的圖形，單擊鼠標右鍵，在彈出的快捷菜單中選擇“轉(zhuǎn)換為元件”命令，將圖形轉(zhuǎn)換為元件。雙擊元件，進入該元件的編輯頁面，在其中可編輯元件中的內(nèi)容。打開“元件”面板，在其中可進行元件的新建、復(fù)制、導(dǎo)入、導(dǎo)出以及新建文件夾、導(dǎo)出至元件庫、編輯元件、添加到繪畫板、刪除元件等操作。5.2.2路徑動畫路徑動畫即對象沿著繪制的路徑運動的動畫。在制作時需先在舞臺中添加一個圖形，然后在“時間線”面板中進行路徑的編輯。①②③④⑤⑥⑦5.2.3進度動畫進度動畫主要按照圖形的繪制順序或文字的編輯順序來實現(xiàn)動態(tài)效果，可實現(xiàn)繪制線條過程的效果和文字打字機的效果。在制作時可繪制多個線性圖形，然后在“時間線”面板中確定路徑的終點幀，在其上單擊鼠標右鍵，在彈出的快捷菜單中選擇“插入進度動畫”命令。繪制圖形后插入進度動畫5.2.4變形動畫1.形狀變形動畫形狀變形動畫可以實現(xiàn)將一個形狀變成另一個形狀的動畫效果。以將矩形變?yōu)槿切螢槔?，可先使用“矩形”工具繪制矩形，然后確定終點幀，并在其上單擊鼠標右鍵，在彈出的快捷菜單中選擇“插入變形動畫”命令。選中終點幀，使用“節(jié)點”工具拖動矩形上方的錨點，使矩形變成三角形。5.2.4變形動畫2.文字變形動畫文字變形動畫可以讓文字實現(xiàn)由聚集到展開的效果，其主要通過設(shè)置關(guān)鍵幀上文本屬性的變化，如字體顏色、字體大小、行間距、字間距等，從而達到文字變形的效果。只需使用“文字”工具在舞臺上輸入文字，然后確定終點幀，并在該幀上單擊鼠標右鍵，在彈出的快捷菜單中選擇“插入變形動畫”命令。在“屬性”面板的“專有屬性”欄中調(diào)整字體、大小、對齊方式等。5.2.5遮罩動畫遮罩層用于控制顯示的范圍及形狀，被遮罩層則主要顯示動畫內(nèi)容，如遮罩層中是一個橢圓圖形。被遮罩層是一個卡通場景，則用戶只能看到這個橢圓中所顯示的卡通場景效果制作遮罩動畫時，可先選擇需要作為遮罩層的圖層，在“時間線”面板中單擊“轉(zhuǎn)為遮罩層”按鈕，將普通圖層轉(zhuǎn)換為遮罩層；若需要只顯示被遮罩層，可單擊“添加到遮罩層”按鈕；若要顯示遮罩內(nèi)容，可單擊“切換遮罩顯示”按鈕。5.2.6實戰(zhàn)案例：制作H5加載動畫①導(dǎo)入素材并調(diào)整順序②轉(zhuǎn)換圖形為元件③向下拖曳圖形④插入關(guān)鍵幀動畫5.2.6實戰(zhàn)案例：制作H5加載動畫⑤調(diào)整氣球并插入關(guān)鍵幀動畫⑥調(diào)整氣球并插入關(guān)鍵幀動畫⑦插入其他關(guān)鍵幀動畫5.2.6實戰(zhàn)案例：制作H5加載動畫⑧自定義路徑⑨調(diào)整路徑線⑩縮小文字5.2.6實戰(zhàn)案例：制作H5加載動畫?新建“遮罩”圖層并插入關(guān)鍵幀?繪制圓角矩形并粘貼圖層?新建遮罩圖層后插入關(guān)鍵幀動畫?移動被遮罩元素?轉(zhuǎn)為遮罩層5.2.6實戰(zhàn)案例：制作H5加載動畫?輸入文字和插入進度動畫?調(diào)整其他幀?添加濾鏡5.3幀動畫5.1特型動畫5.2預(yù)置動畫5.3.1添加預(yù)置動畫在“屬性”面板中單擊“預(yù)置動畫”后的圖標，可打開“添加預(yù)置動畫”面板，其中羅列了進入、強調(diào)、退出3種動畫類型。添加預(yù)置動畫需要先選擇添加預(yù)置動畫的素材，單擊素材右側(cè)的圖標。將鼠標指針移動到預(yù)置動畫選項上可在舞臺上查看該動畫效果，單擊選擇預(yù)置動畫，便可完成預(yù)置動畫的添加，添加后在素材右側(cè)將會顯示該動畫的藍色圖標5.3.2設(shè)置預(yù)置動畫添加預(yù)置動畫后，單擊素材右側(cè)的藍色圖標，或單擊“屬性”面板“高級屬性”欄中所選擇動畫右側(cè)的按鈕，可打開“動畫選項”對話框，在其中設(shè)置時長、延遲和方向后，單擊“確定”按鈕。除此之外，在“高級屬性”欄中拖動“自動播放”“循環(huán)播放”右側(cè)的滑塊還可設(shè)置播放方式。5.3.3自定義預(yù)置動畫若Mugeda自帶的預(yù)置動畫不符合設(shè)計需求，可先在“時間線”面板中制作需要的動畫效果，然后在完成后的動畫的過渡幀上單擊鼠標右鍵，在彈出的快捷菜單中選擇“保存為預(yù)置動畫”命令。打開“修改計時”對話框，在其中可設(shè)置時長、延遲等信息，單擊按鈕。再次打開“添加預(yù)置動畫”面板，便可在“自定義”選項卡中查看添加的預(yù)置動畫。5.3.4實戰(zhàn)案例：制作元旦H5頁面首頁①選擇預(yù)置動畫②通過“屬性”面板設(shè)置預(yù)置動畫5.3.4實戰(zhàn)案例：制作元旦H5頁面首頁③選擇“螺旋進入”預(yù)置動畫④設(shè)置動畫選項5.3.4實戰(zhàn)案例：制作元旦H5頁面首頁⑤效果預(yù)覽現(xiàn)代

編著技術(shù)數(shù)字祝學(xué)習(xí)進步??！H5頁面設(shè)計（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字第6章行為、觸發(fā)條件與控件H5頁面設(shè)計（Mugeda版）（微課版）6.1行為與觸發(fā)條件6.2控件6.1.1認識行為在H5頁面中，行為指的是用戶與頁面之間的交互和響應(yīng)。H5頁面通常包含了各種動態(tài)元素和交互功能，通過用戶的操作或事件觸發(fā)，頁面會產(chǎn)生相應(yīng)的響應(yīng)和動作，這些響應(yīng)和動作就是頁面中的行為。在Mugeda中，行為主要用于解決幀鏈接和頁鏈接的問題，以及物體與物體之間的關(guān)聯(lián)問題。點擊按鈕滑動頁面播放音/視頻6.1.2編輯行為在Mugeda中，行為可以添加到任意元素上，設(shè)計師只需選擇任意的圖形，單擊按鈕或按【X】鍵，打開“編輯行為”對話框，在左側(cè)的“行為”欄中羅列了常用的行為選項。6.1.3設(shè)置觸發(fā)條件選擇符合需求的行為后，在“編輯行為”對話框的右側(cè)可設(shè)置行為的觸發(fā)條件。觸發(fā)條件與行為相對應(yīng)，是控制行為的方式。①選擇觸發(fā)條件②設(shè)置參數(shù)“播放聲音”行為的觸發(fā)條件設(shè)置6.1.4實戰(zhàn)案例：為游戲H5首頁按鈕添加行為①添加素材②編輯行為③添加行為后的效果行為與觸發(fā)條件6.16.2控件6.2.1陀螺儀控件在工具箱中選擇“陀螺儀”工具，在舞臺中單擊，會出現(xiàn)陀螺儀”工具的圖標和一串?dāng)?shù)字，系統(tǒng)自動將陀螺儀命名為“陀螺儀1”。在其“屬性”面板中可調(diào)整陀螺儀的各個屬性，改變其顏色、文本內(nèi)容、陀螺儀類型等。陀螺儀控件主要用于制作外力感應(yīng)交互效果，如當(dāng)用戶晃動手機時，H5頁面中的物體將跟隨手機的晃動角度進行運動。添加陀螺儀陀螺儀的旋轉(zhuǎn)類型6.2.2點贊控件選擇繪制的愛心圖案，在“屬性”面板中可設(shè)置其屬性，包括文字位置、文字顏色、文字大小、不允許撤銷、允許多次點贊、隱藏提交提示、多次點贊間隔、每次增加數(shù)等。選擇工具箱中的“點贊”工具，在舞臺中拖動鼠標，確定點贊按鈕的尺寸后，釋放鼠標左鍵，將會出現(xiàn)一個示意圖案（一般為愛心圖案），示意圖案上方的數(shù)字為點贊的數(shù)量。6.2.2點贊控件如果需要直觀地顯示點贊數(shù)量，可先在舞臺上添加一個文本框，在文本框中輸入數(shù)值“0”，選擇繪制的愛心圖案，單擊右側(cè)的按鈕，打開“編輯行為”對話框。在左側(cè)選擇“屬性控制”展開列表中的“改變元素屬性”選項，然后設(shè)置觸發(fā)條件為“屬性改變”。單擊按鈕，打開“參數(shù)”對話框，在其中設(shè)置對應(yīng)的參數(shù)，如右圖所示。6.2.3擦玻璃控件選擇繪制的形狀。在“屬性”面板的“專有屬性”欄中可設(shè)置其各種屬性，如背景圖片、前景圖片、圖片位置、圖片尺寸、水平偏移、垂直偏移、橡皮擦大小、剩余比例、端點、接合等。在Mugeda中使用擦玻璃控件可通過手指拖動形成玻璃擦除效果。只需選擇“擦玻璃”工具，在舞臺中拖動鼠標，確定玻璃區(qū)域。6.2.3擦玻璃控件另外，擦玻璃控件還有特有的觸發(fā)條件，選擇繪制的擦玻璃控件形狀，單擊按鈕，打開“編輯行為”對話框，在左側(cè)任意選擇觸發(fā)行為，如選擇“下一頁”選項，在右側(cè)“觸發(fā)條件”下拉列表中選擇“擦玻璃完成”選項。6.2.4投票控件選擇“投票”工具，在舞臺中單擊，將自動打開“投票數(shù)據(jù)設(shè)置”對話框，在其中可設(shè)置相關(guān)參數(shù)，完成后單擊“確定”按鈕。此時，數(shù)據(jù)庫中會生成一個投票數(shù)據(jù)點，同時會在舞臺中生成投票控件。投票控件是一個后臺數(shù)據(jù)組件，添加后會在服務(wù)器中生成一個投票數(shù)據(jù)記錄，完成記錄后還需要添加投票行為才能提交投票結(jié)果。6.2.4投票控件選擇設(shè)置的投票對象，單擊按鈕，打開“編輯行為”對話框，選擇“數(shù)據(jù)服務(wù)”展開列表中的“投票”選項，在右側(cè)單擊

按鈕，打開“參數(shù)”對話框，在其中設(shè)置投票行為。由于在預(yù)覽H5頁面時投票控件不會顯示，為了方便用戶查看投票的內(nèi)容，通常還需要單獨設(shè)置每個投票對象。設(shè)置投票對象設(shè)置參數(shù)6.2.5抽獎控件選擇“抽獎”工具，在舞臺中單擊，將自動打開“抽獎設(shè)置”對話框，在其中可對抽獎狀態(tài)、活動期間抽獎次數(shù)、再次抽獎等待時間、抽獎模式、獎項設(shè)置、領(lǐng)獎碼等進行設(shè)置。6.2.5抽獎控件選擇繪制的抽獎按鈕，單擊按鈕，打開“編輯行為”對話框，選擇左側(cè)“數(shù)據(jù)服務(wù)”展開列表中的“抽獎”選項，在右側(cè)的“觸發(fā)條件”下拉列表中選擇“點擊”選項，單擊按鈕，打開“參數(shù)”對話框，對抽獎行為進行設(shè)置由于抽獎控件是一個后臺數(shù)據(jù)組件，不會在舞臺上顯示，添加后會在服務(wù)器中生成一個抽獎數(shù)據(jù)記錄，設(shè)計師需要為該組件添加抽獎行為才能提交抽獎結(jié)果。添加抽獎設(shè)置參數(shù)6.2.6其他控件用于創(chuàng)建定時事件和動畫。通過使用定時器控件，可以設(shè)定一個時間間隔，在該時間間隔內(nèi)執(zhí)行特定的操作或觸發(fā)某些事件。選擇“定時器”工具，在舞臺中單擊創(chuàng)建控件，在右側(cè)的“屬性”面板中可設(shè)置定時器的參數(shù)，如精度、記時方向、是否循環(huán)、不可見時、長度等。定時器繪畫板用于創(chuàng)建繪畫效果的控件，可以為用戶提供自由繪畫的體驗，并能夠?qū)崿F(xiàn)交互和多樣化的創(chuàng)作內(nèi)容。選擇“繪畫板”工具，在舞臺中拖動鼠標，繪制出一個繪畫板，通過調(diào)整“調(diào)整繪畫板屬性”行為，可設(shè)置繪畫板、畫筆線寬、畫筆顏色等，提升繪畫板的可操作性。用于在一些特定內(nèi)容（如教育類測試課件等）中允許用戶連接兩個元素，從而實現(xiàn)特定的交互效果。選擇“連線”工具，在舞臺中拖動鼠標，可繪制連線。連線6.2.6其他控件用戶可指定一個拖放容器來接收拖放元素，以實現(xiàn)特定的交互效果。選擇“拖放容器”工具，在舞臺中拖動鼠標，繪制拖放容器控件，在右側(cè)的“屬性”面板中可設(shè)置放置提示、提示顏色、允許多次拖放、自動復(fù)位等。用于在一些特定內(nèi)容（如測試類H5頁面等）中設(shè)置特定時間。選擇“計時器”工具，在舞臺中單擊可生成計時器內(nèi)容，在右側(cè)的“屬性”面板中可設(shè)置計時方向、自動開始、計時方式、顯示格式、時間長度、長度單位、是否循環(huán)等。用于按照一定規(guī)則對參加活動的用戶進行排序并顯示結(jié)果。選擇“排行榜”工具，在舞臺中單擊，打開“排行榜”對話框，在其中可設(shè)置上榜數(shù)目、上榜分數(shù)、分數(shù)規(guī)則等。用于設(shè)置簽到內(nèi)容，包括簽到的開始時間、結(jié)束時間、簽到規(guī)則等。選擇“簽到”工具，在舞臺中單擊，打開“簽到”對話框，在其中可設(shè)置開始日期、結(jié)束日期、簽到規(guī)則等。拖放容器計時器排行榜簽到6.2.7實戰(zhàn)案例：制作企業(yè)員工評選H5頁面①添加素材②縮小文字③制作按鈕6.2.7實戰(zhàn)案例：制作企業(yè)員工評選H5頁面④編輯行為⑤繪制形狀6.2.7實戰(zhàn)案例：制作企業(yè)員工評選H5頁面⑥設(shè)置擦除圖片⑦設(shè)置投票數(shù)據(jù)6.2.7實戰(zhàn)案例：制作企業(yè)員工評選H5頁面⑧完成投票插件添加⑨輸入文字⑩設(shè)置點擊行為的事件參數(shù)6.2.7實戰(zhàn)案例：制作企業(yè)員工評選H5頁面預(yù)覽效果現(xiàn)代

編著技術(shù)數(shù)字祝學(xué)習(xí)進步！！H5頁面設(shè)計（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字第7章關(guān)聯(lián)與表單H5頁面設(shè)計（Mugeda版）（微課版）7.1關(guān)聯(lián)7.2表單7.1.1舞臺動畫關(guān)聯(lián)關(guān)聯(lián)即互相貫連，是指事物之間互相牽連和影響。在Mugeda中，關(guān)聯(lián)是指通過連接和交互來建立頁面元素之間的邏輯關(guān)系和互動效果。設(shè)計師使用Mugeda的關(guān)聯(lián)功能可實現(xiàn)更復(fù)雜和豐富的H5頁面效果。7.1.2實戰(zhàn)案例：為H5頁面添加舞臺動畫關(guān)聯(lián)①添加素材②設(shè)置圖標拖動方式7.1.2實戰(zhàn)案例：為H5頁面添加舞臺動畫關(guān)聯(lián)③啟用關(guān)聯(lián)④設(shè)置關(guān)聯(lián)內(nèi)容⑤編輯行為7.1.2實戰(zhàn)案例：為H5頁面添加舞臺動畫關(guān)聯(lián)⑥查看效果7.1.3元件動畫關(guān)聯(lián)選擇需要關(guān)聯(lián)的元件，在“屬性”面板中設(shè)置該元件的名稱，然后設(shè)置“拖動”方式，再設(shè)置“動畫關(guān)聯(lián)”為“啟用”，單擊右側(cè)的“關(guān)聯(lián)”按鈕，在其下方將顯示關(guān)聯(lián)的相關(guān)屬性，在其中可設(shè)置元件動畫關(guān)聯(lián)的參數(shù)。7.1.4基礎(chǔ)屬性關(guān)聯(lián)1.公式關(guān)聯(lián)在“關(guān)聯(lián)方式”下拉列表中選擇“公式關(guān)聯(lián)”選項，在下方將出現(xiàn)“被控量=”選項，在右側(cè)的文本框中可通過輸入關(guān)聯(lián)公式來完成公式關(guān)聯(lián)，如設(shè)置“被控量=”為“關(guān)聯(lián)屬性”，以右圖所示的數(shù)據(jù)為例，被控對象的值等于“文字1”的“旋轉(zhuǎn)角度Z”的值。同理，若設(shè)置“被控量=”為“關(guān)聯(lián)屬性×3”，即被控對象的值等于“文字1”的“旋轉(zhuǎn)角度Z”值的3倍。7.1.4基礎(chǔ)屬性關(guān)聯(lián)2.自動關(guān)聯(lián)自動關(guān)聯(lián)是一種更加便捷的方式，可自動對關(guān)聯(lián)屬性和被控制對象進行關(guān)聯(lián)，如通過拖動進度條來控制動畫的播放。①繪制關(guān)聯(lián)對象②設(shè)置關(guān)聯(lián)屬性③查看效果關(guān)聯(lián)7.17.2表單7.2.1自定義表單1.輸入框輸入框是表單中的一種常見組件，提供了一個可編輯的區(qū)域，用戶可以在其中輸入相關(guān)信息以響應(yīng)特定