Now let us open up index.html, which as you recall was totally blank before and I will show you another way of placing objects on to a page.
This time, we are going to use an object called the Layout Grid. It is found in the basic set of objects over here in the Objects Palette and it is the first object in the set of objects. Simply double click or click and drag to place one on to the page. In this case, I will double click. Once the grid is on the page, we just click and drag any of the little blue handles to resize the grid. Now, this might be a good time for me to bring your attention back to the Inspector Palette because you will notice that with the Layout Grid selected on the page. The Inspector Palette now reads Layout Grid in the lower left corner. That is because it is context sensitive. So, whatever object I have selected on my page or in my site window, it is going to be reflected down here in the lower left corner of the Inspector Palette.
If I prefer instead of dragging, I can simply type in the width that I would like my object to be. So I will type in 580 pixels which is the exact size that I want my grid to be. Notice, you can also change the grid size. So instead of 16x16, we will make this 8x8 and notice that the grid has changed to update accordingly. I can change the background color of the grid just as I could on the layer. But, instead of just clicking into the color to open the Color Palette up, I can click on this little tiny triangle in the lower right corner. Instead, I can get a list of swatches from which we can choose. So, I am going to choose my favorite which is VisiBone 2. It is a great palette that is laid up specifically for web work. Now, I am going to select a color from this swatch palette and it is applied instantly to the background of the grid.
