1. Chapter 1 Creating a Dreamweaver Web Page and Local Site
Adobe Dreamweaver CS5
Chapter 1
Creating a Dreamweaver Web Page and Local Site

2. Objectives Describe Dreamweaver and identify its key features
Start and quit Dreamweaver
Describe the Dreamweaver window
Define a local site
Create and save a Web page
Add a background image
Open and close panels
Creating a Dreamweaver Web Page and Local Site

3. Objectives Display the Property inspector
Format and modify text elements
Define and insert a line break
Change a Web page title and check spelling
Preview and print a Web page
Open a new Web page
Creating a Dreamweaver Web Page and Local Site

4. Project – Montana Parks Web Site Home Page
Creating a Dreamweaver Web Page and Local Site

5. General Project Guidelines
Review the Dreamweaver workspace window
Determine the location for the local site
Define the local site
Add a background for the Web page
Select the words and fonts for the text
Identify how to format various elements of the text
Review final tasks
Creating a Dreamweaver Web Page and Local Site

6. Starting Dreamweaver
Click the Start button on the Windows 7 taskbar to display the Start menu
Click Adobe Dreamweaver CS5 on the Start menu or point to All Programs on the Start menu and then click Adobe Dreamweaver CS5 on the All Programs list to start Dreamweaver and display the Welcome screen
If necessary, click the Workspace switcher arrow on the Application bar, and then click Classic to switch to the Classic workspace
Click HTML in the Create New column to close the Welcome screen and display the Dreamweaver workspace
Creating a Dreamweaver Web Page and Local Site

7. Starting Dreamweaver
If necessary, click the Maximize button to maximize the Dreamweaver window
If necessary, click the Design button on the Document toolbar to switch to Design view
If the Browser Navigation toolbar is displayed, right-click a blank spot on the Document toolbar, point to Toolbars, and then click Browser Navigation to remove the check mark so the Browser Navigation toolbar is not displayed in the Dreamweaver window
If the Insert bar is not displayed, click Window on the Application bar and then click Insert
Creating a Dreamweaver Web Page and Local Site

8. Starting Dreamweaver
Creating a Dreamweaver Web Page and Local Site

9. Click View on the Application bar to display the View menu
Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening Panels
Click View on the Application bar to display the View menu
If necessary, click the down-pointing arrow at the bottom of the View menu to scroll the menu
Point to Toolbars, and then point to Standard on the Toolbars submenu to highlight Standard on the Toolbars submenu
Click Standard to display the Standard toolbar
Point to Color Icons on the context menu to highlight the command
Creating a Dreamweaver Web Page and Local Site

10. Press the F4 key again to redisplay the panels
Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening Panels
If a check mark does not appear next to Color Icons, click Color Icons to add color to the icons
Press the F4 key to close all open panels and inspectors and to maximize the workspace available in the Document window
Press the F4 key again to redisplay the panels
Creating a Dreamweaver Web Page and Local Site

11. Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening Panels
Creating a Dreamweaver Web Page and Local Site

12. Using Site Setup to Create a Local Web Site
Click Site on the Application bar to display the Site menu, and then point to New Site to highlight that command
Click New Site to display the Site Setup dialog box
Type the desired site name in the Site name text box
Click the Browse for folder icon to display the Choose Root Folder dialog box
Navigate to the desired location where you will store the Web site files
Click the Create New Folder icon to create a folder for your local site, if desired
Creating a Dreamweaver Web Page and Local Site

13. Using Site Setup to Create a Local Web Site
Click the Select button to display the Site Setup dialog box
Click Advanced Settings in the category list to display the option for selecting the default images folder
Click the Browse for folder icon to specify the folder for the images
Navigate to the folder to contain the images
Click the Select button to select the desired folder as the default folder for images and to display the Site Setup dialog box
Click the Save button to save the site settings and display the Dreamweaver workspace
Creating a Dreamweaver Web Page and Local Site

14. Using Site Setup to Create a Local Web Site
Creating a Dreamweaver Web Page and Local Site

15. Click Show to turn off the rulers
Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web Page
If Rulers are turned on, click View on the Application bar, point to Rulers, and then point to Show on the Rulers submenu to highlight the command
Click Show to turn off the rulers
Click Edit on the Application bar, and then click Preferences to display the Preferences dialog box
Click the New Document category, if necessary, delete .html as the Default extension, and then type .htm to change the Default extension
Creating a Dreamweaver Web Page and Local Site

16. Type the desired file name Click the Save button to save the file
Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web Page
Click the OK button in the Preferences dialog box to accept the setting and display the Document window
Click the Save button on the Standard toolbar to display the Save As dialog box
Type the desired file name
Click the Save button to save the file
Creating a Dreamweaver Web Page and Local Site

17. Hiding the Rulers, Changing the
Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web Page
Creating a Dreamweaver Web Page and Local Site

18. Adding a Background Image
Click Modify on the Application bar and then click Page Properties to display the Page Properties dialog box
Click the Appearance (HTML) category to display options for adding a background image to the page
Click the Background image Browse button to display the Select Image Source dialog box
Navigate to the location containing the desired background image
Creating a Dreamweaver Web Page and Local Site

