Web Accessibility & Design

• Course Index
• Syllabus
• Assignments

Login

User:
Password:
Remember me
Forget password?
Create new account

Reset password

Enter your email address:

Case Study Part 2

• Case Study, Part 1 |
• Images

The page I've created so far is not very exciting. It needs some color, some images, and some style, wouldn't you agree? Let's see if we can help out this lowly page to make it more presentable.

Create Graphics

I'm going to go into a graphics program and create a logo and a few other images for my web page. In my case I'm going to use Corel PhotoPaint, but you can use whatever program you like, such as Adobe PhotoShop, Fireworks, the Gimp, or others (see the syllabus for links to these programs—note that nearly all of these programs are available in 30 day trial versions). I'm not going to go into the details of how to use a graphics program. Hopefully you can at least get by in a program, even if you can't use it very effectively. If you don't have much experience with graphics, choose one of the easier, less sophisticated programs. Fireworks might be a good choice.

Here's the logo that I created:

I also wanted to create a fun background. Here's the background image I created:

On the bottom of the page I think it would be kind of fun to add a few more of the red balls, so here's my graphic for that:

Those are the main images for this design. I'll create a few more images later on.

Add foreground images

Now I'll go into my HTML page and add the foreground image. In my design, there will be only one foreground image in the template: the logo. I'll add other foreground images to the individual pages, but not to the template. The other images will be placed in the background. Why? Because they are not important to the content of the site. They are just "eye candy." In other words, they are just for fun. People who are blind don't need to know what these images are about. I mean, after all, who cares that they are a bunch of red balls? That's not important, so I'm going to put them in the background.

In one of the previous lessons you learned that background images can't have alt text. It's impossible to add alt text to background images. That's why I'm going to put the image of the red balls in the background. I don't want them to have alt text, and they don't need alt text.

Now back to our web page. You probably remember that we typed the word "Logo" in our XHTML design. Now we're going to go into the Design view and replace this word with the real logo. Our XHTML file now looks like this (in the Design view):

The logo helps a little bit, but we still have a long way to go to make this site more attractive. Now we have to get into the CSS.

Create a CSS file

We've created styles from scratch in this class, or at least we've modified existing styles in a text mode. Personally, I like creating styles in text mode because I feel that this allows me the most control over the styles. However, I realize that most of you don't like doing it that way. The truth is that none of the methods for creating styles are very friendly. They all require a knowledge of how styles work. Still, if text scares you, you can do things through Dreamweaver's dialogue boxes.

In Dreamweaver, one of the quickest ways to create a new CSS file is to go over to the CSS bar in the upper right hand side of the screen, and click on the word "CSS."

Then I click on the icon to add a new CSS Rule, which looks like a small piece of paper with a plus symbol on it.

Once I click on that icon, I see a dialogue box pop up. This is where I'm going to start creating my styles.

Styling the header

I select the "Advanced" option, and make sure that "New Style Sheet File" is selected below that. I'm going to start by defining the styles for the header section, so I type #header in the box labeled as "Selector." Remember that the pound sign is used to apply styles to items that have an id, such as our header (<div id="header">). Just in case you've forgotten, you apply styles to classes by using a dot (or a period) at the beginning, like this: .header. But I don't want to do that, because my header is an id, not a class.

Once I type in and select all the right values, I click on OK. Now I see a new dialogue box asking me to save the CSS file. I type the name that I want and click on save.

If I then see yet another dialogue box popup like the one below, I just click OK. This one just wants to remind me that I'll eventually have to save your file, but I knew that already.

After I click away that dialogue box, I see another one. Here's where I can actually begin to create my styles. I select "Background" from the list on the left. Now I choose the background image that I want and also choose the location. I designate the location of 175 pixels from the left of the screen and 0 pixels from the top of the screen. I do this because I know that my logo is 175 pixels wide, and I want to make sure that my background image is not covered up by my logo.

