Chapter 1

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

2. Chapter 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 Chapter 1: Creating a Dreamweaver Web Page and Local Site

3. Chapter Objectives • Add a background image • Open and close panels • Display the Property inspector • Format and modify text elements Chapter 1: Creating a Dreamweaver Web Page and Local Site

4. Chapter Objectives • 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 Chapter 1: Creating a Dreamweaver Web Page and Local Site

5. Starting Dreamweaver • Click the Start button on the Windows Vista taskbar to display the Start menu • Point to Adobe Dreamweaver CS4 on the Start menu or point to All Programs on the Start menu and then point to Adobe Dreamweaver CS4 on the All Programs list • Click Adobe Dreamweaver CS4 on the Start menu 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 Chapter 1: Creating a Dreamweaver Web Page and Local Site

6. Starting Dreamweaver • Click HTML in the Create New column to close the Welcome screen and display the Dreamweaver workspace • If necessary, click the Maximize button, and then click the Design button on the Document toolbar to switch to Design view • If the Insert bar is not displayed, click Window on the Application bar and then click Insert Chapter 1: Creating a Dreamweaver Web Page and Local Site

7. Starting Dreamweaver Chapter 1: Creating a Dreamweaver Web Page and Local Site

8. 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 • Right-click a blank spot on the Insert bar to display the context menu Chapter 1: Creating a Dreamweaver Web Page and Local Site

9. Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening Panels • Point to Color Icons • 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 Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

11. Using Site Definition to Create a Local Web Site • Click Site on the Application bar to display the Site menu, and then point to New Site • Click New Site to display the Site Definition dialog box • If necessary, click the Advanced tab. Verify that Local Info is selected in the Category column • Type Alaska Parks in the Site name text box to name the site • Click the folder icon to the right of the Local root folder text box to display the Choose local root folder for site dialog box Chapter 1: Creating a Dreamweaver Web Page and Local Site

12. Using Site Definition to Create a Local Web Site • Navigate to where you will store your Web site files • Click the Create New Folder icon to create a folder and display the New Folder text box • Type your last name and first initial (with no spaces between your last name and initial) in the New Folder text box • Press the ENTER key to open the new folder Chapter 1: Creating a Dreamweaver Web Page and Local Site

13. Using Site Definition to Create a Local Web Site • Click the Create New Folder icon to create a folder within the your name folder • Type parks as the name of the new folder and then press the ENTER key to create the parks subfolder • Click the Select button to display the Site Definition dialog box and select parks as the local root folder Chapter 1: Creating a Dreamweaver Web Page and Local Site

14. Using Site Definition to Create a Local Web Site • Click the folder icon to the right of the Default images folder text box to specify the folder for the images • If necessary, navigate to the your name\parks folder • Click the Create New Folder icon to create a subfolder in the parks folder • Type images as the name of the new folder and then press the ENTER key to create and open the folder Chapter 1: Creating a Dreamweaver Web Page and Local Site

15. Using Site Definition to Create a Local Web Site • Click the Select button to select the images folder as the default folder for images and to display the Site Definition dialog box • Verify that the Enable cache check box is selected in the Site Definition dialog box • Click the OK button to display the Dreamweaver workspace. The Alaska Parks Web site hierarchy is displayed in the Files panel Chapter 1: Creating a Dreamweaver Web Page and Local Site

16. Using Site Definition to Create a Local Web Site Chapter 1: Creating a Dreamweaver Web Page and Local Site

17. Copying Data Files to the Local Web Site • Click the Start button on the Windows taskbar and then click Computer to display the Computer window. If necessary, click the Views button arrow on the toolbar and then click List • Navigate to the location of the data files for Chapter 1 • Double-click the folder containing your data files, and then double-click the Chapter01 folder to open it • Double-click the parks folder to open it • Right-click the parks_bkg image file to display a context menu • Point to the Copy command on the context menu Chapter 1: Creating a Dreamweaver Web Page and Local Site

