Chapter 01
- 1. Chapter 1 Getting Started with Dreamweaver
- 2. Chapter 1 Lessons Explore the Dreamweaver workspace View a web page and use Help Plan and define a website Add a folder and pages © 2010 Delmar Cengage Learning
- 3. Getting Started with Dreamweaver What is Dreamweaver? Web design software for creating a web page or a complex website What is a website? A group of related web pages that are linked together and share a common interface and design © 2010 Delmar Cengage Learning
- 4. Using Dreamweaver Tools What does Dreamweaver CS4 offer? Design tools that can create dynamic and interactive web page without writing HTML code Organizational tools Site management tools Graphic site maps © 2010 Delmar Cengage Learning
- 5. Fig 1: Dreamweaver CS4 Workspace © 2010 Delmar Cengage Learning Property inspector Tag selector Document window Document border Related files toolbar Application bar (Win) or Menu bar (Mac) Workspace switcher Insert panel Files panel Zoom tool Hand tool Select tool Drag the panel border up or down to resize insert panel
- 6. Working with Dreamweaver Views Design view Code view Code and Design view © 2010 Delmar Cengage Learning
- 7. Starting Dreamweaver: Windows Click the Start button on the taskbar Point to All Programs, click Adobe Web Premium CS4, then click Adobe Dreamweaver CS4 © 2010 Delmar Cengage Learning
- 8. Figure 3: Starting Dreamweaver CS4 © 2010 Delmar Cengage Learning Click Adobe Dreamweaver CS4
- 9. Starting Dreamweaver: (Macintosh) Click Finder in the Dock, then click Applications Click the Adobe Dreamweaver CS4 folder, then double-click the Dreamweaver CS4 application © 2010 Delmar Cengage Learning
- 10. Changing Views Click the Show Code View button Click the Show Code and Design Views button Click the Show Design View button © 2010 Delmar Cengage Learning
- 11. Figure 5: Code View for New Document © 2010 Delmar Cengage Learning Coding toolbar Show Code view button Show Code and Design view button Show Design view button Switch Design View to Live View button Some options may differ depending on what was last selected Click to collapse all panels to icons
- 12. Opening a Web Page Create new or open existing Website Web page Homepage First web page that appears when viewers go to a website Sets the look and feel of the website and directs viewers to the rest of the pages in the website © 2010 Delmar Cengage Learning
- 13. Basic Web Page Elements Text Hyperlinks (links) Graphics Banners Navigation bars Image map Flash button objects © 2010 Delmar Cengage Learning
- 14. Fig. 8: Common Web Page Elements © 2010 Delmar Cengage Learning Banner with logo Image Contact information Search feature Link to main pages in the website Links to support pages National Endowment for the Arts website – www.arts.endow.gov
- 15. Using Dreamweaver Help Clicking the Dreamweaver Help command opens the Dreamweaver Help page that contains a list of topics and subtopics by category © 2010 Delmar Cengage Learning
- 16. Fig. 10: Dreamweaver Help and Support Web Page © 2010 Delmar Cengage Learning Dreamweaver help (web) link
- 17. Fig. 11: Displaying Help Content © 2010 Delmar Cengage Learning Selected subtopic content opens on right side of Help window Click plus sign to expand menu of Help topics
- 18. Fig. 13: Phases of a Website Development Project © 2010 Delmar Cengage Learning
- 19. Planning a Website Audience needs Site goals Gathering content Budget Schedule Team Updates © 2010 Delmar Cengage Learning
- 20. Setting Up the Basic Structure Storyboard is a small sketch that represents each page Allow you to visualize how each page is linked to one another Parent pages: home page Child pages: pages linked below it Contains root folders and assets © 2010 Delmar Cengage Learning
- 21. Fig. 14: Striped Umbrella Website Storyboard © 2010 Delmar Cengage Learning
- 22. Creating the Web Pages and Collecting the Page Content Gather the files that will be used Some will come from other software Some will be done in Dreamweaver © 2010 Delmar Cengage Learning
- 23. Testing the Pages Browsers and browser versions Screen sizes Connection download time Testing is a continuous process © 2010 Delmar Cengage Learning
- 24. Modifying the Pages Changes are constantly needed Test page after each change Modifying and testing is an ongoing process © 2010 Delmar Cengage Learning
- 25. Publishing the Site Transfer all the files to a web server Web server: a computer that is connected to the Internet with an IP address A website must be published to the web server before it can be viewed by others © 2010 Delmar Cengage Learning
- 26. Publishing the Site IP: Internet Protocol IP address Example: 207.456.123.2 ISP: Internet Service Provider Hosts website FTP: File Transfer Protocol Host, host directory, login, password © 2010 Delmar Cengage Learning
- 27. Publishing the Site Create a root folder Define the website Set up web server access © 2010 Delmar Cengage Learning
- 28. Fig. 16: Creating a Root Folder Using the Files Panel © 2010 Delmar Cengage Learning If you just see a drive or folder name here you do not currently have a website open Striped_umbrella root folder Your drive or folder may differ
- 29. Fig. 18: Site Definition Striped Umbrella Dialog Box © 2010 Delmar Cengage Learning Advanced tab Website name Browse for file icon Local root folder text box – your drive may differ Links relative to: option Enable cache check box
- 30. Fig. 19: Setting the Remote Access © 2010 Delmar Cengage Learning Remote Info category Access pop-up menu
- 31. Adding a Folder to a Website After defining a website, you need to create folders to organize the files that will make up the site You can use the assets folder to store all non-HTML files, such as images or sound files © 2010 Delmar Cengage Learning
- 32. The Assets Folder Stores all non-HTML (media) files: Image files Sound files Video files Set it as the default location to store the website images You might want to create subfolders for each type of file © 2010 Delmar Cengage Learning
- 33. Creating the Home Page Starting point for a site map Tells Dreamweaver which page you have designated to be your home page Usually index.html (.htm), or default.html (.htm) © 2010 Delmar Cengage Learning
- 34. Adding Pages to a Website Once you add and name pages to your website, you can add content to each page (text and graphics) You have a choice of several default document types you can generate when you create new HTML pages XHTML 1.0 Transitional is the default document type when you install Dreamweaver The default document type is designated in the Preferences dialog box © 2010 Delmar Cengage Learning
- 35. Fig. 22: Site Definition with Assets Folder Set as Default Images Folder © 2010 Delmar Cengage Learning Default images folder text box Browse for file icon
- 36. Fig. 23: Index.html Placed in Striped_Umbrella Root Folder © 2010 Delmar Cengage Learning Windows users see the path; Mac users see only the file name and document type Index.html Root folder Broken link icon Link to banner is broken because the banner is not yet inside the website