Slicing Guide

8/2/2019 Slicing Guide

1/26

SlicingGuide.com

Lesson 1 - Introduction to the Slicing Guide

After MANY requests, badgering, offers of undying love and devotion and finally a marriage proposal

from Angelina Jolie, I have finally put together my complete guide to slicing an advanced layout

properly, and how to code it inDreamweaver! Ok, so Angelinadidnt propose to me, but Im sure if sheknew I existed shed want to. Right?

Before I get any further, lets go over some ground rules or points of the tutorial guide so that way we

avoid any future confusion:

POINT 1. I will be slicing this layout completely by hand usingCorel Photopaintversion 11! Sorry

guys, you know me and my love/hate relationship withPhotoshop. Now having said that, you should be

able to doEVERYTHING I do in this tutorial withCorelin any application that lets you mask off part

of an image, then copy paste that section to a new image. As far as I know, you can even do that in MS

Paint, so you dont have many excuses.

POINT 2. I will code this tutorial inDreamweaver MXusing tables. Sorry to the hardcore xhtml

validators and other programming nuts, but Im not much of a coder. So I dont want to hear anyone

yelling about using DIVs and CSS. If you cant code a layout into tables, youre certainly in no position

to use DIVs and CSS for a layout this complicated.

POINT 3. A HUGE thanks goes to Griffin for letting us use his layout for this tutorial. Please remember

that the image is COPYRIGHT to Griffin and this tutorial is COPYRIGHT toPixel2life Studios. You

steal, you will be pursued in a legal manner.

POINT 4. You should know the basics to follow this tutorial. InCorel Photopaint, you should

understand the basics ofMasking and creating new objects from clipboard items. InDreamweaver, you

should know some basic creation skills and how to create tables, text, and some simple CSS embedded

sheets.

POINT 5. This tutorial is advanced. I'll try to explain things as best as I can, but you have to realize that

the concept is an advanced form of layout slicing and the layout itself that we are using as an example is

quite complicated. Consider yourself warned!

So without further delay, lets get at it!
http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/Adobe_Photoshop/All/http://www.pixel2life.com/tutorials/Adobe_Photoshop/All/http://www.pixel2life.com/tutorials/Adobe_Photoshop/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/http://www.pixel2life.com/http://www.pixel2life.com/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/Adobe_Photoshop/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/


2/26

Fig 1.1 - Here is the layout we will be dealing with (Click for full view):

Notice the gradient style backgrounds, multiple content boxes and the many other areas that most people

run into problems coding. Now you could useFireworksor some other tool to slice this, but heres the

big difference: When you slice withFireworks, your content boxes are set to specific sizes and wontstretch without messing up the rest of the site. Once were done slicing, the content boxes will be able tostretch all over the place without anything getting out of alignment.

Lesson 2 - Developing Your Slicing Strategy

Before I slice any website up, I look it over and work out a battle plan and figure out how Im going to

build this up. When you have a really complicated layout, its important that you work out HOWyoure

going to slice before you start. If you dont, you get halfway through the slicing/coding job and realize

you went at it completely wrong and need to restart. Since this is such a long process, you obviously

want to try to do it right the first time.

So lets look at our layout and see whats what.

Strategy notes:

NOTE 1.The layout has a constant border on both sides, so well be able to create a single background

image for the entire layout.

NOTE 2. The header area will have to have 2 separate sections. One on the left for the header logo

image, and one on the right for the navigation menu.

NOTE 3. Single rows will be used between the header area and the content area for the navigation menu

and large empty banner spot.

NOTE 4. Content area will be two columns. Sub info in a smaller column on the left and the maincontent stays on the right. Ill be able to recycle footer and head images to save space.

NOTE 5. Footer goes back to a single row.

By the way, notice Im not using aPSD? You actually dont need it for your slice job In fact, using a

layered image to do this will probably lead to a lot of headaches. Im using the exactJPG image seen in

Lesson 1.
http://www.pixel2life.com/tutorials/Fireworks/All/http://www.pixel2life.com/tutorials/Fireworks/All/http://www.pixel2life.com/tutorials/Fireworks/All/http://www.pixel2life.com/tutorials/Fireworks/All/http://www.pixel2life.com/tutorials/Fireworks/All/http://www.pixel2life.com/tutorials/Fireworks/All/http://www.slicingguide.com/lesson1.htmlhttp://www.slicingguide.com/lesson1.htmlhttp://www.slicingguide.com/layouttut/layout.jpghttp://www.slicingguide.com/lesson1.htmlhttp://www.pixel2life.com/tutorials/Fireworks/All/http://www.pixel2life.com/tutorials/Fireworks/All/


3/26

