Adobe Dreamweaver CS3 Revealed CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER
Chapter 1 Lessons <ul><li>Explore the Dreamweaver workspace </li></ul><ul><li>View a Web page and use Help </li></ul><ul><...
Getting Started with Dreamweaver <ul><li>What is Dreamweaver? </li></ul><ul><ul><li>Web design software for creating a Web...
Using Dreamweaver Tools <ul><li>What does Dreamweaver CS3 offer? </li></ul><ul><ul><li>Design tools that can create dynami...
Figure 1: Dreamweaver Workspace Title bar Menu bar Insert bar Document window Tag selector Status bar Select tool Hand too...
Working with Dreamweaver Views <ul><li>Design view </li></ul><ul><li>Code view </li></ul><ul><li>Code and Design view </li...
Starting Dreamweaver: Windows <ul><li>Click the  Start button  on the taskbar </li></ul><ul><li>Point to  All Programs , c...
Figure 3: Starting Dreamweaver CS3 Adobe Dreamweaver CS3
Fig. 4: Starting Dreamweaver (Macintosh) <ul><li>Click  Finder  in the Dock, then click  Applications </li></ul><ul><li>Cl...
Changing Views <ul><li>Click the  Show Code View  button </li></ul><ul><li>Click the  Show Code and Design Views  button <...
Figure 5: Code view for  new document Show Code View button Show Code and Design View button Show Design View button Codin...
Viewing Panels <ul><li>Expand the Application panel </li></ul><ul><li>Click each panel tab </li></ul><ul><li>Collapse the ...
Opening a Web Page <ul><li>Create new or open existing </li></ul><ul><ul><li>Web site </li></ul></ul><ul><ul><li>Web page ...
Basic Web Page Elements <ul><li>Text </li></ul><ul><li>Hyperlinks (links) </li></ul><ul><li>Graphics </li></ul><ul><ul><li...
Figure 7:  Common Web Page Elements  Images Text Navigation structure includes several sets of text links Form to fill out...
Figure 8: Striped Umbrella  web page elements Banner Flash button objects that link to other pages in the Web site Text li...
Using Dreamweaver Help <ul><li>Contents </li></ul><ul><li>Index </li></ul><ul><li>Search </li></ul><ul><li>Favorites </li>...
Web Site Development Process FIGURE 10  Phases of a Web site development project
Planning a Web Site <ul><li>Audience needs </li></ul><ul><li>Site goals </li></ul><ul><li>Gathering content </li></ul><ul>...
Creating Storyboards FIGURE 11  The Striped Umbrella Web site storyboard
Testing the Pages <ul><li>Browsers and browser versions </li></ul><ul><li>Screen sizes </li></ul><ul><li>Connection downlo...
Modifying the Pages <ul><li>Changes are constantly needed </li></ul><ul><li>Test page after each change </li></ul><ul><li>...
Publishing the Site <ul><li>Transfer all the files to a Web server </li></ul><ul><ul><li>Web server: a computer that is co...
Publishing the Site <ul><li>IP: Internet Protocol </li></ul><ul><ul><li>IP address </li></ul></ul><ul><ul><li>Example: 207...
Publishing the Site <ul><li>Create a root folder </li></ul><ul><li>Define the Web site </li></ul><ul><li>Set up Web server...
Fig. 12: Creating a Root Folder (Windows) Root folder FIGURE 12  Creating a root folder using Windows Explorer
Fig. 14: Site Definition Striped Umbrella Web Site Links relative to options Enable cache Web site name Local root folder
Fig. 15: Setting the Remote Access Remote info category Access list arrow
The Assets Folder <ul><li>Stores all  non-HTML  (media) files: </li></ul><ul><ul><li>Image files </li></ul></ul><ul><ul><l...
Setting the Home Page <ul><li>Starting point for a  site map </li></ul><ul><li>Tells Dreamweaver which page you have desig...
Adding Pages to a Web Site <ul><li>Once you add and name pages to your web site, you can add content to each page (text an...
Fig. 16: Striped Umbrella Assets Folder (Windows) Root folder New assets folder Site list arrow8
Fig. 18: Site Definition with Assets Folder Set as Default Images Folder Default images folder text box Browse for file icon
Fig. 19: Index.html Placed in Striped_Umbrella Root Folder Broken link icon Path for file Root folder Index.html
Fig. 21: Adding New Pages to Striped Umbrella Web Site New pages added to root folder su_banner.gif in the assets folder
Creating a Site Map <ul><li>Keeps track of relationships between pages </li></ul><ul><li>Graphical representation of pages...
Viewing a Site Map <ul><li>Map view in the Files panel </li></ul><ul><li>Show file names or page titles </li></ul><ul><li>...
Verifying Page Titles <ul><li>Search engine keywords </li></ul><ul><li>Title in browser window </li></ul><ul><li>Bookmark ...
Using Site Maps for Visitors  <ul><li>In the Web site as an informational tool  </li></ul><ul><ul><li>PNG or JPEG </li></u...
Fig. 24: Options for Site Map Layout Site Map Layout option Page titles option button Path for home page
Fig. 25: Expanding the Site Map Site list arrow View list arrow Expand to show local and remote sites
Chapter 1 Tasks <ul><li>Explore the Dreamweaver workspace </li></ul><ul><li>View a Web page and use Help </li></ul><ul><li...
Upcoming SlideShare
Loading in...5
×

Getting Started with Dreamweaver

4,400

Published on

Published in: Education

Transcript of "Getting Started with Dreamweaver"

  1. 1. Adobe Dreamweaver CS3 Revealed CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER
  2. 2. Chapter 1 Lessons <ul><li>Explore the Dreamweaver workspace </li></ul><ul><li>View a Web page and use Help </li></ul><ul><li>Plan and define a Web site </li></ul><ul><li>Add a folder and pages, and set the home page </li></ul><ul><li>Create and view a site map </li></ul>
  3. 3. Getting Started with Dreamweaver <ul><li>What is Dreamweaver? </li></ul><ul><ul><li>Web design software for creating a Web page or a complex Web site </li></ul></ul><ul><li>What is a Web site? </li></ul><ul><ul><li>A group of related Web pages that are linked together and share a common interface and design </li></ul></ul>
  4. 4. Using Dreamweaver Tools <ul><li>What does Dreamweaver CS3 offer? </li></ul><ul><ul><li>Design tools that can create dynamic and interactive web page without writing HTML code </li></ul></ul><ul><ul><li>Organizational tools </li></ul></ul><ul><ul><li>Site management tools </li></ul></ul><ul><ul><li>Graphic site maps </li></ul></ul>
  5. 5. Figure 1: Dreamweaver Workspace Title bar Menu bar Insert bar Document window Tag selector Status bar Select tool Hand tool Zoom tool Document toolbar Property inspector
  6. 6. Working with Dreamweaver Views <ul><li>Design view </li></ul><ul><li>Code view </li></ul><ul><li>Code and Design view </li></ul>
  7. 7. Starting Dreamweaver: Windows <ul><li>Click the Start button on the taskbar </li></ul><ul><li>Point to All Programs , click Adobe Web Premium CS3 , then click Adobe Dreamweaver CS3 </li></ul>
  8. 8. Figure 3: Starting Dreamweaver CS3 Adobe Dreamweaver CS3
  9. 9. Fig. 4: Starting Dreamweaver (Macintosh) <ul><li>Click Finder in the Dock, then click Applications </li></ul><ul><li>Click the Adobe Dreamweaver CS3 folder , then double-click the Dreamweaver CS3 application </li></ul>
  10. 10. Changing Views <ul><li>Click the Show Code View button </li></ul><ul><li>Click the Show Code and Design Views button </li></ul><ul><li>Click the Show Design View button </li></ul>
  11. 11. Figure 5: Code view for new document Show Code View button Show Code and Design View button Show Design View button Coding toolbar
  12. 12. Viewing Panels <ul><li>Expand the Application panel </li></ul><ul><li>Click each panel tab </li></ul><ul><li>Collapse the Application panel </li></ul><ul><li>Study the CSS and Files panel groups </li></ul><ul><li>Collapse the CSS panel group </li></ul>
  13. 13. Opening a Web Page <ul><li>Create new or open existing </li></ul><ul><ul><li>Web site </li></ul></ul><ul><ul><li>Web page </li></ul></ul><ul><li>Homepage </li></ul><ul><ul><li>First Web page that appears when viewers go to a Web site </li></ul></ul><ul><ul><li>Sets the look and feel of the Web site and directs viewers to the rest of the pages in the Web site </li></ul></ul>
  14. 14. Basic Web Page Elements <ul><li>Text </li></ul><ul><li>Hyperlinks (links) </li></ul><ul><li>Graphics </li></ul><ul><ul><li>Banners </li></ul></ul><ul><li>Navigation bars </li></ul><ul><ul><li>Image map </li></ul></ul><ul><li>Flash button objects </li></ul>
  15. 15. Figure 7: Common Web Page Elements Images Text Navigation structure includes several sets of text links Form to fill out for free shipping Small form for signing in and checking out
  16. 16. Figure 8: Striped Umbrella web page elements Banner Flash button objects that link to other pages in the Web site Text links to other pages in the Web site Text Image
  17. 17. Using Dreamweaver Help <ul><li>Contents </li></ul><ul><li>Index </li></ul><ul><li>Search </li></ul><ul><li>Favorites </li></ul>
  18. 18. Web Site Development Process FIGURE 10 Phases of a Web site development project
  19. 19. Planning a Web Site <ul><li>Audience needs </li></ul><ul><li>Site goals </li></ul><ul><li>Gathering content </li></ul><ul><li>Budget </li></ul><ul><li>Schedule </li></ul><ul><li>Team </li></ul><ul><li>Updates </li></ul>
  20. 20. Creating Storyboards FIGURE 11 The Striped Umbrella Web site storyboard
  21. 21. Testing the Pages <ul><li>Browsers and browser versions </li></ul><ul><li>Screen sizes </li></ul><ul><li>Connection download time </li></ul><ul><li>Testing is a continuous process </li></ul>
  22. 22. Modifying the Pages <ul><li>Changes are constantly needed </li></ul><ul><li>Test page after each change </li></ul><ul><li>Modifying and testing is an ongoing process </li></ul>
  23. 23. Publishing the Site <ul><li>Transfer all the files to a Web server </li></ul><ul><ul><li>Web server: a computer that is connected to the Internet with an IP address </li></ul></ul><ul><li>A Web site must be published to the Web server before it can be viewed by others </li></ul>
  24. 24. Publishing the Site <ul><li>IP: Internet Protocol </li></ul><ul><ul><li>IP address </li></ul></ul><ul><ul><li>Example: 207.456.123.2 </li></ul></ul><ul><li>ISP: Internet Service Provider </li></ul><ul><ul><li>Hosts Web site </li></ul></ul><ul><li>FTP: File Transfer Protocol </li></ul><ul><ul><li>Host, host directory, login, password </li></ul></ul>
  25. 25. Publishing the Site <ul><li>Create a root folder </li></ul><ul><li>Define the Web site </li></ul><ul><li>Set up Web server access </li></ul>
  26. 26. Fig. 12: Creating a Root Folder (Windows) Root folder FIGURE 12 Creating a root folder using Windows Explorer
  27. 27. Fig. 14: Site Definition Striped Umbrella Web Site Links relative to options Enable cache Web site name Local root folder
  28. 28. Fig. 15: Setting the Remote Access Remote info category Access list arrow
  29. 29. The Assets Folder <ul><li>Stores all non-HTML (media) files: </li></ul><ul><ul><li>Image files </li></ul></ul><ul><ul><li>Sound files </li></ul></ul><ul><ul><li>Video files </li></ul></ul><ul><li>Set it as the default location to store the Web site images </li></ul><ul><li>You might want to create subfolders for each type of file </li></ul>
  30. 30. Setting the Home Page <ul><li>Starting point for a site map </li></ul><ul><li>Tells Dreamweaver which page you have designated to be your home page </li></ul><ul><li>Usually index.html (.htm), or default.html (.htm) </li></ul>
  31. 31. Adding Pages to a Web Site <ul><li>Once you add and name pages to your web site, you can add content to each page (text and graphics) </li></ul><ul><li>You have a choice of several default document types you can generate when you create new HTML pages </li></ul><ul><li>XHTML 1.0 Transitional is the default document type when you install Dreamweaver </li></ul><ul><li>The default document type is designated in the Preferences dialog box </li></ul>
  32. 32. Fig. 16: Striped Umbrella Assets Folder (Windows) Root folder New assets folder Site list arrow8
  33. 33. Fig. 18: Site Definition with Assets Folder Set as Default Images Folder Default images folder text box Browse for file icon
  34. 34. Fig. 19: Index.html Placed in Striped_Umbrella Root Folder Broken link icon Path for file Root folder Index.html
  35. 35. Fig. 21: Adding New Pages to Striped Umbrella Web Site New pages added to root folder su_banner.gif in the assets folder
  36. 36. Creating a Site Map <ul><li>Keeps track of relationships between pages </li></ul><ul><li>Graphical representation of pages </li></ul><ul><li>Shows the folder structure </li></ul><ul><li>View visual clues to learn about details </li></ul><ul><li>Checked out pages </li></ul>
  37. 37. Viewing a Site Map <ul><li>Map view in the Files panel </li></ul><ul><li>Show file names or page titles </li></ul><ul><li>Edit page titles in the site map </li></ul><ul><li>Uses a tree structure to visually represent the how pages are linked </li></ul>
  38. 38. Verifying Page Titles <ul><li>Search engine keywords </li></ul><ul><li>Title in browser window </li></ul><ul><li>Bookmark in browser </li></ul>
  39. 39. Using Site Maps for Visitors <ul><li>In the Web site as an informational tool </li></ul><ul><ul><li>PNG or JPEG </li></ul></ul><ul><li>Print for report or meeting </li></ul><ul><ul><li>BMP or PICT </li></ul></ul><ul><li>Create an XML site map, or a listing of the Web site links that can be made available to search engines </li></ul>
  40. 40. Fig. 24: Options for Site Map Layout Site Map Layout option Page titles option button Path for home page
  41. 41. Fig. 25: Expanding the Site Map Site list arrow View list arrow Expand to show local and remote sites
  42. 42. Chapter 1 Tasks <ul><li>Explore the Dreamweaver workspace </li></ul><ul><li>View a Web page and use Help </li></ul><ul><li>Plan and define a Web site </li></ul><ul><li>Add a Folder and Pages, and set the home page </li></ul><ul><li>Create and view a Site Map </li></ul>

×