| Adobe GoLive CS2 Tutorials | Web Effects |

One of the best features in Adobe GoLive CS2 is the addition of the CSS Layout Grid. This useful tool replaces table based design, and cleans and streamlines your code. In this tutorial I will attempt to explain the most common funtions of this amazing tool.

Through the use of CSS Layout Grids, one gains a more consise cotrol over thier web page. Once a CSS Layout Grid is on a page, any other object can then be dragged and dropped into the grid and then moved to any place in that grid with 100% accuracy. Infact this site is made up of only CSS Layout Grids(3 grids actually, one at the top, one large one in the middle, and one more at the bottom).

Lets start this tutorial off by opening a new HTML page, and then locating your objects window, selecting basic objects, and then drag and drop a CSS Layout Grid into your page while in Layout view. What you will see is the above image. Notice the default CSS layout grid size is 200px by 200px and the grid is seperated into 16px by 16px boxes.

If you select your CSS Layout grid, and then navigate to your Inspector Window, you will see the above. The rest of this tutorial will explain what each of these commands can will do.

Width - Set the width of your layout box. This sites width is set to 700 pixels

Height - Set the height of your layout box. This particular pages height setting are top - 228 pixels, middle - 2440 pixels, bottom - 72 pixels

Horizontal - This command will set the horizontal grid properties

Vertical - This command will set the vertical grid properties.
*I would like to say for the record, that the smaller your grid boxes, the greater control you have on object placement, since the grid is automatically set to a 16 x 16 grid, some may think that is the best way to have it, but I always set my grid to 2 x 2 so to have more precise control over my objects locations.

Align - Choose the Alignment of your Layout Grid in relation to the users browser - Default (usually left justified) Left Justified, Center, and Right Justified.

Color - You may wish to set a background color for your CSS Layout Grid, this command will allow you to do just that

Image - Or you may wish to have an image as the background in your Layout Grid, this would be the way to do it, just click the check box and then use the folder icon to browse for the location of the image you would like to use. (make sure that the path that you tell GoLive CS2 to find your image, is the same path that your server will use.)

I Almost forgot
Optimize - Click this button if you wish the layout box to optimize itself around the object that it contains. (I never use this, becomes a pain, you'll see).
Well Thats its... See you next time. As always, if you would like some more help, just e-mail me at contact@technologytutorials.org

Content and Images Copyright of ISDProductions.com 2006. All Rights Reserved.
Design 2.1

Didn't find what you we're looking for? Ask Dr. Zoidberg

Add Music, Video's and more to your MySpace www.DesignYourMySpace.com Design Your MySpace

	Web www.TechnologyTutorials.org