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 Window Pull down menu Remote Info

Establish FTP site Choose FTP from Pull Down Menu

FTP Window - version 4

FTP - MX Version FTP 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 Objects Properties Launcher

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 replaces the 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 site Local 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 layers In 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 draw an area which will appear empty - you will fill it in With 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 table Go 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.