DiMarco J. Digital Design for Print and Web: An Introduction to Theory, Principles, and Techniques

Подождите немного. Документ загружается.

Chapter 8 Web Site Design and Development 313

will be triggered by the onClick event linked to a button, then that pop-up win-

dow will appear whenever a visitor clicks on the link associated with that button.

The actions available vary among browser versions.

Events are messages generated by browsers indicating that a visitor to a

Web page has done something, such as moved the cursor over a link. When

this happens, the browser generates an onMouseOver event for that link; the

browser then checks whether it should call some JavaScript code in response

to the event (a SWAP IMAGE action, for example). One event can even trigger

several actions, such as a swap image and the appearance of a pop-up window

triggered by an onMouseOver event and then an onClick event.

technique Lesson 8.18: Using Behaviors for Graphical rollovers

You can use behaviors for a host of actions that make your Web pages more

interactive. Graphical rollovers, which are called SWAP IMAGE actions in the

BEHAVIORS panel, are among the most common. Rollovers provide visual feed

back to the user by swapping an image when the cursor rolls over it.

There are two ways to create rollovers in Dreamweaver. The rst is to use

the SWAP IMAGE behavior. The other is to go to INSERT > IMAGE OBJECTS >

ROLLOVER IMAGE. Both ways are effective, and are described below; choose

the one that you are most comfortable using. You can also set the rollover prop-

erties for HTML text links by going to MODIFY > PAGE PROPERTIES.

The simplest rollovers require you to create two graphics. One is the graphic

that will be rolled over. This is usually a navigation button or a graphic that trig-

gers the appearance of the other graphic. The second graphic is the replace-

ment image that displays when the mouse-over occurs. When a navigation bar

is involved, the second graphic usually contrasts visually with the rst graphic,

typically by graying out the graphic, changing colors, or adding a border.

Make sure that the rollover image is the same size as the image being

swapped; if the container (table cell or AP div) is too small to accommodate it,

the image will become distorted upon rollover.

QuiCk StePS (DW):

Using the Swap Image Behavior to Create Rollovers

You must have a rollover graphic ready before opening the BEHAVIORS panel

(see Technique Lesson 8.8, page 292). Make sure you have the image that will

be used in the rollover saved in the images folder of your Web site.

98364c08.indd 313 1/15/10 1:15:30 PM

PART TWO Techniques314

1. In the Web page, select the image that will be swapped or will trigger the

event.

2. Click on the + in the BEHAVIORS panel and choose SWAP IMAGE.

The SWAP IMAGE dialog box will appear, and you will be prompted to

choose an IMAGE and SET SOURCE TO destination.

3. In the IMAGES eld, navigate to the image you want to swap from.

The image you have selected previously will be selected by default, so you

do not have to reset it if you are doing a single-state (two-image) rollover.

4. The SET SOURCE TO eld represents the image that is swapped in on roll-

over. Navigate to the graphic that you exported from Fireworks or saved into

your images folder. If you named it with an identier, such as _rollover, you

should be able to nd it quickly. Be sure that the rollover image is the same

size as the selected image.

5. After choosing the image, click OK.

6. In the BEHAVIORS panel, set the event to onClick or onMouseOver.

7. Press F12 to preview the rollover in the browser.

(A,B)

(C,D)

98364c08.indd 314 1/15/10 1:15:35 PM

Chapter 8 Web Site Design and Development 315

Figures8-21,a–e Constructing graphical rollovers requires you to rst create

a different image state, then generate the rollover JavaScript using a SWAP

IMAGE behavior.

Creating Multistate Rollovers

You can also create multistate rollovers, which let you swap multiple images on

a page with an event.

1. Perform the SWAP IMAGE behavior process described above for each item

you want to have swapped to the same trigger graphic.

2. Select the graphic (button) that will trigger the event, then set the image

that will be swapped out in the IMAGES section (at the top of the SWAP

IMAGE dialog box).

3. Browse for the image that will be swapped in.

4. Set the BEHAVIORS panel event to onMouseDown and onMouseOver for

each individual event.

Naming the image descriptively in the PROPERTIES INSPECTOR will help

you nd it in the SWAP IMAGE dialog box more easily. This is not a le

name, but merely a descriptor for coding purposes.

(E )

98364c08.indd 315 1/15/10 1:15:36 PM

PART TWO Techniques316

Figures8-22,a–D For multistate rollovers, start by naming the image you want to swap in

the PROPERTIES INSPECTOR. Select the trigger graphic—the image that initiates the event

when clicked. Next, select the SWAP IMAGE behavior and set the IMAGES area to the image

that will be swapped. Then navigate to the SET SOURCE TO image.

Using the Insert Menu to Create Rollovers

Use this method if you are starting from scratch, and no images yet exist on

the Web page. (If there are existing images on the page, use the SWAP IMAGE

behavior.) Make sure you have the image that will be used in the rollover saved

