2. Building layout #1

First we going to do is insert a Div Tag, so click on (a)Insert Div Tag button in the top left corner. Then Insert Div Tag dialog box pops-up, in the (b)Insert: tag we going to choose (c)At insertion point from the drop down arrow, in the (d)ID: text box we going to name it (e)website_wrap then hit (f)Ok.

So we just created a ractangle with text in it saying (a)Content for id "website_wrap" Goes Here, so click in that text box if not clicked already.

Now we are going to add CSS Rule to that, so click on the (a)New CSS Rule button, and (b)New CSS Rule dialog box pops-up, in the (c)Selector Type: choose (d)Advanced, then in (e)Define in: choose (f)layout.css. As you can see in the (g)Selector: text box it's automatically puts in our Div Tag name which is (h)#website_wrap then click OK.

(So basicly when you click in any Div Tag that is created, then creating New CSS Rule for it will put in automatically the name of that Div Tag in the Selector: text box.)

Now CSS Rule Defenition dialog box pops-up, in the (a)Category choose (b)Box, then in (c)Width: text box we going to type in 800 pixels, and in the (d)Height: text box type in 1000 pixels. Next in the (e)Margin section on the (f)Right: and Left: text box click on drop down arrow and choose auto.

(this will center our website_wrap Div Tag)

Next in the Category choose (a)Border, (make sure the (b)Same for all box is unchecked in Style, Width, and Color section) and in the Style section for the (c)Right: and Left: click on drop down arrow and choose solid, next in the (d)Width on Right: and Left: type in 1 pixel, and if you want you can add a color to that border in the (e)Color section. (So basicaly we added left and right border to our website_wrap Div Tag)

Next in the Category choose (a)Background and in the (b)Background color: choose any color you want, I shose white, and then hit (c)OK. (This will be our background color for website_wrap Div Tag) Don't forget to Save All.

So anytime you want to go back and make changes to #website_wrap just double lcik it in the (a)CSS Styles in the top right corner.

Now delete the text in the #website_wrap Div Tag, and then click on (a)Insert Div Tag. Insert Div Tag box pops-up and in the (b)Insert: on the drop down arrow choose After start of tag, then box to the right in the drop down arrow choose (c)<div id="website_wrap">, next in the (d)ID: text box type in top_banner then hit OK. (So basicaly we create a Div Tag called top_banner in the #website_wrap Div Tag)

Next delete the text in top_banner Div Tag and click on New CSS Rule.

(Every Div Tag should have a CSS Rule, so every time we create a Div Tag we will create New CSS Rule for it).

When CSS Rule Definition box pops-up, in the Category choose (a)Box, then in (b)Width: type in 800 pixels and in (c)Height: type in 100 pixels, then in the Category choose (d)Background and choose any Background color: in my case I chose red, then hit OK.

(So basically we just create a Banner Div Tag inside the website_wrap, so I would recommend for each Div Tag we create, choose a background color so we can easily tell when it starts and ends).

Now you should have similar to what I have in this picture.

And thats the end of Building laybout tutorial.
For next tutorial click here.

Building a Website Tutorials:

1. Setting up the website

2. Building layout #1

3. Building layout #2

4. Building layout #3

5. Creating Banner

6. Rollover Buttons