Testing the Website in the Browser

This entry is part 17 of 19 in the series Dreamweaver CS4 Tutorials

Now that you have completed the site, thoroughly check it in the browser. Use File > Preview in Browser and select the various browsers. Check the site in at least Internet Explorer and Mozilla Firefox.

Sometimes it will look a bit different in different browsers. Check to make sure everything is working fine. Test the menu links to see if the right pages are being called up.

You might also decide to make some layout improvements. In this case, the submenu and content area is sticking to the menu area as this does not look good. Also the content is touching the footer area. Let us add some space between the ‘menu’ and ‘middle’ div. To do this:

  • Open the CSS styles panel [Window > CSS Styles]
  • Select the #menu style
  • Right click and select ‘Edit style’
  • Box > Margin > Bottom : 20 px
    menu-margin

Similarly edit the #footer style and add a Top margin of 20 px [Box > Margin > Top: 20 px]

Save all files to make sure your styles.css file is saved and check your site in the browser. The added space makes it look much better.

You might also find that the content is touching the edge of the browser on the right. We can add some space by reducing the width of the ‘middle’ div to 95% from 100%.

Edit the #middle style and change the width to 95%

middle-div-width

Check your site again in the browser to make sure everything is working fine.

We have now completed the site.

webpage


Dreamweaver CS4 Tutorials

  1. Dreamweaver CS4 Tutorial
  2. Define a New Site in Dreamweaver CS4
  3. Create a template in Dreamweaver CS4
  4. Design your template in Dreamweaver CS4
  5. Design the CSS Style Sheet in Dreamweaver CS4
  6. Insert Images in Dreamweaver CS4
  7. Creating the Menu in Dreamweaver CS4
  8. Content in Dreamweaver CS4
  9. Insert Editable Regions in the Dreamweaver Template
  10. Dreamweaver CS4 Template Based Web Pages
  11. Formatting Headings in Dreamweaver CS4
  12. Formatting Images in Dreamweaver CS4
  13. Linking pages in Dreamweaver CS4
  14. Forms in Dreamweaver CS4
  15. Dreamweaver CS4 Form Validation Tutorial
  16. Tables in Dreamweaver CS4
  17. Testing the Website in the Browser
  18. Upload your site with Dreamweaver CS4
  19. How to validate your Contact PHP form in Dreamweaver CS4
Series Navigation Tables in Dreamweaver CS4Upload your site with Dreamweaver CS4

Tags: ,
Posted in Dreamweaver | No Comments »