PBDS 660: Introduction to Hypermedia

Here is a list of some of the most useful CSS selectors and the properties you might want to use with them. The list is far from exhaustive. For exhaustive, you need to buy CSS: The Definitive Guide by Eric A. Meyer (O'Reilly, third edition, 2007).

   body
	   font-family
	   font-size
	   font-weight
	   font-variant (font-variant: small-caps)
	   margin -- all 4 together or individually
		   margin-top
		   margin-right
		   margin-bottom
		   margin-left
	   padding -- all 4 together or individually
		   padding-top
		   padding-right
		   padding-bottom
		   padding-left
	   background (sets color)
	   color (sets font color)
	   
   block level elements (h1-6, p, blockquote, lists, divs, and so on)
	   font-family
	   font-size (%, px, em)
	   font-weight (100, 200, 300 . . . 900)
	   text-align (left, center, right, justify) 
	   margin -- all 4 together or individually
		   margin-top
		   margin-right
		   margin-bottom
		   margin-left
	   padding -- all 4 together or individually
		   padding-top
		   padding-right
		   padding-bottom
		   padding-left
	   background (sets color of background)
	   color (sets font color)
	   line-height
	   float
   
   td
	   vertical-align (top, middle, bottom)
	   text-align (left, center, right, justify) 
	   
   img
	   border (you can set the width, the style, and the color in one statement)

The Big Picture

The goal of tonight's exercise is to turn the pages for a site for the movie 300 from a plain vanilla sort of thing (see it here) into a somewhat more stylish site: Finished Product. [And here's a link to the style sheet for the finished product, but don't cheat!)

The lecture notes on this page will take you through the first parts of the transformation step by step. After that, you should be able to use your books and references to books Professor Moulthrop has on hand to experiment with style rules to achieve different effects.

Getting Started

You will find a directory inside your directory on student-iat.ubalt.edu called "css_exercise_2." It contains 7 html files. It does not contain the images you will need to work with. So your first task is to use ftp to bring the files onto the hard drive of the machine you are working on and correct the URLs for the images on the relevant pages. Then you need to upload the corrected pages to make sure the images are loading correctly.

Here's the path from the server root to the directory where the images are stored:
student-iat.ubalt.edu/students/images_300

Here is the path from the server root to the directory where the exercise files are located:
student-iat.ubalt.edu/students/yourlastname/css_exercise_2

Special note to Jane: the path to your directory is
student-iat.ubalt.edu/sde_students/sde/yourlastname/css_exercise_2

If you have not already done so, you need to create a directory called styles at the root level of your directory on the server. Once you have created that directory, create a style sheet called 300_style.css. Write a style rule for the body selector that sets the background color to black (hex code #000) and the text color of all the pages to white (hex code #FFF).

Then write the code on each page of the 300 Web site you are designing so that the style sheet will govern it. To check that things are working properly, you will need to upload all the pages to the server. Alternatively, you might want to set everything up on your local machine so that the directory structure you're working with on the server is matched by what you are doing on your local machine. That way you can test your work as you go along without always have to upload the revised pages. Either way, you'll want to check your work often.

Remember that it is a good idea to test one style rule at a time since an error in one rule often knocks out the effects of all subsequent rules.

Creating a div for Each Page Segment

Basically the page you are trying to create has 3 primary building blocks: the heading of the page, the main information area, and the navigational links. In this step, you need to create a div with an id for each of those building blocks and then put the blocks in the correct order. Here's how.

Every page in the site has a navigational menu coded at the bottom of the page. To produce a layout that displays the navigational links in a column on the left side of the screen, you need to enclose the html for the navigation links inside a div and give the div an id, like this:

<div id="mainMenu">	
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="plot.html">Plot</a></li>
		<li><a href="cast.html">Cast</a></li>
			<ul>
				<li><a href="castbutler.html">Gerard Butler</a></li>
				<li><a href="castheadey.html">Lena Headey</a></li>
				<li><a href="castwenham.html">David Wenham</a></li>
			</ul>
		<li><a href="mailinglist.html">Mailing List</a></li>
	</ul>
</div>

You can make these changes on all the pages now, or you can just work with one and then do the others once you've got one working. It's up to you.

Next you need to put the heading on each page inside its own div with its own id. Finally, put the remaining content of the page inside a div with its unique id.

Order of elements is important in specifiying layouts, so you want to organize the pages so that the div containing the heading comes first, then the div containing the navigation links, and finally the div containing the page's information.

Now you are ready to write a rule to place the div with the navigation links on the left of the screen. In my example, that div has the id "mainMenu" so my style sheet rule will look like this:

#mainMenu {
	float: left;
}

To have the ul display without the bullets, you can write a rule that uses the property list-style and the value none, like this:

ul {
	list-style: none;
}

The rule for the list style you just wrote will apply to all unordered lists on all your pages, which might not be exactly what you want. If you want to restrict the rule to just those unordered lists that occur in the navigation area, you can write your rule this way:

#mainMenu ul {
	list-style: none;
}

Now you are ready to start playing with a variety of style rules for your pages.

If you finish the exercise, here are a couple of other things to try:

1. Make a copy of the work you did for assignment 3 (studio60the show) and apply the techniques you used for 300 to that site
2. Come up with a design for the 300 site that uses a horizontal navigation menu at the top of each page (for now, just ignore the hierarchy implicit in the menu and treat the links to the individual cast member pages as if they were on the same level of the hierarchy as all the other links). You'll want to learn the style rule for displaying list items horizontally:

			li {
			  display: inline;
			}

To accomplish the second task above, you'll need to think about how you want the blocks that constitute the page to relate to each other spatially. You'll also want to make sure that your rule for the unordered list for the menu doesn't end up governing other unordered lists that might be on other pages of the site.