STEP 1 – Planning

The BeaverCheeseSecrets.com home page is essentially composed of seven blocks. They are:

1. 1. Header that holds a banner on top
2. 
   
3. 2. Menu bar with three text/image links aligned right
4. 
   
5. 3. Search box underneath the first navigation bar
6. 
   
7. 4.Second menu bar with four text links
8. 
   
9. 5. Main content area that holds the main content
10. 
    
11. 6. Side panels
12. 
    
13. 7.Footer containing a single footer image

Most of these blocks are composed of images. The images that are used in building these sites are:Ø

• Ø header.jpg – Used for creating the header
• 
  
• Ø footer.jpg – Used for creating the footer
• 
  
• Ø bg.jpg – Used for creating the two panels on both the sides
• 
  
• Ø lower_bg.jpg – Used for creating the first menu bar
• 
  
• Ø middle1.jpg – Used for creating the second-level menu
• 
  
• Ø middle2.jpg – Used for showing hover state of the second-level menu

The above images are available for download from HERE . Store the above images in the ./images folder of your project space. In this tutorial, we are using D:\Tableless_Site as the project space and storing the images in D:\Tableless_Site\images folder.