layout is essentially divided into three sections: 1. Header 2. Main Content 3. Footer 15 Coding The HTML You’ll find that most sites will have a simi

We will be converting this exact design to a complete HTML / CSS
website! When viewing such a design, we must begin to mentally
format our layout from an HTML point of view. After a bit of
observation, you might imagine the following layout:

layout is essentially divided into three sections:

1. Header

2. Main Content

3. Footer

15 Coding The HTML

You’ll find that most sites will have a similar structure. Some might

have a few more columns, but in general, you’ll always find these

three components.

Creating the Basic Shell

Now that we’ve visualized our

design from a coder’s point of

view, let’s create the basic HTML

formatting.

We begin by creating a “container”

division. That way, if necessary,

we can position our entire website

simply by altering one div.

...stuff

Next, add a few more divisions. Ignoring the specifics and focusing

solely on the wrapping elements, let’s add our three components:

header content goes here

main body goes here

footer info goes here

TIP

!

Web Developer Extension for Firefox

https://addons.mozilla.org/en-US/firefox/addon/60

This nifty extension will allow you to edit your CSS inside of the

browser, disable JS, apply rulers, validate the HTML and CSS, to

name a few. It’s an essential tool that nearly all developers have

installed. You should as well.

IE Tester

http://www.my-debugbar.com/wiki/IETester/HomePage

Unfortunately, even after a decade, we must still compensate for

older browsers – namely Internet Explorer 6 – when converting

designs. Most likely, you’ll have IE7 or IE8 installed though. In order

to preview your designs in this browser, one option – if on the PC –

is IE Tester. It allows you to view any site in IE5 – IE8.

BrowserShots.org

http://browsershots.org/

If you work on a Mac (or need to test in a larger variety of

browsers), a second option is to use a site called Browsershots, to

take a snapshot of your design in all of the browsers.

VMWare Fusion

http://www.vmware.com/products/fusion/

Especially in the design world, Mac users are quickly becoming

the majority. Though Browsershots is definitely helpful, sometimes