Dreamweaver MX 2004 for Visual Learners
Dreamweaver MX 2004 for Visual Learners Copyright Copyright © 2004 by Visibooks™, LLC. All rights reserved.
Trademarks and Disclaimer Visibooks™ is a trademark of Visibooks, LLC. All brand and product names in this book are trademarks or registered trademarks of their respective companies. Visibooks™ makes every effort to ensure that the information in this book is accurate. However, Visibooks™ makes no warranty, expressed or implied, with respect to the accuracy, quality, reliability, or freedom from error of this document or the products described in it. Visibooks™ makes no representation or warranty with respect to this book’s contents, and specifically disclaims any implied warranties or fitness for any particular purpose. Visibooks™ disclaims all liability for any direct, indirect, consequential, incidental, exemplary, or special damages resulting from the use of the information in this document or from the use of any products described in it. Mention of any product does not constitute an endorsement of that product by Visibooks™. Data used in examples are intended to be fictional. Any resemblance to real companies, people, or organizations is entirely coincidental. This book was supported in whole or in part by the U. S. Department of Education (Grant No. H133S030008). However, the opinions expressed herein do not necessarily reflect the policy or position of the U. S. Department of Education, Office of Special Education Programs, and no official endorsement by the Department should be inferred. ISBN 1597060097
Table of Contents Dreamweaver Basics .......................................1 Set up a Web site ..................................................................2 Format text..........................................................................28 Create links to new pages ....................................................56 Create e-mail and external links...........................................75 Insert graphics.....................................................................83 Create a basic navigation system .........................................97 Change page and link colors..............................................111
Layout & Navigation ...................................123 Lay out pages using tables .................................................124 Create navigation bars ......................................................151 Add subsections to site.......................................................171
Utilities........................................................183 Find and Replace ...............................................................184 Check spelling ...................................................................189 Change HTML code ............................................................191 Check for broken links .......................................................195 TABLE OF CONTENTS
i
Interactivity ................................................ 197 Employ forms.................................................................... 198 Employ Templates ............................................................. 215 Upload sites to a Web server............................................. 226
Advanced Layout........................................ 243 Employ background graphics ............................................ 244 Employ custom styles ........................................................ 251 Employ spacer GIFs........................................................... 256 Specify page margins........................................................ 260 Create rollover effects ....................................................... 263
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:
DREAMWEAVER BASICS
3
3.
When the Start Page appears, click the Don’t show again checkbox.
When the alert window appears, click the
4
DREAMWEAVER BASICS
button.
4.
Close Dreamweaver.
DREAMWEAVER BASICS
5
Create a new site 1.
Open Dreamweaver. It should look like this:
2.
6
In the Files pane, click Manage Sites in the Files list.
DREAMWEAVER BASICS
3.
When the Manage Sites window appears, click the button.
When the menu appears, click Site.
DREAMWEAVER BASICS
7
4.
When the Site Definition window appears, type: Dogs in the text box, then click the
8
DREAMWEAVER BASICS
button.
5.
When the second screen appears, check the No, I do not want to use a server technology radio button. Then click the
button.
DREAMWEAVER BASICS
9
6.
When the next screen appears, leave the Edit local copies on my machine radio button checked. Then click the icon next to the Where do you want to store your files? box.
10
DREAMWEAVER BASICS
7.
When the Choose local root folder window appears, navigate to the My Documents folder. Then create a new folder called Dogs.
Double-click the Dogs folder so it appears in the Select box:
Then click the
button.
DREAMWEAVER BASICS
11
8.
Click the
button.
When the next screen appears, click FTP in the How do you connect to your remote server? list.
12
DREAMWEAVER BASICS
9.
In the What is the hostname or FTP address of your Web server? box, type: www.yourserver.com then click the
button.
DREAMWEAVER BASICS
13
10. When the next screen appears, leave the No, do not enable check in and check out radio button checked. Then click the
14
DREAMWEAVER BASICS
button.
11. When the Summary screen appears, click the button.
DREAMWEAVER BASICS
15
12. In the Manage Sites window, click the
16
DREAMWEAVER BASICS
button.
Create a home page 1.
On the Menu Bar, click File, then New.
DREAMWEAVER BASICS
17
2.
When the New Document window appears, click HTML in the Basic page column. Then click the
18
DREAMWEAVER BASICS
button:
A blank page should open:
DREAMWEAVER BASICS
19
3.
In the blank page, type: Dogs Home Page
4.
20
On the Menu Bar, click File, then Save.
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
21
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.
22
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
23
7.
Right-click in blank space on the page. When the menu appears, click Page Properties.
24
DREAMWEAVER BASICS
8.
In the Categories list, click Title/Encoding. When the Title/Encoding screen appears, type: A Home Page About Dogs in the Title box.
9.
Click the
button.
DREAMWEAVER BASICS
25
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.
10. On the Menu Bar, click File, then Save.
26
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
27
Format text Create a style sheet 1.
On the Menu Bar, click File, then New.
2.
When the New Document window appears, click CSS in the Basic page column. Then click the
28
DREAMWEAVER BASICS
button:
A blank page should open:
3.
Right-click on the page. When the menu appears, click CSS Styles, then New.
DREAMWEAVER BASICS
29
30
4.
When the New CSS Style window appears, click the Tag radio button in the Selector Type list:
5.
In the Tag list, click h1, then click the
DREAMWEAVER BASICS
button.
6.
When the CSS Style definition window appears, click Verdana, Arial, Helvetica, sans serif in the Font list.
7.
In the Weight list, click Bold.
DREAMWEAVER BASICS
31
8.
Click the
button.
The page should look like this:
32
DREAMWEAVER BASICS
9.
On the Menu Bar, click File, then Save. When the Save As window appears, type: format.css in the File name box.
10. Click the
button.
DREAMWEAVER BASICS
33
The style sheet should look like this:
34
DREAMWEAVER BASICS
Integrate a style sheet 1.
At the top of the window, click index.html.
2.
In the Properties pane, click Manage Styles in the Style list.
DREAMWEAVER BASICS
35
3.
When the Edit Style Sheet window appears, click the button.
4.
When the Attach External Style Sheet window appears, click the
36
DREAMWEAVER BASICS
button.
5.
When the Select Style Sheet File window appears, make sure Dogs is in the Look in box. Then click format.
6.
Click the
7.
In the Edit Style Sheet window, click the
buttons. button.
DREAMWEAVER BASICS
37
Apply formatting 1.
Click the words Dogs Home Page to place the cursor on the same line.
2.
38
In the Properties pane, click Heading 1 in the Format list.
DREAMWEAVER BASICS
The text should now look like this:
3.
Save the page.
DREAMWEAVER BASICS
39
Change text size 1.
At the top of the window, click format.css.
2.
Right-click on the page. When the menu appears, click CSS Styles, then Manage Styles.
40
DREAMWEAVER BASICS
3.
When the Edit Style Sheet window appears, click the button.
DREAMWEAVER BASICS
41
4.
When the CSS Style definition window appears, click 16 in the Size list. Then click points.
42
5.
Click the
6.
Save the style sheet.
DREAMWEAVER BASICS
button, then the
button.
7.
At the top of the window, click index.html. The text should now look like this:
DREAMWEAVER BASICS
43
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:
44
3.
Save the page.
4.
Click format.css.
DREAMWEAVER BASICS
5.
In format.css, put the cursor on line 6, then click. The cursor should be on line 7.
6.
Right-click the page. When the menu appears, click CSS Styles, then New.
DREAMWEAVER BASICS
45
7.
When the New CSS Style window appears, make sure the Tag radio button is selected. In the Tag list, click p.
8.
Click the
9.
When the CSS Style definition window appears, click Arial, Helvetica, sans serif in the Font list.
button.
Then click 10 points in the Size list.
46
DREAMWEAVER BASICS
10. Click the
button, then save format.css.
11. Click index.html. It should look like this:
12. Highlight the words favorite breeds.
DREAMWEAVER BASICS
47
13. In the Properties pane, click the
button.
14. Click on the page to un-highlight the words. The page should look like this:
15. Save the page.
48
DREAMWEAVER BASICS
Align text 1.
Click in the sentence to place the cursor there.
2.
In the Properties pane, click the
button.
The page should look like this:
DREAMWEAVER BASICS
49
3.
Click the
button.
The page should look like this:
50
DREAMWEAVER BASICS
4.
Click the
button.
The page should look like this:
5.
Save the page.
DREAMWEAVER BASICS
51
Indent text 1.
Type three new paragraphs: Chesapeake Bay Retriever German Shepherd Yorkshire Terrier
52
2.
Highlight all three paragraphs, then click the the Properties pane.
3.
Save the page.
DREAMWEAVER BASICS
button in
Create lists 1.
With the paragraphs highlighted, click the
2.
Click on blank space to un-highlight the paragraphs.
button.
DREAMWEAVER BASICS
53
The page should look like this:
3.
54
Save the page.
DREAMWEAVER BASICS
Practice 1.
Change the title of the home page, index.html, to My Favorite Dogs.
2.
Change the bulleted list to a numbered list.
3.
Change the numbered list back to a bulleted list.
4.
Make the list items bold.
5.
Save the page. It should look like this:
DREAMWEAVER BASICS
55
Create links to new pages Step 1: Create a new 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
56
DREAMWEAVER BASICS
button.
3.
Right-click the new page. When the menu appears, click Page Properties.
DREAMWEAVER BASICS
57
4.
Click Title/Encoding in the Category list. Then in the Title box, type: Chesapeake Bay Retrievers
58
5.
Click the
6.
On the Menu Bar, click File, then Save.
DREAMWEAVER BASICS
button.
7.
When the Save As window appears, type: chesapeake.html in the File name box.
8.
Click the
button.
DREAMWEAVER BASICS
59
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
60
DREAMWEAVER BASICS
9.
Type: Chesapeake Bay Retrievers
10. In the Properties pane, click Manage Styles in the Style list.
DREAMWEAVER BASICS
61
11. When the Edit Style Sheet window appears, click the button.
12. When the Attach External Style Sheet window appears, make sure format.css appears in the File/URL box. Then click the
button.
13. In the Edit Style Sheet window, click the
button.
This links the page to the site’s style sheet, format.css.
62
DREAMWEAVER BASICS
14. Save chesapeake.html. 15. Click format.css. 16. In format.css, press the ENTER key on your keyboard, then click line 12 to place your cursor there.
17. Right-click the page. When the menu appears, click CSS Styles, then New.
DREAMWEAVER BASICS
63
18. When the New CSS Style window appears, make sure the Tag radio button is selected. In the Tag list, click h2.
19. Click the
64
DREAMWEAVER BASICS
button.
20. When the CSS Style definition window appears, click
Verdana, Arial, Helvetica, sans serif in the Font list. Then click 14 points in the Size list.
21. Click the
button, then save format.css.
22. Click chesapeake.html.
DREAMWEAVER BASICS
65
23. With the cursor on the first line, click Heading 2 in the Format list.
The page should look like this:
24. Save the page.
66
DREAMWEAVER BASICS
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 size 1 heading font-size:16pt Chesapeake Bay Retrievers size 2 heading font-size:14pt
Dogs
Chesapeake Bay Retrievers
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.
DREAMWEAVER BASICS
67
Step 2: Link to the new page
68
1.
Click index.html.
2.
Highlight the words Chesapeake Bay Retriever.
3.
On the Toolbar, click the
DREAMWEAVER BASICS
icon.
4.
When the Hyperlink window appears, click the
5.
When the Select File window appears, click chesapeake.
6.
Click the
7.
Click the page.
icon.
buttons.
DREAMWEAVER BASICS
69
The words Chesapeake Bay Retriever should now be a link:
70
8.
Save the page.
9.
On the page’s Toolbar, click the
DREAMWEAVER BASICS
icon.
10. When the menu appears, click Preview in iexplore. A browser should open with the home page inside:
11. Click the Chesapeake Bay Retriever link.
DREAMWEAVER BASICS
71
It should take you to chesapeake.htm:
12. Close the browser.
72
DREAMWEAVER BASICS
Practice 1.
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.
2.
Verify that both new pages are linked to the format.css style sheet.
3.
On the home page, link the words German Shepherd and Yorkshire Terrier to their pages.
4.
On the home page, remove the words Home Page after Dogs
5.
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.
DREAMWEAVER BASICS
73
74
6.
Save all pages.
7.
Click the home page’s links to make sure they work.
8.
Close Dreamweaver.
DREAMWEAVER BASICS
Create e-mail and external links Create an e-mail link 1.
Open Dreamweaver.
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
[email protected].
DREAMWEAVER BASICS
75
4.
Highlight
[email protected].
5.
On the Toolbar, click the
icon.
When the Email Link window appears, click the button.
76
DREAMWEAVER BASICS
6.
Click on the page. The address should now be a link:
7.
Save the page.
DREAMWEAVER BASICS
77
Link to an external site 1.
Below the email link, type: Please also visit www.dogs.com.
2.
78
Highlight www.dogs.com, then click the
DREAMWEAVER BASICS
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 Then click the
button.
DREAMWEAVER BASICS
79
5.
Click the page. The address should now be a link:
6.
On the page’s Toolbar, click the
icon.
When the menu appears, click Preview in iexplore.
7.
80
When prompted to save changes, click the
DREAMWEAVER BASICS
button.
8.
When the page comes up in the browser, click the www.dogs.com link.
DREAMWEAVER BASICS
81
It should open a new window with an external Web site. (Probably PetSmart, a site linked to the dogs.com address.)
82
DREAMWEAVER BASICS
Insert graphics Capture a graphic from the Web 1.
Using the browser, go to: www.visibooks.com/books/dw04/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
DREAMWEAVER BASICS
83
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.
7.
Click the
button.
This should save the graphic inside the images folder.
84
DREAMWEAVER BASICS
Insert a graphic 1.
Open chesapeake.html, then place the cursor below the heading.
2.
On the Toolbar, click the
3.
When the Select Image Source window appears, doubleclick the images folder.
icon.
DREAMWEAVER BASICS
85
4.
Click the chessie graphic, then click the
The page should look like this:
86
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
87
2.
Right-click the graphic. When the menu appears, click Align, then Left.
The page should now look like this:
88
DREAMWEAVER BASICS
3.
Save the page, then preview the page in the browser. It should look like this:
4.
Close the browser.
DREAMWEAVER BASICS
89
Format a graphic 1.
90
In Dreamweaver, right-click the graphic again, then click Edit Tag
![]()
.
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
91
92
3.
Assign Horizontal space of 12, and Vertical space of 4:
4.
Change Border to 1.
DREAMWEAVER BASICS
5.
Click the
button, then save the page.
It should look like this:
A Border of 1 creates a 1pixel border around the graphic
Horizontal spacing of 12 creates a horizontal space of 12 pixels around the graphic that nothing can occupy
DREAMWEAVER BASICS
93
6.
Click the
icon.
The page should look like this:
7.
94
Close the browser.
DREAMWEAVER BASICS
Practice 1.
Go to www.visibooks.com/books/dw04/dogpics.
2.
Save the German Shepherds graphic in the images folder, with the file name shepherds.gif.
3.
Save the Yorkshire Terrier graphic in the images folder, with the file name yorkie.gif.
4.
Insert shepherds.gif into the German Shepherds page below the heading.
5.
Insert yorkie.gif into the Yorkshire Terriers page below the heading.
6.
On the German Shepherds page, insert the text: German Shepherds are smart dogs. as a paragraph below the graphic.
7.
On the Yorkshire Terriers page, insert the text: Yorkshire Terriers are cute. as a paragraph below the graphic.
DREAMWEAVER BASICS
95
8.
On both pages, align the text to the side of the graphic, as on the Chesapeake Bay Retrievers page.
9.
In both pages, give the graphics a Border of 1, Vertical spacing of 4, and Horizontal spacing of 12.
10. Save both pages. 11. Close Dreamweaver.
96
DREAMWEAVER BASICS
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
DREAMWEAVER BASICS
97
4.
Highlight the word Home, then click the
5.
When the Hyperlink window appears, click the
icon.
icon.
When the Select File window appears, click index, then click the
98
DREAMWEAVER BASICS
button.
6.
Click the
7.
Click the page to de-select the text.
button.
It should look like this:
DREAMWEAVER BASICS
99
8.
Save chesapeake.html, then view it in the browser. The word Home should now be a link:
100
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
101
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.
102
DREAMWEAVER BASICS
Link pages to each other 1.
View chesapeake.html.
2.
Following the Home link, type: | Chesapeake Bay Retriever | German Shepherd | Yorkshire Terrier
DREAMWEAVER BASICS
103
104
3.
Make the words Chesapeake Bay Retriever bold:
4.
Link the words German Shepherd to german.html:
DREAMWEAVER BASICS
5.
Link the words Yorkshire Terrier to yorkshire.html:
Tip: If the link doesn’t work quite right, click the the Properties pane.
6.
icon in
Save the page and view it in the browser. It should look like this:
DREAMWEAVER BASICS
105
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.
106
DREAMWEAVER BASICS
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:
DREAMWEAVER BASICS
107
3.
Click the Chesapeake Bay Retriever graphic to select it, then click the
108
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
109
Practice 1.
View german.html.
2.
Following the Home link, type: | Chesapeake Bay Retriever | German Shepherd | Yorkshire Terrier
3.
Make the words German Shepherd bold.
4.
Link the words Chesapeake Bay Retriever and Yorkshire Terrier to their corresponding pages.
5.
Save the page.
6.
Using the same system, create navigation links for the Yorkshire Terriers page. Then save the page.
7.
On the home page, link the German Shepherd graphic to the German Shepherds page.
8.
Link the Yorkshire Terrier graphic to the Yorkshire Terriers page.
9.
View the site in the browser. It should look like the site at www.visibooks.com/books/dw04/dogs
110
DREAMWEAVER BASICS
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.
3.
Right-click on the page. When the menu appears, click CSS Styles, then New.
4.
When the New CSS Style window appears, make sure the Tag radio button is selected, then click body in the Tag list:
DREAMWEAVER BASICS
111
112
5.
Click the
6.
When the CSS Style definition window appears, click Background in the Category list.
DREAMWEAVER BASICS
button.
7.
Click the
icon.
Then in the Background color grid, click Yellow.
8.
Click the
9.
Save format.css.
button.
DREAMWEAVER BASICS
113
10. View the site’s pages. The background color of each page should now be yellow.
114
DREAMWEAVER BASICS
Change link colors 1.
View format.css. Press the ENTER key on your keyboard to place the cursor on line 21.
2.
Right-click on the page. When the menu appears, click CSS Styles, then New.
3.
When the New CSS Style window appears, make sure the Tag radio button is selected, then click a in the Tag list:
DREAMWEAVER BASICS
115
4.
Click the
5.
When the CSS Style definition window appears, click the
button.
icon. Then in the Color grid, click Red.
6.
116
Click the
DREAMWEAVER BASICS
button, then save format.css.
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.
DREAMWEAVER BASICS
117
Show your skills: 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
118
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
119
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.”
Format the home page’s heading as Heading 1. Format the headings of the other pages as Heading 2.
12. On each page, write a descriptive sentence or two in a new paragraph below the main heading.
13. Go to: www.visibooks.com/books/dw04/catpics and capture the three cat graphics there. Put them in a folder called images within the Cats folder.
120
DREAMWEAVER BASICS
14. Insert the appropriate graphic on each of the 3 pages between the main heading and the descriptive paragraph below.
15. Align each graphic left, then specify Vertical space of 4 and Horizontal space of 16.
16. 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.
17. 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.
18. Preview the site in the browser. It should look like the site at www.visibooks.com/books/dw04/cats
19. Close Dreamweaver.
DREAMWEAVER BASICS
121
122
DREAMWEAVER BASICS
Layout & Navigation In this section, you’ll learn how to: •
Lay out pages using tables
•
Create navigation bars
•
Add subsections to site
LAYOUT & NAVIGATION
123
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
124
LAYOUT & NAVIGATION
cell
cell
Create a table 1.
Open Dreamweaver.
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.
LAYOUT & NAVIGATION
125
4.
When the Site Definition window appears, type: Travel in the text box, then click the
5.
When the second screen appears, check the No, I do not want to use a server technology radio button. Then click the
126
button.
LAYOUT & NAVIGATION
button.
6.
When the next screen appears, leave the Edit local copies on my machine radio button checked. Then click the icon next to the Where do you want to store your files? box.
7.
When the Choose local root folder window appears, navigate to the My Documents folder. Then create a new folder called Travel.
Double-click the Travel folder so it appears in the Select box:
Then click the
button.
LAYOUT & NAVIGATION
127
8.
Click the
button.
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.
10. When the next screen appears, leave the No, do not enable check in and check out radio button checked. Then click the
button.
11. When the Summary screen appears, click the button.
12. In the Manage Sites window, click the
button.
13. On the Menu Bar, click File, then New. 14. When the New Document window appears, click HTML in the Basic page column. Then click the
button.
A blank page should open.
15. On the Menu Bar, click File, then Save. 128
LAYOUT & NAVIGATION
16. When the Save As window appears, make sure the Travel folder appears in the Save in box.
Then type: index.html in the File name box.
LAYOUT & NAVIGATION
129
17. Title index.html, the home page, Traveling Down South.
18. On the Toolbar, click the
130
LAYOUT & NAVIGATION
icon.
19. When the Table window appears, type: 1 in the Rows box. Type: 2 in the Columns box.
LAYOUT & NAVIGATION
131
20. Specify a Table width of 100 percent.
21. Click the
button.
The table on the page should look like this:
132
LAYOUT & NAVIGATION
22. Click in the first cell, and type: links
23. Click in the second cell and type: content
LAYOUT & NAVIGATION
133
24. Click the page to de-select the table. The page should look like this:
25. Save the page.
134
LAYOUT & NAVIGATION
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:
LAYOUT & NAVIGATION
135
4.
Click in the first cell. In the Properties pane, click the
5.
When the Cell Properties window appears, click light gray (CCCCCC) in the color grid.
The table should look like this:
136
icon.
LAYOUT & NAVIGATION
You’ll notice that the word links is right up against the edge of the left-hand cell.
6.
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.
7.
Now eliminate the spacing between cells: Type: 0 in the CellSpace box.
LAYOUT & NAVIGATION
137
8.
Click on the page. It should look like this:
9.
Save the page and view it in the browser. It should look like this:
Cell Padding creates a cushion of pixels between the edge of the cell and what’s inside it.
138
LAYOUT & NAVIGATION
Cell Spacing is the space between cells. In this case, 0 pixels
Create a table-based home page 1.
Using the browser, go to: www.visibooks.com/books/dw04/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
LAYOUT & NAVIGATION
139
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.
140
LAYOUT & NAVIGATION
7.
In the left-hand cell, replace the word links with the names of this site’s main sections: Richmond Williamsburg Charleston The page should look like this:
LAYOUT & NAVIGATION
141
8.
Save the page and view it in the browser. It should look like this:
9.
Click in the first cell. In the Properties pane, click Top in the Vert list.
142
LAYOUT & NAVIGATION
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.
LAYOUT & NAVIGATION
143
12. Click the page. The page should look like this:
144
LAYOUT & NAVIGATION
13. Save the page and view it in the browser. It should now look like this:
LAYOUT & NAVIGATION
145
Create new table-based pages 1.
On the Menu Bar, click File, then New.
2.
When the New Document window appears, click the button.
3.
146
Save the new blank page as richmond.html.
LAYOUT & NAVIGATION
4.
Click index.html. On the Menu Bar, click Edit, then Select All.
5.
Click Edit, then Copy.
6.
Click richmond.html, then click Edit, then Paste.
LAYOUT & NAVIGATION
147
7.
Title the new page Richmond, VA.
8.
Using the browser, go to: www.visibooks.com/books/dw04/travelpic/richpic
9.
Capture the Richmond, Virginia graphic there (capitol.jpg) and save it in the images folder.
10. Replace the Traveling South heading with one that reads: Richmond, Virginia
11. Format the heading as Heading 2. 12. Replace the home page graphic with the Richmond graphic, capitol.
13. Beneath the graphic, insert a new paragraph: Richmond is the capital of Virginia.
14. Add the word Home below Charleston in the left-hand cell:
148
LAYOUT & NAVIGATION
14. Add the word Home below Charleston in the left-hand cell:
15. Save richmond.html and view it in the browser. The page should look like this:
LAYOUT & NAVIGATION
149
Practice 1.
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/dw04/travelpic/willpic Get the Charleston page’s graphic and text at: www.visibooks.com/books/dw04/travelpic/charlpic
2.
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.
3.
Insert the text and graphics in their appropriate pages.
4.
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.
5.
When you’re done, preview the site in the browser. It should look and work like the one at: www.visibooks.com/books/dw04/travel
150
LAYOUT & NAVIGATION
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.
LAYOUT & NAVIGATION
151
Tip: If index.html doesn’t show up in the Files pane, click Local View in the Views list.
4.
152
On the Toolbar, click the
LAYOUT & NAVIGATION
icon.
5.
When the Table window appears, type: 1 in the Rows box. Type: 3 in the Columns box.
LAYOUT & NAVIGATION
153
6.
Specify: Table width: 100 percent Border thickness: 0 pixels Cell padding: 4 Cell spacing: 0
7.
Click the
8.
Click the page.
button.
It should look like this:
154
LAYOUT & NAVIGATION
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.
LAYOUT & NAVIGATION
155
13. Click in the first cell. In the Properties pane, type: 33% in the W box.
14. Click the
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.
156
LAYOUT & NAVIGATION
The table should look like this:
17. On the Menu Bar, click File, then Open.
18. Open format.css from the Dogs Web site.
LAYOUT & NAVIGATION
157
19. Save the style sheet as west.css in the Vacation Web site.
Tip: If an alert window appears, click the
20. In west.css, change the page background to white: body { background-color: #FFFFFF; }
158
LAYOUT & NAVIGATION
button.
21. 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.
22. Below the table, type: Traveling West
23. Format the text as Heading 1. It should look like this:
24. 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.
LAYOUT & NAVIGATION
159
25. Using the Properties pane, format the navigation bar text in the Paragraph style.
160
LAYOUT & NAVIGATION
26. Save the page and view it in the browser. It should look like this:
27. Close the browser.
LAYOUT & NAVIGATION
161
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.
162
LAYOUT & NAVIGATION
6.
Right-click in the last cell of the table. When the menu appears, click Table, then Insert Column.
A new cell should appear:
LAYOUT & NAVIGATION
163
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:
164
LAYOUT & NAVIGATION
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
LAYOUT & NAVIGATION
165
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. The page should look like this:
166
LAYOUT & NAVIGATION
15. View index.html and link the word California to california.html.
16. Save index.html.
LAYOUT & NAVIGATION
167
Practice 1.
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.
2.
Create a new page with file name rockies.html. This is The Rockies page. Title it Nature in the Rocky Mountains.
3.
Copy the navigation table at the top of california.html and paste it into rockies.html.
4.
Change the “You are here” yellow background color from the California cell to The Rockies cell. Color the California cell light gray.
5.
168
Link the words California, The Midwest and Home to their respective pages.
LAYOUT & NAVIGATION
6.
When you’re done, preview the page in the browser. It should look like this:
7.
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.
8.
View index.html, and in the navigation bar, link the words The Rockies and The Midwest to their respective pages.
9.
Make all “you are here” text that corresponds to the current page bold. (Example: make the words The Rockies bold on The Rockies page.)
LAYOUT & NAVIGATION
169
10. Link both pages to the style sheet west.css. 11. Save the pages, then preview the site in the browser. It should look like the site at: www.visibooks.com/books/dw04/vacation
170
LAYOUT & NAVIGATION
Add subsections to site Insert a table for content and subsection links 1.
View california.html.
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
The page should look like this:
LAYOUT & NAVIGATION
171
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.
172
LAYOUT & NAVIGATION
7.
Change the Vert alignment of both cells to Top.
8.
Save the page and view it in the browser. It should look like this:
LAYOUT & NAVIGATION
173
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
4.
Change the heading to read: Seeing the Golden Gate Bridge Then format the heading as Heading 3.
5.
174
Link the page to the style sheet west.css.
LAYOUT & NAVIGATION
icon.
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.
LAYOUT & NAVIGATION
175
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. It should look like this:
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.
176
LAYOUT & NAVIGATION
Practice 1.
View california.html.
2.
Link the words The Golden Gate Bridge, Highway 101 and Big Sur to their respective pages.
3.
Save california.html.
4.
Open goldengate.html and copy both tables.
5.
Paste these tables into highway101.html.
6.
Link highway101.html to the style sheet west.css.
7.
On highway101.html, link the words The Golden Gate Bridge to goldengate.html.
8.
Change the text Highway 101 from a link to plain text.
LAYOUT & NAVIGATION
177
9.
Change the Highway 101 page’s heading and descriptive text beneath it so it looks like this:
10. 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.
11. Save all pages and view the site in the browser. It should look and work like: www.visibooks.com/books/dw04/vacation2
178
LAYOUT & NAVIGATION
Show your skills: 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
LAYOUT & NAVIGATION
179
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. Paragraph for St. Louis page: Find out what’s going on in St. Louis at www.stlouis.com. Link to www.stlouis.com
180
LAYOUT & NAVIGATION
6.
When you’re done, view the site in the browser. It should look and function like the one at: www.visibooks.com/books/dw04/vacation3
7.
Close Dreamweaver.
LAYOUT & NAVIGATION
181
182
LAYOUT & NAVIGATION
Utilities In this section, you’ll learn how to: •
Find and replace
•
Check spelling
•
Change HTML code
•
Check for broken links
UTILITIES
183
Find and Replace
184
1.
Open Dreamweaver.
2.
In the Files pane, click Travel in the list of sites.
3.
Double-click index.html to open the home page.
UTILITIES
4.
On the Menu Bar, click Edit, then Find and Replace.
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.
UTILITIES
185
6.
In the Replace box, type: River City
186
7.
In the Find in list, click Entire Current Local Site.
8.
Click the
9.
When the alert window appears, click the
UTILITIES
button. button.
The Results pane should appear:
10. Click its T icon to close it.
The page should look like this:
UTILITIES
187
11. View each page of the Travel site. Richmond should be replaced with River City.
188
UTILITIES
Check spelling 1.
View the home page index.html.
2.
On the Menu Bar, click Text, then Check Spelling.
3.
The Check Spelling window will appear:
UTILITIES
189
When you’re finished checking the spelling of the site, click the
4.
190
UTILITIES
button.
On the Menu Bar, click File, then Close All.
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
, 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:
UTILITIES
191
The page should now look like this:
4.
In the
tag, change its width=”100%” attribute to: width=”50%”
192
UTILITIES
5.
Save the page, then click the
icon.
The page should look like this:
6.
Click the 100%:
icon, then change the table width back to
UTILITIES
193
7.
Save the page, then click the The page should look like this:
194
UTILITIES
icon.
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.
UTILITIES
195
Show your skills: 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 ![]()
tags in the home page’s HTML code. Then change border=”0” to border=”1” and save the page.
196
5.
Check the site for broken internal links.
6.
When finished, close the Dogs Web site, then close Dreamweaver.
UTILITIES
Interactivity In this section, you’ll learn how to: •
Employ forms
•
Employ templates
•
Upload sites to a Web server
INTERACTIVITY
197
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.
198
Press the ENTER key on your keyboard to place the cursor in a new paragraph.
INTERACTIVITY
7.
On the Menu Bar, click Insert, then Form, then Form.
The page should look like this:
INTERACTIVITY
199
8.
On the Toolbar, click the
9.
When the Table window appears, give the table:
icon.
4 Rows, 2 Columns, set the Table width to 50 percent, give it Cell padding of 4, and a Border thickness of 1.
10. Click the
button.
The page should look like this:
200
INTERACTIVITY
11. In the top three left-hand cells, type: Name: Address: Email:
INTERACTIVITY
201
12. Save the page and view it in the browser. It should look like this:
13. Close the browser. 14. Click in the top right-hand cell to place the cursor there.
202
INTERACTIVITY
15. On the Menu Bar, click Insert, Form, then Text Field.
A textbox should appear in the cell:
INTERACTIVITY
203
16. Insert textbox input fields in the table cells next to Address and Email as well.
17. Click the first textbox. In the Properties pane, type: name in the TextField box.
18. Click the second textbox, then in the Properties pane, type: address in the TextField box.
204
INTERACTIVITY
19. Use the same process to assign the name email to the third textbox in the form.
20. Save the page. 21. Click in the last row’s right-hand cell. On the Menu Bar, click Insert, Form, then Button.
INTERACTIVITY
205
22. In the Properties pane, type: Send me information In the Label box.
23. Click the page. It should look like this:
206
INTERACTIVITY
24. Save the page and view it in the browser. It should look like this:
25. Align the text in the left-hand cells to the right. 26. 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.
INTERACTIVITY
207
27. Click the table border.
In the Properties pane, change the table’s Border to 0.
208
INTERACTIVITY
28. Save the page and view it in the browser. It should look like this:
29. Close the browser. 30. View index.html. Add a new paragraph linked to infoform.html: Get more information about Western Travel mailed to you.
INTERACTIVITY
209
31. Save the page and view it in the browser. 32. Click the linked sentence. It should bring up the page with the form.
33. Close the browser.
210
INTERACTIVITY
Make the form work 1.
View infoform.html.
2.
Click the
3.
In the
