The Visibooks Guide To Dreamweaver 8

Table of Contents
Dreamweaver Basics ...................................... 1

Set up a Web site....................................................................................2
Format text............................................................................................27
Create links to new pages ...................................................................57
Create e-mail and external links .........................................................73
Insert graphics .....................................................................................80
Create a basic navigation system.......................................................95
Change page and link colors ............................................................108
Layout & Navigation ................................... 119

Lay out pages using tables ...............................................................120
Create navigation bars.......................................................................146
Add subsections to site.....................................................................163
Utilities........................................................ 173
Find and Replace................................................................................174
Check spelling....................................................................................178
Change HTML code............................................................................180
Check for broken links.......................................................................184
TABLE OF CONTENTS i
Interactivity .................................................187
Employ forms..................................................................................... 188
Employ Templates ............................................................................. 204
Upload sites to a Web server............................................................ 214
Advanced Layout.........................................227
Employ background graphics .......................................................... 228
Employ custom styles ....................................................................... 234
Employ spacer GIFs .......................................................................... 239
Specify page margins........................................................................ 243
Create rollover effects ....................................................................... 246
ii TABLE OF CONTENTS
Dreamweaver Basics
In this section, you’ll learn how to:
• Set up a Web site

• Format text
• Create links to new pages
• Create e-mail and external links
• Insert graphics
• Create a navigation system
• Change page, link colors
DREAMWEAVER BASICS 1
Set up a Web site
Set up Dreamweaver on first-time use
1. Open Dreamweaver.
The first time you open it, the Workspace Setup window will
appear:
2 DREAMWEAVER BASICS
2. Leave the Designer radio button checked, then click the
button.
Dreamweaver will open and look like this:
3. When the Start Page appears, click the Don’t show again
checkbox.
4. When the alert window appears, check the Don’t show me this
message again checkbox, then click the button.
5. Close Dreamweaver.
Create a new site
It should look like this:
2. In the Files pane, click Manage Sites in the Files list.
3. When the Manage Sites window appears, click the
button.
4. When the menu appears, click Site.
5. When the Site Definition window appears, type:
Dogs
in the first text box, then click the button.
6. When the second screen appears, check the No, I do not want
to use a server technology radio button.
Then click the button.
7. When the next screen appears, leave the Edit local copies on
my machine radio button checked.
8. When the next screen appears, click FTP in the How do you
connect to your remote server? list.
9. In the What is the hostname or FTP address of your Web
server? box, type:
www.yourserver.com
then click the button.
Tip: Not this literal server address, but the real address of your
Web server.
10. When the next screen appears, leave the No, do not enable
check in and check out radio button checked.
11. When the Summary screen appears, click the button.
12. In the Manage Sites window, click the button.
Create a home page
1. On the Menu Bar, click File, then New.
2. When the New Document window appears, click HTML in the
Basic page column.
Then click the button:
A blank page should open:
3. In the blank page, type:
Dogs Home Page
4. On the Menu Bar, click File, then Save.
5. When the Save As window appears, make sure the Dogs folder
appears in the Save in box.
Then type:
index.html
in the File name box.
6. Click the button.
index.html should now appear in the Files pane.
Tip: Make sure Local view is selected.
This is the home page of the Dogs Web site.
Home page file names
The home page of any Web site has the file name index.html.
That’s because index.html comes up automatically when the address

of a Web site or directory is typed into a browser.
For instance, if you go to www.visibooks.com, the home page

appears automatically. That’s because its file name is index.html.
If the file name of the Visibooks home page was homepage.html,

you’d have to type www.visibooks.com/homepage.html to get it to
appear.
7. Right-click in blank space on the page.
When the menu appears, click Page Properties.
8. In the Category list, click Title/Encoding.
9. When the Title/Encoding screen appears, type:
A Home Page About Dogs
in the Title box.
Page titles
The title of a Web page describes the page. It’s what appears in a
browser’s History list.
The title also shows up as a link when a page comes up in a search

engine. If all your pages have different, descriptive titles, they’ll be
easier for people to find.
The page title shows up in the top, or “title,” bar of the browser used
to view it. The title of this page is Dogs.
The page should look like this:
You have created a home page titled A Home Page About Dogs.
The home page’s file name is index.html.
It is located in a folder called Dogs in the My Documents folder.
Format text
Create a style sheet
2. When the New Document window appears, click CSS in the
Basic page column.
Then click the button:
A blank page should open:
3. Right-click on the page.
When the menu appears, click CSS Styles, then New.
4. When the New CSS Rule window appears, click the Tag radio
button in the Selector Type list:
5. In the Tag list, click h1.
7. When the CSS Rule definition window appears, click Verdana,

Arial, Helvetica, sans serif in the Font list.
8. In the Weight list, click bold.
When the Save As window appears, type:
format.css
The style sheet should look like this:
Integrate a style sheet
1. At the top of the window, click index.html.
2. In the Properties pane, click Attach Style Sheet in the Style

list.
3. When the Attach External Style Sheet window appears, click
the button.
4. When the Select Style Sheet File window appears, make sure
Dogs is in the Look in box.
Then click format.
5. Click the buttons.
Apply formatting
1. Click the words
Dogs Home Page
to place the cursor on the same line.
2. In the Properties pane, click Heading 1 in the Format list.
The text should now look like this:
3. Save the page.
Change text size
1. At the top of the window, click format.css.
2. Click h1.
3. In the Panels list, click CSS.
4. In the Properties panel, click the icon.
5. When the CSS Rule definition window appears, click 16 in the
Size list.
Then click points.
7. Save the style sheet.
8. At the top of the window, click index.html.
Change text weight
1. Click at the end of the text, then press the ENTER key on your
keyboard to start a new paragraph.
2. Type:
These are my favorite breeds of dog:
3. Save the page.
4. Click format.css.
5. In format.css, put the cursor on line 6.
Then press the ENTER key on your keyboard.
The cursor should be on line 7.
6. Right-click the page.
7. When the New CSS Rule window appears, make sure the Tag
radio button is selected.
In the Tag list, click p.
9. When the CSS Rule definition window appears, click Arial,
Helvetica, sans serif in the Font list.
Then click 10 points in the Size list.
10. Click the button, then save format.css.
11. Click index.html.
12. Highlight the words favorite breeds.
13. In the Properties pane, click the button.
14. Click on the page to un-highlight the words.
15. Save the page.
Align text
1. Click in the sentence to place the cursor there.
2. In the Properties pane, click the button.
5. Save the page.
Indent text
1. Type three new paragraphs:
Chesapeake Bay Retriever
German Shepherd
Yorkshire Terrier
2. Highlight all three paragraphs, then click the button in the
Properties pane.
3. Save the page.
Create lists
1. With the paragraphs highlighted, click the button.
2. Click on blank space to un-highlight the paragraphs.
3. Save the page.
4. Change the title of the home page, index.html, to My Favorite
Dogs.
Tip: You can use the Title box in the window:
5. Change the bulleted list to a numbered list.
Tip: Use the button.
6. Change the numbered list back to a bulleted list.
7. Make the list items bold.
8. Save the page.
Create links to new pages
Step 1: Create a new page

