CS2413: Web Site Development
WSD06: Pacific Trails Resorts - Layout

Objectives:

Point Value:

Specifics:

Text Pages: Chapter 6
Downloads: None
Reference: Silent Video on YouTube.com which is a demonstration of the completed assignment. Disclaimer: If you see something that is contradictory to our class assignments, please ask. Do not assume that since it is on the video that it is 100% correct.

Sample assignment video: Pacific Trails Resort - Layout

Color Chart: There is also a color chart to help with color names and numbers.
Errata Sheet:Chapter Updates for Chapter 6
    In the new window, click on Chapter 6 and then scroll to the bottom of center column to locate Chapter Updates.

 The following is a modification of the Pacific Trails Resort case study assignment located on pages 299-301 of your textbook. Follow the instructions as indicated below for this assignment:

Pacific Trails Resort Case Study

See Chapter 2 for an introduction to the Pacific Trails Resort case study. Figure 2.38 shows a site map for Pacific Trails. The pages were created in earlier chapters. In this case study, you will implement a new two-column CSS page layout. Figure 6.55 on p. 299 displays a wireframe for a two-column layout with wrapper, header, nav, content, and footer areas.

You will modify the external style sheet and the Home, Yurts, and Activities pages. Use the Chapter 4 Pacific Trails website as a starting point for this case study. You have the following tasks in this case study:

  1. Create a new folder for the Pacific Trails case study.
  2. Modify the Home page to implement the two-column page layout as shown below including "buttons" for navigation links*.
  3. Modify the Yurts page to be consistent with the Home page.
  4. Modify the Activities page to be consistent with the Home page.
  5. Modify the style rules in the pacific.css folder to configure a two-column page layout and the CSS navigation "buttons".

*Note: The Pacific Trails Resort in the text does not include navigation buttons, but they will be required for this assignment. The Prime Propeties Website Case Study is used as the basis for this part of the assignment.

index.html AFTER Chapter 6 CSS has been added
Pacific Trails with Nav Buttons

Hands-On Practice Case
Task 1: Make a copy of the pacific04 folder. Rename the copy pacific06. All work for this assignment will be done on the files in the new pacific06 folder.

Task 2: Modify the Home page. Open index.html in a text editor and modify the code as follows (Note: The web page will first be modified so that the navigation on the left is text. In the CSS portion, these text links will be formatted as buttons.)

  1. Add the following HTML5 shim code in the <head> section of the web page after the <link> element (to assist Internet Explorere 8 and earlier versions) 
    <!--[if lt IE 9]> 
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> 
       </script> 
    <![endif]-->
  2. Configure the left-column navigation area, which is contained in the <nav> element. Remove any &nbsp; characters that may be present. Code an unordered list to organize the navigation hyperlinks. Each hyperlink should be contained within <li> tags.
  3. Locate the <div> that contains the address information. Assign this <div> to the class named clear.
  4. Add text links for Home, Yurts, Activities, and Reservations (website navigation) in the <footer> just above the copyright information. For easier reading, add an extra space (&nbsp;) between each link.
    Text Links
  5. View the web page in the browser.
index.html BEFORE Chapter 6 CSS has been added
Index Page Before CSS

Task 3: Modify the Yurts Page. Open yurts.html in a text editor. Configure the left-column navigation area, navigation hyperlinks, and HTML5 shim in the same manner as the home page. Save the yurts.html page. and test it in a browser.

Task 4: Modify the Activities Page. Open activities.html in a text editor. Configure the left-column navigation area, navigation hyperlinks, and HTML5 shim in the same manner as the home page. Save the activities.html page. and test it in a browser.

