Transcript Project 1 - Pleasant Valley High School

Dreamweaver CS4
Concepts and Techniques
Chapter 1
Creating a Dreamweaver Web Page
and Local Site
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
2
Chapter Objectives
•
•
•
•
Add a background image
Open and close panels
Display the Property inspector
Format and modify text elements
Chapter 1: Creating a Dreamweaver Web Page and Local Site
3
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
4
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
5
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
Starting Dreamweaver
Chapter 1: Creating a Dreamweaver Web Page and Local Site
7
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
8
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
Displaying the Standard Toolbar, Changing the
Icon Colors, 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 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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
11
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
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 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
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 to specify the folder for the
images
• If necessary, navigate to the your name\parks
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
14
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
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 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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
17
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
18
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
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
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
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 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
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
23
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
24
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
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 Window on the Application bar and then
click Hide Panels to close the Files panel and the
Property inspector
Chapter 1: Creating a Dreamweaver Web Page and Local Site
27
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
28
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
29
Adding a Heading and Introductory
Paragraph Text
Chapter 1: Creating a Dreamweaver Web Page and Local Site
30
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
31
Formatting Text with the Heading 1
Style
Chapter 1: Creating a Dreamweaver Web Page and Local Site
32
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
33
Centering the Web Page Heading
Chapter 1: Creating a Dreamweaver Web Page and Local Site
34
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
35
Creating an Unordered List
Chapter 1: Creating a Dreamweaver Web Page and Local Site
36
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
37
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
38
Adding a Line Break
Chapter 1: Creating a Dreamweaver Web Page and Local Site
39
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
40
Adding Your Name and Date
Chapter 1: Creating a Dreamweaver Web Page and Local Site
41
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
42
Changing the Web Page Title
Chapter 1: Creating a Dreamweaver Web Page and Local Site
43
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
44
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
45
Checking Spelling
Chapter 1: Creating a Dreamweaver Web Page and Local Site
46
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 Files\Mozilla Firefox\
firefox. 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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
47
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
48
Selecting Primary and Secondary
Target Browsers
Chapter 1: Creating a Dreamweaver Web Page and Local Site
49
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
50
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
51
Previewing the Web Page
Chapter 1: Creating a Dreamweaver Web Page and Local Site
52
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
53
Printing a Web Page
Chapter 1: Creating a Dreamweaver Web Page and Local Site
54
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
55
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
56
Chapter Summary
•
•
•
•
Add a background image
Open and close panels
Display the Property inspector
Format and modify text elements
Chapter 1: Creating a Dreamweaver Web Page and Local Site
57
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
Chapter 1: Creating a Dreamweaver Web Page and Local Site
58
Dreamweaver CS4
Concepts and Techniques
Chapter 1 Complete
Creating a Dreamweaver Web Page
and Local Site