Basic page column.
3. Right-click the new page.
When the menu appears, click Page Properties.
4. Click Title/Encoding in the Category list.
Then in the Title box, type:
Chesapeake Bay Retrievers
File names for the Web
Most Web servers are Unix- or Linux-based, which don’t deal cleanly
with spaces in file names. For instance if you name a file fido
page.html, it may show up in the URL box of the browser as
fido%20page.html.
Also, Web servers are case-sensitive, so keeping file names lower-

case eliminates a potential source of mistakes.
Make all file names in a Web site—pages, graphics and folders—

lower-case, with no spaces.
Correct file name: chesapeake.html
Incorrect: Chesapeake Bay.html
7. When the Save As window appears, type:
chesapeake.html
9. Type:
Chesapeake Bay Retrievers
10. In the Properties pane, click Attach Style Sheet in the Style
list.
11. When the Attach External Style Sheet window appears, click
the button.
12. Save chesapeake.html.
13. Click format.css.
14. In format.css, place the cursor on line 11, then press the
ENTER key on your keyboard.
The cursor should go to line 12.
15. Right-click the page.
16. When the New CSS Rule window appears, make sure the Tag
radio button is selected.
In the Tag list, click h2.
18. When the CSS Rule definition window appears, click Verdana,
Arial, Helvetica, sans serif in the Font list.
Then click 14 points in the Size list.
20. Click chesapeake.html.
21. With the cursor on the first line, click Heading 2 in the Format
list.
22. Save the page.
Providing navigation clues with text size
The heading of the Chesapeake Bay Retriever page is one size

smaller than the heading of the home page. That’s because the CBR
page is one step down in the site hierarchy.
Dogs Home Page Dogs

Size 1 heading
Font size: 16pt
Chesapeake Bay Retrievers Chesapeake

Bay
Size 2 heading Retrievers
Font size: 14pt
Making the heading of the Chesapeake Bay Retrievers page smaller

than the home page’s heading helps show people where they are in
the site.
Step 2: Link to the new page
2. Highlight the words Chesapeake Bay Retriever.
3. On the Toolbar, click the icon.
4. When the Hyperlink window appears, click the icon.
5. When the Select File window appears, click chesapeake.
6. Click the buttons.
7. Click the page.
The words Chesapeake Bay Retriever should now be a link:
8. Save the page.
9. On the page’s Toolbar, click the icon.
10. When the menu appears, click Preview in the browser of your
choice.
A browser should open with the home page inside:
11. Click the Chesapeake Bay Retriever link.
It should take you to chesapeake.html:
12. Close the browser.
13. Create new pages for German Shepherds and Yorkshire

Terriers.
Page Title File Name

German Shepherd German Shepherds german.html
Yorkshire Terrier Yorkshire Terriers yorkshire.html
Tip: Open chesapeake.html, then Save As with the file name

german.html. Then change its title and text.
Do the same thing to create yorkshire.html.
14. Verify that both new pages are linked to the format.css style
sheet.
15. On the home page, link the words German Shepherd and
Yorkshire Terrier to their pages.
16. On the home page, remove the words
Home Page
after
Dogs
17. Make sure the headings of the German Shepherd and Yorkshire
Terrier pages are the same size as the heading of the
Chesapeake Bay Retriever page.
18. Save all pages.
19. Click the home page’s links to make sure they work.
Create e-mail and external links
Create an e-mail link
2. In the Files pane, double-click all the files to open them.
3. In index.html, beneath the bulleted list, type:
For more information, contact dogs@dogs.com.
4. Highlight dogs@dogs.com.
6. When the Email Link window appears, click the

button.
7. Click on the page.
The address should now be a link:
8. Save the page.
Link to an external site
1. Below the email link, type:
Please also visit www.dogs.com.
2. Highlight www.dogs.com, then click the icon.
3. When the Hyperlink window appears, make sure that
http://www.dogs.com appears in the Link box.
4. In the Target box, type:
_new
5. Click the page.
The address should now be a link:
6. Save the page.
7. On the page’s Toolbar, click the icon.
When the menu appears, click Preview in the browser of your

choice.
8. When the page comes up in the browser, click the
www.dogs.com link.
It should open a new window with an external Web site.

(Probably PetSmart, a site linked to the dogs.com address.)
Insert graphics
Capture a graphic from the Web
1. Using the browser, go to:
www.visibooks.com/books/dw8/dogpics
2. Place your cursor on top of the picture of the Chesapeake Bay

Retriever, then click with your right mouse button.
Right
mouse
button
3. When the menu appears, click Save Picture As.
4. When the Save Picture window appears, click the Dogs folder
in the Save in drop-down list.
5. Create a new folder called images within the Dogs folder.
6. Double-click the images folder so it appears in the Save in drop-
down list.
This should save the graphic inside the images folder.
Insert a graphic
1. Open chesapeake.html, then place the cursor below the

heading.
Tip: If you see an image selection menu, click Image.
3. When the Select Image Source window appears, double-click
the images folder.
4. Click the chessie graphic, then click the button.
Tip: If the Accessibility Attributes window opens, click the

button.
Align a graphic
1. Place the cursor in a new paragraph below the graphic, then

type:
Chesapeake Bay Retrievers love water. If you throw tennis

balls in the water, these dogs will chase them and bring
them back until your arm falls off.
2. Right-click the graphic.
When the menu appears, click Align, then Left.
The page should now look like this:
3. Save the page, then preview the page in the browser.
Format a graphic
1. In Dreamweaver, right-click the graphic again, then click Edit

Tag <img>.
2. When the Tag Editor window appears, type:
Chesapeake Bay Retriever
in the Alternate text box.
This assigns “alt” text to the graphic.
Alt text
“Alt” text allows visually-impaired people to know what a graphic

represents. Alt text also allows search engines to index visual
content.
3. Assign Horizontal space of 12, and Vertical space of 4:
4. Change Border to 1.
5. Click the button, then save the page.
6. Click the icon.
Horizontal spacing of 12
creates a horizontal
space of 12 pixels around
the graphic that nothing
can occupy
A Border of 1 creates a 1-
pixel border around the
graphic
7. Go to:
www.visibooks.com/books/dw8/dogpics
8. Save the German Shepherds graphic in the images folder, with

the file name shepherds.gif.
9. Save the Yorkshire Terrier graphic in the images folder, with the
file name yorkie.gif.
10. Insert shepherds.gif into the German Shepherds page below

