![Page 1: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/1.jpg)
Introduction to Dreamweaver
![Page 2: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/2.jpg)
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)
![Page 3: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/3.jpg)
Create a new HTML page:
File>New Document> >HTML , Click Create button
![Page 4: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/4.jpg)
Workspace
Choose a workspace … upper right corner>Beginner From now on:
Then click Reset “Beginner”
![Page 5: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/5.jpg)
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?
![Page 6: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/6.jpg)
Result
Here is what DW created for us:
![Page 7: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/8.jpg)
….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
![Page 9: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/9.jpg)
Bars
Document MenuSouthside bar
![Page 10: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/10.jpg)
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 11: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/11.jpg)
Page Properties
Give your page a title
![Page 12: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/12.jpg)
The HTML
![Page 13: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/13.jpg)
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:
![Page 14: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/14.jpg)
Panel Management
Showing missing panels Panel tabs Properties panel Panels as icons Panel Menus
![Page 15: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/15.jpg)
Document bar…again
View>Toolbars>Document and Standard
![Page 16: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/16.jpg)
Text
Most formatted via CSS: Window>CSS Designer…we won’t ! Also, some limited formatting via dropdowns Select the text you entered
![Page 17: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/17.jpg)
Text Example Select your text Use Format dropdown
Select the text
Format here
Or apply a class
or
![Page 18: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/18.jpg)
Images and Property PanelInsert>Image
![Page 19: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/19.jpg)
Inserting
Insertig Images…just saw Video Tables forms Can use the insert menu OR Insert panel
![Page 20: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/20.jpg)
Insert menu
![Page 21: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/21.jpg)
Insert panel:
![Page 22: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/22.jpg)
Insert table
![Page 23: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/23.jpg)
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:
![Page 24: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/24.jpg)
Want to put three files:
…then use up-arrow
![Page 25: 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](https://reader036.vdocuments.site/reader036/viewer/2022062311/5a4d1b897f8b9ab0599be0de/html5/thumbnails/25.jpg)
Up arrow