After doing this, I click on OK. My style is now defined, and I have a background image in my header. The top of my page now looks like this:

For those who are curious, the attribute looks like this in the CSS source code:

#header  	
  {  
  background:url(images/bg_balls.jpg) repeat-x 175px 0px;  	
  }

Styling the body tag

Now I'm going to define the styles for my <body> tag. When you assign styles to the <body> tag, they apply to the whole web page. However, you can override the body styles with other styles. For example, the styles that we created for the header will override the styles we create for the <body> tag, because the header is a more specific part of the page, whereas the <body> tag is more generic.

I want to define the default fonts for my site. I also want my design to cover the entire viewable space in the browser, which requires setting both the margin and and padding to zero. To do this, I once again click on the New CSS Rule icon:

The same dialogue box pops up as before, but this time I type the word "body" in the "Selector" box, and I make sure that "Tag" is selected in the list, because the body tag is a tag, not a class or an id.

I click on OK. I select "Verdana, Arial, Helvetica, sans-serif" from the drop down list. Why are there four fonts listed? That seems a bit strange, doesn't it? Yes it does, in a way, but the reason that four fonts are listed is because not everyone has the same fonts on their computer as I do. The first font listed here is my top choice. If a person has Verdana on their computer, this will be the font that shows on my web page. If they don't have Verdana, then they will see Arial font. If they don't have Arial, they will see Helvetica, and if they don't have any of those fonts, their computer will choose a generic sans-serif font. Sans-serif means without serifs, which means that the fonts don't have embellishments (decorations) on the ends of the letters.

I then choose a color for the main fonts on the page. In this case I'm going to choose a really dark gray that's almost but not quite black. Why? Just because I feel like it.

Now I choose "Box" from the menu on the left. This is where I can assign values to the padding and margin. In this case I want them both to be zero (0) for all four values.

Now I click OK.

In the CSS source code it looks like this:

body   	
  {  	
  font-family: Verdana, Arial, Helvetica, sans-serif;  	
  color: #333333;  	
  margin:0;  	
  padding:0;  	
  }

Styling the "skip to main content" link

I want my "skip to main content" to be in the upper right hand corner of the page. To do this, I click on the New CSS Rule Icon again

Then I choose "Advanced" from the options and type #skip, because this is the id that I gave to that paragraph.

When the next dialogue box pops up, I type 80 in the "Size" box and choose "%" from the drop-down list beside it. This is just to make the font a little bit smaller than normal, but not too small.

Now I want to designate the background color as white. I do this even though the default background color is white because I know that my "skip to main content" link will overlap with the background image of the red balls, at least in wide screen viewing of the web page. I want to make sure that the text is legible when it overlaps with the red balls.

Now I'm going to define where this item should show up on the web page. I want it to show up in a very specific place: the top right hand corner. However, I don't want the text to touch the right hand margin, so I give it a small space of .2em between the words and the side. The unit "em" is a relative unit, equivalent to the size of the letter "m" in a font.

Lastly, I want to set the margin and padding to zero. This is important in this case because I'm applying the styles to a paragraph. By default, paragraphs have padding and margin values. For this particular paragraph, padding and margin values wouldn't look quite right. I want the size of the paragraph to be just big enough to enclose the text, but no bigger.

Padding and Margins

Here's a diagram to help explain padding and margins:

In short, the padding is the area inside of the object. Think of it as packaging material on the inside of a box. The margin, on the other hand, is the area around the outside of an object. Think of it as the space between the box and any other objects in a room.

Sometimes you want to set the padding, for example, when you have a paragraph that you want to have a background color and a lot of room around the words.

This is an example of a paragraph with large padding values.

The styles for the preceding paragraph are as follows (the name "large_padding" is completely arbitrary; you can choose any name you like):

#large_padding
  {
  background-color:#ffcccc;
  padding:3em;
  text-align:center;
  }

Sometimes you want to control the space around the outside of objects, as in the example below:

