Web Layout Tutorial

[avatar.alex]

In this tutorial we are going to make a simle CSS/HTML layout. Using Tables and Div Layers.
First we are going to start out with a normal basic HTML Web Layout.
```



```
Above is a simple HTML Web Page. We are going to turn that into a full layout. Now we are going to create a
table. The tag for table is and to add a row is and to add a cullom its ...

Ok for the CSS part we are going to make it kinda fansy. since the class is header we are going to make a
CSS part right under footer section like so

```
...
.header {
  padding:4px;
  background:#D9EBEB;
  border:1px solid #8BA8AF;
  alignment: center;
  width: 200px;
  height: 15px;
  font-size: 12px;
}

```
ok now there are a couple new things I added to this class. First is the padding. What padding does is it creates a space between the content and the div layer aka the header. I already covered background, now its on to the border. The border is pretty self explainitory, its the border around the div. now theres 2 ways you can create CSS elements one is merge it all together like above or seaperate it like:

```
...
.header {
  padding:4px;
  background:#D9EBEB;
  border:1px;
  border-style: solid;
  border-color: #8BA8AF;
  alignment: center;
  width: 200px;
  height: 15px;
  font-size: 12px;
}

```
Merging it all together would makes it a lot easier. Alignment just aligns the div where it needs to be. width is how wide you want the div. Height is the height of the div and the font size is how big the text is.  Now adding the CSS to the HTML document. Ok create a new file and past the CSS in it without the opening  and closing tags () save thefile as style.css and change the "Save Type"  as all types. Then put this in the header of your layout.

This pulls the CSS from the .css file and displays it on your page. But im going to show the result so far, just
using the style tags in the layout

```



```

| . The width=500px
defines the width of the table. I like to add inbetween where im going to put the information, little notes
so I know what to put in that cullom or row!

```



Banner
|

Navigation
|

Content
|

footer
|

```
Now we are going to create a simple banner for the top. Just create something thats 500px wide.
Like:

I'm going to use the image above as the top banner of the layout. After creating you top image
replace Banner with your image. Make sure the image URL is put in image tags
```
[img]IMAGE[/img]
```
```
....
After you got the image on the top of the layout we are going to start on the CSS part.
There are two ways we can create a CSS style sheet. One is link it to the HTML Doc or put it in the HTML Doc
Ill show both ways.

First way to put it in the HTML Doc would be to but the
and the second way is to pull the CSS Style sheet from a file like so.
```



```
Ill explain how to put the CSS in the style.css file later.

Lets start and use the first way as an example.

Now we are going to change the body of the page. This could include. The background, text color/image.<– Which
im going to use.

so start out with the style tags
```
...
```
In between where the 3 dots are is where all the CSS goes. Start with the body.
```
body { }
```
The {} after the body is what all the information goes in to change the way you want the page to look. lets add
a background color. You can find color codes here:
[http://html-color-codes.com/](http://html-color-codes.com/)

That will change the background color. Now we can move on to the text color.

We could also change the background color to a background image.

```
body {
  background: url('IMAGE URL');
  color: #ffffff;
}
```
now back to the HTML document.
Next we are going to add div layers and set classes to those div layers.

```



```

[img]http://i14.photobucket.com/albums/a332/siko65/ss-1.jpg[/img]
|

[img]http://i14.photobucket.com/albums/a332/siko65/ss-1.jpg[/img]
|

Navigation
|

Content
|

footer
|

```
Now back to the style sheet.

OK now the periods before the nav, con, and footer kinda in a way point out the classes from the HTML Document.
Now letts add a header in the content section. All we are going to do is make a div layer in a div layer like:

```
...
``` |
| HeaderContent |

| [img]http://i14.photobucket.com/albums/a332/siko65/ss-1.jpg[/img] |
| Navigation |
| HeaderContent |
| footer |

One last thing the links!

OK now we are going to work on the links. The link code looks like:

```
[url]LINK TEXT[/url]
```
Lets work on the CSS part or it.
@echoecho.com:

> A:link
> Defines the style for normal unvisited links.
>
> A:visited
> Defines the style for visited links.
>
> A:active
> Defines the style for active links.
> A link becomes active once you click on it.
>
> A:hover
> Defines the style for hovered links.
> A link is hovered when the mouse moves over it.
> Note: Not supported by Netscape browsers prior to version 6.

Ok add this under the header part in the CSS file or style tags.

```
A:link {
  text-decoration: none;
  color: #000000;
}
A:visited {
  text-decoration: none;
  color: #000000;
}
A:active {
  text-decoration: none;
  color: #000000;
}
A:hover {
  text-decoration: underline;
  color: #6699FF;
}
```

And add the link code to the nave part of the layout and your done the Finnal Product looks like:

```



[img]http://i14.photobucket.com/albums/a332/siko65/ss-1.jpg[/img]
|

[url]Link[/url]|[url]Link[/url]|[url]Link[/url]|[url]Link[/url]

|

Header

Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text,

|

Layout created by YOUR NAME!!
|

```
Then your done!!!!
**If you get stuck ill help you out. I tried to explain everything as clearly as I could!!! GOOD LUCK!**