Image Activity

Objective

To practice working with images on the web, explore the "save for web" features in Photoshop, reinforce Dreamweaver site management, CSS and HTML skills and practice the show graphic hide text technique discussed last class.

The Set Up

1. Download the ImageActivity zipped folder and unzip
2. Define a local site in Dreamweaver to point to the ImageActivity folder
3. Explore the folder structure. Why is it set up this way?

The Review

The sample page and CSS are a possible solution to our last activity. Explore the HTML and CSS. What Decisions where made? Why were they made?

The Tasks

1.) Working with Content Graphics

Using the butterfly.psd file in the _working folder export a web ready graphic to be embedded in the content.

Where should this graphic be saved?

The graphic should be the highest quality while keeping the file size relatively small.

Embed the graphic somewhere in the content using an image tag.

2.) Background Image

Using photoshop create a small repeatable graphic. You should save your PSD in the _working folder while exporting the graphic (gif) to the style folder. WHY?

Tile the graphic in the background of the page. It should be a property assigned to the "body" selector in CSS (meaing--Create a style for the body tag).

3.) Show Graphic Hide Text Practice

Create 1 or 2 title graphics using photoshop or Illustrator. Export them for web and replace the text headers using the technique demo-ed last class.

Play a Bit

Don't like the way the page looks, change it! Just remember..

• You do NOT need to create a new rule every time you want to edit the CSS. Use what you have already created and edit the CSS rules.
• DO NOT be preoccupied with the content. This is just a dummy page for practice purposes. Take it for what it is, an HTML document with 2 divisions where you can explore CSS techniques. Your projects should be more logical and will relate to your content.
• You can't break it, and if you somehow find a way to, WHO CARES! Debug it, it's good practice. If you can't figure it out, just download another copy and start over.

<<Back