AdobeDreamweaver CS5

Chapter 1

Creating a Dreamweaver Web Page and Local Site

Creating a Dreamweaver Web Page and Local Site 2

• 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 • Add a background image • Open and close panels

Objectives

Creating a Dreamweaver Web Page and Local Site 3

• Display the Property inspector • Format and modify text elements • 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

Objectives

Creating a Dreamweaver Web Page and Local Site 4

Project – Montana Parks Web Site Home Page

Creating a Dreamweaver Web Page and Local Site 5

• Review the Dreamweaver workspace window• Determine the location for the local site• Define the local site• Add a background for the Web page• Select the words and fonts for the text• Identify how to format various elements of the

text• Review final tasks

General Project Guidelines

Creating a Dreamweaver Web Page and Local Site 6

• Click the Start button on the Windows 7 taskbar to display the Start menu

• Click Adobe Dreamweaver CS5 on the Start menu or point to All Programs on the Start menu and then click Adobe Dreamweaver CS5 on the All Programs list 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

• Click HTML in the Create New column to close the Welcome screen and display the Dreamweaver workspace

Starting Dreamweaver

Creating a Dreamweaver Web Page and Local Site 7

• If necessary, click the Maximize button to maximize the Dreamweaver window

• If necessary, click the Design button on the Document toolbar to switch to Design view

• If the Browser Navigation toolbar is displayed, right-click a blank spot on the Document toolbar, point to Toolbars, and then click Browser Navigation to remove the check mark so the Browser Navigation toolbar is not displayed in the Dreamweaver window

• If the Insert bar is not displayed, click Window on the Application bar and then click Insert

Starting Dreamweaver

Creating a Dreamweaver Web Page and Local Site 8

Starting Dreamweaver

Creating a Dreamweaver Web Page and Local Site 9

• 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 • Point to Color Icons on the context menu to highlight

the command

Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening Panels

Creating a Dreamweaver Web Page and Local Site 10

• 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

Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening Panels

Creating a Dreamweaver Web Page and Local Site 11

Displaying the Standard Toolbar, Changing the Icon Colors, and Closing and Opening Panels

Creating a Dreamweaver Web Page and Local Site 12

• Click Site on the Application bar to display the Site menu, and then point to New Site to highlight that command

• Click New Site to display the Site Setup dialog box• Type the desired site name in the Site name text box• Click the Browse for folder icon to display the Choose

Root Folder dialog box• Navigate to the desired location where you will store the

Web site files• Click the Create New Folder icon to create a folder for

your local site, if desired

Using Site Setup to Create a Local Web Site

Creating a Dreamweaver Web Page and Local Site 13

• Click the Select button to display the Site Setup dialog box• Click Advanced Settings in the category list to display the

option for selecting the default images folder• Click the Browse for folder icon to specify the folder for the

images • Navigate to the folder to contain the images• Click the Select button to select the desired folder as the

default folder for images and to display the Site Setup dialog box

• Click the Save button to save the site settings and display the Dreamweaver workspace

Using Site Setup to Create a Local Web Site

Creating a Dreamweaver Web Page and Local Site 14

Using Site Setup to Create a Local Web Site

Creating a Dreamweaver Web Page and Local Site 15

• If Rulers are turned on, click View on the Application bar, point to Rulers, and then point to Show on the Rulers submenu to highlight the command

• 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 to change the Default extension

Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web Page

Creating a Dreamweaver Web Page and Local Site 16

• Click the OK button in the Preferences dialog box 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 the desired file name• Click the Save button to save the file

Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web Page

Creating a Dreamweaver Web Page and Local Site 17

Hiding the Rulers, Changing the .html Default, and Saving a Document as a Web Page

Creating a Dreamweaver Web Page and Local Site 18

• 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

• Navigate to the location containing the desired background image

Adding a Background Image

Creating a Dreamweaver Web Page and Local Site 19

• Click the desired file to select the file• Click the OK button to accept the background

image and close the Select Image Source dialog box

• Click the OK button to apply the image to the page

• Click the Save button on the Standard toolbar to save the document

Adding a Background Image

Creating a Dreamweaver Web Page and Local Site 20

Adding a Background Image

Creating a Dreamweaver Web Page and Local Site 21

• Click Window on the Application bar and then click Hide Panels to close the Files panel and the Property inspector

Hiding the Panel Groups

