Adobe Dreamweaver CS3 - CSS Configuration

After the inclusion of the website building tutorial, I deemed it necessary to go into further detail with the configuration of Cascading Style Sheets (CSS). CSS is a great language that enables you to organize the infrastructure of your website. No more frames and bulky mess clogging up your web pages. It is hard enough trying to figure out where to change something. Why do you need your infrastructure taking up valuable space as well? This tutorial will help you learn the ins and outs of the CSS language so that you can use its strengths to lessen your weaknesses. This will not go over the complete the webpage building process but will show you exactly how the CSS is constructed and how it will look in Adobe Dreamweaver CS3 after its completion. With no further interruptions, let’s start the tutorial.

This first illustration shows the basic look of the CSS sheet. I have personally added the HTML Styles, Header Styles, Layout Divisions, and Section Links myself. That is my general formula for writing a CSS document for a website.

The first addition we will make is the body division. The body division is the entire outside edge of the website. Everything else will be within it! Adobe Dreamweaver CS3 will show you how this is implemented near the end of this tutorial. I have selected the color (000033). This color is one of the closest colors to pure black. I don’t like to use complete black in my web pages because I don’t make things with high contrast.

The illustration below shows that the margin around the body division will be marked to zero pixels. The margin shows how the division will be spaced when it is next to other tables or division. Fortunately, the body division will only have things inside of it. So having the margin tag in the body is useless, but I wanted to show and explain it nonetheless.

The next illustration shows the padding tag. The padding tag controls the how stuff within the division tag is shown. You can make text and pictures start top, left, right, and bottom according to how you use the padding.

Now we will add the height and width. I have used the following settings because they are the standard for the screen resolution size 1024x768. This is now the new normal resolution that most people have and expect to see.

The last tag on the body division is the background image. This is a simple way to apply an image to the background of the division tag.

The next section of divisions will deal with the header styles that you can have for your website. I usually do about 5 of them just to make sure I cover all the bases. You can always come back later to make changes.

The first of the header styles is the H1 tag. This tag is used as the biggest header on a webpage or document. However, with CSS you can make it smaller than the rest if you would like.

Now we will put in the font and the color of the header. I will set it to be bold so that it stands out. I will use 100% as my max size so that it is easy to scale down the rest of the headers. I use the standard font series (sans-serif) for most stuff, unless I am doing something specific like that 50th anniversary invitations I did for my family. The color is the normal #000033 that I explained earlier in the body division. If I left color blank it would default to this because it is in the child level of the pyramid structure of the CSS document.

I have added the margin and the padding to these headers but they have no relevance as of now. If you wanted to use them it would be very easy. Say your headers start in the default left and top position. You can use the margin to move that default left and top position as you chose. You can also do the same with the padding that will move the text from the default top and right position by the number of pixels you state it will. Remember that padding is used to space things within a cell. Margin is use to space different cells away from each other.

Now we can add the rest of the tags. The H2 tag will have 90% text size. It will make it 10% smaller than the H1 tag. You can make as many heading tags and sizes as you need.

The one thing most people don’t do is set a paragraph size. Most of the time they just let their body division tag text size be the font size. I have many more uses for font sizes so I tend to write them in the

tag. I usually use the < blockquote > tag around them in the HTML to keep them in a nice square. I like to keep the size just above the smallest readable font. This way it doesn’t make the other headers and links look insignificant.

Now we will wonder the wonderful area of Layout Divisions. Trust it is not as scary as it seems. Adobe Dreamweaver CS3 makes the process very easy for you. It gives you hints and tries to help you fill in the dots once you have decided what attributes you might add. The meaty part of the CSS pretty much lies in this area. The skeleton of the CSS document holds its shoulders on the structure that you build in this section. It is best to have this section as concrete as possible that it is easy to approximate issues you may have when trying to get things just right on the web page.

The first division in these sections will the Header division. This will hold the space for the top of your website, which usually has an image or the title of your website. The first tag within this division the position tag. This will control how it interacts with the rest of the website divisions. In the Build a Website tutorial an example of how that makes things change can be found.

The second tag is the top tag. This controls how far away the top of the division will be from the outer border of the webpage. The outer border as of now is controlled by the Body division tag. This division tag is below it in the pyramid structure and must adhere to its boundaries accordingly.

The third tag is the left tag. This tag allows you to alter the distance the division is from the left side of the outer border of the webpage.

The fourth tag is the right tag. This tag allows you to alter the distance the division is from the right side of the outer border of the webpage.

The fifth tag is the width tag. This tag determines the width of the division you constructing. This should be well known to you already.

The sixth tag is the height tag. This tag determines the height of the division you are constructing. This should be well known to you already.

The second division in this section is the Navigation division. This division will house the links that you will use to navigate through your website. You can change the inner workings of this through CSS or HTML to your desire. I try to do most of it through CSS to keep things clean so I can make constant changes when I need too.

Dreamweaver CSS Configuration - Page 2