CS2413: Web Site Development
WSD05: Pacific Trails Resorts - Visuals

Objectives:

Point Value:

Specifics:

Text Pages: Chapter 4
Downloads: Textbook's Web Site Case Study Data Files
                         Chapter 4 Student Data Files

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 - Visuals
IMPORTANT: In the video the absolute path for the images is displayed. (Example: http://apollo.occc.edu/user14001/images/picture.jpg). The Web Developer Tool Bar adds the URL. In the actual HTML code, however, the correct coding would be src="images/picture.jpg"

Color Chart: There is also a color chart to help with color names and numbers.
Errata Sheet:Chapter Updates for Chapter 4
    In the new window, click on Chapter 4 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 197-200 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 Case Study. Figure 2.38 shows a site map for Pacific Trails. The Home page and Yurts page were created in earlier chapters. Using the existing website as a starting point, you will modify the design of the pages and create a new page, the Activities page.

You have the following tasks in this case study:

  1. Create a new folder for this Pacific Trails case study, and obtain the start image files.
  2. Modify the Home page to display a logo image and scenic photograph as shown in Figure 4.53.
  3. Modify the Yurts page to be consistent with the Home page.
  4. Create a new Activities page, as shown in Figure 4.54.
  5. Modify the style rules in the pacific.css file as needed.
  6. Document your code.
  7. Publish your files.

Figure 4.53; page 198: New Pacific Trails Resort: index.html
Figure 4.54; page 198: Pacific Trails Resort: activities.html

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

  1. Obtain the images used in this case study from the student files. The images are located in the chapter4/casestudystarters/pacific folder. The images are background.jpg, coast.jpg, favicon.ico, sunset.jpg, trail.jpg, yurt.jpg,and trail.jpg.
  2. Create a new folder inside of the pacific04 folder called images.
  3. Save the image files inside the images folder in your pacific04 folder. (pacific04/images)

Task 2: The Home Page. Launch a text editor, and open the index.html file from your pacific04 folder. Using the following instructions, modify the index.html file to look similar to the web page shown in Figure 4.47.

  1. Configure the coast.jpg image to display below the <h2> element and above the <p> element. Be sure to include the alt, height, and width attributes. See p.157 FAQ: What if my images are in their own folder? for information on coding the path to the images. Use the method described in the Course Materials to determine the correct height and width of the images.
  2. Make sure you reference page 161 where it talks about how Microsoft (MS) Internet Explorer (IE) (a.k.a. Edge) is often buggy. You might have issues viewing the fav.ico locally. If this occurs, try to publish your files and folders to apollo and view it from there.

Save, validate, and test your updated index.html page. It will be similar to Figure 4.53 (pg. 198), but you will notice that a few final touches (like the sunset image in the logo area and a white space surrounding the blue navigation area) are missing; you will configure these with CSS in another task.

Task 3: The Yurts Page. Launch a text editor, and open the yurts.html page from your pacific04 folder.

  1. Configure the yurt.jpg image to display below the <h2> element and above the <dl> element. Be sure to include the alt, height, and width attributes.
  2. Add code to include a Favorites Icon using the <link>. Include code so it is compatible with Internet Explorer. Refer to p.158 for instructions.

Save, validate, and test your updated yurts.html page.

Task 4: The Activities Page. Use the Yurts page as the starting point for the Activities page. Launch a text editor, and open the yurts.html file in the pacific04 folder. Save the file as activities.html Modify the activities html file to look similar to the Activities page, as shown in Figure 4.48:

  1. Change the page title to: Pacific Trails Resort :: Activities by Firstname Lastname
    Note: “Firstname” and “Lastname” are to be replaced with your name
  2. Change the text in the <h2> to: Activities at Pacific Trails Resort
  3. Modify the <img> tag to display the trail.jpg image. Modify the alt attribute to appropriate.
  4. Delete the description list from the page.
  5. Configure the following text, using <h3> tags for the headings and <p> tags for the sentences:

    Hiking
    Pacific Trails Resort has 5 miles of hiking trails and is adjacent to a state park. Go it alone or join in one of our guided hikes.

    Kayaking
    Ocean kayaks are available for guest use.

    Bird Watching
    While anytime is a good time for bird watching at Pacific Trails, we offer guided bird watching trips at sunrise several times a week.
  6. Configure a <span> element to contain the phrase Pacific Trails Resort in the first paragraph on the page. Assign the <span> to the class named resort.

Save the activities.html file. Validate the new page. If you test your page in a browser, you will notice that it looks different from Figure 4.48; you still need to configure style rules.

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

  1. Modify the body element selector style rules. Configure background.jpg as the background image.
  2. Modify the style rules for the wrapper id. Configure the background color to be #FFFFF (or #FFF). Configure a minimum width of 700px (use min-width). Configure a maximum width of 1024px (use max-width) Use the box-shadow property to configure a drop shadow effect using 3px and the color #666666 (or #666). Add the information for two new colors to the comment area in the CSS file.
  3. Modify the style rules for the h1 element selector. Configure the sunset.jpg as a background image that displays on the right and does not repeat. Also configure 20 pixels of left padding. Configure a 72-pixel height (the same height as the background image).
  4. Modify the style rules for the nav element selector. Configure 5 pixels of padding.
  5. Modify the style rules for the footer element selector. Configure 10 pixels of padding.
  6. Add a new style rule in the heading area of the CSS file for the h3 element selector to display #000033 (or #003) text color.
  7. Add a new style rule in the main area of the CSS file for the main element selector that configures 20 pixels of left and right padding.
    Note: At the time of this writing, Internet Explorer does not recognize <main> as a block element. Therefore add the following rule to the CSS code
    display:block;
  8. Have you noticed extra empty space between the logo header area and the navigation? Let’s do something about that. We will need to use the CSS margin property, which you’ll explore in depth in Chapter 6. Modify the style rules for the h1 selector to set the bottom margin to 0 with the following codes:
    margin-bottom: 0;

Save and validate the pacific.css file. Test your pages (index.html, yurts.html, and activities.html) in a browser. If your images do not appear or your images links do not work, examine your work carefully. Use Windows Explorer or Mac Finder to verify that the images are saved in your pacific04/images folder. Examine the src attribute on the <img> tags to be sure you spelled the file names correctly.

Task 6: Documentation. HTML and CSS code should be well-documented (commented).

Task 7: Publish your Files. Upload the entire pacific04 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 pages must include DOCTYPE <html> tag information.
    3. All web pages must validate (HTML5) without errors using the Web Developer Tool Bar in Firefox or Google Chrome.
    4. The link to the web page in the submission area of the LMS must open the homepage in a new browser window.

      5. 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.