Home - www.slicingguide.com

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.
Before Getting Started

Before you start learning to slice a complex website layout, you should have a basic knowledge of using Dreamweaver (I will be using Dreamweaver MX) and a graphics program (I use Corel Photopaint v.11) that allows you to perform Masking actions and a few other basic functions. This is a COMPLEX layout, so you do need a basic working knowledge to follow along.

Navigating this Website Slicing tutorial site is fairly simple and has been designed for simplicity rather than eye-candy so you can easily surf around and not get lost. Simply use the "Lesson" index on the left-hand side of the website to jump to the desired section, or read through the entire site one lesson section at a time. For the moment, only 1 complete slicing lesson is available, however more may be created in the future.

One last note: I apologize in advance to the folks on 56K! This site has minimal graphics in the layout, but has HUNDREDS of screenshots. The total size of this tutorial when counting the size of the pages and images is over 60MB! I've used thumbnails as much as possible, but it'll still be slow going for anyone not on highspeed.

Questions? If you have any questions or comments on this site, you can contact me from my P2L Profile Page. Support is also available in the Official Support Forum.

 
Lesson Sections
 
Lesson 1 - Introduction to the Slicing Guide
Setting some ground rules and what you need to have and know to understand this tutorial.
 
Lesson 3 - Setting the Stage
Create the necessary files and folders before you open any programs and start slicing.
 
Lesson 5 - Main Tables and Images
Start off by creating the Primary Table and Primary Background Image.
 
Lesson 6b - Lesson Recap with Basic Diagrams
A brief and simple look at the table formatting performed at this point.
 
Lesson 7a - Slicing and Coding the Header Banner
We start the image slicing and template coding by tackling the main header area!
 
Lesson 8 - Slicing and Coding the Main Menu
This lesson covers the complete slicing and coding of the main navigation menu buttons!
 
Lesson 10 - Slicing and Coding the Member Login
Slice up the small menu bar that allows users to login or create a new account!
 
Lesson 11b - Slice and Code the Small Content Column
We start off the expanding content box slicing by breaking down the left side of the site!
 
Lesson 12 - Slice and Code the Footer
A very large and detailed lesson runs through how to slice and code a footer section!
 
Lesson 14 - Final Notes and Support
Find out how to get help or leave comments on this tutorial, and find out who's behind this madness!
Lesson 2 - Developing Your Slicing Strategy
Before you open a single program, plan and visual the slicing approach.
 
Lesson 4 - Preparing the HTML Document
Setting up the basic HTML document properties before we being adding our code.
 
Lesson 6a - Setting up the Borders
The first step of modifying the Primary table layout to accommodate the layout borders.
 
Lesson 6c - Setting the Final Alignments
Add the finishing touches to Primary Table by setting the alignments.
 
Lesson 7b - Slicing and Coding the Header Nav
This lesson covers the slicing and coding of the header nav menu portion.
 
Lesson 9 - Creating an Ad Banner Box Area
Our first content box slicing job is a small ad banner area that won't expand like standard content boxes!
 
Lesson 11a - Basic Content Box Tables and Measurements
Before we dive right into coding the content boxes, let's take a few basic measurements and create key tables!
 
Lesson 11c - Slice and Code the Main Content Column
We finish off the content box slicing by coding the main content boxes!
 
Lesson 13 - Finishing Touches
With all the slicing done, learn how to effectively add text to your layout the RIGHT way!
 
 
 
 
 
Home Home Contact Us Add to Favorites Home