Coding a Layout

Step One

This is going to teach you how to create the basic structure of a layout. If you have any questions please feel free to email me [email protected] You will first need to open up some type of text editing program. Note Pad is a standard text program that comes on most computers.

First we will create a text file and name it style.css. This file will contain all the main coding of your layout. Once you’ve created it, you will start adding your coding to it.

We will start of with the body section

• background-color: this is the background color of your website
• background-image: this is the url of your background
• font-family: this is the font for your entire layout, you can change it to any universal fonts (example: verdana, arial, georgia and many more)
• font-size: this determines the size of the font
• font-color: this is the color of the font
• background-repeat: repeat : This means the background image will be repeated.
• background-attachment: fixed : The background is fixed. It will NOT scroll.

The next step is the header. The header is the main image of your layout.

•width: this is the width of your header
•height: this is how tall your header is
•margin: this will center your layout to the middle of the screen .
•background-image: this is your header image, simply replace HEADER IMAGE URL HERE with the link (URL) of the your image.

The next step we will doing is the sidebar. The sidebar is where you put your links, tagboard, affies, etc..

•position absolute: positioning that allows you to literally place any page element exactly where you want it.
•left: This just means your sidebar is on the left
•top: this is the position of your sidebar from top of your screen. Play around with the numbers to set it where you want it to
•width: this is how wide you want your sidebar to be
•padding: This is the area inside the element.
•background-color: This is the background color of the sidebar.

The next step is to create the content section

•clear: this means it will go straight across the content section.
•text-align :this will align your text to the center of the footer area.

Thats the basic part of the style sheet. You can add more coding to the style sheet such as custom headers, blockquotes, links and much more.

Now that your style.css has been created, we are going to move onto the next part of the tutorial. Now you are going to create a new text file and name it header.php

put this on your header.php

•: This is the start of your head tag. This is the area that you will add other coding such as titles, cursors, favicons and more.
•link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen”: This is the code that links to your style.css that you created on the previous page.
•: Is what you need to end the tag.

Now on to the BODY section

This is the body tag which is the start of the body of your website. It is where you will add your header, the side bar, and the start of the content section.

And now the container and header sections

and now the sidebar section

now its time to credit index.php. Copy and paste this on your new file.

Now for the last and step. Create a new text file and name it footer.php Then copy and paste this code below

Congrats! You have finished coding a layout.