Macromedia Dreamweaver MX  Illustrated Introductory with Macromedia Dreamweaver  Getting Started
<ul><li>Define Web design software </li></ul><ul><li>Start Macromedia Dreamweaver </li></ul><ul><li>View the Dreamweaver w...
Objectives <ul><li>View Web page elements </li></ul><ul><li>Get Help </li></ul><ul><li>View a Web page in a browser window...
Introduction <ul><li>Dreamweaver is a Web design program </li></ul><ul><li>Used to create multimedia-rich Web pages and We...
Defining Web Design Software <ul><li>A  Web design program  is used to create interactive Web pages containing: </li></ul>...
What to Do in Dreamweaver <ul><li>Create Web page components </li></ul><ul><li>Import components created in other programs...
Understanding HTML <ul><li>Dreamweaver saves files as HTML documents with the  .htm  extension </li></ul><ul><li>HTML stan...
Key Web Page Creation Terms <ul><li>Web pages </li></ul><ul><ul><li>Collections of text in HTML format and images in speci...
Templates <ul><li>Predefined page layouts </li></ul><ul><li>Apply to existing pages </li></ul><ul><li>Used as a basis for ...
Using the Insert Bar <ul><li>Contains buttons for creating or inserting objects: </li></ul><ul><ul><li>Tables and Forms </...
Program Objects Getting Started with Macromedia Dreamweaver  Objects Program Graphics and animation Dreamweaver Flash Flas...
WYSYWYG <ul><li>Pages edited in Dreamweaver appear as they will in the browser window </li></ul>Getting Started with Macro...
Property Inspector <ul><li>Displays the characteristics of the currently selected object on the page </li></ul><ul><li>Cha...
Roundtrip HTML <ul><li>Open in Dreamweaver the HTML files created in other programs, such as Microsoft FrontPage  </li></u...
Managing Web Sites <ul><li>Use Dreamweaver to manage Web sites: </li></ul><ul><ul><li>Ensure all links work properly </li>...
Sample Web Page Getting Started with Macromedia Dreamweaver  Insert Bar Property Inspector Site Map
Starting Dreamweaver: Windows <ul><li>Click  the  Start button  on the taskbar </li></ul><ul><li>Point to  All Programs </...
Starting Dreamweaver: Macintosh <ul><li>Double-click the hard drive icon </li></ul><ul><li>Double-click the Macromedia Dre...
Workspace Layouts <ul><li>MDI (Multiple Document Interface) layout:  </li></ul><ul><ul><li>All the windows and panels are ...
Workspace Bars <ul><li>Title bar </li></ul><ul><li>Menu bar </li></ul><ul><li>Insert bar </li></ul><ul><li>Status bar </li...
Workspace Toolbars <ul><li>Document toolbar </li></ul><ul><li>Standard toolbar </li></ul>Getting Started with Macromedia D...
Inspectors  <ul><li>Palettes that display the properties of the currently selected object </li></ul><ul><li>Used to quickl...
Panel Groups <ul><li>Palettes containing tabs for activating features and commands: </li></ul><ul><ul><li>Design </li></ul...
Dreamweaver Views  <ul><li>Design View </li></ul><ul><li>Code View </li></ul><ul><li>Code and Design View </li></ul>Gettin...
Design View <ul><li>Full-screen layout  </li></ul><ul><li>Used to design and create a Web page </li></ul>Getting Started w...
Code View  <ul><li>Full screen layout showing the HTML code  </li></ul><ul><li>Used to read or edit code </li></ul>Getting...
Code and Design View  <ul><li>Combination of Code View and Design View in separate windows  </li></ul><ul><li>Used to debu...
Panel Groups <ul><li>Click the Expander arrow on a panel group to open the panel and display the panel tabs </li></ul>Gett...
Opening a Web Page <ul><li>Click  File  on the Document Window menu bar </li></ul><ul><li>Click  Open </li></ul><ul><li>Na...
Web Page Elements <ul><li>Text </li></ul><ul><li>Graphics </li></ul><ul><li>Hyperlinks </li></ul><ul><li>Tables </li></ul>...
Text on a Web Page <ul><li>Most information on a Web page is presented in the form of text </li></ul><ul><li>Text is typed...
Graphics on a Web Page <ul><li>Used to add visual interest to a Web page </li></ul><ul><li>Generally, graphics should be u...
Use of Banners <ul><li>Graphic that appears across the top of the screen  </li></ul><ul><li>Incorporates one of more of th...
Hyperlinks <ul><li>Graphic or text elements that users click to go to: </li></ul><ul><ul><li>A different place on the same...
Tables <ul><li>Grids of rows and columns </li></ul><ul><li>Used to: </li></ul><ul><ul><li>Hold tabular data on a Web page ...
Layers <ul><li>Page layout tool </li></ul><ul><li>Draw layers on the page and use them to hold page elements, such as text...
Flash Buttons <ul><li>Used as links to others </li></ul><ul><li>Inserted onto a Web page from Dreamweaver  </li></ul><ul><...
Getting Help <ul><li>The Dreamweaver Help window includes four tabs: </li></ul><ul><ul><li>Contents </li></ul></ul><ul><ul...
Help Features Getting Started with Macromedia Dreamweaver
Viewing a Web Page <ul><li>View a Web page frequently in a Web browser: </li></ul><ul><ul><li>Shows how the page will look...
Window Size Options Getting Started with Macromedia Dreamweaver
Finishing a Work Session <ul><li>Close a file in Windows: </li></ul><ul><ul><li>Click  File  on the menu bar, then click  ...
Accessing Online Support <ul><li>Find extensive Help information at the Dreamweaver Support Center </li></ul><ul><li>www.m...
Summary <ul><li>Use Dreamweaver create Web pages and Web sites </li></ul><ul><li>Access tools from bars and panels in the ...
Upcoming SlideShare
Loading in...5
×

