Case Study

For the Chapter 4 Assignment, you'll be adding images to your case study pages. All the images are supplied in the Student Data Files.

Late Assignments

Remember that all the assignments and quizzes have clearly marked due dates and must be turned in on time unless other arrangements have been made in advance with me. Late submissions will result in a reduction of one point per day.

IT 111 Chapter 4 Assignment - Visual Elements & Graphics

This assignment is due by 11:59pm on Wednesday, May 7 and is worth 20 points. Check the Chapter 4 Updates on the textbook web site for corrections to this chapter. Watch the Chapter 4 Video Tips (3:56 minutes) before you begin.

WARNING: The Student Data Files that accompany the textbook include the solutions to the hands-on practice exercises you'll be completing for this assignment and it might be tempting to just use these files. However, I believe that the best way to learn HTML5 is to type the code in by hand so please don't submit the supplied solutions as your own work or use web authoring software like Dreamweaver or Microsoft Expression Web for completing this assignment.

Learning Outcomes

After completing this assignment you will be able to:

Instructions

Grading Policy: You'll receive full points for each task if you follow all the instructions, include your last name and SID in each page title, and code each page so it validates without any errors. You may create one email message which includes all the required answers and links or you may send each in a separate email message. Either way, please add IT 111 Chapter 4 Assignment as the subject of the email message(s).

  1. Pick one of the scenarios below and tell me which graphic file format is the best one to use and explain your choice: (2 points)
    1. I've created a logo for my company's website that includes lots of solid colors and a transparent background.
    2. I want to post a few photos to my Facebook account.
    3. I have an animated graphic for my organization's website.
  2. Complete the Hands-On Practice 4.3 on page 141 - 142 then (3 points)
    1. Create a folder named trilliumch4 (all lower case letters and no spaces).
    2. Save the chapter4/starter2.html from the Student Data Files with the name index.html in the trilliumch4 folder.
    3. Copy the images (trilliumbanner.jpg, home.gif, services.gif, and contact.gif) to the trilliumch4 folder.
    4. Use the current year, 2014, as the copyright date and your name instead of the place holder text in the starter2 file.
    5. Add your last name and last 4 digits from your SID to the page title.
    6. Add the logo and navigation button images to the home page (Figure 4.10) on page 141.
    7. Copy the folder and all the files to your compass web account.
    8. Use the W3C Mark Up Validator to validate the HTML code for the page. Remember you must include the alt attribute with a descriptive value for every image you include. If you don't, your page won't validate.
    9. Use the W3C CSS Validation Service to validate the CSS for the page.
    10. Send me an email message with a link to the page. The link will follow this pattern:
      http://compass.northseattle.edu/~your_username/trilliumch4/
  3. Optimize one of the following photos for the web. Moab Utah (184 KB),London (1.53 MB), St. Paul's Cathedral (1.65 MB), Stockholm (1.63 MB) (3 points)
    1. To save a photo to your computer for editing, right click on the image (Ctrl click for the Mac OS) and select
      • Save Image As... (Firefox & Chrome)
      • Save Picture As... (Internet Explorer)
      • Watch a short video that demonstrates how to do this
    2. Use any image/graphics editing software you have installed on your computer OR use Picasa which is free and has versions for XP / Vista/ Win 7, and Mac OS. Watch a demo if you decide to use it for this assignment. Or, use these written instructions. If you are using the Linux operating system, you can use a free image editing program called GIMP.
    3. Crop the photo, if necessary. Use the "rule of thirds" described in the written instructions as a guide for cropping.
    4. Resize the photo - a smaller photo will also have a smaller file size.
    5. Adjust the file compression. Your photo should look good but the file must not be more than 60 KB.
    6. Insert the optimized photo into a blank web page (use your template.html and rename it photo.html) with the img element and include the height, width, and alt attributes. Please use the actual width and height of the edited photo. Sometimes students use made up values for the width and height and I'll deduct points for this. Here is a short video that shows how to find the real values for width and height. You can view the source code of this example to see how I want the web page coded.
    7. Use the W3C Mark Up Validator to validate the HTML coding for this page.
    8. Send me an email message with a link to the web page which will follow the pattern:
      http://compass.northseattle.edu/~username/photo.html
  4. Complete the Hands-On Practices 4.9 - 4.10 from page 164- 168 then (4 points)
    1. Create a new folder named border-shadowch4 and copy lighthouselogo.jpg and the background.jpg files from the chapter4/starters folder into it.
    2. Save the chapter4/starter3.html file to your border-shadowch4 folder and rename it index.html.
    3. Add your last name and the last 4 digits from your SID to the page title.
    4. Use the current year, 2014, and your name in the footer section.
    5. Complete the changes described in item 2 (see important correction below) on page 165 so the page looks like the one in Figure 4.32 on page 164.
      • Use width: 650px; instead of width:700px;
    6. Continue editing your index.html file and complete the changes described in items 1 - 4 on page 168 so the page looks like the one in Figure 4.34 on page 168.
    7. Copy the border-shadowch4 folder with index.html and the image files to your compass account.
    8. Use the W3C Markup Validator to validate the HTML code for the page.
    9. Use the W3C CSS validator to validate the CSS code for the page. You'll receive warnings when you validate your CSS because of the browser-propriety properties and this is okay. But, there should not be any other CSS validation errors in your code.
    10. Send me an email message with a link to the page. The link will follow this pattern:
      http://compass.northseattle.edu/~your_username/border-shadowch4/
  5. Continue working on the Case Study (JavaJam, Fish Creek, Pacific Trails Resort, Prime Properties) you worked on in Chapter 3. (8 points)
    1. The image files needed for the case studies are located in the Student Data Files in Canvas which you should already have saved to your computer.
    2. If you're working on JavaJam, follow the instructions on pages 180 - 183. Create a folder named javajam4 and copy all the files from javajamcss into it. Add the Music page (along with HTML comments) and modify the home and menu pages as instructed in the textbook. Update the CSS and add CSS comments as appropriate to describe the new style rules you add.
      • Tip 1: When you code the box shadow to the wrapper id, remember to code all the browser-proprietary properties and use these values: 5px 5px 5px #828282
      • Tip 2: You'll receive a validation error when you check the JavaJam home page in the HTML validator. Please ignore this error. In Chapter 6, you'll learn how to use CSS to position the Winding Road image.
    3. If you're working on Fish Creek, follow the instructions on pages 183 - 186. Create a folder named fishcreek4 and copy all the files from fishcreekcss folder into it. Add the Ask the Vet page (along with HTML comments) and modify the home and services pages as instructed in the textbook. Update the CSS and add CSS comments as appropriate to describe the new styles rules you add.
    4. If you're working on Pacific Trails Resort, follow the instructions on pages 186 - 189. Create a folder named pacific4 and copy all the files from pacificcss folder into it. Add the Activities page (along with HTML comments) and modify the home and yurts pages as instructed in the textbook .Update the CSS and add CSS comments as appropriate to describe the new styles rules you add. Make sure you check the Chapter Updates if you're working on this case study.
      • Tip 1: When you add the background image to the h1 element, use background-position: right; to position it on the right side.
      • Tip 2: When you code the box shadow to the wrapper id, remember to code all the browser-proprietary properties and use these values: 5px 5px 5px #828282
    5. If you're working on Prime Properties, follow the instructions on pages 189 - 192. Create a folder named prime4 and copy all the files from the primecss folder into it. Add the Listings page (along with HTML comments) and modify the home and financing pages as instructed in the textbook. Update the CSS and add CSS comments as appropriate to describe the new styles rules you add. Make sure you check the Chapter Updates if you're working on this case study.
      • Tip: When you code the rounded corners for the wrapper id, remember to code all the browser-proprietary properties and use 15px as the value of the border radius.
    6. Use the W3C Mark Up Validator and the W3C CSS Validation Service to validate all the pages you've modified. Remember you must include the alt attribute with a descriptive value for every image you include. If you don't, your page won't validate.
    7. Send me an email message with a link to the folder which will follow the pattern:
      http://compass.northseattle.edu/~username/javajam4/ OR
      http://compass.northseattle.edu/~username/fishcreek4/ OR
      http://compass.northseattle.edu/~username/pacific4/ OR
      http://compass.northseattle.edu/~username/prime4/