25 - Create website using div tags


Questions & Comments

No comments

ALL ACCESS: $19.95 per Month + Cancel anytime   

Video Description

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
    Div tag structure outline
  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
    Insert Div
  8. Give it an ID: container
    Insert Div Tag options
  9. In your CSS Designer panel choose the + button and choose 'Create a new css file'. 
    Css Designer Div
  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
    Div width
  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
    Insert Div tag 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. 
    Div properties

    Div tag in design view

    Let’s create the ‘Navigation’ DIV container
  24. Insert > Div
  25. Choose ‘After tag’ &
  26. Name it ID: nav
    Nav div in Dreamweaver CC
  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.
    Nav div in design view

    Let’s create the ‘Text’ DIV container
  32. Insert > Div
  33. Choose ‘After tag’ &
  34. Name it ID: text
    insert div 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.
    Div for text

    Let’s create the ‘image’ DIV container
  39. Insert > Div
  40. Choose ‘After tag’ &
  41. Name it ID: image
    div for images
  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.
    div for images

    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'. 

ALL ACCESS: $19.95 per Month + Cancel anytime