Dreamweaver An introduction to Dreamweaver by

a beginner who can show you the rudiments of quickly and easily creating a web site.

An attempt to offer an alternative to Frontpage (especially for Mac users) and for those who want a different approach.

A Warning There is only one way to learn

Dreamweaver: set yourself a project and work on it.

If you are a confirmed FrontPage user – don’t switch. Enjoy.

If you are not: proceed.

What this will do: This is not an inclusive overview of

Dreamweaver The purpose is to get you started

and show you that you too can learn this easy program on your own.

What is the difference Dreamweaver is an FTP program

You will not workdirectly on the server as does FrontPage

You will have a local file on your computer and send it to the school server (FTP)

Macromedia is not Microsoft It supports macs as well as pcs

What is the difference Code is reliable and respected Layout is easier and more flexible More designers are moving to

Dreamweaver

What is FTP? FTP is file transfer protocol

This means that you keep a site on your local computer and when you make changes you ‘send’ them to the the server site.

You must have the Dreamweaver program on your local computer in order to work on your website.

What is FTP? FTP is file transfer protocol

You must establish a server site to which you will send your local site. It is that site that students access. (Sam Baynes will give you your access; you will need the site name, the ‘docroot’ and a user name and password).

Even without a site, you can create a website (not published) in your own local file.

So its not Microsoft? This is important if you use Macs or if

you find Microsoft programs unreliable. Whereas FrontPage will not be

upgraded for Mac Users, Dreamweaver is the program of choice for Mac (and many pc) users and continues to be updated for both platforms.

Current programs in Dreamweaver:4 and MX

The code is what? Reliable. Many programmers

prefer the web authoring provided by Dreamweaver to that of Frontpage because they feel it is ‘cleaner’ and translates more reliably to the internet.

The code is what? (continued) Browser compatibility issues can

be handled automatically in Dreamweaver

Layout is flexible? Yes – you can place things

anywhere on a page and then set that layout. You will not be limited to working through table layouts as you are in FrontPage.

So how do I begin The biggest hurdle is the

establishment of a “site” or local root site.

Establish a folder on your desktop Name it (whatever) Open Dreamweaver

And now…

Let’s start To start, establish your local site.. Then we will create a homepage

and several linking pages. On the homepage we will put in

text, a picture and two linking pages.

New Site Window

Begin…. Go to menu bar and open ‘sites.’ Go to ‘new site.’ You will name your local folder and

establish your local site. You may choose to establish your

FTP site at this time or wait.

Local Site Name your site(avoid spaces in file

names) Decide where you wish your “root

folder,” the folder which will house your site, to reside.

Create that local root folder and name it

On your new site window, browse for the name of your folder and click on it.

Check ‘enable cache’ box

Local site setup

Local info

Browse for folder - click here

Name site

Enable cache

Next…. If you wish to set up your FTP

remote site - the site to which you will post your local site - you can do that now.

Remote Site WindowPull down menu

Remote Info

Establish FTP site

Choose FTP from Pull Down Menu

FTP Window - version 4

FTP - MX VersionFTP Host

Choose Passsive Format

Field Information Once you have filled in these fields

you have established your site: FTP Host: northonline.sccd.ctc.edu Host directory: /docroot/northonline/

(name of site) Login - use your login name Password - use password given to you Check “Use passive FTP”

Now to begin…. Look at your menu headings

Under window make sure that objects, properties and launcher are checked and that each of these windows are visible on your screen.

On MX- the objects window is under the insert menu

Window Menu-version 4

Menu at top of screen

ObjectsPropertiesLauncher

Objects Insert - MX Version

The object window The object

window allows you to click on a variety of applications: Insert picture Tables Layers and more

Dreamweaver MX-Objects

In MX- this replacesthe object box. Find under “insert” menu.

Properties window

The properties window allows you to click to alter text and to make links. This window expands by clicking the lower right arrow.

Text editor

Links

Launcher window-version 4

This window allows you to open other windows in the application. The ‘site’ icon will show a list all the files you are using on your local and remote site.