So after developing my strategy, heres how Im visualizing the layout in my head. In Fig 2.1, I havereduced the layout image as shown in Fig 1.1 inLesson 1to 600 pixels wide, and I have covered each

major area of the layout with a semi-transparent green square and a Box label. So, once I start coding

this layout inDreamweaver, these greenBox Areas are the essential tables and cells I will have tocreate. Think of this as a rough roadmap, or as I like to call it, my Strategy Guide.

Fig 2.1 - Learn to create a Strategy Map to plan out your work:
http://www.slicingguide.com/lesson1.htmlhttp://www.slicingguide.com/lesson1.htmlhttp://www.slicingguide.com/lesson1.htmlhttp://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.slicingguide.com/lesson1.html


4/26

Now I know what you're saying! (Or did you miss it?) "Why aren't the left and right border columns

highlighted in green???" In Fig 2.1 above, I didn't create green box areas over the side borders because I

will slice this layout so that once I have created my first few tables, I won't have to worry about those

borders again. Initially this may be a bit confusing, but it will make a whole lot of sense once we start

coding this layout up.

When I first started slicing layouts, I used to actually draw this little Strategy Map out so I could keeptrack of what I was doing, but after some practice, you should be able to visualize this in your head

without having to draw it out. Work at your own pace and do whatever you're comfortable with. It's the

end results that count, so how you get there isn't all that critical.

Lesson 3- Setting the Stage

Before we get to some serious business, let's get ready by creating the files and folders we need, and

open the necessary tools.

STEP A. Find a location on your hard drive that you want to use as the root of your website html pages,

images and additional related files. In that folder, create a sub folder called images. You should always

use a sub folder for your image files and don't just dump them in with the html files. Try to keep things

organized now so that you're not scratching your head later on when you try to clean things up.

STEP B. Once your image sub folder is ready to go, create a new text document in your root folder and

name it index.html. You can right-click within the folder to create a new text document right on the

spot.

Fig 3.1 - Creating a new Text document:


5/26

Fig 3.2 - Your images sub folder and index.html file ready to go!

Now youre ready to go! I will now open the index.htmlfile inDreamweaverand the layout.jpg file in

Corel Photopaintand get down to business.

Lesson 4 - Preparing the HTML Document

In this lesson, we will cover some basic page properties you should set in the HTML document beforeyou get into cutting up any images.

STEP A. The first thing we need to do is get our file ready for the images and tables we're going to add.

We can see that the layout will be aligned to the center and there are no margins of any kind. The site

will be right up against the top edge of the browser screen. With your file open inDreamweaver,Right-Click on the blank page and clickProperties. This will allow us to change the general properties of thetemplate page.

Fig 4.1 - Opening the Page Properties inDreamweaver:
http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/


6/26

STEP B. ThePage Properties dialogue box will open and from there, you can select the generalattributes you want to use for the template page. In this case, I will give the page a title, set the overall

background color to a standard gray, and set the margins to zero. ClickOKto apply the changes and go

back to page editing mode.

Fig 4.2 - My set property settings:

Fig 4.3 - You should now have a page with a gray color background, and the cursor is all the way

in the top left of the page, happily blinking away (see red arrow):

Your page is now ready for the tables, images and text to come!


7/26

Lesson 5- Main Tables and Images

Just a note before we go any further. Neverslice the entire layout THEN try to code it. Thats a recipe

for disaster. Think of this as trying to built a walkway with interlocking stones. You fit the stones as you

go, then cut the stones as required until the job is done. Youll never see a contractor arrive with 2000

pre-cut stones and get the job done without having to use that saw again. So as we do this, well be

switching back and forth betweenDreamweaverandPhotopaint.

STEP A. The first thing we need to do is figure out how wide the layout is going to be. InPhotopaint, I

have my work area configured to show me the document dimensions at the bottom of the screen at all

times. You can also see the document dimensions by clicking onImage >Resample and looking at the

current dimensions (make sure youre using pixels for your unit of measure).

Fig 5.1 - Opening theResample Toolto view document dimensions:

Fig 5.2 - Using theResample Toolto view document dimensions:
http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/


8/26

STEP B.At this point, all were interested in is width. We can see the total width of our layout is 790

pixels, so we can create our first table inDreamweaver. Switch over toDreamweaverand click the

Insert Table button.

Fig 5.3 - Click on theInsert Table button:

Fig 5.4 - Use the following Table settings and click OK:

Fig 5.5 - You should now have the following table on your page (Click on image for fullsize

sample):
http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.slicingguide.com/layouttut/shot009.gifhttp://www.slicingguide.com/layouttut/shot009.gifhttp://www.slicingguide.com/layouttut/shot009.gifhttp://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/


9/26

STEP C. The table now has the correct width, but we need to center it and stretch it down the entire

