Diseño Gráfico

Creating a CSS layout from scratch


1. Introduction

Note: This tutorial assumes you have a basic knowledge of how to use CSS, but only have a very basic understanding of how it works. If you have NEVER used CSS before, you will want to start with the w3schools introduction to CSS.
This guide will attempt to take you step by step, through the process of creating a fully functioning CSSlayout. I will try my best to explain the concepts behind each step, but a lot of the time other people have already covered these things better than I can. Because of this there will sometimes be links to more information on external sites.
Note: Please use a modern browser such as Opera, Firefox, or Safari for this exercise. Don't worry though, your site should work in IE at the end of it.


2.The Design

Below is the design we will be using as the basis of this tutorial. Our mission is to slice this puppy up using nothing but XHTML, CSS, and a few images:
[pic]

First we need to identify the main structural elements of the design, so that we know how to structure our HTML document.
The web is very heavily based around rectangles, and we need to remember that when dividing up ourdesign. These main divisions we make will end up being tags. A is basically a rectangular container that we can position using CSS.
The diagram below shows how we will divide the design.
[pic]

We have identified 5 major elements:
• Main Navigation
The primary navigation for this website. The images will change on hover (when the mouse cursor is on top of it).
Width:760px
Height: 50px

• Header
The website header includes a background image (purely for aesthetics), and the company name.
Width: 760px
Height: 150px

• Content
The bulk of the website's content will go here.
Width: 480px
Height: Changes depending on content

• Sidebar
This will have second-tier content that isn't as importantas the main content.
Width: 280px
Height: Changes depending on content

• Footer
Copyright information, credits, and an alternative text navigation.
Width: 760px
Height: 66px
This site will also be centered in the browser window. We now have all the info we need to start.

3. Default HTML Template

I have created a basic HTML document that I use as astarting point for all my websites. If you do not understand what a paticular line of code means, hold your mouse over that line for an explaination.
Copy the template and paste it into your HTML editor of choice. (Mine is Macromedia Homesite).




CompanyName - PageName










@import "css/master.css";






Save this as index.html in your websites root (htdocs)directory.
The structure of your website directories should be like so:
[pic]

4. Setting the canvas

As you'll notice in the design, everything on our page is 760px wide or less, and nothing floats outside that width. What we are going to do is create a container for our page that is 760px wide, and centered in the middle of the page. Our 5 main elements will be placed inside thiscontainer.
Between the tags, create a with an id="page-container" attribute:



Hello world.



Note: code snippets will be provided throughout this tutorial, code from previous steps will be blue, and new code you need to add will be green.
And thats all the HTML we need for our container. Onto the CSS.
Create a new blank text file, and save it as master.css in the /css/ directory.
Create anew rule in the stylesheet to select the page-container:
#page-container {

}
The # in front of the id tells the browser that we are selecting an id. For a class we would use a . instead eg: .page-container {}.
An id is a unique identifier that we use for things that are only going to occur once on the page. So for headers, footers, navigation, etc we use id's, and for any reccuring...