3. Building layout #2

In this tutorial we going to build layout for navigation.

Next we are going to create a navigation Div Tag, so click on Insert Div Tag, when box pops-up in the (a)Insert: choose After Tag in drop down arrow, then in box to the right choose (b)<div id="top_banner"> from drop down arrow, next in the (c) ID: text box type in Navigaion and hit OK.

Next click in the Navigation box with text if not clicked already and then clcik on New CSS Rule button. When New CSS Rule box pops-up in the Selector Type: choose (a)Advanced, and in (b)Define in: choose layout.css, then hick OK.

Then CSS Rule Definition box pops-up, then in Category choose Box and in Width: type in 130 pixels, and in Height: type in 30 pixels, then choose the background color, (I chose yellow) and hit OK.

Next in the (a)Navigation Div Tag, delete the text and type in Home, you should similar to what I have in picture below.

Next we going the create 2 more exact Div Tags boxes, click on Insert Div Tag and in the (a)Insert: choose After Tag then in the box to the right choose (b)<div id="Navigation">, then in (c)ID: type in Navigation2, then hit OK.

Then create New CSS Rule make sure it has the same sattings as Navigation, (you can find it on the top of this page) then hit OK. When box pops-up, in the Category choose Box, then in Width: type in 130 and in Height: 30, just like we did in Navigation Div Tag, choose backgorund color, (I choose yellow) and hit OK. Earase the text and type in Home2.

Next we going to create exact Div Tag as we did for Navigation, and Navigation2. So click on Insert Div Tag, then in Insert: choose After tag, then box to the right choose <div id="Navigation2">, then in ID: type in Navigation3, then hit OK.

Next clcik on New CSS Rule, when box pops-up make sure setting are same as Navigation, and Navigation 2, then click OK. When box pops-up in the Category choose Box then in Width: tyepe in 130 then in Height: 30, then choose background color, (I chose light blue), then hit OK.

Next Insert Div Tag, when box pops-up in the (a)Insert: choose After tag, then in the box to the right choose (b)<div id="Navigation3">, then in (c)ID: type in Navigation4, and hit OK.

Next click on create New CSS Rule for Navigation4, and in Selector Type: select Advanced and in Define in: select layout.css, and hit OK.

When box pops-up in the Category choose Box then in Width: type in 410 pixels, then in Height: type in 30. Then change background color, (I chose blue) then hit OK, next delete the text and type in Home 4.

You should now have similar to what I have in the picture below.

In the CSS Styles view, you also should have similar to what I have in the picture below.

And thats the end of Building laybout #2 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