DREAMWEAVER

BY SAHIL BANSALBCA 4B(MOARNING)

08217702014

Getting Started with Dreamweaver1. 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

Getting Started with Dreamweaver

• 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

• 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

Starting Adobe Dreamweaver CS6

Welcome Screen

CREATE NEW HTML DOCUMENT

Open an Html Document

DESIGN MATTERS• Opening or creating different document types with

Dreamweaver

• HTML• XML• CSS• PHP• JAVASCRIPT• TEXT FILES

FILE MENUMENU BAR

TO CREATE A NEW FILETO OPEN A NEW FILE

WORKSPACE SWITCHER ACCESS

PANEL

Opening a document

DIFFERENT DOCUMENTS THAT CAN BE FORMED IN DREAMWEAVER

Viewing the Dreamweaver Workspace

Explore the Dreamweaver Workspace• The Insert panel (Insert bar) includes eight categories:

– Common

– Layout

– Forms

– Data

– Spry

– In Context Editing

– Text

– Favorites

Explore the Dreamweaver Workspace• 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.

Explore the Dreamweaver Workspace• 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.

Opening a Web Page1. 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

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

Opening a web Page

Opening a Web Page

Opening a Web Page

GETTING HELP1. Click Help on the Menu bar2. Click Dreamweaver Help3. 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 listed6. Scroll through and read some of the information, then close the

Dreamweaver Help window

Help MENU

Viewing a Web Page in a Browser

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

are currently working on.

CHOOZE BROWSER

OPEN FILE TAB

Closing a Web Page and Exiting Dreamweaver1. 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

THANK YOU