Creating a Dreamweaver Web Page and Local Site

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

• Define and insert a line break
• Change a Web page title
• Check spelling
• Preview a Web page in a Web browser

5
Chapter Objectives

• Print a Web page
• Define Dreamweaver Help
• Quit Dreamweaver
• Open a new Web page

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
Starting Dreamweaver
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
Displaying the Standard Toolbar and Closing and
Opening Panels
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
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
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
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
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
Using Site Definition to Create a Local Web 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
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
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
Copying Data Files to the Local Web 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
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
Hiding the Rulers, Changing the .htm Default, and
Saving a Document as a Web Page
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
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
Adding a Background Image to the Index Page
26
Hiding the Panel Groups

• Click the expander arrow on the panel groups
  vertical bar
• Click the Property inspector expander arrow

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
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
Adding Text
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
Formatting Text with Heading 1
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
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
Changing the Font Type
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
Creating an Unordered List
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
Adding a Line Break

• Click at the end of the first bulleted item
• Press SHIFTENTER two times
• Press SHIFTENTER two times at the end of the
  second bulleted item to insert blank lines
  between the second and third bulleted list items
• Press SHIFTENTER two times at the end of the
  third bulleted list item

39
Adding a Line Break
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 SHIFTENTER
• Type the current date and then press the ENTER key

41
Adding Your Name and Date
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 336633 (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
Changing the Text Color
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
Changing the Web Page Title
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
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 CTRLS to save
  any changes

48
Checking Spelling
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 CProgram Files\Mozilla
  Firefox\firefox. The path and file name on your
  computer may be different
• Click the Open button

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
Selecting Primary and Secondary Target Browsers
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 Explorers Close button

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 Firefoxs Close button

54
Previewing the Web Page
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
  Explorers Close button

56
Printing a Web Page
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 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 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 Summary

• Define and insert a line break
• Change a Web page title
• Check spelling
• Preview a Web page in a Web browser

61
Chapter Summary

• Print a Web page
• Define Dreamweaver Help
• Quit Dreamweaver
• Open a new Web page

62
Chapter 1 Complete

• Creating a Dreamweaver Web Page and Local Site