Right now, you should have a CSS file and a HTML page. Things are looking good. This tutorial is going to show you how to write a second HTML page, using the same stylesheet. Don't feel limited to just 2 pages though: this tutorial is as equally applicable to your 2nd page as your 52nd page. That said, the next tutorial will show you how to make writing HTML pages far easier with the use of weblog data container. So, if you do have 50-odd pages to write, hold on to your horses...

Background Information

Most websites you visit will have a consistent look and feel. Most of the pages will look similiar, they’ll use the same colour scheme, they’ll have their logo and their footer on every page and so on.

In the last tutorial, we wrote a CSS page that was designed to style a basic HTML page. This time, we want to write a 2nd HTML page that shares the same look and feel as the 1st. Cor blimey, why not use the same CSS file then?

And that’s precisely what we do. Because our CSS file is stored in its own template, we can re-use the CSS file again and again. 1 page or 100 pages - it makes no difference. In fact, because you’re reusing the same file time and time again, your visitors only need to download once - speeding up your page response times as well.

Instructions

• Step 1: Assuming you're logged into the control panel, we first need to create a template where we want our new HTML file to reside. My 2nd page is going to be a potted history of toast, so I'm going to call my template "history". Choose a name that's appropriate to the content, since visitors will see that in the address bar. Anyway, go into your templates page, scroll down to the template group where your html and css file reside, and hit "Add a New Template".

• Step 2: So give your template a name. However, before you hit submit, consider duplicating an existing template. After all, this page is going to look remarkably like our index page, with just a few text changes. So, click the radio button next to "Duplicate an existing template" and in the drop-down list, select your "site/index" template (bearing in mind that you may have chosen different names). Then hit submit.

• Step 3: Now we'll want to edit the template again. Scroll down and hit "edit" next to your new template.

• Step 4: Now, there are a few things we may want to change. The first thing is the page title - it's good practice to have a different page title for every page on your site. That way, people who save your site into their favourites can tell at a glance what is on the page they've saved. It can be very frustrating to visitors if they save 3 or 4 useful pages from your site (such as your price list), and they all get saved as "Bob's Website". Make the following change, deleting the code with a line through it, and adding the code in green.

• Step 5: By now you should be pretty comfortable making any changes that you need to make. Essentially, we're just changing the text of the site, but we're sticking with the same layout. So, just go through your template changing any text to read what you want to say. Because this is only the 3rd tutorial though, I'll walk you through what I'm doing to my site. In the diagram, I've highlighted in green all the text I plan to change. Don't be afraid to add or delete paragraphs and headings as you see fit.

• Step 6: You can see the changes I've made highlighted in green below. You'll notice that I've added an extra paragraph, and an extra heading, called h3 (highlighted in red). The reason I've numbered this "3" instead of "2" like the last heading is because its good practice to have only one of each kind of heading on a page, and to keep them in numerically descending order.

• Step 7: You can see the changes for the 3 stylesheets written in tutorial 2 here: stylesheet a, stylesheet b and stylesheet c. One thing you'll notice is that the new heading is looking out of place next to the old heading. That's because we haven't written any styles for it in the stylesheet. So, its time to edit your css file.

• Step 8: Regardless of which stylesheet you are using, you probably want the new heading (h3) to look just like your old heading (h2). This is as simple as writing 3 letters in your css file.

• Step 9: You can see the changes for the 3 stylesheets written in tutorial 2 here: stylesheet a, stylesheet b and stylesheet c.

• Step 10a: There's just one final thing if you're following path a. You'll notice that my text has gone scrolling off the bottom of the slice of toast. This is inevitable, but one thing we can do to avoid this is to repeat the toast image vertically down the page, so there's always a slice of toast visible. This is another simple CSS change and you can see the result the result of repeating an image vertically here. If you can't see any difference try shrinking your window. We don't (in this example) have much text to scroll onto a 2nd slice of toast. However, different people use different screen and window sizes.

• Step 11: That's it! We're done! In our next tutorial we'll show you how to use subtemplates to keep common elements of your site (such as footers) separate. After that, we'll write a menu since it's no good having 2 pages if you don't link them together

Got something to add? Add your comment to the 5 already made

Written by Leo and Meg on Saturday 8th May 2004