TUTORIAL

Introduction to Dreamweaver 8: Tutorial 3

Tutorial 3 explores the following features of Adobe

Macromedia Dreamweaver 8:
G G G G G

Flash Text Flash Buttons Using forms Code validation Publishing to the Web

The next section introduces one of the interesting aspects of Dreamweaverthe ability to create Flash Text and Flash Buttons in the Dreamweaver application without using Flash itself.

T-65

T-66

Tutorial 3

Introduction to Dreamweaver 8

T3.1

Using Flash Effects in Dreamweaver

According to Adobe Macromedia, over 96 percent of Web browsers have the Flash plug-in installed. This large base of users probably includes the target audience for your site. Dreamweaver allows you to point-and-click your way to selected Flash Text effects and Flash Buttons. The Flash Text effects and Flash Buttons are saved as .swf files in your site. The Flash Text and Flash Buttons in Dreamweaver provide an easy means to add interactivity to your Web pages, but there are limitations. You can only create the text effects currently offered by Dreamweaver, such as mouseovers and links; an experienced Flash designer using Adobe Macromedia Flash is needed to create special and/or original Flash effects.

Create Flash Text

You will be surprised at how easy it is to add Flash Text to your Web page. You will create a new version of the MooseWood Cabins home page that uses Flash Text and Flash Buttons. Launch Dreamweaver, open the moosewood site, and display the newindex.htm page in the document window. Save the newindex.htm page as flashindex.htm. You will replace the cabin.gif and reservation.gif navigation links with Flash Text. Highlight the cabin.gif image and delete it. The cursor is positioned in the navigation area exactly where you want to add the Flash Text. One method to add Flash Text to a page is to use the Insert Bar Media tab. Flash Text and Flash Buttons can also be added from the menu bar. Use the menu bar and select InsertMediaFlash Text, as shown in Figure T3.1.

Figure T3.1 Using the menu bar to add Flash Text

The Insert Flash Text dialog box, as shown in Figure T3.2 will display.

T3.1

Using Flash Effects in Dreamweaver

T-67

Figure T3.2 The Insert Flash Text dialog box

Configure your display to be similar to the one shown in Figure T3.2. Choose Tahoma (or another sans-serif font), a medium brown color such as #be9e69 (text color), and a dark brown rollover color such as #996600. Set the Bg color to the same color as the page (#e8e9cf is used here). Type Cabins in the Text text box, cabins.htm in the Link text box, and cabinstext.swf in the Save as text box. Click OK. Next, Dreamweaver will display the Flash Accessibility Attributes dialog box. Set the title to Cabins. Click OK. The Flash area on your page will look similar to that shown in Figure T3.3.

www

Figure T3.3 The Cabins Flash Text button

