|
|
The TemplateProfessional sites have a consistent design throughout the site. No matter what page you are on, certain graphics and color combinations remain the same. This establishes an identity for the site and visitors learn to associate the design with the site. For instance, if you see a page that looks like this: You immediately recognize it. Despite the fact that the screen shot above has absolutely no labels identifying what site this page comes from, you (hopefully) immediately recognize it. (If, for whatever reason you do not, it's a Franklin University page.) Also note that the page above could be any Franklin University page. This is because the Webmaster has established a color scheme and design and has applied it throughout the site. This kind of consistency is most easily achieved through the use of templates. A template is one web page that all of the web pages in your site will be based on. You need only truly "design" the site once and then you simply change the actual content for each individual page.
Setting aside room for navigation and banners.For this site, we will be using a traditional design. Across the top of the page, we will create a "banner", or identifying mark. We'll put the navigation links of the left side. This will act as a frame around the body of each page. There are two ways of achieving these results. One is through the use of frames, which we will be discussing later. The only problem with frames is that some browsers (a very small number of them) will not display them and the page will thus not appear to load. The method that will work in any browser is the use of tables. Tables are parts of the page that are divided up into rectangles (known as cells) arranged in columns and rows. They were originally implemented for use as actual tables - rows and columns of information:
This is still an excellent use for them. But, as web designers sought to create more interesting designs for sites, they began to come in use for positioning of elements. Complex invisible tables are commonly used to position elements precisely on a page. (I used this method to create the image map on this page.) In our case, we are going to set up invisible tables to position the elements in our template. Create a table for use in a site template
A window will open that details the options available for a table: First, we choose the number of rows and columns for the table. For our template,
Include Caption will add an additional column to the table. Do not choose it. The Table Alignment refers to which side of the page the table will be flush against.
Finally...
You should now have something that looks like this : (Don't worry if the colors aren't the same.) Customize the table for use as a template.We are going to use the cell on the top right for our banner.
This is text that will appear at the top of every page. If you have (or eventually, make) a graphic for the banner, you can put it in here in place of the text. Now, here is where mapping the site out in advance is going to pay off. Since you already know what your major categories are going to be, you can create what will eventually be your hyperlinks.
At this point, we will want to move our banner (web site name) over to the left a bit. You can do this by resizing the column on the left.
The Cell Properties dialog box (shown below) should pop up. If it doesn't, click the tab marked "cell" at the top of the box.
|
©2000 Harry Knight Certain elements (software titles, search engine logos, etc.) are copyright and/or trademarks of the respective copyright owners. Use of this material is restricted to educational use and is intended to promote both further understanding of the intellectual property discussed and, in effect, the product itself. |