Well, the adventure has actually just begun. The images and code produced by ImageReady are useful in simulating the look of the pages. However, once the actual content is added 90% of these pages will break. The layout will distort and the code will need to be modified. A "mock up" simulates the look of the finished Web page, a "template" contains code that will produce the look of the mock up no matter what the size and shape of the content. This section of the CD is devoted to creating templates.
You may be wondering what I mean by "broken pages". Tables are used to hold most Web sites together. If you have navigation that runs along the side of the screen, the cells that hold that navigation are connected to the large cell which contains the content. When you add several paragraphs of text to the content cell, the navigation cells spread out to accommodate the new shape of the table.
Table layout in ImageReady BEFORE all the content has been added.
| button 1 | content |
| button 2 | |
| button 3 | |
| button 4 | |
| button 5 | |
| button 6 |
| button 1 | The content of each page will be different, and the content will change as the site is updated. Since the layout of the
navigation graphics needs to stay the same from page to page, we need to create a layout where the navigational graphics and the content
are not connected in a table. The content of each page will be different, and the content will change as the site is updated. Since the layout of the navigation graphics needs to stay the same from page to page, we need to create a layout where the navigational graphics and the content are not connected in a table. The content of each page will be different, and the content will change as the site is updated. Since the layout of the navigation graphics needs to stay the same from page to page, we need to create a layout where the navigational graphics and the content are not connected in a table.
|
| button 2 | |
| button 3 | |
| button 4 | |
| button 5 | |
| button 6 |
To make life even more confusing, the table will stretch differently in Internet Explorer, than it will in Netscape. The bottom cell of the table is shoved down in IE, while all the button cells spread out in Netscape.
The content of each page will be different, and the content will change as the site is updated. Since the layout of the navigation graphics needs to stay the same from page to page, we need to create HTML code in which the navigational graphics and the content are not connected in a single table.
The solution is nested tables, which are tables within tables. The principle of a nested table is to create an outer table which defines the overall width of the page, and holds inner tables which contain navigation and content. When the navigation is placed in one table, and the content in another, they can float independently of one another within the outer table. My content table could stretch out for several screens while my navigation table remains isolated within another cell of the outer table.
Nested tables are shown below. I created an outer table which contains 2 cells, one on the left for the navigation and another on the right for the content. The navigation table has been colored in blue and the content table displays in red. Note that in this example the navigation is floating in the middle of the first cell of the outer table. This is not the effect we want, but we are going in the right direction.
|
|
After isolating the table from the content we need to add the attribute valign=top to the outer table. This tag can be added to the <TR> tag or the <TD> tag which holds the navigation table. Now the navigation table is displayed at the top of the page, and will remain there no matter what the size of the content.
|
|
At the time of this writing, there was no way to create nested tables using ImageReady. To create working templates for your pages you will need to use an HTML editor such as BBEdit (Mac) or HomeSite (PC). Another popular option is to use a WYSIWYG Editor, I recommend Dreamweaver.
When using an HTML editor I create the outer table on a separate page. Next I create separate HTML files which contain the inner tables. When creating the page which contains my navigational table, I copy and paste all the javascript rollover code found in the HEAD of the document into the page. I again copy and paste the javascript rollover code when I am creating the navigation table. The linking code which contains all the ONMOUSEOVER and ONMOUSEOUT code must be included in the table.
I also create a table which holds the content. If I want 2 columns of text, I create a content table with 2 cells. If I plan to display graphics along the right and have text along the left, a table can control this look.
Finally I copy and paste the navigation and content tables into the outer table. I also copy and paste the JavaScript code which displays
in the head of the document, and make sure the
< BODY > tag includes the ONLOAD="preloadImages(); attribute.
This process is not easy, or quick. The first few times you do it can be very confusing and frustrating. Start with a site which has a simple layout like the one described on this page.
If you are using Dreamweaver build your outer table, then insert your inner navigation table. Create the rollovers within DreamWeaver, do not rely on the ImageReady code. Finally, add the table for content.
By using the sliced images from ImageReady and then building a page which contains nested tables, you can create templates which will accommodate varying levels of content and retain a consistent layout.
In this CD lesson, I have demonstrated the concepts using HTML, no Dreamweaver instructions are included. I choose to demonstrate using HTML code since I felt it was important for you to learn the overall concept before you master the specifies of the software. Feel free to apply these concepts to DreamWeaver, FireWorks or GoLive.
Special Note - the concepts covered in this lesson are intended to assist you when you are working on a "real" Web site. They are not a part of the Advanced Web Graphics homework assignment. If you find yourself becoming confused and overwhelmed by the instructions, just set the CD aside and return to it later on.
| home || begin || logos || photos & collage || rollovers (2) || animation || 2nd level || templates |