Welcome To BlogerDesign

Now we will start with the development of a Cascading Style Sheet (CSS). CSS is a great language that helps you dynamically create the architecture of a website and integrate web programming like HTML, ASP, PHP, etc to make it complete. You will find that this language will make organization and changing the way your website looks much easier. I personally use it because I can go back into the code and easily see where I need to change things and where I made errors. Using tables and such made the webpage files cumbersome.

After you select the CSS template you will see the default CSS screen.

The first set of information within the CSS document is the configuration for the body of the webpage. The body is the same thing as the <> tag you see in all HTML web pages. In the following illustration, we will add the color, margin, padding, height, and background. The color reference actually refers to the color of the text. The margin is the distance of an area from the outside borders. The padding is the distance of content from the edge of the margin of an area. Padding is like the Styrofoam that is between the box and the package it holds. The background-image reference allows you to add a background of your choosing if you would like it. I choose to use just the default white background.

The next section goes over the header styles. The styles will control how your headers look and feel within your webpage. I have made my headers from H1 to H3. As you can see from the illustration below, I control the font, color, margin, and padding. Within the font you can control whether it is bold, italics, or underlined, the size by point or percentage and the type of font you want to use. The rest of it is just like any other reference for web programming.

If you look at the bottom of the illustration you will see that I added a reference for “p”. This is for the paragraph. I use this if I want to use a different text size than the body text is using. I wouldn’t suggest doing this but sometimes you will find it useful.

Now we will start the previously hard task of making the Layout of your website. Instead we are using CSS and things will be much easier and organized. We will be using things called divisions. Divisions are used to reference the data in the CSS file and correlate it to the html file. This way the HTML file knows what to make on the webpage without having to write all that code on the HTML file. The first we will make is the header division. This will hold the graphic that will display the name of the website for all to see. The position: absolute tag lets the HTML know that this area cannot be manipulated. Top and left show you where you want your content to start from the edge of the higher level division which will be the body tag. The width and height are pretty self-explanatory. We already discussed the background-image tag.

The next division is the body reference tag. This will cover the rest of the area of the webpage below the header. We will have to add the 2 link references and the middle body reference. Those will all reside within the body reference. It can basically be summed up as a pyramid structure of accessibility. This is not totally needed but it helps me organize things better. The position is set to “position: relative”. This makes it adhere to the proportions of content that is written within it. This will come into play once we have a large amount of content in the website that goes below the screen. This works fine in absolute mode as well, but the difference is if you have a division tag that you want to stay at the bottom of the page you will have to make this relative if your webpage is larger than the size of your screen. With a relatively small website, I would try to keep everything at one size and just make extra pages, but had to use these with my expansive tutorials. Nobody wants to click a million links.

This division section is the main body reference. This will be the middle of your content that will hold all the data that you want to add to the webpage. For instance, you could do it like my website and add tutorials and written content. This position tag must also be set to relative because it will be under the division tag that will have the content going past the traditional page size.

Now we can see our first division tag for links, which is the navigation reference. This position is absolute because it will be a predefined area that will not reach farther than the main body reference. Within this section you will be adding links that will enable it to navigate through your website.

The next division tag is the second links division tag, which is the advertisement reference. This section will hold all your ads just like mine holds stuff for Google and programs such as Adobe Dreamweaver, Flash, Fireworks, Illustrator, Indesign, and Photoshop. Maybe in this tutorial I should have added advertisements for build a website, create a website, make your own website, or internet website design. That would help you find this information easier. Oh look, I just did it!

The last division tag is the information reference. This is the one reason why we had to make the division tag for the body reference and make the position set to relative for the content sections. It is just a little strip that goes at the bottom of the screen that helps you know who owns the website and when it was developed. Also you can add links to the bottom so when you have a long webpage the user can easily navigate to another page without scrolling up.

Now we will go to the top of the screen and select (File/New).

Then will navigate and select HTML. On the right you will see that they have happily added layouts predefined for you in Adobe Dreamweaver CS3. These are the old ways of added layouts to your web pages that made them bulky and hard to navigate through. Our new way is clean and thorough. Plus you will learn what is really happening in a website!

Now you can see the new HTML webpage with the default tags already in place for you.

This page of Adobe Dreamweaver CS3 allows you to see a split between code and design. As you can see from the illustration below, I have used the title tag to make a name for my website. This name will be displayed on the top part of the web browser I am using. For this website, I have chosen the name “My Website” since this is a tutorial for my visitors.

Now we will input the code we will use to call the CSS document that controls the layout.

Now we will make our first division visible within the HTML. It is quite easy to do. In the illustration below you can see how easy it is to add them. The first one that is added is the header division.

Below, you can see how we originally made the CSS to display the format in the HTML. We will also use the “background-image” tag to select our header image.

When we go back to the HTML page we can see what the header image looks like when it is being structured by CSS credentials.

Now we can add the body division. You will remember that this division will have lower levels below it. So you will want to do it like you would other coding programs.

Now we will add the division tag for the navigation reference within the division tag for the body reference. This will make the credentials for the navigation reference only work within the boundaries of the body reference.

Now we will add the “background-image” to this portion of the webpage using the CSS document. This is done just like the header.

