dreamweaver 8 in pictures.2005

7/29/2019 Dreamweaver 8 in Pictures.2005

1/247

Dreamweaver 8In Pictures

by Chris Charuhas

www.inpics.net


2/247

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 youd 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 bookare 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 theaccuracy, quality, reliability, or freedom from error of this document or the productsdescribed in it. Visibooks makes no representation or warranty with respect to thisbooks contents, and specifically disclaims any implied warranties or fitness for anyparticular purpose. Visibooks disclaims all liability for any direct, indirect,consequential, incidental, exemplary, or special damages resulting from the use of theinformation in this document or from the use of any products described in it. Mention ofany product does not constitute an endorsement of that product by Visibooks. Dataused in examples are intended to be fictional. Any resemblance to real companies,people, or organizations is entirely coincidental.

ISBN 1597061026


3/247

TABLE OF CONTENTS

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


4/247

TABLE OF CONTENTSii

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


5/247

DREAMWEAVER BASICS 1

Dreamweaver Basics

In this section, youll 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


6/247

DREAMWEAVER BASICS2

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 willappear:


7/247


2. Leave the Designerradio button checked, then click thebutton.

Dreamweaver will open and look like this:


8/247

DREAMWEAVER BASICS4

3. When the Start Page appears, click the Dont show againcheckbox.

4. When the alert window appears, check the Dont show me thismessage again checkbox, then click the button.


9/247


5. Close Dreamweaver.


10/247

DREAMWEAVER BASICS6

Create a new site

1. Open Dreamweaver.

It should look like this:

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


11/247


3. When the Manage Sites window appears, click thebutton.

4. When the menu appears, click Site.


12/247

DREAMWEAVER BASICS8

5. When the Site Definition window appears, type:

Dogs

in the first text box, then click the button.


13/247


6. When the second screen appears, check the No, I do not wantto use a server technology radio button.

Then click the button.


14/247

DREAMWEAVER BASICS10

7. When the next screen appears, leave the Edit local copies onmy machineradio button checked.


8. When the next screen appears, click FTP in the How do youconnect to your remote server? list.


15/247


9. In the What is the hostname or FTP address of your Webserver? box, type:

www.yourserver.com

then click the button.

Tip:Not this literal server address, butthe real address of your Web server.


16/247


10. When the next screen appears, leave the No, do not enablecheck in and check out radio button checked.



17/247


11. When the Summary screen appears, click the button.


18/247


12. In the Manage Sites window, click the button.


19/247


Create a home page

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


20/247


2. When the New Document window appears, click HTML in theBasic page column.

Then click the button:


21/247


A blank page should open:

3. In the blank page, type:Dogs Home Page


22/247


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

5. When the Save As window appears, make sure the Dogs folderappears in the Save in box.


23/247


Then type:

index.html

in the File name box.


24/247


6. Click the button.

index.html should now appear in the Files pane.

Tip:Make sureLocal view is selected.

This is the home page of the DogsWeb site.


25/247


Home page file names

The home page of any Web site has the file name index.html.

Thats 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 appearsautomatically. Thats because its file name is index.html.

If the file name of the Visibooks home page was homepage.html,youd have to type www.inpics.net/homepage.html to get it toappear.


26/247


7. Right-click in blank space on the page.

When the menu appears, click Page Properties.


27/247


8. In the Categorylist, click Title/Encoding.


28/247


9. When the Title/Encoding screen appears, type:

A Home Page About Dogs

in theTitle box.



29/247


11. On the Menu Bar, clickFile, then Save.

Page titles

The title of a Web page describes the page. Its what appears in abrowsers History list.

The title also shows up as a link when a page comes up in a searchengine. If all your pages have different, descriptive titles, theyll beeasier for people to find.

The page title shows up in the top, or title, bar of the browser usedto view it. The title of this page is Dogs.


30/247


The page should look like this:

You have created a home page titledAHome Page About Dogs.

The home pages file name isindex.html.

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


31/247


Format text

Create a style sheet



32/247


2. When the New Document window appears, click CSS in theBasic page column.

Then click the button:


33/247


A blank page should open:

3. Right-click on the page.

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


34/247


4. When the New CSS Rule window appears, click the Tag radiobutton in the Selector Typelist:

5. In the Tag list, click h1.


35/247



7. When the CSS Rule definition window appears, click Verdana,Arial, Helvetica, sans serifin the Font list.


36/247


8. In the Weight list, click bold.




37/247



When the Save As window appears, type:

format.css



38/247



The style sheet should look like this:


39/247


Integrate a style sheet

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

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


40/247


3. When the Attach External Style Sheet window appears, clickthe button.

4. When the Select Style Sheet File window appears, make sureDogs is in the Look in box.

Then click format.

5. Click the buttons.


41/247


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.


42/247


The text should now look like this:

3. Save the page.


43/247


Change text size

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

2. Click h1.

3. In the Panels list, click CSS.


44/247


4. In the Properties panel, click the icon.


45/247


5. When the CSS Rule definition window appears, click 16 in theSize list.

Then click points.


7. Save the style sheet.

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



46/247


Change text weight

1. Click at the end of the text, then press the ENTERkey on yourkeyboard to start a new paragraph.

2. Type:

These are my favorite breeds of dog:

3. Save the page.

4. Click format.css.


47/247


5. In format.css, put the cursor on line 6.

Then press the ENTERkey on yourkeyboard.

The cursor should be on line7.


48/247


6. Right-click the page.



