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  Menu Southside 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 Panel Insert>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