Basic CSS Flow Tutorial with Box model using Dreamweaver CS3 / CS4

Basic CSS Tutorial flow model with the box using Dreamweaver CS3 CS4 tutorial edited Sullivan and Rewis Mastering CSS with Dreamweaver CS3 2008. A ….

More PDF Content

Basic CSS Flow Tutorial with Box model using Dreamweaver CS3\\CS4
tutorial modified from Sullivan and Rewis Mastering CSS with Dreamweaver CS3 2008.

  1. Start Dreamweaver CS3\\CS4 and open the page called start.html it should look the page below it has only several paragraphs of text and some headers. If you don’t have this page create something that looks similar.
  2. If you would like to see how we are going to format this page using CSS open the finished_template.html page and then close it. First we will add an image placeholder in front of the fist paragraph.
  3. Next we will create a simple CSS class rule that floats the image so text wraps around it. Click on the + symbol at the bottom of the CSS dreamweaver window.
  4. In the pop up box, make sure the Selector type is set to class and in the input box below type in .fltlft – don’t forget the period before the name, the text is an abbreviation for .floatleft you could type .
  5. When the CSS rule definition box opens Select from the left category – Box and set the values for Float to left, Margin uncheck same for all and type in the Right Margin textbox 8 px
  6. The CSS class can be applied to any elements on the page – to apply it the image placeholder (you could have a real image here as well) – click on the image placeholder
  7. In Dreamweaver place your cursor in front of H2 Level heading and switch to code mode
  8. Click on the plus symbol in the CSS panel to create a new CSS class rule, set the Selector Type to class and in the selector name type .clearfloat the click OK.
  9. Next we will break the page up into “blocks” by inserting elements and paragraphs inside
    tags which we will then resize and position on the page.
  10. Select the insert toolbar from the Common category – click on the Insert Tag button as shown below. Insert Tag button is 6th button from the left and just in front of the tree icon (image) button In the insert Div Tag pop up box below – make sure Insert –Wrap around selection is selected and in the ID textbox type in header
  11. Next we will create 3 more id elements to surround the Main content, sidebar content and the footer. Switch to code mode and select the first

    tag in front of Main content to the last tag before


  12. Click on the + in the CSS panel and in the pop up box Selector type select ID and in the selector name box type #sidebar1 – the # symbol in front symbolizes this is an ID element which is unique, there can only be one.
  13. In the CSS Rule definition box Select Positioning, type Placement 80 px top, Left 10 px, Type absolute, Width 200 px (see below), then select Category>Background and set the background color to #CCC – Click OK. Once again click on the + symbol at the bottom of the CSS box to create a new Id rule, Selector Type > ID then Selector name type in #mainContent OK. In the Category field select Box in the margin, uncheck Same for all and in the Left text field type 225 pixels
  14. In the CSS box select the #sidebar1 and click on the trash can to remove it. The side content box will appear below the Main Content box. Click the #mainContent id element and click on the trash can as well – your page will revert to the unformatted version – again.
  15. We are going to move the sidebar1 Content in front of the Main content. Place your cursor in the Sidebar1 box and at the bottom click on
    Edit>Cut. Place your cursor at the end of the Header and and click on the right arrow key to move the cursor in front of the
    tag and select Edit >Paste.
  16. We will create a new CSS rule for the #sidebar1. Select the + symbol in the CSS box to create a new Rule, Selector type ID, Selector name #sidebar1 > OK in the Category
  17. To create a two column look, we will re-create the ID #mainContent and position it to the right of the Sidebar1 content. Click on the + in the CSS box, Selector Type ID, Selector Name #mainContent > OK in the Category select Box and deselect same for all in the Margin field and set Left Margin to 225 px – click apply to see the change then OK. The problem is that once again if you add space or text into the Sidebar1 content box, the footer…
  18. Click anywhere in the page, then click the tag selector at the bottom of the document window. This will select everything on the page. Click on the insert bar and select insert Div in the popup box select ID and type container Click on the New CSS Rule button > then OK in the New CSS Rule Box category Select
  19. Change background color on the page outside the container, Select Modify>Page Properties>Set background color #666


Download Basic CSS Flow Tutorial with Box model using Dreamweaver CS3 / CS4 pdf from, 20 pages, 745.69KB.
Related Books

3 Responses to “Basic CSS Flow Tutorial with Box model using Dreamweaver CS3 / CS4”

  1. This review analyses all major freelance sites . Check it out. Its quite interesting.

Leave a Reply