Imagery Web Sites

Wiki Public Domain Image Resources - http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources
LibrarySpot.com Image Resources - http://www.libraryspot.com/images.htm
Deep Web Resources:
Read Write Web - http://www.readwriteweb.com/
Footnote.com (Historical Image Resources) - http://www.footnote.com/
Tools:
Adobe Photoshop - http://www.adobe.com/products/photoshop/index.html
Adobe Fireworks - http://www.adobe.com/products/fireworks/
Gimp - http://www.gimp.org/
GimpShop - http://www.gimpshop.com/

Audio and Video

Fancy Buttons and Menus

Typography Web Sites

I Love Typography (resource site) http://ilovetypography.com/
I Love Typography: 15 Examples of Excellent Web Typography http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/
Typographica (Typography Journal and News) http://typographica.org/
Microsoft Typography (resource site) http://www.microsoft.com/typography/default.mspx
ABC Typography (virtual museum) http://abc.planet-typography.com/
A List Apart: Typography (tutorials) http://www.alistapart.com/topics/design/typography/
TypoGraphic (history of type) http://www.rsub.com/typographic/
Digital Magazine: CSS Typography (resource) http://www.digital-web.com/articles/css_typography/
Noupe.com: CSS Tutorials http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
DesignSnips (Examples of Good Web Design) http://designsnips.com/

Typography Web Sites

I Love Typography (resource site) http://ilovetypography.com/
I Love Typography: 15 Examples of Excellent Web Typography http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/
Typographica (Typography Journal and News) http://typographica.org/
Microsoft Typography (resource site) http://www.microsoft.com/typography/default.mspx
ABC Typography (virtual museum) http://abc.planet-typography.com/
A List Apart: Typography (tutorials) http://www.alistapart.com/topics/design/typography/
TypoGraphic (history of type) http://www.rsub.com/typographic/
Digital Magazine: CSS Typography (resource) http://www.digital-web.com/articles/css_typography/
Noupe.com: CSS Tutorials http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
DesignSnips (Examples of Good Web Design) http://designsnips.com/

JavaScript and DHTML: Adding Interactivity

Making Money with Your Site

Imagery

Chapter five of The Principles of Beautiful Web Design deals with imagery.

Textures and Web 2.0 Trends

The web sites for review this week dealt with texture and the Web 2.0 trend. One textural tend is the grunge look.

Urban Dirty http://urbandirty.com

Best Textures Flickr Group http://www.flickr.com/photos/torley/collections/72157594588432564

Deviant Art Textures http://browse.deviantart.com/resources/textures/

Texture King http://www.textureking.com/

Grunge Textures http://www.grungetextures.com/

Grunge Styles
http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/

Photoshop Tutorials on Creating Textures
http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/

2007 Web Design Trends
http://www.modernlifeisrubbish.co.uk/article/2007-more-web-design-trends-and-cliches

Web 2.0 Tutorials
http://www.smashingmagazine.com/2007/03/10/web-20-tutorials-round-up/

Screen Resolutions Worldwide
http://www.modernlifeisrubbish.co.uk/article/screen-resolutions-and-aspect-ratios-worldwide

Typography

Chapter 4 of The Principles of Beautiful Web Design was about typography and how to create type that reflects the theme of you web site. Most choices to be made concerning type are in regard to the space around letters and text blocks rather than the actual font type. There are many online communities devoted to the topic if typography including: http://www.typofile.com/

There are only a small amount of font families supported by the two leading operating systems. There are nine font families known as the safe list. They are:

1. Arial
2. Arial Black
3. Comic Sans MS
4. Courier New
5. Georgia
6. Impact
7. Times New Roman
8. Trebuchet MS
9. Verdana

CSS style font-family properties can be used to control the fonts used in your web site. They are really useful because you can list the type of font which you would like used in order of preference. If a viewer does not have your first choice of font style is will go to your next choice. If the viewer does not have your second font style choice it will go to your third choice. Then you would list a generic font family similar to your font choice. This way a viewer who does not have any of your three choices installed on their computer can view your web site.

Letting Visitors Talk to You (and Each Other)

Attracting Visitors

Colors on the Web

Colors on the Web http://colorsontheweb.com/

Texture

Chapter three of The Principles of Beautiful Web Design deals with texture. Texture is anything that creates a unique appearance or feel to the surface of a design or object. Graphic design elements are utlized to create texture. These elements include:

Points are pixels which together other elements such as lines, shapes and volume.

Lines which are formed by two or more points. Diagonal lines give people a sense of movement or excitement. Jagged lines consisting of sharp angels give a dangerous or frenzied sense. Curvy lines evoke a feeling of relaxation.

Shapes are created when two endpoints of a line are joined. Geometric shapes are the default on computers. They evoke a sense of things that are technical and mechanical. Free form or organic shapes are abstract consisting of non-geometric curves, random angels and irregular lines. These shapes create a sense of informality and spontinaeity. Organic shapes soften a design.

Volume and depth- There are three dimensions width, height and depth. Perspective is created when objects appear smaller at a distance. Proportion is an element created when objects are formed based on their dimension and three-dimensional space.

Light and shadow are used in design to create depth and volume of objects thereby making them three-dimensional. Flat objects on a web page can be made three-dimensional by using light and shadow such as button shapes.

Depth can also be created by using a drop shadow to an object which can be done in Photoshop utilizing layers. A div element needs to be added to one's style sheet as well.

All these different elements together can create volume and depth in objects.

Patterns are repeated images often used for background design. Repeititous backgrounds were very popular in the nineties. CSS has changed the control to design background images. Backgrounds can now be applied to all elements whereas before designers were limited. The five CSS properties are:

1. background-color - the color is defined using hexadecimal colors. Transparency can also be specified.
2. background-image - an image can be used for the background and can be done using url (filename) or none.
3. background-repeat - there are four possible values used to repeat background images. 1)repeat where the image repeats in a tiled manner both horizontally and vertically 2)repeat-x where the background image repeats horizontally, 3)repeat-y where the background image repeats vertically and 4) no-repeat where the background image is not tiled.
4. background-attachment - this property is used to determine whether a background image remains fixed or moves when a viewer scrolls on page.
5. background-position which controls the position of the background image and is set using two values: vertical and horizontal. The values can be set in three ways. 1)Using keywords (top, center, right for the vertical position; left, center, right for horizontal). 2) Utilizing CSS measurements. 3)Using percentages. Be sure not to mix the three types of values together (keywords, percentages, measurements) since Firefox and Opera browsers will override this type of positioning.

Frames

Chapter ten of Creating Web Sites: The Missing Manual deals with the use of frames in a Web site. There is a problem created when you want an element to appear on each page of your Web site. To show the item on each page copy and pasting is required. A way to fix this problem is to use frames which allow you to show more than one Web page within the same browser.

Frame Basics

Frames operate by dividing a browser window into two or more areas; with a different HTML page appearing in each area. To build a frame, first a frameset document must be created to hold the smaller Web pages and define the way a browser window is divided.