49/247



50/247


7. When the New CSS Rule window appears, make sure the Tagradio button is selected.

In the Taglist, click p.



51/247


9. When the CSS Rule definition window appears, click Arial,Helvetica, sans serifin the Font list.

Then click 10 points in the Size list.

10. Click the button, then save format.css.


52/247


11. Click index.html.


12. Highlight the words favorite breeds.


53/247


13. In the Properties pane, click the button.

14. Click on the page to un-highlight the words.


15. Save the page.


54/247


Align text

1. Click in the sentence to place the cursor there.

2. In the Properties pane, click the button.




55/247





5. Save the page.


56/247


Indent text

1. Type three new paragraphs:

Chesapeake Bay Retriever

German Shepherd

Yorkshire Terrier


57/247


2. Highlight all three paragraphs, then click the button in theProperties pane.


58/247



3. Save the page.


59/247


Create lists

1. With the paragraphs highlighted, click the button.

2. Click on blank space to un-highlight the paragraphs.


3. Save the page.


60/247


4. Change the title of the home page, index.html, to My FavoriteDogs.

Tip:You can use theTitle box in the window:

5. Change the bulleted list to a numbered list.

Tip:Use the button.

6. Change the numbered list back to a bulleted list.

7. Make the list items bold.


61/247


8. Save the page.



62/247


Create links to new pages

Step 1: Create a new page





63/247


3. Right-click the new page.

When the menu appears, click Page Properties.


64/247


4. Click Title/Encoding in the Category list.

Then in the Title box, type:

Chesapeake Bay Retrievers




65/247


7. When the Save As window appears, type:

chesapeake.html


File names for the Web

Most Web servers are Unix- or Linux-based, which dont deal cleanlywith spaces in file names. For instance if you name a file fidopage.html, it may show up in the URL box of the browser as

fido%20page.html.

Also, Web servers are case-sensitive, so keeping file names lower-case eliminates a potential source of mistakes.

Make all file names in a Web sitepages, graphics and folderslower-case, with no spaces.

Correct file name:chesapeake.html

Incorrect:Chesapeake Bay.html


66/247



9. Type:

Chesapeake Bay Retrievers

10. In the Properties pane, click Attach Style Sheet in the Stylelist.


67/247


11. When the Attach External Style Sheet window appears, clickthe button.

12. Savechesapeake.html

.

13. Click format.css.


68/247


14. In format.css, place the cursor on line 11, then press theENTERkey on your keyboard.

The cursor should go to line 12.

15. Right-click the page.When the menu appears, click CSS Styles, then New.


69/247


16. When the New CSS Rule window appears, make sure the Tagradio button is selected.

In the Taglist, click h2.



70/247


18. When the CSS Rule definition window appears, click Verdana,Arial, Helvetica, sans serifin the Font list.

Then click 14 points in theSize list.


20. Click chesapeake.html.


71/247


21. With the cursor on the first line, click Heading 2 in the Formatlist.


22. Save the page.


72/247


Providing navigation clues with text size

The heading of the Chesapeake Bay Retriever page is one sizesmaller than the heading of the home page. Thats because the CBRpage is one step down in the site hierarchy.

Dogs Home PageSize 1 headingFont size: 16pt

Chesapeake Bay RetrieversSize 2 headingFont size: 14pt

Making the heading of the Chesapeake Bay Retrievers page smallerthan the home pages heading helps show people where they are inthe site.

Dogs

ChesapeakeBay

Retrievers


73/247


Step 2: Link to the new page


2. Highlight the words Chesapeake Bay Retriever.

3. On the Toolbar, click the icon.


74/247


4. When the Hyperlinkwindow appears, click the icon.

5. When the Select File window appears, click chesapeake.

6. Click the buttons.


75/247


7. Click the page.

The words Chesapeake Bay Retrievershould now be a link:

8. Save the page.

9. On the pages Toolbar, click the icon.

10. When the menu appears, click Previewinthe browser of yourchoice.

A browser should open with the home page inside:


76/247


11. Click the Chesapeake Bay Retriever link.

It should take you to chesapeake.html:

12. Close the browser.

13. Create new pages for German Shepherds and YorkshireTerriers.

Page Title File NameGerman Shepherd German Shepherds german.html

Yorkshire Terrier Yorkshire Terriers yorkshire.html

Tip:Openchesapeake.html, thenSave Aswith the file name

german.html. Then change its title andtext.

Do the same thing to createyorkshire.html.

14. Verify that both new pages are linked to the format.css stylesheet.

15. On the home page, link the words German Shepherd andYorkshire Terrierto their pages.


77/247


16. On the home page, remove the words

Home Page

after

Dogs

17. Make sure the headings of the German Shepherd and YorkshireTerrier pages are the same size as the heading of theChesapeake Bay Retriever page.

18. Save all pages.

19. Click the home pages links to make sure they work.



78/247


Create e-mail and external links

Create an e-mail link


2. In the Filespane, double-click all the files to open them.

3. In index.html, beneath the bulleted list, type:For more information, contact [email protected].


79/247


4. Highlight [email protected].


6. When the Email Link window appears, click the

button.


80/247


7. Click on the page.

The address should now be a link:

8. Save the page.


81/247


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.


82/247


3. When the Hyperlinkwindow appears, make sure thathttp://www.dogs.com appears in the Linkbox.

4. In the Target box, type:

_new



83/247


5. Click the page.

The address should now be a link:

6. Save the page.

