Dreamweaver Basics: Part Two

 

Visit smaller rendition.

Divisions

Divisions are distict areas of a web page that can be formatted using the CSS panel in Dreamweaver. To add a division to a webpage choose Insert > Layout Object > Div Tag to add a standard div tag or choose AP Div to add an absolutlely positioned division. A standard Div tag acts like a box that appears within the context of a pages information, or inline with the content. If you add information before a standard div the division will move as more info is added. An AP div will not move as it's placement is relative to the webpage it's found on.

This is a division with the CSS Class .div1 assigned to it.
This is an AP div that automatically had the ID #apDiv1 created and assign to it.

You can edit the Classes or ID's assigned to the Div's through the CSS panel in Dreamweaver. Double click the name of the rule you wish to change. Essentially Div's and APDivs are the same thing except the designation of their Positioning Type. A useful third type of Positioning Type for Div's is the Fixed type. Fixed Div's will stay in position relative to the Browser window rather than the webpage. To change the positioning type of a divisision double click the appropriate rule assigned to the div you want to alter, click the Positioning Category and change the Type from the Type Drop Down.

this .div2 class is Fixed

Divisions can have borders, backgrounds, width, height, unique fonts or styles just like any style created through the CSS Panel in Dreamweaver. Divisions also can be layered ontop of each other. The placement is decided through the Z-index of the division (found in the Position Category in the CSS Rule dialogue).

Using Groups in the CSS panel

Sometimes if many objects should generally look the same you may wish to put a bunch of similar attributes in a style and assign that style to a whole group of elements. The 3 div's below all share the same height, width and positioning type (absolute). Each of the three div's also have their very own uniqe attributes like color and positioning from the left, as well as content. Each colored box also has a unque Z-index (represented by the number inside each box. Each box is the same width, the purple one infront, the blue next and the red is the rear most.

99
1
0

 

 

 

 

 

 

Many designers start all webpages with a content or wrapper div that encases all their content. Some use the body tag to accomplish similar effects. By putting Div's inside of div's and using various border types, colors and backgrounds, the possibilities of logorithmic design schemes are limitless.

 

Scrolling Inside div's

An interesting attribute to all div's is their ability to act like little tiny windows with their own scroll bars. The example is the very same text in this paragraph being displayed in a small box. In the CSS rule dialogue, under the Positioning Category, is the option for Overflow. The choices for Scroll and Auto will allow scrollbars to appear. Auto will decide if it needs them or not and place them vertically or horizontally if needed. Scroll will add scrollbars to a division.

An interesting attribute to all div's is their ability to act like little tiny windows with their own scroll bars. The example is the very same text in this paragraph being displayed in a small box. In the CSS rule dialogue, under the Positioning Category, is the option for Overflow. The choices for Scroll and Auto will allow scrollbars to appear. Auto will decide if it needs them or not and place them vertically or horizontally if needed. Scroll will add scrollbars to a division.