1. Introduction to Dreamweaver

2. 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)

3. Create a new HTML page:  File>New Document> >HTML,  Click Create button

4. Workspace  Choose a workspace … upper right corner>Beginner  From now on:  Then click Reset “Beginner”

5. 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?

6. Result  Here is what DW created for us:

7. 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

8. ….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

9. Bars  Document  Menu Southside bar

10. 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

11. Page Properties  Give your page a title

12. The HTML

13. 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:

14. Panel Management  Showing missing panels  Panel tabs  Properties panel  Panels as icons  Panel Menus

15. Document bar…again View>Toolbars>Document and Standard

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

17. Text Example  Select your text  Use Format dropdown Select the text Format here Or apply a class or

18. Images and Property Panel Insert>Image

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

20. Insert menu

21. Insert panel:

22. Insert table

23. 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:

24. Want to put three files: …then use up-arrow

25. Up arrow