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, October 22 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 (7:29 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 145 - 146. (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 to the trilliumch4 folder.
    3. Copy the images (trilliumbanner.jpg, home.gif, services.gif, and contact.gif) found in the chapter4/starters folder to the trilliumch4 folder.
    4. Use the current year 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 145.
    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. Make the necessary corrections until your code validates.
    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),Green Lake (229 KB), St. Paul's Cathedral (1.65 MB), Haystack Rock (122 KB) (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 and make the necessary corrections until your code validates.
    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 168- 171 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 and your name in the footer section.
    5. Complete the changes described in item 2 on page 169 so the page looks like the one in Figure 4.31 on page 168.
    6. Continue editing your index.html file and complete the changes described in items 1 - 4 on pages 170 - 171 so the page looks like the one in Figure 4.33 on page 170.
    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 and make the necessary corrections until your code validates.
    9. Use the W3C CSS validator to validate the CSS code 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/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 which you should already have saved to your computer.
    2. If you're working on JavaJam, follow the instructions on pages 185 - 188. Create a folder named javajam4 and copy all the files from javajamcss into it. Add the Music page (along with the HTML comment for the code that centers the contents on the page) 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: Use these values for the box-shadow you add to the wrapper id selector: 3px 3px 3px #333333
      • 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 188 - 191. Create a folder named fishcreek4 and copy all the files from fishcreekcss folder into it. Add the Ask the Vet page (along with the HTML comment for the code that centers the contents on the page) 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 191 - 194. Create a folder named pacific4 and copy all the files from pacificcss folder into it. Add the Activities page (along with the HTML comment for the code that centers the contents on the page) 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.
      • 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, use these values: 3px 3px 3px #666666
    5. If you're working on Prime Properties, follow the instructions on pages 194 - 198. Create a folder named prime4 and copy all the files from the primecss folder into it. Add the Listings page (along with the HTML comment for the code that centers the contents on the page) 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.
      • Tip: When you code the rounded corners for the wrapper id, 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 and make the necessary corrections until your code validates. 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/