This recipe will walk you through the process of generating and saving a 3-column web page using the key HTML5 Layout elements. We will assume that you have created a Dreamweaver site (see the section named Creating a Dreamweaver site in this chapter).
- Select File | New to open the New Document dialog. Select Blank page on the left-hand category column. Choose HTML in the Page Type column. Moreover, select HTML5: 3 column fixed, <header> and <footer> in the Layout column.
- Note that HTML5 is now selected in the DocType pop up and Create New File from the Layout CSS pop up.
- Click on the Create button. The Save Style Sheet File As dialog appears.
- Click on the Save button and if prompted to replace an existing file, click on Replace. A generated HTML5 layout opens in Dreamweaver Document window.
- Click on the Inspect button in the Document toolbar to more easily detect and identify HTML5 Layout elements. With the Inspect button enabled, hover over different sections of the page, and look for HTML5 Layout elements such as
<header>,<footer>,<aside>,<nav>,<article>, and<section>in the tag bar at the bottom of the Dreamweaver window, as shown in the following screenshot:
- Enter a page title in the Title box in the Document toolbar.
- Choose File | Save. Replace the default filename with your own filename—all in lowercase, no spaces, or special characters. Leave the HTML filename extension in tact. In order to work through the recipe in Chapter 2, save your file as:
chapter1.html: - Click on the Site Root button to ensure the file is correctly managed by Dreamweaver and then click on the Save button.
This is, of course, only the first step in creating a web page using the HTML5 layout elements in Dreamweaver. The next steps are to customize the content and look of your page. We will do that next!