Introduction to Dreamweaver

What is it?

An Adobe program to graphically create and manage Web sites. It often referred to as a GUI---Graphical User Interface application,

Gooey!

or a WYSIWYG editor (What You See is What You Get) aka a drag and drop application

Start up Dreamweaver ( under Adobe)

Create a new HTML page:

File>New Document> >HTML , Click Create button

Workspace

Choose a workspace … upper right corner>Beginner From now on:

Then click Reset “Beginner”

Type anything. “My Dreamweaver page”

Look at the View menu, four choices: Look at results of each

Save as MyFirst Dwpage.htm .in JMA260/Dreamweaver

Q: Flash or pub? Q: Why no spaces in name?

Result

Here is what DW created for us:

Bars

Show/hide Document toolbar: View>Toolbars

Choose/hide Document toolbar Same for Standard

Menu Bar...like most Windows menu bars I’ll go over in class

….menu bar

The usual file menu, new, close, save (close all and save all may be

something new to you) File>Preview in Browser (F12) shows what your page will look like

when you render it. Click F12 now Instead, select File> Preview in browser…you choose which browser

Bars

Document MenuSouthside bar

Page Properties

Open/select Properties panel: Window>Properties

Switch to Design workspace Click Page Properties

• In the window that opens, enter a page value, spaces here are OK

Page Properties

Give your page a title

The HTML

Panels

All adobe products have panels on the right, and most have a toolbox on the left: DW is no exception

Panels sometimes have multiple tabs:

Panel Management

Showing missing panels Panel tabs Properties panel Panels as icons Panel Menus

Document bar…again

View>Toolbars>Document and Standard

Text

Most formatted via CSS: Window>CSS Designer…we won’t ! Also, some limited formatting via dropdowns Select the text you entered

Text Example Select your text Use Format dropdown

Select the text

Format here

Or apply a class

or

Images and Property PanelInsert>Image

Inserting

Insertig Images…just saw Video Tables forms Can use the insert menu OR Insert panel

Insert menu

Insert panel:

Insert table

File Management (Document bar)• Can’t test this until we define a DW site• Two arrows: Use up arrow to send (put) the page you’re working on up to server

Note: You can also FTP (put and get) from the Files panel (F8)You would select the file(s) to put, then click up arrow:

Want to put three files:

…then use up-arrow

Up arrow