the heading.
11. Insert yorkie.gif into the Yorkshire Terriers page below the
heading.
12. On the German Shepherds page, insert the text:
German Shepherds are smart dogs.
as a paragraph below the graphic.
13. On the Yorkshire Terriers page, insert the text:
Yorkshire Terriers are cute.
as a paragraph below the graphic.
14. On both pages, align the text to the side of the graphic, as on the
Chesapeake Bay Retrievers page.
15. In both pages, give the graphics a Border of 1, Vertical spacing

of 4, and Horizontal spacing of 12.
16. Save both pages.
Create a basic navigation system
Link back to the home page
1. Open Dreamweaver, then open all pages in the Dogs site.
2. View chesapeake.html.
3. Beneath the paragraph, type:
Home
4. Highlight the word Home, then click the icon.
5. When the Hyperlink window appears, click the icon.
When the Select File window appears, click index, then click the
button.
7. Click the page to de-select the text.
8. Save chesapeake.html, then view it in the browser.
The word Home should now be a link:
9. Click the Home link.
The home page should appear in the browser:
10. Click the Chesapeake Bay Retriever link.
The Chesapeake Bay Retriever page should appear in the

browser.
11. In Dreamweaver, view german.html.
12. Create a link back to the home page just like in the Chesapeake
Bay Retriever page:
13. On yorkshire.html, create a link back to the home page in the

same way.

Link pages to each other
1. View chesapeake.html.
2. Following the Home link, type:
| Chesapeake Bay Retriever | German Shepherd | Yorkshire

Terrier

3. Make the words Chesapeake Bay Retriever bold:
4. Link the words German Shepherd to german.html:

5. Link the words Yorkshire Terrier to yorkshire.html:
Tip: If the link doesn’t work quite right, click the icon in the
Properties pane.
6. Save the page and view it in the browser.

Showing “you are here”
A site’s navigational system should show people two things: where

they are, and where they can go.
To show people where they are, make the link corresponding to the
current page into plain text. This lets users know that if they can’t go
to that page, they must be looking at it.
Home | Chesapeake Bay Retriever | German Shepherd | Yorkshire Terrier
You are here
Making the text bold reinforces the “you are here” message.

Use graphics as links
1. View index.html.
2. Below the bulleted list of links, insert the Chesapeake Bay

Retriever, German Shepherd and Yorkshire Terrier graphics:
3. Click the Chesapeake Bay Retriever graphic to select it, then

click the icon in the Properties pane.

4. When the Select File window appears, click chesapeake, then
the button.
5. Save the home page, then preview it in the browser.
6. Click the Chesapeake Bay Retriever graphic.
It should take you to the Chesapeake Bay Retriever page.
7. View german.html.
8. Following the Home link, type:
| Chesapeake Bay Retriever | German Shepherd | Yorkshire

Terrier

9. Make the words German Shepherd bold.
10. Link the words Chesapeake Bay Retriever and Yorkshire

Terrier to their corresponding pages.
11. Save the page.
12. Using the same system, create navigation links for the Yorkshire
Terriers page. Then save the page.
13. On the home page, link the German Shepherd graphic to the
German Shepherds page.
14. Link the Yorkshire Terrier graphic to the Yorkshire Terriers page.
15. Save the page.
16. View the site in the browser.
It should look like the site at:
www.visibooks.com/books/dw8/dogs

Change page and link colors
Change background color of pages
1. View format.css.
2. In format.css, press ENTER to place the cursor on line 17.
4. When the New CSS Style window appears, make sure the Tag
radio button is selected, then click body in the Tag list:

6. When the CSS Rule definition window appears, click

Background in the Category list.

7. Click the icon.
Then in the Background Color grid, click Yellow.
9. Save format.css.

10. View the site’s pages.
The background color of each page should now be yellow.

Change link colors
1. View format.css.
Press the ENTER key on your keyboard to place the cursor on

line 21.
3. When the New CSS Style window appears, make sure the Tag
radio button is selected, then click a in the Tag list:

5. When the CSS Rule definition window appears, click the
icon.
Then in the Color grid, click Red.
7. View the site’s pages in the browser.
The links on each page should be red.
Consistent link colors
Link colors should be consistent throughout a Web site. If the links on

one page are red, they should be red on every page.
Learning that “red equals link” once is easier than having to figure out
the link color for each page or section of a site.

Practice:
Dreamweaver Basics
1. Create a new Web site in a folder called Cats within the My
Documents folder.
2. Create a home page in the Cats folder with the file name
index.html.
3. Title the home page:
The Wonderful World of Cats
4. Make the main heading of the home page read
The Wonderful World of Cats
5. Using a style sheet, make the main heading size 1.
Tip: Reuse another style sheet: open format.css from the Dogs
site, then save it in the Cats folder.
6. Below the main heading on the home page, insert a bulleted list:
• House Cats
• Alley Cats
• Big Cats

7. Using the style sheet, put these list items in the Arial font, with a
size of 10 points.
Tip: Format the ul style in format.css.
8. Create three new pages:
housecats.html
alleycats.html
bigcats.html
9. View index.html, and link each list item to a new page about it.
For instance, link the words House Cats to housecats.html.
10. On each of these new pages, put a descriptive heading at the

top of the page.
For instance, the words House Cats at the top of the house cats
page.

11. Using the style sheet, put the main headings of all four pages in
the Arial font:
Tip: Just edit format.css directly, replacing the word “Verdana”

with the word “Arial.”
12. Format the home page’s heading as Heading 1.
Format the headings of the other pages as Heading 2.
13. On each page, write a descriptive sentence or two in a new

paragraph below the main heading.

14. Go to:
www.visibooks.com/books/dw8/catpics
and capture the three cat graphics there.
Put them in a folder called images within the Cats folder.
15. Insert the appropriate graphic on each of the 3 pages between

