Linking pages in Dreamweaver CS4

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

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

html-pages

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.

home-link1

  • 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.
    update-template-files
  • 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.


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 Formatting Images in Dreamweaver CS4Forms in Dreamweaver CS4

Tags: ,
Posted in Dreamweaver | No Comments »