Semester Project

Task:

Using the photoshop design layout you created, you will prep it for moving into an actual website. Adapt the steps in the following tutorials as well as the slice lesson to prep your layout for Dreamweaver. The more practice you get, the easier this will become. You have to organize your layout in such a way that you should be able to put them into rows and columns in a table in Dreamweaver. You can write down how you are going to slice your layout to get the idea. Anything that is text and background colors can be done easily in Dreamweaver. Only images and graphics have to be sliced in Photoshop.

The project is due January 18, Thursday @ 7:30 pm. No extensions will be given.

Tutorial/References
Slicing:

• Photoshop Collage Super Tutorial.
• Slicing Exercise Slicing your site using Photoshop
• Other Slicing Tips

Tables:

• Tables for Page Layout
• Flexible Layout Using Tables
• Page Layout Using Tables for Dreamweaver DMX
• Video: How to Create Tables in Dreamweaver (no sound)

Other:

Converting Photoshop into CSS

Slice it like it is Hot!

Hot Sliced Images

A sliced image is actually a single image sliced or divided into multiple images. Each piece of the sliced image is called an image slice. Each image slice is an independent image file and can, therefore, have links, rollovers, and/or animations applied to it.

How is a sliced image different from an image map?

An image map is one image with multiple hot spots, whereas a sliced image is actually broken into two or more individual images, which allows for more flexibility and the ability to animate and/or swap individual image slices without changing the entire image. Unlike image maps, each image slice in a sliced image can utilize a different optimization setting, allowing for better overall image optimization. However, don't get fooled by this; although image slices may optimize more efficiently, downloading a sliced image means that multiple images must be downloaded. This process can take as long or longer than downloading one large image map. As a general rule of thumb, do not slice an image into more slices than is absolutely required for the desired effect.

Image slices can be created and edited in Photoshop or ImageReady; however, ImageReady provides more slicing options. Regardless of the application used, there are three types of image slices:

• User slices — User slices are created by using the Slice tool.
• Layer-based slices — Layer-based slices are created from layers.
• Auto slices — Auto slices are created based on what is left over after user slices and/or layer slices have been applied.

Nurse, the scalpel please.