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 in Dreamweaver! Ok, so Angelina didnt propose to me, but Im sure if she knew 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 using Corel Photopaint version 11! Sorry guys, you know me and my love/hate relationship with Photoshop. Now having said that, you should be able to do EVERYTHING I do in this tutorial with Corel in 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 in Dreamweaver MX using 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 to Pixel2life Studios. You steal, you will be pursued in a legal manner. POINT 4. You should know the basics to follow this tutorial. In Corel Photopaint, you should understand the basics of Masking and creating new objects from clipboard items. In Dreamweaver, 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!

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 use Fireworks or some other tool to slice this, but heres the big difference: When you slice with Fireworks, your content boxes are set to specific sizes and wont stretch without messing up the rest of the site. Once were done slicing, the content boxes will be able to stretch 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 HOW youre 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 main content 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 a PSD? 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 exact JPG image seen in Lesson 1.

So after developing my strategy, heres how Im visualizing the layout in my head. In Fig 2.1, I have reduced the layout image as shown in Fig 1.1 in Lesson 1 to 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 in Dreamweaver, these green Box Areas are the essential tables and cells I will have to create. 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:

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 keep track 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:

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.html file in Dreamweaver and the layout.jpg file in Corel Photopaint and 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 before you 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 in Dreamweaver, RightClick on the blank page and click Properties. This will allow us to change the general properties of the template page. Fig 4.1 - Opening the Page Properties in Dreamweaver:

STEP B. The Page Properties dialogue box will open and from there, you can select the general attributes 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. Click OK to 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!

Lesson 5- Main Tables and Images Just a note before we go any further. Never slice 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 between Dreamweaver and Photopaint. STEP A. The first thing we need to do is figure out how wide the layout is going to be. In Photopaint, 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 on Image > Resample and looking at the current dimensions (make sure youre using pixels for your unit of measure). Fig 5.1 - Opening the Resample Tool to view document dimensions:

Fig 5.2 - Using the Resample Tool to view document dimensions:

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 in Dreamweaver. Switch over to Dreamweaver and click the Insert Table button. Fig 5.3 - Click on the Insert 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):

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:

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

Your site's Primary Table is now complete, and we can move on to setting our Primary Background!

STEP D. Time to add the table's main background image! Switch over to Photopaint and 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 the Rectangle Mask Tool (Hit 'R'). Click and hold where you want the 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-C to copy the masked area to clipboard and then Ctrl-Shift-N to paste the object as a new document. 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):

STEP E. Go back to Dreamweaver and your main table should still be selected. In the properties box, click on Background Image Browse button to select the new background image we created: Fig 5.11 - Select the Background Image Browse button (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:

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 like HERE! 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.

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 into Photopaint and 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):

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:

Fig 6a.5 - The Primary Table has now been split into 3 columns:

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.

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 - Your Primary Table is split into 3 columns with proper width sizes set:

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 our Primary 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:

Fig 6a.11 - The Primary 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 the Primary 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 in Lesson 6a! Move on to Lesson 6b for 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 to Lesson 6c!

Lesson 6b - Lesson Recap With Basic Diagrams We've just completed a lot of steps in Dreamweaver to create our Primary 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.

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 the Primary Table:

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

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

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. Our Primary Table is just about done. Move on to Lesson 6c to set some final cell alignments and a final recap and we're all set!