18. Copying Data Files to the Local Web Site • Click Copy and then click the Back button the number of times necessary to navigate to the your name folder • Double-click the your name folder, double-click the parks folder, and then double-click the images folder to open the images folder for your Web site • Right-click anywhere in the open window to display the context menu • Point to the Paste command to highlight it Chapter 1: Creating a Dreamweaver Web Page and Local Site

19. Copying Data Files to the Local Web Site • Click the Paste command to paste the parks_bkg image into the Alaska Parks Web site images folder • Click the images window’s Close button to close the images folder window • Double-click the images folder in the Dreamweaver Files panel to open the images folder Chapter 1: Creating a Dreamweaver Web Page and Local Site

20. Copying Data Files to the Local Web Site Chapter 1: Creating a Dreamweaver Web Page and Local Site

21. 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 • 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 as the default Chapter 1: Creating a Dreamweaver Web Page and Local Site

22. Hiding the Rulers, Changing the .htm Default, and Saving a Document as a Web Page • Click the OK button 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 index as the file name • Click the Save button to save the file in the Files panel under Local Files Chapter 1: Creating a Dreamweaver Web Page and Local Site

23. Hiding the Rulers, Changing the .htm Default, and Saving a Document as a Web Page Chapter 1: Creating a Dreamweaver Web Page and Local Site

24. Adding a Background Image to the Index Page • 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 • Double-click the images folder to display the images file list and then click the parks_bkg file Chapter 1: Creating a Dreamweaver Web Page and Local Site

25. Adding a Background Image to the Index Page • Click the OK button to accept the background image, and then click OK to apply the image to the page • Click the Save button on the Standard toolbar to save the document Chapter 1: Creating a Dreamweaver Web Page and Local Site

26. Adding a Background Image to the Index Page Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

28. Adding a Heading and Introductory Paragraph Text • Type the heading Alaska National Parks as shown in Table 1–1, and then press the ENTER key • Type the text of Part 1 as shown in Table 1–1, and then press the ENTER key • Type the text of Part 2 as shown in Table 1–1 on the previous page, and then press the ENTER key to insert a blank line • Type the text of Part 3 as shown in Table 1–1, and then press the ENTER key to insert a blank line Chapter 1: Creating a Dreamweaver Web Page and Local Site

29. Adding a Heading and Introductory Paragraph Text • Type the three items for the bulleted list as shown in Table 1–1. Press the ENTER key after each entry to insert space between the lines • Type the closing paragraph shown in Table 1–1, and then press the ENTER key to insert a blank line • Click the Save button on the Standard toolbar to save your work Chapter 1: Creating a Dreamweaver Web Page and Local Site

30. Adding a Heading and Introductory Paragraph Text Chapter 1: Creating a Dreamweaver Web Page and Local Site

31. Formatting Text with the Heading 1 Style • Click Window on the Application bar, and then click Properties to display the Property inspector • If necessary, scroll up and then position the insertion point anywhere in the heading text, Alaska National Parks • Click the Format button arrow in the Property inspector, and then point to Heading 1 • Click Heading 1 to apply the Heading 1 style to the Alaska National Parks title text Chapter 1: Creating a Dreamweaver Web Page and Local Site

32. Formatting Text with the Heading 1 Style Chapter 1: Creating a Dreamweaver Web Page and Local Site

33. Centering the Web Page Heading • If necessary, click anywhere in the heading, Alaska National Parks • Click the Format menu on the Application bar, point to Align, and then point to Center • Click Center on the Align submenu to center the heading Chapter 1: Creating a Dreamweaver Web Page and Local Site

34. Centering the Web Page Heading Chapter 1: Creating a Dreamweaver Web Page and Local Site

35. Creating an Unordered List • Click to the left of the line, Alaska contains eight national parks/preserves and four national preserves • Drag to select the text, Alaska contains eight national parks/preserves and four national preserves. Three of the more popular parks are Denali National Park and Preserve, Glacier Bay National Park and Preserve, and Gates of the Arctic National Park and Preserve, and the next two paragraphs • Click the Unordered List button to indent and to add a bullet to each line Chapter 1: Creating a Dreamweaver Web Page and Local Site

