Adobe Dreamweaver CS3 - Build a Website (Page 2)

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 < br > 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 < br > 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 < br > 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 < blockquote > 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!

Dreamweaver CS3 Online Training from Total Training

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!

Marrut Software Training Tutorials

Marrutt Software Training Tutorials provides you with a cheaper alternative to Total Training package. They use VTC software training CDs, which are used by Adobe Systems (Europe) Ltd, Ford Motor Co Ltd, Ministry of Defence and nearly all the universities and colleges in the UK. Marrutt also provides free software demos of all products online. You can view the first 3 chapters of each product within the demo. You will be able to see the quality of the product before you purchase it. An example of an online free demo can be found here Marrut Adobe Dreamweaver CS3 Online Demos.

If you would like something that is a bit more contemporary, why not settle down and read a good book. This Adobe Dreamweaver CS3 is written by the Adobe Creative Team. It provides great information for learning the ins and outs of the program. If you have the mindset to read attentively, I personally recommend this book.