Home
Home - www.slicingguide.com
Home Home Contact Us Add to Favorites

LESSON SECTIONS

Lesson 1 - Introduction to the Slicing Guide
Lesson 2 - Developing Your Slicing Strategy
Lesson 3 - Setting the Stage
Lesson 4 - Preparing the HTML Document
Lesson 5 - Main Tables and Images
Lesson 6a - Setting up the Borders
Lesson 6b - Lesson Recap With Basic Diagrams
Lesson 6c - Setting the Final Alignments
Lesson 7a - Slicing and Coding the Header Banner
Lesson 7b - Slicing and Coding the Header Nav Menu
Lesson 8 - Slicing and Coding the Main Menu
Lesson 9 - Creating an Ad Banner Box Area
Lesson 10 - Slicing and Coding the Member Login Menu
Lesson 11a - Basic Content Box Tables and Measurements
Lesson 11b - Slice and Code the Small Content Column
Lesson 11c - Slice and Code the Main Content Column
Lesson 12 - Slice and Code the Footer
Lesson 13 - Finishing Touches
Lesson 14 - Final Notes and Support
Support :
Our Banner:
Welcome to SlicingGuide.com

Welcome to SlicingGuide.com, the online tutorial written by Dan (Faken) of Pixel2life.com. This tutorial is designed to teach you how to slice a complex website layout using Corel Photopaint and Macromedia Dreamweaver. You can use any 2D graphic application such as Photoshop if you do not use Photopaint.

In order to properly slice a website, I HIGHLY recommend that you do so completely by hand rather than use a quick slicing tool such as Fireworks. These programs often generate a sliced layout that looks great until it comes time for those content boxes to start stretching.

[ Previous Lesson ] [ Next Lesson ]

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:

Website Layout Slicing!

 

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

Website Layout Slicing!

 

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

Website Layout Slicing!

 

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!

[ Previous Lesson ] [ Next Lesson ]