Getting Started with DreamWeaver

Dreamweaver is a web editor that allows you to:

  • Create a site
  • Create Cascading Style Sheets (CSS) to store the styles used in your pages
  • Create templates allowing you to manage your CSS
  • Import a wide range of media e.g. Flash animations & graphics created in Photoshop
  • Manage your site
  • Publish your site to a Web Server

Dreamweaver is a program that many learn to use badly, in so doing you make your own life a lot harder.

The intention of this guide is to give you a global view of the program and explain how you can make your life much simpler by being aware of some important features of the program.

Prior to starting the Dreamweaver application, there are three things that you need to have in place.

  • The creative brief
  • An idea for the site including its look and feel
  • Decide on a Navigation Model
  • How will users get around the site?
  • Create a paper based design
  • Plan out your design
  • Create your “Wireframe”
  • Used as a quick and effective means of testing the navigation of the site

The Creative Brief

So the first question is what shall we make our site about?

For this example we are going to create a site to document our comic book version of the closing scenes of King Kong. The creative brief is covered in greater detail elsewhere, so we shall press on to considering the navigation model.

The Navigation Model

The navigation model helps us to think about the kind of structure the site will have. Navigation models are not holy law, they are there to help you think about the way your pages link together. You may opt for a pure version of the navigation model or a mixture of more than one.

Hub and Spoke Navigation Model

For this site we are going to follow something close to the hub and spoke model.

Paper Based Design

The next stage is to draw out a paper based design for our site.

A little thought at this stage makes using Dreamweaver a lot easier.

We are going to go with the following layout for the site.

Notice something that we have discovered in planning out the site on paper.

In the design of the site, we can see that there is repetition across pages in our design. We will come back to this in a moment.

Starting Dreamweaver

The program should be available from the start menu.

On the first run of the program, it may ask you if you are a designer or a developer. For this work you are a designer.

The nice thing about Dreamweaver is that it does a lot of work for you. However, to do this you need to know some simple pointers to make it do this.

For example, if you move or rename a page in your web site, Dreamweaver will automatically change all pages with a link to that page.

The first task is to set up in Dreamweaver what is called a “site”. A site is the collection of pages and files related to your work for a single project.

To create a site click on the main menu and select Site – Manage Sites

This will open the site manager.

In the site manager select New – Site.

To create the site you will need to specify two things

You will need to give the site a name and you will need to specify a working directory for the site.

In this example I am creating the wire frame for my King Kong site so the following seems appropriate:

Your new site will be listed in the site manager…

Click “Done” to return to the program.

You should now see the directory structure to the right of the program…

Creating a Template

Templates are an important tool in Dreamweaver for maintaining a consistent layout across our pages, managing a large site and managing our styles.

To create a template select file – new.

In the next screen select “HTML template” and select <none> for layout. (If you want to try out the pre prepared templates that’s fine, however in this example we want to build one from scratch.)

Make sure the template is set to HTML 5 then click create to make the blank template.

You should see a blank template like so...

Creating and Attaching your External Style Sheet

Templates are a useful tool in helping us manage our Cascading Style Sheet (CSS) in Dreamweaver.

In designing a web site it is important to split the content from the styling of the site.

In the following example we see a web page with the following layout...

The text of the site is stored in one file (HTML 5) and the layout of the site is stored in a separate file (CSS).

If we connect the site to a new CSS we keep all of the content but apply a new layout.

If we delete the style sheet we are able to see the unformatted content.

In order to finish setting up the template we need to attach to it an external style sheet.

Creating the External CSS

In Dreamweaver select File – New

In the next screen locate CSS

And press create.

Even though we have not used the CSS the first thing we shall do is save it to our site.

Select file and save as...

And save the CSS with a suitable name...

You may now close the CSS as the Template will manage the contents of the file for you.

Linking the CSS and Template

Now that we have a CSS we need to link it to the CSS.

Right click on the template and select CSS Styles – Attach Style Sheet

You should see the following screen...

Browse to your newly created CSS and select it...

If you get the following message simply press OK...

And then OK on the final screen.

If all has gone to plan you should see your style sheet in the styles window and the site manager...

Now that we have our template linked to the CSS we may start to think about the layout of the site.

Cast your mind back to when we did our paper based design!

We noted that in the design there are certain elements that are common to each page. The sections that are the same for each page are highlighted in pink. The sections that change per page are highlighted in green.

Header, Footer, Nav and Article

Now that we have our template created and the external CSS linked we may now set about marking up the document.

We will use four HTML 5 tags to do this

  • header
  • footer
  • nav
  • article

Modify the body for the HTML template like so…

Now that we have marked up the template we may now create some styles in the CSS to apply the formatting for the sections.

Create the following styles in your external CSS

@charset "utf-8";

/* CSS Document */

header

{

background-color: #600;

height: 10%;

position: relative;

width: 33%;

top: 0%;

left: 33%;

}

footer