This paragraph has a left margin of 50%, which keeps it away from the left edge of the screen and puts the left edge of the paragraph at the 50% mark on the page. This paragraph has no padding, so there is no space between the text and the edge of the pink background color.

The CSS code for the above paragraph is shown below. Again, the name "left_margin" is a random name that I chose.

#left_margin   
  {   
  background-color:#ffcccc;   
  margin-left:50%;
  }

Styling the main navigation links

My main navigation so far is just a bulleted list. That's not particularly attractive. I want my list to go across the page horizontally, like tabs. I have to do a few fancy things to make this happen. First of all, I'm going to style the list itself. I click on the New CSS Rule icon again.

The <ul> tag

This time in the dialogue box I select "Advanced" and I type #main_nav (which is the id of the <ul> tag in the main menu). After I click on OK, I set the following properties:

1. Go to the "box" category and set margin and padding to 0. I do this because lists are like paragraphs in that they have extra margin and padding space unless you get rid of it.
2. Within the "box" category, set height to 1.8em. That's the height that I want my menu to be. I had to figure that out by trial and error.
3. Go to "positioning" and set "overflow" to "hidden." I had to do this to account for some irregularities in the way that some browsers were showing the menu items. What this does is hide any content that happens to spill over the designated height of 1.8em (see the previous step). I want everything to stay contained within the 1.8em boundary. I found out I had to do this by trial and error too.
4. Go to the "block" category and set "text align" to "center." This makes the navigation elements appear centered on the page
5. Go to the "background" category and select the background image that I want to apply
6. Set the "repeat" property of the background image to "repeat-x." This causes the background image to repeat horizontally, but not vertically.

The background image that I'm going to use is this one:

It doesn't look like much, I know. It's a skinny image that's darker on the top and bottom and lighter in the middle. Here is the same image enlarged, so that you can see it better:

When this image repeats horizontally, it looks like this:

 

This is the background that I want for my menu.

The code for the #main_nav should look like this:

#main_nav  	
  {  	
  margin:0;  
  padding:0;  
  text-align:center;  
  height:1.8em;  	
  overflow:hidden;  
  background:url(images/bg.jpg) repeat-x;  
  } 

The list items

Now I need to create styles for the list items within the #main_nav. I have to make sure that the "Advanced" option is selected, then I create a new style for #main_nav li (note that this is two separate words: #main_nav and li, separated by a space). This means that I'm creating a style for every li element (list item) inside of the #main_nav element.

These are the styles that I want:

