Imageready

START LEARNING
FLASH NOW

Get instant access to over
45 minutes of FREE Flash tutorials on video
and our newsletter.

Slicing Web Pages in ImageReady

Photoshop Preparations

In Photoshop Make a new Photoshop file 740 x 420 pixels and 72 dpi
Make sure you select a web safe palette.
Set your guides about 70 pixels from the top and 100 pixels from the left.
Create your artwork within the top and left boundaries. Leave the bottom right section empty or place a block of text into it. This is where the body of your pages go. The top and left sections stay the same for each page while only the content in the main section changes from page to page.
The top will be a static banner graphic and the left will be navigation/buttons
Make sure that buttons, banner and background are all saved on separate layers.
Save your .psd file with layers intact
Jump to Image ready (Shortcut: Ctrl + Shift + M)
You may have to close Photoshop depending on how much RAM you have.

Flash Tutorials in Video Format - Watch them now at LearnFlash.com

ImageReady - Slicing

Put back the guides you had in Photoshop
Select the slice tool and drag from top left to the bottom of the top banner
Slice the left navigation bar.
Slice around each button, but try to keep the sliced sections to a minimum.
Select the "Slice Selection" tool
Click on top banner and click the slice tab in the Animation/Slice/Rollover Window/palette.
In the "Name" field, rename it "banner" or "top".
Click on the first button and rename it" home".
Click in the URL field and type the link where the button is navigating to eg "index.htm"
Click on "Show Options" and in the "alt" field type some words describing the page . eg "video and animation tutorials"
Repeat steps 8-10 for the other buttons giving them their appropriate URL's (links) and alt tags.
Click on the content section, and in "Type" select "No Image".
Choose "None" for Background colour. Choose matte to use the image's background colour.
Click "File" - "Save Optimised as" and filetype "HTML and Images" and name the file "index.htm".
Go through each slice and optimise as per HTML lessons 2 and 3
Save again as "index.htm" and note the size difference. Create as many filenames as you have buttons eg. "index.htm", "about.htm", "video.htm", "anim.htm", "contact.htm".
Edit and write content in your favourite text editor. I recommend Boxer Text Editor, $59.99 USD, delivered via download only: the best text editor I have seen so far!
Open up the html file in the text editor and change the body tag to the code below so that there are no margins :
```
	<body  topmargin="0" leftmargin="0"
	    marginwidth="0" marginheight="0">
```

Note: "Alt" tags are used in image tags for HTML for accessibility reasons and are displayed if no images load up.
Slicing Causes tables to be automatically coded in HTML by ImageReady behind the scenes.