7. On the pages Toolbar, click the icon.

When the menu appears, clickPreviewinthe browser of yourchoice.


84/247


8. When the page comes up in the browser, click thewww.dogs.com link.

It should open a new window with an external Web site.(Probably PetSmart, a site linked to the dogs.com address.)


85/247


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 BayRetriever, then click with your right mouse button.

3. When the menu appears, click Save Picture As.

4. When the Save Picturewindow appears, click the Dogsfolderin the Save in drop-down list.

5. Create a new folder called imageswithin the Dogs folder.

Rightmousebutton


86/247


6. Double-click the images folder so it appears in the Save in drop-down list.


This should save the graphic inside the images folder.


87/247


Insert a graphic

1. Open chesapeake.html, then place the cursor below theheading.


Tip:If you see an image selection menu, clickImage.


88/247


3. When the Select Image Source window appears, double-clicktheimages folder.


89/247


4. Click the chessiegraphic, then click the button.

Tip:If theAccessibility Attributes window opens, click the

button.


90/247




91/247


Align a graphic

1. Place the cursor in a new paragraph below the graphic, thentype:

Chesapeake Bay Retrievers love water. If you throw tennisballs in the water, these dogs will chase them and bringthem back until your arm falls off.


92/247


2. Right-click the graphic.

When the menu appears, click Align, thenLeft.

The page should now look like this:


93/247


3. Save the page, then preview the page in the browser.




94/247


Format a graphic

1. In Dreamweaver, right-click the graphic again, then click EditTag .


95/247


2. When the Tag Editorwindow 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 graphicrepresents. Alt text also allows search engines to index visualcontent.


96/247


3. Assign Horizontal space of 12, and Vertical space of 4:

4. Change Borderto 1.


97/247


5. Click the button, then save the page.


6. Click the icon.


Horizontal spacing of 12creates a horizontal

space of 12 pixels aroundthe graphic that nothing

can occupy

A Border of 1 creates a 1-pixel border around the

graphic


98/247


7. Go to:

www.inpics.net/books/dw8/dogpics

8. Save the German Shepherds graphic in the images folder, withthe file name shepherds.gif.

9. Save the Yorkshire Terrier graphic in the images folder, with thefile name yorkie.gif.

10. Insert shepherds.gifinto the German Shepherds page belowthe heading.

11. Insert yorkie.gifinto the Yorkshire Terriers page below theheading.

12. On the German Shepherds page, insert the text:

German Shepherds are smart dogs.

as a paragraph below the graphic.

13. On the Yorkshire Terriers page, insert the text:

Yorkshire Terriers are cute.

as a paragraph below the graphic.

14. On both pages, align the text to the side of the graphic, as on theChesapeake Bay Retrievers page.

15. In both pages, give the graphics a Borderof 1, Vertical spacingof 4, and Horizontal spacing of 12.


99/247


16. Save both pages.



100/247


Create a basic navigation system

Link back to the home page

1. Open Dreamweaver, then open all pages in the Dogs site.

2. View chesapeake.html.

3. Beneath the paragraph, type:

Home


101/247


4. Highlight the word Home, then click the icon.


102/247


5. When the Hyperlink window appears, click the icon.

When the Select File window appears, click index, then click the

button.



103/247


7. Click the page to de-select the text.


8. Save chesapeake.html, then view it in the browser.

The word Home should now be a link:


104/247


9. Click the Home link.

The home page should appear in the browser:

10. Click the Chesapeake Bay Retrieverlink.

The Chesapeake Bay Retriever page should appear in thebrowser.

11. In Dreamweaver, view german.html.


105/247


12. Create a link back to the home page just like in the ChesapeakeBay Retriever page:

13. On yorkshire.html, create a link back to the home page in thesame way.


106/247


Link pages to each other

1. View chesapeake.html.

2. Following the Home link, type:

| Chesapeake Bay Retriever | German Shepherd | YorkshireTerrier


107/247


3. Make the words Chesapeake Bay Retrieverbold:

4. Link the words German Shepherd to german.html:


108/247


5. Link the words Yorkshire Terrierto yorkshire.html:

Tip:If the link doesnt work quite right, click the icon in theProperties pane.

6. Save the page and view it in the browser.



109/247


Showing you are here

A sites navigational system should show people two things: wherethey are, and where they can go.

To show people where they are, make the link corresponding to thecurrent page into plain text. This lets users know that if they cant goto 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.


110/247


Use graphics as links

1. View index.html.

2. Below the bulleted list of links, insert the Chesapeake BayRetriever, German Shepherd and Yorkshire Terrier graphics:

3. Click the Chesapeake Bay Retriever graphic to select it, then

click the icon in the Properties pane.


111/247


4. When the Select File window appears, click chesapeake, thenthe button.

5. Save the home page, then preview it in the browser.

6. Click the Chesapeake Bay Retriever graphic.

It should take you to the Chesapeake Bay Retriever page.

7. View german.html.

8. Following the Home link, type:

| Chesapeake Bay Retriever | German Shepherd | YorkshireTerrier


112/247


9. Make the words German Shepherd bold.

10. Link the words Chesapeake Bay RetrieverandYorkshireTerrierto their corresponding pages.

11. Save the page.

12. Using the same system, create navigation links for the YorkshireTerriers page. Then save the page.

13. On the home page, link the German Shepherd graphic to theGerman Shepherds page.

14. Link the Yorkshire Terrier graphic to the Yorkshire Terriers page.

