Graphics Programs Reference
In-Depth Information
Determining Div Tags Display Order
Div tags appear in the page in the order in which they appear in the code. For example,
if you want the heading div to appear above the content div in the page, you must place
the heading div above the content div in the page. You accomplish this by placing the
pointer in the desired location in the Document window before inserting the new div
tag. As you add each new div to the page, create a comment in the code before the clos-
ing tag to help you identify it more easily.
Using Container or Wrapper Div Tags
A container div tag or wrapper div tag is a regular div tag that you place around the
other divs and elements in the page. Designers often create a CSS style that specifi es the
width, padding, alignment, and sometimes background color of the container div tag to
set a boundary and the page dimensions. Container divs are frequently used to create
fi xed-width pages. The opening container div tag is usually the fi rst tag below the body
tag in the page code and the closing container div tag is usually the last tag before the
closing body tag.
Creating Common CSS Style Attributes for Layout
If you want a div to have any specifi c attributes or characteristics, you must create CSS styles
and apply them to the div. The style attributes that are most useful for layout are found in the
Box category and include width, height, fl oat, clear, padding, and margin. For example, you
can create styles that specify a certain height, width, and padding for the div that controls
the display of the div content in the browser window. You can also use other categories of
style to control the attributes of content contained in the div. For example, you can create
styles to specify an alternate font size or color for text in the div. To include columns in the
layout, you create styles that use the fl oat attribute and apply them to the divs that will be
columns to enable them to fl oat beside each other in the browser window. You can also use
the fl oat attribute to specify how other elements fl ow around each other in the page.
Problem Solving: Developing a Flexible Naming System
When you create styles, remember to use names that refer to the way each style is used
rather than its characteristics. As Web sites evolve, the characteristics of each style might
change. For example, if you name a subheading style blue_medium to reflect the text color
and later change the look of the site so that subheading text is red, the style name no lon-
ger makes sense. After you know what divs you must create and what CSS styles you need
for a site, and you have developed a flexible naming schema for the styles, you can add the
divs to the page and create the styles in an external style sheet.
Inserting Div Tags
When you insert a new div into a page, you choose where, in the code, the div tag is
placed. Your choices include at insertion point, before tag, after start of tag, before end of
tag, and after tag. In these cases, the tag being referenced is the tag selected in the status
bar. In addition, you can apply an existing class or ID style to the div when you create it,
or you can create a new CSS rule, which will automatically be applied to the div.
You will create the div tag that will act as a container for the home page layout, and
then you will create an ID style called container and apply it to the new div.
Search WWH ::




Custom Search