Previous Next

Dreamweaver - HTML and CSS Using Dreamweaver

Create website using div tags

Daniel Walter Scott || VIDEO: 25 of 34

Download Exercise Files

Contents

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_dwhacud_25

Div tags (a.k.a Divider Tags) Allow you to define divisions in a web page. They are sized and styled using your Cascading Style Sheets (CSS). This way the HTML or Source Code is left clean and easily read by search engines (Google). Using Div Tag for the layout is an alternative for Tables. Tables can be very heavy on code and Google isn’t a fan of them.

 

  1. Below is the final structure of this layout
     
    
  2. File > New > Blank > HTML > Create
  3. Switch to Design View
  4. Add the Page Title “Vintage Camper Rentals”
  5. File > Save “vintage-homepage.html”
  6. Let’s insert the overall container for the site to sit in
  7. Insert > Div
     
    
  8. Give it an ID: container
     
    
  9. In your CSS Designer panel choose the + button and choose 'Create a new css file'.
     
    
  10. Name the CSS file “vintage.css”
  11. Ok
  12. Click the + button in the 'Selector' panel.
  13. Name your selector #container 
     Note: # indicates an ID. So to style any DIV tags using an ID you must have a # in front of it.
  14. In the properties panel choose a width of 800px
     
    
  15. Highlight and delete the copy ‘Content for id “container” Goes Here’
     Note: This is just place holder text.
     
     Adding structure to your site
     Let’s add the div for the Header
  16. Insert > Div
  17. Choose ‘After start of tag’ &
  18. Name it ID: header
     
    
  19. Ok
  20. Make sure you have the vintage.css selected from the source panel. Click the + button in the 'Selector' panel.
  21. Name your selector #header
  22. Make the width 800px and the height 127px.
  23. Choose a blue for the background colour.
     
    

    
    
     
    Let’s create the ‘Navigation’ DIV container
  24. Insert > Div
  25. Choose ‘After tag’ &
  26. Name it ID: nav
     
    
  27. Ok
  28. Make sure you have the vintage.css selected from the source panel. Click the + button in the 'Selector' panel.
  29. Name your selector #nav
  30. Make the width 800px and the height 37px.
  31. Choose a yellow for the background colour.
     
    
     
    Let’s create the ‘Text’ DIV container
  32. Insert > Div
  33. Choose ‘After tag’ &
  34. Name it ID: text
     
    
  35. Make sure you have the vintage.css selected from the source panel. Click the + button in the 'Selector' panel.
  36. Name your selector #text
  37. Make the width 549px and the height 350px.
  38. Choose a pink for the background colour.
     
    
     
    Let’s create the ‘image’ DIV container
  39. Insert > Div
  40. Choose ‘After tag’ &
  41. Name it ID: image
     
    
  42. Ok
  43. Make sure you have the vintage.css selected from the source panel. Click the + button in the 'Selector' panel.
  44. Name your selector #image
  45. Make the width 251px and the height 350px.
  46. Choose a green for the background colour.
     
    
     
    Note: The Div tags will naturally try to stack one after each other. To get them aligned correctly we'll need to use a function called 'float'. 

Comments

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Video transcript

Coming Soon

Bring Your Own Laptop