A frameset page is constructed differently from a typical HTML document. The document still begins with an html tag and has a head section to define the title however a body tag is not used after that. A frameset tag is used to separate the page into frames. A noframes tag is then used to provide the content that appears when a frame is not viewable.

There a number of reasons a browser may not be able to support frames:

• The browser is extremely old
• It is a mobile browser like those used for small devices like cell phones and PDA.
• The surfer is visually impaired and is utilizing a screen-reading program.

Defining the Frameset

The information within the frameset is where the bulk of the frameset is located. This is where the browser window is split into columns and rows of defined sizes. The width of the columns are specified using the cols attribute. The row height is defined using the rows attribute. The measurement of columns and rows can be given using percentages or the exact pixel size. When using exact pixel sizes the browser will proportionately fill the remaining frames. An asterisk (*) can be used to indicate to the browser to fill the rest of the frame's space.

Frames are rectangular shaped regions and cannot be altered to create sophisticated shapes. There is a way around this; a background-image property could be used to create the appearance of a shaped frame.

Putting Documents in a Frameset

The frame source needs to be defined in order to add content to the frame. The frame source consists of an HTML document with these contents. Each row and column is defined using a single frame tag. Frame tags are placed within each frameset.

A page is linked to a frame by setting attributes within the frame tag. The src attribute lists the Web page file name. The source for a frame is added the same way the source the an image or hyperlink is added. The file name is included in the same folder as the page. A relative or absolute path can also to used. The name attribute is how a frame title is named to describe the frame.

Frames are shown in browsers using the title which defines the frameset page.

Targeting Frames

When working with frames, your browser must be instructed to open the target page in the Main frame. This is done adding a target attribute to an anchor tag. The target attribute provides the name of the frame where the page is to be displayed.

A base tag is used to set a target frame and apply it to each link within a page.

There are also four target names used for special situations:

1. _top which opens the target page into a top level window. It is like opening the target page URL in a browser address box.
2. _parent which is used to open the target page in a frameset containing a new frame.
3. _self which is used to open the target page in the current frame.
4. _blank which opens the target in a new pop-up window.

Building Better Frames

When building more complex sites nested frames need to be used.

Frame Borders and Resizing

A noresize attribute can be used to lock frames so they will not move even when the window size does. This is a way of determining as a designer how the page will look.

Borders can be changed using the border attribute of the framset tag. The width of the border attribute changes the measurement of the border bar; this is done in pixels.

Scrolling

Frames have scroll bars if the content within the page grows larger than the size of the frame. To keep from having more than one scroll bar on a page you need to keep the content down. Another way of dealing with this is to use the scrolling attribute and set it to no so that there is no scroll bar for that specific frame area. There should always be at least one scroll bar on your page.

Handling Browsers That Don't Support Frames

In order for surfers who cannot view frames you can set their browsers to view each frame as one page at a time. This is done by copying the HTML from the menu htm file into the noframes portion. The noframes portion of the document will resume where the HTML document stopped.

Better URLs for Framesets

There is less flexibility with frameset pages because they combine many pages into one URL. One way to deal with this problem is to create more frames pages but this involves creating many more frameset pages. If you alter the layout of your website this will involve a great deal of updating. Web designers usually add JavaScript code to each page to handle this problem.

Nested Framessets

Nested framesets are used to divide and subdivide a browser window. The only issue with nested framesets is figuring out what the order to use when dividing a page.

A good way to break down large pages is to use topic links. These links can be added using bookmarks.

Dreamweaver has built-in tools that make it easier to work with frames.

Page Layout Tools: Tables and Styles

Chapter nine of Creating Web Sites: The Missing Manual deals with the types of layout tools; table based layout and style based layout. For many years table based layout was the way to create a well aligned web site. This layout consisted of an invisible table with invisible grids where everything on the web site would be placed in proportion to the grids. Today CSS style sheets are the way to position the elements of your web site. The style sheet is linked through the HTML documents of your Web site. Style sheets produce a more polished, proportionately structured Web site.

HTML Tables are based on an invisible table consisting of rows and columns. There some tags associated with HTML tables:

• table tag - which is the starting point of the table.
• tr tag which represents a table row.
• td tag which is indicates a table cell and stands for table data. Within the td tag text, numbers or an image tag is placed.
• th tag is a tag used to assign column headings. Text within the th tag is both bold and centered.

Indenting table tags helps see when there are mismatched tags.

Formatting Table Borders

Table borders are formatted using the border property for which you can specify the width of the border in pixels. The border style cannot be changed. The only way to change a border is to use a style sheet.

To create a different style border line on a table:

1. Create a borderless table.
2. Apply a border using the tr and table tags.

There is one problem when constructing tables withs borders. An empty table cell will not get any border at all; this is known as collapsing. Collapsing can be prevented using a single non-break space.

Text alignment, padding, margins, colors and background images can also be changed using style sheets.

HTML tables consist of a cell that reaches over rows and columns. This is know as spanning. A columnspan property can be added to a td tag to create a cell that reaches over two or more columns. The rowspan property is used in the same way except that cell area extends over rows and not columns.

Dreamweaver has a menu command called Merge Cells to joins cells together.

Sizing and Aligning Tables

If the columns are not defined in a table then the column as wide as the longest text line or to adapts to size needed to hold an image (an image tag is needed). Tables enlarge to fit all columns however it does not adapt in a way that would result in the table growing outside of the browser window.

More space can be added to tables using style rules. When padding is increased for the td and tr tags the result is more space between cell contents and borders. The margin width for the td and tr tags enlarges the space between cell borders and adjacent cells.

There are two ways to size tables:

1. Relative sizing where sizing is based on the dimensions of the browser window and is expressed by percentages.
2. Absolute sizing where pixels are used to create the exact size of the table.

Column sizing the width property and td and th tags are used and are expressed by either proportions, percentages or exact pixels. When percentages are used they are used to define the percentage of the table the column will fill space wise. The column's width percentage does not need a specification of value in more than one column since the browser will resize and fill in the remainder of space in the table. When including the percentages for all columns be sure that they add up to 100 percent. To size columns a style rule using a class name is also required since a table column can have a differing width from other columns in the table.

To size a row the height property is used with the tr attribute. Percentage and pixels are used to express the value. Resizing a row will result in a change to each and every cell in all columns.

Organizing a Page with Tables

Tables are used to organize your Web site by diving the page into various regions. The most common designs are the two or three column layout. The navigation bar is usually on the left. The middle column is the greatest amount of space for main content. A right column contains another set of links, advertisements or supplemental information.

Style-Based Layout

Style-based layout is better than a table-based layout because the structure of a table based layout needs to copied to each page of a Web site. Style sheets can apply the style layout of an entire Web site using only one separate style sheet. Style sheets are easier to read as well. Changes to a single style sheet can modify the layout of each linked page on a Web site.

Nest tables are tables placed within tables. To design the attributes within nested table the table must be defined. The simplest way to resize a nested table is to use a relative size of 100 percent.

All the content of a table is done using a div tag where a class name is selected to describe the content.

Even Better Selectors

