CSS Website without tables in Dreamweaver CS3

In this tutorial I will show you how to make a CSS website without tables, in Dreamweaver CS3

Basic knowledge of Dreamweaver CS3 is assumed in this tutorial. I will supply a screenshot for any assumed unfamiliar CSS regions in Dreamweaver once.  So refer back to that screenshot if still in doubt later in the tutorial. Let’s get started! (This is my first tutorial so bare with me)

• Define a new site in Dreamweaver and create a new html file in your new site called index.html and open this file.
• Make sure the CSS STYLES panel is open. Its default location is the top right of the screen. Ensure that ALL is selected under the CSS STYLES tab and click + to create a new style (fig 1).
  
  fig 1
  
  
• First we will define our page settings for the body (fig 2). Select tag from the selector type and name it body in the selector option. Select define in new style sheet.   Let’s call our new style sheet styles.css.  When our CSS RULE DEFINITION box opens we want to set the category background, bg colour to #CCCCCC and under the box category set the margin and padding to 0, same for all.
  
  fig 2
  
  
• Now we want to set up our outer wrapper that will contain the remaining div tags.  Select + NEW CSS STYLE and choose advanced from the selector type, input #wrapper as the selector, and define in styles.css.  In CSS RULE DEFINITION (fig 3), select category block, and choose text align: left.  Then in the box category choose width: 760px, and margins:  top: 0 left: auto bottom: 0 right: auto.  This will centre our page.
  
  fig 3
  
  
• Insert a div tag into your page now by placing your cursor on the page in design view and clicking the insert div icon in the INSERT – COMMONS tab (highlighted in fig 4). In your insert div tag window choose,  insert:  at selection point, and ID: wrapper. (fig 5)
  
  fig 4
  
  fig 5
  
  
• Now let’s define the rules for the rest of our div tags that will sit in our #wrapper. We learnt how to insert css styles in step 2 and 3, now I will give you the info so you can run through it yourself.
  

  + NEW CSS STYLE
  type: advanced, selector: #header, define in: styles.css
  CSS RULE DEFINITION:
  BOX:  margin: top 12px, bottom 12px
  
  + NEW CSS STYLE
  type: advanced, selector: #content, define in: styles.css
  CSS RULE DEFINITION:
  BOX:  padding: 0, margin: 0

  Select the #header tag from the CSS RULES pane and select duplicate from the CSS menu (menu highlighted in fig 6).  Input #footer in the selector field. Click ADD PROPERTY from the properties pane and type: clear, and both, in the two empty fields (fig 6.5).  This will ensure no floating elements will intrude on the footer.
  
  fig 6
  
  fig 6.5
  
  At this stage we should have all the CSS tags shown in fig 6.5 and on our page we should only have the wrapper div tag.  Now let’s put the rest of our div tags in.
  

• In step 5 (point 5) we learnt how to insert a div tag. We will repeat this step slightly changing the process.   Pay careful attention to the settings here as this is where you can cause yourself problems.
  
  fig 7
  
  INSERT DIV TAG
  insert: After start of tag <div id wrapper>
  ID: header
  
  INSERT DIV TAG
  insert: After  tag <div id header>
  ID: content
  
  INSERT DIV TAG
  insert: After tag <div id content>
  ID: footer
  
  
• Now that we have our basic page set up we are going to make our nested div tags.
  
  

  + NEW CSS STYLE
  type: advanced, selector: #logo, define in: styles.css
  CSS RULE DEFINITION:
  Because an image is opening in this div we want to give a height field.
  BOX:  height: 71px, padding: bottom 12px
  
  INSERT DIV TAG
  insert: Start of tag <div id header>
  ID: logo

• Duplicate #logo css and name it #nav. Change in the CSS RULE DEFINITION: box: height : 28px and change all padding to 0.
  
  

  INSERT DIV TAG
  insert:  After tag <div id logo>
  ID: nav

  Now lets duplicate the #nav CSS and name it #banner in the selector. Change the height from 28px to 200px

  INSERT DIV TAG
  insert:  After tag <div id header>
  ID: banner

• Now we need to split the content in to two columns.
  
  
• + NEW CSS STYLE
  type: advanced, selector: #leftColumn, define in: styles.css
  CSS RULE DEFINITION:
  BOX:  width: 365px, float: left
  
  Let’s duplicate the #leftColumn CSS and name it #rightColumn, and change the float from left to right.
  
  INSERT DIV TAG
  insert:  After start of tag <div id content>
  ID: leftColumn
  
  INSERT DIV TAG
  insert:  After start of tag <div id content>
  ID: rightColumn
  
  Remove the placeholder text for content.
  Your site in design in design view should look like fig 8.
  
  fig 8
  
  
• Now create for your website some basic graphics to fill the page for the meantime.
  LOGO 760x71 px
  NAVIGATION BAR 760x28px
  BANNER 760x200px
  create a folder in your site named images, store your images there and insert the appropriate graphics into their retrospective nav bars, deleting the placeholder text as you go along. For the navigation bar image, open up #nav in CSS RULE DEFINITION and set your nav image as the bg image.
  
  
• Now we will clean the site up a little bit. In split mode place your cursor at the end of <div id”content”> and type MAIN HEADING. Give it a heading 1 format in the properties panel. Back in design view remove placeholder text for leftColumn and type Heading 2, hit enter and insert some placeholder text in the left column. Do the same for the right column. In the footer, place your copyright information, deleting the placeholder text. Delete the placeholder text for the wrapper. Make your buttons for links and insert them in to the nav bar. And it should look something like fig 9.
  
  fig 9
  
  

  And I believe that is it! Hope this was helpful for you. Email me if you have any problems at tutorials@samueljesse.info