1. Go to "block" and set "display" to "inline." This causes the list items to display on the same line, rather than on their own separate lines.
2. Go to "box" and set "padding" to 0.
3. Also set the "height" to 1.8em. Note that this is the same height as our #main_nav element.
4. While you're in the "box" area, set the margin to 0 on the top, .4em on the right side, 0 on the bottom, and .4em on the left side. In order to set all of the values, you'll have to uncheck the checkbox that says "same for all."
5. Go to the "positioning" category and set "position" to "relative." This will allow us to nudge the list items down a little bit, "relative" to where they would be displaying by default. We have to nudge them down because some of our other styles (which we haven't applied yet) will cause the top of the list items to be too tall. We're correcting for that. I discovered the need for this nudging by trial and error (for those who are curious, the extra height is due to the padding that I'll be adding to the <a> tag in the next set of styles)
6. Set the "top" to .4em. This is the amount of nudging we're going to do. It means that we want to nudge it down the distance of .4 em from the "top" of where it would otherwise be.

The CSS code should look like this:

#main_nav li  	
  {  	
  display:inline;  	
  padding:0;  	
  margin:0 .4em 0 .4em;  	
  height:1.8em;  	
  position:relative;  	
  top:.4em;  	
  } 

The links

Now for the links within the navigation menu. Start a new style called #main_nav li a. This will apply a style to every <a> element (link) within every <li> element (list item) within the #main_nav element (of which there is only one, since this refers to an id). Here's what I want to do:

1. Go to the "type" category and set the "color" of the text to white.
2. Set the "decoration" to "none."
3. Set the "weight" to "bold."
4. Go to "box" and set the "padding" to .4em.

The CSS code should look like this:

#main_nav li a  
  {    
  padding:.4em;   	
  color:white;  	
  font-weight:bold;  	
  text-decoration:none;  	
  } 

Hover affects and "pseudo classes"

Now for the final touch. I want to create a special affect when I hover the mouse over the menu items, when I tab to one of the links, or when I click on one of the links. I'd like this same affect to show users which section of the site they're on. I'm going to create another background graphic almost identical to the background graphic for the #main_nav element, but I'm going to make it slightly darker. like this:

 

Here is the other background image, for the sake of comparison:

 

The difference is subtle, but it will be noticeable enough for most people. I'm also going to change the color of the text from white to yellow.

To create hover affects and other similar affects, I need to use a set of classes known as "pseudo classes." These classes only appear under certain conditions, such as when you hover your mouse over a link.

I'm going to create a new style, making sure the "advanced" button is selected, then I'm going to type this:

#main_nav li a:hover, #main_nav li a:focus, #main_nav li a:active, #main_nav li a.selected

This will create the same set of styles for all of the conditions mentioned above. The last condition, #main_nav li a.selected, is different from all of the others. This is not a pseudo class. This is a real class, meaning that it is always "on" and is not dependent on mouse movement or other factors. The "selected" class is what I'm going to apply to the navigation links when users are within that part of the site. For example, when users click on the "home" link, the background behind the word "home" will stay dark, to let users know that this is the part of the web site they are on.

Note that the name "selected" was one that I just made up. The name "selected" made sense to me because I want those styles to appear when the links are "selected," but this is just the name that I chose for it. I could have named it "highlighted" or "chosen" or "George" or "Ringo" or "Paul" or "John."

Once I've typed all of those elements, I click OK, then I:

1. Go to "type" and set the font color to light yellow (#ffff66 in this case), and I
2. Go to "background" and assign a background image and make it repeat horizontally (repeat-x).

The CSS code should look like this:

#main_nav li a:hover,  
#main_nav li a:focus, 
#main_nav li a:active,  
#main_nav li a.selected  	
  {	  	
  background:url(images/bg2.jpg) repeat-x;  	
  color:#FFFF66;  	
  } 

Styling the side menu

I want the side menu to float to the left, so I have to create a style to do that. I start a new style and do the following:

1. Go to "box" and set "float" to "left."
2. Set the "padding" to "0."
3. Set the width to "20" and choose "%" from the drop down list. This will cause the menu to take up 20% of the screen space.
4. Go to "background" and set the "color" to a dark blue (in this case #333366)
5. Go to "type" and set the "color" to white (#ffffff)

The CSS code looks like this:

#side_menu  	
  {  	
  float:left;  	
  background-color:#333366;  	
  color:#ffffff;  	
  padding:0;  	
  width:25%;  	
  }	 

I applied other styles to the side menu, such as styles to the headings, lists, and links, but I've already gone over the techniques to do these kinds of styles, so I won't explain them in detail. I'll just list them here:

#side_menu div  	
  {  	
  margin:.5em;  	
  }  	  
 
#side_menu h2  	
  {  	
  color:#ffffff;  	
  font-size:100%;  	
  }	    
  
#side_menu a  	
  {  	
  color:white;  	
  }    
  
#side_menu a:hover,  
#side_menu a:focus,  
#side_menu a:active,  
#footer a:hover,  
#footer a:focus,  
#footer a:active  	
  {	  	
  background-color:#FFFFCC;  	
  color:#990000;  	
  }    
  
#side_menu ul  	
  {  	
  margin:0;  	
  padding:0;  	
  }    
  
#side_menu ul li  	
  {  	
  margin-left:1em;  	
  } 

Styling the main content

We have the side menu floating on the left and taking up 20% of the space. We need to put the main content on the right side and ensure that it doesn't' take up more than 80% of the space. Through trial and error, I found out that a good amount of space would be 74%. I could make it take up more space, but I want to put in a shadow effect on the side, and this allows me room to do that. Here are my settings as seen in the CSS code (I've already explained how to achieve similar settings):

#content  	
  {  	
  background-color:#ffffff;  	
  padding:0;  	
  width:74%;  	
  float:right;  	
  background: #ffffff url(images/side_shadow.jpg) repeat-y top left;  	
  }	    

Notice that the background image repeats on the y axis this time, rather than the x axis. By repeating on the y axis the image will repeat vertically. This creates the vertical shadow effect. The image I used for this effect is this one (shown enlarged here):

Here are the other styles that apply to the main content area:

  
#content div  	
  {  	
  margin:.5em 1em 1em 50px;  	
  }    
  
#content a:hover,  
#content a:focus, 
#content a:active  	
  {	  	
  background-color:#FFFFCC;  	
  color:#990000;  	
  }

The blue background

One thing that I haven't explained yet is how to achieve the blue background on the side menu. This one's a little tricky. The blue background isn't actually on the side menu at all. It's on the #contain_container element which surrounds both the side menu and the main content areas. I did it this way because if I put the blue background color on the side menu, then if the side menu is shorter than the main content, there will be a gap that isn't blue. It would look like this:

Of course, there's nothing wrong with this. In fact, you may even like that better than my idea, but I wanted the page to look more like this:

By putting the blue background color around all of the content, it avoids this problem. I do have to do one more thing though: I have to add a white background color to the main content area, or else the blue will show through there.

Here is the CSS code for the <div> that contains the blue background color:

#content_container  	
  {  	
  background-color:#333366;  	
  } 

Styling the footer

The footer must appear on the bottom of the page or else my design won't quite work right. To ensure that it is on the bottom, I have to make the footer "clear" the other elements. Specifically, I have to clear the floated elements. The floated element that I'm worried about is the left menu. To do this, I:

• Go to "box" and set the "clear" to "both." This ensures that the footer will be beneath both the floating left menu and the floating right main content.

There are other aspects to the footer styles, but I won't go into the details, because I've explained similar styles in the sections above. Here is the CSS code:

#footer  	
{  	
  clear:both;  	
  background-color:#990000;  	
  color:#ffffff;  	
  padding:.4em;  	
  }	   
 
#footer a  	
  {  	
  color:white;  	
  }  	
  
#footer_list  	
  {  	
  margin:0;  	
  padding:0;  	
  text-align:center;  	
  }	 
   
#footer_list li  	
  {  	
  display:inline;  	
  padding:0 .8em 0 .7em;  	
  }
	  	  
#footer_list .first,  
#footer_list .middle  	
  {  	
  border-right:1px #666666 solid;  	
  }	 

 

All done with the design phase

Here is the link to the site I created:

I've created a sample site at http://mason.gmu.edu/~pbohman/sample_site/. This site is based on a single template, and consists of a total of 4 pages.

Notice that all of the pages have a common look and feel, but they don't have the same content on each page. Notice also that the main menu highlights the page that the visitor is on.

The original page that the template was created from can be found at http://portfolios.gmu.edu/sample_portfolio/dwt/index_no_template.html. This is a plain HTML file.

Take another look at the original concept design:

The final design didn't look quite like this concept, but it looked pretty close. I like my final design better than the original concept in some ways. I modified the concept as I went along until I achieved a design that I liked.

Now What?

Now we have to create a template based on our design. See the lesson on templates for more information.

(Back to Part 1) or (Forward to the lesson on templates)

---

• Case Study, Part 1 |
• Images

• Case Study, Part 1 |
• Images

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.