in the images folder of your Web site.

1. Go to Insert > Image Objects > Rollover Image.

The INSERT ROLLOVER IMAGE dialog box will appear.

2. Choose the original image (this will be replaced by the swapped image).

3. Choose the rollover image. This image should be the same size as the origi-

nal image.

98364c08.indd 316 1/15/10 1:15:39 PM

Chapter 8 Web Site Design and Development 317

4. Add a link destination.

5. Press F12 to preview the rollover in the browser.

There are also other methods for swapping images: using the SHOW-HIDE

ELEMENTS behavior, for example, allows you to show and hide entire AP divs

and images on the page.

technique Lesson 8.19: Using Behaviors for pop-Up Windows

Pop-up windows are browser windows that load on top of an existing window.

Because their size can be controlled (unlike external windows, which open

through _blank window links), pop-up windows are ideal for isolating content.

In the BEHAVIORS panel, the JavaScript function for pop-up windows is

OPEN BROWSER WINDOW. Although their sizes can vary, a pop-up window

should always be smaller than the Web page that launches it. Try 600 x 400

pixels for showing off graphics and image-related work. Use 400 x 300 pixels for

smaller work that requires smaller windows, such as videos or animations. Try

600 × 800 pixels for long, text-based pages such as an interactive Web resume.

You are always safe using white as a background color. Work on one pop-up

page until you are satised with its size and look. Then choose the SAVE AS com-

mand to use the page as a template again and again for each new piece of work.

Pop-up windows should be kept simple and contain a minimum of graphics

and text. Basic navigation for the next pages and a CLOSE WINDOW button

should always be included. The layout of the pop-up page should consist of a few

strategically placed layers—a work layer and a navigation layer. No other content

is needed. You do not want to distract the viewer from the main content.

QuiCk StePS (DW):

The Open Browser Window Behavior

Apply this JavaScript to text or a graphic button to trigger the event.

1. Highlight the text or graphic that will trigger the browser window to open

(the event) and go to the BEHAVIORS panel. Do not to add a link to the text

or graphic; doing so will cause multiple windows to open.

2. Click on the + in the BEHAVIORS panel and choose OPEN BROWSER

WINDOW.

The OPEN BROWSER WINDOW dialog box will appear.

3. In the dialog box, next to URL TO DISPLAY, click on BROWSE.

8.19

98364c08.indd 317 1/15/10 1:15:39 PM

PART TWO Techniques318

This will display the navigation window showing your les.

4. Navigate to where your Web site resides (my_web folder) and choose the

HTML page you want to load in the pop-up window.

5. Set the width and height of the pop-up window in the corresponding elds.

Experiment with sizes and text to make sure the content ts properly.

6. Enable the SCROLLBARS AS NEEDED and RESIZE HANDLES check boxes if

the page will scroll or need resizing. Otherwise, leave all the attributes blank

to generate a blank window.

7. Set the event in the BEHAVIORS panel to onClick.

8. Press F12 to preview the pop-up window in a browser.

technique Lesson 8.20: Using JavaScript to Close a Window

QuiCk StePS (DW):

Making a Close Button

You can also “call” JavaScript without using behaviors. JavaScript can be typed

directly into the PROPERTIES INSPECTOR’s LINK eld. This book is not about

JavaScript, but the technique for creating close buttons is very straightforward—

and one that’s important to have in your arsenal of Web page design skills.

A close button provides an easy, intuitive method for a visitor to close a

pop-up window and return to the home page. While a visitor will often close the

window by clicking the X in its title bar, it is still prudent to provide a close button

in your pop-up window’s design. You can do so using some simple JavaScript.

Add forward and back buttons to the pop-up window, and you’ve created a

rudimentary user navigation system. (This system should be very discreet and

in the same location on each page.)

1. In a pop-up window, make a new layer, type the words close window, and

apply a CSS style (or make a new text style). (Don’t put this on your home

page or it will close its window.)

2. Highlight the text and in the PROPERTIES INSPECTOR, go to the LINK eld,

and type javascript:self.close().

3. Set the event to onClick.

4. Press F12 to preview the close button in a browser. Test the button to see if it

closes the window.

8.20

98364c08.indd 318 1/15/10 1:15:39 PM

Chapter 8 Web Site Design and Development 319

Using the Call JavaScript Behavior

You can also use behaviors to call JavaScripts in Dreamweaver by using the

BEHAVIORS panel and choosing CALL JAVASCRIPT.

1. In the CALL JAVASCRIPT dialog box, type self.close().

2. Set the event to onClick.

3. Press F12 to preview the behavior in a browser.

This provides the same result as typing javascript:self.close().into the PROP-

ERTIES INSPECTOR’s LINK eld.

Uploading Files to the Internet

To place your Web pages on the Internet at a World Wide Web location, you

need to have a Web address (domain name) and server space on a host com-