15. Save the page.

16. View the site in the browser.

It should look like the site at:

www.inpics.net/books/dw8/dogs


113/247


Change page and link colors

Change background color of pages

1. View format.css.

2. In format.css, press ENTER to place the cursor on line17.



4. When the New CSS Style window appears, make sure the Tagradio button is selected, then click body in the Tag list:


114/247



6. When the CSS Rule definition window appears, clickBackground in the Category list.


115/247


7. Click the icon.

Then in the Background Color grid, clickYellow.


9. Save format.css.


116/247


10. View the sites pages.

The background color of each page should now be yellow.


117/247


Change link colors

1. View format.css.

Press the ENTER key on your keyboard to place the cursor on

line 21.



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



118/247


5. When the CSS Rule definition window appears, click theicon.

Then in the Colorgrid, click Red.


7. View the sites 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 outthe link color for each page or section of a site.


119/247



120/247

LAYOUT & NAVIGATION116

Layout & Navigation


Lay out pages using tables

Create navigation bars

Add subsections to site


121/247

LAYOUT & NAVIGATION 117

Lay out pages using tables

Tables and Web page layout

Almost all professional-quality Web sites are laid out using tables. Atable 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


122/247


Create a table


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

3. When the Manage Sites window appears, click thebutton.

When the menu appears, click Site.


123/247


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 wantto use a server technologyradio button.Then click the button.


124/247


6. When the next screen appears, leave the Edit local copies onmy machineradio button checked.Then click the button.

7. When the next screen appears, click FTP in the How do youconnect to your remote server? list.

8. In the What is the hostname or FTP address of your Webserver? box, type:

www.yourserver.com

then click the button.

Tip:Not this literal server address, but the real address of yourWeb server.

9. When the next screen appears, leave the No, do not enablecheck in and check out radio button checked.


10. When the Summary screen appears, click the button.




125/247




A blank page should open.


15. When the Save As window appears, make sure the Travelfolder appears in the Save in box.


126/247


Then type:

index.html



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


127/247



19. When the Table window appears, type:

1

in the Rows box.

Type:

2

in the Columnsbox.


128/247


20. Specify a Table width of 100 percent.


The table on the page should look like this:

22. Click in the first cell, and type:

links


129/247


23. Click in the second cell and type:

content

24. Click the page to de-select the table.


25. Save the page.


130/247


Format a table

1. Click the table border.

2. In the Propertiespane, set the Borderto0:

3. Click the page.

The table should look like this:


131/247


4. Click in the first cell.

In the Propertiespane, click the Bg icon.

5. When the color grid appears, click light gray (CCCCCC).



Youll notice that the word links is rightup against the edge of the left-hand cell


132/247


7. Add a 16-pixel margin between the edge of the cells and theircontents:

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.


133/247






Cell Padding creates acushion of pixels betweenthe edge of the cell and

whats inside it.

Cell Spacing isthe space

between cells. Inthis case, 0

pixels


134/247


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 foldercalled imageswithin the Travelfolder.

3. In the right-hand cell on the home page, replace the word contentwith the heading:

Traveling South


135/247


4. Format the heading as Heading 1.

5. Insert the graphic beneath the heading.

6. Under the graphic, add the following paragraph:

If you've got a couple of weeks for vacation, you might want to visit

the South. Richmond, Williamsburg, and Charleston are all

beautiful cities.


136/247


7. In the left-hand cell, replace the word links with the names of thissites main sections:

RichmondWilliamsburg

Charleston



137/247




9. In Dreamweaver, click in the first cell.

In the Properties pane, click Top in the Vert list.


138/247


10. Type:

20%

in the W box.

11. Click the second cell, then click Topin theVert list.Type:

80%

in the W box.


139/247


12. Click the page.



140/247



It should now look like this:


141/247


Create new table-based pages


2. When the New Document window appears, click thebutton.

3. Save the new blank page as richmond.html.


On the Menu Bar, click Edit, then Select All.


142/247


5. Click Edit, then Copy.

6. Click richmond.html.

7. Click Edit, then Paste.


143/247


Tip:If anImage Descriptionwindow

opens, click the button.

8. Title the new page Richmond, VA.


www.inpics.net/books/dw8/travelpic/richpic

10. Capture the Richmond, Virginia graphic there (capitol.jpg) andsave it in the images folder.

11. Replace the Traveling South heading with one that reads:

Richmond, Virginia

12. Format the heading as Heading 2.

13. Replace the home page graphic with the Richmond graphic,capitol.


144/247


14. Beneath the graphic, insert a new paragraph:

Richmond is the capital of Virginia.

15. Add the word Homebelow Charleston in the left-hand cell:


145/247


16. Save richmond.html and view it in the browser.


17. Create pages for Williamsburg and Charleston just like theRichmondpage.

Get the graphic and text for the Williamsburg page at:

www.inpics.net/books/dw8/travelpic/willpic

Get the Charleston pages graphic and text at:

www.inpics.net/books/dw8/travelpic/charlpic

18. Using the words Richmond, Williamsburg, Charleston, and Homein the left-hand cell of each page, link all the pages in this Website to each other.


146/247


Tip: Dont forget to transform the link that shows You Are Here

into bold, plain text.

19. Insert the text and graphics in their appropriate pages.

20. Align all graphics to the left.

Give them V Space of 4 pixels and H Space of 12 pixels.

Give each graphic appropriate Alternate text.

21. When youre done, preview the site in the browser.

