Presentation is loading. Please wait.

Presentation is loading. Please wait.

Dreamweaver CS3 Concepts and Techniques Chapter 1 Creating a Dreamweaver Web Page and Local Site.

Similar presentations


Presentation on theme: "Dreamweaver CS3 Concepts and Techniques Chapter 1 Creating a Dreamweaver Web Page and Local Site."— Presentation transcript:

1 Dreamweaver CS3 Concepts and Techniques 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 Dreamweaver Describe the Dreamweaver window and workspace 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 and describe the Property inspector Format and modify text elements on a Web page

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 Check spelling Preview a Web page in a Web browser

5 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

6 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

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

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

10 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

11 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

12 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

13 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

14 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

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

16 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

17 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

18 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

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

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

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

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

23 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

24 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

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

26 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

27 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

28 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

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

30 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

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

32 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

33 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

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

35 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

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

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

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 Type your name and then press SHIFT+ENTER Type the current date and then press the ENTER key

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

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

44 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

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

46 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

47 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

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

49 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

50 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

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

52 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

53 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

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

55 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

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

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

58 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

59 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

60 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

61 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

62 Dreamweaver CS3 Concepts and Techniques Chapter 1 Complete Creating a Dreamweaver Web Page and Local Site


Download ppt "Dreamweaver CS3 Concepts and Techniques Chapter 1 Creating a Dreamweaver Web Page and Local Site."

Similar presentations


Ads by Google