how to make div layouts

Document Sample
how to make div layouts Powered By Docstoc
					Hands-on: DREAMWEAVER CS3  Build a 3 CSS DIV Column Layout
DIV tags for columns can be nested inside a main container DIV tag or be allowed to be place
side-by-side. If they live inside of a main container, they will adopt the basic placement style
of the parent DIV. The DIV tags shown on this page are not inside a main container. After
building the page, place the main container DIV tags around these DIV tags to nest them and
then see what the resulting page looks like.
Exercise: Building a 3 CSS DIV Column Layout  Part Three
Now let’s start building the page featuring 3 DIV Layouts in a horizontal mode.
    1. Open the page you created named: pureCSSlayout3.html.
    2. Make the most obvious changes first; click on the "Home" button and in the Properties
        Inspector turn the Style back to none. Next click on the "Three" button and in the Properties
        Inspector turn the Style to Current.




    3. Create another New CSS Rule Defined in: pureCSSdivLayout.css, click the radio button
       Advanced (IDs, contextual selectors, etc) and then type #divCSSleft, as the name of the new
       style. The following New CSS Rule will FLOAT the column to the left of the page. The code for
       this column is shown below.
                       #divCSSleft {
BACKGROUND             background-color: #88b94b;
BLOCK                  display: block;
BOX                    width: 175px;
BOX                    height: 449px;
BOX                    float: left;
BOX                    padding-top: 1em;
BOX                    padding-right: 5px;
BOX                    padding-bottom: 0px;
BOX                    padding-left: 5px;
                       }
    4. Create another Advanced CSS Rule and then type #divCSScenter, as the name of the new
       style. There are three CSS DIV ID tags that describe the main BODY area of the page, this CSS
       DIV ID does not have any FLOAT attributes but does have JUSTIFIED text-align to help define
       the columns to the left and right. The code for this column is shown below.
                       #divCSScenter {
BLOCK                  text-align: justify;
BOX                    padding-top: 1em;
BOX                    padding-right: 5px;
BOX                    padding-bottom: 0px;
BOX                    padding-left: 5px;
BOX                    margin-top: 0px;
BOX                    margin-right: 185px;
BOX                    margin-bottom: 0px;

Professor Al Fichera                   Page 1 of 4             DWpureCSSdivLayout03.doc
Hands-on: DREAMWEAVER CS3  Build a 3 CSS DIV Column Layout
BOX                    margin-left: 185px;
BORDER                 border: solid thin #FF0000;
                       }

    5. Create another Advanced CSS Rule and then type #divCSSright, as the name of the new style.
       The following CSS DIV ID tag FLOATS the column to the right of the page. The code for this
       column is shown below.
                       #divCSSright {
BACKGROUND             Background-color: #dfefbf;
BOX                    width: 175px;
BOX                    Height: 480px;
BOX                    float: right;
BOX                    padding-top: 1em;
BOX                    padding-right: 5px;
BOX                    padding-bottom: 0px;
BOX                    padding-left: 5px;
                       }

    6. Switch to the CODE view and locate the line that looks like this:
       <div id="divBar">&nbsp;</div>
       Click the mouse below this line to place the cursor on the next line below.
    7. Go to the Insert Menu > Layout Objects > Div Tag
    8. From the ID: selection menu choose divCSSleft and from the Insert: At insertion point




    9. Switch back to Design view and complete the rest of the layout.
    10. Using either the Insert menu or the DIV icon on the Layout bar choose: Insert Div Tag and from
        the ID: selection choose divCSSright. For the Insert: selection choose After tag and then from
        the pop-up selection menu choose divCSSleft.




Professor Al Fichera                   Page 2 of 4            DWpureCSSdivLayout03.doc
Hands-on: DREAMWEAVER CS3  Build a 3 CSS DIV Column Layout




    11. Repeat the above to place the divCSScenter container. For the Insert: choose After tag and
        then from the pop-up selection menu choose <div id="divCSSright">




  12. Add a paragraph of Lorem Ipsum from the bottom of the page into each CSS DIV tags to make
      each section large enough to view.
When finished your page should look like the image below.




    13. When you are happy with the results of this page make sure that the hyperlinks back to the
        Home page and return to this page works. The image below is from Internet Explorer 7 and it
        works as expected. The Mozilla Firefox browser results are almost the same. I use Web
        Developer a free download add-on for Firefox. At the bottom of the page is a screen shot of
        one of the Web Developer tools that strips the CSS off the page to view the XHTML. You also
        have the option to view the CSS code as it is written for the page.
Professor Al Fichera                  Page 3 of 4             DWpureCSSdivLayout03.doc
Hands-on: DREAMWEAVER CS3  Build a 3 CSS DIV Column Layout
        Note: If your page doesn’t quite look like the image below, especially the divCSSright section
        the answer is to be found in the divCSScenter section. The divCSScenter section must be
        written after the divCSSright section for the code to perform as expected.




Professor Al Fichera                   Page 4 of 4             DWpureCSSdivLayout03.doc

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:45
posted:2/24/2010
language:English
pages:4
Description: Guide teaches you how to make div layouts