page so that no matter what, the page always takes up at least the entire height of the browser window.

With your table still selected, you will need to adjust the settings in the property box like this:

Fig 5.6 - Before adjusting table property values:

Fig 5.7 - AFTER adjusting table property values:


10/26

Fig 5.8 - Your table should now be centered and stretching to the bottom:

Your site'sPrimary Table is now complete, and we can move on to setting ourPrimary Background!


11/26

STEP D. Time to add the table's main background image! Switch over toPhotopaintand zoom right in

to the left border (400%) and let's create a background image. Now we have to be careful because this

layout is loaded with gridlines, so we have to cut it out intelligently so the grid pattern works correctly.

You can see me working here with theRectangle Mask Tool(Hit 'R'). Click and hold where you wantthe mask to start and start dragging your mouse to the right. Release the mouse button when you have

masked off the entire area.

Fig 5.9 - In the process of creating a rectangle mask:

Fig 5.9 - Here you can see the area I have masked off in the layout image. This is the area we will

use for our Primary Background (Click on image for fullsize sample):

Hit Ctrl-Cto copy the masked area to clipboard and then Ctrl-Shift-Nto paste the object as a newdocument. You now have your table background image! I will now save this image as main_bg.gif in

the images sub-folder I created.

Fig 5.10 - main_bg.gif created from STEP D (Click on image for fullsize sample):
http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.slicingguide.com/layouttut/live/images/main_bg.gifhttp://www.slicingguide.com/layouttut/shot014.gifhttp://www.slicingguide.com/layouttut/live/images/main_bg.gifhttp://www.slicingguide.com/layouttut/shot014.gifhttp://www.slicingguide.com/layouttut/live/images/main_bg.gifhttp://www.slicingguide.com/layouttut/shot014.gifhttp://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/


12/26

STEP E. Go back toDreamweaverand your main table should still be selected. In the properties box,

click onBackground Image Browse button to select the new background image we created:

Fig 5.11 - Select the Background Image Browsebutton (See red circle) :

Fig 5.12 - Browse to the main_bg.gif image and click on the image once to highlight it then click

OK or just double-click the image name:
http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/


13/26

Fig 5.13 - Your Primary Table is now using the main_bg.gif image as the Primary Background

image:

LIVE SAMPLE - You can see a live sample of what our index.html page looks likeHERE! Feel

free to compare your work by viewing my example's source code.

And now we have our basic page and main table up and running. Now things start to get complicated

and this is where most people get confused.
http://www.slicingguide.com/layouttut/live/index1.htmlhttp://www.slicingguide.com/layouttut/live/index1.htmlhttp://www.slicingguide.com/layouttut/live/index1.htmlhttp://www.slicingguide.com/layouttut/live/index1.html


14/26

Lesson 6a - Setting up the Borders

We're just about ready to start adding the meat of the layout, but before we can do that, we need to

establish some borders on our main table because we know for a fact that no content will ever appear

over the layout borders. So it's safe to say those borders don't need to be included in our slicing and

layout schemes. We'll fix up the table so that we don't have to worry about compensating for those

layout borders every time we slice an image.

This might sound a bit confusing, but it's really a simple concept. Bear with me through the next few

steps and it will all fall into place. Let's get some general measurements so we can set up these borders

I'm rambling about.

STEP A. Get back intoPhotopaintand zoom into the left border. Mask off a chunk of the border and

copy/paste it into a new document like we did for the background image. We won't use the image, we

just want to see how wide it is, so take a note of the width and then close the image without saving it.

Fig 6aa.1 - Mask off a section of the border and copy/paste to a new document to take a width

measurement:

STEP B. After doing the previous step for the left border, the middle content area and the right border, I

have the following measurements (See Fig 6aa.2):

Left Border (Green Area): 22 Pixels Middle Content Area (Yellow Tinted Area): 747 Pixels Right Border (Green Area): 21 Pixels

Fig 6aa.2 - How I measured the 3 vital areas (Click on image for full size sample):
http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/http://www.slicingguide.com/layouttut/shot018b.gifhttp://www.slicingguide.com/layouttut/shot018b.gifhttp://www.pixel2life.com/tutorials/CorelDraw_and_Corel_PhotoPaint/All/


15/26

The next few steps require full screen shots, which I have taken and circled areas of importance or

labeled specific areas you should pay attention to. Please click on the thumbnails below as you complete

each step for a full screen view.

STEP C. Back to Dreamweaver and click in the middle of your table just to make sure your cursor is

active inside that area. Now right-click inside the table and click on Table > Split Cell.

Fig 6a.3 - Splitting a cell:

Fig 6a.4 - Split the table into 3 columns. 2 columns for the outside borders, and 1 column for the