In the illustration below, you can see that Adobe Dreamweaver CS3 shows only the top part of the navigation image. This is because there is no data cover the other area image. When you put a background image in using CSS it will have the tendency to not show in the HTML if there is not some kind of data covering the amount of area the background uses.

If you put a few break tags <> within the division tag content area you will notice that more of the image becomes viewable.

Now we will add the division tag for the main body reference. This is also within the division tag for the body reference.

You can now proceed to put the background image in the main body reference tag.

You can see that the main body reference is the doing the same thing the navigation reference was doing before you added some content or paragraph structure within it.

When we add a few break tags <> within the content area of the main body reference, we can see that it become more visible as well. You can do your spacing for writing your content on the page by adjusting it like this as well.

You can add the division tag for the advertisements reference within division tag for the body reference now.

You can add the image for the advertisements reference just like the others now.

We have added a few <> tags just to even things off across the board. Of course we can’t just keep it looking like this though. We will have to make some adjustments later.

Now we will add the last division tag for the information reference. This tag can be a pain in the butt for Adobe Dreamweaver CS3 because there is not enough room in the screen to show all the data and that it can only go as far as the data within the body reference. That means it will be floating on the screen until you add some data that takes it below the bottom of your images in the body reference.

You will see that the information reference doesn’t have anything special too it. It is just a skinny division tag at the bottom of your website that will hold a variety of information for the user. The only bad part about using this kind of tag is that it must be at the bottom of the page at all times. This has caused me many headaches on web pages that don’t have much information. To remedy that I would move the division tag for information below the division tag for body reference. You can see how this looks if you go to one of my web pages called ( Contact Us.

Here you can see what the information reference will look like if you don’t move the division tag outside of the division tag for the body reference. Of course that is remedied if you add some content to your webpage that goes beyond the border. If you move the information division tag and then push your content beyond the border your information bar will remain in that spot till you move it back into the division tag for the body reference.

Here is a view of the website in a web browser.

Now we will add a nice paragraph of information with the division tag for the main body reference. Now you will how if an image is not big enough it will be repeated over and over again. Of course there is a remedy for this problem. You only write enough information to fill the image or you could change the image so below the actual image there is empty space.

Now we will add a bunch of links to the division tag for the navigation reference. Now isn’t this starting to look cool.

Now we will add some advertisements to the right side of the webpage within the division tag for the advertisements reference. I have used some captions of the Adobe Creative Suite products.

If you want to see what the rest of the screen looks like after you have made a large amount of empty space below your images that are within the division tag for the body reference, please look at the illustration below. You can see that it is nice and smooth and the text within the main body reference has been centered by using the <> tag, which is a very useful feature.

Here is a screenshot of the web browser showing the website with these changes. Now you can see unlike in the Adobe Dreamweaver CS3 program that the information reference image is now at the bottom of the webpage because of the amount of content that is in the main body reference. These additions were done by adding
tags but you can use any kind of content to accomplish this feat.

Now we will copy that one piece of text over and over again to show you just how that would look in real life. This is easily done in the HTML as you can see from the illustration below.

Now you can see that the webpage is now stretched outside of its boundaries and the information reference image is still at the bottom of the webpage.

Now we can go back into Adobe Dreamweaver CS3 and add some information to the information reference. I basically just did what was already on my website. It is always good to have the year that the company started and then make a text link to your homepage. The user will always be angry if they have to scroll all the way back up to the top of the page to reach the links. In thought of that, I have added the entire navigation link section to the information reference on my website. You can add things to the information bar however you wish.

Now you can see how the website is done after we have added some simple things to it. As for the link images on the left and right, you can show the rest of those by adding more information to them in the form of text or paragraph structure tags like
.

During this tutorial, you were shown how to use CSS to your advantage to decrease the amount of coding necessary within HTML. You were also shown how to implement some of the many features that CSS has available for web development. I hope that this has given you a brief review that will help you begin or continue to grow in your website development. I have kept this tutorial short to not make any of you fall asleep for too long. Adobe Dreamweaver CS3 is a very good application to use if you take the time to learn the ins and outs. All of the Adobe products have usefulness to them in some kind of situation.

I will be updating this tutorial to better suit my audience over time. Your replies are appreciated and will help me better implement my tutorials. In a short period of time I will begin working on an even more thorough explanation of using CSS and HTML. I will begin to add the uses of Javascript and Flash into the tutorial as well. This will be provided for free as always. Stay tuned for updates on the homepage. I will announce the completion of this project when it is complete.

Some of you may be looking for even further guidance or special programs that will help you through every step of the process. I would love to be there standing behind you pointing to everything you need to do, but that is just not feasible….. yet! Below, you can find a couple programs that I highly recommended. I believe even a couple of them may be using Adobe Indesign to supplement their training videos. I know your question already. If I had to pick one to teach me from step A to step Z, which one would I choose? That choice would be “Total Training”. They are the certified partner of Adobe and have solid training for Adobe. If you want to go from a beginner to an Adobe expert this would be the software. However, if you would just like to get a good hold on Adobe Software then the others would do just fine. Have fun learning as I always have!

Total Training provides customers with a Video Training Series that is promoted by a Partnership with Adobe Systems (Worldwide). You can't go wrong with the incredible series of DVD software that this company provides. Total Training provides a one of a kind offer to let you try all of their online products for 2 days with a special guest pass. You will be on your way to being an Adobe expert in no time!