Using DIV Tags to Create a CSS Layout
DIV tags are what define a division or section of an HTML document. They’re often used to group block-elements to format them with styles.
When creating your web pages, you’ll be using DIV tags to group and format your content. To start, you will create five div tags, including:
- The “Wrapper” tag, which contains ALL of your other DIVs
- A “Header” tag, for your header
- A “Navigation” tag, for your buttons
- A “Content” tag, for your main content
- A “Footer” tag, for all of the content on the bottom of your page
Once you have your wrapper, header, navigation, content and footer tags in place, and you’ve placed the header, navigation and footer elements that will appear on each page in the appropriate tag, you’ll save your layout as a template.
SAVING A PAGE AS A TEMPLATE
- Go to the MAIN menu and select FILE –> SAVE AS TEMPLATE.
- Go to your page and highlight any DIV tags that you plan to change on each page, such as the main content area.
- Go to the MAIN menu and select INSERT –> TEMPLATE OBJECT –> EDITABLE REGION.
- Go to the MAIN menu and select SAVE.
CREATING PAGES FROM TEMPLATES
- Go to the main menu and select FILE –> NEW.
- On the left-hand side of the NEW DOCUMENT window, select PAGE FROM TEMPLATE.
- Select your template from the third column (second white box) and click CREATE.
- Make any changes to the editable regions, such as adding content to the main content area.
- Save your page.