Michele Gaggia - Web Design - Lesson 4

Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5

Web Design - Page Layout

Using Tables and Layers

To precisely position text and graphic elements in a HTML document it is necessary to create "invisible tables" that serve as a grid (Raster) to "hold" the desired objects in place.

Dreamweaver uses two different ways to work with tables:

To spare time during the design phase it is convenient to first draw tables in layout mode, as in this way you can create very quickly complex looking tables, with cells that are not vertically or horizontally aligned with each other. Later you can switch back to standard mode, and keep filling the tables with text and picture elements. Of course you should create a table that fits the graphic objects you want to use, or create graphic objects that fit the table you created.

You can also export a graphic with "slices" from Fireworks, and Fireworks will automatically create a HTML table to perfectly fit the slices you created (see Lesson 3 "Processing Pictures for Web Publishing").

To change all the table or cell properties, you have to switch back to standard mode.
For being invisible, a table must have a border width of "0" (properties toolbox, "Rahmen"). When creating tables in layout mode, their standard border is always "0".
Of course you can also make parts or all the tables "visible": just select a cell or the whole table and define a background color (properties toolbox, "HgF" = Hintergrundfarbe)

Exercise 7.1: Dreamweaver - switching between layer and table layout, creating tables and cells

Exercise 7.2: Dreamweaver - modifying properties table and cell properties, adding text and formatting with CSS styles

Website Standard Layouts and Screen Resolution

There are several kinds website standard layouts. A layout can be defined by a table of the corresponding width/height or by separate HTML-frames (see "using Frames" under). Here some examples:

In addition to these "standard" layout types, there a lot of possible "freestyle" layouts, some of which can be very amusing to "explore" but that are not necessarily the best option if we want the user to find the desired information in the easiest way and shortest time possible. Of course it is also possible to create original layouts that are also easy to navigate. Just a few examples:

Page width in pixel - It is usually best to make a website fit into standard resolutions, therefore tables should not be wider than the target screen resolution. As some OS elements (window borders, scroll bars) use additional space, it is necessary to leave about 40 pixel free for a table to fit. Examples:

Nowadays there are almost no 14" CRT screens with only 640 x 480 resolution around, so the recommended target screen should be a 15" CRT with 800 x 600 or a 17" CRT / 15" TFT with 1024 x 768 resolution.

Of course if you use a proportional table (width is defined in % instead of pixels, for example, width="95%") it will adapt to the window width, but in this way it is impossible to define the text flow and formatting: text and objects tend to "float around" when you change the size of the browser window. Besides, when the window is very large (or very small) text readability might be compromised. You can view an example of proportional layout here: http://www.digitalnaturalsound.com/logic_dsp/

Page Layouts using Frames

As it can be very time consuming to create each HTML page separately, there are some ways to change just the parts that are different across documents (usually page title and main page content), and to reuse the same files (HTML and pictures) for those parts that remain the same (usually website logo and header, navigation menus, footer).
There are several ways to achieve this, for example using "Frames", "Templates" or both techniques at the same time.

HTML-Frames: the page is divided in two or more HTML files, some of which can be fixed, while other can scroll if the page is larger than the screen. For example, you could have a "top frame" for the main site logo and header, and for the main navigation menu, then a "left frame" on the left side for a sub menu, a "main frame" in the middle for the main content, and a small frame on the bottom for the footer (copyright notice, etc.).
The file "containing" all HTML frames is called a Frameset. Both frameset and HTML frames must be saved separately (in Dreamweaver: menu "Datei > Frameset speichern/speichern unter..." or "Datei > Frame speichern/speichern unter..."
Another advantage of using frames is that the site logo, header and important navigation elements are always visible also when scrolling down the main frame and that the amount of code to load for each sub-page is smaller (pages load faster).
One disadvantage is that the fixed frames use precious screen space and the main content can never fill up the whole screen. Also if one frame is linked directly from another site, it might show up without the frameset and without navigation links ("dead end"). It is possible to use Java-Script commands to instruct a Frame that has been open outside its Frameset to reload automatically the main Frameset.

Links across frames: you will have to use the parameter target. The name of the available frames will be displayed in the Properties drop down menu. If you use target="_parent" you can open a new frameset in place of the current one. See HTML links for details on the target parameter.

Exercise 7.3: Dreamweaver - create a simple frameset with 3 frames

The strcuture of this frameset should be like:

topFrame, 80 pixel high (logo, header)

 

leftFrame,
160 pixel wide

(nav. menu)

mainFrame

(main page content)

 

 

Exercise 7.4: Dreamweaver - adding text, pictures etc. to the single frames

Exercise 7.5: Dreamweaver - add the contact page and a link in the leftFrame controlling the mainFrame

Exercise 7.6: Dreamweaver - add the missing pages

Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5

© 2003-2004 Michele Gaggia - all rights reserved