36. Creating an Unordered List Chapter 1: Creating a Dreamweaver Web Page and Local Site

37. Bolding Text • If necessary, drag to select all of the lines of the bulleted points • Click the Bold button in the Property inspector to bold the selected text, and then click anywhere in the Document window to deselect the text Chapter 1: Creating a Dreamweaver Web Page and Local Site

38. Adding a Line Break • Click at the end of the first bulleted item • Press SHIFT+ENTER two times to insert a blank line • Press SHIFT+ENTER two times at the end of the second bulleted item to insert a blank line between the second and third bulleted list items Chapter 1: Creating a Dreamweaver Web Page and Local Site

39. Adding a Line Break Chapter 1: Creating a Dreamweaver Web Page and Local Site

40. Adding Your Name and Date • If necessary, scroll down to display the closing paragraph. Click at the end of the closing paragraph • Press the ENTER key to move the insertion point to the next paragraph • Type your name and then press SHIFT+ENTER to move the insertion point to the next line • Type the current date and then press the ENTER key to add your name and the current date to the Web page Chapter 1: Creating a Dreamweaver Web Page and Local Site

41. Adding Your Name and Date Chapter 1: Creating a Dreamweaver Web Page and Local Site

42. Changing the Web Page Title • Drag to select the text, Untitled Document, in the Title text box on the Document toolbar • Type Alaska National Parks in the Title text box and then press the ENTER key • Click the Save button on the Standard toolbar to save the document Chapter 1: Creating a Dreamweaver Web Page and Local Site

43. Changing the Web Page Title Chapter 1: Creating a Dreamweaver Web Page and Local Site

44. Checking Spelling • Click at the beginning of the document • Click Commands on the Application bar and then point to Check Spelling • Click Check Spelling to display the Check Spelling dialog box • The Dreamweaver spelling checker displays the word, Inupiat, in the Word not found in dictionary text box. Suggestions for the correct spelling are displayed in the Suggestions list Chapter 1: Creating a Dreamweaver Web Page and Local Site

45. Checking Spelling • The word is spelled correctly, so click the Ignore button to continue with the spell checking • Continue to check the spelling and, as necessary, correct any misspelled word by accepting the suggested replacement, by clicking the Change or Change All buttons, or by typing the correct word in the Change to text box. Click Ignore when proper names are displayed as errors • Click the OK button and then press CTRL+S to save any changes Chapter 1: Creating a Dreamweaver Web Page and Local Site

46. Checking Spelling Chapter 1: Creating a Dreamweaver Web Page and Local Site

47. Selecting Primary and Secondary Target Browsers • Click Edit on the Application bar and then point to Preferences • Click Preferences and then, if necessary, click the Preview in Browser category in the Preferences dialog box • Click the plus (+) button in the Preview in Browser area to display the Add Browser dialog box • Click the Browse button and then locate the Firefox file. Most likely this file is located on Local Drive (C:). Use the following path to locate the file: C:Program Files\Mozilla Firefox\ firefox. The path and file name on your computer may be different • Click the Open button to add the browser name and path to the Add Browser dialog box Chapter 1: Creating a Dreamweaver Web Page and Local Site

48. Selecting Primary and Secondary Target Browsers • If necessary, click the Secondary browser check box to select it. The Name text box displays Firefox.exe. The Application text box displays the path and file name. The path and spelling of Firefox on your computer may be different from those shown • Click the OK button to add Firefox as the secondary browser • If necessary, click the Preview using temporary file check box to select it • Click the OK button. If a Dreamweaver CS4 dialog box appears, click the OK button Chapter 1: Creating a Dreamweaver Web Page and Local Site

49. Selecting Primary and Secondary Target Browsers Chapter 1: Creating a Dreamweaver Web Page and Local Site

50. Previewing the Web Page • Click File on the Application bar, point to Preview in Browser, and then click to select Iexplore or your selected browser name • If necessary, maximize your browser window • Click the Internet Explorer Close button Chapter 1: Creating a Dreamweaver Web Page and Local Site