- - Dreamweaver Tutorials, Web Design- -

For those who are not familiar with the application this tutorial will cover most of the Dreamweaver things we will be using through the following tutorials. Giving you a better understanding as to where everything is located making it easier to follow along.

The web site we are about to create will be a CSS liquid layout, most if not all web developers go down this route as it gives us a lot more control over our site. This tutorial will explain the basics and concepts of div-tags and how we define them through CSS.

Defining a local foot folder is paramount when creating web site, this folder is where anything and everything to do with our site will be stored. Within this folder is where we store all Images related to our site and all other html files. This is the first step in web design.

We continue with the design and development of our site.  Here we create the wrapper where everything within our site will be housed. Moving on from this we will place our header graphic that we created in Adobe Photoshop.

In this tutorial we place div's into our site to house our header, navigation bar, body area and footer. We will define the behaviour of our div tags using CSS rule definition. This will give us a good understanding of our site construction as we lay the foundations.

Up to now we have been creating our html files, now we will begin the process of linking all our pages together. After the linking process we will preview our work in the browser to test our links. Everything is starting to come together and our site is really tacking shape.

Now we have finished creating our basic index.html page, we will now use this page as a template that we can use through our site and apply to all our blank html files we linked up in the previous tutorial. This template will act as the raw page for any further pages we add through our site.

A favicon is a usefully addition to any web site, this icon will appear next to your web site name whenever someone bookmarks your site. It will also be housed in the address bar whenever your site is being viewed. This Icon just adds that little bit of professionalism to your site.

Keywords are of an importance but do not over saturate with any names, think from the visitors point and what they are looking for. Be sure to watch the optimizing your site tutorial. All this plays a part toward your search engine page rank.

As we have been going through these tutorials i have been demonstrating optimization Techniques in everything we have been doing. To Optimize your site is so Important, at least if you want your site to rank; then these next few tutorials are a must watch. Where we will demonstrate effective techniques and meta keyword structure.

HTML validation gives you three options, cut and paste, upload your file or type in your web address, this then scans your file or site and reports back a list of any errors or warnings in your HTML coding. Hacing a error free web site plays a significant roll toward your search engine page rank.

HTML Tidy is similar to the last validation tutorial, however this service dose not only report back any warnings it also provides a free HTML Tidy, it basically cleans up your file for you. A very good idea if you have a lot of errors as you don't need to fix them manually. All part of optimizing our site.

Finally we are here, all those weeks or months of work, now you are about to upload for the World to see our work. In this tutorial we will upload our site to the Web through Dreamweaver's FTP, whick we access through the site manager.

In this tutorial we will submit our website to the most popular search engines, Google, Yahoo, and Ping MSN & Alexia. This is an important step toward getting your site listed on the search engine, to enable people to find you.  

Every website should have a contact page so your visitor can interact with you, whether it is to ask a question or to forward feedback.  Be sure to watch the following tutorials on PHP scripting, this houses your email address and is required for this contact form.

When a message is sent the contact page contacts this php script, its here all our Email details are stored and we tell the Scrip exactly how we want the message to appear and to where we want it sent {your personal email account}

In this tutorial we will cover the validation of the form; this will tell the visitor if they have incorrectly filed out a field and that they have entered a valid Email address.   This method will stop spam and will ensure you get the details to enable you to reply.

In this tutorial we will demonstrate how to link to a specific part of the same page, or to a specific location on another page.  This comes in very useful when you have a page with a lot of content you can offer a link back to the top of the page.

In this tutorial we will embed our own video file, we will also demonstrate how to embed a video file from a third party like you tube, viddler or meta cafe. Here we will be embeding a wmv file but the process is the same for flash and quick time.

We will cover how to apply for an Ad Sense account, how to generate an ad unit creating subtle colors to make the unit blend into our website. Then apply that unit to our website.
AdSense Information.

A spry collapsible panel is a very useful tool when looking to save room and space within your website.  You may have some Information or links you want to offer but do not want on display, this is the purpose of the collapsible panel.

After watching this dreamweaver tutorial you will have a better understanding of Div tags. In this Dreamweaver tutorial we will play around with Div tags to give you a better understanding of the Div Tag and its relationship with CSS. We will show different methods used to enter div tags, through the common toolbar and we will also show it using the hand coding method.

Handy Image Mapper. Slice up an Image to make links from selected parts of that Image. A simple guide instructing the process of image mapping using a free program.

Tables can be very tricky, they are very east to create in Dreamweaver; however when it comes to pasting data from other source things can get pretty messy, the contradiction of code rules out the good old cut and paste. So Dreamweaver has incorporated an excellent feature that allows up to import spreadsheets directly from Excel and Works.

Some people have reported their host provider does not support PHP Script for your Contact page. We can achieve this another way, By creating this simple mailto link, so when the visitor clicks on the Contact us or Email us link there default Email will launch with your Email address already entered in the send to field.

Sometimes we have more links than the width of our navigation will allow, this is where the spry function comes in. This allows us to create sub menus that drop down from the links visible in our navigation area. This really helps us organise our links into categories at the same time keeping our content neat and tidy.

In this tutorial we will work with both ID divs and Class divs and differentiate the difference between the two. Class divs can be called upon thought your site, whereas ID divs are best used on a singular location.