Beginner's Guide to a Single page w/ Navigation

Build this web page in 4 Steps using the PDF instructions (link above)

This is our go to exercise for styling our divs and css. It will be the foundation for understanding how to build a single page that implements HTML5 and CSS in the Dreamweaver CS6 application. Once we have a single fully functioning page, we can make multiple pages from our original.

Note:

• Beginning web-designers MUST first master their overall development. Control first then SPEED! Download and print the PDF instructions found in the navigation bar above. Follow the instructions with precision. Once complete then you may edit the DIVs and CSS to suit your project.
  • Once you have a fully functioning page, then you make make multiples and add content (text and media).
• Advanced web-designers should first build a fully functioning page and then convert it to a template with editable regions. Then new pages are built using the template.
  • The main advantages of implementing a template is that the speed in development time improves dramatically plus changes to the template ensure that ALL further changes occur across ALL the template based pages.

There are approximately 4 steps in building this single page.

1. Insert Divs and classes
   1. see above link to finished step 1
2. Edit the classes
   1. see above link to finished step 2
3. Insert & style our navigation bar
   1. see above link to finished step 3
4. Clean up and obvious CSS hack for older browsers (Internet Explorer usually)
   1. this page

Each of the 4 parts are covered separately. Many beginning students encounter errors in one or more of these 4 main areas - or steps. It's the sticky point starting out. Having a typical set of instructions all in one place is helpful for the beginning web designer just coming out of the gate. So here it is - please refer to these instructions to build and edit your first page.

Note: The PDF instructions for STEP 4 involves an analysis of the code for the CSS rules ".header" and ".header h2".

Instructors Notes

Students should be able to complete this project in about two hours assuming

• they can identify a CSS rule, Div Tags, and body tag
• have an introductory understanding of the nature of inheritance and nesting
• have about 20-30 hours in the Dreamweaver environment
• are capable of adding a new style and editing existing

For further information take a tour back to the class website. Comments are also welcome through the instructor's professional site.