Connect CSS to all HTML pages

Dreamweaver Tutorial: Making All Your HTML Pages Work Together

Key Takeaways

• Reuse your finished home page instead of rebuilding the same layout on every page.

• Keep a separate copy of any content before replacing an existing file.

• Update both the visible page content and the document title.

• Preserve existing filenames, then check your navigation in a browser.

Why Your Home Page Looks Right but Other Pages Do Not

You’ve spent quite a bit of time getting your home page looking nice. The structure is in place, the styles are working, and everything looks good in the browser. Then you click Contact Us or About Us, and you’re back to the old design.

In this example, those older pages don’t have the home page’s div structure and styling. They contain the right information, but they haven’t been brought into the finished layout.

We’re going to take a little shortcut. Because the only unique part of these pages is their text, it’s quicker to reuse the styled page and put the correct content back in than to rebuild the structure on each one.

1. Keep a Copy of Your Page Content

Before using Save As, make sure you have another copy of anything you need to keep. Saving over an existing page replaces that file. Don’t confirm the replacement if it contains the only copy of your contact details or About Us text.

For this example, I have the text saved separately in a Word document, so I can paste it back into the new layout afterwards. Make sure you have your own content safely stored before continuing.

2. Save the Styled Home Page as Your Contact Page

Open the finished home page in Dreamweaver. This is the page whose structure and styling you want to reuse.

1. Choose File > Save As.

2. Select the existing Contact Us page, using its exact filename.

3. Save the file.

4. Confirm the replacement when prompted, provided your original content is backed up.

Once that’s done, the document you’re editing is the Contact Us page, even though it still looks exactly like the home page. That’s what we want at this stage: the finished layout is now in place.

Replace the Home Page Content

Change the visible heading to Contact Us, then replace the copied home page text with your contact details. Format the content and apply any existing class styles you need to make it look right.

A quick heading change is useful for checking that you’re on a different page, but it isn’t the finished job. Make sure you bring back the actual contact information rather than leaving copied text or temporary content behind.

3. Give the Contact Page Its Own Document Title

There’s another easy thing to miss when copying a page: the document title comes across too. Changing the heading in the page content does not change that title.

Every page needs its own unique document title. In the camper rental example, the home page is titled Vintage Camper Rentals Sydney. The contact page becomes Vintage Camper Contact Us Page.

The title field’s location depends on your Dreamweaver version:

• Earlier versions: the title field was in the grey bar above the page design.

• Dreamweaver 2014.2: the title field is in the lower Properties area.

Update the contact page’s title, then save your changes.

4. Repeat the Process for the About Us Page

Now we can do the same thing for About Us. You can use the newly styled contact page as the starting point because it already has the shared structure.

1. Choose File > Save As again.

2. Save over the existing About Us page using its exact filename.

3. Confirm the replacement after checking that its original content is safe.

4. Change the visible heading to About Us.

5. Replace the contact content with your About Us text and add any images that belong on that page.

6. Give the document its own title, such as Vintage Camper About Us.

7. Choose File > Save.

That last title change is worth a deliberate check. It’s very easy to finish the visible page and forget that it still has the previous page’s document title.

5. Check All Three Pages in a Browser

You should now have three pages: your index page, your Contact Us page and your About Us page. Because you’ve kept the same filenames as before, the existing navigation should still point to the correct files.

Preview the site in a browser and click through Home, About Us and Contact Us. Check that:

• Each navigation link opens the intended page.

• All three pages use the same overall layout and styling.

• The visible heading and content match the page you opened.

• Each page has its own document title.

Great, the pages now look like they belong to the same site. The shortcut is simple: reuse the structure you’ve already built, then carefully change everything that makes each page unique.

Key Terms

Save As

Saves the current document under a selected filename. Choosing an existing file and confirming replacement overwrites that file.

Div structure

The HTML containers used to organise areas of the page. Here, reusing that structure helps carry the finished layout across to the other pages.

Class styles

Reusable CSS styles you can apply to page content to keep its formatting consistent.

Document title

The page title shown by the browser, separate from the heading displayed within the page itself.

FAQs

Will Save As remove my old page content?

Yes. If you save over an existing page and confirm the replacement, that file is overwritten. Keep a separate copy of its unique text and any other content you need before doing this.

Why keep the original page filenames?

Your existing navigation links already point to those filenames. Replacing the pages without changing their names allows those links to keep working, although you should still test them in a browser.

Do I need to change both the heading and the document title?

Yes. They are separate parts of the page. Update the visible heading for the page content, then change the document title so each page has its own unique title.