Linking pages in Dreamweaver CS4

Now create the remaining 3 pages and link them up in Dreamweaver CS4. Create the following pages: about-us.html, services.html and contact-us.html the same way you created the index.html page. Insert the appropriate content, images, title tag, headings and subheadings for each. You will see all your pages in your ‘Files’ Panel [Window > Files].

Linking the pages:

When we click on the menu buttons at the top of the page we want the appropriate page to be displayed. Since the menu is in all the pages we have kept this in the template and when we update it here all the pages will be updated.
To link the pages from the menu:

• Open the template file (template.dwt). You can open it from the ‘Files’ panel – you will find it in the ‘Templates’ folder.
• To link the ‘Home’ menu button, select the ‘Home’ image and link it to ‘index.html’ within the ‘Properties’ Panel.
• Click on the folder icon next to ‘Link’, then browse and select index.html.
• Enter the value ’0′ into the ‘Border’ field.

• Similarly link the About Us, Services and Contact Us menu buttons to the appropriate pages.
• When you are done, save the template.
• You will get a message asking if you want to update the template files. Click the ‘Update’ button.
  
• Save your pages in case they we open while the template was updated.
• Now when you preview your pages (e.g. index.html) in your browser and click on the menu buttons the appropriate pages will open up.

Posted in: tutorial web