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

Website Layout Slicing!

 

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

Website Layout Slicing!

Now you’re 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.

[ Previous Lesson ] [ Next Lesson ]