Using this as a guide, replace the home1.gif and reservations.gif images with Flash Text. You may need to add an extra blank space between the Flash Text files. Position your cursor where you want the blank space and select InsertHTMLSpecial CharactersNon-breaking Space from the menu bar. You may want to center the paragraph that contains the Flash Text media. Use the property inspector. Test your page in a browser ('). A sample page is shown in Figure T3.4.

T-68

Tutorial 3

Introduction to Dreamweaver 8

Figure T3.4 The flashindex.htm page with the Flash Text in action

Hover your mouse over Reservations to see the text color change. The cursor should also change to the hand symbol, indicating a hyperlink. If you click, the hyperlink should work and display the reservations.htm page. Even though the Flash Player works with a limited number of assistive technologies such as screen readers, it is a good idea to include plain text links across the bottom of a Web page that uses Flash for its main navigation.

Create Flash Buttons

You will also be surprised at how easy it is to add Flash Buttons to your Web page. Next you will create another version of the home page called buttonindex.htm that will use Flash Buttons for the navigation. Display the flashindex.htm page in the document window and save with the buttonindex.htm file name. You will replace each Flash Text object with a Flash Button. Select the Cabins Flash Text and delete it. Use the menu bar and select InsertMediaFlash Button to display the Insert Flash Button dialog box, as shown in Figure T3.5.

T3.1

Using Flash Effects in Dreamweaver

T-69

Figure T3.5 The Insert Flash Button dialog box

Configure your display similar to the one shown in Figure T3.5. Your installation of Dreamweaver may have different button styles. Feel free to choose a button style other than Beveled Rect-Bronze. Type Cabins in the Button text box. Leave the Font and Size default values. Type cabins.htm in the Link text box and cabinsbutton.swf in the Save as text box. Click OK. The Flash Button area on your page will look similar to the one shown in Figure T3.6.

Figure T3.6 The Cabins Flash Button

Replace the other Flash Text objects with Flash Buttons. Save buttonindex.htm. Test your page in a browser ('). A sample page is shown in Figure T3.7.

T-70

Tutorial 3

Introduction to Dreamweaver 8

Figure T3.7 The Flash Button on index.htm

FAQ
How can I get more Flash Button styles? If your computer is connected to the Internet, click the Get More Styles button in the Insert Flash Button dialog box. The Adobe Macromedia Exchange Web page will display. You can select and download a variety of Dreamweaver extensions, including Flash Buttons. Have fun exploring!

T3.2

Using a Form in Dreamweaver

Forms are used for many purposes on the Webfor example, placing an order, creating a guestbook entry, sending a page or a news story to a friend, and joining a mailing list. It is important to remember that there are two components to using a form:
G G

The Web page user interface The server-side processing, called CGI (Common Gateway Interface), which works with the form data and sends e-mail, writes to a text file, updates a database, or performs some other type of processing on the server.

T3.2

Using a Form in Dreamweaver

T-71

In this section of the tutorial you will add a form to the reservations.htm page on the moosewood site. Launch Dreamweaver, open the moosewood site, and open the reservations.htm page in the document window. When you complete this section of the tutorial, your reservations.htm page will look similar to the page shown in Figure T3.8.

Figure T3.8 The revised reservations.htm page with a form

Add a Form to the Reservations Page

There are several ways to add a form and its objects (elements) to a Web page using Dreamweaver. One method is to select InsertForm from the menu bar to place a form on the page. Then select InsertForm to select the individual form elements. Another method is to use the insert bar. Select Forms and click the Form button to insert a form. Position the cursor on the Web page document and click the Text Field button (as shown in Figure T3.9) to insert a text box.

T-72

Tutorial 3

Introduction to Dreamweaver 8

Figure T3.9 Using the insert bar to add a Text Field (text box)

The Reservations page will contain a simple form that consists of a Name box, an E-mail box, and a Submit button. See Figure T3.8 for an example. Lets use Dreamweaver to create the form! First, adjust the content so that the text describing the phone number and e-mail address is placed in the second column under the image. Cut and paste the text now. Remember to set the regularContent or mainContent style as needed. You may want to center-align that table cell. Then, place your cursor on a blank line where you want the form to display (see Figure T3.8 as a guide). Select InsertFormForm from the menu bar. Your page should look similar to the sample shown in Figure T3.10. The dotted line indicates the form.

Figure T3.10 The dotted line indicates the form

Next, add the text and form objects to the form.

G G

Type Reservation Information: and press s+e. Insert a text box by selecting InsertFormText Field from the menu bar.

Dreamweaver displays the Input Tag Accessibility Attributes dialog box, as shown in Figure T3.11. Set the Label to Name:. For Style, select Wrap with label tag. For Position, select Before form item. Configure the Access key value as n. Click OK. Press e to move the cursor to the next line.
G G G

Add the E-mail: text and text box in a similar manner. Press e. Add the Submit button by selecting InsertFormButton from the menu bar. Do not configure a label for the Submit button.

T3.2

Using a Form in Dreamweaver

T-73

Figure T3.11 The Input Tag Accessibility Attributes dialog box

Configure the Reservation Information to use the mainContent style. Configure the rest of the form to use the regularContent style. Save and test your page in a browser. Your page should look similar to the example shown in Figure T3.8. As you know, in order to do its job the form needs to be connected to some type of server-side processing. The property inspector can be used to set the action attribute of the form to the URL of a CGI script such as ASP, JSP, and so on). The forms property inspector is shown in Figure T3.12.

Figure T3.12 The property inspector can be used to configure server-side processing for the form

This section introduced you to using Dreamweaver to create a form. Be aware that most forms need to be connected to server-side processing using the action attribute on the <form> tag in order to do anything meaningful, such as save information in text files and databases or send form data reliably in e-mails. If you are connected to the Internet, you can use the textbooks demonstration server-side script to process the form information and display a confirmation page. To configure the form to use this script, type http://webdevfoundations.net/scripts/formdemo.asp in the Action text box on the forms property inspector. Save the page. If you are connected to the Internet, test your page in a browser. Fill out the form and click the Submit button to invoke the serverside processing. Now that you have created a few pages in this site, lets take a look at the Web page validation and accessibility checking that Dreamweaver offers.

T-74

Tutorial 3

Introduction to Dreamweaver 8

T3.3 Applying Dreamweaver Validation

and Accessibility Testing
Use the menu bar to access the Check Page option. As shown in Figure T3.13, Dreamweaver offers the following types of checking: Check Accessibility, Check Links, Check Target Browsers, Validate Markup, and Validate as XML.

Figure T3.13 Dreamweaver can check for accessibility compliance

Check Accessibility tests a page for compliance with both Section 508 and W3C Guidelines. Check Links tests the internal site links and reports on any that are broken. It will also list external links for you to verify manually. Validate Markup is used to validate HTML or XHTML Web page documents. Validate as XML validates Web page documents coded in XHTML or XML. When the Validate Markup test was run on the newreservations.htm page, one error was reported. The results from the Validate Markup test are shown in Figure T3.14.

Figure T3.14 The Results panel after the Validate Markup page check

www

T3.3

Applying Dreamweaver Validation and Accessibility Testing

T-75

Upon checking the Code View (see Figure T3.15) you can see that even though Dreamweaver should be coding XHTML, the stand-alone link tag was not properly closed.

Figure T3.15 The link tag does not follow XHTML syntax

Code View was used to edit and correct the syntax of the link tag (see Figure T3.16).

Figure T3.16 The link tag has been corrected

Figure T3.17 shows that no errors were found the next time the Validate Markup test was run.

Figure T3.17 The test is successful

T-76

Tutorial 3

Introduction to Dreamweaver 8

Now that you are becoming comfortable with both coding and testing in Dreamweaver, lets find out how to use it to publish your site.

T3.4

Publishing a Dreamweaver Site

You can use an external FTP application to publish a Dreamweaver site. However, Dreamweaver also offers a built-in FTP publishing feature as part of the Site panel. This section of the tutorial explores using this feature. If you take a moment (OK, maybe a few moments) to obtain free site space, you can try the publishing feature along with the tutorial.

Configure Site Preferences

Before using Dreamweaver to transfer files, you should configure a few site preferences. Select EditPreferences from the menu bar. Choose Site under Category, as shown in Figure T3.18.

Figure T3.18 The Site Category in the Preferences dialog box

If you are connecting to the Internet from behind a firewall you may need to configure the firewall host and the firewall port options. Contact your network administrator for the correct values. There are a number of options that you may configure in the Preferences dialog box (see Figure T3.18). You can change the way that the Local Files (files on your com-

T3.4

Publishing a Dreamweaver Site

T-77

puter) are shown, whether you will be prompted for dependent files (such as images), the FTP idle time disconnect and time out-values, and whether files are saved before being uploaded. In most cases, the default site preferences are workable. Click OK.

FAQ
What do these FTP terms mean?
G G G

GET refers to downloading a file from a Web server to your computer. PUT refers to uploading a file to a Web server from your computer. FTP Idle Disconnect refers to the number of minutes a connection is kept open when there is no activity or file transfer.

Configure the Remote Site

Now configure the remote site information for the particular site you are working on. Select SiteManage Sites from the menu bar. The Manage Sites dialog box appears, as shown in Figure T3.19. (Your site list will most likely be different from the list shown

Figure T3.19 Begin with the Manage Sites dialog box

when you need to set up a remote site

in Figure T3.19 because it contains the names of the Dreamweaver sites you have defined.) Select the name of your site, such as moosewood, and click the Edit button. The Site Definition dialog box will appear. Select Remote Info under Category. Your display should be similar to that shown in Figure T3.20. Click the Access drop-down list and choose FTP. Your Site Definition dialog box should look similar to the one shown in Figure T3.21.

T-78

Tutorial 3

Introduction to Dreamweaver 8

Figure T3.20 The Remote Info category in the Site Definition dialog box

Figure T3.21 FTP has been selected to access the remote site

T3.4

Publishing a Dreamweaver Site

T-79

Your Web host provider will have given you the values that you need to enter in this dialog box. For example, the authors Web site account with Free Prohosting (http://free.prohosting.com) is stored on the Web server named rain.prohosting.com. The Web host provider has supplied the Login username (wdf ) and a password. There is no specific host directory (it is based on username). They have indicated that they use passive FTP. A screenshot of the dialog box with this information is shown in Figure T3.22.

Figure T3.22 Ask your Web host provider for the information you need
to complete this dialog box

Use the configuration information given to you by your Web host provider and configure the Site Definition information. When you are ready, click OK and the Define Sites dialog box will appear. Click Done.

Connect to the Remote Site

There are a number of ways to use Dreamweaver to connect to your remote site. One method is to use the Files panel and click the Connect to remote host icon. See Figure T3.23. A message box will appear that displays the status of the connection process. There may be several messages.

T-80

Tutorial 3

Introduction to Dreamweaver 8

Figure T3.23 Connecting to a remote host

If there is a problem with the connection, an error message will appear (perhaps you typed your username or password incorrectly, or need to change the Passive Mode setting). If all goes well, you will see a brief connecting message and the Files panel will display the Remote View (the files on the Web server). To see the Remote View and the Local View (the files on your computer) simultaneously, click the Expand/Collapse button on the right-hand side of the Files panel toolbar, as shown in Figure T3.24.

Figure T3.24 The Expand/Collapse button

When you click the Expand/Collapse button, the Files panel will fill the Dreamweaver workspace, as shown in Figure T3.25. The Files panel will display the Remote Site (Web server) on the left side and the Local Files (your computer) on the right side.

Figure T3.25 The Files panel fills the Dreamweaver workspace

T3.4

Publishing a Dreamweaver Site

T-81

Dont worry if your screen does not show the same folders as shown in Figure T3.25. If you recently acquired your free Web site space, your Remote Site will probably just contain an index.htm or index.html file.

Use Folders to Organize the Remote Site

Since the Remote Site is used for a number of purposes (just as your free Web site space can be used for a number of assignments or projects), it is a good idea to create a separate folder for the moosewood site. (Note: You do not have to create folders on your Web site space. You may transfer to the root directory of a site without creating folders. The folder is used here to organize the Web site space.) To create a folder for the moosewood site on the Remote Site, click the Remote Site Folder icon (shown in Figure T3.26) and select FileNew Folder. Name the folder moosewood.

Figure T3.26 The Remote Site Folder icon

Click the Refresh button (Figure T3.27) to refresh the display. As shown in Figure T3.28, the moosewood folder is now on the Remote Site.

Figure T3.27 The Refresh button

Figure T3.28 The Remote Site now contains the moosewood folder

T-82

Tutorial 3

Introduction to Dreamweaver 8

Upload to the Remote Site

There are a number of ways to upload (put) the files from the Local Folder to the Remote Site. One method is to select a file and drag it to the appropriate folder on the Remote Site. Transferring a file to the Remote Site does not delete it from the Local Folder. Another method is first to select and highlight in the Local Files folder the files to be sent. Next, use the Files panel and select SitePut. You can also click the Put button (shaped like an up arrow) in the Files panel toolbar. Figure T3.29 shows the site window after the moosewood files have been transferred.

Figure T3.29 The moosewood files have been transferred to the Remote Site

When you have transferred the files, disconnect from the Remote Site by clicking the Disconnect from remote host icon, as shown in Figure T3.30. Remember to return the Dreamweaver workspace to normal by clicking the Expand/Collapse button (see Figure T3.24).

Figure T3.30 The Disconnect from remote host icon

Summary

T-83

Test the Remote Site in a Browser

Next, use a Web browser to test your site. Your Web host provider supplies the URL for your site. Files can be downloaded from Web servers in a manner similar to the one shown for the upload. Connect to the server and drag the files from the Remote Site to the Local Folder. Remember, GET means download and PUT means upload. This completes the whirlwind tour of transferring files using Dreamweaver. The purpose of this section is to get you started and to enable you to publish your sites using Dreamweaver. There are other options that you can experiment with on your own as you become more comfortable with the application.

Summary
This tutorial provided a brief introduction to some special features of Dreamweaver Flash Text, Flash Buttons, code validation and accessibility testing, and publishing. There is so much more to learn about Dreamweaver. These tutorials only scratch the surface of the productivity features of this popular Web authoring tool. Options to continue your study of Dreamweaver include college and continuing education classes, online tutorials, and books. Check with your local community college for the availability of classes on Web development and Dreamweaver. If free online tutorials are more your style, try searching the Web for online tutorial or Dreamweaver tutorialyou might be surprised at the resources you find. There are many books that provide information and practice exercises with Web authoring tools. Visit a bookstore (online or brick-and-mortar) and take a look at whats available. A good guide to purchasing a technical book is to scan a topic that you already know and scan a topic that you dont know. If you like the way that the author treats both topics and you find the material easy to read, the book will probably be helpful. One thing is certainthe Web never stops changing. The sooner you get used to learning on your own, the better. If you are a Web development professional, count on continuous learning. You have completed Adobe Macromedia Dreamweaver Tutorial 3!