... part of the Web Site of George North -- Back to Site Index to BlackBoard
Webpage Design and Development, CPST-240-10
Spring 2009

Travel Scotland!
Tutorial 3 - Case Problem 4
Week of Wednesday, Feb 25
Due 11:59 PM, Sunday, Mar 1

Assignment
Key Terms
News

You should already have the Data Files need for this Case Problem. See Data Files for Students for more information.


Tutorial 3, Case Problem 4

Travel Scotland!

Tutorial 3, Case Problem 4 is presented in your textbook starting on page 196. You've been hired by the owner of a touring company. She's come to you for help in creating a design for the Travel Scotland! Website. You are provided with content and graphic images for 4 web pages. You are to take her unformatted content and create an interesting design and layout.



Before beginning this task:
  1. Advice: Don't start this assignment without first reading Tutorial 3 in your text book.
  2. This is up to you, but you may want to make a new folder on your computer, and on your Tulane Student Website to contain all the files for this project. For a number of reasons, it is good practice to separate related files, not the least of which is to make it easier for you to find them.
  3. Name all of your web pages for this project similarly. Like this: T3CP4_uniqueName.html (use a name you make up, not uniqueName)
  4. When naming webpages, the underscore character ... " _ " ... is the only special character allowed. You should NEVER use space character in names, use underscore instead. Web pages are named using letters, numbers, and underscore ONLY ... that's it, NO OTHER CHARACTERS. To be compatible with the largest number of web servers, you should limit webpage names to 31 characters.
  5. As always, every web page will include the heading comments as demonstrated by our HTML Template.
  6. Before getting too far along, review the content of the text files and view the image files. The image files match up with the travel destinations.
  7. HINT: If you are unsure how to view image files on your computer, you can user your browser to do so ...
    1. drag an image file on top of a browser window, or
    2. use Open ... in the File menu of your browser to locate the image file on your computer


To complete this task:
  1. Once you become familiar with the contents of this proposed site, start designing the site. There should be at least 4 pages. In your preparations for the site, create a storyboard of the site's contents and links. Another link to StoryBoarding!
  2. Every time you make any changes to your Style Sheets, you should use W3C CSS Validation Service to find errors quickly, making it much easier to make needed corrections.
  3. As you make small changes, use your browser to view your WebPage. Use W3C Markup Validation Service to catch HTML mistakes as you make them.
  4. Make sure that you make your site easy to navigate.
  5. Please include other resources you may find to make your site unique and interesting.
  6. The design and layout of the site is up to you, but your pages should include at least one example of the following design elements:
    1. A style that modifies the text and background colors of page elements.
    2. A style that modifies the font size, face, and appearance of element text.
    3. A style that defines an element's padding and margins, distinctly different in at least two directions.
    4. A style to define the border appearance of an element.
    5. A style that floats an inline image or element.
    6. A style that adds a background image to an element.
    7. A style applied to a <div> container identified by an "id" value.
  7. Every Webpage should have a slightly different appearance. Add an embedded style sheet to each Webpage to provide different color scheme ... and other style attributes that add to the Webpage design.
  8. Use W3C Markup Validator to insure that your Webpages conform to XHTML 1.0 Transitional or XHTML 1.0 Strict as specified by your <!DOCTYPE declaration.
  9. Test your Webpage under a variety of browsers.


When you are finished:
  1. Use FTP to upload your completed web page to your Tulane Student Web Space.
  2. Copy the URL of your website's main page and paste it into a new eMail message to George (gnorth@tulane.edu). Subject of this eMail MUST be "Tutorial 3 - Case Problem 4"