Site icon

The site window (file view) The site window

allows you to view and move all of your local folders and files. It will automatically update links.

Local site files-right side

Full site window view-Dreamweaver 4

Remote siteLocal Site

Connecting to remote site Put files on remote site

File view in MX

The icons in the MX version differ slightly from Dreamweaver 4.

Connect Window- MX Version

Connect Icon

To start: go to the menu bar and click NEW under File.This will give you a brand, untitled document page.You may type in text here and add a picture if you wish.

Let’s add both text and a picture and make arrange them in a layout that you find interesting. To do this: go to the objects window

and click on layersIn the MX version there you can go to menu items: Insert and click on layer.In Windows- open panel groups will show all control panels - some people prefer clean pages on which to design and want panels closed.

You will now be able to use your cursor to drawan area which will appear empty - you will fill it inWith text or insert a picture later.Draw two such areas anywhere on your page.

Drawing Layers

Layers This is what your page might look like. The

darker rectangle is the ‘active’ layer.

Text in Layer When you click on this

box, you have the ability to alter its size or to move it anywhere on the page.

When you click in it, you can add text.

Click and insert text and format it however you wish.

Your layer now has text in it.

WYSIWYG

This stands for ‘What you see is what you get’ Dreamweaver allows you to format your page as you would a word-processed page and it converts it to HTML(HyperText Markup Language) behind the scenes for you.

Altering text

By highlighting your text and going to the ‘color box’ in the properties window, you can select any color you wish.

Layers

The layer box itself can also be moved. Click on it and move the

mouse until you see a ‘hand.’

That ‘hand’ grabs the box and allows you to move it wherever you wish on the page

Next Layer Go to the second

layer you have created

Click to make it active

Go to objects window and click on Insert Picture

Use menu in MX

To insert picture…. You will see a

browse path which allows you to find the file from which you wish to choose the picture.

Find the source Click

Insert Picture Once you have

located the source, click choose and the picture is inserted in the layer (box).

You may move this box anywhere on the page you wish by using the mouse and ‘hand.’

Picture insert property box

Notice that when a picture is inserted, the property box changes.

You can label the picture for ADA requirements, align it, or link it.

labelName of image

align

Stabilize the layout

After you have placed your two boxes (layers)wherever you want them, you must make sure they do not move when they appear through the viewer’s browser.Do this by creating a tableGo to the menu bar and choose “modify”

Layout Mode

Find the ‘layout mode’

MX Version: conversion

Go to the upper Menus and choose Modify•Under the Modify Option choose Convert•Choose ‘convert layers to table’

Converting to Table - version 4

Click on Convert layers to table

Now it’s a table

By converting the layers to a table, Dreamweaver has stabilized the text and picture. It will not move in the browser.

Congratulations

Now you have your first completed page!

Links are next Making a link with Dreamweaver is

very easy. First you must have the page to

which you want to make the link.You cannot link to a page you will create. It must already exist.

Start a new page and save it to your site.

Links to pages in your website Go to the properties box and click

on the file folder icon next to links. You will see a screen which will let

you browse your local site to find the file you wish to link to.

Choose it(click ‘open’) and the link is complete.

Save your page.

Adding links

To find the file for your link from your site. Click on the folder icon next to ‘Link.”

Adding links The files from

your site will now be available to you.

When you find the right file , click open.

The link is now made.

Outside Links To make a link to a page outside

your site, go to the properties box and type in the URL or ‘http’ you wish to use.

When you close the box, the link is made

Outside links

Type your URL here

Links

•Links can be assigned to any text or image on your page.•Link targets can be any file in your site,or any file outside your site. •After you have entered your http address, press enter and the text is linked. •Don’t forget to save you page.

THESE ARE THE BASICS There is far more to Dreamweaver

than this - but this is the basic start If you like Dreamweaver, but do not

wish to purchase it without trying it on your own, download a trial version for free at the macromedia.com website

Your trial version will work for 30 days.