Task 5: Configure the CSS. Open pacific.css in a text editor. Edit the style rules as follows:

  1. Modify the wrapper id by changing the background color to sky blue (#90C7E3), which will be the background behind the navigation area. .
  2. Configure the left-column navigation area b modifiying the <nav> area.
    1. Keep the style rules that configures the bold text.
    2. For the <nav> area
      1. Remove the background color property. The <nav> area will inherit the background color of the wrapper id.
      2. Add style rules to configure this <nav> area to
        1. float to the left
        2. have a width of 160 pixels
        3. have padding of 20 pixels top padding, 5 pixels right padding, 0 pixels bottom padding, and 5 pixels left padding
  3. Configure the navigation hyperlinks. Review to the color chart as needed.
    1. Use a contextual selector to add a new style rule for the anchor <a> tags within the <nav> area that
      1. removes the underline from the hyperlinks
      2. displays block
      3. centers text
      4. border 2px outset #CCC
      5. padding of 5 px
      6. background color #003
      7. text color of #FFF

        Nav A CSS
    2. Configure the list <ul> in the navigation
      1. No list markers
      2. No margins
      3. No left padding

        Nav UL CSS

    3. Configure the navigation hyperlinks using pseudoclasses
      1. Unvisited – will inherit no additional code needed
      2. Visited – background: #90C7E3
      3. Hover – background: #39C, border: 3px inset #666

        Nav Psudeoclass links
    4. Add the new colors and their uses to the comments section at the top of the pacific.css file
  4. Configure the right column <main> area.
    1. Background color: #FFF
    2. Left margin: 170px
    3. Padding: Top-1 px, right- 20px, bottom-1px, left-20px
    4. Configure images displayed within the <main> element
      1. float to the left
      2. 20 pixels of right and bottom padding 
      Main Img CSS
    5. Configure an unordered <ul> list in the <main>to display the list markers inside rather than outside the list
       Main UL
  5. Create a new class named clear that clears all floats (To keep the code organized, this should be added in the Entire Web Page section of the CSS File)
  6. Configure the <footer> area with a white backgroundand 170px left margin
  7. <main> alread has a property to display as block. Remove that property and add the following so <header>, <nav>, <main>, and <footer> are all displayed block to remain compatible with older browsers. (Again, to keep the code organized, this should be added in the Entire Web Page section of the CSS File)
         header, nav, main, footer {display: block;}
  8. Save and validate your files. View in the browser to verify that the “buttons” are formatted per the instructions Your new case study web pages should be formatted as the example at the top of this page.

Task 7: Publish your Files. Upload the entire pacific06 folder to your Apollo web site.

Common Requirements for All Web Pages

    1. The web pages must display correctly in all of the following: FireFox, Chrome, Internet Explorer.
    2. The links between the existing pages with the Pacific Trails Resort website cannot be broken.
    3. All HTML and CSS code must be well documented, properly indented, and easy to read.
      http://css-tricks.com/examples/CleanCode/Beautiful-HTML.png
      http://coding.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/

Mandatory Requirements

Failure to adhere to and/or include the following items will prevent the assignment from being graded.
Note: If time permits, the assignment can be resubmitted during the late/resubmit period, but there will be a 10% penalty.

    1. No additional formatting is allowed at this point in time. It will be added later. For now, the pages will be very plain.
    2. All web pages must validate (HTML5 & CSS3) without errors using the Web Developer Tool Bar in FireFox or Google Chrome.
    3. The link to the web page in the submission area of the LMS must open the homepage in a new browser window.

      4. Assignments using CSS3 must still validate when using FireFox or Web Developer Toolbar.

      REMINDER: By default, at the time of this writing, FireFox's Web Developer's CSS Validation is set to CSS2.1. It is a simple fix to update it. In the Developer Tool Bar, click on Tools | Edit Tools. Select Validate CSS and then click on the Edit button at the bottom of the dialog box. If not selected, choose the radio button next to URL. Change the URL as indicated below. Click on OK and the close the Tools dialog box. You may need to restart the browser. This also seems to alleviate some of the errors associated with webkit and moz.

      http://jigsaw.w3.org/css-validator/validator?profile= css21 &warning=0&uri=
      http://jigsaw.w3.org/css-validator/validator?profile= css &warning=0&uri=

Assignment Submission:

There are two parts to submitting the assignment: uploading the website to the Apollo server and submitting the URL within the LMS.