It should look and work like the one at:

www.inpics.net/books/dw8/travel


147/247


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 Vacationwithin theMy Documents folder.

Do this the same way you created the Travel site.

3. Create a home page (index.html) and title it Traveling West OnVacation.



148/247


5. When the Table window appears, type:

1

in the Rows box.

Type:

3

in the Columnsbox.


149/247


6. Specify:

Table width: 100 percent

Border thickness: 0 pixels

Cell padding: 4

Cell spacing: 0


8. Click the page.



150/247


9. In the tables first cell, type:

California

10. In the second cell, type:

The Rockies11. In the third cell, type:

The Midwest

12. Center the contents of each cell:

Tip:Use the button in thePropertiespane.

13. Click in the first cell.

In the Propertiespane, type:33%

in the W box.


151/247


14. Click the Bg icon.

When the color grid appears, click light gray (CCCCCC).

15. Make the center cell 34% wide, and give it the same backgroundcolor.

16. Make the last cell 33% wide, and give it the same backgroundcolor.



152/247


17. On the Menu Bar, click File, then Open.

18. Open format.css from the Dogs Web site.


153/247


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; }


154/247


21. Save west.css.

22. View the home page, index.html, in the Vacation Web site, andlink it to the west.css style sheet.

Tip:Use theStyle list in theProperties pane.23. Below the table, type:

Traveling West

24. Format the text as Heading 1.


25. Below the heading, add a new paragraph:

When you go West, be sure to visit the sights of California, the

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


155/247


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


156/247






157/247


Create navigation bar for a main section page

1. Create a new page.

Save it as california.html.

2. Title it Vacationing in California.

3. View index.html, then highlight the table.

4. On the Menu Bar, click Edit, then Copy.

5. View california.html.

Then click Edit, then Paste.


158/247


6. Right-click in the last cell of the table.

When the menu appears, click Table, then Insert Column.

A new cell should appear:


159/247


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 mustadd up to 100%. That means 25% per cell.

9. Cut the text The Midwest from the last cell and paste it in thethird cell.

Center it within the cell:


160/247


10. Click in the first cell, then change its background color to Yellow.

Tip:Changing the color of the

California cell on the California pageshows You are here.

11. In the last cell, type:

Home


161/247


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 thewords within the cells.

14. Save california.html and view it in the browser.


15. View index.html and link the word California to california.html.

16. Save index.html.


162/247


17. Create a new blank page and save it with the file namemidwest.html.

It will be The Midwest page, but leave it blank for right now.

18. Create a new page with file name rockies.html.

This is The Rockies page.

Title it Nature in the Rocky Mountains.

19. Copy the navigation table at the top of california.html and pasteit into rockies.html.

20. Change the You are here yellow background color from theCalifornia cell to The Rockies cell.

Color the California cell light gray.

21. Link the words California, The Midwest and Home to theirrespective pages.

22. When youre done, preview the page in the browser.



163/247


23. Repeat this process with the California and Midwest pages sotheyve got functioning navigation bars that show you are here.

Tip:To change a word from a link to plain text, just place yourcursor in the link, then delete the page from theLink box in theProperties pane.

24. View index.html, and in the navigation bar, link the words The

Rockies and The Midwest to their respective pages.

25. Make all you are here text that corresponds to the current pagebold.

(Example: make the words The Rockies bold on The Rockiespage.)

26. Link both newpages to the style sheet west.css.

27. Save the pages, then preview the site in the browser.

It should look like the site at:

www.inpics.net/books/dw8/vacation


164/247


Add subsections to site

Insert a table for content and subsection links


2. Below the navigation bar table, add another table with one rowand two columns.

Give it these attributes:

Table width = 100 percent

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



165/247


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 Californiasection:

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.


166/247


7. Change the Vertalignment of both cells to Top.




167/247


Create subsection pages

1. Create new blank pages for subsections The Golden GateBridge, Highway 101 and Big Sur:

Page Title File NameSeeing the Golden Gate Bridge goldengate.html

Driving Highway 101 highway101.html

Staying in Big Sur bigsur.html

2. Copy the tables from california.html and paste them intogoldengate.html.

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

Tip:Highlight the word, then click the icon.

4. Change the heading to read:

Seeing the Golden Gate Bridge

Then format the heading as Heading 3.

5. Link the page to the style sheet west.css.

6. View west.css.

Click the blank line beneath the existing tags, then press theENTER key on your keyboard to place the cursor on line 25.


168/247


7. Format the h3 style as Verdana, Arial, Helvetica, sans serif, 12points.

8. Save west.css.

9. View goldengate.html.

Below the heading, change the paragraph to read:

The Golden Gate Bridge isn't golden--it's actually orange.

10. Link the words California, Highway 101, and Big Surto their

respective pages.

Leave The Golden Gate Bridge as plain text to show you arehere.


169/247


11. Save goldengate.html, then view it in the browser.



13. Link the words The Golden Gate Bridge, Highway 101 andBigSurto their respective pages.

14. Save california.html.

Consistent page layout

Copying tables from one page and pasting them into new pagesensures that all pages share the same layout.

This consistency makes site navigation easier: no matter which pagein the site is being viewed, a person knows where the pages linksand content will be.


170/247


15. Open goldengate.html and copy both tables.

16. Paste these tables into highway101.html.

17. Link highway101.html to the style sheet west.css.

18. On highway101.html, link the words The Golden Gate Bridgeto goldengate.html.

19. Change the text Highway 101 from a link to plain text.

