Now that we have introduced the key design elements of
HTML5, we are almost ready to generate pages that use those elements in Dreamweaver. Before we do, however, it will be helpful to preview briefly, conceptually, how Dreamweaver generates
HTML5 layouts.
The first thing to emphasize is that
HTML5 elements such as
<header>, <footer>, <article>, <section>, <aside>, and
<nav>, do not really do much if anything "on their own." Like their DIV tag evolutionary precursors, they are more or less empty vessels. HTML5 elements take shape, literally, when connected with CSS styles.
For example, a web page might have a
<header> defined as stretching the entire width of the page, at the top of the page, with a set background color, and spacing that keeps it from bumping into other page elements. All of these attributes (size, location, background color, and spacing) are defined in a CSS style sheet that includes a specific CSS style associated with the
<header> element. Moreover, this symbiotic relationship between
HTML5 layout elements and CSS styles is required for each
HTML5 layout element.
Therefore, when
Dreamweaver generates page layouts using
HTML5 elements, it also generates a CSS file that has already built-in style rules for all the HTML5 elements used in the page.
Of course, you can change how
HTML5 elements appear. You can edit the generic content that
Dreamweaver provides with the HTML5 layouts. Alternatively, you can change the appearance of the HTML5 elements by editing the CSS styles. We will do both of these things in the next chapter of this book. Here and now, we will focus on setting up Dreamweaver so that it can generate HTML5 pages and then we will actually create those pages.
With the basic understanding of
HTML5 layout elements and the way they interact with CSS under our belts, the time has come to launch into Dreamweaver and begin to create HTML5 layouts.
