TML5多媒體作品以其對各種平臺的兼容而見長,目前已獲得了廣泛的應用。如果我們需要制作自己的HTML5多媒體作品,一個方便之選就是利用現成的在線制作工具“百度H5”。
首先訪問“百度H5”網頁(https://h5.baidu.com/),可以看到非常簡單的頁面,僅有“我的H5”和“我的模板”兩個選項。其中“我的模板”是通過套用模板的方式來制作HTML5作品,而“我的H5”則可以完全靠自定義各種參數來自由創作,制作好的作品也會顯示在這里(圖1)。
1. 通過創意模板輕松制作
在首頁中選擇“我的模板”,隨后會進入一個模板展示頁面,這些都是設計者們分享的模板。根據你所要設計的作品的類別,可以按類選擇一個類似的作品作為制作的模板,然后在此基礎上進行修改,即可快速形成自己的多媒體作品(圖2)。
比如要制作一個招生方面的媒體作品,選擇如圖所示的秋季班招生模板,然后點擊右下角的“使用模板”按鈕(圖3)。
接下來先要為作品命名,例如“我們的幼兒園招生了”。輸入完畢點擊“確定”按鈕(圖4)。
隨后進入實質性的模板修改編輯階段。對于不合適的內容,可先刪除頁面元素再添加。點擊“文本”菜單插入所需文本內容。同理,可使用右邊的“媒體”按鈕插入圖片、音頻、視頻、嵌入視頻、全景圖等內容。如果是PSD圖片,則直接用PSD菜單載入。若版面中需要插入一些圖標或形狀,則點擊“圖形”菜單選擇添加(圖5)。
此外,對于作品中所要用到的展示數據,可以通過插入圖表、表單等方式,非常輕松地完成數據展示制作(圖6)。如果要實現更多的效果,可通過“插件”菜單,選擇添加頁面加載套件和加載進度、添加計數器、添加幀動畫、添加相冊或地圖等。
對于需要修改的屬性,可通過窗口右側的分類屬性窗口選擇設置。通過窗口下方的編輯區域,可控制動畫、加載頁、全局全景和背景、當前頁等參數設置。例如,要定制個性化的加載頁面效果,點擊“加載頁”選項卡,然后通過下方的滑塊,對加載頁中的圖片和進度進行自定義編輯(圖7)。
對頁面上的各種元素進行修改和編輯完成之后,點擊工具欄左上角的磁盤按鈕將作品保存在網上。注意,編輯過程中產生的內容軟件會自動保存,但為了防止丟失,還是要養成勤于手動保存的習慣。
最后,就可以發布作品了。點擊工具欄上的“發布”按鈕執行發布操作(圖8)。
由于作品是保存在網絡服務器中的,因此作品的共享是以網址的形式體現的。發布時要填寫作品分享的標題,設置個人域名。我們只需在“個性化域名”中填寫自己命名的作品個性域名地址,發布后其他人就可以用這個域名來訪問HTML5作品了(圖9)。
小提示:使用上述服務需要使用自己的百度賬號登錄。為維護網絡安全,目前發布信息需先經過用戶實名制認證方可進行。
2. DIY 完全自己設計制作
套用模板適合于初學者或設計能力不強的用戶。其實,不用套用模板,完全可以從頭全部由自己來設計作品。
制作時,在主頁中選擇“我的H5”,然后點擊空白頁上印有圓圈套加號圖標的按鈕,向導會詢問創建什么樣的布局。從“分頁布局”或“整頁布局”中選擇一種布局方式。如果是分頁布局,則依靠頁面間的前后滑動實現簡單跳轉;如果是整頁布局,則將整個頁面分為不同區域,各部分還可創建鏈接,實現不同的功能(圖10)。
隨后其他步驟與第1部分的添加和設置操作方法相當,只是全要親自設計,不能套用現成的組件而已。在創作過程中,只要善于使用系統提供的文本工具編排文字內容,用媒體和圖形工具添加圖片、圖形、音視頻,數據相關的內容使用圖表、表單等工具,借助于“插件”擴展來補充完善,發揮自由想象的創作空間,一定能創作出更具個性化的作品。
著移動互聯網時代的到來,市場營銷人的工作也越來越復雜化,尤其是設計營銷頁制作的時候,必須要跟設計人員和技術人員打交道,十分頭疼。
伴隨著一些H5頁面制作工具的誕生,這個問題得到了解決。市場營銷人員只要對圖片和文字稍加處理,就可以達到自己滿意的效果。
那么,有哪些工具是特別好用的呢?
1
Page頁面制作工具,來自M1云端市場部
這款工具是梅花網新推出的,針對集客營銷的H5頁面制作工具。這款工具擁有豐富的模板和插件,能夠在較短的時間內做出美觀又簡潔的H5頁面。
另外,這款工具搭配了表單以及客戶管理系統等功能,能夠快速的完成一次完整的營銷活動,更為重要的是,這樣一款工具竟然是免費的,不得不說是業內良心。
2
易企秀
該應用有多種動態模板,并實現多種動態效果,并且,易企秀擁有IOS移動客戶端,可以在手機上進行H5的頁面制作工作。
3
MAKA
Maka也是一款優秀的H5頁面制作工具,模板豐富多樣,在交互效果方面非常人性化,該工具有免費版,不過免費版不提供外鏈等功能。
4
Wix
Wix 基于HTML5技術的建站工具,向用戶提供多種網頁模板,操作非常簡便,智能拖拽便可完成簡單的網頁建設。據Wix統計每天有超過45000的新用戶加入 Wix,每個類目下有上百的HTML5模板可供使用,支持頁面自適應,在手機端也有很好的展示。
5
Google Web Designer
Google Web Designer是谷歌是專門為設計者打造的的可視化HTML5設計開發工具。它提供了所見即所得的設計環境,包含設計視圖和代碼視圖,還能制作Banner廣告動畫,功能豐富且強大。
6
Weebly
Weebly是一款HTML5拖放式智能建設工具,支持中文,擁有多種個優秀的網頁模板,在交互設計商業為人稱道,并且設有IOS和Android客戶端,方便管理自己的網頁、隨時隨地進行跟蹤。
7
Ceilfire
Ceilfire是一個HTML5游戲設計平臺。用戶可以直接在瀏覽器中創建游戲、參與游戲、分享游戲,無需編程知識和相關技術細節。想做簡單的HTML5游戲可以用這種方式試試手。
8
Jimdo
Jimdo 是一款德國的在線網頁自助建站平臺,在全球12個國家擁有超過1000萬用戶。用戶可在不懂任何網頁制作方面知識的情況下輕松制作出漂亮的網頁。同時除固定模板外,Jimdo允許用戶使用自定義代碼和widget外部插件接入。
9
兔展
兔展免費移動展示平臺擁有全新的設計體驗與傳播方式,它更加簡易與強大,設計器非常方便,適合移動端的營銷推廣。
?本文系原作者所有,非經授權,請勿轉載。
歡迎分享 轉載請回復“轉載”了解須知
TML5是開發人員和設計人員最流行的語言之一,因為它提供了許多功能,并幫助開發人員輕松設計Web應用程序。
HTML5的流行背后有許多原因,例如現代瀏覽器支持(如Firefox 6、Google Chrome、IE9等)、特定于結構的標簽、嵌入圓角等視覺元素、拖放交互、新視頻、音頻和畫布元素以及scal的集成。
為此小編準備了6個比較有用的常用的HTML5編輯器,這些編輯器將使設計人員和開發人員能夠在其給定的工作流中工作,我們希望他們能滿足你的需要。
圖片來源:Blue Griffon軟件網站
Blue Griffon是一個新的Wysiwyg內容編輯器,適用于萬維網。由火狐的渲染引擎Gecko提供支持,它是一個現代而強大的解決方案,可以根據最新的Web標準編輯網頁。BlueGriffon是一個直觀的應用程序,它為網頁作者(初學者或更高級的人)提供了一個簡單的用戶界面,允許創建有吸引力的網站,而無需廣泛的網絡標準技術知識。
Rendera是一個在線的HTML5編輯器,它提供當前作品的實時預覽,還將當前作品轉換為CSS,rendera支持HAML和SASS。rendera使學習HTML5和CSS3變得容易,并且它是用coffeeesccript和sinatra構建的。
Mercury是一個功能齊全的HTML5編輯器,構建
在HTML5內容可編輯功能之上,它本機支持所有HTML5元素語法和JavaScriptAPI。它支持完整的HTML、簡單的標記、代碼段和圖像區域。它支持預覽編輯的內容、圖像、視頻或表格。文件上載可以通過拖放完成。
Maqetta是一個開源項目,它提供了對HTML5用戶界面的WYSIWYG可視化創作。Maqetta應用程序本身是以HTML編寫的,因此在瀏覽器中運行,不需要額外的插件或下載。Maqetta是一個商業友好的開源許可證。您可以下載源代碼并將其安裝到您自己的服務器上,自定義代碼以滿足您的需要和/或對開源項目做出改進。
Aloha Editor編輯器是一個在javascript中開發的富文本編輯器,是一個基于瀏覽器的框架。Aloha可以嵌入到內容管理系統(CMS)和其他用于博客和Web開發的框架中。Aloha編輯器旨在加快編輯過程。通過減少一些耗時的步驟(如鍵入和格式化),Aloha使工作速度提高了25%。aloha編輯器可以在網站加載時使用,即使用戶需要20或100個輸入區域,aloha編輯器也只能加載一次。
Aptana Studio3是一個面向開發人員的開源開發工具;它使開發人員能夠使用單一環境測試他們的Web應用程序。Aptana支持最新的瀏覽器技術規范,如HTML5、CSS3、JavaScript、Ruby、Rails、PHP和Python。它包括許多功能,如GIF集成、HTML、CSS和JavaScript代碼輔助、集成調試器、部署向導和IDE自定義。
(如有侵權,請聯系小編,必刪)
今天HTML5編輯器就暫時講到這里了,其他編輯軟件可下邊留言,期待你的表現哦!!!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。