20. Change the Highway 101 pages heading and descriptive textbeneath it so it looks like this:

21. Make the layout and navigation of bigsur.html consistent withthe 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.


171/247


Tip: Dont forget to link the page towest.css.

22. Save all pages and view the site in the browser.

It should look and work like:

www.inpics.net/books/dw8/vacation2


172/247

UTILITIES168

Utilities


Find and replace

Check spelling

Change HTML code

Check for broken links


173/247

UTILITIES 169

Find and Replace


2. In the Files pane, clickTravel in the list of sites.

3. Double-click index.html to open the home page.

4. On the Menu Bar, click Edit, then Find and Replace.


174/247

UTILITIES170

Tip: IfReplacedoesnt appear in the menu, click the doubledown arrows.

5. When the Find and Replace window appears, type:

Richmond

in the Findbox.

6. In the Replacebox, type:

River City


175/247

UTILITIES 171

7. In the Find in list, click Entire Current Local Site.


If an alert window appears, click thebutton.

The Results pane should appear:

9. Click itsT icon to close it.


176/247

UTILITIES172


177/247

UTILITIES 173


10. View each page of the Travel site.

Richmond should be replaced with River City.


178/247

UTILITIES174

Check spelling

1. View williamsburg.html.

2. On the Menu Bar, click Text, then Check Spelling.

3. The Check Spelling window will appear:


179/247

UTILITIES 175

4. When youre finished checking the spelling of the site, click thebutton.

5. On the Menu Bar, click File, then Close All.


180/247

UTILITIES176

Change HTML code

1. Open the VacationWeb site.2. View the home page, index.html.

3. Click the icon at the top of the window:

Changing HTML

HTML stands for Hypertext Markup Language, a set of instructionsthat tells the browser how to display pages and text. For instance,surrounding a block of text in

, or paragraph, tags makes the text

a paragraph.

In the Webs early days, people used to have to write HTML to createWeb pages, but now programs like Dreamweaver write HTML foryou. However, sometimes you may want to bypass Dreamweaverspoint-and-click interface to work directly with the HTML code it

generates.


181/247

UTILITIES 177


4. In thetag, change itswidth=100% attribute to:

width=50%


182/247

UTILITIES178

5. Save the page, then click the icon.


6. Click the icon, then change the table width back to 100%:


183/247

UTILITIES 179

7. Save the page, then click the icon.



184/247

UTILITIES180

Check for broken links

1. On the Menu Bar, click Site, then Check Links Sitewide.

The Resultspane should appear:

If its blank, there are no broken links.

2. Click theT icon to close the Results pane.


185/247

INTERACTIVITY 181

Interactivity


Employ forms

Employ templates

Upload sites to a Web server


186/247

INTERACTIVITY182

Employ forms

Create a form

1. Open Dreamweaver, then open the Vacationsite.2. Create a new page, and save it with the file name

infoform.html.

3. Title the page Request for Information.

4. Link it to the west.css style sheet.

5. On the page, type:

Fill out the following form to get more information abouttraveling West:

6. Press the ENTER key on your keyboard to place the cursor in anew paragraph.


187/247

INTERACTIVITY 183

7. On the Menu Bar, clickInsert, then Form, then Form.




188/247

INTERACTIVITY184

9. When the Table window appears, give the table:

4 Rows, 2 Columns,set the Table widthto50 percent,give it Cell padding of 4,and a Borderthickness of 1.




189/247

INTERACTIVITY 185

11. In the top three left-hand cells, type:

Name:Address:Email:




190/247

INTERACTIVITY186


14. Click in the top right-hand cell to place the cursor there.

15. On the Menu Bar, click Insert, Form, then Text Field.


191/247

INTERACTIVITY 187

16. When the Input Tag Accessibility Attributes window appears,click the button.

A textbox should appear in the cell:


192/247

INTERACTIVITY188

17. Use the same process to insert textbox input fields in the tablecells next to Addressand Emailas 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 TextFieldbox.


193/247

INTERACTIVITY 189

20. Use the same process to assign the name

email

to the third textbox in the form.

21. Save the page.

22. Click in the last rows right-hand cell.

On the Menu Bar, click Insert, Form, then Button.

23. When the Input Tag Accessibility Attributes window appears,click the button.


194/247

INTERACTIVITY190

24. Click the new button.

25. In the Properties pane, type:

Send me information

In theValuebox.


195/247

INTERACTIVITY 191

26. Click the page.





196/247

INTERACTIVITY192

28. Align the text in the left-hand cells to the right.

29. Make the left-hand cell in the first row 5% wide, and the right-hand cell in the first row 45% wide.

Tip:By specifying the width of cells in the first row, the cells inthe rows beneath will assume the same widths.

30. Click the table border.

In the Properties pane, change the tables Borderto 0.


197/247

INTERACTIVITY 193




33. View index.html.

Add a new paragraph linked to infoform.html:

Get more information about Western Travel mailed to you.


198/247

INTERACTIVITY194


35. Click the linked sentence.

It should bring up the page with the form.



199/247

INTERACTIVITY 195

Make the form work

1. View infoform.html.

2. Click the icon.

3. In thetag, highlight its name:

4. Type:

infoform


5. In the action attribute, add an action for the form:


200/247

INTERACTIVITY196

6. Save the page.

7. Create a new page in the Vacation site with the file namefavoritesform.html.

8. Title it My Favorite Places.

9. Insert a form, then insert a table with four rows and two cells ineach row.