Illustrated introductory DreamWeaver

2,032

Published on

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,032
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Illustrated introductory DreamWeaver"

  1. 1. Macromedia Dreamweaver MX Illustrated Introductory with Macromedia Dreamweaver Getting Started
  2. 2. <ul><li>Define Web design software </li></ul><ul><li>Start Macromedia Dreamweaver </li></ul><ul><li>View the Dreamweaver workspace </li></ul><ul><li>Work with views and panels </li></ul><ul><li>Open a Web page </li></ul>Objectives Getting Started with Macromedia Dreamweaver
  3. 3. Objectives <ul><li>View Web page elements </li></ul><ul><li>Get Help </li></ul><ul><li>View a Web page in a browser window </li></ul><ul><li>Close a Web page and exit Dreamweaver </li></ul>Getting Started with Macromedia Dreamweaver
  4. 4. Introduction <ul><li>Dreamweaver is a Web design program </li></ul><ul><li>Used to create multimedia-rich Web pages and Web sites </li></ul><ul><li>Tools are available to incorporate features, such as animations and interactive forms </li></ul>Getting Started with Macromedia Dreamweaver
  5. 5. Defining Web Design Software <ul><li>A Web design program is used to create interactive Web pages containing: </li></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Animation </li></ul></ul><ul><ul><li>Sounds </li></ul></ul><ul><ul><li>Video </li></ul></ul>Getting Started with Macromedia Dreamweaver
  6. 6. What to Do in Dreamweaver <ul><li>Create Web page components </li></ul><ul><li>Import components created in other programs </li></ul>Getting Started with Macromedia Dreamweaver
  7. 7. Understanding HTML <ul><li>Dreamweaver saves files as HTML documents with the .htm extension </li></ul><ul><li>HTML stands for HyperText Markup Language </li></ul><ul><li>HTML is the language used to create Web pages </li></ul>Getting Started with Macromedia Dreamweaver
  8. 8. Key Web Page Creation Terms <ul><li>Web pages </li></ul><ul><ul><li>Collections of text in HTML format and images in special image formats </li></ul></ul><ul><li>Web sites </li></ul><ul><ul><li>Collections of related Web pages </li></ul></ul><ul><li>Servers </li></ul><ul><ul><li>Central computers that store Web pages and are connected to the Internet </li></ul></ul>Getting Started with Macromedia Dreamweaver
  9. 9. Templates <ul><li>Predefined page layouts </li></ul><ul><li>Apply to existing pages </li></ul><ul><li>Used as a basis for designing new pages </li></ul>Getting Started with Macromedia Dreamweaver
  10. 10. Using the Insert Bar <ul><li>Contains buttons for creating or inserting objects: </li></ul><ul><ul><li>Tables and Forms </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Frames </li></ul></ul><ul><ul><li>Layers </li></ul></ul><ul><ul><li>Objects created with Fireworks, Flash, and Shockwave </li></ul></ul>Getting Started with Macromedia Dreamweaver
  11. 11. Program Objects Getting Started with Macromedia Dreamweaver Objects Program Graphics and animation Dreamweaver Flash Flash elements created in Dreamweaver Flash buttons and Flash text Web graphics Dreamweaver Fireworks Media files created in Macromedia Director Dreamweaver Shockwave Applets embedded in Web pages Java
  12. 12. WYSYWYG <ul><li>Pages edited in Dreamweaver appear as they will in the browser window </li></ul>Getting Started with Macromedia Dreamweaver W hat Y ou S ee I s W hat Y ou G et
  13. 13. Property Inspector <ul><li>Displays the characteristics of the currently selected object on the page </li></ul><ul><li>Changes as different types of page objects are selected </li></ul>Getting Started with Macromedia Dreamweaver
  14. 14. Roundtrip HTML <ul><li>Open in Dreamweaver the HTML files created in other programs, such as Microsoft FrontPage </li></ul><ul><li>No additional coding is required </li></ul>Getting Started with Macromedia Dreamweaver HTML travels between programs
  15. 15. Managing Web Sites <ul><li>Use Dreamweaver to manage Web sites: </li></ul><ul><ul><li>Ensure all links work properly </li></ul></ul><ul><ul><li>Create a site map </li></ul></ul><ul><ul><li>Work with others on a site development team </li></ul></ul>Getting Started with Macromedia Dreamweaver
  16. 16. Sample Web Page Getting Started with Macromedia Dreamweaver Insert Bar Property Inspector Site Map
  17. 17. Starting Dreamweaver: Windows <ul><li>Click the Start button on the taskbar </li></ul><ul><li>Point to All Programs </li></ul><ul><li>Point to Macromedia </li></ul><ul><li>Click Macromedia Dreamweaver </li></ul>Getting Started with Macromedia Dreamweaver
  18. 18. Starting Dreamweaver: Macintosh <ul><li>Double-click the hard drive icon </li></ul><ul><li>Double-click the Macromedia Dreamweaver folder </li></ul><ul><li>Double-click the Dreamweaver program icon </li></ul>Getting Started with Macromedia Dreamweaver
  19. 19. Workspace Layouts <ul><li>MDI (Multiple Document Interface) layout: </li></ul><ul><ul><li>All the windows and panels are integrated into one large window </li></ul></ul><ul><ul><li>Panels are docked on the right side of the screen </li></ul></ul>Getting Started with Macromedia Dreamweaver
  20. 20. Workspace Bars <ul><li>Title bar </li></ul><ul><li>Menu bar </li></ul><ul><li>Insert bar </li></ul><ul><li>Status bar </li></ul>Getting Started with Macromedia Dreamweaver Insert Bar Menu Bar Title Bar Status Bar
  21. 21. Workspace Toolbars <ul><li>Document toolbar </li></ul><ul><li>Standard toolbar </li></ul>Getting Started with Macromedia Dreamweaver Document Toolbar Standard Toolbar
  22. 22. Inspectors <ul><li>Palettes that display the properties of the currently selected object </li></ul><ul><li>Used to quickly make formatting changes without opening menus </li></ul>Getting Started with Macromedia Dreamweaver Property Inspector
  23. 23. Panel Groups <ul><li>Palettes containing tabs for activating features and commands: </li></ul><ul><ul><li>Design </li></ul></ul><ul><ul><li>Code </li></ul></ul><ul><ul><li>Application </li></ul></ul><ul><ul><li>Files </li></ul></ul><ul><ul><li>Answers </li></ul></ul>Getting Started with Macromedia Dreamweaver
  24. 24. Dreamweaver Views <ul><li>Design View </li></ul><ul><li>Code View </li></ul><ul><li>Code and Design View </li></ul>Getting Started with Macromedia Dreamweaver
  25. 25. Design View <ul><li>Full-screen layout </li></ul><ul><li>Used to design and create a Web page </li></ul>Getting Started with Macromedia Dreamweaver
  26. 26. Code View <ul><li>Full screen layout showing the HTML code </li></ul><ul><li>Used to read or edit code </li></ul>Getting Started with Macromedia Dreamweaver HTML Codes in Code View
  27. 27. Code and Design View <ul><li>Combination of Code View and Design View in separate windows </li></ul><ul><li>Used to debug or correct errors because both views can be seen simultaneously </li></ul>Getting Started with Macromedia Dreamweaver
  28. 28. Panel Groups <ul><li>Click the Expander arrow on a panel group to open the panel and display the panel tabs </li></ul>Getting Started with Macromedia Dreamweaver Expander Arrow
  29. 29. Opening a Web Page <ul><li>Click File on the Document Window menu bar </li></ul><ul><li>Click Open </li></ul><ul><li>Navigate to the location where the file is saved </li></ul><ul><li>Click the filename </li></ul><ul><li>Click Open </li></ul>Getting Started with Macromedia Dreamweaver
  30. 30. Web Page Elements <ul><li>Text </li></ul><ul><li>Graphics </li></ul><ul><li>Hyperlinks </li></ul><ul><li>Tables </li></ul><ul><li>Layers </li></ul><ul><li>Flash Buttons </li></ul>Getting Started with Macromedia Dreamweaver
  31. 31. Text on a Web Page <ul><li>Most information on a Web page is presented in the form of text </li></ul><ul><li>Text is typed or imported onto a Web page and then formatted with the Property Inspector </li></ul><ul><li>Text should be short, to the point, and easy to read </li></ul>Getting Started with Macromedia Dreamweaver
  32. 32. Graphics on a Web Page <ul><li>Used to add visual interest to a Web page </li></ul><ul><li>Generally, graphics should be used sparingly </li></ul>Getting Started with Macromedia Dreamweaver
  33. 33. Use of Banners <ul><li>Graphic that appears across the top of the screen </li></ul><ul><li>Incorporates one of more of the following elements: </li></ul><ul><ul><li>Company’s logo </li></ul></ul><ul><ul><li>Contact information </li></ul></ul><ul><ul><li>Navigation bars </li></ul></ul>Getting Started with Macromedia Dreamweaver
  34. 34. Hyperlinks <ul><li>Graphic or text elements that users click to go to: </li></ul><ul><ul><li>A different place on the same Web page </li></ul></ul><ul><ul><li>A Web page on the same Web site </li></ul></ul><ul><ul><li>A Web page on a different Web site </li></ul></ul>Getting Started with Macromedia Dreamweaver
  35. 35. Tables <ul><li>Grids of rows and columns </li></ul><ul><li>Used to: </li></ul><ul><ul><li>Hold tabular data on a Web page </li></ul></ul><ul><ul><li>As a basic design tool for page layout </li></ul></ul>Getting Started with Macromedia Dreamweaver
  36. 36. Layers <ul><li>Page layout tool </li></ul><ul><li>Draw layers on the page and use them to hold page elements, such as text or graphics </li></ul><ul><li>Layers float over any page element and are easy to position </li></ul>Getting Started with Macromedia Dreamweaver
  37. 37. Flash Buttons <ul><li>Used as links to others </li></ul><ul><li>Inserted onto a Web page from Dreamweaver </li></ul><ul><li>Macromedia Flash program is not required </li></ul>Getting Started with Macromedia Dreamweaver
  38. 38. Getting Help <ul><li>The Dreamweaver Help window includes four tabs: </li></ul><ul><ul><li>Contents </li></ul></ul><ul><ul><li>Index </li></ul></ul><ul><ul><li>Search </li></ul></ul><ul><ul><li>Favorites </li></ul></ul>Getting Started with Macromedia Dreamweaver
  39. 39. Help Features Getting Started with Macromedia Dreamweaver
  40. 40. Viewing a Web Page <ul><li>View a Web page frequently in a Web browser: </li></ul><ul><ul><li>Shows how the page will look like when published on the Internet </li></ul></ul><ul><li>View a Web page at different resolutions: </li></ul><ul><ul><li>Ensures that the page appears attractive for most users </li></ul></ul>Getting Started with Macromedia Dreamweaver
  41. 41. Window Size Options Getting Started with Macromedia Dreamweaver
  42. 42. Finishing a Work Session <ul><li>Close a file in Windows: </li></ul><ul><ul><li>Click File on the menu bar, then click Close </li></ul></ul><ul><li>Close a file in Mac: </li></ul><ul><ul><li>Click Explorer on the menu bar, then click Quit Explorer </li></ul></ul><ul><li>Exit Dreamweaver: </li></ul><ul><ul><li>Click File on the menu bar, then click Exit (Win) </li></ul></ul><ul><ul><li>Click Dreamweaver on the menu bar, then click Quit Dreamweaver (Mac) </li></ul></ul>Getting Started with Macromedia Dreamweaver
  43. 43. Accessing Online Support <ul><li>Find extensive Help information at the Dreamweaver Support Center </li></ul><ul><li>www.macromedia.com/support/dreamweaver </li></ul>Getting Started with Macromedia Dreamweaver
  44. 44. Summary <ul><li>Use Dreamweaver create Web pages and Web sites </li></ul><ul><li>Access tools from bars and panels in the Dreamweaver workspace </li></ul><ul><li>Work on Web pages in three views </li></ul><ul><li>View Web pages in the Web browser </li></ul><ul><li>Access Dreamweaver help and online support </li></ul>Getting Started with Macromedia Dreamweaver

×