Adding Navigation for Multi-Page Websites
Most websites have many pages. So far this tutorial has shown you how to work with CSS for a one-page website. Now we will look at how CSS can make the multi-page website easier to manage.
Plan the Movement
Movement within a website is accomplished through links to other pages within the website. In the .html file, a link to another page on the website looks like:
<a href="pagename.html">Words to click</a>
Typically you will use a menu to organize the links. You need to repeat the menu on each page to keep a consistent look-and-feel to your website.
Menu planning is not just for chefs, it is a very important aspect of good website design. You do not want your audience to get lost within your website. A frustrated or lost person will leave your website and never return.
The website you are on right now has two menus to the left. The top menu is for the top level pages on the website. The bottom menu is different depending on which top level page you started with.
Feel free to view the page source behind this page.
To view the source XHTML code in your browser:
- For Opera, click View | Source
- For Firefox, click View | Page Source
- For Internet Explorer 6 or earlier, click View | Source
To view the External CSS .css file behind this web page:
- For Opera or Firefox, click the link below and a page will open in your browser.
- For Internet Explorer 6 or earlier, when you click the link below you will either be prompted to save the .css file or, depending on your settings, the file will automatically open in Notepad.
Decide Where to Put Navigation Styles
Navigation code is included in each of your .html files. This means the navigation code is repeated on every page, so maintaining this code takes a lot of effort. You can use Inline CSS for your navigation but this means all of the style codes are repeated on every page as well.
Using External CSS for all your pages will make maintenance of the entire site easier by reducing the amount of repeat code on every page. This way you can change the style of the navigation quickly, in one spot.
Use Resources to Aid Menu Design
There are many sources of inspiration for good menu design. Your favourite websites are a good place for you to look for design inspiration.
There are also many sources available on the Internet that can help you design and code your website. I have used, and recommend, designs I found at: Web Design From Scratch This website has a collection of free web page layouts with great CSS code. I have used one of their layouts here. This layout uses proportions of the browser page, not static HTML tables, so you can resize your browser window to any size and all of the text is still visible without a scroll bar on the bottom! Try it!
Their collection of layouts is very inspiring and you can freely use their code: 40 free CSS Layouts
If you do decide to use a design created from the Web Design From Scratch website you will download an .html file. Experimentation with this file is necessary to give you a good understanding of what you need to copy for your own website. This is easy to do. The designs are well thought-out and easy to understand.
Note that the CSS from this source is Imbedded CSS. To change this to External CSS you will need to cut the CSS out of the .html file and paste it into a .css file.
To extract the CSS from the .html file:
- Open the .html file in Notepad.
- Cut the CSS styles from between <style> and <\style>
- Create a new empty page in Notepad.
- Paste the styles into this new file.
- Save the new file with a .css extension.
- In the .html file,
between <head>
and </head>
add the reference to your new stylesheet :
<link rel="stylesheet" href="nameofstylesheet.css" type="text/css">
- Save the .html and .css files.
- Open the .html file with a browser, or if it is still open in your browser, refresh the page.
- The page should look the same as it did before you removed the style tags.
If not, ensure all of the code was correctly copied and the correct filename is used for the new .css file.
- Now you can experiment in the .css file with different colors and fonts and add your own content to the .html file.