Learn Moore | Ryan W. Moore

The Littlest's Pet Shop Webpage

Summary

In this lab, you'll make an a complete web site for "[Your Name]'s Pet Shop." That is, your site will have more than one page of content on it, navigation links, and a consistent site look. More importantly, we will also concentrate on making sure that the page verifies as XHTML Strict. If you follow good coding practices and have paid attention in class, this will be easy. If not, it may be a bit of a pain.


You've already shown that you know how to add content to pages in your 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 much 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
  4. You can make a page that verifies as XHTML strict


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 at once. If you do, you probably won't learn as much as if you tried things on your own.

Requirements

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

  • index.html
  • pets.html


Additionally, make a blank text file named something to the effect of petshop.css. In Notepad++ you can do this by clicking File, New, and then saving the new file with the name "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 element (and its content). Now, instead put this somewhere in the <head> element: 

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

This will cause the browser to download petshop.css in order to find out how the site should look. So now, both pages will share the same look.

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 (you'll have to set the colspan attribute in some places): 


 _____________________
| Current Page Name   |
|_____________________|
| lnk1 | Your content |
| lnk2 | will go in   |
|      | 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) make an unordered list whose items are links to the various pages (index.html, pets.html). For this 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 the value "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 other .html file you've made, 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's content (which will be inside a piece of table cell):

  • 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.
  • Give directions to the location of your pet store (not merely the address)

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 information in a table, such as:


 ___________________________
| Pet Type: | Guarnt. | $$  |
|___________________________|
| pet type1 |  7 days | $5  |
|___________________________|
| pet type2 | 14 days | $15 |
|___________________________|
| pet type3 | 30 days | $50 |
|___________|_________|_____|


  • Additionally, include a few pictures of happy customers and/or their pets.
    • See the bottom of the page for some example images.



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. Set the navtable's width and set its left and right margins to have the value auto.
  9. Make all h1 tags centered.
  10. Give a few elements padding and/or margins as necessary, to help make things more readable
  11. Give the body of the page a background image (see here).

Submission

  1. Verify that both of your web pages are XHTML strict compliant
  2. Call me over so I can check your page and give you credit for having done it.
  3. Submit the lab via FTP

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 }