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

2. 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

3. 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

4. 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

5. 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

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 6

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

8. 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

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 9

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

11. 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

12. 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

13. 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

14. 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 namearks 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

15. 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

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

17. 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

18. 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

19. 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

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

21. 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

22. 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

23. 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

24. 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

25. 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

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

27. 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

28. 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

29. 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

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

31. 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

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

33. 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

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

35. 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

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

37. 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

38. 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

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

40. 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

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

42. 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

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

44. 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

45. 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

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

47. 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 Filesozilla Firefoxfirefox. 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

48. 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

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

50. 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

51. Chapter 1: Creating a Dreamweaver Web Page and Local Site 51 Previewing the Web Page Click File on the Application bar and then point to Preview in Browser Click firefox.exe on the Preview in Browser submenu Click the Firefox Close button

52. Chapter 1: Creating a Dreamweaver Web Page and Local Site 52 Previewing the Web Page

53. Chapter 1: Creating a Dreamweaver Web Page and Local Site 53 Printing a Web Page Press F12 to display the page in your primary browser Point to the Print button on the Internet Explorer toolbar Click the Print arrow on the Internet Explorer toolbar, and then click Print The Print dialog box is displayed. Select an appropriate printer and click the Print button to send your Web page to the printer Retrieve your printout

54. Chapter 1: Creating a Dreamweaver Web Page and Local Site 54 Printing a Web Page

55. Chapter 1: Creating a Dreamweaver Web Page and Local Site 55 Disabling the Welcome Screen, Closing the Web Site, and Quitting Dreamweaver Click Edit on the Application bar and then click Preferences If necessary, click General in the Category column Click the Show Welcome Screen check box under Document options to deselect it, and then click the OK button Click the Close button in the upper-right corner of the Dreamweaver window to close Dreamweaver

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

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

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

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