Dreamweaver 8 in Pictures.2005
Content
Dreamweaver 8 In Pictures
by Chris Charuhas
www.inpics.net
Dreamweaver 8 In Pictures
Copyright
This book is provided under a Creative Commons license at: creativecommons.org/licenses/by-nc-nd/2.5/ You are free to download, copy, and share this electronic book with others. However, it is illegal to sell this book, or change it in any way. If you’d like to sell or change it, just contact us at [email protected].
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. ISBN 1597061026
Table of Contents
Dreamweaver Basics ...................................... 1
Set up a Web site....................................................................................2 Format text............................................................................................27 Create links to new pages ...................................................................58 Create e-mail and external links .........................................................74 Insert graphics .....................................................................................81 Create a basic navigation system.......................................................96 Change page and link colors ............................................................109
Layout & Navigation ................................... 116
Lay out pages using tables ...............................................................117 Create navigation bars.......................................................................143 Add subsections to site.....................................................................160
Utilities........................................................ 168
Find and Replace................................................................................169 Check spelling....................................................................................174 Change HTML code............................................................................176 Check for broken links.......................................................................180
TABLE OF CONTENTS
i
Interactivity .................................................181
Employ forms..................................................................................... 182 Employ Templates ............................................................................. 198 Upload sites to a Web server............................................................ 208
Advanced Layout.........................................217
Employ background graphics .......................................................... 218 Employ custom styles ....................................................................... 224 Employ spacer GIFs .......................................................................... 229 Specify page margins........................................................................ 233 Create rollover effects ....................................................................... 236
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.
4.
When the alert window appears, check the Don’t show me this message again checkbox, then click the button.
4
DREAMWEAVER BASICS
5.
Close Dreamweaver.
DREAMWEAVER BASICS
5
Create a new site 1.
Open Dreamweaver. It should look like this:
2.
In the Files pane, click Manage Sites in the Files list.
6
DREAMWEAVER BASICS
3.
When the Manage Sites window appears, click the button.
4.
When the menu appears, click Site.
DREAMWEAVER BASICS
7
5.
When the Site Definition window appears, type: Dogs in the first text box, then click the button.
8
DREAMWEAVER BASICS
6.
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
7.
When the next screen appears, leave the Edit local copies on my machine radio button checked.
Then click the
button.
8.
When the next screen appears, click FTP in the How do you connect to your remote server? list.
10
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.
Tip: Not this literal server address, but
the real address of your Web server.
DREAMWEAVER BASICS
11
10.
When the next screen appears, leave the No, do not enable check in and check out radio button checked. Then click the button.
12
DREAMWEAVER BASICS
11.
When the Summary screen appears, click the
button.
DREAMWEAVER BASICS
13
12.
In the Manage Sites window, click the
button.
14
DREAMWEAVER BASICS
Create a home page 1.
On the Menu Bar, click File, then New.
DREAMWEAVER BASICS
15
2.
When the New Document window appears, click HTML in the Basic page column. Then click the button:
16
DREAMWEAVER BASICS
A blank page should open:
3.
In the blank page, type: Dogs Home Page
DREAMWEAVER BASICS
17
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.
18
DREAMWEAVER BASICS
Then type: index.html in the File name box.
DREAMWEAVER BASICS
19
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.
20
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.inpics.net, 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.inpics.net/homepage.html to get it to appear.
DREAMWEAVER BASICS
21
7.
Right-click in blank space on the page. When the menu appears, click Page Properties.
22
DREAMWEAVER BASICS
8.
In the Category list, click Title/Encoding.
DREAMWEAVER BASICS
23
9.
When the Title/Encoding screen appears, type: A Home Page About Dogs in the Title box.
10.
Click the
button.
24
DREAMWEAVER BASICS
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.
11.
On the Menu Bar, click File, then Save.
DREAMWEAVER BASICS
25
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.
26
DREAMWEAVER BASICS
Format text
Create a style sheet 1.
On the Menu Bar, click File, then New.
DREAMWEAVER BASICS
27
2.
When the New Document window appears, click CSS in the Basic page column. Then click the button:
28
DREAMWEAVER BASICS
A blank page should open:
3.
Right-click on the page. When the menu appears, click CSS Styles, then New.
DREAMWEAVER BASICS
29
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.
30
DREAMWEAVER BASICS
6.
Click the
button.
7.
When the CSS Rule definition window appears, click Verdana, Arial, Helvetica, sans serif in the Font list.
DREAMWEAVER BASICS
31
8.
In the Weight list, click bold.
9.
Click the
button.
The page should look like this:
32
DREAMWEAVER BASICS
10.
On the Menu Bar, click File, then Save. When the Save As window appears, type: format.css in the File name box.
DREAMWEAVER BASICS
33
11.
Click the
button.
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 Attach Style Sheet in the Style list.
DREAMWEAVER BASICS
35
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.
36
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
37
The text should now look like this:
3.
Save the page.
38
DREAMWEAVER BASICS
Change text size 1.
At the top of the window, click format.css.
2.
Click h1.
3.
In the Panels list, click CSS.
DREAMWEAVER BASICS
39
4.
In the Properties panel, click the
icon.
40
DREAMWEAVER BASICS
5.
When the CSS Rule definition window appears, click 16 in the Size list. Then click points.
6. 7. 8.
Click the
button.
Save the style sheet. At the top of the window, click index.html. The text should now look like this:
DREAMWEAVER BASICS
41
Change text weight 1. 2.
Click at the end of the text, then press the ENTER key on your keyboard to start a new paragraph. Type: These are my favorite breeds of dog:
3. 4.
Save the page. Click format.css.
42
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
43
6.
Right-click the page. When the menu appears, click CSS Styles, then New.
44
DREAMWEAVER BASICS
DREAMWEAVER BASICS
45
7.
When the New CSS Rule window appears, make sure the Tag radio button is selected. In the Tag list, click p.
8.
Click the
button.
46
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
47
11.
Click index.html. It should look like this:
12.
Highlight the words favorite breeds.
48
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
49
Align text 1. 2.
Click in the sentence to place the cursor there. In the Properties pane, click the button.
The page should look like this:
3.
Click the
button.
50
DREAMWEAVER BASICS
The page should look like this:
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
DREAMWEAVER BASICS
2.
Highlight all three paragraphs, then click the Properties pane.
button in the
DREAMWEAVER BASICS
53
The page should look like this:
3.
Save the page.
54
DREAMWEAVER BASICS
Create lists 1.
With the paragraphs highlighted, click the button.
2.
Click on blank space to un-highlight the paragraphs. The page should look like this:
3.
Save the page.
DREAMWEAVER BASICS
55
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. 7.
Change the numbered list back to a bulleted list. Make the list items bold.
56
DREAMWEAVER BASICS
8.
Save the page. It should look like this:
DREAMWEAVER BASICS
57
Create links to new pages
Step 1: Create a new page 1. 2.
On the Menu Bar, click File, then New. When the New Document window appears, click HTML in the Basic page column. Then click the button.
58
DREAMWEAVER BASICS
3.
Right-click the new page. When the menu appears, click Page Properties.
DREAMWEAVER BASICS
59
4.
Click Title/Encoding in the Category list. Then in the Title box, type: Chesapeake Bay Retrievers
5. 6.
Click the
button.
On the Menu Bar, click File, then Save.
60
DREAMWEAVER BASICS
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 lowercase 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 in the File name box.
DREAMWEAVER BASICS
61
8. 9.
Click the Type:
button.
Chesapeake Bay Retrievers
10.
In the Properties pane, click Attach Style Sheet in the Style list.
62
DREAMWEAVER BASICS
11.
When the Attach External Style Sheet window appears, click the button.
12. 13.
Save chesapeake.html. Click format.css.
DREAMWEAVER BASICS
63
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. When the menu appears, click CSS Styles, then New.
64
DREAMWEAVER BASICS
16.
When the New CSS Rule window appears, make sure the Tag radio button is selected. In the Tag list, click h2.
17.
Click the
button.
DREAMWEAVER BASICS
65
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.
19. 20.
Click the
button, then save format.css.
Click chesapeake.html.
66
DREAMWEAVER BASICS
21.
With the cursor on the first line, click Heading 2 in the Format list.
The page should look like this:
22.
Save the page.
DREAMWEAVER BASICS
67
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.
68
DREAMWEAVER BASICS
Step 2: Link to the new page 1. 2.
Click index.html. Highlight the words Chesapeake Bay Retriever.
3.
On the Toolbar, click the
icon.
DREAMWEAVER BASICS
69
4.
When the Hyperlink window appears, click the
icon.
5.
When the Select File window appears, click chesapeake.
6.
Click the
buttons.
70
DREAMWEAVER BASICS
7.
Click the page. The words Chesapeake Bay Retriever should now be a link:
8. 9.
Save the page. 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:
DREAMWEAVER BASICS
71
11.
Click the Chesapeake Bay Retriever link. It should take you to chesapeake.html:
12. 13.
Close the browser. Create new pages for German Shepherds and Yorkshire Terriers. Page German Shepherd Yorkshire Terrier Title German Shepherds Yorkshire Terriers File Name german.html 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. 15.
Verify that both new pages are linked to the format.css style sheet. On the home page, link the words German Shepherd and Yorkshire Terrier to their pages.
72
DREAMWEAVER BASICS
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. Save all pages. Click the home page’s links to make sure they work. Close Dreamweaver.
18. 19. 20.
DREAMWEAVER BASICS
73
Create e-mail and external links
Create an e-mail link 1. 2.
Open Dreamweaver. 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].
74
DREAMWEAVER BASICS
4.
Highlight [email protected].
5.
On the Toolbar, click the
icon.
6.
When the Email Link window appears, click the button.
DREAMWEAVER BASICS
75
7.
Click on the page. The address should now be a link:
8.
Save the page.
76
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
77
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.
78
DREAMWEAVER BASICS
5.
Click the page. The address should now be a link:
6. 7.
Save the page. On the page’s Toolbar, click the icon.
When the menu appears, click Preview in the browser of your choice.
DREAMWEAVER BASICS
79
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.)
80
DREAMWEAVER BASICS
Insert graphics
Capture a graphic from the Web 1.
Using the browser, go to: www.inpics.net/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. 4. 5.
When the menu appears, click Save Picture As. When the Save Picture window appears, click the Dogs folder in the Save in drop-down list. Create a new folder called images within the Dogs folder.
DREAMWEAVER BASICS
81
6.
Double-click the images folder so it appears in the Save in dropdown list.
7.
Click the
button.
This should save the graphic inside the images folder.
82
DREAMWEAVER BASICS
Insert a graphic 1. 2.
Open chesapeake.html, then place the cursor below the heading. On the Toolbar, click the icon.
Tip: If you see an image selection menu, click Image.
DREAMWEAVER BASICS
83
3.
When the Select Image Source window appears, double-click the images folder.
84
DREAMWEAVER BASICS
4.
Click the chessie graphic, then click the
button.
Tip: If the Accessibility Attributes window opens, click the
button.
DREAMWEAVER BASICS
85
The page should look like this:
86
DREAMWEAVER BASICS
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.
In Dreamweaver, right-click the graphic again, then click Edit Tag <img>.
90
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
3.
Assign Horizontal space of 12, and Vertical space of 4:
4.
Change Border to 1.
92
DREAMWEAVER BASICS
5.
Click the
button, then save the page.
It should look like this:
6.
Click the
icon.
The page should look like this:
Horizontal spacing of 12 creates a horizontal space of 12 pixels around the graphic that nothing can occupy
A Border of 1 creates a 1pixel border around the graphic
DREAMWEAVER BASICS
93
7.
Go to: www.inpics.net/books/dw8/dogpics
8. 9. 10. 11. 12.
Save the German Shepherds graphic in the images folder, with the file name shepherds.gif. Save the Yorkshire Terrier graphic in the images folder, with the file name yorkie.gif. Insert shepherds.gif into the German Shepherds page below the heading. Insert yorkie.gif into the Yorkshire Terriers page below the heading. 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. 15.
On both pages, align the text to the side of the graphic, as on the Chesapeake Bay Retrievers page. In both pages, give the graphics a Border of 1, Vertical spacing of 4, and Horizontal spacing of 12.
94
DREAMWEAVER BASICS
16. 17.
Save both pages. Close Dreamweaver.
DREAMWEAVER BASICS
95
Create a basic navigation system
Link back to the home page 1. 2. 3.
Open Dreamweaver, then open all pages in the Dogs site. View chesapeake.html. Beneath the paragraph, type: Home
96
DREAMWEAVER BASICS
4.
Highlight the word Home, then click the
icon.
DREAMWEAVER BASICS
97
5.
When the Hyperlink window appears, click the
icon.
When the Select File window appears, click index, then click the button.
6.
Click the
button.
98
DREAMWEAVER BASICS
7.
Click the page to de-select the text. It should look like this:
8.
Save chesapeake.html, then view it in the browser. The word Home should now be a link:
DREAMWEAVER BASICS
99
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.
100
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
101
Link pages to each other 1. 2.
View chesapeake.html. Following the Home link, type: | Chesapeake Bay Retriever | German Shepherd | Yorkshire Terrier
102
DREAMWEAVER BASICS
3.
Make the words Chesapeake Bay Retriever bold:
4.
Link the words German Shepherd to german.html:
DREAMWEAVER BASICS
103
5.
Link the words Yorkshire Terrier to yorkshire.html:
Tip: If the link doesn’t work quite right, click the Properties pane.
icon in the
6.
Save the page and view it in the browser. It should look like this:
104
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
105
Use graphics as links 1. 2.
View index.html. 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.
106
DREAMWEAVER BASICS
4.
When the Select File window appears, click chesapeake, then the button.
5. 6.
Save the home page, then preview it in the browser. Click the Chesapeake Bay Retriever graphic. It should take you to the Chesapeake Bay Retriever page.
7. 8.
View german.html. Following the Home link, type: | Chesapeake Bay Retriever | German Shepherd | Yorkshire Terrier
DREAMWEAVER BASICS
107
9. 10. 11. 12. 13. 14. 15. 16.
Make the words German Shepherd bold. Link the words Chesapeake Bay Retriever and Yorkshire Terrier to their corresponding pages. Save the page. Using the same system, create navigation links for the Yorkshire Terriers page. Then save the page. On the home page, link the German Shepherd graphic to the German Shepherds page. Link the Yorkshire Terrier graphic to the Yorkshire Terriers page. Save the page. View the site in the browser. It should look like the site at: www.inpics.net/books/dw8/dogs
108
DREAMWEAVER BASICS
Change page and link colors
Change background color of pages 1. 2. 3.
View format.css. In format.css, press ENTER to place the cursor on line 17. 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
109
5.
Click the
button.
6.
When the CSS Rule definition window appears, click Background in the Category list.
110
DREAMWEAVER BASICS
7.
Click the
icon.
Then in the Background Color grid, click Yellow.
8. 9.
Click the Save format.css.
button.
DREAMWEAVER BASICS
111
10.
View the site’s pages. The background color of each page should now be yellow.
112
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:
4.
Click the
button.
DREAMWEAVER BASICS
113
5.
When the CSS Rule definition window appears, click the icon. Then in the Color grid, click Red.
6. 7.
Click the
button, then save format.css.
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.
114
DREAMWEAVER BASICS
DREAMWEAVER BASICS
115
Layout & Navigation
In this section, you’ll learn how to:
• • •
Lay out pages using tables Create navigation bars Add subsections to site
116
LAYOUT & NAVIGATION
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
LAYOUT & NAVIGATION
117
Create a table 1. 2.
Open Dreamweaver. 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.
118
LAYOUT & NAVIGATION
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. Then click the button.
LAYOUT & NAVIGATION
119
6.
When the next screen appears, leave the Edit local copies on my machine radio button checked. Then click the button.
7. 8.
When the next screen appears, click FTP 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: 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. Then click the button. button. button.
10. 11. 12.
When the Summary screen appears, click the In the Manage Sites window, click the On the Menu Bar, click File, then New.
120
LAYOUT & NAVIGATION
13.
When the New Document window appears, click HTML in the Basic page column. Then click the button.
A blank page should open.
14. 15.
On the Menu Bar, click File, then Save. When the Save As window appears, make sure the Travel folder appears in the Save in box.
LAYOUT & NAVIGATION
121
Then type: index.html in the File name box.
16. 17.
Click the
button.
Title index.html, the home page, Traveling Down South.
122
LAYOUT & NAVIGATION
18.
On the Toolbar, click the
icon.
19.
When the Table window appears, type: 1 in the Rows box. Type: 2 in the Columns box.
LAYOUT & NAVIGATION
123
20.
Specify a Table width of 100 percent.
21.
Click the
button.
The table on the page should look like this:
22.
Click in the first cell, and type: links
124
LAYOUT & NAVIGATION
23.
Click in the second cell and type: content
24.
Click the page to de-select the table. The page should look like this:
25.
Save the page.
LAYOUT & NAVIGATION
125
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:
126
LAYOUT & NAVIGATION
4.
Click in the first cell. In the Properties pane, click the Bg icon.
5.
When the color grid appears, click light gray (CCCCCC).
6.
Click on the page. The table should look like this:
You’ll notice that the word links is right up against the edge of the left-hand cell.
LAYOUT & NAVIGATION
127
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: 0 in the CellSpace box.
128
LAYOUT & NAVIGATION
9.
Click on the page. It should look like this:
10.
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.
Cell Spacing is the space between cells. In this case, 0 pixels
LAYOUT & NAVIGATION
129
Create a table-based home page 1.
Using the browser, go to: www.inpics.net/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
130
LAYOUT & NAVIGATION
4.
Format the heading as Heading 1.
5. 6.
Insert the graphic beneath the heading. 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.
LAYOUT & NAVIGATION
131
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:
132
LAYOUT & NAVIGATION
8.
Save the page and view it in the browser. It should look like this:
9.
In Dreamweaver, click in the first cell. In the Properties pane, click Top in the Vert list.
LAYOUT & NAVIGATION
133
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.
134
LAYOUT & NAVIGATION
12.
Click the page. The page should look like this:
LAYOUT & NAVIGATION
135
13.
Save the page and view it in the browser. It should now look like this:
136
LAYOUT & NAVIGATION
Create new table-based pages 1. 2. 3. 4.
On the Menu Bar, click File, then New. When the New Document window appears, click the button. Save the new blank page as richmond.html. Click index.html. On the Menu Bar, click Edit, then Select All.
LAYOUT & NAVIGATION
137
5. 6.
Click Edit, then Copy. Click richmond.html.
7.
Click Edit, then Paste.
138
LAYOUT & NAVIGATION
Tip: If an Image Description window
opens, click the
button.
8. 9.
Title the new page Richmond, VA. Using the browser, go to: www.inpics.net/books/dw8/travelpic/richpic
10. 11.
Capture the Richmond, Virginia graphic there (capitol.jpg) and save it in the images folder. Replace the Traveling South heading with one that reads: Richmond, Virginia
12. 13.
Format the heading as Heading 2. Replace the home page graphic with the Richmond graphic, capitol.
LAYOUT & NAVIGATION
139
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:
140
LAYOUT & NAVIGATION
16.
Save richmond.html and view it in the browser. The page should look like this:
17.
Create pages for Williamsburg and Charleston just like the Richmond page. Get the graphic and text for the Williamsburg page at: www.inpics.net/books/dw8/travelpic/willpic Get the Charleston page’s graphic and text at: www.inpics.net/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.
LAYOUT & NAVIGATION
141
Tip: Don’t forget to transform the link that shows “You Are Here”
into bold, plain text.
19. 20.
Insert the text and graphics in their appropriate pages. 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.inpics.net/books/dw8/travel
142
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. 4.
Create a home page (index.html) and title it Traveling West On Vacation. On the Toolbar, click the icon.
LAYOUT & NAVIGATION
143
5.
When the Table window appears, type: 1 in the Rows box. Type: 3 in the Columns box.
144
LAYOUT & NAVIGATION
6.
Specify: Table width: 100 percent Border thickness: 0 pixels Cell padding: 4 Cell spacing: 0
7. 8.
Click the Click the page.
button.
It should look like this:
LAYOUT & NAVIGATION
145
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. In the Properties pane, type: 33% in the W box.
146
LAYOUT & NAVIGATION
14.
Click the Bg
icon.
When the color grid appears, click light gray (CCCCCC).
15. 16.
Make the center cell 34% wide, and give it the same background color. Make the last cell 33% wide, and give it the same background color. The table should look like this:
LAYOUT & NAVIGATION
147
17.
On the Menu Bar, click File, then Open.
18.
Open format.css from the Dogs Web site.
148
LAYOUT & NAVIGATION
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; }
LAYOUT & NAVIGATION
149
21. 22.
Save west.css. 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. It should look like this:
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.
150
LAYOUT & NAVIGATION
26.
Using the Properties pane, format the navigation bar text in the Paragraph style.
LAYOUT & NAVIGATION
151
27.
Save the page and view it in the browser. It should look like this:
28.
Close the browser.
152
LAYOUT & NAVIGATION
Create navigation bar for a main section page 1.
Create a new page. Save it as california.html.
2. 3.
Title it Vacationing in California. View index.html, then highlight the table.
4. 5.
On the Menu Bar, click Edit, then Copy. View california.html. Then click Edit, then Paste.
LAYOUT & NAVIGATION
153
6.
Right-click in the last cell of the table. When the menu appears, click Table, then Insert Column.
A new cell should appear:
154
LAYOUT & NAVIGATION
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:
LAYOUT & NAVIGATION
155
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
156
LAYOUT & NAVIGATION
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:
15. 16.
View index.html and link the word California to california.html. Save index.html.
LAYOUT & NAVIGATION
157
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. 20.
Copy the navigation table at the top of california.html and paste it into rockies.html. Change the “You are here” yellow background color from the California cell to The Rockies cell. Color the California cell light gray.
21. 22.
Link the words California, The Midwest and Home to their respective pages. When you’re done, preview the page in the browser. It should look like this:
158
LAYOUT & NAVIGATION
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. 25.
View index.html, and in the navigation bar, link the words The Rockies and The Midwest to their respective pages. 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. 27.
Link both new pages to the style sheet west.css. Save the pages, then preview the site in the browser. It should look like the site at: www.inpics.net/books/dw8/vacation
LAYOUT & NAVIGATION
159
Add subsections to site
Insert a table for content and subsection links 1. 2.
View california.html. 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:
160
LAYOUT & NAVIGATION
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.
LAYOUT & NAVIGATION
161
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:
162
LAYOUT & NAVIGATION
Create subsection pages 1.
Create new blank pages for subsections The Golden Gate Bridge, Highway 101 and Big Sur: Page Title Seeing the Golden Gate Bridge Driving Highway 101 Staying in Big Sur File Name goldengate.html highway101.html bigsur.html
2. 3.
Copy the tables from california.html and paste them into goldengate.html. 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. 6.
Link the page to the style sheet west.css. 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.
LAYOUT & NAVIGATION
163
7.
Format the h3 style as Verdana, Arial, Helvetica, sans serif, 12 points.
8. 9.
Save west.css. 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.”
164
LAYOUT & NAVIGATION
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.
12. 13. 14.
View california.html. Link the words The Golden Gate Bridge, Highway 101 and Big Sur to their respective pages. Save california.html.
LAYOUT & NAVIGATION
165
15. 16. 17. 18. 19. 20.
Open goldengate.html and copy both tables. Paste these tables into highway101.html. Link highway101.html to the style sheet west.css. On highway101.html, link the words The Golden Gate Bridge to goldengate.html. Change the text Highway 101 from a link to plain text. 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.
166
LAYOUT & NAVIGATION
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.inpics.net/books/dw8/vacation2
LAYOUT & NAVIGATION
167
Utilities
In this section, you’ll learn how to:
• • • •
Find and replace Check spelling Change HTML code Check for broken links
168
UTILITIES
Find and Replace
1. 2.
Open Dreamweaver. In the Files pane, click Travel in the list of sites.
3. 4.
Double-click index.html to open the home page. On the Menu Bar, click Edit, then Find and Replace.
UTILITIES
169
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
170
UTILITIES
7.
In the Find in list, click Entire Current Local Site.
8.
Click the
button. If an alert window appears, click the button. The Results pane should appear:
9.
Click its T icon to close it.
UTILITIES
171
172
UTILITIES
The page should look like this:
10.
View each page of the Travel site. Richmond should be replaced with River City.
UTILITIES
173
Check spelling
1. 2.
View williamsburg.html. On the Menu Bar, click Text, then Check Spelling.
3.
The Check Spelling window will appear:
174
UTILITIES
4. 5.
When you’re finished checking the spelling of the site, click the button. On the Menu Bar, click File, then Close All.
UTILITIES
175
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. 2. 3.
Open the Vacation Web site. View the home page, index.html. Click the icon at the top of the window:
176
UTILITIES
The page should now look like this:
4.
In the <table> tag, change its width=”100%” attribute to: width=”50%”
UTILITIES
177
5.
Save the page, then click the The page should look like this:
icon.
6.
Click the
icon, then change the table width back to 100%:
178
UTILITIES
7.
Save the page, then click the The page should look like this:
icon.
UTILITIES
179
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.
180
UTILITIES
Interactivity
In this section, you’ll learn how to:
• • •
Employ forms Employ templates Upload sites to a Web server
INTERACTIVITY
181
Employ forms
Create a form 1. 2. 3. 4. 5.
Open Dreamweaver, then open the Vacation site. Create a new page, and save it with the file name infoform.html. Title the page Request for Information. Link it to the west.css style sheet. 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.
182
INTERACTIVITY
7.
On the Menu Bar, click Insert, then Form, then Form.
The page should look like this:
8.
On the Toolbar, click the
icon.
INTERACTIVITY
183
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.
10.
Click the
button.
The page should look like this:
184
INTERACTIVITY
11.
In the top three left-hand cells, type: Name: Address: Email:
12.
Save the page and view it in the browser. It should look like this:
INTERACTIVITY
185
13. 14.
Close the browser. Click in the top right-hand cell to place the cursor there.
15.
On the Menu Bar, click Insert, Form, then Text Field.
186
INTERACTIVITY
16.
When the Input Tag Accessibility Attributes window appears, click the button.
A textbox should appear in the cell:
INTERACTIVITY
187
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. In the Properties pane, type: name in the TextField box.
19.
Click the second textbox, then in the Properties pane, type: address in the TextField box.
188
INTERACTIVITY
20.
Use the same process to assign the name email to the third textbox in the form.
21. 22.
Save the page. 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
189
24.
Click the new button.
25.
In the Properties pane, type: Send me information In the Value box.
190
INTERACTIVITY
26.
Click the page. It should look like this:
27.
Save the page and view it in the browser. It should look like this:
INTERACTIVITY
191
28. 29.
Align the text in the left-hand cells to the right. Make the left-hand cell in the first row 5% wide, and the righthand 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.
192
INTERACTIVITY
31.
Save the page and view it in the browser. It should look like this:
32. 33.
Close the browser. View index.html. Add a new paragraph linked to infoform.html: Get more information about Western Travel mailed to you.
INTERACTIVITY
193
34. 35.
Save the page and view it in the browser. Click the linked sentence. It should bring up the page with the form.
36.
Close the browser.
194
INTERACTIVITY
Make the form work 1. 2. 3.
View infoform.html. Click the icon.
In the <form> tag, highlight its name: <form id=”form1” name=”form1” method=”post” action=””>
4.
Type: infoform It should look like this: <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/cgibin/formmail.pl”>
INTERACTIVITY
195
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. 8. 9. 10.
Create a new page in the Vacation site with the file name favoritesform.html. Title it My Favorite Places. Insert a form, then insert a table with four rows and two cells in each row. Fill the cells with the text and form objects seen below:
List/Menu
Radio buttons
196
INTERACTIVITY
11.
Put these values in the List/Menu: California The Rockies The Midwest Tip: Click the the Properties pane.
button in
12.
When finished, save the page and preview it in the browser. It should look like this:
INTERACTIVITY
197
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. 2.
In the Vacation site, open california.html. On the Menu Bar, click File, then Save as Template.
198
INTERACTIVITY
3.
When the Save As Template window appears, type: Main Section in the Save As textbox.
4. 5.
Click the
button. button.
When the alert window appears, click the
INTERACTIVITY
199
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.
200
INTERACTIVITY
8.
Highlight the entire top table—the one that comprises the navigation bar.
9.
On the Toolbar, click the
icon.
10.
When the menu appears, click Editable Region.
INTERACTIVITY
201
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:
202
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
203
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:
204
INTERACTIVITY
Create a new page from a template 1. 2.
On the Menu Bar, click File, then New. When the New Document window appears, click the Templates tab.
3.
Click Site “Vacation”.
4.
Click Main Section.
INTERACTIVITY
205
5. 6.
Click the
button.
Enter information in the template so it looks like this:
7. 8.
On the Menu Bar, click File, then Save. When the Save As window appears, type: california2.html in the File name textbox.
9. 10. 11. 12.
Click the
button.
Open goldengate.html. Save it as a template with file name California Subsection.dwt. 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. Name the editable region Subsections.
13.
206
INTERACTIVITY
Tip: Don’t make the navigation bar an editable region in the
template.
14. 15. 16. 17.
Make the right-hand cell in the lower table an Editable Region. Name it Page Content. Save the template again. Use the template to create another Big Sur page with file name bigsur2.html.
INTERACTIVITY
207
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.
208
INTERACTIVITY
2.
In the Manage Sites window, click the
button.
3. 4. 5. 6.
When the Site Definition window appears, click the button. In the next screen, click the In the next screen, click the button. button.
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.inpics.net, washington.patriot.net, or 207.176.7.217.
INTERACTIVITY
209
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.
210
INTERACTIVITY
The screen should look like this:
9.
Click the
button.
If the FTP connection to your Web server works, this window will appear:
10.
Click the
button.
INTERACTIVITY
211
11. 12. 13. 14.
Click the Click the Click the Click the
button. button. button. button.
212
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
213
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:
214
INTERACTIVITY
All the site’s pages will appear in the Files pane:
6. 7.
Click the
icon to disconnect from the server.
Close the Vacation site, then close Dreamweaver.
INTERACTIVITY
215
216
INTERACTIVITY
Advanced Layout
In this section, you’ll learn how to:
• • • • •
Employ background graphics Employ custom styles Employ spacer GIFs Specify page margins Create rollover effects
ADVANCED LAYOUT
217
Employ background graphics
1. 2. 3. 4. 5.
Open Dreamweaver. Create a new site called Advanced Layout. In Dreamweaver, create a new home page and save it in the Advanced Layout folder. Open the home page, index.html. 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.
218
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. The table should look like this:
9.
Using the browser, go to: www.inpics.net/books/dw8/advlayout/pics and save techtool.gif in a folder called images within the Advanced Layout site.
ADVANCED LAYOUT
219
10.
Insert techtool.gif in the left-hand cell.
11.
Go to: www.inpics.net/books/dw8/advlayout/pics 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.
220
ADVANCED LAYOUT
13.
When the Select Image Source window appears, double-click bkgd.
The page should now look like this:
ADVANCED LAYOUT
221
14.
In the right-hand cell, type: The Magazine for People Who Like Gadgets
15. 16. 17. 18. 19. 20.
Format the text as Heading 1. Open west.css from the Vacation site, then save it in the Advanced Layout site as layout.css. In layout.css, change the formatting for the h1 tag so it’s in the Arial font, 14 points, bold, and colored white. Save layout.css. Link the home page to layout.css. Save the page and view it in the browser. It should look like this:
222
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
223
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.
224
Center the text within each cell.
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. 9.
Right-click the page, click CSS Styles, then New. When the New CSS Rule window appears, type: .navbar in the Name box.
Tip: Make sure a period (.) precedes the word navbar.
ADVANCED LAYOUT
225
10.
Click the
button.
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.
226
ADVANCED LAYOUT
13. 14.
View index.html. Click in the first cell of the lower table.
15.
In the Style list, click navbar.
The text should now look like this:
ADVANCED LAYOUT
227
16. 17.
Apply the .navbar style to the text in the other two cells. Save the page and view it in the browser. It should look like this:
228
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: www.inpics.net/books/dw8/advlayout/pics 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
229
3. 4.
Insert spacer.gif in the left-hand cell. In the Properties pane, type: 100 in the W box, and 1 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. 6.
Change the background color of the cell containing spacer.gif to yellow. Change the background color of the right-hand cell to white.
230
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
231
9.
Set the monitor to a higher resolution, or make the browser window wider if you can. The page should look like this:
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.
232
ADVANCED LAYOUT
Specify page margins
1. 2.
View layout.css. 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
233
4. 5.
Save layout.css. View index.html. It should look like this:
234
ADVANCED LAYOUT
6.
Save the page and view it in the browser. It should look like this:
7.
Close the browser.
ADVANCED LAYOUT
235
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. 3.
Right-click the page, click CSS Styles, then New. When the New CSS Rule window appears, click the Advanced radio button.
4.
In the Selector list, click a:hover.
236
ADVANCED LAYOUT
5.
Click the
button.
When the CSS Rule definition window appears, click Bold in the Weight list.
6. 7. 8.
Click the View index.html.
button, then save layout.css.
Highlight the word Laptops, then click the Properties pane.
icon in the
ADVANCED LAYOUT
237
9.
When the Select File window appears, type: laptops.html in the File name box.
10.
Click the
button.
The word Laptops should now be a link.
238
ADVANCED LAYOUT
11.
Save index.html, then view it in the browser. It should look like this:
12.
Place your cursor on the Laptops link. It should turn bold:
ADVANCED LAYOUT
239
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. It should look like this:
240
ADVANCED LAYOUT
17.
Place your cursor over the Laptops link. It should look like this:
ADVANCED LAYOUT
241
242
ADVANCED LAYOUT
Where To Get In Pictures Books
If you liked this book, and would like to buy more like it, visit: www.inpics.net
In Pictures offers more than 20 titles on subjects such as: • Computer Basics • Microsoft Office • Desktop Linux • OpenOffice.org • Web Site Layout • Web Graphics • Web Programming
In Pictures: computer books based on pictures, not text.
www.inpics.net
by Chris Charuhas
www.inpics.net
Dreamweaver 8 In Pictures
Copyright
This book is provided under a Creative Commons license at: creativecommons.org/licenses/by-nc-nd/2.5/ You are free to download, copy, and share this electronic book with others. However, it is illegal to sell this book, or change it in any way. If you’d like to sell or change it, just contact us at [email protected].
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. ISBN 1597061026
Table of Contents
Dreamweaver Basics ...................................... 1
Set up a Web site....................................................................................2 Format text............................................................................................27 Create links to new pages ...................................................................58 Create e-mail and external links .........................................................74 Insert graphics .....................................................................................81 Create a basic navigation system.......................................................96 Change page and link colors ............................................................109
Layout & Navigation ................................... 116
Lay out pages using tables ...............................................................117 Create navigation bars.......................................................................143 Add subsections to site.....................................................................160
Utilities........................................................ 168
Find and Replace................................................................................169 Check spelling....................................................................................174 Change HTML code............................................................................176 Check for broken links.......................................................................180
TABLE OF CONTENTS
i
Interactivity .................................................181
Employ forms..................................................................................... 182 Employ Templates ............................................................................. 198 Upload sites to a Web server............................................................ 208
Advanced Layout.........................................217
Employ background graphics .......................................................... 218 Employ custom styles ....................................................................... 224 Employ spacer GIFs .......................................................................... 229 Specify page margins........................................................................ 233 Create rollover effects ....................................................................... 236
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.
4.
When the alert window appears, check the Don’t show me this message again checkbox, then click the button.
4
DREAMWEAVER BASICS
5.
Close Dreamweaver.
DREAMWEAVER BASICS
5
Create a new site 1.
Open Dreamweaver. It should look like this:
2.
In the Files pane, click Manage Sites in the Files list.
6
DREAMWEAVER BASICS
3.
When the Manage Sites window appears, click the button.
4.
When the menu appears, click Site.
DREAMWEAVER BASICS
7
5.
When the Site Definition window appears, type: Dogs in the first text box, then click the button.
8
DREAMWEAVER BASICS
6.
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
7.
When the next screen appears, leave the Edit local copies on my machine radio button checked.
Then click the
button.
8.
When the next screen appears, click FTP in the How do you connect to your remote server? list.
10
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.
Tip: Not this literal server address, but
the real address of your Web server.
DREAMWEAVER BASICS
11
10.
When the next screen appears, leave the No, do not enable check in and check out radio button checked. Then click the button.
12
DREAMWEAVER BASICS
11.
When the Summary screen appears, click the
button.
DREAMWEAVER BASICS
13
12.
In the Manage Sites window, click the
button.
14
DREAMWEAVER BASICS
Create a home page 1.
On the Menu Bar, click File, then New.
DREAMWEAVER BASICS
15
2.
When the New Document window appears, click HTML in the Basic page column. Then click the button:
16
DREAMWEAVER BASICS
A blank page should open:
3.
In the blank page, type: Dogs Home Page
DREAMWEAVER BASICS
17
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.
18
DREAMWEAVER BASICS
Then type: index.html in the File name box.
DREAMWEAVER BASICS
19
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.
20
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.inpics.net, 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.inpics.net/homepage.html to get it to appear.
DREAMWEAVER BASICS
21
7.
Right-click in blank space on the page. When the menu appears, click Page Properties.
22
DREAMWEAVER BASICS
8.
In the Category list, click Title/Encoding.
DREAMWEAVER BASICS
23
9.
When the Title/Encoding screen appears, type: A Home Page About Dogs in the Title box.
10.
Click the
button.
24
DREAMWEAVER BASICS
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.
11.
On the Menu Bar, click File, then Save.
DREAMWEAVER BASICS
25
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.
26
DREAMWEAVER BASICS
Format text
Create a style sheet 1.
On the Menu Bar, click File, then New.
DREAMWEAVER BASICS
27
2.
When the New Document window appears, click CSS in the Basic page column. Then click the button:
28
DREAMWEAVER BASICS
A blank page should open:
3.
Right-click on the page. When the menu appears, click CSS Styles, then New.
DREAMWEAVER BASICS
29
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.
30
DREAMWEAVER BASICS
6.
Click the
button.
7.
When the CSS Rule definition window appears, click Verdana, Arial, Helvetica, sans serif in the Font list.
DREAMWEAVER BASICS
31
8.
In the Weight list, click bold.
9.
Click the
button.
The page should look like this:
32
DREAMWEAVER BASICS
10.
On the Menu Bar, click File, then Save. When the Save As window appears, type: format.css in the File name box.
DREAMWEAVER BASICS
33
11.
Click the
button.
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 Attach Style Sheet in the Style list.
DREAMWEAVER BASICS
35
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.
36
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
37
The text should now look like this:
3.
Save the page.
38
DREAMWEAVER BASICS
Change text size 1.
At the top of the window, click format.css.
2.
Click h1.
3.
In the Panels list, click CSS.
DREAMWEAVER BASICS
39
4.
In the Properties panel, click the
icon.
40
DREAMWEAVER BASICS
5.
When the CSS Rule definition window appears, click 16 in the Size list. Then click points.
6. 7. 8.
Click the
button.
Save the style sheet. At the top of the window, click index.html. The text should now look like this:
DREAMWEAVER BASICS
41
Change text weight 1. 2.
Click at the end of the text, then press the ENTER key on your keyboard to start a new paragraph. Type: These are my favorite breeds of dog:
3. 4.
Save the page. Click format.css.
42
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
43
6.
Right-click the page. When the menu appears, click CSS Styles, then New.
44
DREAMWEAVER BASICS
DREAMWEAVER BASICS
45
7.
When the New CSS Rule window appears, make sure the Tag radio button is selected. In the Tag list, click p.
8.
Click the
button.
46
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
47
11.
Click index.html. It should look like this:
12.
Highlight the words favorite breeds.
48
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
49
Align text 1. 2.
Click in the sentence to place the cursor there. In the Properties pane, click the button.
The page should look like this:
3.
Click the
button.
50
DREAMWEAVER BASICS
The page should look like this:
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
DREAMWEAVER BASICS
2.
Highlight all three paragraphs, then click the Properties pane.
button in the
DREAMWEAVER BASICS
53
The page should look like this:
3.
Save the page.
54
DREAMWEAVER BASICS
Create lists 1.
With the paragraphs highlighted, click the button.
2.
Click on blank space to un-highlight the paragraphs. The page should look like this:
3.
Save the page.
DREAMWEAVER BASICS
55
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. 7.
Change the numbered list back to a bulleted list. Make the list items bold.
56
DREAMWEAVER BASICS
8.
Save the page. It should look like this:
DREAMWEAVER BASICS
57
Create links to new pages
Step 1: Create a new page 1. 2.
On the Menu Bar, click File, then New. When the New Document window appears, click HTML in the Basic page column. Then click the button.
58
DREAMWEAVER BASICS
3.
Right-click the new page. When the menu appears, click Page Properties.
DREAMWEAVER BASICS
59
4.
Click Title/Encoding in the Category list. Then in the Title box, type: Chesapeake Bay Retrievers
5. 6.
Click the
button.
On the Menu Bar, click File, then Save.
60
DREAMWEAVER BASICS
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 lowercase 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 in the File name box.
DREAMWEAVER BASICS
61
8. 9.
Click the Type:
button.
Chesapeake Bay Retrievers
10.
In the Properties pane, click Attach Style Sheet in the Style list.
62
DREAMWEAVER BASICS
11.
When the Attach External Style Sheet window appears, click the button.
12. 13.
Save chesapeake.html. Click format.css.
DREAMWEAVER BASICS
63
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. When the menu appears, click CSS Styles, then New.
64
DREAMWEAVER BASICS
16.
When the New CSS Rule window appears, make sure the Tag radio button is selected. In the Tag list, click h2.
17.
Click the
button.
DREAMWEAVER BASICS
65
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.
19. 20.
Click the
button, then save format.css.
Click chesapeake.html.
66
DREAMWEAVER BASICS
21.
With the cursor on the first line, click Heading 2 in the Format list.
The page should look like this:
22.
Save the page.
DREAMWEAVER BASICS
67
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.
68
DREAMWEAVER BASICS
Step 2: Link to the new page 1. 2.
Click index.html. Highlight the words Chesapeake Bay Retriever.
3.
On the Toolbar, click the
icon.
DREAMWEAVER BASICS
69
4.
When the Hyperlink window appears, click the
icon.
5.
When the Select File window appears, click chesapeake.
6.
Click the
buttons.
70
DREAMWEAVER BASICS
7.
Click the page. The words Chesapeake Bay Retriever should now be a link:
8. 9.
Save the page. 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:
DREAMWEAVER BASICS
71
11.
Click the Chesapeake Bay Retriever link. It should take you to chesapeake.html:
12. 13.
Close the browser. Create new pages for German Shepherds and Yorkshire Terriers. Page German Shepherd Yorkshire Terrier Title German Shepherds Yorkshire Terriers File Name german.html 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. 15.
Verify that both new pages are linked to the format.css style sheet. On the home page, link the words German Shepherd and Yorkshire Terrier to their pages.
72
DREAMWEAVER BASICS
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. Save all pages. Click the home page’s links to make sure they work. Close Dreamweaver.
18. 19. 20.
DREAMWEAVER BASICS
73
Create e-mail and external links
Create an e-mail link 1. 2.
Open Dreamweaver. 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].
74
DREAMWEAVER BASICS
4.
Highlight [email protected].
5.
On the Toolbar, click the
icon.
6.
When the Email Link window appears, click the button.
DREAMWEAVER BASICS
75
7.
Click on the page. The address should now be a link:
8.
Save the page.
76
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
77
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.
78
DREAMWEAVER BASICS
5.
Click the page. The address should now be a link:
6. 7.
Save the page. On the page’s Toolbar, click the icon.
When the menu appears, click Preview in the browser of your choice.
DREAMWEAVER BASICS
79
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.)
80
DREAMWEAVER BASICS
Insert graphics
Capture a graphic from the Web 1.
Using the browser, go to: www.inpics.net/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. 4. 5.
When the menu appears, click Save Picture As. When the Save Picture window appears, click the Dogs folder in the Save in drop-down list. Create a new folder called images within the Dogs folder.
DREAMWEAVER BASICS
81
6.
Double-click the images folder so it appears in the Save in dropdown list.
7.
Click the
button.
This should save the graphic inside the images folder.
82
DREAMWEAVER BASICS
Insert a graphic 1. 2.
Open chesapeake.html, then place the cursor below the heading. On the Toolbar, click the icon.
Tip: If you see an image selection menu, click Image.
DREAMWEAVER BASICS
83
3.
When the Select Image Source window appears, double-click the images folder.
84
DREAMWEAVER BASICS
4.
Click the chessie graphic, then click the
button.
Tip: If the Accessibility Attributes window opens, click the
button.
DREAMWEAVER BASICS
85
The page should look like this:
86
DREAMWEAVER BASICS
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.
In Dreamweaver, right-click the graphic again, then click Edit Tag <img>.
90
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
3.
Assign Horizontal space of 12, and Vertical space of 4:
4.
Change Border to 1.
92
DREAMWEAVER BASICS
5.
Click the
button, then save the page.
It should look like this:
6.
Click the
icon.
The page should look like this:
Horizontal spacing of 12 creates a horizontal space of 12 pixels around the graphic that nothing can occupy
A Border of 1 creates a 1pixel border around the graphic
DREAMWEAVER BASICS
93
7.
Go to: www.inpics.net/books/dw8/dogpics
8. 9. 10. 11. 12.
Save the German Shepherds graphic in the images folder, with the file name shepherds.gif. Save the Yorkshire Terrier graphic in the images folder, with the file name yorkie.gif. Insert shepherds.gif into the German Shepherds page below the heading. Insert yorkie.gif into the Yorkshire Terriers page below the heading. 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. 15.
On both pages, align the text to the side of the graphic, as on the Chesapeake Bay Retrievers page. In both pages, give the graphics a Border of 1, Vertical spacing of 4, and Horizontal spacing of 12.
94
DREAMWEAVER BASICS
16. 17.
Save both pages. Close Dreamweaver.
DREAMWEAVER BASICS
95
Create a basic navigation system
Link back to the home page 1. 2. 3.
Open Dreamweaver, then open all pages in the Dogs site. View chesapeake.html. Beneath the paragraph, type: Home
96
DREAMWEAVER BASICS
4.
Highlight the word Home, then click the
icon.
DREAMWEAVER BASICS
97
5.
When the Hyperlink window appears, click the
icon.
When the Select File window appears, click index, then click the button.
6.
Click the
button.
98
DREAMWEAVER BASICS
7.
Click the page to de-select the text. It should look like this:
8.
Save chesapeake.html, then view it in the browser. The word Home should now be a link:
DREAMWEAVER BASICS
99
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.
100
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
101
Link pages to each other 1. 2.
View chesapeake.html. Following the Home link, type: | Chesapeake Bay Retriever | German Shepherd | Yorkshire Terrier
102
DREAMWEAVER BASICS
3.
Make the words Chesapeake Bay Retriever bold:
4.
Link the words German Shepherd to german.html:
DREAMWEAVER BASICS
103
5.
Link the words Yorkshire Terrier to yorkshire.html:
Tip: If the link doesn’t work quite right, click the Properties pane.
icon in the
6.
Save the page and view it in the browser. It should look like this:
104
DREAMWEAVER BASICS
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.
DREAMWEAVER BASICS
105
Use graphics as links 1. 2.
View index.html. 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.
106
DREAMWEAVER BASICS
4.
When the Select File window appears, click chesapeake, then the button.
5. 6.
Save the home page, then preview it in the browser. Click the Chesapeake Bay Retriever graphic. It should take you to the Chesapeake Bay Retriever page.
7. 8.
View german.html. Following the Home link, type: | Chesapeake Bay Retriever | German Shepherd | Yorkshire Terrier
DREAMWEAVER BASICS
107
9. 10. 11. 12. 13. 14. 15. 16.
Make the words German Shepherd bold. Link the words Chesapeake Bay Retriever and Yorkshire Terrier to their corresponding pages. Save the page. Using the same system, create navigation links for the Yorkshire Terriers page. Then save the page. On the home page, link the German Shepherd graphic to the German Shepherds page. Link the Yorkshire Terrier graphic to the Yorkshire Terriers page. Save the page. View the site in the browser. It should look like the site at: www.inpics.net/books/dw8/dogs
108
DREAMWEAVER BASICS
Change page and link colors
Change background color of pages 1. 2. 3.
View format.css. In format.css, press ENTER to place the cursor on line 17. 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
109
5.
Click the
button.
6.
When the CSS Rule definition window appears, click Background in the Category list.
110
DREAMWEAVER BASICS
7.
Click the
icon.
Then in the Background Color grid, click Yellow.
8. 9.
Click the Save format.css.
button.
DREAMWEAVER BASICS
111
10.
View the site’s pages. The background color of each page should now be yellow.
112
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:
4.
Click the
button.
DREAMWEAVER BASICS
113
5.
When the CSS Rule definition window appears, click the icon. Then in the Color grid, click Red.
6. 7.
Click the
button, then save format.css.
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.
114
DREAMWEAVER BASICS
DREAMWEAVER BASICS
115
Layout & Navigation
In this section, you’ll learn how to:
• • •
Lay out pages using tables Create navigation bars Add subsections to site
116
LAYOUT & NAVIGATION
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
LAYOUT & NAVIGATION
117
Create a table 1. 2.
Open Dreamweaver. 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.
118
LAYOUT & NAVIGATION
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. Then click the button.
LAYOUT & NAVIGATION
119
6.
When the next screen appears, leave the Edit local copies on my machine radio button checked. Then click the button.
7. 8.
When the next screen appears, click FTP 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: 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. Then click the button. button. button.
10. 11. 12.
When the Summary screen appears, click the In the Manage Sites window, click the On the Menu Bar, click File, then New.
120
LAYOUT & NAVIGATION
13.
When the New Document window appears, click HTML in the Basic page column. Then click the button.
A blank page should open.
14. 15.
On the Menu Bar, click File, then Save. When the Save As window appears, make sure the Travel folder appears in the Save in box.
LAYOUT & NAVIGATION
121
Then type: index.html in the File name box.
16. 17.
Click the
button.
Title index.html, the home page, Traveling Down South.
122
LAYOUT & NAVIGATION
18.
On the Toolbar, click the
icon.
19.
When the Table window appears, type: 1 in the Rows box. Type: 2 in the Columns box.
LAYOUT & NAVIGATION
123
20.
Specify a Table width of 100 percent.
21.
Click the
button.
The table on the page should look like this:
22.
Click in the first cell, and type: links
124
LAYOUT & NAVIGATION
23.
Click in the second cell and type: content
24.
Click the page to de-select the table. The page should look like this:
25.
Save the page.
LAYOUT & NAVIGATION
125
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:
126
LAYOUT & NAVIGATION
4.
Click in the first cell. In the Properties pane, click the Bg icon.
5.
When the color grid appears, click light gray (CCCCCC).
6.
Click on the page. The table should look like this:
You’ll notice that the word links is right up against the edge of the left-hand cell.
LAYOUT & NAVIGATION
127
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: 0 in the CellSpace box.
128
LAYOUT & NAVIGATION
9.
Click on the page. It should look like this:
10.
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.
Cell Spacing is the space between cells. In this case, 0 pixels
LAYOUT & NAVIGATION
129
Create a table-based home page 1.
Using the browser, go to: www.inpics.net/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
130
LAYOUT & NAVIGATION
4.
Format the heading as Heading 1.
5. 6.
Insert the graphic beneath the heading. 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.
LAYOUT & NAVIGATION
131
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:
132
LAYOUT & NAVIGATION
8.
Save the page and view it in the browser. It should look like this:
9.
In Dreamweaver, click in the first cell. In the Properties pane, click Top in the Vert list.
LAYOUT & NAVIGATION
133
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.
134
LAYOUT & NAVIGATION
12.
Click the page. The page should look like this:
LAYOUT & NAVIGATION
135
13.
Save the page and view it in the browser. It should now look like this:
136
LAYOUT & NAVIGATION
Create new table-based pages 1. 2. 3. 4.
On the Menu Bar, click File, then New. When the New Document window appears, click the button. Save the new blank page as richmond.html. Click index.html. On the Menu Bar, click Edit, then Select All.
LAYOUT & NAVIGATION
137
5. 6.
Click Edit, then Copy. Click richmond.html.
7.
Click Edit, then Paste.
138
LAYOUT & NAVIGATION
Tip: If an Image Description window
opens, click the
button.
8. 9.
Title the new page Richmond, VA. Using the browser, go to: www.inpics.net/books/dw8/travelpic/richpic
10. 11.
Capture the Richmond, Virginia graphic there (capitol.jpg) and save it in the images folder. Replace the Traveling South heading with one that reads: Richmond, Virginia
12. 13.
Format the heading as Heading 2. Replace the home page graphic with the Richmond graphic, capitol.
LAYOUT & NAVIGATION
139
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:
140
LAYOUT & NAVIGATION
16.
Save richmond.html and view it in the browser. The page should look like this:
17.
Create pages for Williamsburg and Charleston just like the Richmond page. Get the graphic and text for the Williamsburg page at: www.inpics.net/books/dw8/travelpic/willpic Get the Charleston page’s graphic and text at: www.inpics.net/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.
LAYOUT & NAVIGATION
141
Tip: Don’t forget to transform the link that shows “You Are Here”
into bold, plain text.
19. 20.
Insert the text and graphics in their appropriate pages. 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.inpics.net/books/dw8/travel
142
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. 4.
Create a home page (index.html) and title it Traveling West On Vacation. On the Toolbar, click the icon.
LAYOUT & NAVIGATION
143
5.
When the Table window appears, type: 1 in the Rows box. Type: 3 in the Columns box.
144
LAYOUT & NAVIGATION
6.
Specify: Table width: 100 percent Border thickness: 0 pixels Cell padding: 4 Cell spacing: 0
7. 8.
Click the Click the page.
button.
It should look like this:
LAYOUT & NAVIGATION
145
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. In the Properties pane, type: 33% in the W box.
146
LAYOUT & NAVIGATION
14.
Click the Bg
icon.
When the color grid appears, click light gray (CCCCCC).
15. 16.
Make the center cell 34% wide, and give it the same background color. Make the last cell 33% wide, and give it the same background color. The table should look like this:
LAYOUT & NAVIGATION
147
17.
On the Menu Bar, click File, then Open.
18.
Open format.css from the Dogs Web site.
148
LAYOUT & NAVIGATION
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; }
LAYOUT & NAVIGATION
149
21. 22.
Save west.css. 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. It should look like this:
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.
150
LAYOUT & NAVIGATION
26.
Using the Properties pane, format the navigation bar text in the Paragraph style.
LAYOUT & NAVIGATION
151
27.
Save the page and view it in the browser. It should look like this:
28.
Close the browser.
152
LAYOUT & NAVIGATION
Create navigation bar for a main section page 1.
Create a new page. Save it as california.html.
2. 3.
Title it Vacationing in California. View index.html, then highlight the table.
4. 5.
On the Menu Bar, click Edit, then Copy. View california.html. Then click Edit, then Paste.
LAYOUT & NAVIGATION
153
6.
Right-click in the last cell of the table. When the menu appears, click Table, then Insert Column.
A new cell should appear:
154
LAYOUT & NAVIGATION
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:
LAYOUT & NAVIGATION
155
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
156
LAYOUT & NAVIGATION
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:
15. 16.
View index.html and link the word California to california.html. Save index.html.
LAYOUT & NAVIGATION
157
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. 20.
Copy the navigation table at the top of california.html and paste it into rockies.html. Change the “You are here” yellow background color from the California cell to The Rockies cell. Color the California cell light gray.
21. 22.
Link the words California, The Midwest and Home to their respective pages. When you’re done, preview the page in the browser. It should look like this:
158
LAYOUT & NAVIGATION
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. 25.
View index.html, and in the navigation bar, link the words The Rockies and The Midwest to their respective pages. 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. 27.
Link both new pages to the style sheet west.css. Save the pages, then preview the site in the browser. It should look like the site at: www.inpics.net/books/dw8/vacation
LAYOUT & NAVIGATION
159
Add subsections to site
Insert a table for content and subsection links 1. 2.
View california.html. 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:
160
LAYOUT & NAVIGATION
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.
LAYOUT & NAVIGATION
161
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:
162
LAYOUT & NAVIGATION
Create subsection pages 1.
Create new blank pages for subsections The Golden Gate Bridge, Highway 101 and Big Sur: Page Title Seeing the Golden Gate Bridge Driving Highway 101 Staying in Big Sur File Name goldengate.html highway101.html bigsur.html
2. 3.
Copy the tables from california.html and paste them into goldengate.html. 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. 6.
Link the page to the style sheet west.css. 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.
LAYOUT & NAVIGATION
163
7.
Format the h3 style as Verdana, Arial, Helvetica, sans serif, 12 points.
8. 9.
Save west.css. 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.”
164
LAYOUT & NAVIGATION
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.
12. 13. 14.
View california.html. Link the words The Golden Gate Bridge, Highway 101 and Big Sur to their respective pages. Save california.html.
LAYOUT & NAVIGATION
165
15. 16. 17. 18. 19. 20.
Open goldengate.html and copy both tables. Paste these tables into highway101.html. Link highway101.html to the style sheet west.css. On highway101.html, link the words The Golden Gate Bridge to goldengate.html. Change the text Highway 101 from a link to plain text. 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.
166
LAYOUT & NAVIGATION
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.inpics.net/books/dw8/vacation2
LAYOUT & NAVIGATION
167
Utilities
In this section, you’ll learn how to:
• • • •
Find and replace Check spelling Change HTML code Check for broken links
168
UTILITIES
Find and Replace
1. 2.
Open Dreamweaver. In the Files pane, click Travel in the list of sites.
3. 4.
Double-click index.html to open the home page. On the Menu Bar, click Edit, then Find and Replace.
UTILITIES
169
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
170
UTILITIES
7.
In the Find in list, click Entire Current Local Site.
8.
Click the
button. If an alert window appears, click the button. The Results pane should appear:
9.
Click its T icon to close it.
UTILITIES
171
172
UTILITIES
The page should look like this:
10.
View each page of the Travel site. Richmond should be replaced with River City.
UTILITIES
173
Check spelling
1. 2.
View williamsburg.html. On the Menu Bar, click Text, then Check Spelling.
3.
The Check Spelling window will appear:
174
UTILITIES
4. 5.
When you’re finished checking the spelling of the site, click the button. On the Menu Bar, click File, then Close All.
UTILITIES
175
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. 2. 3.
Open the Vacation Web site. View the home page, index.html. Click the icon at the top of the window:
176
UTILITIES
The page should now look like this:
4.
In the <table> tag, change its width=”100%” attribute to: width=”50%”
UTILITIES
177
5.
Save the page, then click the The page should look like this:
icon.
6.
Click the
icon, then change the table width back to 100%:
178
UTILITIES
7.
Save the page, then click the The page should look like this:
icon.
UTILITIES
179
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.
180
UTILITIES
Interactivity
In this section, you’ll learn how to:
• • •
Employ forms Employ templates Upload sites to a Web server
INTERACTIVITY
181
Employ forms
Create a form 1. 2. 3. 4. 5.
Open Dreamweaver, then open the Vacation site. Create a new page, and save it with the file name infoform.html. Title the page Request for Information. Link it to the west.css style sheet. 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.
182
INTERACTIVITY
7.
On the Menu Bar, click Insert, then Form, then Form.
The page should look like this:
8.
On the Toolbar, click the
icon.
INTERACTIVITY
183
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.
10.
Click the
button.
The page should look like this:
184
INTERACTIVITY
11.
In the top three left-hand cells, type: Name: Address: Email:
12.
Save the page and view it in the browser. It should look like this:
INTERACTIVITY
185
13. 14.
Close the browser. Click in the top right-hand cell to place the cursor there.
15.
On the Menu Bar, click Insert, Form, then Text Field.
186
INTERACTIVITY
16.
When the Input Tag Accessibility Attributes window appears, click the button.
A textbox should appear in the cell:
INTERACTIVITY
187
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. In the Properties pane, type: name in the TextField box.
19.
Click the second textbox, then in the Properties pane, type: address in the TextField box.
188
INTERACTIVITY
20.
Use the same process to assign the name email to the third textbox in the form.
21. 22.
Save the page. 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
189
24.
Click the new button.
25.
In the Properties pane, type: Send me information In the Value box.
190
INTERACTIVITY
26.
Click the page. It should look like this:
27.
Save the page and view it in the browser. It should look like this:
INTERACTIVITY
191
28. 29.
Align the text in the left-hand cells to the right. Make the left-hand cell in the first row 5% wide, and the righthand 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.
192
INTERACTIVITY
31.
Save the page and view it in the browser. It should look like this:
32. 33.
Close the browser. View index.html. Add a new paragraph linked to infoform.html: Get more information about Western Travel mailed to you.
INTERACTIVITY
193
34. 35.
Save the page and view it in the browser. Click the linked sentence. It should bring up the page with the form.
36.
Close the browser.
194
INTERACTIVITY
Make the form work 1. 2. 3.
View infoform.html. Click the icon.
In the <form> tag, highlight its name: <form id=”form1” name=”form1” method=”post” action=””>
4.
Type: infoform It should look like this: <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/cgibin/formmail.pl”>
INTERACTIVITY
195
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. 8. 9. 10.
Create a new page in the Vacation site with the file name favoritesform.html. Title it My Favorite Places. Insert a form, then insert a table with four rows and two cells in each row. Fill the cells with the text and form objects seen below:
List/Menu
Radio buttons
196
INTERACTIVITY
11.
Put these values in the List/Menu: California The Rockies The Midwest Tip: Click the the Properties pane.
button in
12.
When finished, save the page and preview it in the browser. It should look like this:
INTERACTIVITY
197
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. 2.
In the Vacation site, open california.html. On the Menu Bar, click File, then Save as Template.
198
INTERACTIVITY
3.
When the Save As Template window appears, type: Main Section in the Save As textbox.
4. 5.
Click the
button. button.
When the alert window appears, click the
INTERACTIVITY
199
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.
200
INTERACTIVITY
8.
Highlight the entire top table—the one that comprises the navigation bar.
9.
On the Toolbar, click the
icon.
10.
When the menu appears, click Editable Region.
INTERACTIVITY
201
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:
202
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
203
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:
204
INTERACTIVITY
Create a new page from a template 1. 2.
On the Menu Bar, click File, then New. When the New Document window appears, click the Templates tab.
3.
Click Site “Vacation”.
4.
Click Main Section.
INTERACTIVITY
205
5. 6.
Click the
button.
Enter information in the template so it looks like this:
7. 8.
On the Menu Bar, click File, then Save. When the Save As window appears, type: california2.html in the File name textbox.
9. 10. 11. 12.
Click the
button.
Open goldengate.html. Save it as a template with file name California Subsection.dwt. 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. Name the editable region Subsections.
13.
206
INTERACTIVITY
Tip: Don’t make the navigation bar an editable region in the
template.
14. 15. 16. 17.
Make the right-hand cell in the lower table an Editable Region. Name it Page Content. Save the template again. Use the template to create another Big Sur page with file name bigsur2.html.
INTERACTIVITY
207
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.
208
INTERACTIVITY
2.
In the Manage Sites window, click the
button.
3. 4. 5. 6.
When the Site Definition window appears, click the button. In the next screen, click the In the next screen, click the button. button.
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.inpics.net, washington.patriot.net, or 207.176.7.217.
INTERACTIVITY
209
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.
210
INTERACTIVITY
The screen should look like this:
9.
Click the
button.
If the FTP connection to your Web server works, this window will appear:
10.
Click the
button.
INTERACTIVITY
211
11. 12. 13. 14.
Click the Click the Click the Click the
button. button. button. button.
212
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
213
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:
214
INTERACTIVITY
All the site’s pages will appear in the Files pane:
6. 7.
Click the
icon to disconnect from the server.
Close the Vacation site, then close Dreamweaver.
INTERACTIVITY
215
216
INTERACTIVITY
Advanced Layout
In this section, you’ll learn how to:
• • • • •
Employ background graphics Employ custom styles Employ spacer GIFs Specify page margins Create rollover effects
ADVANCED LAYOUT
217
Employ background graphics
1. 2. 3. 4. 5.
Open Dreamweaver. Create a new site called Advanced Layout. In Dreamweaver, create a new home page and save it in the Advanced Layout folder. Open the home page, index.html. 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.
218
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. The table should look like this:
9.
Using the browser, go to: www.inpics.net/books/dw8/advlayout/pics and save techtool.gif in a folder called images within the Advanced Layout site.
ADVANCED LAYOUT
219
10.
Insert techtool.gif in the left-hand cell.
11.
Go to: www.inpics.net/books/dw8/advlayout/pics 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.
220
ADVANCED LAYOUT
13.
When the Select Image Source window appears, double-click bkgd.
The page should now look like this:
ADVANCED LAYOUT
221
14.
In the right-hand cell, type: The Magazine for People Who Like Gadgets
15. 16. 17. 18. 19. 20.
Format the text as Heading 1. Open west.css from the Vacation site, then save it in the Advanced Layout site as layout.css. In layout.css, change the formatting for the h1 tag so it’s in the Arial font, 14 points, bold, and colored white. Save layout.css. Link the home page to layout.css. Save the page and view it in the browser. It should look like this:
222
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
223
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.
224
Center the text within each cell.
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. 9.
Right-click the page, click CSS Styles, then New. When the New CSS Rule window appears, type: .navbar in the Name box.
Tip: Make sure a period (.) precedes the word navbar.
ADVANCED LAYOUT
225
10.
Click the
button.
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.
226
ADVANCED LAYOUT
13. 14.
View index.html. Click in the first cell of the lower table.
15.
In the Style list, click navbar.
The text should now look like this:
ADVANCED LAYOUT
227
16. 17.
Apply the .navbar style to the text in the other two cells. Save the page and view it in the browser. It should look like this:
228
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: www.inpics.net/books/dw8/advlayout/pics 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
229
3. 4.
Insert spacer.gif in the left-hand cell. In the Properties pane, type: 100 in the W box, and 1 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. 6.
Change the background color of the cell containing spacer.gif to yellow. Change the background color of the right-hand cell to white.
230
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
231
9.
Set the monitor to a higher resolution, or make the browser window wider if you can. The page should look like this:
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.
232
ADVANCED LAYOUT
Specify page margins
1. 2.
View layout.css. 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
233
4. 5.
Save layout.css. View index.html. It should look like this:
234
ADVANCED LAYOUT
6.
Save the page and view it in the browser. It should look like this:
7.
Close the browser.
ADVANCED LAYOUT
235
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. 3.
Right-click the page, click CSS Styles, then New. When the New CSS Rule window appears, click the Advanced radio button.
4.
In the Selector list, click a:hover.
236
ADVANCED LAYOUT
5.
Click the
button.
When the CSS Rule definition window appears, click Bold in the Weight list.
6. 7. 8.
Click the View index.html.
button, then save layout.css.
Highlight the word Laptops, then click the Properties pane.
icon in the
ADVANCED LAYOUT
237
9.
When the Select File window appears, type: laptops.html in the File name box.
10.
Click the
button.
The word Laptops should now be a link.
238
ADVANCED LAYOUT
11.
Save index.html, then view it in the browser. It should look like this:
12.
Place your cursor on the Laptops link. It should turn bold:
ADVANCED LAYOUT
239
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. It should look like this:
240
ADVANCED LAYOUT
17.
Place your cursor over the Laptops link. It should look like this:
ADVANCED LAYOUT
241
242
ADVANCED LAYOUT
Where To Get In Pictures Books
If you liked this book, and would like to buy more like it, visit: www.inpics.net
In Pictures offers more than 20 titles on subjects such as: • Computer Basics • Microsoft Office • Desktop Linux • OpenOffice.org • Web Site Layout • Web Graphics • Web Programming
In Pictures: computer books based on pictures, not text.
www.inpics.net
