How to Code a Website Layout

by Angela Neal
Choppy media playback can hinder your experience.

Choppy media playback can hinder your experience.

You can pay someone good money to design a great layout for your website, or you can learn how to do it yourself and save all that cash! A nice clean, professional web layout doesn't have to be graphic-intense or complicated. If you take the time to learn how to code a website layout, you will also be richer in the sense that you would have some valuable knowledge that any webmaster would want. There are programs that make it easier to code a web layout, but you can also do it by hand without too much difficulty.

1

Use Adobe Photoshop or Microsoft Paint to choose the exact colors you want to use. Creating a visual mock-up will save you the trouble of trial and error when you are doing the actual coding and designing. Look at other website layouts that you like for inspiration.

2

Use the rectangle shape in your graphic editing program and draw a rectangle that is 900 pixels wide and at least 600 pixels high. This will be the "container" that will hold all of the other elements of your layout. When you code the layout you will be able to center this container in the middle of the screen or keep it over at the left.

3

Draw a horizontal rectangle that spans from one end of the inside of the container to the other. This rectangle represents your header. Draw a column under the header, at least 150 pixels wide, with the rectangle tool. This will represent your sidebar. Draw another, larger column next to it, which will represent your main content element. The widths of these two columns plus any extra space between them should add up to the width of the container. Draw another horizontal rectangle under the two vertical ones to represent the footer.

4

Open your word processing program. Open a blank document and write this code:

<html> <head> <title>The Title of the web page</title> </head> <body> </body> </html>

Save the document with a .HTML or .PHP file extension and upload it to your website's directory.

5

Write this code in between the <body> and </body> tags:

<div class="container"> <div class="header"> Your Masthead or Title </div> <div class="sidebar"> Side bar info and main menu. </div> <div class="content"> The main content. </div> <div class="footer"> Footer information. </div> </div>

Each of your rectangles represent the "divs" or separate elements of the layout.

6

Use a .CSS (Cascading Style Sheet) file to design each element and assign to them their dimensions. Refer to Resource 1 as a guide to coding a .CSS file. Use the "eye dropper" or color picker tool in the graphic editor to get the hexadecimal color codes you used in your mock-up. When you have coded your .CSS file, upload it to your web site's directory. Put this code somewhere between the <head> and </head> tags of the page you made.

<link rel="stylesheet" type="text/css" href="yourstylesheet.css" />

Put the file name of your .CSS file between the last set of quotes. This bit of code will "call" the .CSS file and give your layout the style.

Tip

  • check If you want to bypass all of the code writing, follow the link in Reference 2 and download a free layout template to tinker with and customize.

Items you will need

About the Author

Angela Neal is a writer for various websites, specializing in published articles ranging from the categories of art and design to beauty and DIY fashion. Neal received her Associate of Arts in administrative assisting from Bohecker College.

Photo Credits

  • photo_camera Thomas Northcut/Photodisc/Getty Images