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

2. Chapter Objectives Describe Dreamweaver and identify its key features
Start Dreamweaver
Describe the Dreamweaver window and workspace
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 and describe the Property inspector
Format and modify text elements on a Web page
Chapter 1: Creating a Dreamweaver Web Page and Local Site

4. Chapter Objectives Define and insert a line break
Change a Web page title
Check spelling
Preview a Web page in a Web browser
Chapter 1: Creating a Dreamweaver Web Page and Local Site

5. Chapter Objectives Print a Web page Define Dreamweaver Help
Quit Dreamweaver
Open a new Web page
Chapter 1: Creating a Dreamweaver Web Page and Local Site

6. Starting Dreamweaver
Click the Start button on the Windows taskbar, point to Adobe Dreamweaver CS3 on the Start menu or point to All Programs on the Start menu, and then point to Adobe Dreamweaver CS3 on the All Programs menu
Click Adobe Dreamweaver CS3
Click HTML in the Create New column. If necessary, maximize the Dreamweaver window and the Document window by clicking the Maximize button in the upper-right corner of the windows
If the Insert bar does not display, click Window on the menu 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 and Closing and Opening Panels
Click View on the menu bar, point to Toolbars, and then point to Standard on the Toolbars submenu
Click Standard
Press the F4 key
Press the F4 key again to redisplay the panels
Chapter 1: Creating a Dreamweaver Web Page and Local Site

9. Displaying the Standard Toolbar and Closing and Opening Panels
Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

11. Using Site Definition to Create a Local Web Site
If you are creating and saving your sites at another location or on other media, navigate to that location and substitute the location for Local Disk (C): default path
Click the Create New Folder icon
Type your last name and first initial (with no spaces between your last name and initial) in the folder text box
Press the ENTER key to select the folder
Chapter 1: Creating a Dreamweaver Web Page and Local Site

12. Using Site Definition to Create a Local Web Site
Click the Create New Folder icon
Type parks as the name of the new folder and then press the ENTER key
Double-click the parks folder name
Click the Select button
Chapter 1: Creating a Dreamweaver Web Page and Local Site

13. Using Site Definition to Create a Local Web Site
Click the folder icon to the right of the Default images folder text box
If necessary, navigate to the your name\parks folder
Click the Create New Folder icon
Type images as the name of the new folder and then press the ENTER key. Double-click the images folder
Chapter 1: Creating a Dreamweaver Web Page and Local Site

14. Using Site Definition to Create a Local Web Site
Click the Select button
Verify that the Refresh local file list automatically and the Enable cache check boxes are selected in the Site Definition dialog box
Click the OK button
Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

16. Copying Data Files to the Local Web Site
Click the Start button on the Windows taskbar and then click Computer. If necessary, click the Views button arrow on the toolbar and then click List
Double-click Local Disk (C:) and then navigate to the location of the data files for Chapter 1
Double-click the DataFiles folder and then double-click the Chap01 folder
Double-click the parks folder and then double- click the images folder
Right-click the parksbg image file
Chapter 1: Creating a Dreamweaver Web Page and Local Site

17. Copying Data Files to the Local Web Site
Point to the Copy command
Click Copy and then click the My Computer 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
Right-click anywhere in the open window to display the context menu
Chapter 1: Creating a Dreamweaver Web Page and Local Site

18. Copying Data Files to the Local Web Site
Point to the Paste command
Click the Paste command
Click the images window Close button
Double-click the images folder in the Dreamweaver Files panel
Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

20. Click Edit on the menu bar and then click Preferences
Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web Page
Click View on the menu bar, point to Rulers, and then point to Show on the Rulers submenu
Click Show
Click Edit on the menu bar and then click Preferences
Click the New Document category, delete .html as the default extension, and then type .htm as the default
Chapter 1: Creating a Dreamweaver Web Page and Local Site

21. Click the Save button on the Standard toolbar
Hiding the Rulers, Changing the .htm Default, and Saving a Document as a Web Page
Click the OK button
Click the Save button on the Standard toolbar
Type index as the file name
Click the Save button
Chapter 1: Creating a Dreamweaver Web Page and Local Site

22. Hiding the Rulers, Changing the
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

23. Adding a Background Image to the Index Page
Click Modify on the menu bar and then point to Page Properties
Click Page Properties
Verify that the Appearance category is selected
Click the Browse button and then click the images folder
Click the OK button
Chapter 1: Creating a Dreamweaver Web Page and Local Site

24. Adding a Background Image to the Index Page
Click the parksbg file
If necessary, click the Preview images check box to select it
Click the OK button in the Select Image Source dialog box and then point to the OK button in the Page Properties dialog box
Click the OK button and then click the Save button on the Standard toolbar
Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

26. Hiding the Panel Groups
Click the expander arrow on the panel groups vertical bar
Click the Property inspector expander arrow
Chapter 1: Creating a Dreamweaver Web Page and Local Site