puter. Hosts provide server space and registrars provide Web addresses, also

known as URLs (for uniform resource locators).

There are many advertisements on the Web for companies from which you

can purchase these components. Until you have them, you will only be able to

run your Web site locally—on your own computer. Once you secure a domain

name and a host, you can begin to upload your Web site les to the Internet. To

upload les to a Web server (host), you use FTP (le transfer protocol), either

within a Web development program such as Dreamweaver, through a dedicated

FTP application such as Fetch, or directly from a Web browser to the Internet.

technique Lesson 8.21: Ftping Files from adobe Dreamweaver

To upload les to a host computer from Dreamweaver, you must rst set up a site.

QuiCk StePS (DW):

Uploading Files via FTP

1. Go to SITE > NEW SITE.

The SITE DEFINITION dialog box will appear. Click the ADVANCED tab.

2. Enter in the settings for your local Web site and your Web hosting server.

3. Select the LOCAL INFO category and complete the following elds:

a. SITE NAME: Add a name for the Web site.

b. LOCAL ROOT FOLDER: Navigate to where your Web site les reside on

your computer (my_website).

8.21

98364c08.indd 319 1/15/10 1:15:39 PM

PART TWO Techniques320

c. DEFAULT IMAGES FOLDER: Leave this eld blank.

LINKS RELATIVE TO: Document.

HTTP ADDRESS: Type in your Web site’s URL

(e.g., www.portfoliovillage.com).

4. Select the category REMOTE INFO and complete the following eld:

ACC E SS : F T P.

5. Type in the FTP host, the log-in, and the password. (You get all of these from

your Web hosting provider.)

6. Go to WINDOW > FILES.

This will display the FILES panel, which provides a le tree—the location of

your les on your computer.

7. From the drop-down menu, choose REMOTE VIEW. Dreamweaver will log

on to the host server.

6. Expand the window by clicking the EXPAND WINDOW button at the top of

the FILES panel.

You will see the host folders and your folders in a split-pane window.

7. Go to your local Web site folder (my_website) and drag the index.htm Web

page onto the host server (usually the HTML folder, although some hosts

name this folder public_html).

Dreamweaver will ask you if you want to PUT DEPENDENT FILES.

8. Click YES.

The image les that are coded

into the Web page will be moved

into the images folder on the host

server automatically. If you click

NO, you will have to drag the

image les over to the images

folder manually.

9. Type your Web site address into

a Web browser to see if the pages

and graphics have uploaded

correctly.

(A)

98364c08.indd 320 1/15/10 1:15:40 PM

Chapter 8 Web Site Design and Development 321

Figures8-23,a–c To upload to the Internet through Dreamweaver, you must have a host and

a local site set up using the SITE menu. Once set up, you then connect to the host and transfer

your les from your local computer to the host computer.

technique Lesson 8.22: Ftp Files from a Web Browser

You can upload les to a server directly from a Web browser such as Internet

Explorer.

QuiCk StePS:

Uploading Files via FTP from a Browser

1. Type f t p : // followed by the name of your Web site into your browser.

A window asking for the FTP username and password will appear.

2. Enter that information.

The browser will open the host server and your folders will appear.

3. Drag les from your Web site’s root directory folder (my_website) directly

into the host’s HTML and images folder. If an images folder does not exist,

either create one or drag your images folder over to the host server.

4. Open a new browser window and type in your Web site address to see if the

pages and graphics uploaded correctly.

8.22

(B,C)

98364c08.indd 321 1/15/10 1:15:41 PM

PART TWO Techniques322

Design Assignment

Create a ve-page Web site that presents a photo narrative. Choose a theme

(e.g., food, trees, people) and shoot some digital photographs. Retouch, scale,

and crop the images. Design a Web page with links to each of the photos. Use

text, thumbnails, or buttons for links.

tools: Digital imaging software, Web development software, and ve digital

images.

Specs: Imagine you are the digital designer hired to create a pitch site to get the

account of a well-known photographer. Develop a ve-page site that demon-

strates design, composition, navigation, and ease of use.

Online Movie Lessons

Tutorial walk-through movies for technique lessons are provided online. Each

section contains step-by-step tutorial movies available at book’s Web site:

www.wiley.com/go/digitaldesign.

Bibliography

Adobe Systems 2009. Adobe Fireworks and Adobe Dreamweaver HELP menus

for CS4.

Curtis, Hillman. 2000. Flash Web design: The art of motion graphics. Berkeley, CA:

New Riders.

———. 2002. MTIV: Process, inspiration, and practice for the new media designer.

Berkeley, CA: New Riders.

DiMarco, John. 2006. Web portfolio design and applications. Hershey, PA: Idea

Group.

Kristof, Ray, and Amy Satran. 1995. Interactivity by design: Creating & communi-

cating with new media. Mountain View, CA: Adobe Press.

98364c08.indd 322 1/15/10 1:15:41 PM