Structure – part 2

The Re-design Process

View the re-designed web site

The first stage in rebuilding the site is extracting the content from the extraneous code. Each page was saved with a new name to create the working copies. Multiple search and replace actions were used to remove commonly used table coding. This left the basic information in an easily edited state.

Div Structure

The basic div structure was set up with a div (#wrap) wrapping all of the code, sitting just inside the <body> tags. The first section was the header (div#header), which includes the <h1> tag. The content of the page follows with three divs. There is a master container, #content, inside it are two subsection divs: #maincontent and #nav. Finally, the footer div (#footer) sits just after the #content div is closed.

diagram of the divs used in the re-designed web site for the Inuit HEritage Trust

Figure 3 New I.H.T. div structure

The #wrap and global styles

Styles applied to the body set the font on the site to .85em with a line-height of 1.7em. This proportional font-size allows the visitor’s font size preference to determine the final size of the text. This gives the web site better accessibility. The font is also set with a series of sans-serif fonts in black. A global “re-set” rule sets the margin and padding for all of the common tags, avoiding cross-browser fluctuations. The body features a text-align center rule to make the page centered in Internet Explorer. The #wrap div features margin:0 auto; which does the same thing in modern browsers. The #wrap also sets the text-align back to the normal left aligned text.

The <body> tag on each page is given an id to represent the current page, for instance id=”sitemap” and a class to represent the displayed language, i.e. class=”English”. The language class is used to change the color of the sidebar, header image, and other elements to let the visitor know they have selected a new language option.

The Header

The original design used a table to reconstruct a large image. The headline text was part of the image as well as the logo. Using Fireworks, the header image was reconstructed and the text removed with the magic stamp tool. The new image was used as the background for the #header div using sylesheets:

background:#fff url(images/bg-header.jpg) no-repeat top left;

The original headline text was placed in an <h1> tag to give the page a proper heading. The text was modified to recreate the original look with the stylesheet:

h1 {font-size:160%; font-family:arial, verdana, avenir, sans-serif; text-transform:uppercase; font-weight:normal; line-height:1.7em;padding:30px 0 0 200px; color:#fff; letter-spacing:.2em;}

The Main Content Section

This site has a fairly simple design. The two divs inside the #content div are floated with enough space between them to avoid any issues with the box model problem. This is the inconsistency between browsers, specifically Internet Explorer, when elements have margins or paddings applied to them. The #maincontent div is floated to the right and the #nav div is floated to the left. To keep the #content from collapsing, which occurs when the content within a div is floated, a <br /> tag has been placed after the two divs are closed. The <br /> tag is given the .clear class to clear both of the floated elements and force the #content to extend to the bottom.

The #maincontent div includes images, ordered lists, unordered lists, definition lists, paragraphs, header2, and header3 tags. The only styles used to define #maincontent elements only are for list items and images. The <li> tags are given extra margin to give them extra vertical space.

Making the images more interesting

Images within the #maincontent div are floated to the right. There is also a combination of styles to give them the look of a 3-dimensional photograph. Each image is given 5px padding of white space, and then borders are applied with the right and bottom borders being thicker. Margins are given to keep the text from getting too close to the images. Mozilla’s radius style is added to give the border a rounded edge. This is only visible in Mozilla browsers but degrades nicely in others.

sample of an image in the re-designed IHT pages

Figure 4 Images inside #maincontent div have special styles

Other #maincontent elements

The content within the #maincontent div now features semantic markup. Header2 and header3 tags now define the section and sub sections. Definition lists are used for addresses, titles, the legislation information, and within the projects page. The definition terms are given a bold weight and margins give the elements some vertical space. Nested list items are given additional horizontal margins to make them appear as children of the parent list items.

There were several pages in the original design with heavily styled paragraphs. Font, bold, and italic tags were used to make the information standout. The .pullquote class was developed to give specific paragraphs this effect. These paragraphs now have a colored background with white text and extra margins for more separation.

The Navigation

This site has very simple navigation. The set of links was rebuilt with an unordered list. The style sheet removed the bullets from the list items and gave them some vertical space. The links within these list items had their underlines removed, the text capitalized, centered, and the links were set to display:block. This makes the link take up all available space, acting more like a button. To give some interactive qualities, the background color changes to white and the text to blue on hover. A class is applied to the link that corresponds to the current page. This .here class also adds a small triangle to the right of the text to give the visitor even more information about the page they are viewing.

The Footer

In the original web site, there is an image that caps off the bottom of the side bar. In the style sheet, the footer is given a background image. To change the background image for each page, the style sheet looks at the body tag’s id to determine which image should be used in the footer’s background.

/*change the background image on the leftnav*/
#contact #footer {background:#fff url(images/contact_08.gif) no-repeat top left;}
#sitemap #footer {background:#fff url(images/sitemap_08.gif) no-repeat top left;}
#trustees #footer {background:#fff url(images/trustees_08.gif) no-repeat top left;}
#projects #footer {background:#fff url(images/projects_08.gif) no-repeat top left;}
#about #footer {background:#fff url(images/about_08.gif) no-repeat top left;}
#links #footer {background:#fff url(images/links_08.gif) no-repeat top left;}

To give printed pages customized information, a div was placed in the #footer with the class .print. The main style sheet hides this div, however, the print style sheet makes it visible on the printed page. This div includes contact information for the IHT.

A navigational element was created to give the language choices more visibility. In the original design, the only options were the two languages that had not been chosen. The new design features all three languages, with the current language choice highlighted.

The remaining information in the footer is given some padding to clear the background image and smaller font size to give it less importance than the main content section.

Continue to part 3 style sheets