Chapter 2

advertisement
Dreamweaver CS4
Concepts and Techniques
Chapter 2
Adding Web Pages, Links, and Images
Chapter Objectives
• Add pages to a Web site
• Describe Dreamweaver’s image accessibility
features
• Describe image file formats
• Insert, resize, and align images within a Web
page
Chapter 2: Adding Web Pages, Links, and Images
2
Chapter Objectives
•
•
•
•
Describe the different types of links
Create relative, absolute, and e-mail links
Describe how to change the color of links
Edit and delete links
Chapter 2: Adding Web Pages, Links, and Images
3
Chapter Objectives
•
•
•
•
Check spelling
Describe Code view, Split view, and Design view
Display Code view
Use Live view
Chapter 2: Adding Web Pages, Links, and Images
4
Copying Data Files to
the Parks Web Site
• Click the Start button on the Windows taskbar
and then click Computer to display the Computer
window
• Navigate to the location of the downloaded data
files for Chapter 2
• Double-click the folder containing your data files,
and then double-click the Chapter02 folder to
open it
• Double-click the parks folder to display the data
files
Chapter 2: Adding Web Pages, Links, and Images
5
Copying Data Files to
the Parks Web Site
• Click the aleutian image file or the first file in the
list
• Hold down the SHIFT key and then click the
tlingit image file, or the last file in the list
• Right-click the selected files to display the context
menu
• Click the Copy command and then navigate to
the your name folder, which contains the folders
and files for the Alaska Parks Web site
Chapter 2: Adding Web Pages, Links, and Images
6
Copying Data Files to
the Parks Web Site
• 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
• Click the Paste command to copy the images into
the Alaska Parks Web site images folder. Verify
that the folder now contains nine images,
including the parks_bkg image
Chapter 2: Adding Web Pages, Links, and Images
7
Starting Dreamweaver and Opening
the Alaska Parks Web Site
• Click the Start button on the Windows taskbar
• 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 to start Dreamweaver
• If necessary, display the panel groups
• If the Alaska Parks hierarchy is not displayed click the Files
panel arrow button and then click Alaska Parks on the Files
pop-up menu to display the Alaska Parks Web site hierarchy
in the Files panel
• Click Alaska Parks to display the Alaska Parks Web site
hierarchy
Chapter 2: Adding Web Pages, Links, and Images
8
Starting Dreamweaver and Opening
the Alaska Parks Web Site
Chapter 2: Adding Web Pages, Links, and Images
9
Opening a New Document Window
• Click File on the Application bar and then point to
New
• Click New to display the New Document dialog
box. If necessary, click Blank Page
• Click HTML in the Page Type column to specify
the type of Web page you are creating. Verify that
XHTML 1.0 Transitional is selected in the
DocType pop-up menu
• Click the Create button to create and display a
new Untitled-1 document
Chapter 2: Adding Web Pages, Links, and Images
10
Opening a New Document Window
• If necessary, display the Standard toolbar
• Click the Save button on the Standard toolbar to
display the Save As dialog box
• Type preserves.htm in the File name text box
to provide a descriptive name for the Web page
• Click the Save button to save the preserves page
in the parks local folder
Chapter 2: Adding Web Pages, Links, and Images
11
Opening a New Document Window
Chapter 2: Adding Web Pages, Links, and Images
12
Creating the Alaska National
Preserves Web Page
• Type the heading for the Alaska National
Preserves Web page as shown in Table 2–1.
Press the ENTER key to create a new paragraph
• Type the rest of the text as shown in Table 2–1.
Press the ENTER key as indicated in the table to
add blank lines between the paragraphs
Chapter 2: Adding Web Pages, Links, and Images
13
Creating the Alaska National
Preserves Web Page
Chapter 2: Adding Web Pages, Links, and Images
14
Formatting the Alaska National
Preserves Web Page
• If necessary, scroll up to the top of the Web page,
and then apply Heading 1 to the heading text
• Center the heading
• Add bullets to the following three paragraphs that
begin: Bering Land Bridge National Preserve,
Noatak National Preserve, and Yukon-Charley
Rivers National Preserve
Chapter 2: Adding Web Pages, Links, and Images
15
Formatting the Alaska National
Preserves Web Page
• Bold the names of the preserves at the beginning of each
of the three paragraphs: Bering Land Bridge National
Preserve, Noatak National Preserve, and Yukon-Charley
Rivers National Preserve
• Add two line breaks after the bullet paragraphs describing
the Bering Land Bridge National Preserve, and the
Noatak National Preserve
• On the Document toolbar, type Alaska National
Preserves in the Title text box and then press ENTER
• Click the Save button to save your changes to the
preserves.htm Web page
Chapter 2: Adding Web Pages, Links, and Images
16
Formatting the Alaska National
Preserves Web Page
Chapter 2: Adding Web Pages, Links, and Images
17
Opening a New Document Window
• Click File on the Application bar, click New, and
then, if necessary, click Blank Page
• Click HTML in the Page Type column to select
the page type for the Web page
• Click the Create button to create and display the
new blank document Web page
• Save the Web page as historical_sites.htm in the
parks folder
Chapter 2: Adding Web Pages, Links, and Images
18
Opening a New Document Window
Chapter 2: Adding Web Pages, Links, and Images
19
Creating the National Parks
Web Page
• Type the text of the Web page as shown in Table 2–2, and
then click the Save button to save your changes
• If necessary, scroll to the top of the Web page and then
apply Heading 1 to the title
• Center the title
• Bold the names of each of the three historical sites where
they are used as subtitles to make them stand out on the
page
• Type Alaska National Historical Sites as the
Web page title
• Click the Save button on the Standard toolbar to save your
work
Chapter 2: Adding Web Pages, Links, and Images
20
Creating the National Parks
Web Page
Chapter 2: Adding Web Pages, Links, and Images
21
Adding a Background Image to the Alaska
National Historical Sites Web Page
• If necessary, click the historical_sites.htm tab
• Click Modify on the Application bar and then click
Page Properties to open the Page Properties
dialog box
• Click Appearance (HTML) in the Category
column
• Click the Browse button to the right of the
Background image text box to navigate to the
images folder.
Chapter 2: Adding Web Pages, Links, and Images
22
Adding a Background Image to the Alaska
National Historical Sites Web Page
• If necessary, navigate to and then open the
images folder
• Click parks_bkg.jpg and then click the OK button
in the Select Image Source dialog box to select
the image
• Click the OK button in the Page Properties dialog
box to apply the background image
• Click the Save button on the Standard toolbar
Chapter 2: Adding Web Pages, Links, and Images
23
Adding a Background Image to the Alaska
National Historical Sites Web Page
Chapter 2: Adding Web Pages, Links, and Images
24
Adding a Background Image to the
Alaska National Preserves Web Page
• Click the preserves.htm tab
• Click Modify on the Application bar and then click
Page Properties to open the Page Properties
dialog box
• Click Appearance (HTML) in the Category
column
• Click the Browse button to the right of the
Background image box to navigate to the images
folder
Chapter 2: Adding Web Pages, Links, and Images
25
Adding a Background Image to the
Alaska National Preserves Web Page
• Click parks_bkg.jpg and then click the OK button
in the Select Image Source dialog box
• Click the OK button in the Page Properties dialog
box to apply the background image
• Click the Save button on the Standard toolbar
Chapter 2: Adding Web Pages, Links, and Images
26
Adding a Background Image to the
Alaska National Preserves Web Page
Chapter 2: Adding Web Pages, Links, and Images
27
Setting Invisible Element Preferences
and Turning on Visual Aids
• Click Edit on the Application bar and then click
Preferences to display the Preferences dialog box
• Click Invisible Elements in the Category list to display the
Invisible Elements options in the Preferences dialog box
• Click the Anchor points for aligned elements check box to
make it easier to align elements
• Click the OK button to redisplay the Document window
• Click View on the Application bar, point to Visual Aids,
and then point to and highlight Invisible Elements on the
Visual Aids submenu
• If necessary, click Invisible Elements to add a check mark
to the Invisible Elements command
Chapter 2: Adding Web Pages, Links, and Images
28
Setting Invisible Element Preferences
and Turning on Visual Aids
Chapter 2: Adding Web Pages, Links, and Images
29
Opening a Web Page from a Local
Web Site
• Double-click index.htm in the Files panel to open
the index page. If necessary, double-click images
to expand the images folder
• If the Standard toolbar is not displayed, click View
on the Application bar, point to Toolbars, and
then click Standard to display the Standard
toolbar
Chapter 2: Adding Web Pages, Links, and Images
30
Opening a Web Page from a Local
Web Site
Chapter 2: Adding Web Pages, Links, and Images
31
Inserting an Image into the Index
Page
• If necessary, scroll to the top of the page
• Click the Assets panel tab to display the panel.
Verify that the Images icon is selected
• Click map01.gif in the Assets panel to select the
image file
• Drag map01.gif from the Assets panel to the left
of the first bulleted line. The Image Tag
Accessibility Attributes dialog box is displayed
Chapter 2: Adding Web Pages, Links, and Images
32
Inserting an Image into the Index
Page
• Type Alaska Map in the Alternate text text box
to provide alternate text for the map01 image
• Click the OK button to display the selected image
in the Document window and to view the attribute
changes in the Property inspector
Chapter 2: Adding Web Pages, Links, and Images
33
Inserting an Image into the Index
Page
Chapter 2: Adding Web Pages, Links, and Images
34
Aligning an Image
• Click the panel groups Collapse to Icons arrow to
collapse the panel groups
• If necessary, click the map01 image to select it
• Click the Align button arrow in the Property
inspector
• Point to Right on the pop-up menu
• Click Right to move the selected image to the
right side of the window and to display the
element marker
Chapter 2: Adding Web Pages, Links, and Images
35
Aligning an Image
Chapter 2: Adding Web Pages, Links, and Images
36
Adjusting the Image Size and the
Horizontal and Vertical Space
• If necessary, click to select the image
• Click the W text box in the Property inspector and
type 525 to adjust the width of the image
• Press the TAB key and type 390 in the H text box
to adjust the height of the image
• Press the ENTER key
Chapter 2: Adding Web Pages, Links, and Images
37
Adjusting the Image Size and the
Horizontal and Vertical Space
• Click the V Space text box and type 10 to adjust
the vertical space between the image and the text
• Press the TAB key and type 25 in the H Space
text box to adjust the horizontal space between
the image and the text
• Press the TAB key
• Click the image to remove the highlighting and to
view the added space and the reduced size
Chapter 2: Adding Web Pages, Links, and Images
38
Adjusting the Image Size and the
Horizontal and Vertical Space
Chapter 2: Adding Web Pages, Links, and Images
39
Inserting the Second Image
• If necessary, scroll up and position the insertion
point to the left of the second paragraph
• Expand the panel groups, and then expand the
Assets panel to display the images
• In the Assets panel, click mountain01.jpg to
select the image
• Drag the image to the insertion point to add the
image to the Web page
Chapter 2: Adding Web Pages, Links, and Images
40
Inserting the Second Image
• Type Alaska Mountains in the Alternate text text box,
and then click the OK button to insert the mountain01 image
into the Web page
• In the Property inspector, click the Align button arrow
• Click Left in the Align pop-up menu to move the image to the
left side of the window and to adjust the text to the right. The
bullets and part of the text are hidden by the image,
indicating the horizontal and vertical spacing needs to be
adjusted
• In the Property inspector, adjust the W to 165 and the H to
210
• Click the H Space box and type 20 as the horizontal space
Chapter 2: Adding Web Pages, Links, and Images
41
Inserting the Second Image
• Press the TAB key
• Click anywhere in the Document window to deselect
the image and view the additional vertical and
horizontal space added between the text and images
• Click the Save button on the Standard toolbar
• Press the F12 key to view the Web page in your
browser
• Move the mouse pointer over the mountain01 and
map01 images to display the Alt text
• Close the browser to return to Dreamweaver
Chapter 2: Adding Web Pages, Links, and Images
42
Inserting the Second Image
Chapter 2: Adding Web Pages, Links, and Images
43
Inserting and Aligning an Image in
the Alaska National Parks Web Page
• Click the preserves.htm document tab. If necessary,
display the panel groups and click the Assets tab
• Position the insertion point to the left of the first
sentence after the heading
• Drag the beringia_map image file from the Assets panel
to the insertion point
• Type Beringia Map in the Alternate text text box and
then click the OK button to display the map
• Type 10 in the H Space box to add horizontal space.
Press the ENTER key
Chapter 2: Adding Web Pages, Links, and Images
44
Inserting and Aligning an Image in
the Alaska National Parks Web Page
• Click the Align button arrow and then click Right
to align the image to the right side of the window
• Drag the falcon image file from the Assets panel
to the end of the first sentence
• Type Alaska Falcon in the Alternate text text
box and then click the OK button
• Click the Align button arrow and then click Left to
align the image to the left
Chapter 2: Adding Web Pages, Links, and Images
45
Inserting and Aligning an Image in
the Alaska National Parks Web Page
• Click anywhere in the Document window to
deselect the image
• Click the Save button on the Standard toolbar
• Press the F12 key
• Close the browser to return to Dreamweaver
• Select the value in the W box in the Property
inspector and type 300
• Press the TAB key and type 220 in the H box
Chapter 2: Adding Web Pages, Links, and Images
46
Inserting and Aligning an Image in
the Alaska National Parks Web Page
• Click the V Space box and type 15 as the vertical
space
• Press the TAB key and type 20 in the H Space
box as the horizontal space
• Press the ENTER key to add the space
• Click anywhere in the Document window to
deselect the image
• Click the Save button on the Standard toolbar
Drag the noatak_river image to the right of the
last sentence in the third paragraph
Chapter 2: Adding Web Pages, Links, and Images
47
Inserting and Aligning an Image in
the Alaska National Parks Web Page
• Type Noatak River in the Alternate text text box
and then click the OK button
• Click the Align button arrow and then click Right to
align the image to the right
• Select the value in the W box in the Property
inspector and type 200 to set the image width
• Press the TAB key and type 105 in the H box to set
the image height, and then press ENTER
• Click anywhere in the Document window to deselect
the image
• Click the Save button
Chapter 2: Adding Web Pages, Links, and Images
48
Inserting and Aligning an Image in
the Alaska National Parks Web Page
• Press the F12 key to display the Alaska National
Preserves page in the browser
• Close the browser to return to Dreamweaver
Chapter 2: Adding Web Pages, Links, and Images
49
Inserting and Aligning an Image in
the Alaska National Parks Web Page
Chapter 2: Adding Web Pages, Links, and Images
50
Inserting and Aligning Images in the Alaska
National Historical Parks Web Page
• Click the historical_sites.htm Web page tab. Display
the panel groups and click the Assets tab, if
necessary
• Click the aleutian.jpg file in the Assets panel
• Position the insertion point to the left of the first
sentence
• Drag the aleutian.jpg file from the Assets panel to the
insertion point
• Type Aleutian World War II Historical
Site in the Alternate text text box and then click the
OK button
Chapter 2: Adding Web Pages, Links, and Images
51
Inserting and Aligning Images in the Alaska
National Historical Parks Web Page
• Click the Align button arrow in the Property inspector and
then click Left on the Align pop-up menu to align the
image to the left side of the page
• Click the H Space box, type 10 as the horizontal space,
and then press the ENTER key to add the space
• If necessary, scroll down and then position the insertion
point to the left of the paragraph describing the Klondike
Gold Rush National Historical Park
• Drag the klondike.jpg image to the insertion point
• Type Klondike Gold Rush Prospector in the Alt
text box and then press ENTER. If necessary, scroll down
to view the image
Chapter 2: Adding Web Pages, Links, and Images
52
Inserting and Aligning Images in the Alaska
National Historical Parks Web Page
• Click the Align button arrow and then click Right
on the Align pop-up menu
• Double-click the W text box and then type 250 for
the width
• Press the TAB key and then type 275 for the
height in the H text box
• Click the H Space box and then type 20 as the
horizontal space
• Press the ENTER key to position the image
Chapter 2: Adding Web Pages, Links, and Images
53
Inserting and Aligning Images in the Alaska
National Historical Parks Web Page
• Position the insertion point to the left of the Sitka
National Historical Park paragraph
• Drag the tlingit.jpg image from the Assets panel to
the insertion point
• Type Sitka National Historical Park in
the Alt text box and then press the ENTER key. If
necessary, scroll down to view the image
• Click the Align button arrow and then click Left on
the Align pop-up menu
• Double-click the W box and then type 225 for the
width
Chapter 2: Adding Web Pages, Links, and Images
54
Inserting and Aligning Images in the Alaska
National Historical Parks Web Page
• Press the TAB key and then type 160 for the height
in the H box
• Click the V Space box and then type 10 as the
vertical space
• Click the H Space box and then type 10 as the
horizontal space
• Press the ENTER key to resize and position the
image
• Click anywhere on the page to deselect the image
• Click the Save button on the Standard toolbar
Chapter 2: Adding Web Pages, Links, and Images
55
Inserting and Aligning Images in the Alaska
National Historical Parks Web Page
• Press the F12 key to view the Alaska National
Historical Sites page in your browser
• Close the browser
Chapter 2: Adding Web Pages, Links, and Images
56
Inserting and Aligning Images in the Alaska
National Historical Parks Web Page
Chapter 2: Adding Web Pages, Links, and Images
57
Cropping and Modifying
Brightness/Contrast of an Image
• If necessary, open the historical_sites.htm page
• Select the tlingit.jpg image
• Click the Crop tool icon in the Property inspector to
apply the bounding box. If a Dreamweaver caution
dialog box is displayed, click the OK button
• Collapse the panel groups so you have more room to
work
• Click the crop handle in the lower-right corner and
adjust the handles until the bounding box surrounds
the area of the image similar to that shown in Figure
2–53
Chapter 2: Adding Web Pages, Links, and Images
58
Cropping and Modifying
Brightness/Contrast of an Image
•
•
•
•
Double-click inside the bounding box
Click the image to apply the cropping
If necessary, click the Tlingit image to select it
Click the Brightness and Contrast tool to display
the Brightness/Contrast dialog box. If a
Dreamweaver caution dialog box appears, click
the OK button
• Click the OK button to accept the Brightness and
Contrast settings
• Click the Save button on the Standard toolbar
Chapter 2: Adding Web Pages, Links, and Images
59
Cropping and Modifying
Brightness/Contrast of an Image
• Press the F12 key to view the historical_sites.htm
page in your browser
• Close the browser to return to the Dreamweaver
window
Chapter 2: Adding Web Pages, Links, and Images
60
Cropping and Modifying
Brightness/Contrast of an Image
Chapter 2: Adding Web Pages, Links, and Images
61
Adding Text for Relative Links
• Expand the panel groups, and then click the Files
panel tab to display the Files panel
• Click the index.htm tab in the Document window.
If necessary, scroll to the top of the page and
then position the insertion point at the end of the
title, Alaska National Parks
• Press the ENTER key to move the insertion point
to the next line. If necessary, click the Align
command on the Format menu and select Center
to center the insertion point
Chapter 2: Adding Web Pages, Links, and Images
62
Adding Text for Relative Links
• Type Alaska National Preserves and then
press the SPACEBAR
• Hold down the SHIFT key and then press the
vertical line key (|)
• Press the SPACEBAR and then type Alaska
National Historical Sites to add the text
for the links
Chapter 2: Adding Web Pages, Links, and Images
63
Adding Text for Relative Links
Chapter 2: Adding Web Pages, Links, and Images
64
Creating a Relative Link
Using Point to File
• Drag to select the text Alaska National Preserves
• Use the Point to File tool to point to the
preserves.htm file in the Files panel
• When the pointer is over the preserves.htm file in
the Files panel, release the mouse button to
display the linked text in the Property inspector
Link box
Chapter 2: Adding Web Pages, Links, and Images
65
Creating a Relative Link
Using Point to File
Chapter 2: Adding Web Pages, Links, and Images
66
Creating a Relative Link
Using the Context Menu
• Drag to select the text Alaska National Historical
Sites, and then right-click the selected text to
display the context menu
• Point to Make Link
• Click the Make Link command and then click
historical_sites in the Select File dialog box to
indicate you want to link to the Alaska National
Historical Sites page
• Click the OK button and then click the selected text,
Alaska National Historical Sites, to display the
underlined link
Chapter 2: Adding Web Pages, Links, and Images
67
Creating a Relative Link
Using the Context Menu
• Click the Save button on the Standard toolbar
• Press the F12 key to view the index page in your
browser
• Click the Alaska National Preserves link to verify
that the link works and then click the browser
Back button to return to the index page
• Click the Alaska National Historical Sites link to
verify that the link works
• Close the browser
Chapter 2: Adding Web Pages, Links, and Images
68
Creating a Relative Link
Using the Context Menu
Chapter 2: Adding Web Pages, Links, and Images
69
Creating a Relative Link
to the Home Page
• Click the preserves.htm tab and then scroll to the
bottom of the page. Drag to select the text, Home
• Drag the index.htm file name from the Files panel
to the Link box, and then click in the Document
window to deselect the text
• Click the Save button on the Standard toolbar
• Press the F12 key to view the Alaska National
Preserves page in your browser
• Click the Home link to display the index page
Chapter 2: Adding Web Pages, Links, and Images
70
Creating a Relative Link
to the Home Page
• Close the browser to redisplay Dreamweaver
• Click the historical_sites.htm tab. If necessary,
scroll to the end of the document and then drag to
select the text, Home
• Drag the index.htm file name from the Files panel
to the Link box to create the link, and then click
anywhere in the Document window to deselect the
text
• Click the Save button on the Standard toolbar
• Press the F12 key to view the Alaska National
Historical Sites page in your browser
Chapter 2: Adding Web Pages, Links, and Images
71
Creating a Relative Link
to the Home Page
• Click the Home link to verify that it works
• Close the browser
Chapter 2: Adding Web Pages, Links, and Images
72
Creating a Relative Link
to the Home Page
Chapter 2: Adding Web Pages, Links, and Images
73
Creating an Absolute Link
• Collapse the panel groups
• Select the Alaska National Preserves page
(preserves.htm)
• Drag to select the text Bering Land Bridge
National Preserve
• Click the Link box in the Property inspector and
then type
http://www.nps.gov/bela/index.htm as
the link. Press the ENTER key
Chapter 2: Adding Web Pages, Links, and Images
74
Creating an Absolute Link
• Drag to select the text Noatak National Preserve.
Click the Link box and then type
http://www.nps.gov/noat/index.htm as
the link. Press the ENTER key
• Drag to select the text Yukon-Charley Rivers
National Preserve. Click the Link box and then
type http://www.nps.gov/yuch/index.htm
as the link. Press the ENTER key
• Save the Web page
Chapter 2: Adding Web Pages, Links, and Images
75
Creating an Absolute Link
• Press the F12 key and then click each link to verify that
they work
• Close the browser
• Select the historical_sites.htm page. If necessary, scroll
down and then drag to select the text Aleutian World War
II. Click the Link box and then type
http://www.nps.gov/aleu/ as the link. Press the
ENTER key
• Drag to select the text Klondike Gold Rush National
Historical Park. Click the Link box and then type
http://www.nps.gov/klgo/index.htm as the link.
Press the ENTER key
Chapter 2: Adding Web Pages, Links, and Images
76
Creating an Absolute Link
• Drag to select the text Sitka National Historical
Park. Click the Link box and then type
http://www.nps.gov/sitk/index.htm as
the link. Press the ENTER key, and then deselect
the linked text, if necessary
• Click the Save button on the Standard toolbar
• Press the F12 key and then click each link to
verify that they work
• Close the browser
Chapter 2: Adding Web Pages, Links, and Images
77
Creating an Absolute Link
Chapter 2: Adding Web Pages, Links, and Images
78
Adding an E-Mail Link
• Click the index.htm tab, scroll down to the end of the
page, and then drag to select your name. Click Insert
on the Application bar and then point to Email Link
• Click Email Link to display the Email Link dialog box
• Click the E-Mail text box and then type your e-mail
address
• Click the OK button
• Click anywhere in the selected text of your name to
view your e-mail address in the Property inspector
Link box
Chapter 2: Adding Web Pages, Links, and Images
79
Adding an E-Mail Link
• Click the Save button on the Standard toolbar
• Press the F12 key to view the page in your
browser. Click your name to open your e-mail
program. Send a message to yourself and one of
your classmates
• Close your e-mail program and then close the
browser
Chapter 2: Adding Web Pages, Links, and Images
80
Adding an E-Mail Link
Chapter 2: Adding Web Pages, Links, and Images
81
Using Design View and Code View
Simultaneously
• Click the preserves.htm tab
• Collapse the Files panel and hide the Property
inspector, if necessary
• Position the insertion point to the left of the
heading, Alaska National Preserves
• Click the Split button to display Code view in the
upper window and Design view in the lower
window. If line numbers do not appear, click the
Line Numbers button
• Click the Design button to return to Design view
Chapter 2: Adding Web Pages, Links, and Images
82
Using Design View and Code View
Simultaneously
Chapter 2: Adding Web Pages, Links, and Images
83
Using Live View
• Click Live View on the Document toolbar to view
the page as it would appear in the browser and to
verify that the line spacing is correct and that the
document is properly formatted
• Click the Live View button to return to Design
view and make any necessary corrections. If
necessary, click the Save button
Chapter 2: Adding Web Pages, Links, and Images
84
Using Live View
Chapter 2: Adding Web Pages, Links, and Images
85
Closing the Website and Quitting
Dreamweaver
• Click the Close button on the right corner of the
Dreamweaver title bar to close the Dreamweaver
window, the Document window, and the Alaska
Parks Web site
• Click the Yes button if a prompt is displayed
indicating that you need to save changes
Chapter 2: Adding Web Pages, Links, and Images
86
Chapter Summary
• Add pages to a Web site
• Describe Dreamweaver’s image accessibility
features
• Describe image file formats
• Insert, resize, and align images within a Web
page
Chapter 2: Adding Web Pages, Links, and Images
87
Chapter Summary
•
•
•
•
Describe the different types of links
Create relative, absolute, and e-mail links
Describe how to change the color of links
Edit and delete links
Chapter 2: Adding Web Pages, Links, and Images
88
Chapter Summary
•
•
•
•
Check spelling
Describe Code view, Split view, and Design view
Display Code view
Use Live view
Chapter 2: Adding Web Pages, Links, and Images
89
Dreamweaver CS4
Concepts and Techniques
Chapter 2 Complete
Adding Web Pages, Links, and Images
Download
Related flashcards

Web colors

17 cards

Web design

34 cards

Web designers

34 cards

Create Flashcards