center content area. Click ok to proceed:
http://www.slicingguide.com/layouttut/dxscreens000.gifhttp://www.slicingguide.com/layouttut/dxscreens000.gif


16/26

Fig 6a.5 - ThePrimary Table has now been split into 3 columns:
http://www.slicingguide.com/layouttut/dxscreens002.gif


17/26

STEP D. You will now need to set the column widths to reflect the measurements we took from the

image sample.

Click your mouse inside the first column on the left and you should see your cursor blinking inside.

Note the faint dotted lines that are showing you where the edges of each table cell are.

Fig 6a.6 - Note the cursor position. The properties box will display the settings for that selected

cell:

In the properties box at the bottom of the screen (or wherever you have the properties box located in

your workspace), set the width to the border size to 22 pixels and hit enter.
http://www.slicingguide.com/layouttut/dxscreens002b.gif


18/26

Fig 6a.7 - Set the first column to 22 pixels wide in the properties box:

Now do the same thing for the center and right columns and set them to 747 and 21 pixels respectively.

Fig 6a.8 - YourPrimary Table is split into 3 columns with proper width sizes set:
http://www.slicingguide.com/layouttut/dxscreens004.gifhttp://www.slicingguide.com/layouttut/dxscreens003.gifhttp://www.slicingguide.com/layouttut/dxscreens004.gifhttp://www.slicingguide.com/layouttut/dxscreens003.gif


19/26

So now you have a column for each border that we won't be touching, and one middle column where all

our content will go. We now have one little problem... the header and the rest of the content will all be

aligned to the top of the site, but the footer will be aligned to the bottom. We obviously can't set two

alignments for one cell, so we'll now need to split ourPrimary Table into two rows!

STEP E. Once again we will right-click anywhere in the table and then click on Table > Insert Rows or

Columns.

Fig 6a.9 - Actions to insert a new row or column:

Be sure to select 1 Row and you want to insert it below the current selection. Once you've selected the

desired settings, click OK to apply them.

Fig 6a.10 - Insert Row settings:
http://www.slicingguide.com/layouttut/dxscreens005.gifhttp://www.slicingguide.com/layouttut/dxscreens005.gif


20/26

Fig 6a.11 - ThePrimary Table is now split into 3 columns and 2 rows:

Phew! We've done quite a bit in this lesson! We've almost completed the splitting of thePrimary Table

to suit the layout, but we have a few more steps to go. Before we move on though, let's do a basic recap

of everything we've done so far inLesson 6a! Move on toLesson 6bfor the quick recap (If you are

confused on what we just did, you should REALLY read this section) or if you're completely clear on

what we've done so far, you can move on toLesson 6c!

Lesson 6b - Lesson Recap With Basic Diagrams

We've just completed a lot of steps inDreamweaverto create ourPrimary Table, so let's recap what

we've done in this lesson so far! We'll use a smaller version of the image we're slicing up with a green

tone to show you what we're doing and how the columns and rows will be used.
http://www.slicingguide.com/lesson6.htmlhttp://www.slicingguide.com/lesson6.htmlhttp://www.slicingguide.com/lesson6.htmlhttp://www.slicingguide.com/lesson6b.htmlhttp://www.slicingguide.com/lesson6b.htmlhttp://www.slicingguide.com/lesson6b.htmlhttp://www.slicingguide.com/lesson6c.htmlhttp://www.slicingguide.com/lesson6c.htmlhttp://www.slicingguide.com/lesson6c.htmlhttp://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.slicingguide.com/layouttut/dxscreens007.gifhttp://www.pixel2life.com/tutorials/DreamWeaver/All/http://www.slicingguide.com/lesson6c.htmlhttp://www.slicingguide.com/lesson6b.htmlhttp://www.slicingguide.com/lesson6.html


21/26

Fig 6b.1 - First we created a single table 790 pixels wide and set the page length to 100%. This

table is referred to as thePrimary Table:


22/26

Fig 6b.2 - We then split that table into 3 columns, and assigned each column a width in pixels:


23/26


24/26

Fig 6b.3 - And finally, we added a second row to the table to create a top and bottom row:


25/26


26/26

That wasn't too bad now was it? Now hopefully at this point you can now see some of the basic

structuring we're doing to bring our layout together. Like I mentioned at the very beginning, we go at

this slowly and piece everything one step at a time just like a jigsaw puzzle. OurPrimary Table is just

about done. Move on toLesson 6cto set some final cell alignments and a final recap and we're all set!
http://www.slicingguide.com/lesson6c.htmlhttp://www.slicingguide.com/lesson6c.htmlhttp://www.slicingguide.com/lesson6c.htmlhttp://www.slicingguide.com/lesson6c.html

Slicing Guide

Documents

Transcript of Slicing Guide