email kara reuter email patrick lavergne

Web Site Design 2 : Web Authoring Tools CLASS: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

CLASS 4


USING HTML TO LAY OUT YOUR PAGE(S)

Tables
The major tool for laying out your pages in HTML is the table. At first, when you're working with HTML table code — with all the available settings, from table height and width, cell height and width, column and row spanning, horizontal and vertical alignment, cellpadding and cellspacing, table and cell background colors — you might feel as though you have little control over how browsers will display your content. In fact, all these settings, when used in combination offer a great deal of control, once you understand how the browser "thinks."

Browsers make many complicated "decisions" when it comes to displaying your tables based on the specifications you provide in the HTML. As a rule of thumb, when it comes to controlling tables, "it's all in the width." (It's nearly impossible to control for table and page height.) If you specify table width and cell width religiously for each and every cell in your table, browsers will do their best to adhere to your specifications. But, this is a losing battle. You can't control for things like the size of HTML text, which may very well run wider or longer (or narrower or shorter) on other platforms and with other browser settings, which could then end up breaking your table. Or, you may make a mathematical error and your cell widths aren't adding up and you've confused the browser. Or, an image may exceed the specified width of the column containing it. Sometimes, it's not practical — or even preferable! — to specify each and every cell's width dimension.

Here's where understanding how the browser "thinks" comes in handy. Browsers read tables from left to right and then down, the same way you write your HTML: left to right across the first row, then left to right across the second row, and so on. Again, browsers will attempt to follow your specifications as best they can. If the browser finds a discrepancy — contents that exceed the specified width of a column — it will automatically make the adjustment, pushing the width of the column open to accommodate the cell's contents. If, on the other hand, no overall table width and no cell widths are specified, the table will display at the smallest size possible, based on the contents of its cells (and any specified cellpadding and cellspacing) — it will expand or shrink depending on its contents and its placement on the page with other elements. If, however, a table width is specified, but no (or only some) cell widths are specified, the browser will draw the table at the total width you specify, but then distribute the column width (and row height) in proportion to the contents of each of the columns.

To be a successful Web designer and to create Web-ready layouts, you'll simply have to master these issues in tables. Depending on the layout you've designed, you will have to decide when and how to specify table and cell widths, to use pixels or percentages for width and height settings, to vertically and horizontally align table contents, to use row and column spanning, to nest tables, and more. With time and lots of practice, you should be able to "think" like the browser and intuitively know what will work in a Web layout and what won't.

Until you achieve this fluency, though, there are few basic rules you should accept and a few steps you can follow. The layouts that are easiest to translate into HTML are highly modular, adhere strongly to a grid, and use very little layering or overlapping. By the nature of the code, Web pages are highly grid-oriented — you will need to figure out, literally, how to fit the elements of your layout into boxes. To determine how to start writing your HTML, you'll need to look carefully at your layout and try to fit it into a workable grid.

EX LIBRIS CANDY REVIEW
Evaluating Layouts

Designing Web pages is an iterative process. Layouts must be evaluated against your site plan, ensuring that all the specifications are met. The layout itself may also require special changes or compromises in order to be more easily "translated" into HTML. Initial passes at designing the Candy Review pages came up short on both counts:

Closer attention to the goals outlined in the site plan and mindfulness of the restrictions of HTML finally resulted in strong, feasible design:
The first step is to try to identify "behavior areas" — separate sections of the layout that have their own integrity. Find parts of your layout that must be tied together in order to make sense, for instance, a particular paragraph of text that must be aligned with a particular image or text headings in separate columns that must align.

Next, if you've been working in Photoshop or Illustrator to design your layout, print out your design and with a ruler, prepare to draw lines blocking out potential table rows and columns. Try first to isolate the behavior areas you identified into their own table cells. Also, any portion of your design that has a different background color must go into its own table cell. As you're drawing lines, do not bisect any text. Also, try not to bisect any images. If you find that you do need to split images, try to avoid chopping them in more than two pieces, both horizontally or vertically. (In other words, do not chop an image into more than four quadrants.) Your goal should be to try to draw as few lines as possible. You should also strive to create a table that isolates the content into just a few table cells, leaving as many empty cells as possible. If you find that you're having a difficult time, you may need to adjust your layout into one that is more "Web-friendly" — consider moving your graphics and/or text up or down or left or right slightly to line up with other elements in your design. Also, don't be afraid to nest tables within table cells if it simplifies your overall layout.

To finalize the design of the table for your layout, you'll want to think about the lines you just drew over your layout as "expansion joints" — imagine your table "breaking," being pulled apart at the seams, with rows taller or shorter or columns narrower or wider than you've just drawn them. Would your design still work? If not, you should go back to the drawing board. (This is especially important in thinking about designing fluid-width layouts that fill the user's browser window no matter what size.)

Frames
Frames are very similar in concept to tables. Imagine a table stretched in height and width to always fill the entire browser window. Now imagine that each of the table's cells are separate HTML documents. Frames are very useful for layouts that have highly distinct "behavior areas" or behavior areas that control the behavior of another area. However, frames are very hard to implement well (and as a result are highly unpopular with users) and even so, there is almost certainly a solution that doesn't include frames which is worth considering.

Frames have an entirely unique set of attributes and values with which you'll have to familiarize yourself. Some sites that make use of frames are:

  • Netscape's HTML Tag Reference
    This site uses frames that have borders and are resizable (try dragging the frame border) and has scroll bars on each frame. Notice also that the links in the left frame load pages in the right frame.
  • San Francisco Stories
    This site uses navigation in frames similarly, but notice the very different effect achieved by turning borders and scroll bars off.


FRAMES IN GOLIVE

About frames
Since the content of each frame is a separate page (and separate file) with its own URL, it can be changed and scrolled independently of the pages in other frames. For example, you can use frames to create an onscreen navigation aid or table of contents that remains visible while the viewer scrolls through the page in another frame.

You need at least three HTML documents to create a two-frame page layout: one document for the frame set and two documents for the visible pages of content. The frame set is the master document that defines the size and location of the frames and specifies the URLs that reference the content pages. You design the content pages to fit or scroll within specific frames in the frame set.

You can set frames to scroll if the content page is larger than the frame and to have visible borders or no borders. You can also set frames to be a fixed size or to resize proportionally when a visitor resizes the browser window.

Note: At least one frame in the frame set must be resizeable.

When working with frames, keep in mind the following browser limitations:

  • Single-frame pages do not display in Netscape Navigator and Communicator browsers.
  • Browsers tend to offset the content of a page from the edge of their main display area and from the inner edges of frames by a few pixels. This behavior can cause sizing problems.
  • Nesting frame sets within frame sets is possible but can cause serious navigation problems.

Adding frames to a Web page
The Frames tab of the Objects palette contains a selection of frame sets that can be dragged to your document window when you want to create a Web page with frames. You can display a preview of the frame content directly in the document window, without a browser. You can then make corrections on the spot by double-clicking the frame content or by dragging and dropping an alternative page.

To create a frame set:

  1. Create the HTML pages you want in your frame set. For example, create a page "Content.html" for a table of contents frame, and "Body.html" for a main window.
  2. Open a new document window, and click the Frame Editor tab at the top of the window.
  3. From the Frames tab of the Objects palette, drag a frame set icon into your document window.
  4. Select the frame set by clicking any of its horizontal or vertical dividers.
  5. Set the frame set options in the Frame Set Inspector. (The Size text box is unavailable because a frame set cannot have an absolute size.)
    • Click an Orientation button in the Frame Set Inspector to arrange the frame borders in the frame set horizontally or vertically.
    • To change the thickness of a border, click any divider in the document window, select the Border Size option, type a value in pixels, and press Enter.
    • To hide a horizontal or vertical border, select the divider and set the Border Frame to No and the Border Size to 0.
    • To assign a color to all borders in the frame set, click any divider in the document window, select the Border Color option, click in the Border Color box, and then select a color from the Color palette. This color overrides the gray border that most Web browsers display by default.
    Note: To color the background of a frame, you must select a background color for the page you want to display in that frame.
  6. Click each frame in the frame set, and give it a descriptive name. (For example, label the top frame "Identity" and the right frame "Main.") Set other frame attributes as needed.
  7. Name the page title of the frame set. (Titles assigned to individual frames won't appear in the browser window.)
  8. Save the frame set document. Make sure to save it with an .html extension, for example, Frameset.html.

To specify the contents of a frame:

Do one of the following:

  • In the Frame Inspector, drag from the Point and Shoot button to a page in the site window, or to the Page icon next to the title of the target document.
  • Type the desired file name in the URL text box of the Frame Inspector. Click the Browse button to choose a Web page.
  • Drag URLs from the External tab of the site window. (By using URLs, you can reference resources on remote volumes or servers. Drag HTML pages from the Files tab of the site window or from the desktop.

Note: To make the contents of the frame change when visitors click links on a page in another frame, you make this frame the target for each link.

To preview the frame set page with its contents:

Click the Preview tab (Windows), or Frame Preview tab (Mac OS) at the top of the document window. You cannot edit in the Preview mode.

Note: Adobe GoLive cannot preview external URLs. You need to test external links with a browser.

To specify frame attributes:

  1. Select the frame you want to modify.
  2. In the Frame Inspector, do one of the following to specify a size for the frame:
    • Choose Scale from the pop-up Size menu if you want to size the frame automatically when a viewer resizes the browser window.
    • Choose Pixel from the Size pop-up menu, and enter the desired size in pixels if you don't want the frame to be resizable. For example, use this technique if the frame will display a small image of known dimensions. Note: If you specify an absolute size in pixels for one frame, you must set at least one more frame with the same orientation to Scale, or the frame set scales all frames in that direction.
    • Choose Percent from the Size pop-up menu if you want the frame to have a fixed ratio relative to the overall height or width of the frame set. Then use the Size text box to preset a percentage. For frames with horizontal orientation, this attribute controls the relative height. For frames with vertical orientation, it controls the relative width.
    • Choose Pixel or Percent from the Size pop-up menu, and drag the frame border to the desired size.
  3. In the Name text box, type a name for the frame.
  4. Select an option from the Scrolling pop-up menu:
    • Auto hides the scrollbar if it isn't needed and shows it if the content is too large for the frame.
    • Yes shows the scrollbar at all times.
    • No hides the scrollbar.

To move a frame or a nested frame set:

  1. Click and drag to move a frame. Control-click and drag to move a frame set. As you drag, you'll notice that the frame orientation limits the direction of motion. You can drag vertical frames sideways and horizontal frames up and down, but you cannot extend the frame set by dragging beyond its boundaries.
  2. Release the mouse button when the frame is at the desired location, or when the nested frame set is at the desired location within the master frame set.

Using a table of contents page in a frame set
When you use frames to display a table of contents and the pages linked to it, for every link in the table of contents you must specify the target frame in which the linked page will appear.

To specify a frame for linked pages:

  1. Create a frame set and set your table of contents page to appear in one of the frames.
  2. Open the table of contents page and link each item in the list to a Web page.
  3. For each link, in the Link tab of the Text or Image Inspector, specify the target frame where you want the linked page to appear by choosing an option from the Target pop-up menu:
    • Choosing a frame's name loads the page in that frame. The frame names of your open frame set appear at the top of the menu.
    • _top loads the page referenced by the link into the full Web browser window, replacing the current frame set entirely. If the current page is already at the top, the page loads into the frame that contains the link.
    • _parent loads the page referenced by the link into the parent of the current document. If the current page has no parent, the target _self is used. (The parent is the next highest frame set in the hierarchy.)
    • _self loads the page referenced by the link into the window or frame that contains the link, replacing the table of contents page.
    • _blank loads the page referenced by the link into a new untitled window.
    • Default removes any previously set target for the page.

— Excerpted from the Adobe GoLive User Guide


FRAMES IN DREAMWEAVER

Frames overview
Frames divide a web page so that different files can be loaded into defined areas on the same page. Frames commonly define a navigation area and a content area for a page.

When you split a document into frames, Dreamweaver creates an untitled frameset file and untitled documents in each of the new frames. What a user sees as a single web page with two frames is actually three separate files: the frameset file and two files containing the content that appears inside the frames.

A frameset is a file that defines a web page with frames. A frameset stores information about the size and location of the page's frames along with the names of the files that should be loaded as the content for each of the frames.

You can change the properties of frames and framesets, resize frames, and use links to control their contents.

When View > Frame Borders is off, the frameset appears exactly as it does in a browser. When frame borders are displayed, Dreamweaver adds space around the document for the border and widens small borders for easier dragging and selecting.

Creating frames
Create a frame by dragging a frame border or by choosing commands in the Modify menu.

To create new frames, do one of the following:

  • Choose Modify > Frameset > Split Frame Left, Right, Up, or Down.
  • Choose View > Frame Borders and Alt-drag (Windows) or Option-drag (Macintosh) a frame border into the Document window to split the frame vertically or horizontally. Drag from one of the corners to divide the current frame into four new frames.

To delete a frame:

  • Drag the frame border all of the way off the page or to the border of the parent frame.

Selecting a frame or frameset
Select frames and framesets to change their properties. The Property inspector displays the properties of the selected frame or frameset.

To select a frame, do one of the following:

  • Alt-click (Windows) or Shift-Option-click (Macintosh) inside a frame.
  • Choose Window > Frames and click a frame in the Frame inspector.

To select a frameset, do one of the following:

  • Click a frame border in the Document window.
  • Click the border enclosing the frames in the Frame inspector.

When a frameset is selected, all the borders of the frames within the frameset are outlined with a dotted line in the Document window.

To move the selection to the next frame, do one of the following:

  • Press Alt (Windows) or Command (Macintosh) plus an arrow key to move the selection to the next frame.
  • Press Alt (Windows) or Command (Macintosh) plus the Up arrow key to move the selection to the parent frameset.
  • Press Alt (Windows) or Command (Macintosh) plus the Down arrow key to move the selection to the child frame.

If the HTML inspector is open, it tracks the current Document window selection in the HTML code.

Frame inspector
The Frame inspector displays the framesets in the current document and lets you select frames and framesets so that you can change their properties.

The Frame inspector also shows the hierarchy of the frameset structure in a way that may not be apparent in the Document window. Framesets have thick three-dimensional borders. Frames have thin gray lines and display the name of the frame.

To display the Frame inspector:

  • Choose Window > Frames.

To select a frame in the Frame inspector:

  • Click a frame in the Frame inspector.

To select a frameset in the Frame inspector:

  • Click the border enclosing the frames in the Frame inspector.
    When a frameset is selected, all the borders of the frames within the frameset are outlined with a dotted line in the Document window.

About Frame and Frameset properties
Two sets of properties control the appearance and properties for frame documents.

  • Frame properties determine the frame name, source file, margins, scrolling, and resizing for individual frames within a frameset.
  • Frameset properties control the dimensions of the frames and the color and width of the borders between frames.

(Choose Window > Properties to display the Property inspector if it isn't already open.)

To view frame properties, do one of the following:

  • Alt-click (Windows) or Shift-Option-click (Macintosh) a frame.
  • Click a frame in the Frame inspector.

To view frameset properties, do one of the following:

  • Click a frame border in the Document window.
  • Click the border enclosing the frames in the Frame inspector.

Controlling frame content with links
Use a link in one frame to change the content in another frame.

To create a link that changes the content of a different frame:

  1. Alt-click (Windows) or Option-click (Macintosh) a frame to select it.
  2. Name the frame by entering a name in the Frame box in the Property inspector.
  3. Repeat steps 1 and 2 for each frame in the frameset.
  4. Select text or an object, and then enter the file to which you want to link in the Link box in the Property inspector. To specify an anchor in the other file, enter a pound sign (#) before the anchor name.
  5. Click the expander arrow in the lower right corner of the Property inspector and then choose the name of the target frame from the Target pop-up menu.

Saving files in frames and framesets
A page with frames includes several files. Choose the appropriate option to save a file within a frame, the frameset file, or all files at once.

To save files in a frameset, choose one of the following options:

  • To save a document inside a frame, place the cursor in the frame and choose File > Save.
  • To save a frameset file, choose File > Save Frameset or File > Save Frameset As.
  • To save all open files at once, choose File > Save All.

— Excerpted from Macromedia Dreamweaver Help Pages


FURTHER READING

Tables

Frames


ASSIGNMENT

  • Plan your page's layout on paper with a pencil and a ruler — identify your layout's "behavior areas."
  • Begin working with Dreamweaver or GoLive to write the code to lay out your page(s).


NEXT CLASS

Slicing, dicing, and optimizing images with ImageReady and Fireworks



school of the art insitute of chicago


division of continuing studies