Week 7 Practical

Complete at beginning of class. Code this from scratch. Do not style the page with any additional CSS, or add any other HTML elements. Test your work in a browser after every change in code.

  1. Create a root folder for a web page on a topic of your choice. Give it an appropriate name. Create an images folder inside it.
  2. Create a new HTML file called index.html and save it to your root folder.
  3. Code the basic HTML skeleton in index.html.
  4. Add the two lines of code that are required to make this an HTML5 document.
  5. Create an external stylesheet and link to it.
  6. Find a pattern you like at subtlepatterns.com. Click the Download button and save the file to your images folder.
  7. Make the following HTML elements on your page:
    1. A containing div.
    2. An H1 inside the containing div.
    3. Two paragraphs under the H1, also inside the containing div.
  8. Set the subtle background image you chose as the body background: body { background-image: url(images/imagename.png); }
  9. Style the containing div:
    1. so it is 1000px wide, centered, with a top margin of 20px and padding of 20px.
    2. so it has a semi-transparent white background color: { background-color: rgba(255,255,255,.8); }
    3. so it has a border that coordinated in color with the background image.
    4. so it has rounded corners: border-radius: 10px;
  10. Style the H1 to have a font other than the default of Times, and to have a text color coordinated with the background image.
  11. Save everything and test the page in a browser. Try resizing the browser.
  12. ZIP the root folder and turn it in to the appropriate basket in Dropbox.

You may refer to prior lessons, your eBook, or online resources. You may ask for my help on one or two items, but I will not be guiding you through this review.

After you have had sufficient time to complete this on your own, I will demonstrate how I would do it.

Student Showcase

We will take a look at any of your new work which is ready to share.

For the Color Project assignment, we will discuss the following aspects:

  • Overall strength of the design
  • Degree to which the following meet the project requirements:
    • site structure
    • content
    • HTML code
    • CSS code (all 5 colors are used)
    • color palette name

GIF vs. JPG vs. PNG

Characteristics GIF JPEG PNG-8 PNG-24
Acronym for… Graphics Interchange Format Joint Photographic Experts Group Portable Network Graphics
Basic Image Format Bitmap
Color Support 8 bits per pixel (not 8 bits per channel), so only 256 possible colors for a given file Allows 16.8 million colors per file 256 colors per file 16.8 million colors per file
Compression Lossless (no artifacting) Lossy (artifacting) Lossless (no artifacting)
Ideal for… Simple graphics Photographs and complex graphics Simple graphics Photographs and complex graphics
Not ideal for… Photographs Simple graphics Photographs N/A
Transparency Support Yes, but not alpha transparency No Yes, but not alpha transparency Allows alpha transparency in PNG-32 (which is what you get in Photoshop for “PNG-24” if you select Transparent)
Animation Support Yes No No No
Browser Support All All All modern browsers (including IE 7 and above)
File Extension .gif .jpg or .jpeg .png
Sample Ideal Images

Any

 

Sample of Artifacting

Logo saved as a JPG:
OH logo
OH logo

Same logo saved as a GIF:

logo
OH logo

Finally, saved as a PNG-24:

logo

Save for Web

The two big factors in web imagery are quality and file size. Image quality affects user experience. File size affects download time. Ideally, you will use only great-looking, small-file-size images for the majority of your web work. The process of balancing these two factors to create a web-ready image is called optimization.

Using Photoshop, you have a fairly easy way to save images for the web. If you take a moment, and use your knowledge of GIFs, JPGs, and PNGs, your result can be a highly-quality image at a reasonable file size.

To access Photoshop’s web image capability, go to File > Save for Web.

  • In the Save for Web window, you can:
  • Zoom in or out to see various details in your image.
  • Compare up to 3 versions of the optimized image against the original.
  • Resize the image.
  • Control the quality and/or color palette of the optimized image.
  • View the resulting file size.
  • Set the Matte color to match a destination background color for images with transparency.
  • Experiment with various file types and qualities.

Matting

When working with transparency, it’s important to consider the background color upon which the image will sit. On edges which are not perfectly straight up or down, Photoshop smooths out the jagged look of whole-pixel colors by using dithering. Dithering is a way of blending one color into another by using a small band of pixels between the two which provide a gentle transition.
dithering

 

Photoshop defaults to a Matte color of white. However, if you leave the Matte color as white but your background will be another color, the results look pretty bad. Make sure to find out what the background color will be, then dial it in for the Matte swatch in Save for Web.
matte

Save for Web Exercise

Right-click on each of the three images below to download the source files to your flash drive. Then try to get the highest quality web image while keeping it within the restraints indicated below.

Image Download Desired Width Maximum File Size Additional Requirements
lemur-sm 400px 50KB
stewie-sm 200px 10KB Maintain transparent background.
Destination background color: match the blue highlight on his laser gun
tv-sm 150px 12KB White background

When you are finished ZIP up all the optimized image files, and rename the ZIP file saveforweb.zip.

HTML Images

You already know the basics of inserting an image into your HTML:

<img src=”images/picture.jpg” alt=”My Picture description”>

Sometimes you will see width and height attributes added as well:

<img src=”images/picture.jpg” alt=”My Picture description” width=”200px” height=”50px”>

Some notes about this practice:

  • It is not necessary to use these attributes.
  • However, sometimes designers include these so that the layout know how much space an image is going to occupy before the image has fully loaded. This prevents the layout from jumping around as the page loads.
  • These attributes can be used to resize the image in the browser. This is generally a bad idea, because the image may be shown very small but in fact is a huge file size that still needs to download first. This can take a lot of time, and bandwidth/data allocation on mobile.
  • Sometimes, designers deal with high-resolution (such as “retina”) mobile devices by reducing the quality of a JPG way down to 30% while keeping the image dimensions large. Then they resize it down in the HTML. This keeps the file size low but presents better image quality on high-resolution screens.
  • There’s a whole lot more to image sizing and quality for responsive web design that we won’t get into in this class (but do in later web coding classes).

CSS Images

CSS has two basic ways of incorporating images into your design: as backgrounds and as bullets.

Here are two example CSS rules:

Background

body {
background-image: url(images/background.gif);
}

Bullet

ul li {
list-style-image: url(images/bullet.gif);
}

If you really want to go crazy with it, you can even create graphics using only CSS and HTML.

Further Reducing File Size

There are a handful of free tools online that will further reduce your image file size, without destroying quality. Do this after already having optimized in Photoshop:

Cow Gallery

Download File

  1. Download and unzip the file above. In it are six cow photos.
  2. Make a root folder called cow-gallery.
  3. Make two folders inside the cow-gallery folder, called images and thumbnails.
  4. Move the original cow photos into the images folder.
  5. One at a time, open each cow photo and make a thumbnail-size image in Photoshop:
    • 150px wide
    • no larger than 12KB in file size
    • save each smaller version into the thumbnails folder.
  6. Create an HTML5 file called index.html and save it in your root folder.
  7. Inside the <body> element, put in six <img> tags, one for each of the thumbnail images.
  8. Wrap each <img> tag inside an <a> (anchor) element so that it links to its respective large photo in the images folder.
  9. Test the page in the browser:
    • make sure all six thumbnail images appear on the page
    • make sure that each thumbnail clicks through to its full-size image
  10. ZIP the root folder and turn it in.