Purpose

Theoretically, you all know how to do this lab using only HTML and CSS. This lab is primarily about getting to know Dreamweaver and using it make your Webpage editing life a bit easier. Secondarily, it is a review of CSS/HTML.

Requirements

For this lab, make a web page that meets the following requirements. You'll end up with a menu for a restaurant. Remember, when at possible try to have Dreamweaver assist you in some way (via a wizard or a dialog box of some sort, depending on what it is you're trying to do). After you've poked around and if you can't find out how to have Dreamweaver assist you, you can type in manually the XHTML/CSS code.

  1. Give the web page a custom background color
  2. Make a div that is 1024 pixels wide and centered, with a custom background color and a border of your choosing
  3. Change the page's title to "[Restaurant Name]'s Online Menu"
  4. Put a centered level 1 header (h1 tag) towards the top of the div that says "[Restaurant Name]'s Online Menu"
  5. Put a centered paragraph underneath the h1 tag. Make its text italicized and make it smaller than normal text. The contents of the paragraph should be the restaurant's motto (Make one up. Examples include: "Quality for less!", "Tastey Pastries!", or something to that effect)
  6. Make a table that lists food items (at least 5) in each row. The columns should be the following headers:
    1. name (make each food dish name right aligned and bold)
    2. description (make each description in italics)
    3. spicy (If a particular dish is spicy, write "Spicy!" in some sort of red text. If a dish is not spicy, you don't have to put anything in the column at all.
    4. price
  7. Menus do not typically have borders. If your table has borders, get rid of them. You can keep a few in for stylistic purposes if you'd like, but for the most part it should be border free.
  8. Directly above the table, type in a few complete paragraphs about the restaurant. Include:
    1. Type of food (Italian, Indian, German, etc.)
    2. Quality of food (cheap? gourmet?)
    3. Environment (near the scenic Seine River? Mars? Downtown Pittsburgh?)
  9. Now, apply a custom CSS class to only one of the paragraphs to change how it looks (feel free to apply more than 1 class/style). For example, if you have 3 paragraphs you might fade their look from black, to dark grey, to grey.
  10. Insert 2 images from http://www.pdphoto.org/ that fit with the theme of the site (such as an example food item, or images showing the fictional location of the restaurant). Do NOT simply copy and paste the URLs of the images. Save them to your computer and put them right beside your HTML file. Feel free to resize them (by setting the width and height properties) and feel free to maybe change how your site looks to better match the colors found in the image. Remember to use the "Insert, Image" menu option.
  11. Insert a footer paragraph which says something like, "© 2008 [Restaurant Name]". Make the text smaller than normal.
  12. Just look through your code and see if you can't clean things up a bit. For example, depending on how Dreamweaver formats your footer, you may wish to instead make a CSS class that makes your code a bit more readable and perhaps even compact.
  13. Upload all of this (the HTML and any images) onto your web space using Dreamweaver's save to remote site feature.

Submission

Come to class (Wednesday) and show me your work in order to submit the page and show me it. I realize that all of the requirements of today's lab can be done with the XHTML/CSS knowledge that you already have so I reserve the right to "pop" questions just so that you can prove you did it (mostly) in Dreamweaver and that you know how to use Dreamweaver effectively.

Then, submit it via FTP to the Lab06 folder.