CSS Template Tutorials - Coding the Basics

The part of the tutorial will code the very basic things. It will use CSS to define the main holding div and style the text and links for the template. CSS code must be added between <style> and </style> in head section of webpage.

Setting up page properties

For the I use the dreamweaver input fields. For the rest of the coding process I usually type myself. To set up the properties open up your index.html file and click page properties button under the properties area at the bottom.

Once you click the button a window should appear with numerous options and input fields. The first thing to fill in is the font for the text on the design and the background. I used the following details for the tutorial template:

The design which the tutorial is for is going to have a fixed 800px width in the center of the page with a dark colour as a background. In the psd the middle content background isn’t 800px wide but that doesn’t really matter because we will be changing things when we code. For your template put the very background colour in the background colour field. You can get colours using the tool inside photoshop or use colour to html.

Setting up the basic page links

With the properties window still open click the links tab on the left. You can put the colours and setting which you want for the links on your webpage here. This is not the navigation link eg the top menu or right side menu on the tutorial design. This is a simple link such as the colour to html one just above. For the example I put the colour as #BA8F38 and hide underline on rollover.

Setting up the centered content wrapper div

This is a div which will hold the site contents and will be in the center of the page. To do this go to code mode in dreamweaver and change your body coding (pink is the css) to:

body {
background-color: #26221B;
text-align:center;
margin:0;
}


For the css coding for the wrapper div put the following:

.wrapper {
background-color: #F4EDDF;
margin:0 auto;
width:800px;
text-align:left;
}

You can change the background colour and width to suit your design but for the tutorial example this is the parameters which will be used. If I make a design fixed width (a px width instead of %) I always make it 800px. A common screen resolution on old browsers is 800×600. If the width was greater than 800px then people would have to scroll which is very annoying.

You now need to create a div tag with the class wrapper. That means the div will take on the attributes defined for wrapper. To do so scroll down in the code mode and type between the <body> and </body> tags the following:

<div class="wrapper"></div>

Further explanation for those new to CSS and XHTML can be found below.

Very basic css explanation

.wrapper is the name for the attribute. So will be used for a wrapper attribute. The period in front of the name makes it a class. I will be doing all classes for the tutorial to make things easier.

The curly brackets open and close the definition for the attribute. You can definite what the wrapper class will be like by typing different lines of css attributes within the curly brackets.

Background color and margin and css attributes which you can define different values for. The value for the attribute is typed after a colon. Each attribute and value should be written on separate lines to make it easier to read and must have a semi colon at the end of it.

What makes the wrapper div centered?

The coding which is causing the wrapper div to be centered is a combinaton of (must have both) the margin:0 auto in the wrapper attributes and the text- align:center in the body coding.

What does the XHTML mean?

The snippet is the basic code for a div (basically a holder/container) with all the attributes assigned to the class wrapper. A basic div tag is written:

<div></div>

The <div> opens up the container and the

<div class="classname"></div>

You will notice, you don’t include the period before the name when you are typing it in XHTML. So .wrapper is just class="wrapper".

You should now have a basic understanding of the way XHTML and CSS works and should have set up your font styling and links for the template.You should also have a div tags which is set width and centered on the page. If you go to design mode you should see something like:

t4

It doesn’t look like much but you should have a think strip of colour 800px wide and centered at the top of the page. Now when you add content inside the wrapper div that colour will expand down the page as the content does.

Step 3- Slicing and Coding the Header

Comments Posted

  1. [...] Parts: 1-1- Step 2- Coding the basics 1-2- Step 3- Slicing and Coding the Header 1-3- Step 4- CSS Horizontal Navigation 1-4- Step 5- [...]



Leave a Comment

Affiliates

toggle

Recent Comments

toggle

Top CSS Templates

toggle
Templates - CSS Top Sites

UK Web Hosting