10. Fill the cells with the text and form objects seen below:

List/Menu

Radiobuttons

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 actionyou should assign.

The action above tells the form to post its data to a program calledformmail.pl at yourdomain.com.

The formmail.pl program might take the form data visitors submit

and e-mail it to you.


201/247

INTERACTIVITY 197

11. Put these values in the List/Menu:

CaliforniaThe RockiesThe Midwest

Tip:Click the button inthePropertiespane.

12. When finished, save the page and preview it in the browser.



202/247

INTERACTIVITY198

Employ Templates

Create a template

1. In the Vacation site, open california.html.

2. On the Menu Bar, click File, then Save as Template.

Dreamweaver templates

Creating a page from a template is like copying the layout from apage and pasting it into a new one. Unlike cutting and pasting,templates can be set so that some features cant be changed.

This helps keep things consistent when different people are workingon the same site. Also, after a site is finished, the pages created froma template can be changed just by changing the template itself.

Dreamweaver templates enable better control of layout and content,

and streamline site management.


203/247

INTERACTIVITY 199

3. When the Save As Template window appears, type:

Main Section

in the Save As textbox.


5. When the alert window appears, click the button.


204/247

INTERACTIVITY200

The page is now saved as Main Section.dwt in the Templatesfolder.

6. Change the navigation bar, subsection text, heading, andparagraph so the page is a generic main section page:

7. Save the template.

When the alert window appears, click the Dont warn me again

checkbox, then the button.


205/247

INTERACTIVITY 201

8. Highlight the entire top tablethe one that comprises thenavigation bar.


10. When the menu appears, click Editable Region.


206/247

INTERACTIVITY202

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:


207/247

INTERACTIVITY 203

Tip:Place the cursor directly over thecell 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 youre done, it should look like this:


208/247

INTERACTIVITY204

15. Select the right-hand cell in the lower table, and make it a NewEditable Region calledtext.

16. Save the template.

When youre done, it should look like this:


209/247

INTERACTIVITY 205

Create a new page from a template


2. When the New Document window appears, click the Templatestab.

3. Click Site Vacation.

4. Click Main Section.


210/247

INTERACTIVITY206


6. Enter information in the template so it looks like this:


8. When the Save As window appears, type:

california2.html

in the File name textbox.


10. Open goldengate.html.

11. Save it as a template with file name California Subsection.dwt.

12. Make the left-hand cell in the lower table (the one containing TheGolden Gate Bridge, Highway 101 and Big Sur) a New EditableRegion.

13. Name the editable region Subsections.


211/247

INTERACTIVITY 207

Tip:Dont make the navigation bar an editable region in thetemplate.

14. Make the right-hand cell in the lower table an Editable Region.

15. Name it Page Content.

16. Save the template again.

17. Use the template to create another Big Sur page with file namebigsur2.html.


212/247

INTERACTIVITY208

Upload sites to a Web server

Set up an FTP connection

1. In the Files pane, click Manage Sites in the Site list.

FTP

FTP stands for File Transfer Protocol, a way to transfer filesbetween computers over the Internet.


213/247

INTERACTIVITY 209


3. When the Site Definition window appears, click thebutton.

4. In the next screen, click the button.

5. In the next screen, click the button.

6. In the next screen, make sure that FTP is selected in the Howdo you connect to your remote server?list.

In the What is the hostname or FTP address of your Webserver? 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.


214/247

INTERACTIVITY210

Tip:Contact your Web serveradministrator to find out the Host Nameor FTP Address of your Web server.

7. In the What folder on the server do you want to store yourfiles in? box, type the name of the folder that will contain yourWeb 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 canalso supply your FTP Login usernameand Password.


215/247

INTERACTIVITY 211

The screen should look like this:


If the FTP connection to your Web server works, this window willappear:



216/247

INTERACTIVITY212






217/247

INTERACTIVITY 213

Send pages to the Web server

1. In the Files pane, click Local View in the Views list.

2. Click the icon.

3. After youre connected, click Remote View in the Views list.

4. Your site folder will appear in the pane.


218/247

INTERACTIVITY214

5. Click the arrow.

When the alert window appears, click the button.

A Status window will appear that shows the site files uploadingto the server:


219/247

INTERACTIVITY 215

All the sites pages will appear in the Files pane:

6. Click the icon to disconnect from the server.

7. Close the Vacation site, then close Dreamweaver.


220/247

INTERACTIVITY216


221/247

ADVANCED LAYOUT 217

Advanced Layout


Employ background graphics

Employ custom styles

Employ spacer GIFs

Specify page margins

Create rollover effects


222/247

ADVANCED LAYOUT218

Employ background graphics


2. Create a new site called Advanced Layout.

3. In Dreamweaver, create a new home page and save it in theAdvanced Layout folder.

4. Open the home page, index.html.

5. Insert a one-row, two-column table on the page with theseattributes:

Table width: 100 percentBorder thickness: 0 pixelsCell padding: 18Cell spacing: 0

6. Title the pageAdvanced Layout and save it.


223/247

ADVANCED LAYOUT 219

7. Color both cells in the table dark blue.

Tip:In theBg color grid, click the square with the code#000099.

8. Make the first cell 10% wide, and the second cell 90% wide.



www.inpics.net/books/dw8/advlayout/pics

and save techtool.gifin a folder called images within theAdvanced Layout site.


224/247

ADVANCED LAYOUT220

10. Insert techtool.gifin the left-hand cell.

