How to Code a Website Layout

Save

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.

Things You'll Need

  • Graphic editing program
  • Word processing program
  • Internet access
  • Website directory
  • 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.

  • 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.

  • 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.

  • 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.

  • 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.

  • 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.

Tips & Warnings

  • 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.

References

  • Photo Credit Thomas Northcut/Photodisc/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

  • How to Create Columns with CSS Float

    Many Web designers like to take advantage of the CSS float property to create pages that have two or more columns. Columns...

  • How to Make a DIV Layout

    The division (DIV) tag provides Hyper-Text Markup Language (HTML) developers with containers that set the layout for a website template. Using DIV...

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!