AN Introduction to Dreamweaver basic features. And how menu bar and its windows look like with some shortcuts in a representable manner perfect for students

1. DREAMWEAVER
BY SAHIL BANSAL
BCA 4B(MOARNING)
08217702014

2. 1. Define web design software
2. Start Adobe Dreamweaver CS6
3. View the Dreamweaver workspace
4. Work with views and panels
5. Open a web page
6. Get help
7. View a web page in a browser
8. Close a web page and exit Dreamweaver

3. • What is Adobe Dreamweaver CC?
– A web development tool that lets you create dynamic websites.
• What is a website?
– A group of related web pages that are linked together and share a common interface
and design.
• What does Dreamweaver CC offer?
– Design tools that can create dynamic and interactive web pages without writing
HTML code
– Organizational tools
– Site management tools

4. • Windows
1. Click the Start button on the taskbar
2. Point to All Programs, click Adobe Web Premium CC or Adobe Design
Premium CC, then click Adobe Dreamweaver CC
3. Click HTML in the Create New column on the Dreamweaver Welcome
Screen

5. CREATE
NEW HTML
DOCUMEN
T
Open an
Html
Docume
nt

6. DESIGN MATTERS
• Opening or creating different document types with
Dreamweaver
• HTML
• XML
• CSS
• PHP
• JAVASCRIPT
• TEXT FILES

7. MENU
BAR
TO CREATE A NEW
FILETO OPEN A NEW FILE
WORKSPACE
SWITCHER ACCESS
PANEL

8. DIFFERENT
DOCUMENT
S THAT CAN
BE FORMED
IN
DREAMWEA
VER

10. • The Insert panel (Insert bar) includes eight categories:
– Common
– Layout
– Forms
– Data
– Spry
– In Context Editing
– Text
– Favorites

11. • The Browser Navigation toolbar contains navigation buttons you use
when you are on your Live view.
• Live view displays an open document as if you were viewing it in your
browser.
• The Standard tool contains buttons you can use to execute frequently
used commands.
• The Style Rendering toolbar contains buttons you can use to display
data for different platforms.

12. • The Related toolbar displays the names of any related files.
• Related files are files that are linked to a document and are
necessary for the document to display and function
correctly.
• The Coding toolbar contains buttons you use when working
directly in the code.

13. 1. Click File on the Menu bar, then click Open
2. Click the Look in list arrow (Win) or click the Current
file location list arrow (Mac), navigate to the drive
and folder where your Data Files are stored, then
double-click (Win) or click (Mac) the unit_a folder
3. Click dwa_1.html, then click Open

14. 4. If necessary, click the Maximize button on the Document
window title bar.
5. Click the Show Code view button on the Document toolbar.
6. Scroll through the code, click the Show Design view button to
return to Design view, then, if necessary, scroll to display the
top of the page.
Adobe Dreamweaver CS6 - Illustrated

17. 1. Click Help on the Menu bar
2. Click Dreamweaver Help
3. Type “workspace switcher” in the search box, click the drop-
down menu, click Dreamweaver if necessary, then press [Enter]
4. Click the option button next to “Only Adobe content”
5. Click one of the links listed
6. Scroll through and read some of the information, then close the
Dreamweaver Help window

19. 1. OPEN file tab.
2. Click Preview in browser
3. Choose the suitable browser.
4. The chosen browser will pop up with the webpage on which you
are currently working on.

20. CHOOZE
BROWSE
R
OPEN
FILE
TAB

21. 1. In the browser, click File on the Menu bar, then click
Exit (Win), or click [Browser name] on the Menu
bar, then click Quit [Browser name] (Mac)
2. In the Dreamweaver workspace, click File on the
Application bar, then click Exit (Win) or click
Dreamweaver on the Menu bar, then click Quit
Dreamweaver (Mac)
Adobe Dreamweaver CS6 - Illustrated