11. Go to:


and save bkgd.gifin the images folder.

12. Click in the right-hand cell.

In the Properties pane, click the icon beside the Bg box.


225/247

ADVANCED LAYOUT 221

13. When the Select Image Source window appears, double-clickbkgd.



226/247

ADVANCED LAYOUT222

14. In the right-hand cell, type:

The Magazine for People Who Like Gadgets

15. Format the text asHeading 1.16. Open west.css from the Vacation site, then save it in the

Advanced Layout site as layout.css.

17. In layout.css, change the formatting for the h1 tag so its in theArial font, 14 points, bold, and colored white.

18. Save layout.css.

19. Link the home page to layout.css.




227/247

ADVANCED LAYOUT 223

Tip:Notice the line towards the bottomof the right cell wherebkgd.gifbeginsrepeating. It repeats becausebackground graphics tile to fill all

available space in a cell.

The cell is 136 pixels tall: 100 pixels fortechtool.gif, plus 36 for cell padding(18 pixels at the top and bottom of

techtool.gif). bkgd.gifis only 123pixels tall; therefore, theres 13 pixels ofspace left to fill.

To fix this, use an image editing

program like Photoshop, Fireworks orPaint Shop pro to make the backgroundimage 136 pixels tall.


228/247

ADVANCED LAYOUT224

Employ custom styles

1. Below the first table, insert a one-row, three-column table with awidth of 100% and cell padding of 4.

Make both its border and cell spacing 0.

2. Make the cells equal width and color them black.

3. In the first cell, type:Laptops

4. In the second cell:

Cell Phones

5. In the third:

PDAs

6. Center the text within each cell.


229/247

ADVANCED LAYOUT 225

7. View layout.css, then click the blank line beneath the existingtags to place your cursor there.

Press the ENTER key so the cursor rests on line 31.

8. Right-click the page, click CSS Styles, then New.

9. When the New CSS Rule window appears, type:

.navbar

in theName box.

Tip:Make sure a period (.) precedes the wordnavbar.


230/247

ADVANCED LAYOUT226


When the CSS Rule definition window appears, click Arial,Helvetica, sans serifin 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.


231/247

ADVANCED LAYOUT 227

13. View index.html.

14. Click in the first cell of the lower table.

15. In the Style list, click navbar.



232/247

ADVANCED LAYOUT228

16. Apply the .navbarstyle to the text in the other two cells.




233/247

ADVANCED LAYOUT 229

Employ spacer GIFs

1. In the browser, go to:


and save spacer.gifin the images folder.

2. In index.html, below the two tables, insert a third table just like

the top table.

Why use spacer GIFs?

GIF graphics can be used as spacers to stretch table cells to anexact width. If theyre transparent, they remain invisible regardless ofthe cells background color.

A spacer GIF is used in the exercise below. It keeps the width of theleft-hand cell constant, regardless of the size or resolution of thescreen used to view it.


234/247

ADVANCED LAYOUT230

3. Insert spacer.gifin the left-hand cell.

4. In the Propertiespane, type:100

in the Wbox, and1in the H box.

Tip: Most spacer GIFs are 1x1 pixel,which load very quickly online. This onestarted out as 50x50 to make it easier tosee and save.

5. Change the background color of the cell containing spacer.giftoyellow.

6. Change the background color of the right-hand cell to white.


235/247

ADVANCED LAYOUT 231

7. Enter paragraphs in the right-hand cell so the page looks like thiswhen viewed in the browser:

Tip:You can format the text like aboveby highlighting it, then clicking theFontandSizedrop-down lists in thePropertiespane.

Its not as sound as using a style sheetfor formatting, but as a quick-and-dirtymethod, this will work.

8. Save the page.


236/247

ADVANCED LAYOUT232

9. Set the monitor to a higher resolution, or make the browserwindow wider if you can.


Notice how the left-hand cells in the top and bottom tables staythe same width, regardless of the width of the window used toview them.


237/247

ADVANCED LAYOUT 233

Specify page margins

1. View layout.css.

2. In formatting for thetag, add the attributesmargin-top:0margin-right:0margin-bottom:0margin-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}


238/247

ADVANCED LAYOUT234

4. Save layout.css.

5. View index.html.



239/247

ADVANCED LAYOUT 235





240/247

ADVANCED LAYOUT236

Create rollover effects

1. View layout.css, then click the blank line beneath the existingtags to place your cursor there.

Press the ENTERkey to place the cursor on the next line.

2. Right-click the page, click CSS Styles, then New.

3. When the New CSS Rule window appears, click the Advancedradio button.

4. In the Selectorlist, click a:hover.


241/247

ADVANCED LAYOUT 237


When the CSS Rule definition window appears, click Boldinthe Weight list.

6. Click the button, then save layout.css.

7. View index.html.

8. Highlight the word Laptops, then click the icon in thePropertiespane.


242/247

ADVANCED LAYOUT238

9. When the Select File window appears, type:

laptops.html



The word Laptops should now be a link.


243/247

ADVANCED LAYOUT 239

11. Save index.html, then view it in the browser.


12. Place your cursor on the Laptops link.

It should turn bold:


244/247

ADVANCED LAYOUT240

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.



245/247

ADVANCED LAYOUT 241

17. Place your cursor over the Laptops link.



246/247

ADVANCED LAYOUT242


247/247

Where To Get In Pictures Books

If you liked this book, and would like to buy more like it, visit:

www.inpics.net