Learn Moore | Ryan W. Moore

Summary

In this lab, you'll make an a complete web site for "[Your Name]'s Pet Shop." That is, your site will have several pages of content on it, navigation links to/from the various sections, and a consistent site look.


You've already shown that you know how to add content to pages in your homework/past labs. Due to time constraints, each page will have only a minimal amount of content on it. Obviously, if you were doing this page for a real company you would add more content. The focus is on you showing that:


  1. You can use CSS effectively to create a consistent clean look across multiple pages
  2. You can use various tags correctly (lists, tables, images, etc.)
  3. You can properly use ids and CSS to modify how certain elements of a page look


On a few of the more difficult / newer steps, I've included tips on how to do it. Whenever you see a little footnote icon like this one here1) just hover your mouse over it to see the hint. Additionally, all the footnotes are placed together at the bottom of the page. So, don't scroll down and view all the footnotes together. If you do, you're only hurting yourself.

Requirements

You should make several copies of the XHTML/CSS template. Name the copies:

  • index.html
  • pets.html
  • location.html


Additionally, make a blank text file named something to the effect of petshop.css.


To create a consistent look across sites, you'll want to modify each page to use an external CSS file. So, on each page remove the <style> tags and the content within the <style> tags. Now, instead put this somewhere in the <head> tags: 

<link rel="stylesheet" type="text/css" href="petshop.css" />

Adding Navigation

Remember how I said that we shouldn't use tables for navigation / website layout? Well, too bad because we're going to use tables until we learn something better. On one of the pages, add the HTML to make a table that looks something like this: 


 _____________________
| Current Page Name   |
|_____________________|
| lnk1 | Your content |
| lnk2 | will go in   |
| lnk3 | here!        |
|______|______________|
| Phone#+Address+Hours|
|_____________________|


Be sure to give your navigation table an id of "navtable"2). We'll use this to give it a look different from other tables later.


On the left hand side (where it says lnk1, lnk2, etc) make an unordered list whose items are links to the various pages (index.html, pets.html, location.html). For this navigation list, give it an id of "navlinkslist". Now put the "Current Page Name" part in <h1> tags and the "Your content will go in here!" part in a <p> tag.


By default, the browser may try to keep all the data centered vertically. So, when you (eventually) add lots of content the navigation links will no longer be at the top of the page. Fix this by setting the valign attribute for the navigation td element to "top"3).


Make up a fictional phone number, address, and hours of operation and place it in the appropriate table section. Put it in a <p> tag whose id is "footer".


This HTML will be your template, kind of. Copy and paste this HTML into the rest of your .html files, so that each page has a consistent layout and all you'll need to do is change the content of each h1 tag to match what that page is about, and then add content.

Adding Content

Each bullet point should be a separate paragraph. It can be a very short (1 sentence) paragraph.


Do this section as quickly as you can, to leave ample room for the CSS section.


For the index.html page:

  • Give a brief fictional history of the pet shop (date founded, maybe at some point it burned down and was rebuilt, etc).
  • Talk about how awesome it is (e.g., low prices, great customer service).
  • Give some example customer testimony quotes in an unordered list.

For the pets.html page:

  • State how each type of pet comes with a money-back guarantee of some sort and their price.
    • Put this in a table format, such as:


 ___________________________
| Pet Type: | Guarnt. | $$  |
|___________________________|
| pet type1 |  7 days | $5  |
|___________________________|
| pet type2 | 14 days | $15 |
|___________________________|
| pet type3 | 30 days | $50 |
|___________|_________|_____|
  • Include a few pictures of happy customers and/or their pets.
    • See the bottom of the page for some example images.

For the location.html page:

  • Give the fictional address of the shop and a telephone number to call if people get lost.
  • Give the pet shop a location and make up some directions to it from 2 different directions. E.g., from downtown Pittsburgh or from 279. The directions should use an ordered list.

Giving the Site a Consistent Look

It's time now to go back and open up the site's CSS file. You can do all of this by ONLY editing the CSS file (assuming you followed the directions above).


When choosing a site color theme, pick one that makes sense. For example, a patriotic colored pet shop, or one using bright bold colors (greens and blues, for grass and sky?) makes sense. One using dark dull greys and blood red text would not be a good choice.


Do the items in the order that they are listed.


  1. Make all unordered lists use a disc list style.
  2. Change the body background color. Set the text's color as appropriate.
  3. Make the navlinkslist ul list have a list style of type none 4)
  4. Make all tables, tds, and trs, have a border of some type that can be seen.
  5. Make the navtable table have a different type of bordered style that can be seen. Set the text's color as appropriate.
  6. Make the footer centered and using a smaller size than normal. Do this using em units.
  7. Change the navtable's background color to something different from the body's bg color. 5)
  8. Make all h1 tags centered.

Submission

  1. Time permitting: Verify that your web pages are compliant
  2. Call me over so I can check your page and give you credit for having done it.

Images

I've placed some images in this directory. Go ahead and browse them and pick out a few you want to use in your web page. There's no need to copy them to your own directory. Just reference them by specifying the full URL to them (e.g., http://www.cs.pitt.edu/~rmoore/cs134/petshop/2rabbits.jpeg).


Many of them are very large. I've not resized them so that you can be creative and use whatever size you want for your page. So for example, you can do <img src="whatevergoesinhere" alt="whatev" width="200" height="200" />. In a real website, you would resize the images using a photo editor or some such, in order to reduce the download size.


All images are in the public domain.

1) The tip will appear here.
2) e.g., <table id="navtable"> … </table>
3) e.g., <td valign="top">…</td>
4) e.g., ul#navlinkslist { list-style: none; }
5) e.g., table#navtable { background-color: black }