{

background-color: #600;

height: 10%;

position: relative;

width: 33%;

top: 90%;

left: 33%;

}

nav

{

background-color: #FF5050;

position: relative;

width: 60%;

height: 10%;

top: 10%;

left: 20%;

}

article

{

background-color: #CC66FF;

position: relative;

width: 60%;

top:20%;

left: 20%;

height: 70%;

}

Now view the template in design view to see how it looks.

(Not pretty but it will encourage you to sort out your own colour scheme!)

Editable Regions

So far the layout we have created is specific to the template. This means that when we make web pages from this template we will not be able to modify any of these elements.

In order to allow us to edit the pages we create from the template we need to add one or more editable regions to our template.

Click inside the section called “article” and select Insert – Template Objects – Editable Region

You will be asked for a name for the editable region, call it articletext...

You should see the following…

You may want to tidy this up a bit by removing “Text goes here” and removing the text articletext.

Saving Your Template

The next step is to save the template. Dreamweaver can be a bit fussy as to how you do this.

It is best to select file – close...

Dreamweaver will ask you if you want to save the template, the answer is yes...

In this case save it as mytemplate.dwt...

Once you have saved the template notice that the program has created a folder without asking you called templates!

This is one of the ways that Dreamweaver helps to manage your site.

Creating Pages from the Template

Now we have a template, we can use it to create the pages for our site.

Templates in Dreamweaver come under the category of Assets.

To view the template click on the assets tab and click on the templates icon.

To create a new web page from the template, right click on the template and select “new from template”...

This will create a new web page using the formatting from our template.

Notice that only the area designated by the editable region may be edited in the page.

Let’s add some text to our new page. Change the word article in the editable region to the following...

And save the page as index.html

Using the same procedure we may set up the remaining pages....

  • Sitemap.html
  • Documentation.html
  • Mediaproduct.html
  • Background.html

You should end up with the following…

Why Templates are so Useful

There are a number of big advantages of using templates.

  1. It makes creating a consistent layout to your pages so much simpler

By having the layout to your pages specified in one place you simply make pages based on this layout

  1. If your template is an HTML 5 page, all of the pages that use it will be

Validating your pages as HTML 5 is a requirement for the four assignments

  1. Any changes you make to your template will be passed on to all of the pages that use it!

Linking the Pages

One thing we are yet to do is link the pages to each other. We could do this on each individual page (and sometimes this is a good idea) or we could link the pages once in the template and the pages inherit the changes from the parent.

Close all of the open pages and open the template file. Inside the sectionmarked up as “nav” modify it like so...

Highlight the word Home.

At the bottom of the Dreamweaver interface locate the properties window and the section for link...

Notice the target to the right of the drop down box...

Using the mouse drag the target to the page in the site called index.html...

This will create the link for that part of the navigation.

Do the same for the other parts of the navigation.

If we now close and save the template we should see the following message…

What the program is about to do is modify all of the pages which use the template with the changes we have just made, click Update and wait while it makes the changes.

If you now open one of the HTML pages you will see that it has inherited the changes made to the template…

This system becomes of real benefit in a large site and saves you having to make the same change over and over to individual pages.

Redefining the body Tag

The second sort of style we shall look at is re defining a tag.

HTML is made up of formatting commands called tags, e.g. a typical document might look like this when we view the raw HTML…

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Untitled Document</title>

</head>

<body>

</body>

</html>

The words in braces are the tags, e.g. <body>

By re defining a tag, we may specify formatting that will occur whenever that tag appears in the document. One useful tag to re define is the body tag.

With the template page open, right click on the document and create a new style…

This time on the next form specify the following…

For tag enter body, make sure that tag is selected, not class and also note that the changes will be saved to our external style sheet

You should see the following screen…

This time click on the section marked background…

… and select a background colour of your choice…

Press OK and the page’s background colour should change accordingly…

Close and save the template and your linked pages should be updated.

The Wire Frame

What we have created here is a simple wire frame model of the site.

A wire frame contains little in terms of site content however what it does do is demonstrate how the site will be navigated.

We may now show this wire frame to our client and see if they like it without having spent lots of time creating pretty content.

Using apDivs

apDivs are a simple tool for creating the layout of our page.

To create an apDiv select Insert – Layout Objects – AP Div

What you will see on the template is the following...

If you click on the blue line you will see handles allowing you to drag and position the div.

Before we decide on its size and position we must make sure that we name it.

Right click on the blue line and select ID...

Give this apDiv the name Container...

Now position it as this will be use to hold the layout for the page...

Parents and Children

One important point to notice is that a div has a parent and may also have children.

The parent of the div we have created above is the page.

If we click inside the apDiv and create a new div like so...

We will create a div that is the child of the container div. This child will inherit any attributes applied to the parent.

Give this new apDiv the ID “header” and position it with the following text like so...

Making sure that you click inside the container div (not the header div) create new divs called “nav” and another called “article” like so...