How to make a CSS Layout using DIVs
How to format text and content
March 2012 Photo Night
Featuring Jessica Kourkounis
March 28, 2012 at 8pm
Pen & Pencil Club
Please join us at the Pen & Pencil Club, at 1522 Latimer Street, on Wednesday, March 28, 2012 for a Photo Night featuring the work of Philadelphia photographer Jessica Kourkounis. The event will start at 8pm and Kourkounis will share work from her series “Life in the 7400 Block.”
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.
Here is a helpful video about the general workflow designers use when designing with CSS.
Understanding the “box model” is central to all CSS-based layouts.
The main principle of the box model is that everything is contained within a box.
The box model is made up of six basic properties:
- Content: The text, images, multimedia, etc. included inside of the box.
- Width & Height: The contained element’s width and height in pixels.
- Padding: The space between the element’s border and the content. This property does not allow negative values and does not affect the distance of elements from one another. When setting this property you can specify the same padding for all four sides of the element or set different padding properties for the top, bottom, left and right sides of the element.
- Border: The line around the padding.
- Margin: The space between the content and the box’s edge. When setting this property you can specify negative values and also the same margin for all four sides of the element or different margin properties for the top, bottom, left and right sides.
- Background: The color or image that makes up the background of the box.