27. Adding Text
Type the heading Colorado National Parks and Monuments as shown in Table 1-1 on page DW 67 and then press the ENTER key
Type the text of Part 1 as shown in Table 1-1 on page DW 67, and then press the ENTER key
Type the text of Part 2 as shown in Table 1-1, and then press the ENTER key
Type the text of Part 3 as shown in Table 1-1, and then press the ENTER key
Chapter 1: Creating a Dreamweaver Web Page and Local Site

28. Adding Text
Type the three items for the bulleted list as shown in Table 1-1. Press the ENTER key after each entry
Type the closing paragraph shown in Table 1-1, and then press the ENTER key
Click the Save button on the Standard toolbar
Chapter 1: Creating a Dreamweaver Web Page and Local Site

29. Adding Text
Chapter 1: Creating a Dreamweaver Web Page and Local Site

30. Formatting Text with Heading 1
If necessary, scroll up and then position the insertion point anywhere in the heading text, Colorado National Parks and Monuments. Click the expander arrow to expand the Property inspector
Click the Format box arrow in the Property inspector and then point to Heading 1
Click Heading 1
Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

32. Centering the Web Page Heading
If necessary, click anywhere in the heading, Colorado National Parks and Monuments. Click the Align Center button in the Property inspector
Chapter 1: Creating a Dreamweaver Web Page and Local Site

33. Changing the Font Type
Click to the left of the heading, Colorado National Parks and Monuments, and then drag through the entire heading
Click the Font box arrow and then point to Verdana, Arial, Helvetica, sans-serif
Click Verdana, Arial, Helvetica, sans-serif
Chapter 1: Creating a Dreamweaver Web Page and Local Site

34. Changing the Font Type
Chapter 1: Creating a Dreamweaver Web Page and Local Site

35. Creating an Unordered List
Click to the left of the line, “Four national parks are located in Colorado: Rocky Mountain, Black Canyon of the Gunnison, Great Sand Dunes, and Mesa Verde”
Drag to select the text, “Four national parks are located in Colorado: Rocky Mountain, Black Canyon of the Gunnison, Great Sand Dunes, and Mesa Verde”, and the next two lines
Point to the Unordered List button in the Property inspector
Click the Unordered List button
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 through the bulleted points to select all three lines
Click the Bold button 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
Press SHIFT+ENTER two times at the end of the second bulleted item to insert blank lines between the second and third bulleted list items
Press SHIFT+ENTER two times at the end of the third bulleted list item
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
Type your name and then press SHIFT+ENTER
Type the current date and then press the ENTER key
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 Text Color
If necessary, scroll up, select the heading, and then click the Text Color box in the Property inspector
Position the eyedropper on the shade of green represented by hexadecimal number # (row 2 and column 10 from the right)
Click the eyedropper to apply the color to the selected text, and then deselect the heading by clicking anywhere within it
Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

44. Changing the Web Page Title
Drag through the text, Untitled Document, in the Title text box on the Document toolbar
Type Colorado National Parks and Monuments in the Title text box and then press the ENTER key
Click the Save button on the Standard toolbar
Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

46. Checking Spelling Click at the beginning of the document
Click Text on the menu bar and then point to Check Spelling
Click Check Spelling
Chapter 1: Creating a Dreamweaver Web Page and Local Site

47. Checking Spelling Click the Ignore button
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 the OK button and then press CTRL+S to save any changes
Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

49. Selecting Primary and Secondary Target Browsers
Click Edit on the menu bar and then point to Preferences
Click Preferences and then, if necessary, click the Preview in Browser category
Click the plus (+) button in the Preview in Browser area
Click the Browse button and then locate the Mozilla 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
Chapter 1: Creating a Dreamweaver Web Page and Local Site

50. Selecting Primary and Secondary Target Browsers
If necessary, click the Secondary browser check box to select it
Click the OK button
If necessary, click the Preview using temporary file check box to select it
Click the OK button. If a Dreamweaver CS3 dialog box appears, click the OK button
Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

52. Previewing the Web Page
Click File on the menu bar, point to Preview in Browser, and then point to iexplore or your selected browser name
Click iexplore or your selected browser name
If necessary, maximize your browser window
Click Internet Explorer’s Close button
Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

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

55. Printing a Web Page Press F12
Click File on the menu bar of the Internet Explorer window and point to Print
Click Print. If necessary, select an appropriate printer
Click the Print button
Retrieve the printout and then click Internet Explorer’s Close button
Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

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

58. Chapter Summary Describe Dreamweaver and identify its key features
Start Dreamweaver
Describe the Dreamweaver window and workspace
Define a local site
Create and save a Web page
Chapter 1: Creating a Dreamweaver Web Page and Local Site

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

60. Chapter Summary Define and insert a line break Change a Web page title
Check spelling
Preview a Web page in a Web browser
Chapter 1: Creating a Dreamweaver Web Page and Local Site

61. Chapter Summary Print a Web page Define Dreamweaver Help
Quit Dreamweaver
Open a new Web page
Chapter 1: Creating a Dreamweaver Web Page and Local Site

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