Reminders about CSS and HTML

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.


  • 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.


  • 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.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s