Software recommendation: do not install software online production of HTML5 works

HTML5 multimedia works are known for their compatibility with various platforms and are now widely used. If we need to make our own HTML5 multimedia works, a convenient choice is to use the ready-made online production tool “Baidu H5”.

First visit the “Baidu H5” webpage (, you can see a very simple page with only “My H5” and “My Template ” two options. My Template” is to create HTML5 works by applying the template, while “My H5” can be created freely by customizing various parameters, and the finished works will be displayed here (Figure 1).


1. Easy to create through creative templates

Select “My Templates” in the home page, and then you will enter a template display page, which are templates shared by designers. According to the category of the work you want to design, you can choose a similar work by category as a template for production, and then modify it on the basis of this, you can quickly form your own multimedia works (Figure 2).


For example, to create an admissions media piece, select the fall class admissions template shown in the figure, and then click the “Use Template” button in the lower right corner (Figure 3).


Next, you need to name your work, for example, “Our kindergarten is enrolled”. Once you have finished typing it in, click on the “OK” button (Figure 4).


Then enter the substantive template modification and editing phase. For inappropriate content, you can delete the page elements before adding them. Click on the “Text” menu to insert the required text content. Similarly, you can use the “Media” button on the right to insert images, audio, video, embedded video, panoramas, etc. If it is a PSD image, you can load it directly from the PSD menu. If you need to insert some icons or shapes in the layout, click on the “Graphics” menu and select Add (Figure 5).


In addition, for the display data to be used in the work, the data display can be done very easily by inserting charts, forms, etc. (Figure 6). If you want to achieve more effects, you can choose to add page loading kit and loading progress, add counter, add frame animation, add photo album or map, etc. through the “Plug-in” menu.


For the properties that need to be modified, the settings can be selected through the category properties window on the right side of the window. The editing area at the bottom of the window allows you to control the animation, loading page, global panorama and background, current page, and other parameters. For example, to customize the loading page effect, click the “Loading Page” tab and then use the sliders below to customize the images and progress in the loading page (Figure 7).


After you have finished modifying and editing the various elements on the page, click the disk button in the upper left corner of the toolbar to save your work online. Note that the content generated during the editing process will be saved automatically by the software, but it is still a good idea to get into the habit of diligently saving manually in order to prevent loss.

Finally, it’s time to publish your work. Click the “Publish” button on the toolbar to perform the publishing operation (Figure 8).


Since the work is saved in the web server, the sharing of the work is reflected in the form of a URL. When posting, you have to fill in the title of your work and set your personal domain name. We only need to fill in the “personalized domain name” with the address of the personalized domain name of our work, and then others can use this domain name to access the HTML5 work after publishing (Figure 9).


Tip: To use the above services, you need to log in with your Baidu account. In order to maintain network security, at present, the release of information can only be done after the user’s real name authentication.

2. DIY: Design and create your own website

Applying templates is suitable for beginners or users who are not strong in design. In fact, instead of using a template, you can design your own work from scratch.


To create a layout, select “My H5” from the home page, then click the button with the circle over the plus icon on the blank page, and the wizard will ask what kind of layout to create. Choose a layout from “Page Layout” or “Full Page Layout”. If it is a pagination layout, it relies on a simple jump between pages by sliding back and forth; if it is a full-page layout, the whole page is divided into different areas, and links can be created in each section to perform different functions (Figure 10).

The other subsequent steps are comparable to Part 1 in terms of adding and setting up operations, except that the whole thing has to be designed personally and cannot be applied to ready-made components. In the creation process, as long as you are good at using the text tools provided by the system to arrange the text content, use media and graphics tools to add pictures, graphics, audio and video, data-related content using charts, forms and other tools, with the help of “plug-in” extensions to supplement the perfect, to play the free imagination of the creative space, you will certainly be able to create a more personalized You will be able to create more personalized works.

Leave a Comment