19. Adding a Background Image
Click the desired file to select the file
Click the OK button to accept the background image and close the Select Image Source dialog box
Click the OK button to apply the image to the page
Click the Save button on the Standard toolbar to save the document
Creating a Dreamweaver Web Page and Local Site

20. Adding a Background Image
Creating a Dreamweaver Web Page and Local Site

21. Hiding the Panel Groups
Click Window on the Application bar and then click Hide Panels to close the Files panel and the Property inspector
Creating a Dreamweaver Web Page and Local Site

22. Adding Text
Click in the Document window, type the desired text, and then press the ENTER key at the end of each line of text
Creating a Dreamweaver Web Page and Local Site

23. Property Inspector
Creating a Dreamweaver Web Page and Local Site

24. Formatting Text with the Heading 1 Style
Position the insertion point anywhere in the heading text
Click the Format button in the Property inspector, and then click Heading 1 to apply the Heading 1 style
Creating a Dreamweaver Web Page and Local Site

25. Centering Text Click anywhere in the text to be centered
Click Format on the Application bar, point to Align, and then click Center
Creating a Dreamweaver Web Page and Local Site

26. Centering Text
Creating a Dreamweaver Web Page and Local Site

27. Creating an Unordered List
Enter the text for the unordered list, pressing the ENTER key after each item
Drag to select the items to be placed in the list
In the Property inspector, click the Unordered List button to indent the text and add a bullet to each line
Creating a Dreamweaver Web Page and Local Site

28. Creating an Unordered List
Creating a Dreamweaver Web Page and Local Site

29. Bolding Text Drag to select the text to bold
Click the Bold button in the Property inspector to bold the selected text
Creating a Dreamweaver Web Page and Local Site

30. Adding a Line Break
Click at the end of a line to prepare for a line break
Press SHIFT+ENTER to insert a line break
Creating a Dreamweaver Web Page and Local Site

31. Changing the Web Page Title
Drag to select the text in the Title text box on the Document toolbar
Type the desired Web page title in the Title text box and then press the ENTER key
Creating a Dreamweaver Web Page and Local Site

32. Special Characters
Creating a Dreamweaver Web Page and Local Site

33. Checking Spelling
Click at the beginning of the document to position the insertion point
Click Commands on the Application bar and then point to Check Spelling to highlight the command
Click Check Spelling to display the Check Spelling dialog box
Creating a Dreamweaver Web Page and Local Site

34. Checking Spelling
Creating a Dreamweaver Web Page and Local Site

35. Selecting Primary and Secondary Target Browsers
Click Edit on the Application bar and then click Preferences to open the Preferences dialog box
If necessary, click the Preview in Browser category in the Preferences dialog box to select the Preview in Browser category
Click the plus (+) button in the Preview in Browser area to display the Add Browser dialog box
Click the Browse button and then locate and click the desired Web browser program file
Creating a Dreamweaver Web Page and Local Site

36. Selecting Primary and Secondary Target Browsers
Click the Open button to add the browser name and path to the Add Browser dialog box
If necessary, click the Secondary browser check box to select it
Click the OK button to add the Web browser as the secondary browser
Click the OK button
Creating a Dreamweaver Web Page and Local Site

37. Selecting Primary and Secondary Target Browsers
Creating a Dreamweaver Web Page and Local Site

38. Previewing the Web Page
Click File on the Application bar, point to Preview in Browser, and then click the desired Web browser to display the Web page in the selected browser
Creating a Dreamweaver Web Page and Local Site

39. Printing a Web Page
Press the F12 key to display the page in your primary browser
Click the Print button arrow on the Internet Explorer toolbar to display the Print commands
Click Print to display the Print dialog box
Select an appropriate printer and click the Print button to send your Web page to the printer
Retrieve your printout
Close Internet Explorer
Creating a Dreamweaver Web Page and Local Site

40. Disabling the Welcome Screen, Closing the Web Site, and Quitting Dreamweaver
Click Edit on the Application bar and then click Preferences to display the Preferences dialog box
If necessary, click General in the Category column to display the General options
In the Document options section, click the Show Welcome Screen check box to deselect it
Click the OK button to accept the setting change
Click the Close button in the upper-right corner of the Dreamweaver window to close Dreamweaver
Creating a Dreamweaver Web Page and Local Site

41. Disabling the Welcome Screen, Closing the Web Site, and Quitting Dreamweaver
Creating a Dreamweaver Web Page and Local Site

42. Chapter Summary Describe Dreamweaver and identify its key features
Start and quit Dreamweaver
Describe the Dreamweaver window
Define a local site
Create and save a Web page
Add a background image
Open and close panels
Creating a Dreamweaver Web Page and Local Site

43. Chapter Summary Display the Property inspector
Format and modify text elements
Define and insert a line break
Change a Web page title and check spelling
Preview and print a Web page
Open a new Web page
Creating a Dreamweaver Web Page and Local Site

44. Adobe Dreamweaver CS5
Chapter 1 Complete