Contextual selectors match a tag within another tag. A contextual selector is constructed by placing a space between the two tags. They are particularly useful when used to match a specific type of tag within a specific type of class. Contextual selectors are simplify the process of defining formatting rules for the various page sections.

The id selector is very similar to a class selector in that the id selector allows you to pick a name describing your rule. Instead of using a period the tag name is separated using a hash mark (#). Just like class rules, id rules are only applied when indicated within your HTML. An id attribute is used to turn them on instead of class attribute. Only a single tag in a page can exist within a given id.

Floating Boxes

Relative positioning results in elements ordered based on their appearance within a document. Richer layouts are accomplished by positioning content in different ways. One example is a floating layout.

Absolute Positioning

Style sheets allow for elements to be fixed on a page. Absolute positioning is done by setting the position property of the division tag to absolute. The location of the division tag is then set using the top, left, right and bottom properties.

To create style based layouts you divide your Web page into a series of separate regions. A division tag is placed next to every region with a different class. Then the rules for the style sheet rules which position and format each element are written.

Layering

Sometimes elements on a Web page are overlapped intentionally to create a dramatic effect. This is done using overlapping layers. Web browsers need to know which element will be on the top layer. Using a simple number known as a z-index achieves the layering effect. An element with a higher z-index number is placed over that of a lower z-index number.

Helpful Style Sheet Web Sites:

• Style Sheet Basics- www.w3schools.com/css
• Style Sheet Examples - Layout Reservoir www.bluerobot.com/web/layouts and Glish http://glish.com/css
• Examples of Style Sheets- http://www.csszengarden.com/
• Advanced Style Sheet Resources- www.westciv.com/style_master/house

Color

Chapter two of The Principles of Beautiful Web Design deals with choosing color for the different elements of your web site. It is all really quite an interesting subject. There is a whole psychology behind the color and how people react to different types of colors. Different cultures associate colors differently as well as individuals based up their various experiences.

Here are some colors and what they are associated with:

• Red- People's blood really gets pumping with this color since it activates peoples adrenaline and blood pressure. It is an emotional color associated with passion, desire and love. Browner reds are associated with autumn and the harvest.
• Orange is an energetic color associated with happiness and represents sunshine, exuberance and creativity. It is more of an informal color and is less associated with corporations. Orange is also associated with food and cooking.
• Yellow is an extremely active and visually noticeable color. It is associated with happiness and energy.
• Green is associated with nature like the grass and leaves of trees. It is a calming color symbolizing growth, freshness and hope. It is color that is very adaptable for design purposes.
• Blue is associated with openness, intellect and faith. The color has been known to having a calming effect upon people. It also physiologically reduces appetite. It is associated with one's troubles such as blues music. Blue is connected with the color of water, sky and air.
• Purpose is associated with royalty and power. It was color that kings and queens would wear.
• White is associated with being clean, light, and pure.
• Black can be associated with death and evil but also with power, elegance and strenghth.

Colors have also been associated with temperature.

1. Warm colors are associated with the sun and fire like red, yellow, orange, pink, brown and burgundy. If a warm color is placed next to cool color the warm color is dominant producing perceptual emphasis.
2. Cool colors have a peaceful effect upon people like greens, blues and violet shades. Cooler violets contain more blue pigment. Cool colors are good for background colors or larger page elements.

Color Value is the measure of lightness or darkness. Tints are produced by adding more white to a color to soften the appearance. Shading a color is done by adding more black to that color.

Color saturation or intensity is the brightness or dullness of a color. Gray is added to colors to desaturate a color producing a dream like mood.

Web site colors are based upon the additive color model where colors are displayed in percentages of red, green and blue (RGB) light. This is as opposed to printing which is processed utilizing the subtractive color mode of CMYK (cyan, magenta, yellow and black).

A RGB color wheel is diagram containing all the primary (red, yellow, blue), secondary (orange, green, purple) and tertiary colors (vermilion, marigold, chartreuse, aquamarine, violet and magenta). It is a source used to match complimentary colors.

There are six basic types of color schemes:

• Monochromatic uses one base color with tints and/or shades or that color.
• Analogous where colors are used that are adjacent of each other on the color wheel.
• Complementary use colors that are on opposite ends of the color wheel. Complementary colors are very different from one another and when used together can cause simultaneous contrast where use of the two colors together appear more vibrant and overpowering.
• Split complementary utilize colors adjacent to the base colors complement.
• Triadic uses colors that are evenly spaced on the color wheel.
• Tetradic or double complementary utilize two sets of complementary color schemes.

Achromatic color schemes use black, white and shades and tints of gray.

Color problems:

Discordant colors can occur when colors chosen are not exactly opposite each other on the color wheel to be complementary and not close enough to be analogous colors. The result is colors that clash.

Hexadecimal color codes are used to more efficiently describe colors with differing levels of red, green and blue for the web.

There are some excellent online color pickers for the web like Color Scheme Generator from WellStyled. This type of tool makes it easier to chose a harmonious color scheme.

Web Design Resources and Texts on the Web

I really found the sites from this week educational and aesthetically interesting.

The Web Style Guide (second edition) by Patrick Lynch and Sarah Horton is an excellent ebook and a great reference to consult while designing my web site. The main focus of this book is to create web sites for the functionality of the user through effective design layout. For example, the layout of web sites have conformed to look like one another so that the user automatically knows where to go to find information and does not need to look extensively every time they navigate to a new site.

The book is divided into eight chapters which focus upon the process and elements required for a successful web site. They are:

1. The Process- the planning and development of the site.
2. Interface Design - designing for the interaction between the user and the web site so that it is easily navigable for the user.
3. Site Design - the development information architecture or having a logical structure for the information on your web site.
4. Page Design- developing a visually appealing site that is at the same time functional. How the page space is used ensuring that there is a balance between text and images.
5. Typography - the need to create text that complements your web site and the message you are trying to convey to the user. Utilizing CSS to add visual depth and structure to your web site in a well organized manner across all the sites pages.
6. Editorial Style - ensuring that the content is structure with headings for easy reading and printing. Realizing that web users will not read excessive amounts of text and understanding the need to tailor your writing style to meet these needs. Adding links to emphasize the meaning you are trying to convey within the text.
7. Graphics- Creating aesthically pleasing graphics that are easily displayed across various web browsers and internet connections. Using colors that work best for the web and utilizing the proper type of graphic file format for the type of image being used.

The Web Style Guide is an excellent resource providing concise yet detailed information when creating a web site. I will definitely use this to refer to when constructing my site.

Web Style Guide, 2nd Ed. - http://webstyleguide.com/index.html

Universal Usability

Universal Usability http://universalusability.com/access_by_design/index.html

The site of designer Jesse James Garrett provides great wealth of information concerning information architecture and user-experience design. These concepts are key to creating user friendly web sites. The author is an expert in these areas and wrote a book called The Areas of User Experience which has become rather popular.

JJ.net (User-Experience Designer Jesse James Garrett) http://www.jjg.net/ia/

Smashing Magazine's Top 50 Blog Designs was very inspiring viewing. The sites I looked at showed me how creative and interesting a blog could really be. I like that there is a small description of the design elements that made the blog make the list.

The first blog listed on the site is http://www.narfstuff.co.uk/

This the blog of Fran Boot a web designer in London, England. She created two-column blog where the posts appear on a sheet of paper attached to a clip board. This is a clever, colorful visually appealing layout. There a good amount of whitespace so that it is easily readable, organized and balanced. What I also like about this blog is that Fran provides a great deal of good information for web designers including some innovate projects she is working on. For instance she is working on a Flash puzzle game called "Starshine" with a link to download the puzzle. http://www.narfstuff.co.uk/2008/02/14/starshine_flash_puzzle/#more-34 I did notice a dead link to a Google Video called Helvetica Documentary. That would have been interesting to see. Oh well, I guess that is the reason why we constantly have to test the links on our web site and blog. This is the link that was supposed to have worked: http://www.narfstuff.co.uk/category/graphic-design/

Another blog that I like was http://www.dollarshort.org/, which is written by Mena Trott. This is a good example of a personal/professional blog. The white background is clean and the layout is organized efficiently with easy to read posts. There is something to be said for basic layouts with a good measure of images to make the site pop. This new mom is definitely having fun with the blog which shines through. If a blog is fun to write then it will be fun to read.

These blogs were very inspirational and I even renamed my blog from the very dull Amy's Instructional Graphics Blog to Amy's Web Journey.

Smashing Magazine: Top 50 Blog Designs - http://www.smashingmagazine.com/2008/05/08/now-more-than-ever-50-more-excellent-blog-designs/

Linking Pages

The Anchor Tag

Linking pages in a Web site is rather simple; all that is needed is an anchor tag. The anchor tag establishes a link that, when clicked takes the user to the other page. This tag is a container tag with clickable content within the beginning and ending tags. Then an href property (hypertext reference) needs to be added in order to supply the link's destination in the form of a URL. For the link to work the file must be placed in the same folder as the Web page. An anchor tag is an inline tag so it resides within a block element. In Dreamweaver a relative link is created by pressing Ctrl+L.

Internal and External Links

There are two types of links:

1. Internal links which lead to pages or devices (ie. downloadable files) in one's Web site.
2. External links which lead to pages or resources in other Web sites.

To establish an internal link a relative URL needs to be used so that the browser can locate the target page relative to the current folder. The browser is given instructions to locate the new folder and then moves up or down from the current folder. Moving down indicates moving from the parent folder to a subfolder whereas moving up indicates moving from a subfolder up to the parent folder.

There are also absolute URLs that include the entire URL (the domain name, folder and page). Absolute URLs are used to create external links.

Relative URL should be used to establish internal links. The links are shorter making the HTML easier to read and sustain. Relative links are also more flexible so that they can be moved around without breaking the link. The links can also be tested on the web designer's computer and the links will work in the same manner as they will online.

Changing Link Color Utilizing Style Sheets

Typically links are colored blue and underlined in Web sites and when the links are clicked they turn red in color. The most effective way to change link colors is to use a pseudo-selector in one's style sheet. There are four kinds of pseudo-selectors:

1. :link - for links that have not been clicked yet and viewed by the user.
2. :visited - for links that the user has already been clicked and viewed by the user.
3. :active - the color the link turns when the link is clicked and before the page appears.
4. :hover - the color the link turns when a the mouse is moved over the link.

All pseudo-selectors begin with a colon (:). If one would like to apply a rule to only some of your links, a class name is used with the pseudo-selector rule. An anchor tag is needed to establish the class in order to apply the style.

Navigation and Frames

Frames are a strategy used by web designers to keep a user open to their web site when an external link is clicked. A new browser window will open within the designer's site. The user will not be taken away from the web site as normally occurs when a visitor clicks an external link. this is all done by utilizing frames. Frames can allow the visitor to be taken to a particular section of the a web designer's site or to a new window.

To create a frame all that is needed is an attribute in the anchor tag which names the destination of the page to be displayed. When the value _blank is added, it specifies that a the page should open in a new frame.

Frames should not be used too often because many people find them annoying and certain pop-up blocking software will keep the frame from opening.

Relative Links and Folders

One's Web site is better organized if groups of related pages are kept in separate folders. The root folder or the point where your Web site begins, is where all the content is located (files and folders). This is where the default page (titled index.html or index.htm) is located. If the index.html page is linked with another page are located in the same folder all that is required is a relative link.

Moving down into a subfolder

To create a relative link to connected to the index.htm page to a page located in a subfolder, the subfolder name needs to be included in the relative link. The link will give the browser two instructions:

1. Go to the subfolder.
2. Get the page.html.

The link's folder name and the file name are separated by a slash (/).

Relative paths can also be used with additional HTML tags, such as the image tag and the style tag.

Additional subfolders of subfolders can be added in the same way; however, the folder name and a slash needs to be added for each additional subfolder.

Things to Keep in Mind:

• Links are always relative to the current page.
• Relative links always begin at the current folder and move up or down to the folder containing the target page.
• When using subfolders one should not change folder names or change the locations of folders although Web page editors can make up for the these changes.

Moving up into a parent folder

To move up a folder level a two periods and a slash (../) are used. The command ../../ links one two levels up.

Moving into the root folder

The only issue related to using relative links is that there are problems maintaining the site if anything gets rearranged on one's Web site. Many HTML editors save one the trouble of updating links; all that is required is dragging the file to a new location and the HTML editor updates everything. An additional way of dealing with this issue is to keep all the related links within the same folder, this way everything is moved as a unit. Root-relative links can also be used.

Root-relative links differ from document-relative links in that instead of being based on the current location of the document it is based on the root folder of the Web site. Root-relative links begin with a slash / to indicate the root folder. Web browsers remove the path and file name information leaving only the domain name. The relative link is then added to the end. If one does not own their domain name then the root of the Web site is the name of one's own personal folder.

Rules for Relative URLs

• URLs must start a protocol (typically http://).
• Do not confuse the backslash (\)with the forward slash (/). The backslash is used for paths on the Windows platform. The forward slash is used to divide subfolders on the Web. If a backslash is used instead of a forward slash on the Web the result will be a broken link.
• File paths should never be used instead of a URL. The file will only point to the computer the file is located on and others viewing the site will not be able to do so. Note that HTML design software can at times insert a file path when one drags and drops a file into their Web Site. Diligence in checking links is a must for this reason.
• Special characters or spaces should never be used for folder or file names. Browsers will translate a space into a strange character code and will not display properly. Numbers, letters, dashes (-) and underscores (_) are okay to use.

Linking to Other Types of Content

The majority of links will point to HTML Web pages. One can also create different links to other file types. The only issue is that a browser determines if a person is directed to a particular file.

Some Examples Include:

• Links to JPEG, GIF or PNG image files. The linked clicked will take the person viewing to a new browser window with the image displayed. This type of link is often used when the graphic is particularly large for instance in a page with thumbnail images. The smaller image is clicked and a new larger detail picture appears in a new window.
• Links to specialized files such as PDF files, Microsoft Word Files, audio files (WAV or MP3) or video files (Adobe Flash files, mpeg (.mpg), QuickTime, Windows Media (.wmv)). The links depend upon a browser having a plug-in that identifies that specific file type or the user already having that type of software already installed on that person's computer. If neither is available the user will only be able to download the file but not be able to utilize it.
• A link can be created to a file that the web designer wants others to download. If a viewer does not have the proper plug-in the viewer will be directed download it. The viewer then has the choice of viewing the file with that program, utilizing another program to open the file or disregard it. This type of link is excellent for sharing large files.
• A link to an email. This type of link is used so that someone viewing your site can send an email to you directly. The link when clicked will open to the viewer's email program with your email address in the to portion of the email.

Image Links and Image Maps

Images can be turned into links by placing an image tag inside an anchor tag. Linked pictures have a thick blue border indicating that it is a link. This border can be changed by modifying the style sheet border properties or inserting a border property with a setting of zero. The mouse will change to a hand indicating that this is a clickable link.

There are times when only a particular portion within an image is clickable. This is called the hotpot within a picture. A hotspot is created with an image map utilizing the map tag. The image map is given a distinct name. Within the map tag the hotspot or hotspots need to be defined by adding an area tag. The hotspots never should overlap and each hotspot must be named within the image tag. The area tag defines three significant details:

1. The target page the link is attached to (the href property).
2. The hotspot's shape (the shape attribute).
3. The exact dimensions of the shape (the cords property).

The shape attribute supports three types of shapes:

1. Circle (cir)
2. Rectangle (rect)
3. Mult-edged shapes (polygon)

Coordinates are needed to define the hotspot in the shape chosen. Coordinates are defined by listing numbers separated by commas.

Circle Coordinates:

• center point (x-coordinate)
• center point (y-coordinate)
• radius

Other shapes are defined by a series of x-y coordinates.

Rectangle Coordinates:

1. Top-Left Corner
2. Bottom-Right Corner

Polygon Coordinates:

1. x1
2. y1
3. x2
4. y2
5. and so on

Dreamweaver has a built in hotspot editor which enables one to create an image map by dragging shapes over a picture with a mouse.

After the hotspot is added the usemap property needs to be added to the image tag. The usemap begins with the hash (#) character and is followed by the map name.

Hotspots are invisible to the surfer except when the pointer of the mouse hoovers over the link when it changes to a hand.

Links can be created to send a viewer directly to a particular portion of a Web page called a fragment. This type of link is established using a two-step process:

1. The fragment must be identified by embedding a marker just before the fragment you would like to send the viewer to. This marker is called a bookmark. A bookmark is created using an anchor tag without utilizing a href attribute (since the anchor will not lead anywhere). A name property is supplied using a descriptive name for the bookmark. Text can be added inside the anchor to make it easier to place the bookmark into a specific word or title.
2. A URL which point to the bookmark needs to be created with the bookmark information attached to the end of the URL. The bookmark is defined by a number sign (#) followed by the bookmark name.

There can be problems with a bookmark located towards the bottom of a page. It may not lead the surfer to a bookmark located at the very top of that page. It may appear in the middle of the browser. To fix this problem, a few line breaks can be added at the end of the document allowing the browser to scroll down further.

A page name is not needed for a bookmark if the link points to the current page. The link will begin with the # sign followed by the book mark name.

Bookmarks generally are used when the Web pages are large and require a great deal of scrolling.

When Good Links Go Bad

Links can break when folder or file names are changed or when folders or files are moved. External links to other Web site are prone to breaking because there is no control over the files and folders of someone else's sites. This is when error messages occur. Link rot is the term Web developers use when referring to broken links.

There are two ways to reduce the occurence of broken links:

1. Constantly test your internal links to verify that all the links within your Web site lead where they are supposed to. HTML editors have tools that can be utilized to test internal links.
2. Although it is impossible to control external links there are ways to lower the occurence of them. The best way is to frequently test your Web site with a link validator; which checks all the links (both internal and external) on every page of your Web site.

Site Management

Numerous HTML editors include site management tools that can be used to see the whole Web site; showing where all the links on your site lead.

Link Checkers

A link checker is a tool used to verify that all your Web sites links are in working order; that they point to the page they are supposed open; this page is called the target page. Some link checkers validate only internal links whereas others check both internal and external links.

Dreamweaver's link checker is intricate and is really good at finding problems. To perform a link check simply click: Site --> Check Links Sitewide.

There are also free online checkers like The World Wide Web Consortium's http://validator.w3.org/checklink

Using Redirects

Making any kind of changes to your Web site pages and folders could result in broken links for other people's Web sites that have links to your site. If a change does need to be done then redirects help. Redirects are instructions that notify the browser to navigate to your new page. They are particularly useful when reworking the structure of your existing site. The redirect also informs a surfer that the link is out dated.

A redirect is created by inserting a meta tag into the head portion of your Web page. An absolute URL followed by the number of seconds to redirect the user is also included in this tag.

Adding Graphics to a Web Site

Chapter seven of Creating Web Sites: The Missing Manual deals with adding graphic images to one's web site. Images enhance the text on one's web site but there is the need to know which types of files work best for which types of images and the need to how best to position them in a web site.

To get an image to appear in a web site:

1. The image file must be in a separate file from the web site but it needs to be placed into the same folder as the web page.
2. An image tag needs to be placed within the HTML file corresponds to. Image tags denote which image one would like to appear. Since pictures are inline elements they go within other block elements like paragraphs. The image tag signals a browser to search for the file (gif, jpg), retrieves it and inserts it into the web page where it is situated. When an image file is too large it may take more time to appear compared to the text within a page.

Image tags require two properties:

1. The source property which indicates where the image file is located.
2. The alt property which shows a small portion of alternate text when an image cannot be displayed.

There are a number of reasons why graphics may not show on web site:

1. A web browser does not support the type of images requested
2. The user has turned off pictures to save time
3. The browser cannot locate the image
4. A viewing impaired person is utilizing a screen-reading program
5. A search engine examines the web page to decide the content of the image in order to index it within its search catalog.

The last two reasons are the most important to consider when creating the text within the alt attribute.

Some browsers have also used the alternate text to create a pop-up message when a surfer moves the mouse over a picture. The creation of this type of pop-up is controversial since this is not how alternate text was meant to be used. The best way to create a pop-up with text is to use the property designed to create one; the title attribute.

There are two meanings when discussing size and images:

1. The dimensions picture as it is viewed in a browser. The picture dimensions are meaningful in terms of how much space a picture takes up on the screen. Pictures are measured in pixels (dots).
2. The size of the file in bytes. The files size is significant in that it impacts the length of time it takes to send an image over the Internet to the browser.

One can change resize a picture using the image tag to define the height and width attributes. This is not recommend however, since the picture results could end up being poor. (Expanding images could result in a jagged appearance and creating a smaller images could result in a blurry picture.)

Some seasoned web designers use the utilize the add height and width properties for the same dimensions as the picture being used for two reasons:

1. So that the browser determine how big a picture is and begin laying out the page. If the image height and width dimensions are not included the browser will not know the picture size until it is fully loaded resulting the need to rearrange the page layout. This is bothersome to a user who has begun reading the web page.
2. The height and width attributes determine the size of the picture box when the picture cannot be downloaded. When these properties are not used the picture box is minimized and is just large enough to display the error icon and alternative text. This is very likely to negatively effect the alignment of the web page.

A great many HTML editors are designed to add the height and width attributes when an image is added.

There are three file formats that can be displayed by a web browser:

1. GIF ("jif") which used with graphics that contain few colors like logos or clip art. GIF should never be used for photographs.
2. JPEG ("jay-peg")which is used for photographs that will not be effected by quality loss. This is because the JPEG format reduces or compresses the file size of the image so that it can be downloaded faster. JPEGs should not be used with pictures that contain text or line art.
3. PNG ("ping") which can be used for all types of images although they cannot be viewed in older browsers because they do not support this type of format. PNG images do not compress as well as JPEGs.

These images are bitmap or raster types of graphics based on a grid of dots. Vector images or mathematically created shapes are not supported in Web pages.

Raster graphics tend to be larger files and for this reason compression becomes an issue (so that the amount of disk space is reduced). There are two kinds of compression used in Web graphics:

1. Lossy compresses images more efficiently however there is a loss in the quality of the image
2. Lossless does not compress as much however the image quality is preserved.

Bitmaps or images files ending in .bmp should never be used because browser are cannot read them properly resulting in confusion. These image files are also extremely large due to the fact that they cannot be compressed.

Image files require compression because otherwise it takes more time for images to send across the Internet. This extra time can be exasperating to a web surfer.

Although JPEG images are the best for compression there are problems associated with them known as compression artifacts. Commonly noted compression artifacts include: blocky regions, halos around edges and blurriness.

Choosing the Correct Image Format

JPEG best for large extremely detailed pictures that need to be parred down in size.

GIF is best when one needs to compress pictures with text and shapes where you do not want to blur the edges. This type of image file cannot be too large since they do not compress as well as JPEGs.

PNG is best for supporting full color images with sharp edges. This type of file does not lose detail because it utilizes lossless compression. There are two problems associated with PNG 1)Not all graphics programs support PNG files resulting in larger images and 2)older browsers do not support these files.

GIF images should be used for pictures that contain transparent areas. PNG images also support transparency however this feature may not work in all browsers.

Putting Pictures on Colored Backgrounds

All image files are stored as rectangles. Problems occur when using pictures of other shapes like a circle because the background is a white rectangle. If the background you are using is white on your Web page the image will blend into the background. When another background color is used the image will look odd - there will be a white box surrounding the image. The best way to deal with this situation is to change the color of the image box to that of the background color on the web page utilizing a graphics program. The only drawback to this is that if one changes their background color the graphic background color will need to be changed as well.

Images and Styles

The best manner to position images is by utilizing style sheets.

Inline Images in Text

Normally when image tags are used the image is inserted to the right of text. The bottom edge of the image lines up with the surrounding text. The vertical alignment property can be used to alter this so that the image situated where one would like (top, middle, bottom of the text). This will work with small images however it does not work with large images. The text does not wrap around the picture; a single line of text appears beside the picture.

Borders

Just as text can be placed inside borders so can images. To create an external style sheet for a border surrounding images a style needs to be given a class name (ie. GrooveBorder). This needs to be done in order to apply the class attribute to a specific picture as opposed to every picture on one's Web page or site.

How to Wrap Text Around an Image

The easiest manner to arrange pictures is utilizing inline images which separate pictures and text in the Web page. Division tags are used to separate images from the text such as paragraph tags, line break tags and horizontal rules. This will separate text from the image.

In order to wrap text to the side of a picture and create a floating image a CSS property called float is used. The value used with the float property is either right or left some the the image appears to the left or right of the image. The image used has a class name so that wrapped text is only applied to the specific image one would like. Usually margins settings are adjusted when the float attribute is used. This gives some room between the image and the text.

Wrapping text can be difficult because it is dependent upon the width of the user's browser window. One way of dealing with this is to utilize tables. Another way of dealing with this issue is to manually stop the wrapping at the point one would like to using the clear property in a line break tag. The break tag will start a new paragraph after the floating picture this way.

When using CSS HTML tags are treated as containers so when a floating image is created the image really goes to the left or right side of the containing component. Style rules can additionally be used in order to create a padded not box to for a different visual effect.

Adding a caption to a picture is another option that gives a nice effect. The caption can be above or below an image. It is rather simple to add a caption to an inline image. All that is needed to insert a line of text right above or below a picture with a line break for separation. It becomes more difficult when adding a caption to a floating image. The image and caption need to float in the same way. One would use the FloatLeft or FloatRight style and use it with the desired tag. Then one would wrap the image tag and the text into a span tag. Next, the whole span tag needs to float and this is accomplished using the FloatLeft or FloatRight style rule.

Span is used inside other block elements such as paragraphs whereas the division element is used outside block elements.

Background Images

Background images can be used with CSS so that the image is behind the content of the page. This type of image is tiled which means that a small image is copied over and over throughout the window of the page. To create this effect one would use an image style property which would be go into the body tag (this way it would be applied to the entire page). Then the image file name is provided in the fomr of a url('filename').

When Creating a Tiled Background Keep in Mind:

• JPEG images are best to use since they display the most colors.
• The background should be lighter in color so that the text can be read on the page.
• The background color should match the image, this way the text will be visible even if the image cannot be downloaded.
• Small tiles should be used to keep down the time needed for users to see the page.
• When using tile images with asymmetrical patterns be sure that the edges line up or there will be lines around the tiles.

There are a number of sites to find background images including:

www.grsites.com/textures

http://www.backgroundcity.com/

http://www.backgroundarchive.com/

A background watermark can be used instead of a tile. The watermark is an image that is placed in a specific place on a web page. The best background watermarks are light in color and inconspicuous fading into the background. To add a watermark one would follow the same steps used to create a background property. Then some more style properties need to be added to create the effect. The repeat background property needs to be added to keep the image from tiling. The background-position property needs to be added so that the picture is aligned to either side or the center. Scrolling can be be changed to a fixed property to give the effect of a fixed image.

Techniques with Graphics

Buttons and logos are often created in drawing programs like Illustrator so that a web designer has more creative control of text. The following are the steps to designing text:

1. Start an image editor or drawing program.
2. Add a background color that correlates with the Web page.
3. Select a font to type over the background color.
4. Reduce the image size as small as possible without cutting off text.
5. Save the picture as a GIF file (the best file type for text unless the image has over 256 colors-when a PNG is used).

Backgrounds on Other Elements

A division tag is used when one would like to apply something to the background but not the entire page such as border.

Graphical Bullets in a List

Custom graphics can be created for a bulleted list. This is achieved by using the list-style property to define the bullet image. When the style rule is created and inserted into the style sheet, the rule is applied to the bulleted list.

Finding Free Art

One way to search for graphics on the web is use the special Google tool to search for the type of graphics needed: http://images.google.com/. This is not always the best way since many images are copyrighted.

There are many sources on the web for free graphics such as:

1. StockXCHNG where free stock photography can be found. http://sxc.hu/
2. Some other options can be found at: http://masternewmedia.org/news/2005/04/01/where_to_find_great_free.htm

Finding Clip Art

Clip art consists of animated graphics such as symbols. Some good sources of clip art include:

• www.grsites.com/webgraphics
• http://www.clipartconnection.com/
• http://www.myfreeclipart.com/
• Someone who owns the program Microsoft Office could also download clip art from the Office Online site. The graphics will have to be opened in a graphics program and saved as a supported Web image. http://office.microsoft.com/clipart

This Week's Web Sites for Review

ICANN is nonprofit public-benefit corporation was established in 1998 to keep the Internet a safe, dependable and to ensure that computers are capable of operating properly with one another. The group is dedicated to coordinating Internet identifiers (addresses or numbers) which if they did not exist the Internet would not exist on a worldwide level. ICANN fosters Internet competition and the creation of Internet policy regarding unique identifiers.

The site has an RSS feed that one can subscribe to get up to date information from ICANN. They also have a newsletter and monthly magazine to subscribe as well as a special Contractual Compliance newsletter (information on the company's approach to ensuring that other companies observe their Registry Agreements and Registrar Accreditation Agreements). There is also have a blog on the site. The group appears to be up to date regarding the innovations in web technology and is applying it to their site. They also have an excellent glossary of Internet related terms which is very useful to a novice web designer.

This was an interesting site to look through. I did not know that a group like this existed. It is truly an important group since without it there would be no worldwide guidelines for the creation of Internet identifiers.

ICANN - http://www.icann.org/

The Internet Traffic Report web site was fascinating to search through because it showed me who in the world is utilizing the Internet. The numbers of usage are based on an index ranging from 0 to 100. The higher the value the more rapid and dependable the connection. North America always had the highest traffic every time I looked at the site.

This is a completely free site so it is a way to get information anytime and any day and the information is updated every five minutes. The site also has data on the response time to receive information from a site as well as the packet loss which measures the connection's reliability. Packet loss is okay as long as it is kept under five percent.

I like the fact that you can become involved with the Internet Traffic Report site by allowing the router from your web site to be added to the network of sites that they test. Also this site is very easy to use and is very visual with lots of simple graphs. Every aspect of the statistics are explained in a simple manner which is not off putting if you are new to this type of information.

Internet Traffic Report - http://www.internettrafficreport.com/main.htm


The Internet World Stats site was also interesting to view. The statistics on the site are based on the seven regions of the world: Africa, Asia, Europe, The Middle East, North America, Latin America/Caribbean and Ocean/Australia. Then each region is divided further by country so that a full picture of the world's population using the Internet. The demographics are from reputable source; the U.S. Census Bureau and the Internet usage data is also from a respectable source; Nielsen/NetRatings. The finding on the site were insightful: The Asia had the largest world usage with 39.5%. I was interested in finding out about the usage in Israel since the country has been involved in some great technological advances in recent years. The usage for the Middle East is only 2.9% with Israel being at 57.6% or more than have of this usage.

I like the use of pie graphs and bar graphs to visually show the mean of the numbers from the charts. It really brings the whole picture together. The site is very easy to read and to comprehend.

Internet World Stats - http://www.internetworldstats.com/stats.htm

CAIDA stands for the Cooperative Association for Internet Data Analysis. This is a group with members from private companies, the government and research sectors whose goal is to foster synergy in the engineering and maintenance of the worldwide Internet infrastructure. CAIDA would like to for these groups involved to work towards keeping the Internet capacity and usage efficient even with the steady increase in demand.

Honestly this web site is intimidating to someone new to web site design. The site has quite a large amount of information which is in terms that are more for its intended audience web site engineers. CAIDA is keeping up to date with the innovations on the Internet. They have a blog and a wiki so members can interact and keep up to date on things in a more informal way.

CAIDA Internet Infrastructure - http://www.caida.org/home/

The Pew Research Center is a non-profit group dedicated to providing facts on issues and views and trends in the United States on an impartial baisis. Their data reflects seven areas of research:

1. Pew Research Center for the People and the Press
2. Project for Excellence in Journalism
3. Pew Internet & American Life Project
4. Pew Forum on Religion & Public Life
5. Pew Hispanic Center
6. Pew Global Attitudes Project
7. Social & Demographic Trends

This web site has so much to offer on topics of interest politically and socially in the United States. I especially enjoyed their articles related to the 2008 Presidential Election. This is a site I will go back to in order to find out more about what is happening with the race. The numbers do truly tell the story.

Pew (non-profit research center) - http://pewresearch.org/

Nielsen ratings have always been associated with television for me. My family has been asked in the past to record TV logs for Nielsen showing what we watch during a certain short time period. It was interesting to look at the Nielsen Online and see how they rate Internet usage. Nielsen Online allows their clients access to a great deal of information including users purchasing habits, web rankings that compare their client's web site rankings to other companies within their industry and getting a view of their users' desktop behavior (what they do and where they go on the Internet).

Nielsen is a reputable company and it is good to see they have branched out to this new medium and realize the immense effect it can have in the marketplace. They have a very professionally designed site that you can see has many tools for their clients to access whenever they would like.

Nielson Net Ratings (private research center) - http://www.nielsen-netratings.com/

USF has a set of guidelines for any students or faculty using their own personal web space. Many of th guidelines mentioned are not many of the guidelines that are listed however there are some really good points that I noted:

• All intellectual property should be either of your own creation, be used with permission by the author or be in tune with University policy. As a future librarian I certainly strive to protect authors or artists copyrighted works.
• Web sites should not be used for illegal activity or prohibited activities. They give the example of spamming. Which I agree with since our web sites should be used for good purposes.
• The web sites should not be used for personal business or sales of non-university products or services. This is just simply not the purpose of a University web site; to use it for one's own profit.
• Web designers should not do anything that would result in a slow down of USF's server. This is of course for everyone's best interest since nobody wants to be slowed down when they are trying to do work on the computer system.
• Web sites should have navigational links to lead to all portions of the pages of their site.
• Web sites should have distinctive titles that describe the intent of the web designer's site.
• Meta Tags need include keywords and a description of the web sites content. This is helpful in terms of a search engine picking up your site.
• Graphics need to include their height and width for faster text downloading. If the image takes longer to load then text will appear first.
• Web pages and documents for download need to have concrete information. The URL needs to remain the same even if the document has changed.
• Important information available through the use of plug-ins should also be available in other formats for the user.
• Frames should not be used if at all possible because each frame is treated a a separate web page by search engines.
• Web pages that one designs should be viewable in Internet Explorer, Firfox and Safari browsers.
• HTML versions of content should be used over other formats like Adobe PDF files because the these files tend to be larger.
• Avoid using proprietary files like Word or Excel since it requires users to own specific software to open the files. PDF files or rich text files are a better option since they are universal.

USF Web Style Guidelines - http://usfweb2.usf.edu/ur/webadmin/webguide.html

Layout and Composition

Chapter one of The Principles of Beautiful Web Design by Jason Beaird deals with the elements of layout and composition when creating a web site.

Mr. Beaird discusses the process of creating a comp (comprehensive dummy) or a comprehensive mock-up of the web page layout. There are two steps to creating the comp: discovery and implementation. He discusses how he prepares for a meeting with the client and discovering what the company does. When he meets with the client he has a set of questions composed to better get a feel for what the company does and what they would like out of their web site.

Implementation for Mr. Beaird entails taking what he has learned about the company and uses that to create a design. He then begins designing using paper and a marker and produces a few types of layouts. When he decides that he likes one, he then uses the rectangle tool in Photoshop to block off the areas that he has created on paper. Mr. Beaird tries out different types of foreground and background colors until he has a color scheme that he likes.

The author then discusses what constitutes "good web design".

• Designs should be functional as well as aesthetically pleasing in order reach users and hold their interest. It is important to keep in mind that users like design but stay for the content.
• Users should easily be able to navigate the site. The navigation bar on the main page should be apparent and visible on the page with each link containing a title description. A change in the look of the navigation field and an indication of the active page it corresponds to should occur on a mouse rollover. Secondary navigation, search fields and outgoing links should be easily found but not be the dominant emphasis of your page The content should be the dominating feature of your web page so that users can concentrate on the information provided.
• Users should be able perceive that each page is part of the site. This is done by creating a site with a theme or style that is found in each page thereby bringing the design together. An example of this would be using the same navigation bar throughout your site or using the same color palette within your site.
• Web pages are composed of container blocks with hold text or images (the content). The width of the container can be either liquid- it can fill the width of the browser window or fixed- the width will appear the same even when using differing sized windows.
• The logo represents the identity of a company. The identity block contains the company logo or name and should always be situated at the top of the web site. This is a way of retaining brand recognition.
• The navigation system should be located at the top of the page and above the fold; making it easy to find. It should also be simple to use.
• The main content block needs to be the focal point of the design; it is then easily found by users.
• The footer of the page is located at the bottom of the page and contains such information as the copyright, contact, legal information and some links to the main portions of the site. The footer also is used to indicate that users have reached the bottom of the page.
• Whitespace or negative space is any portion of the page not cover with text or images. This space is important for it helps to form balance and unity.

Grid theory is used to create proportion in graphic design. The golden ratio or divine proportion is a mathematical pattern that occurred in nature so often that it was thought to be inspired by the divine. The basic concept is that a line can be bisected utilizing the golden ratio; dividing the length by 1.62. The divine proportion was used by artists in the Renaissance to create proportionate compositions.

Today the rule of thirds, a simplistic interpretation of the golden rule, is used to divide compositions without using a calculator. The author then describes a step by step use of the rule of thirds in composing a site using a paper divided into grids. The largest block is where he places the content block which takes up two-thirds of the layout in the lower right hand side page. The navigation block is placed in the middle third of the page in the left-hand column. The textual portion of the identity block inserted over the left side of the content and the identity image is placed over the menu. The copyright is situated below the content, in the right-hand column of the grid. Mr. Beaird then plays around with the different types elements and the arrangement of each. He cautions against lining everything up along a particular line because it is not stimulating visually. The author recommends pushing part of the block over the line to create a proportioned and interesting layout.

Balance is when components in a layout pull an equal amount of weight on the page. There are two types of visual balance:

1. Symmetrical balance is the result of design elements being the same on either side of an axis; they are situated in the same position and proportion like a mirror image. This is known as horizontal symmetry and is used to center content or create a balance between columns. There are two other types of symmetry however they are not usually used o the web; they are used in creating logos or in print design. Bilateral symmetry is when a layout is balanced on multiple axes. Radical symmetry is when components are equally spaced around a major point.
2. Asymmetrical balance (informal balance) involves items of different sizes, shape, tone or being placed in such a way that they form a balance (equal weight on the page). This type of balance is more interesting and is used more often in web design. Larger columns are very often lighter in color to make the text stand out in the main content portion of the page.

Unity is how the various elements of the page work together to create a whole. The whole web page must work as unit in order for the layout to be aesthetically pleasing.

Proximity refers to the placement of objects in a layout and the way they work together to create a unit. When objects are placed close together it creates a focal point where eyes are drawn to. Margins and padding is used to achieve proximity in web design.

Repetition refers to when similar items are placed together to form a group. It is the repetition of similar elements that creates a cohesive web site by bringing the design together. An example of repetition is the use of a bulleted list.

Emphasis or dominance is the idea of drawing the viewer to a particular element. One way to create this effect is to make an element a focal point; where something in a composition causes the viewer to focus on a certain point on the page.

Placement is important in web design because the direct center is the point where viewers will first look. It is the most effective location to create emphasis.

Continuance is the idea that our eyes will continue along a path until a dominant object appears. Continuance is often used by web designers to unify layouts.

Isolation is method of placement used to create emphasis.

Contrast is when differing graphics are used to produce emphasis on a page. The greater the difference in a graphic component is compared to the rest of the layout, the more the component will stand out.

Proportion is another way of creating emphasis. Proportion is used by changing the scale of objects. This is especially effective when an object is larger or smaller than it appears in real life thereby catching the eye of the viewer.

The author then discusses common types of layouts:

• Left-column navigation is the common type because the main navigation block is placed on the left side of the page. This is done because western cultures read from left to right. The only problem is the this type of tends to look similar and is not terribly creative.
• Right-column navigation is when the main navigation block is placed on the right-hand side of the page. The plus to this layout is that the main content is the first thing seen on the page.
• Three-column navigation is three-column layout where center column is the widest and two smaller navigation columns are situated on both sides. This is a good design layout when there is a great deal of navigation, smaller portions of content or there is advertising to add. In this type of layout it is important to keep in mind that there needs to be enough whitespace or the page will be over crowded and hard to read.

Mr. Beaird recommends using a morgue file when working on a large project. It involves cutting out and printing anything with the theme that you are working on. For instance if you are working on a car web site you would find anything with cars. Another way of utilizing resources in this way would be to search through sites and then to recognize the common concepts and popular design elements.

One popular trend being used today is the expanded footer navigation where contact information, expanded site navigation and content extras are being placed.

Another trend is a new take on three-column designs where content is placed first on the far left-hand side of the page. Most three-column designs are only used for the main page and the accompanying pages are two columns. This is done so that there is an ease in transition from one page to the next since one can just expand the content column.

Mr. Beaird mentions that he has designed more fixed-width designs than liquid-width. This is interesting since Matthew MacDonald, the writer of our other textbook Creating Web Sites: The Missing Manual recommends using liquid-width designs so that the user has more control of what they are viewing.

Mr. Beaird then discusses an alternative to the two widths known as a variable fixed-width layout. If adjust your browser from 800 pixels to 1024 pixels wide, the right-hand column divides into a third column.

The next issue discussed is the idea of designing according to the typical screen resolution of 800 x 600 pixels. In the end, the author recommends designing for the end user. The ideal is for the user to not have to scroll from left to right to read content.