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 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, Right-Click 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:

Website Layout Slicing!

 

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:

Website Layout Slicing!

 

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

Website Layout Slicing!

 

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

[ Previous Lesson ] [ Next Lesson ]