- - 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.
dreamweaver basic tutorial navigating the dash interface control pannel

 

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.
div tags and CSS explained dreamweaver tutorial

 

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.
dreamweaver tutorials create define a site root local folder

 

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.
dreamweaver tutorial building our website

 

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.
dreamweaver tutorial inserting div tags and CSS definition

 

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.
dreamweaver tutorial linking our pages

 

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.
dreamweaver create a template tutorial

 

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.
insert a favicon into dreamweaver tutorial

 

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.
adding meta keywords in dreamweaver tutorial

 

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.
dreamweaver tutorial optimise our site

 

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.
dreamweaver html validation tutorial

 

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.
dreamweaver html tidy tutorial

 

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.
dreamweaver tutorial upload our site to the web via ftp logo

 

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.  
submit website

 

Other Dreamweaver Tutorials



 

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.
contact_form tutorial

 

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}
scripting tutorial

 

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.
contact page form validation

 

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.
create an anchor dreamweaver tutorial

 

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.
embed a video file dreamweaver tutorial

 

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.
Google Ad Sense tutorial link

 

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.
collapsible spry pannel tutorial link

 

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.
floating div tags dreamweaver tutorial cs4

 

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.
image mapper dreamweaver tutorial

 

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.
import an excel spreadsheet table to dreamweaver tutorial

 

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.
adobe dreamweaver tutorial, create a mail to contact link

 

 

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.
spry drop down menu dreamweaver cs4

 

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.