We look at how to transform a Web page using traditional Website Building Tools into a CSS-based site. This isn’t the first attempt in this space to try to recreate a Web page using CSS. The goal of transferring the page to a CSS layout is to get rid of any HTML that’s used for presentational purposes in order to achieve the layout. Most Web layouts use HTML tables for layout purposes and spacer GIFs for spacing and positioning of elements on the Web page. We will be using CSS to replace the JavaScript in the JavaScript rollovers on this page.

Look at the layout of a web page. Most Web page layouts has header, columns, and footer. In the header is the logo and tagline, as well as some site navigation including a link to the search and sitemap pages. Then, there are columns where the links for the main content material rests. After that, its the footer with the usual copyright notice, a link to the top and a standard ad banner.

The first goal in making such a page is to focus on the major browsers like the recent versions of Netscape, Mozilla and Internet Explorer. To achieve that goal, the first step in converting a site from more conventional web design methods is to strip out the content out of the HTML tables, delete the spacers and start with a clean slate. By making a clean break from the past working methods, you cut out any potential problems that could throw a monkey wrench into the new CSS-based design.

This stripping down allows you to strategically plan the CSS layout styles. While it’s a good idea to plan ahead, most of the time that’s simply not possible. In order to meet deadlines, planning time gets cut, or a site simply evolves past its original design. The content of the site is then forced into a layout that goes against contemporary practices. Hopefully with this CSS revolution, web builders will be able to go back through their sites and actually rebuild and not just redesign their sites to manage any new modifications that have been made since their initial build.

After stripping the page down to its bare bones, you may want to divide the page into sections. There are some basic divisions already in a webpage: Header, columns, and footer. You will build off of these divisions, creating a structure that associates specific CSS rules to those sections. The actual divisions for creating such a page can be:

Header
Site

Navigation
Left Column
Right Column
Footer

So, the initial HTML markup will have these building blocks: Before stylizing the header, generate the HTML markup for it: Now, mark out the background and type colors with the simple CSS rule that follows. This rule creates the thin black line that separates it from the five top links, which you will get to later.

#header {
background-color: #000;
color: #000;
border-bottom: 1px solid

#000;
}

Now, bring in the logo and add the tagline. As you can see in the markup, were using text and not the graphic of the logo. The logo is actually brought in through the background of the H1 element like so:

#header h1 a {
background-image: url

(images/header.gif);
background-repeat: no-repeat;
display: block;
height:

85px;
font-size: 0!important;
text-align: right;
float: left;
width: 350px !important;
}

For H1, set the size of the font. It does not matter which unit you use. How browsers render this varies – some browsers may choose to disregard such an outlandish request and just present the text as being small or barely legible. On the other hand, browsers might actually not display the text at all”like you would hope. Either way, the text is also black and aligned to the right meaning that it will blend into the black background. No one should be the wiser that there iss actually text there. You can build a separate style sheet for each content section. Each style sheet would carry the color theme and appropriately colored graphics. So, the actual style of the images would not be hard coded as an image into the HTML file of each page. Rather, its in a purple.css or faq.css that is linked in the head of each section document. So, if there is ever a re-design that requires a new header image, its a simple matter of editing one line in a given section file rather than updating many HTML files. And if you align the text, it ends up exactly where it needs to be. Use a couple font styling rules and you are done:

#header .slogan {
margin: 0;
padding:

0;
text-align: right;
color: #fff;
font-size: 12px;
white-space: nowrap;
}

After styling headers, you reach navigation links. Putting the links into a list just makes sense: they are a set of unordered items. However, they also display vertically whereas the Web page layout maybe laid out horizontally. To get that effect, you can use the float property in the list item CSS rule: #navsite ul li { margin: 0 3% 0 0; font-size: 12px; width: 10%; float: left; } Raise the ColumnsNow, youll style the columns. Youll want to put the navigation links for the current issue to the right.The original layout uses 125 pixels for this column. However, for this contemporary method precise measurements arent always the best choice. So, Id use percentages. In this case, the width ofthe right-hand column is 15% of the browsers viewport width.#navish {background-color: #000;position: absolute;left: 85%;width: 15%;z-index: 3;color: #000;font-size: 12px;padding: 0;}You can now shrink the content portion of the page by 15%. Do this by manipulating the right sideof the margin to a width of 15%:#content {margin: 0 15% 0 0;padding: 0 0 5% 0;color: #000;background-color: #fff;}

Use Easy Web Site Builder Tools if do not want to learn HTML.