HTML5 Tutorial:

Understanding the Opus HTML5 Output

identify and edit the various elements of HTML5 output

When publishing to HTML5 Opus uses some clever background scripting (in a separate file called opus.js) to provide it's unique features, but the output is still standard HTML5 which can be edited just like any other.

This tutorial provides a brief overview of the content to facilitate any post-publishing editing you may wish to undertake

You will need to use a text editor to edit the HTM file produced by Opus as well as any HTML file you want to put your Opus content into. We recommend one which includes syntax highlighting such as Notepad++ (or see Additional Tools for other recommendations) which will highlight the different elements of HTML so it is easier to spot syntax errors. The illustrations below feature Notepad++ so your editor may look slightly different.

Publish to Single Page

This option will publish your entire Opus publication as a single web page taking it's filename from your publication title with the .HTM suffix - thus MyPublication.HTM but you can rename this page afterwards if required.

To use the content you simply uploaded everything in the publish directory to your web server. Make sure you include all the images, video and other files and not just the HTM file. Most importantly you must upload the opus.js file to the same place as your content even if you have a copy elsewhere on the server (unless you consolidate the opus.js file as detailed on the Top Tips page.

Individual pages in the publication will be created as sections which will be shown and hidden as required. If you have a lot of pages and those pages have complex content like multiframes or lots of interaction it is easy to see how loading and unloading material quickly enough over an internet connection cannot alwasy be guaranteed and this can cause the publication to get tangled up so we only recommend this option for relatively light publications - either simple pages or just one more complex page. Remember that you can always connect single pages together using standard HTML techniques.

Publish to Multiple Pages

For more complex publications you can choose to publish your Opus publication as a set of pages. Each page in your publication will be created as an individual HTM file with the page name as it's filename and the links between pages will be written automatically. This means renaming individual files can break those connections but if you are familiar with HTML you can edit as required.

Publish to Single DIV Output

This is content which will go into a discrete section of another HTML page, called a DIV (for division) - see W3Schools for further information.

When published with these settings the content will always need to be surrounded by another DIV which sets the actual pixel size for the DIV and your Opus content is set to fill.

Therefore, to allow you to preview the DIV output Opus includes extra material in the output which allows you to display it as a stand-alone page. In the example below it is the outside DIV which sets a specific width and height of the DIV in pixels (700 x 90).

responsive content wrapper

This will be replaced by a responsive div once you are ready to use your content in another page. It is important that the page you use your content in must contain a wrapper div which sets the actual (pixel) size for the Opus content to fill. In the case of a responsive design this size will be calculated from the screen size of the device viewing the content. We have provided a JavaScript example to illustrate this (see below).

Open the .HTM file created by Opus in your favourite text editor . You will find the key Opus content is marked by a comment line at the beginning...

responsive content start

and at the end.

responsive content end

Simply select and delete the material outside these markers to leave just your content. You can then choose to save this new file to disk for use later using the include tag (see below) or select and copy the content in the text editor, to paste into the correct location in your main HTML.

Embedding the DIV in your page

Once you have isolated the core of your Opus content you define a DIV in your main HTML to contain the content - in the screenshot above this is called div-responsive and note that it has an initial size set by the inline style settings.

For ease of reference you may like to add a comment line for the beginning and the end as here.

insert responsive content

If you want to use the include tag to load the Opus HTM at run time you will need to type something similar to the following.

include responsive content

You will need to ensure that you upload the Opus HTM file to the correct location along with all the other elements the publish process creates for the page most importantly the opus.js file.

If you have selected all the content and copied it to the clip board then place the text cursor where you want it to go in the main HTML and select paste. As you have already done the job which the include tag would do, you have no need to upload the HTM part of the Opus output but all the other elements produced by Opus will need to be uploaded.

The Key Opus DIVs

The Opus Content itself has several DIVS in it. The first is a DIV called _NoHTML5Fallback. This section is designed to check for HTML5 support and then display a message if it is not available. Otherwise the panel would be blank as the content would not be displayed by the browser. You can choose to remove this if you prefer. Simply make sure you delete everything from the starting DIV tag to the closing DIV tag.

The actual content of the Opus material is inside a primary DIV which will have the same name as your Opus Publication. In this case it is called "adaptive_banner".

example script for responsive content

Responsive JavaScript

The size of the wrapper div which contains the Opus content can either be a set size (but doesn't have to be the size you designed it at) or can be "responsive" or "adaptive". This means the size is set by the main HTML which checks the device screen size and then sets the width and height accordingly.

In our working example we have provided an interactive simulation of this by creating a JavaScript function (responsive_update) which will sets the width and height and then calls an Opus function _DWPub.onWindowResize() to redraw the Opus content at the new size. If your responsive web design is reactive and resizes if the browser window changes you may need to call _DWPub.onWindowResize() manually to refresh the Opus content.


JavaScript function for responsive refresh

understanding the HTML5 output of Opus Creator and Opus Pro