Adobe Dreamweaver CS5 Introduction Web Site Development and Adobe Dreamweaver CS5.
Dreamweaver - Introduction AND WALKTHROUGH
-
Upload
sahil-bansal -
Category
Technology
-
view
356 -
download
0
Transcript of Dreamweaver - Introduction AND WALKTHROUGH
![Page 1: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/1.jpg)
DREAMWEAVER
BY SAHIL BANSALBCA 4B(MOARNING)
08217702014
![Page 2: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/2.jpg)
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
![Page 3: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/3.jpg)
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
![Page 4: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/4.jpg)
• 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
![Page 5: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/5.jpg)
Welcome Screen
CREATE NEW HTML DOCUMENT
Open an Html Document
![Page 6: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/6.jpg)
DESIGN MATTERS• Opening or creating different document types with
Dreamweaver
• HTML• XML• CSS• PHP• JAVASCRIPT• TEXT FILES
![Page 7: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/7.jpg)
FILE MENUMENU BAR
TO CREATE A NEW FILETO OPEN A NEW FILE
WORKSPACE SWITCHER ACCESS
PANEL
![Page 8: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/8.jpg)
Opening a document
DIFFERENT DOCUMENTS THAT CAN BE FORMED IN DREAMWEAVER
![Page 9: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/9.jpg)
Viewing the Dreamweaver Workspace
![Page 10: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/10.jpg)
Explore the Dreamweaver Workspace• The Insert panel (Insert bar) includes eight categories:
– Common
– Layout
– Forms
– Data
– Spry
– In Context Editing
– Text
– Favorites
![Page 11: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/11.jpg)
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.
![Page 12: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/12.jpg)
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.
![Page 13: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/13.jpg)
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
![Page 14: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/14.jpg)
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
![Page 15: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/15.jpg)
Opening a Web Page
![Page 16: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/16.jpg)
Opening a Web Page
![Page 17: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/17.jpg)
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
![Page 18: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/18.jpg)
Help MENU
![Page 19: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/19.jpg)
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.
![Page 20: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/20.jpg)
CHOOZE BROWSER
OPEN FILE TAB
![Page 21: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/21.jpg)
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
![Page 22: Dreamweaver - Introduction AND WALKTHROUGH](https://reader036.fdocuments.us/reader036/viewer/2022062503/58a42c2e1a28ab3e3d8b5131/html5/thumbnails/22.jpg)
THANK YOU