Web 210 Chapter 5
Lecture Notes
In addition to reading Ch. 5 of our main textbook,
read Ch. 4 (Page
Design) of "The Web Style Guide" as well as Chs. 2 & 3 of Jakob
Nielsen's "Designing Web Usability".
Objective #1: Use HTML tables effectively for functional and appealing
page layout.
- HTML tables are still a good choice for creating the grid structure of a Web page, especially since browser support for CSS and layers is not consistent.
- Of course, the <table>, <tr>, and <td> tags are necessary to create a table with rows and cells, don't overlook the <caption> and <th> tags. The <caption> tag allows you to add a caption to the top or bottom ( use align="bottom") of the table. The <th> tag allows you to set table header cells that contain bold, centered content.
- There are a number of table attributes that can be used with a table including:
- global attributes that apply to the whole table
- align (deprecated)
- background (deprecated)
- bgcolor (deprecated)
- border
- cellpadding - use cell spacing and cell padding for white space within a table.
- cellspacing - use cell spacing and cell padding for white space within a table.
- height (deprecated)
- width
- row-level attributes
- align (deprecated)
- bgcolor (deprecated)
- valign
- cell-level attributes
- align
- bgcolor (deprecated)
- colspan
- height (deprecated)
- rowspan
- valign
- width (deprecated)
- cell-level attributes take precedence over row-level attributes
- The colspan and rowspan attributes are very important allowing you to have cells span several rows or columns.
- You may have to override the browser's default cellpadding and cellspacing settings by including the code <table border="0" cellpadding="0" cellspacing="0"> to reassemble sliced graphics in a table so that there are no gaps in the graphic.
- Choose between relative and fixed table widths to achieve the look that
you want. Determining the width of the pages in your site is an important
step. This should be a factor of the monitor size and resolution of your audience.
As the textbook indicates, fixed tables are currently more prevalent.
- Fixed table widths
- Allow 40 or so pixels for the browser's margin & vertical scrollbar. Therefore
a fixed-table's width should be 760 pixels for an audience's screen
resolution of 800 x 600. (The textbook indicates to use a width of 750 pixels but you may find the 760 pixels works fine.)
- See practically any corporate home page such as ford.com or chrysler.com as an example
of a page with a table that has an absolute size in pixels.
- Relative table widths
- set a single column's width to a percentage with the other columns
set to fixed width's. This can easily be done in Dreamweaver's Layout
Table view.
- See thesitewizard.com & lists.topica.com/my as an
example of a page where one column expands to fit the browser window
- Pointers for using tables:
- write legible code using good indentation and formatting. Use Dreamweaver's Commands/Apply Source Formatting menu command to "clean up" your HTML code.
- remove unnecessary white space. See Figures 5-14 and 5-15 on p. 133.
- you may want to center your tables (using <div align="center"></div>)
to adapt to different resolutions. However some professonial web designers left align their HTML tables.
- stack tables for faster downloading than using large tables
- nest tables for interesting & complex layout designs but do not make excessive use of them though
- Add Latin text (called "greeking") to cells of a table that will contain text. This will allow you to judge the look of the page without focusing on the content. You can obtain some Latin text at lipsum.com
- Follow the "Building the Basic Table Structure" activity that
begins on p. 138
- Be able to make the changes indicated in the textbook using Dreamweaver
and its Property Inspector but verify in the HTML code that the desired
changes are taking place.
- As the author indicates, test column widths in a browser as you go since
they can be tricky. As the author suggests, consider using a graphic (i.e.
a spacer.gif) to "fill out" a cell, column, or row.
- You can set column widths to ensure that text will wrap properly but column width should only be set in one cell per column.
- You can place a graphic in a table cell to force it to be a minimum width and/or height since a browser cannot "wrap" a graphic like it can text.
- Sometimes you need to put an invisible graphic (same color as the background of the page) in a cell to keep it from collapsing. We often call this a spacer image and make it's height and width 1 pixel each.
- Review the page layouts on pp. 154+ that are created with tables that could
serve as templates in a web site.
- View other Web site designers' use of tables. First, visit a Web site and predict whether the designer used an HTML table or not and if so, predict how many columns and rows there are. Then save the page to your hard drive and open it in a program like Dreamweaver or Netscape Composer.
If a table isn't used,
determine how the author has placed graphics, text blocks, and other elements
across the page. The author may be using CSS layers or Flash.
- Activity: Test Dreamweaver's convenient screen size toggle switch
in the status bar at the bottom of the page editor that allows you to view a page that you are creating at customized browser window sizes.
- Type a quick web page with the source
<a href="javascript:resizeTo(800,600)">click
to resize</a>
Then bookmark that page and visit it to quickly
resize your browser window to see how your pages or other designer's pages
look in a browser window at 800x600 resolution. (You may find other interesting "bookmarklets" at bookmarklets.com.)
Objective #2: Use CSS and layers effectively for functional and appealing
page layout.
- Cascading style sheets (CSS) give a Web site a consistent and uniform appearance, by defining and applying styles such as font color and size to elements on all pages within a Web site.
- CSS goes beyond HTML to allow you the Web page designer to control the format of a Web page. (Really, HTML only affects the structure and function of elements on a Web page.) CSS permits the designer to separate the form of the page from its structure (HTML's role). No plug-in is necessary to render CSS but stylesheets are implemented differently in some browsers. Therefore, browser detection may be necessary in order to make your pages universally consistent.
- There are several ways to use CSS:
- inline style - the stylesheet tags are placed within HTML elements on the page to be affected. This method is not very efficient.
- embedded style - all of the necessary stylesheet specifications are placed outside of and above the <BODY> and even the <HEAD> of the Web page. In this case, they only apply to that specific Web page in which they are located.
- linking to an external style sheet (.css file) - by linking to a single, external stylesheet, you can set the format for dozens or even hundreds of Web pages to give a very consistent look to your Web site. At anytime in the future, you can modify the look by changing this one stylesheet.
- importing an external style sheet - a link to a single, external stylesheet is established as with the linking method described above, however embedded style rules can be used in conjunction with the rules in the external stylesheet. With the linking method above, you cannot use a combination of CSS methods.
- The word "cascading" is used because several of the above methods could be used within a Web site and actually define styles differently. Therefore, an established hierarchy is used to determine which style applies to a given HTML element. The following hierarchy applies with the higher numbers superseding styles set by lower numbers:
- browser default settings
- user style settings that are set in the browser
- linked external style sheet
- imported style sheets
- embedded style sheets
- inline style information
- HTML tag attributes
- Since HTML (including tables) was never meant to provide Web designers with the tools to create visually appealing Web pages. Remember that it was meant to provide for the structure of content, not the display of the content. Cascading Style Sheets (CSS) does however provide tools to position various elements such as pieces of text and graphics on a Web page in an interesting way.
- With CSS you can set margins, position text and images at places relative to one another, and you can make elements overlap one another.
- A layer can be added to a page in Dreamweaver using the menu command Insert/Layout Objects/Layer
- A CSS layer can be created with code as simple as:
<div id="Layer1" style="position:absolute; width:200px;
height:115px; z-index:1; left: 267px; top: 38px;">Hello World</div>
This example creates a layer with an id of "Layer1" with a width of 200 pixels and a height of 115 pixels. It's z-index is 1 which means that layers with a higher z-index will appear over top of this layer. The layer's left edge is at the position 267 pixels from the left of the browser window. It's top edge is 38 pixels down from the top of the browser window.
- Be sure to validate the CSS that you use in a page. Dreamweaver may not
provide CSS validation but you can use the W3C
CSS Validation Service. (You can validate your HTML by clicking the File/Check
Page/Validate Markup menu command.)
- CSS is a better option than HTML tables as far as accessibility goes. When blind people use a screen reader, it often reads the text in HTML table cells one after another left to right. Overall, keeping page design relatively simple is best for overall accessibility. If you do use advanced layouts with nested tables or many CSS layers on a page, you should provide an alternate, more accessible version of that page.
- Activity: Follow these instructor's demonstrations.
- creating a layer in Dreamweaver
- setting the visibility of a layer
- overlapping layers & changing the z-index of a layer
- attaching behaviors to a layer
- implementing browser detection to avoid cross-platform problems with
a layer. You can manually check a page for browser compatibility using
the File/Check Page/Check Target Browsers menu command. Of course, you can also use the File/Preview
in Browser menu command.
- convert layers to tables and vice versa to use tables rather than layers
using the Modify/Convert/Tables to Layers and ....Layers to Tables menu
commands
- CSS Information & Tutorial links:
Objective #3: Compare and contrast the use of tables and CSS layers
for page layout.
- Until designers trust CSS which only works dependably in recent browsers
and doesn't always work consistently between browsers, tables will be favored
over CSS layers.
- Be wary of using CSS for positioning for cross-platform and consistency
reasons
- Be wary of using a number of deprecated table attributes including
align, background, bgcolor, height at the global level and align & bgcolor at the row-level as well as bgcolor, height,
& width at the cell-level.
Objective #4: Create a Web page storyboard for an effective and accessible page design.
- Remember that on a home page, the motto "less is more" usually applies, especially with regard to content and maybe even links. Keep down the "visual noise" and use active white space appropriately. See Lynda Weinman's simplicity inspirational sites. Also, tour web site such as thebestdesigns.com to see how other designers effectively use tables and design principles.
- Realize that users scan a web page rather than read the segments of text on the page. They are probably scanning your Web page from left to right and top to bottom. So place items appropriately to get their attention. You should probably assume that the user is skimming your page to start with so you must forcibly grab his attention with your design and your content.
- Use shorter line lengths for readability. Do not use more than 10 words horizontally on home page. If the client supplies you with copy that is too wordy, ask him to chop it up.
- When you use tables to design the layout of a Web page remember that consistency in design is key. However, a balance between unity and variety is important.
- Create a page storyboard like Figure 5-19 on p. 138 before creating the table or even opening up Dreamweaver. You should show your table and cell pixel or percentage sizes though. Also, page background and text RGB colors should be listed on a storyboard.
- Take advantage of Macromedia's Designer & Developer Resources site to learn more about design and Macromedia's tools including Dreamweaver, Fireworks, & Flash.
Objective #5: Use templates to create consistent pages in a Web site.
- Using Dreamweaver Templates
- You can create a .dwt template file in Dreamweaver to build consistency into a Web site. Any future changes to a Dreamweaver template can quickly and easily be applied to any pages that were based on that template.
- All regions of a Dreamweaver template must be defined as locked or editable
(except for the page title which is always editable). The file extension
of a templage is .dwt. Templates are stored in the Templates folder at
your site's root directory on your computer and do
not need to be uploaded to the Web server.
- Create a template page by using the File/New... and choosing HTML Template.
- Use the Insert/Template Objects/Editable Regions menu command to make
a selected region of a template editable
- Create another web page by clicking File/New menu command but then choosing
the template under the Templates tab.
- Click the Templates tab on the Library Assets panel to manage your site's
templates.
- Edit a template and then check the page that is based on that changed
template to see if it has been updated as well.
- see Macromedia's tutorial and obtain free tempates at www.macromedia.com/software/dreamweaver/download/templates
- Discuss the pros and cons to using Dreamweaver templates as well as
an externally linked CSS stylesheet to define consistent elements on various pages in a site.
- Macromedia Exchange
is a free online service bureau at macromedia.com where you can obtain dozens
of free & inexpensive third-party Dreamweaver extensions. You must sign
up for a free account before you begin to download anything.
- Macromedia Extension Manager is a program that lets you easily manage your
Dreamweaver extensions. Click the Commands/Manage Extensions menu command.