the main heading and the descriptive paragraph below.
16. Align each graphic left, then specify Vertical space of 4 and
Horizontal space of 16.
17. Link each of the three pages back to the home page, and to
each other.
On each page, make the “you are here” link into bold, plain text.
18. Using the style sheet, make the background color of each page
light gray.
Tip: Edit the
body { background: #FFFF00 }
formatting in the style sheet. The color code for light gray is
#CCCCCC.
19. Preview the site in the browser.
It should look like the site at
www.visibooks.com/books/dw8/cats


Layout & Navigation
• Lay out pages using tables

• Create navigation bars
• Add subsections to site
LAYOUT & NAVIGATION 119

Lay out pages using tables
Tables and Web page layout
Almost all professional-quality Web sites are laid out using tables. A
table on a Web page has cells that contain links, graphics, and text.
The lines on this page clearly show its layout with table cells:
cell cell cell
120 LAYOUT & NAVIGATION

Create a table
2. In the Files pane, click Manage Sites in the Files list.
3. When the Manage Sites window appears, click the

button.
When the menu appears, click Site.

4. When the Site Definition window appears, type:
Travel
in the first text box, then click the button.
5. When the second screen appears, check the No, I do not want
to use a server technology radio button.

6. When the next screen appears, leave the Edit local copies on
my machine radio button checked.
7. When the next screen appears, click FTP in the How do you
connect to your remote server? list.
8. In the What is the hostname or FTP address of your Web

server? box, type:
www.yourserver.com
then click the button.
Tip: Not this literal server address, but the real address of your
Web server.
9. When the next screen appears, leave the No, do not enable
check in and check out radio button checked.
10. When the Summary screen appears, click the button.

Basic page column.
A blank page should open.
15. When the Save As window appears, make sure the Travel
folder appears in the Save in box.

Then type:
index.html
17. Title index.html, the home page, Traveling Down South.

19. When the Table window appears, type:
in the Rows box.
Type:
in the Columns box.

20. Specify a Table width of 100 percent.
The table on the page should look like this:
22. Click in the first cell, and type:
links

23. Click in the second cell and type:
content
24. Click the page to de-select the table.
25. Save the page.

Format a table
1. Click the table border.
2. In the Properties pane, set the Border to 0:
3. Click the page.
The table should look like this:

4. Click in the first cell.
In the Properties pane, click the Bg icon.
5. When the color grid appears, click light gray (CCCCCC).
You’ll notice that the word links is right up against the edge of
the left-hand cell.

7. Add a 16-pixel margin between the edge of the cells and their
contents:
Click the table border.
In the Properties pane, type:
16
in the CellPad box.
8. Now eliminate the spacing between cells:
Type:
in the CellSpace box.

Cell Padding creates a Cell Spacing is

cushion of pixels between the space
the edge of the cell and between cells. In
what’s inside it. this case, 0
pixels

Create a table-based home page
www.visibooks.com/books/dw8/travelpic
2. Capture the graphic there (uva.gif) and save it in a new folder

called images within the Travel folder.
3. In the right-hand cell on the home page, replace the word content
with the heading:
Traveling South

4. Format the heading as Heading 1.
5. Insert the graphic beneath the heading.
6. Under the graphic, add the following paragraph:
If you've got a couple of weeks for vacation, you might want to visit
the South. Richmond, Williamsburg, and Charleston are all
beautiful cities.

7. In the left-hand cell, replace the word links with the names of this
site’s main sections:
Richmond
Williamsburg
Charleston

9. In Dreamweaver, click in the first cell.
In the Properties pane, click Top in the Vert list.

10. Type:
20%
in the W box.
11. Click the second cell, then click Top in the Vert list.
Type:
80%
in the W box.

12. Click the page.

It should now look like this:

Create new table-based pages
2. When the New Document window appears, click the

button.
3. Save the new blank page as richmond.html.
On the Menu Bar, click Edit, then Select All.

5. Click Edit, then Copy.
6. Click richmond.html.
7. Click Edit, then Paste.

Tip: If an Image Description window opens, click the
button.
8. Title the new page Richmond, VA.
www.visibooks.com/books/dw8/travelpic/richpic
10. Capture the Richmond, Virginia graphic there (capitol.jpg) and

save it in the images folder.
11. Replace the Traveling South heading with one that reads:
Richmond, Virginia
12. Format the heading as Heading 2.
13. Replace the home page graphic with the Richmond graphic,
capitol.

14. Beneath the graphic, insert a new paragraph:
Richmond is the capital of Virginia.
15. Add the word Home below Charleston in the left-hand cell:

16. Save richmond.html and view it in the browser.
17. Create pages for Williamsburg and Charleston just like the
Richmond page.
Get the graphic and text for the Williamsburg page at:
www.visibooks.com/books/dw8/travelpic/willpic
Get the Charleston page’s graphic and text at:
www.visibooks.com/books/dw8/travelpic/charlpic
18. Using the words Richmond, Williamsburg, Charleston, and Home

in the left-hand cell of each page, link all the pages in this Web
site to each other.

Tip: Don’t forget to transform the link that shows “You Are Here”
into bold, plain text.
19. Insert the text and graphics in their appropriate pages.
20. Align all graphics to the left.
Give them V Space of 4 pixels and H Space of 12 pixels.
Give each graphic appropriate Alternate text.
21. When you’re done, preview the site in the browser.
It should look and work like the one at:
www.visibooks.com/books/dw8/travel

Create navigation bars
Create a navigation bar for a home page
1. On the Menu Bar, click File, then Close All.
2. Create a new Web site in a new folder called Vacation within the
My Documents folder.
Do this the same way you created the Travel site.
3. Create a home page (index.html) and title it Traveling West On

Vacation.

5. When the Table window appears, type:
in the Rows box.
Type:
in the Columns box.

6. Specify:
Table width: 100 percent
Border thickness: 0 pixels
Cell padding: 4
Cell spacing: 0
8. Click the page.

9. In the table’s first cell, type:
California
10. In the second cell, type:
The Rockies
11. In the third cell, type:
The Midwest
12. Center the contents of each cell:
Tip: Use the button in the Properties pane.
13. Click in the first cell.
33%
in the W box.

14. Click the Bg icon.
When the color grid appears, click light gray (CCCCCC).
15. Make the center cell 34% wide, and give it the same background
color.
16. Make the last cell 33% wide, and give it the same background
color.

17. On the Menu Bar, click File, then Open.
18. Open format.css from the Dogs Web site.

19. Save the style sheet as west.css in the Vacation Web site.
Tip: If an alert window appears, click the button.
20. In west.css, change the page background to white:
body { background-color: #FFFFFF; }

21. Save west.css.
22. View the home page, index.html, in the Vacation Web site, and
link it to the west.css style sheet.
Tip: Use the Style list in the Properties pane.
23. Below the table, type:
Traveling West
24. Format the text as Heading 1.
25. Below the heading, add a new paragraph:
When you go West, be sure to visit the sights of California, the

natural wonders of the Rockies, and the cities of the Midwest.

26. Using the Properties pane, format the navigation bar text in the
Paragraph style.


Create navigation bar for a main section page
1. Create a new page.
Save it as california.html.
2. Title it Vacationing in California.
3. View index.html, then highlight the table.
4. On the Menu Bar, click Edit, then Copy.
5. View california.html.
Then click Edit, then Paste.

6. Right-click in the last cell of the table.
When the menu appears, click Table, then Insert Column.
A new cell should appear:

7. In the Properties pane, specify a width of 25%.
8. Change the cell widths of the other three cells to 25%.
Tip: There are now four cells in the table, and their widths must
add up to 100%. That means 25% per cell.
9. Cut the text The Midwest from the last cell and paste it in the
third cell.
Center it within the cell:

10. Click in the first cell, then change its background color to Yellow.
Tip: Changing the color of the California cell on the California

page shows “You are here.”
11. In the last cell, type:
Home

12. Link the word Home to index.html in the Vacation site.
13. Link the page to the style sheet west.css.
Tip: You may have to assign Paragraph (p) formatting to the

words within the cells.
14. Save california.html and view it in the browser.
15. View index.html and link the word California to california.html.
16. Save index.html.

17. Create a new blank page and save it with the file name
midwest.html.
It will be The Midwest page, but leave it blank for right now.
18. Create a new page with file name rockies.html.
This is The Rockies page.
Title it Nature in the Rocky Mountains.
19. Copy the navigation table at the top of california.html and paste
it into rockies.html.
20. Change the “You are here” yellow background color from the
California cell to The Rockies cell.
Color the California cell light gray.
21. Link the words California, The Midwest and Home to their
respective pages.
22. When you’re done, preview the page in the browser.

23. Repeat this process with the California and Midwest pages so
they’ve got functioning navigation bars that show “you are here.”
Tip: To change a word from a link to plain text, just place your
cursor in the link, then delete the page from the Link box in the
Properties pane.
24. View index.html, and in the navigation bar, link the words The
Rockies and The Midwest to their respective pages.
25. Make all “you are here” text that corresponds to the current page
bold.
(Example: make the words The Rockies bold on The Rockies

page.)
26. Link both new pages to the style sheet west.css.
27. Save the pages, then preview the site in the browser.
www.visibooks.com/books/dw8/vacation

Add subsections to site
Insert a table for content and subsection links
2. Below the navigation bar table, add another table with one row
and two columns.
Give it these attributes:
Table width = 100 percent

Border thickness = 0 pixels
Cell padding = 16
Cell spacing = 0

3. Make the first cell 25% wide and the second cell 75% wide.
4. In the left-hand cell, put the subsections for the main California
section:
The Golden Gate Bridge
Highway 101
Big Sur
5. In the right-hand cell, put the heading:
Places to visit in California
Format it as Heading 2.
6. Below the heading, put the paragraph:
When in California, be sure to see the Golden Gate bridge,

Highway 101, and Big Sur.

7. Change the Vert alignment of both cells to Top.

Create subsection pages
1. Create new blank pages for subsections The Golden Gate

Bridge, Highway 101 and Big Sur:
Page Title File Name
Seeing the Golden Gate Bridge goldengate.html
Driving Highway 101 highway101.html
Staying in Big Sur bigsur.html
2. Copy the tables from california.html and paste them into

goldengate.html.
3. On goldengate.html, un-bold the word California in the

navigation bar.
Tip: Highlight the word, then click the icon.
4. Change the heading to read:
Seeing the Golden Gate Bridge
Then format the heading as Heading 3.
5. Link the page to the style sheet west.css.
6. View west.css.
Click the blank line beneath the existing tags, then press the
ENTER key on your keyboard to place the cursor on line 25.

7. Format the h3 style as Verdana, Arial, Helvetica, sans serif, 12
points.
8. Save west.css.
9. View goldengate.html.
Below the heading, change the paragraph to read:
The Golden Gate Bridge isn't golden--it's actually orange.
10. Link the words California, Highway 101, and Big Sur to their
respective pages.
Leave The Golden Gate Bridge as plain text to show “you are
here.”

11. Save goldengate.html, then view it in the browser.
Consistent page layout
Copying tables from one page and pasting them into new pages
ensures that all pages share the same layout.
This consistency makes site navigation easier: no matter which page

in the site is being viewed, a person knows where the page’s links
and content will be.
13. Link the words The Golden Gate Bridge, Highway 101 and Big
Sur to their respective pages.
14. Save california.html.

15. Open goldengate.html and copy both tables.
16. Paste these tables into highway101.html.
17. Link highway101.html to the style sheet west.css.
18. On highway101.html, link the words The Golden Gate Bridge

to goldengate.html.
19. Change the text Highway 101 from a link to plain text.
20. Change the Highway 101 page’s heading and descriptive text
beneath it so it looks like this:
21. Make the layout and navigation of bigsur.html consistent with

the Golden Gate Bridge and Highway 101 pages.
Heading:
Staying in Big Sur
Paragraph:
There are many excellent hotels right on the ocean in Big Sur.
Tip: Don’t forget to link the page to west.css.

22. Save all pages and view the site in the browser.
It should look and work like:
www.visibooks.com/books/dw8/vacation2

Practice: Layout & Navigation
1. In the Vacation site, lay out the Rockies page using tables so it
looks like the California page.
Heading for the Rockies page:
Nature in the Rocky Mountains
2. Create pages for three subsections of The Rockies main

section:
streams.html
snow.html
rocks.html
3. Make sure that these pages are linked and laid out just like the
Golden Gate Bridge, Highway 101 and Big Sur pages.
Page Heading
streams.html Mountain Streams
snow.html Snow in the Rockies
rocks.html Rock Formations

4. Repeat this process with the Midwest section of the site:
Page Heading
midwest.html Cities of the Midwest
Subsections in the Midwest section:
Page Heading
stlouis.html St. Louis
chicago.html Chicago
desmoines.html DesMoines
Tip: If you can’t see all the pages across the top of the window,
just click the W or X icons.
5. On the St. Louis page, link to the external Web site

www.stlouis.com. Link to
www.stlouis.com
Paragraph for St. Louis page:
Find out what’s going on in St. Louis at www.stlouis.com.
6. When you’re done, view the site in the browser.
It should look and function like the one at:
www.visibooks.com/books/dw8/vacation3

Utilities
• Find and replace

• Check spelling
• Change HTML code
• Check for broken links
UTILITIES 173
Find and Replace
2. In the Files pane, click Travel in the list of sites.
3. Double-click index.html to open the home page.
4. On the Menu Bar, click Edit, then Find and Replace.
174 UTILITIES
Tip: If Replace doesn’t appear in the menu, click the double
down arrows.
5. When the Find and Replace window appears, type:
Richmond
in the Find box.
6. In the Replace box, type:
River City
UTILITIES 175
7. In the Find in list, click Entire Current Local Site.
If an alert window appears, click the button.
The Results pane should appear:
9. Click its T icon to close it.
176 UTILITIES
10. View each page of the Travel site.
Richmond should be replaced with River City.
UTILITIES 177
Check spelling
1. View williamsburg.html.
2. On the Menu Bar, click Text, then Check Spelling.
3. The Check Spelling window will appear:
178 UTILITIES
4. When you’re finished checking the spelling of the site, click the
button.
5. On the Menu Bar, click File, then Close All.
UTILITIES 179
Change HTML code
Changing HTML
HTML stands for Hypertext Markup Language, a set of instructions

that tells the browser how to display pages and text. For instance,
surrounding a block of text in <p>, or paragraph, tags makes the text
a paragraph.
In the Web’s early days, people used to have to write HTML to create
Web pages, but now programs like Dreamweaver write HTML for
you. However, sometimes you may want to bypass Dreamweaver’s
point-and-click interface to work directly with the HTML code it
generates.
1. Open the Vacation Web site.
2. View the home page, index.html.
3. Click the icon at the top of the window:
180 UTILITIES
4. In the <table> tag, change its width=”100%” attribute to:
width=”50%”
UTILITIES 181
5. Save the page, then click the icon.
6. Click the icon, then change the table width back to 100%:
182 UTILITIES
7. Save the page, then click the icon.
UTILITIES 183
Check for broken links
1. On the Menu Bar, click Site, then Check Links Sitewide.
The Results pane should appear:
If it’s blank, there are no broken links.
2. Click the T icon to close the Results pane.
184 UTILITIES
Practice: Utilities
1. Open the Dogs Web site.
2. Throughout the site, replace all instances of the phrase

“Yorkshire Terriers” with the word “Yorkies.”
3. Check the spelling of all pages in the site.
4. In the HTML source code of the home page, change the Border
of each graphic to 1.
Tip: Using the icon, find the <img> tags in the home
page’s HTML code. Then change border=”0” to border=”1”
and save the page.
5. Check the site for broken internal links.
6. When finished, close the Dogs Web site, then close

Dreamweaver.
UTILITIES 185
186 UTILITIES
Interactivity
• Employ forms
• Employ templates
• Upload sites to a Web server
INTERACTIVITY 187
Employ forms
Create a form
1. Open Dreamweaver, then open the Vacation site.
2. Create a new page, and save it with the file name

infoform.html.
3. Title the page Request for Information.
4. Link it to the west.css style sheet.
5. On the page, type:
Fill out the following form to get more information about

traveling West:
6. Press the ENTER key on your keyboard to place the cursor in a

new paragraph.
188 INTERACTIVITY
7. On the Menu Bar, click Insert, then Form, then Form.
INTERACTIVITY 189
9. When the Table window appears, give the table:
4 Rows, 2 Columns,
set the Table width to 50 percent,
give it Cell padding of 4,
and a Border thickness of 1.
190 INTERACTIVITY
11. In the top three left-hand cells, type:
Name:
Address:
Email:
INTERACTIVITY 191
14. Click in the top right-hand cell to place the cursor there.
15. On the Menu Bar, click Insert, Form, then Text Field.
192 INTERACTIVITY
16. When the Input Tag Accessibility Attributes window appears,
click the button.
A textbox should appear in the cell:
INTERACTIVITY 193
17. Use the same process to insert textbox input fields in the table
cells next to Address and Email as well.
18. Click the first textbox.
name
in the TextField box.
19. Click the second textbox, then in the Properties pane, type:
address
in the TextField box.
194 INTERACTIVITY
20. Use the same process to assign the name
email
to the third textbox in the form.
21. Save the page.
22. Click in the last row’s right-hand cell.
On the Menu Bar, click Insert, Form, then Button.
23. When the Input Tag Accessibility Attributes window appears,

click the button.
INTERACTIVITY 195
24. Click the new button.
25. In the Properties pane, type:
Send me information
In the Value box.
196 INTERACTIVITY
26. Click the page.
INTERACTIVITY 197
28. Align the text in the left-hand cells to the right.
29. Make the left-hand cell in the first row 5% wide, and the right-
hand cell in the first row 45% wide.
Tip: By specifying the width of cells in the first row, the cells in
the rows beneath will assume the same widths.
30. Click the table border.
In the Properties pane, change the table’s Border to 0.
198 INTERACTIVITY
33. View index.html.
Add a new paragraph linked to infoform.html:
Get more information about Western Travel mailed to you.
INTERACTIVITY 199
35. Click the linked sentence.
It should bring up the page with the form.
200 INTERACTIVITY
Make the form work
1. View infoform.html.
2. Click the icon.
3. In the <form> tag, highlight its name:
<form id=”form1” name=”form1” method=”post”

action=””>
4. Type:
infoform
<form id=”form1” name=”infoform” method=”post”

action=””>
5. In the action attribute, add an action for the form:
<form name=”infoform” method=”post”

action=”http://www.yourdomain.com/cgi-
bin/formmail.pl”>
INTERACTIVITY 201
6. Save the page.
Making a form work
To make a form work, an action must be assigned to it.
Consult with your Web server administrator to specify what action

you should assign.
The action above tells the form to post its data to a program called
formmail.pl at yourdomain.com.
The formmail.pl program might take the form data visitors submit
and e-mail it to you.
7. Create a new page in the Vacation site with the file name
favoritesform.html.
8. Title it My Favorite Places.
9. Insert a form, then insert a table with four rows and two cells in
each row.
10. Fill the cells with the text and form objects seen below:
List/Menu
Radio
buttons
202 INTERACTIVITY
11. Put these values in the List/Menu:
California
The Rockies
The Midwest
Tip: Click the button in the Properties pane.
12. When finished, save the page and preview it in the browser.
INTERACTIVITY 203
Employ Templates
Dreamweaver templates
Creating a page from a template is like copying the layout from a

page and pasting it into a new one. Unlike cutting and pasting,
templates can be set so that some features can’t be changed.
This helps keep things consistent when different people are working
on the same site. Also, after a site is finished, the pages created from
a template can be changed just by changing the template itself.
Dreamweaver templates enable better control of layout and content,

and streamline site management.
Create a template
1. In the Vacation site, open california.html.
2. On the Menu Bar, click File, then Save as Template.
204 INTERACTIVITY
3. When the Save As Template window appears, type:
Main Section
in the Save As textbox.
5. When the alert window appears, click the button.
INTERACTIVITY 205
The page is now saved as Main Section.dwt in the Templates
folder.
6. Change the navigation bar, subsection text, heading, and

paragraph so the page is a “generic” main section page:
7. Save the template.
When the alert window appears, click the Don’t warn me again
checkbox, then the button.
206 INTERACTIVITY
8. Highlight the entire top table—the one that comprises the
navigation bar.
10. When the menu appears, click Editable Region.
INTERACTIVITY 207
11. When the New Editable Region window appears, type:
navbar
in the Name field, then click the button.
The template page should now look like this:
12. Select the entire left-hand cell in the lower table:
208 INTERACTIVITY
Tip: Place the cursor directly over the cell until it turns into a
down arrow. Then click.
13. On the Toolbar, click the icon again.
Tip: It may have changed to .
14. Make it a New Editable Region called subsects.
When you’re done, it should look like this:
INTERACTIVITY 209
15. Select the right-hand cell in the lower table, and make it a New
Editable Region called text.
16. Save the template.
When you’re done, it should look like this:
210 INTERACTIVITY
Create a new page from a template
2. When the New Document window appears, click the Templates

tab.
3. Click Site “Vacation”.
4. Click Main Section.
INTERACTIVITY 211
6. Enter information in the template so it looks like this:
8. When the Save As window appears, type:
california2.html
in the File name textbox.
10. Open goldengate.html.
11. Save it as a template with file name California Subsection.dwt.
12. Make the left-hand cell in the lower table (the one containing The
Golden Gate Bridge, Highway 101 and Big Sur) a New Editable
Region.
13. Name the editable region Subsections.
212 INTERACTIVITY
Tip: Don’t make the navigation bar an editable region in the
template.
14. Make the right-hand cell in the lower table an Editable Region.
15. Name it Page Content.
16. Save the template again.
17. Use the template to create another Big Sur page with file name
bigsur2.html.
INTERACTIVITY 213
Upload sites to a Web server
Set up an FTP connection
FTP
FTP stands for “File Transfer Protocol,” a way to transfer files

between computers over the Internet.
1. In the Files pane, click Manage Sites in the Site list.
214 INTERACTIVITY
3. When the Site Definition window appears, click the

button.
4. In the next screen, click the button.
5. In the next screen, click the button.
6. In the next screen, make sure that FTP is selected in the How
do you connect to your remote server? list.
In the What is the hostname or FTP address of your Web

server? box, type the name or IP address of your Web server.
It can be something like www.visibooks.com,

washington.patriot.net, or 207.176.7.217.
INTERACTIVITY 215
Tip: Contact your Web server administrator to find out the Host
Name or FTP Address of your Web server.
7. In the What folder on the server do you want to store your

files in? box, type the name of the folder that will contain your
Web pages.
It might be something like public_html.
Tip: Your Web server administrator can tell you this as well.
8. Type your username in the What is your FTP login? box.
Type your password in the What is your FTP password? box.
Tip: The Web server administrator can also supply your FTP
Login username and Password.
216 INTERACTIVITY
The screen should look like this:
If the FTP connection to your Web server works, this window will
appear:
INTERACTIVITY 217
218 INTERACTIVITY
Send pages to the Web server
1. In the Files pane, click Local View in the Views list.
2. Click the icon.
3. After you’re connected, click Remote View in the Views list.
4. Your site folder will appear in the pane.
INTERACTIVITY 219
5. Click the arrow.
When the alert window appears, click the button.
A Status window will appear that shows the site files uploading
to the server:
220 INTERACTIVITY
All the site’s pages will appear in the Files pane:
6. Click the icon to disconnect from the server.
7. Close the Vacation site, then close Dreamweaver.
INTERACTIVITY 221
Practice: Interactivity
Create a new home page and site
2. Create a new site called Dance, within the My Documents

folder in a new folder called Dance.
3. Create a new home page titled World Dances, and save it in the
Dance site.
4. Create a home page for the site that looks like this:
Get the graphics and text for this page at:
www.visibooks.com/books/dw8/dancing
222 INTERACTIVITY
5. At the bottom of this and every other page in the site, put an e-
mail link to info@worlddance.org.
INTERACTIVITY 223
Create main section pages
1. Link the words American, Latin, and European in the

navigation bar to new main section pages on American, Latin,
and European dance, respectively:
american.html
latin.html
european.html
Get the images and text for these pages at:
www.visibooks.com/books/dw8/dancing
The American dance page should look like this:
2. Make the Latin and European pages look consistent with the
American dance page.
224 INTERACTIVITY
Create subsection pages
1. On the American dance page, link the words Lindy Hop and
Foxtrot to new subsection pages on those dances.
The Lindy Hop page should look like this:
Get the images and text for this and the other subsection pages
at:
www.visibooks.com/books/dw8/dancesub
2. Make the Foxtrot page look consistent with the Lindy Hop page.
3. Create the subsection pages Tango, Merengue, and Salsa for

the Latin section.
4. Create the subsection pages Waltz and Contra Dancing for the
European section.
INTERACTIVITY 225
Creating forms
1. On the home page, insert a form that looks like this:
2. When you’re done, preview the whole Web site in the browser.
www.visibooks.com/books/dw8/worlddancing
3. In Dreamweaver, close all pages in the Dance site.
226 INTERACTIVITY
Advanced Layout
• Employ background graphics

• Employ custom styles
• Employ spacer GIFs
• Specify page margins
• Create rollover effects
ADVANCED LAYOUT 227

Employ background graphics
2. Create a new site called Advanced Layout.
3. In Dreamweaver, create a new home page and save it in the

Advanced Layout folder.
4. Open the home page, index.html.
5. Insert a one-row, two-column table on the page with these

attributes:
Table width: 100 percent

Border thickness: 0 pixels
Cell padding: 18
Cell spacing: 0
6. Title the page Advanced Layout and save it.
228 ADVANCED LAYOUT

7. Color both cells in the table dark blue.
Tip: In the Bg color grid, click the square with the code
#000099.
8. Make the first cell 10% wide, and the second cell 90% wide.
www.visibooks.com/books/dw8/advlayout/pics
and save techtool.gif in a folder called images within the

Advanced Layout site.
ADVANCED LAYOUT 229

10. Insert techtool.gif in the left-hand cell.
11. Go to:
and save bkgd.gif in the images folder.
12. Click in the right-hand cell.
In the Properties pane, click the icon beside the Bg box.
230 ADVANCED LAYOUT

13. When the Select Image Source window appears, double-click
bkgd.
ADVANCED LAYOUT 231

14. In the right-hand cell, type:
The Magazine for People Who Like Gadgets
15. Format the text as Heading 1.
16. Open west.css from the Vacation site, then save it in the
Advanced Layout site as layout.css.
17. In layout.css, change the formatting for the h1 tag so it’s in the
Arial font, 14 points, bold, and colored white.
18. Save layout.css.
19. Link the home page to layout.css.
232 ADVANCED LAYOUT

Tip: Notice the line towards the bottom of the right cell where
bkgd.gif begins repeating. It repeats because background
graphics tile to fill all available space in a cell.
The cell is 136 pixels tall: 100 pixels for techtool.gif, plus 36 for
cell padding (18 pixels at the top and bottom of techtool.gif).
bkgd.gif is only 123 pixels tall; therefore, there’s 13 pixels of
space left to fill.
To fix this, use an image editing program like Photoshop,

Fireworks or Paint Shop pro to make the background image 136
pixels tall.
ADVANCED LAYOUT 233

Employ custom styles
1. Below the first table, insert a one-row, three-column table with a
width of 100% and cell padding of 4.
Make both its border and cell spacing 0.
2. Make the cells equal width and color them black.
3. In the first cell, type:
Laptops
4. In the second cell:
Cell Phones
5. In the third:
PDAs
6. Center the text within each cell.
234 ADVANCED LAYOUT

7. View layout.css, then click the blank line beneath the existing
tags to place your cursor there.
Press the ENTER key so the cursor rests on line 31.
8. Right-click the page, click CSS Styles, then New.
9. When the New CSS Rule window appears, type:
.navbar
in the Name box.
Tip: Make sure a period (.) precedes the word navbar.
ADVANCED LAYOUT 235

When the CSS Rule definition window appears, click Arial,

Helvetica, sans serif in the Font list.
Specify 12 points in the Size lists.
11. Click the Color icon, then click White in the color grid.
12. Click the button, then save layout.css.
236 ADVANCED LAYOUT

13. View index.html.
14. Click in the first cell of the lower table.
15. In the Style list, click navbar.
ADVANCED LAYOUT 237

16. Apply the .navbar style to the text in the other two cells.
238 ADVANCED LAYOUT

Employ spacer GIFs
Why use spacer GIFs?
GIF graphics can be used as spacers to stretch table cells to an

exact width. If they’re transparent, they remain invisible regardless of
the cell’s background color.
A spacer GIF is used in the exercise below. It keeps the width of the
left-hand cell constant, regardless of the size or resolution of the
screen used to view it.
1. In the browser, go to:
and save spacer.gif in the images folder.
2. In index.html, below the two tables, insert a third table just like
the top table.
ADVANCED LAYOUT 239

3. Insert spacer.gif in the left-hand cell.
4. In the Properties pane, type:
100
in the W box, and
in the H box.
Tip: Most spacer GIFs are 1x1 pixel, which load very quickly
online. This one started out as 50x50 to make it easier to see
and save.
5. Change the background color of the cell containing spacer.gif to
yellow.
6. Change the background color of the right-hand cell to white.
240 ADVANCED LAYOUT

7. Enter paragraphs in the right-hand cell so the page looks like this
when viewed in the browser:
Tip: You can format the text like above by highlighting it, then
clicking the Font and Size drop-down lists in the Properties
pane.
It’s not as sound as using a style sheet for formatting, but as a

quick-and-dirty method, this will work.
8. Save the page.
ADVANCED LAYOUT 241

9. Set the monitor to a higher resolution, or make the browser
window wider if you can.
Notice how the left-hand cells in the top and bottom tables stay
the same width, regardless of the width of the window used to
view them.
242 ADVANCED LAYOUT

Specify page margins
1. View layout.css.
2. In formatting for the <body> tag, add the attributes
margin-top:0
margin-right:0
margin-bottom:0
margin-left:0
body { background-color:#FFFFFF; margin-top:0;

margin-right:0; margin-bottom:0; margin-left:0
}
3. Specify a background color of dark blue (color code #000099)

for the page itself:
body { background-color:#000099; margin-top:0;

margin-right:0; margin-bottom:0; margin-left:0
}
ADVANCED LAYOUT 243

4. Save layout.css.
5. View index.html.
244 ADVANCED LAYOUT

ADVANCED LAYOUT 245

Create rollover effects
1. View layout.css, then click the blank line beneath the existing
tags to place your cursor there.
Press the ENTER key to place the cursor on the next line.
2. Right-click the page, click CSS Styles, then New.
3. When the New CSS Rule window appears, click the Advanced
radio button.
4. In the Selector list, click a:hover.
246 ADVANCED LAYOUT

When the CSS Rule definition window appears, click Bold in

the Weight list.
6. Click the button, then save layout.css.
7. View index.html.
8. Highlight the word Laptops, then click the icon in the

Properties pane.
ADVANCED LAYOUT 247

9. When the Select File window appears, type:
laptops.html
The word Laptops should now be a link.
248 ADVANCED LAYOUT

11. Save index.html, then view it in the browser.
12. Place your cursor on the Laptops link.
It should turn bold:
ADVANCED LAYOUT 249

13. View layout.css and add italics to the hover formatting:
a:hover {font-weight:bold; font-style:italic}
14. Eliminate underlining from the link:
Add the text-decoration:none attribute to the a formatting:
a {text-decoration:none}
15. Color the link white:
Change the color attribute in the a formatting to:
a {color:#FFFFFF; text-decoration:none}
16. Save layout.css, then view index.html in the browser.
250 ADVANCED LAYOUT

17. Place your cursor over the Laptops link.
ADVANCED LAYOUT 251

Practice: Advanced Layout
1. In the navigation table (the one with Laptops, Cell Phones and
PDAs), insert two additional cells between the existing cells.
2. Put | characters (on the same key as the backslash \ character

on your keyboard) in the two new cells (they surround the cell
that contains Cell Phones).
3. Change the width of the center cell to 32%.
4. Give the cells with the | characters a width of 1%, and center the
| characters within the cells.
5. Color the | characters white.
Tip: Assign the navbar style to them.
6. Link the words Cell Phones and PDAs to new pages named
phones.html and pdas.html, respectively.
252 ADVANCED LAYOUT

It should look like the one at:
www.visibooks.com/books/dw8/advlayout
ADVANCED LAYOUT 253

254 ADVANCED LAYOUT
Where to Get Visibooks
If you liked using this book, and would like to use more like it, visit:
www.visibooks.com
Visibooks offers more than 30 titles on subjects such as:
• Computer Basics
• Microsoft Office
• Desktop Linux
• OpenOffice.org
• Web Site Layout
• Web Graphics
• Web Programming
Visibooks: the simplest way to learn

and teach computer subjects.
www.visibooks.com

The Visibooks Guide To Dreamweaver 8

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

The Visibooks Guide To Dreamweaver 8

Diunggah oleh

Hak Cipta:

Format Tersedia

Table of Contents

Dreamweaver Basics ...................................... 1

Layout & Navigation ................................... 119

• Set up a Web site

Dreamweaver will open and look like this:

It should look like this:

2. In the Files pane, click Manage Sites in the Files list.

4. When the menu appears, click Site.

in the first text box, then click the button.

Then click the button.

Then click the button.

then click the button.

Then click the button.

1. On the Menu Bar, click File, then New.

Then click the button:

3. In the blank page, type:

Dogs Home Page

in the File name box.

index.html should now appear in the Files pane.

Tip: Make sure Local view is selected.

This is the home page of the Dogs Web site.

That’s because index.html comes up automatically when the address

For instance, if you go to www.visibooks.com, the home page

If the file name of the Visibooks home page was homepage.html,

When the menu appears, click Page Properties.

A Home Page About Dogs

in the Title box.

10. Click the button.

The title also shows up as a link when a page comes up in a search

11. On the Menu Bar, click File, then Save.

The home page’s file name is index.html.

It is located in a folder called Dogs in the My Documents folder.

1. On the Menu Bar, click File, then New.

Then click the button:

3. Right-click on the page.

When the menu appears, click CSS Styles, then New.

5. In the Tag list, click h1.

7. When the CSS Rule definition window appears, click Verdana,

9. Click the button.

The page should look like this:

When the Save As window appears, type:

in the File name box.

The style sheet should look like this:

1. At the top of the window, click index.html.

2. In the Properties pane, click Attach Style Sheet in the Style

Then click format.

5. Click the buttons.

1. Click the words

Dogs Home Page

to place the cursor on the same line.

2. In the Properties pane, click Heading 1 in the Format list.

3. Save the page.

1. At the top of the window, click format.css.

3. In the Panels list, click CSS.

Then click points.

6. Click the button.

7. Save the style sheet.

8. At the top of the window, click index.html.

The text should now look like this:

These are my favorite breeds of dog:

3. Save the page.

Then press the ENTER key on your keyboard.