Creating a Dreamweaver Web Page and Local Site 22

• Click in the Document window, type the desired text, and then press the ENTER key at the end of each line of text

Adding Text

Creating a Dreamweaver Web Page and Local Site 23

Property Inspector

Creating a Dreamweaver Web Page and Local Site 24

• Position the insertion point anywhere in the heading text

• Click the Format button in the Property inspector, and then click Heading 1 to apply the Heading 1 style

Formatting Text with the Heading 1 Style

Creating a Dreamweaver Web Page and Local Site 25

• Click anywhere in the text to be centered• Click Format on the Application bar, point to Align,

and then click Center

Centering Text

Creating a Dreamweaver Web Page and Local Site 26

Centering Text

Creating a Dreamweaver Web Page and Local Site 27

• Enter the text for the unordered list, pressing the ENTER key after each item

• Drag to select the items to be placed in the list• In the Property inspector, click the Unordered List

button to indent the text and add a bullet to each line

Creating an Unordered List

Creating a Dreamweaver Web Page and Local Site 28

Creating an Unordered List

Creating a Dreamweaver Web Page and Local Site 29

Bolding Text

• Drag to select the text to bold• Click the Bold button in the Property inspector to

bold the selected text

Creating a Dreamweaver Web Page and Local Site 30

• Click at the end of a line to prepare for a line break

• Press SHIFT+ENTER to insert a line break

Adding a Line Break

Creating a Dreamweaver Web Page and Local Site 31

• Drag to select the text in the Title text box on the Document toolbar

• Type the desired Web page title in the Title text box and then press the ENTER key

Changing the Web Page Title

Creating a Dreamweaver Web Page and Local Site 32

Special Characters

Creating a Dreamweaver Web Page and Local Site 33

• Click at the beginning of the document to position the insertion point

• Click Commands on the Application bar and then point to Check Spelling to highlight the command

• Click Check Spelling to display the Check Spelling dialog box

Checking Spelling

Creating a Dreamweaver Web Page and Local Site 34

Checking Spelling

Creating a Dreamweaver Web Page and Local Site 35

• Click Edit on the Application bar and then click Preferences to open the Preferences dialog box

• If necessary, click the Preview in Browser category in the Preferences dialog box to select the Preview in Browser category

• Click the plus (+) button in the Preview in Browser area to display the Add Browser dialog box

• Click the Browse button and then locate and click the desired Web browser program file

Selecting Primary and Secondary Target Browsers

Creating a Dreamweaver Web Page and Local Site 36

• Click the Open button to add the browser name and path to the Add Browser dialog box

• If necessary, click the Secondary browser check box to select it

• Click the OK button to add the Web browser as the secondary browser

• Click the OK button

Selecting Primary and Secondary Target Browsers

Creating a Dreamweaver Web Page and Local Site 37

Selecting Primary and Secondary Target Browsers

Creating a Dreamweaver Web Page and Local Site 38

• Click File on the Application bar, point to Preview in Browser, and then click the desired Web browser to display the Web page in the selected browser

Previewing the Web Page

Creating a Dreamweaver Web Page and Local Site 39

• Press the F12 key to display the page in your primary browser

• Click the Print button arrow on the Internet Explorer toolbar to display the Print commands

• Click Print to display the Print dialog box • Select an appropriate printer and click the Print

button to send your Web page to the printer• Retrieve your printout• Close Internet Explorer

Printing a Web Page

Creating a Dreamweaver Web Page and Local Site 40

• Click Edit on the Application bar and then click Preferences to display the Preferences dialog box

• If necessary, click General in the Category column to display the General options

• In the Document options section, click the Show Welcome Screen check box to deselect it

• Click the OK button to accept the setting change • Click the Close button in the upper-right corner of

the Dreamweaver window to close Dreamweaver

Disabling the Welcome Screen, Closing the Web Site, and Quitting Dreamweaver

Creating a Dreamweaver Web Page and Local Site 41

Disabling the Welcome Screen, Closing the Web Site, and Quitting Dreamweaver

Creating a Dreamweaver Web Page and Local Site 42

• 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 • Add a background image • Open and close panels

Chapter Summary

Creating a Dreamweaver Web Page and Local Site 43

• Display the Property inspector • Format and modify text elements • 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 Summary

Chapter 1 Complete

Adobe Dreamweaver CS5