Carefully examining a generated HTML5 introduces HTML5 elements and enables editing the content of the layout.
Dreamweaver CS5 and CS5.5 provide a wide array of views and combinations of views with which we can examine the generated HTML5 layout. Here, we will survey the most important and useful of those views and the way they work in various combinations to make it easier to edit the content.
You can view the page content in ways that provide access to the code that display how the page will look in a browser, or both. You can edit the page content or lock out the editing features to see how elements, such as links, will appear in a browser. In addition, you can explore related files that affect the way an open web page appears.
The first component of the page display to be aware of is the related files tab. This set of tabs provides access to all files related to the main HTML page. When you generate either of the two available HTML5 layouts, a separate, distinct, but related (linked) CSS file generates. Both the HTML file and the CSS file are displayed in the related files tab, as shown in the following screenshot. You can toggle between them by clicking on either tag.
Toggling between an HTML page (the Source Code tab) and a related CSS file (indicated by the .css filename extension):
As you create more complex HTML5 layouts, being aware of what related files affect the appearance of that page opens the door to powerful design techniques. For now, simply note that the appearance of your generated HTML5 layout is defined by both the basic HTML web page and the related (linked) CSS file.
Your HTML5 page can be viewed in the Code, Split, or Design view. You can toggle between these views from the View menu, or by using buttons in the Document toolbar (if the buttons are not visible, choose View | Toolbars | Document to display it).
Code view reveals the HTML code that defines the basic page content. The Design view shows, roughly, how the page will look in a browser. The Split view splits the screen between the Code view (by default on the left) and the Design view (on the right).
Note
Only the Code view for CSS pages: CSS pages that are related to HTML pages are only displayed in the Code view. This is because CSS pages are just code—they define how the HTML page displays, but these files themselves are not normally viewed in a web browser and if they are, they simply appear as lines of code.
The Design view functions in two modes—with the Live View on or off. With the Live View on, you cannot edit most of the page content, but you can preview how interactive elements, such as links, will appear in a browser. The following screenshot shows a link being tested in a Split mode, with the Live View on.
Testing how a link will appear in Split view, with Live View enabled. Note that the mouse cursor is interacting with a link as it would in a browser:
The Inspect button in the Document toolbar turns on a feature that makes it easier to identify HTML5 (and other) elements that control how a page looks.
When you hover over any element on a page in the Inspect mode, elements such as padding (space within an HTML or HTML5 element) appear in purple and spacing created by margins (spacing outside of an HTML or HTML5 element) displays in yellow.
The Inspect mode is also of a particular relevance in working with HTML5 elements. When you place the mouse cursor over any part of a web page created from HTML5 layouts, you can click on the left-arrow key on your keyboard to "work backwards" in the list of elements that appears in the tag bar at the bottom of the Dreamweaver window.
The generated HTML5 layouts include elements such as <header>, <nav>, <section>, <aside>, and <footer>—new HTML5 elements that make page design simpler. In the following screenshot, the <header> element is identified in the Tag bar.
