Chapter 1 covers how to make a simple HTML template. If you have worked through any of the succeeding chapters, you opened your template.htm file many times as you created different practice pages. As you design your Web site, you will find it helpful to create a template page specifically for your site. This page serves as a canvas to plan and test your layout, experiment with colors, and so on. It also enables you to give your site the same (or similar) look on every page.
Create a Template
You can create your template page by opening template.htm and saving it as sitetemplate.htm. Keep your browser open as you begin to plan your layout, and view your page as you make adjustments to it. You also might want to add some sample text for this preliminary stage, using some of the page elements you think you’ll need for your site. Later, as you work on your style sheet, you’ll be able to see how your styles affect the overall appearance of the page.
If you’re planning to build more than 10 pages that will share the same basic formatting, you might want to consider an external style sheet rather than a template.
Plan Your Layout
Planning a layout for your Web site is what enables you to give your site its own distinctive look. The best place to start your planning is by visiting other sites and observing their designs. Set up a special Favorites folder on your browser so you can easily revisit sites that you find appealing. You also can save the pages on your hard drive for online access. However, resist the temptation to “borrow” from someone else’s site by merely copying the pages and changing the content to fit your own needs. Your site will mean more to you if it has your distinctive stamp on it. Besides, it can be embarrassing if one of your visitors also has visited the site from which you borrowed. Learn and get ideas from other sites, but make your site your own.
What should your layout planning include? A good layout includes a color scheme for the site, general page design, background colors and images, font choices, image placement, and navigation material. By planning these out ahead of time, you can give your site a consistency of appearance that you’ll never achieve with a haphazard, design-as-you-go approach.
17
If you find the idea of choosing and developing a layout for your site a daunting task, why not start with something simple and work up from there? A basic, three- celled table layout can be the foundation of a very nice-looking site, and it’s easy to do. The following code features an uncomplicated design with a top logo panel, a left-side navigation bar, and a right-side content panel. As you can see in the illustration that follows, it is a simple design that easily can be modified into more complex layouts.
<html>
<head>
<title>Sample Layout Template</title>
</head>
<body style="background-color:white;">
<table border="2" width="100%" height="100%"
cellpadding="0" cellspacing="0">
Download and Save a Web Page
If you want to save some Web pages for offline viewing, you do it in much the same way you would if you were merely saving a file. In Netscape, click File, Save Page As; then choose the directory where you want to save the file. For Internet Explorer, click File, Save As, and when the dialog box opens, make sure that the Save As Type option has “Web Page, complete” displaying in the selection box, as in this:
410 How to Do Everything with HTML
<tr>
<!-- Row 1, Cell 1: Logo -->
<td colspan="2" height="15%">
Top bar is for your logo or heading</td>
</tr>
<tr>
<!-- Row 2, Cell 1: Nav bar -->
<td class="nav" width="20%" height="85%">
<p>Left side bar is for navigational links</p>
<a href="nolink.htm">Sample Link</a></td>
<!-- Row 2, Cell 2: Content cell -->
<td width="80%" height="85%">
Right panel is for your content
<h1>First level heading</h1>
<h2>Second level heading</h2>
<h3>Third level heading</h3></td>
</tr>
</table>
</body>
</html>
With a little shuffling around, you can take the preceding code and rearrange it to produce a layout with the navigation bar on the right, or even with top and bottom navigation bars and a center panel for content.
TE AM FL Y
Team-Fly®
TE AM FL Y
Team-Fly®
17
The borders for the table have been set to 3 to make the layout easier to visualize. However, once you’re finished designing your layout, you’ll probably want to turn them off. You can easily remove them by setting the table border attribute to 0.
Once you’ve settled on a design for your site, you can develop a style sheet.
You can use style sheets to control virtually any aspect of your pages’ appearance.
However, controlling appearance is only one of the strengths of CSS. CSS can also be a real timesaver.