macromedia Dreamweaver MX Bible phần 5 doc

In the expanded portion of the Text Property inspector, select the List Item button.. In the expanded Text Property inspector, select the List Item button.. In the expanded Text Property

The List Properties dialog box opens with Numbered List showing as the List Type, asshown in Figure 12-5.

Figure 12-5: Use the List Properties dialog box

to alter the numbering style in an ordered list

3 Open the drop-down list of Style options, and choose any of the numbering types.

1 Select the item you wish to change.

2 In the expanded portion of the Text Property inspector, select the List Item button.

3 From the List Item section of the List Properties dialog box, open the New Style list of

options

4 Select one of the numbering options.

Although you can’t automatically generate an outline with a different numbering system foreach level, you can simulate this kind of outline with nested lists See “Using Nested Lists”

later in this chapter

Making Definition Lists

A definition list is another type of list in HTML Unlike ordered and unordered lists, definitionlists don’t use leading characters such as bullets or numbers in the list items Definition listsare commonly used in glossaries or other types of documents in which you have a list ofterms followed by their descriptions or explanations

Browsers generally render a definition list with the definition term flush left and the definitiondata indented, as shown in Figure 12-6 As you can see, no additional styling is added Youcan, however, format either the item or the definition with the Text ➪ Style options or byusing Cascading Style Sheets

Caution

Figure 12-6: Definition lists are ideal for glossaries or other situations in which you have

a list of terms followed by their definitions

To begin your definition list in Dreamweaver, follow these steps:

1 Choose Text ➪ List ➪ Definition List or click the Definition List button in the Text gory of the Insert bar

cate-2 Type in the definition term and press Enter (Return) when you are finished.

Dreamweaver indents the line

3 Type in the definition data and press Enter (Return) when you are finished.

4 Repeat Steps 2 and 3 until you have finished your definition list.

5 Press Enter (Return) twice to stop entering definition list items.

If you have an extended definition, you may want to format it in more than one paragraph.Because definition lists are formatted with the terms and their definition data in alternatingsequence, you have to use the line break tag, <br> (or <br /> for XHTML documents), tocreate blank space under the definition if you want to separate it into paragraphs PressShift+Enter (Shift+Return) or select the Line Break button from the Insert bar to enter one ortwo <br> tags to separate paragraphs with one or two additional lines

Tip

Definition dataDefinition term

When you insert a definition list, Dreamweaver denotes it in code using the <dl> </dl>

tag pair Definition terms are marked with a <dt> tag, and definition data uses the <dd> tag Acomplete definition list looks like the following in HTML:

<dt>Cash Payments Journal</dt>

<dd>Journal for recording payments made in cash.</dd>

</dl>

You can vary the structure of a definition list from the standard definition term followed bythe definition data format, but you have to code this variation by hand For instance, if youwant a series of consecutive terms with no definition in between, you need to insert the

<dt> </dt>pairs directly in Code view or in the Code inspector To facilitate the tion of these tags, you can click the Definition Term and Definition Description buttons in theText category of the Insert bar to insert the appropriate tags in Code view

inser-Using Nested Lists

You can combine, or nest, lists in almost any fashion For instance, you can mix an orderedand unordered list to create a numbered list with bulleted points You can have one num-bered list inside of another numbered list You can also start with one numbering style such

as Roman Large, switch to another style such as Alphabet Small, and return to Roman Large

to continue the sequence (like an outline)

Dreamweaver offers an easy route for making nested lists The Indent button in the TextProperty inspector — when used within a list — automatically creates a nested list As anexample, the ordered list in Figure 12-7 has a couple of bulleted points (or unordered listitems) inserted within it Notice how the new items are indented one level

Follow these steps to create a nested list in Dreamweaver:

1 Select the text in an existing list that you want to indent and reformat with a different

style

2 In the Text Property inspector, choose the Indent button You can also select the Text ➪Indent command Dreamweaver indents the selected text and creates a separate list inthe HTML code with the original list’s properties

Nested unordered lists exhibit a cool feature in most browsers — they automatically changethe list style for each level In many browsers, the outermost level is displayed with a bullet,the second level with a circle, and the third level with a square This feature provides auto-matic outlining from an unexpected source! For ordered lists, the style of indented itemsdoes not change automatically

3 Go to the List Properties dialog box and select another list type or style, as described

in preceding sections

Note Tip

Figure 12-7: Dreamweaver automatically generates the code necessary to build nested

lists when you use the Indent button on the Text Property inspector

You can unnest your list and reverse the effects of the Indent button by selecting the Outdentbutton in the Text Property inspector or by choosing Text ➪ Outdent Be careful, however,when selecting your text for this operation When you use the mouse to perform a click-and-drag selection, Dreamweaver tends to grab the closing list item tag above your intendedselection A better way to highlight the text in this case is to use the Tag Selector on the sta-tus bar Place the cursor in the indented list you want to outdent and choose the innermost

<ol>or <ul> tag from the Tag Selector

To examine the origins of the term nested list, look at the code created by Dreamweaver for

the following list type:

<ol>

<li>Stir in two sets of Venetian blinds.</li>

<li>Add one slowly rotating ceiling fan.</li>

<li>Combine one flashing neon sign with one dangling light bulb

<ul>

<li>Use a bare bulb, preferably swinging.</li>

<li>The neon sign should throw contrasting shadows.</li>

</ul>

Caution

Outdent button

Indent button

as described previously.

Accessing Special List Types

Dreamweaver gives you access to a couple of special-use list types: menu lists and directory lists When the tags for these lists — <menu> and <dir>, respectively — were included in the

HTML 2.0 specification, they were intended to offer several ways to present lists of shortitems Unfortunately, browsers tend to render both tags in the same manner: as an unorderedlist You can use Cascading Style Sheets to restyle these built-in tags for use in 4.0 and laterbrowsers

Both the <menu> and <dir> tags are deprecated in HTML 4.0 Since most browsers formatthese lists like unordered lists, you should typically just use ordered lists instead of either ofthese list types Ordered lists are supported in both older browsers and will continue to besupported in the future

Menu lists

A menu list generally comprises single items, with each item on its own individual line Toapply a menu list style, follow these steps:

1 In an existing list, select one item.

2 In the expanded Text Property inspector, select the List Item button.

3 In the List Properties dialog box, open the List Type drop-down list and choose Menu

List, as shown in Figure 12-8

4 Click OK.

Figure 12-8: Making a menu list.

Note Caution

Directory lists

The directory list was originally intended to provide Web designers with an easy way to ate multiple-column lists of short items Unfortunately, the most current browsers present thedirectory list’s items in one long list, rather than in columns

cre-The directory list format is applied in the same way as the menu list, and here as well, mostbrowsers render the format as an unordered list with bullets To create a directory list, followthese steps:

1 In the current list, select one item.

2 In the expanded Text Property inspector, select the List Item button.

3 In the List Properties dialog box, open the List Type list (refer to Figure 12-8) and

choose Directory List

4 Click OK.

Dreamweaver Technique: Building Graphical Bullets

HTML unordered lists are functional and often useful, but they’re not particularly decorative

If you are a Web designer, you might very well want to spice up your bulleted list of itemswith graphics Although the CSS technique described earlier offers the possibility of selecting

an image to use as the bullet, this solution is not available to older Netscape browsers or 3.0versions of Internet Explorer Moreover, you don’t have much control over the vertical place-ment of the bullet, so the image often appears higher than desired

The following technique is intended for designers working just with Dreamweaver and anygraphics editor However, if you have Fireworks 3 or later, you can automate the process ofreplacing an unordered list with graphical bullets The Convert Bullets to Images command(originally developed by the author as BulletBuilder) converts list items to paragraph linesand places a custom bullet — available in 10 different shapes and any Fireworks style —before the line You’ll find this extension on the Macromedia Exchange

Substituting a graphical bullet for the HTML versions is practical and often desirable.Because a small, single image is used repeatedly, the impact on a Web page’s size is negligi-ble, and the image downloads quickly You can include graphical bullets in two basic ways:inline and tables Inline graphical bullets put the bullet image right next to the text, whereasthe table technique keeps all the bullets in one column and the bullet items in another Whichtechnique you use depends on the length of the bulleted item If your bulleted items are shortenough so that they won’t wrap, use the inline technique; on the other hand, if the text iswrapping from one line to the next, use the table technique

To use graphic images as bullets in an inline technique, follow these steps:

1 Create your image in a graphics editor, such as Fireworks, and save the file so that it is

accessible to your local site

2 If necessary, convert your unordered list to standard paragraph format by selecting the

entire list and deselecting the Bullet button on the Property inspector

3 Choose Image from the Insert bar and place the bullet graphic before the first line item Tip

4 Select the correct vertical alignment for the image from the Align list on the image

Property inspector

Although your alignment choice may vary according to the height of your text and yourimage, Absolute Middle works in many situations

5 In the Image Property inspector, select <empty> from the Alt drop-down list.

Normally, you should not specify alternate text for a bullet image Adding alternate text to abullet typically does not enhance the understanding of your page for either those usingvisual or non-visual browsers

However, you should not just leave the Property inspector Alt field blank If you do, somescreen readers read the filename when they encounter the image, which slows down howquickly people using non-visual browsers can get to the real information on your page

Explicitly selecting <empty> in the Property inspector Alt field includes a blank alt attribute,which causes screen readers to ignore the bullet image

6 If necessary, add a non-breaking space or two between the image and the list item by

pressing Ctrl+Shift+spacebar (Command+Shift+spacebar)

7 Select the image and any added non-breaking spaces.

8 Ctrl+drag (Option+drag) the selection to copy it to the beginning of the next line item,

as shown in Figure 12-9

9 Repeat Step 8 for each line item.

Figure 12-9: Copying your graphic bullets after you’ve set the alignment and alternate

text saves you many steps later

Tip

The following technique requires a basic understanding of tables in HTML in general andDreamweaver in particular If you’re not familiar with inserting and formatting tables, youmay want to look at Chapter 10 before proceeding.

If your text lines are too long, they wrap at the browser window and — here’s the unsightlypart — under the graphical bullet To avoid this wrapping problem, use the table technique,detailed in the following steps:

1 Create your bullet in your favorite graphics program.

2 If necessary, convert your unordered list to standard paragraph format by selecting the

entire list and deselecting the Bullet button on the Property inspector

3 Position your cursor above the first line item and choose the Insert Table button from

the Insert bar

4 In the Insert Table dialog box, set the Columns value to 2, and the Rows value to the

number of line items you have Turn off the borders by setting Border value to 0 Click

OK when you’re done

The table is inserted in the Document window

5 Select the first column of the table by dragging down its length.

6 In the Property inspector, set the Horiz (horizontal alignment) value to Right, and the

Vert (vertical alignment) to Top

7 Select the second column by dragging down its length.

8 In the Property inspector, set the Horiz (horizontal alignment) value to Left and the

Vert (vertical alignment) to Top

9 Select the Image button and place your bullet image in the first column, first row.

10 Select the first line item and drag it into the second column, first row.

11 Copy the bullet image from the first cell and paste it into the first column for every

remaining row

12 Repeat Step 10 for each of the remaining line items, putting each on its own row.

When you’re done, the bullet images line up evenly, as do the line items, as shown in ure 12-10 You may find it necessary to adjust the vertical alignment on either the bullet orline item column to get the look you want

Fig- Reference

Cross-Figure 12-10: Placing bullet items in a table enables you to keep equal spacing with

longer, wrapping lines

Summary

Lists are extremely useful to the Web site designer from the perspectives of both content andlayout Dreamweaver offers point-and-click control over the full range of list capabilities

✦ The primary list types in HTML are unordered, ordered, and definition lists

✦ Use unordered lists when you want to itemize your text in no particular order

Dreamweaver can apply any of the built-in styles to unordered lists, or you can tomize your own list style through Cascading Style Sheets

cus-✦ An ordered list is a numbered list Items are automatically numbered when added, andthe entire list is renumbered when items are rearranged or deleted Dreamweaver givesyou access to different styles of numbering — including regular Arabic, Roman numer-als, and upper- or lower-case letters

✦ Definition lists are designed to display glossaries and other documents in which termsare followed by definitions A definition list is generally rendered without leading char-acters such as bullets or numbers; instead, the list terms are displayed flush left, andthe definitions are indented.

✦ Dreamweaver gives you the power to nest your lists at the touch of a button — theIndent button on the Text Property inspector Nested lists enable you to show differentoutline levels and to mix ordered and unordered lists

✦ Menu and directory lists are also supported by Dreamweaver Both of these speciallists are rendered in a similar fashion, but they can be adapted through style sheets forextensive use

✦ It’s easy to substitute graphic images for standard bullets in Dreamweaver One method

of doing this uses Cascading Style Sheets You can also simply insert a bullet image inthe page like any other image Two different techniques are used — inline and table —depending on the length of the line item

In the next chapter, you learn how to create and use image maps in Dreamweaver

Making Client-Side Image Maps

By their very nature, HTML images are rectangular Although youcan make portions of a rectangular graphic transparent, givingthe impression of an irregularly shaped picture, the image itself —and thus its clickable region — is still a rectangle For more compleximages in which shapes overlap and you want several separate areas

of a picture (not just the overall graphic) to be hyperlinked, you need

an image map

Dreamweaver puts its image map tools front and center so you candraw and manage your hotspots right on your graphics in theDocument window The onscreen image map tools make it much eas-ier to manipulate your hotspots, but there’s another major advan-tage: Behaviors can easily be attached to hotspots

This chapter introduces you to Dreamweaver’s hotspot tools and alsocovers more advanced techniques for creating server-side androllover image maps

Client-Side Image Maps

For an almost literal example of an image map, visualize a map of theUnited States being used on a Web page Suppose you want to be able

to click each state and link to a different page in your site How wouldyou proceed? With the exception of Colorado and Wyoming, all thestates have highly irregular shapes, so you can’t use the typical side-by-side arrangement of rectangular images You need to be able tospecify a region on the graphic, to which you could then assign a link

This is exactly how an image map performs

Two different kinds of image maps exist: client-side and server-side

With a server-side image map, all the map data is kept in a file on theserver When the user clicks a particular spot on the image, often

referred to as a hotspot, the server compares the coordinates of the

clicked spot with its image map data If the coordinates match, theserver loads the corresponding link The key advantage to a server-side image map is that it works with any image-capable browser Thedisadvantages are that it consumes more of the server’s processingresources and tends to be slower than the client-side version

Making a server-sideimage map

DreamweaverTechnique: Creatingimage map rollovers

With client-side image maps, on the other hand, all the data that is downloaded to thebrowser is kept in the Web page The comparison process is the same, but it requires abrowser that is image map savvy Originally, only server-side image maps were possible Itwasn’t until Netscape Navigator 2.0 was released that the client-side version was even anoption Microsoft began supporting client-side image maps in Internet Explorer 3.0 The vastmajority of image maps used on the Web today are client-side, and server-side image mapsshould only be considered for special purposes.

In HTML, a client-side image map has two parts In the <img> tag, Dreamweaver includes ausemap=”mapname”attribute The map name value refers to the second part of the imagemap’s HTML, the <map> tag One of the first steps in creating an image map is to give it aunique name Dreamweaver stores all your mapping data under this map name Here’s anexample of the code for an image map with three hotspots:

<img src=”images/imagemap.jpg” width=”640” height=”480” Æusemap=”#navbar”>

<map name=”navbar”>

<area shape=”poly” coords=”166,131,165,131,160,143,164,179, Æ127,180,143,200,156,203,118,229,119,236,158,229,177,217,199, Æ238,212,247,220,242,196,203,232,190,241,189,241,182,223,177, Æ185,182,175,134,166,132” href=”/starpro.html”Æ

alt=”High Risk Funds”>

<area shape=”circle” coords=”312,202,56” href=”/nestegg.html” Æalt=”Mutual Funds”>

<area shape=”rect” coords=”389,138,497,244” href=”/prodfunds.html” Æalt=”Money Markets”>

</map>

Dreamweaver directly supports client-side image maps After you’ve inserted an image into your Web page, it can be an image map Select any image and open the expanded version of the Property inspector The image map tools are in the lower-left corner, as shown

in Figure 13-1

Creating Image Hotspots

Image maps are created with tools similar to those you find in any drawing program Afteryou’ve selected your graphic, you can click a tool to describe a rectangle, oval, or polygonshape

You can make an image map from any graphic format supported by Dreamweaver: GIF, JPEG,

or PNG Follow these steps to create hotspots on an image in Dreamweaver:

1 Select your image and, if necessary, open the Image Property inspector to full height by

clicking the expander arrow

2 Enter a unique name for your image map in the Map text box It’s generally a good

prac-tice to use a meaningful name, such as navMap, rather than something generic likeMap1

Figure 13-1: From the Image Property inspector, select the image map tools to draw

hotspots directly on graphics within Dreamweaver

3 Choose the appropriate drawing tool to outline your hotspot: Rectangle, Circle, or

Polygon Outline one hotspot, as described in the section “Using the drawing tools,”

later in this chapter

When you complete the hotspot, Dreamweaver displays the Hotspot Property tor, shown in Figure 13-2

inspec-Figure 13-2: Enter image map attributes through the Hotspot

Property inspector

Map Name fieldPointer Hotspot toolMap drawing tools

4 Enter the URL for this image map in the Link text box, or click the Folder icon and

browse for the file

If you don’t want the hotspot to open a page, you can create a null link by entering a hashmark (#) or javascript:; (preferred) in the Link text box You might do this, for example,

if you wanted to attach a JavaScript behavior to the hotspot Refer to the sidebar “AttachingBehaviors to Image Maps” in this chapter for more about behaviors

5 If desired, enter a frame name or other target in the Target text box.

A target can refer to a specific section of a frameset or to a new browser window For moreinformation about using targets in frames, see Chapter 14 To learn more about targeting anew browser window, see the section “Targeting Your Links” in Chapter 9

6 In the Alt text box, you can enter text you want to appear as a ToolTip that appears

when the user’s mouse moves over the area

In Windows, the information taken from the Alt text box appears as a ToolTip only inMicrosoft browsers Another attribute, title, is used in Netscape browsers

Dreamweaver automatically adds the alt attribute, but you must manually add thetitleattribute to achieve cross-browser compatibility

7 Repeat Steps 3 through 6 to add additional hotspots to the graphic.

Using the drawing tools

You’ll find the hotspot drawing tools to be straightforward and easy to use Each one duces a series of coordinates that are incorporated into the HTML code In the followingsteps, you use the hotspot drawing tools to outline a rectangular hotspot:

pro-1 Click on the image in the Document window, and select the Rectangular Hotspot tool

from the Image Property inspector

2 Click one corner of the area you want to map and drag toward the opposite corner to

draw a rectangle To draw a square, hold down the Shift key as you click and drag

3 Release the mouse button Dreamweaver shades the defined area.

4 Fill in the Link, Target, and Alt text boxes in the Property inspector.

Follow these steps to use the Oval Hotspot tool in the Image Map Editor:

1 Select the Oval Hotspot tool from the Image Property inspector.

Although the tool is named Oval, you are actually limited to drawing circles with it.

2 Click anywhere on the perimeter of the area you want to define and drag out the circle

until it reaches the correct size

3 Release the mouse button Dreamweaver shades the defined area.

4 As before, complete the Link, Target, and Alt text boxes.

Caution

Reference Tip

Cross-To define an irregularly shaped hotspot, use the polygon drawing tool Follow these steps:

1 Select the Polygon Hotspot tool from the Property inspector.

2 Click the first point for your hotspot object.

3 Release the mouse button and move the mouse to the next point.

4 Continue outlining the object by clicking and moving the mouse

5 For the last point in the shape, double-click the mouse to close the area.

6 Fill in the Link, Target, and Alt text boxes.

You can use the drawing tools in any combination In Figure 13-3, all three drawing tools havebeen used to create three different hotspots on a single image map The star-shaped image iscurrently selected, as indicated by the control points visible on that hotspot The otherdefined areas (the circular and rectangular objects) are shown with light blue overlaysaround them

Figure 13-3: The image map drawing tools enable you to define both regular and

irregularly shaped areas

After you’ve created your hotspots, you may want to view your page without the highlightedareas To turn off the overlays, choose View ➪ Visual Aids ➪ Image Maps to disable theoption; if the toolbar is visible, you can also choose the View Options button and then selectVisual Aids ➪ Image Maps

Tip

Modifying an image map

When you draw the hotspots on your image map, you may not initially size or position themexactly as you’d like Dreamweaver gives you several options for modifying the image mapsyou create You can move any previously defined area by selecting it and then clicking anddragging to a new location For precise pixel-by-pixel movement, select the area and use yourkeyboard arrow keys to move it in any direction

Each hotspot has a number of control points that can be used to resize or reshape it Tomove any of the control points, select the Pointer Hotspot tool on the Property inspector.The different types of hotspots have varying characteristics:

✦ The rectangle has four control points, one at each corner Drag any corner to resize orreshape the rectangle Press Shift while dragging to convert a rectangle into a square or

to resize an existing square

✦ Circle hotspots also have four control points Dragging any of these points increases ordecreases the diameter of the circle, leaving the opposing side stationary For example,

if you drag the top control point of a hotspot circle up, the hotspot expands upwardfrom the bottom

✦ Each point in a polygon hotspot is a control point that can be dragged into a new tion to reshape the hotspot

posi-Hotspots can also be aligned with other hotspots or resized to match To align two imagemaps, select both hotspots by holding down the Shift key as you click each image; then useone of the following alignment commands found under the Modify ➪ Align menu:

✦ Align Left: Aligns selected hotspots to the leftmost edge of the selection

✦ Align Right: Aligns selected hotspots to the rightmost edge of the selection

✦ Align Top: Aligns selected hotspots to the topmost edge of the selection

Setting the Default URL

What happens when Web site visitors pass their pointers over parts of your image that are notthe primary hotspots? Prior to the fourth generation of browsers, a default URL property was sup-ported to handle this issue Now, however, the necessary code, <area shape=”default”

href=”url”>, is ignored by Internet Explorer 4 and later, although it remains supported by

Netscape

One workaround to this drawback is to completely cover the graphic with an area, using theRectangular Hotspot tool, and then assign the desired default URL If you add the overall rectan-gle hotspot after other hotspots have been created, be sure to send the full-graphic rectanglebehind the other hotspots using the Modify ➪ Arrange ➪ Send to Back command Wherehotspots overlap, browsers detect only the uppermost hotspot

Note that just assigning a link to the image itself, such as by entering a URL in the Link field of theImage Property inspector, will not work; you must define a separate rectangular hotspot asdescribed above

Alternatively, open the Code view and locate the <map> tag Next, place the following code:

<area shape=”default” href=”url”>— where URL is replaced by a relative or absolute Webaddress — just above the closing </map> tag Remember, however, that this solution only works

in Netscape browsers

✦ Align Bottom: Aligns selected hotspots to the bottommost edge of the selection

✦ Make Same Width: Converts all selected hotspots to the width of the last selected

hotspot Polygon hotspots cannot be resized using this command, although rectangular

or oval hotspots can be changed to match the polygon width if a polygon hotspot isselected last

✦ Make Same Height: Converts all selected hotspots to the height of the last selected

hotspot As with the Make Same Width command, polygon hotspots cannot be resizedusing this command Again, rectangular or oval hotspots can be changed to match thepolygon height if a polygon hotspot is selected last

Although Dreamweaver lists keyboard shortcuts for all the alignment options under Modify ➪Align, these apply only to layers You must use the menus (either the Modify menu or thecontext menu) to align hotspots

Should your hotspots overlap, you can change the depth of any hotspot so that the desiredhotspot is on top and has the focus in a particular area Select the hotspot and then chooseone of these commands, found under the Modify ➪ Arrange menu:

✦ Bring to Front: Brings the selected hotspot in front of all other overlapping hotspots

✦ Send to Back: Sends the selected hotspot behind all other overlapping hotspots

Of course, Dreamweaver also enables you to delete any existing area Simply select the areaand press the Delete or Backspace key

Converting Client-Side Maps

to Server-Side Maps

Although most Web browsers support client-side image maps, some sites still rely on side image maps You can take a client-side image map generated by Dreamweaver and con-vert it to a server-side image map; you can even include pointers for both maps in the sameWeb page to accommodate older browsers as well as the newer ones Such a conversion doesrequire, however, that you use a text editor to modify and save the file You also need to addone more attribute, ismap, to the <img> tag; this attribute tells the server that the image ref-erenced in the src attribute is a map

server-If you are concerned about making your Web site accessible to people with disabilities, useclient-side image maps instead of server-side image maps Server-side image maps may not

be usable to people using voice-controlled browsers, or who otherwise do not have access

to a mouse

Adapting the server script

Let’s examine the differences between a client-side image map and a server-side image mapfrom the same graphic The HTML for a client-side image map looks like the following:

<map name=”navbar”>

<area shape=”rect” coords=”1,1,30,33” href=”home.html” alt=”Home Page”>

<area shape=”circle” coords=”65,64,62” href=”contacts.html” Æalt=”Information”>

<area shape=”default” href=”index.html”>

</map>

Note Caution

The same definitions for a server-side image map are laid out as follows:

rect home.html 1,1 30,33circle contacts.html 65,64 62default index.html

As you can see, the server-side image map file is much more compact Notice that all thealt=”string”code is thrown out because ToolTips can be shown only through client-sideimage maps

A server expects the information in the following form:

shape URL coordinatesTherefore, you need to remove the <area> tag and its delimiters, as well as the phrasesshape=, coords=, and href= You then reverse the order of the URL and the coordinates.The last step in this phase of adapting the server-side script is to format the coordinates cor-rectly The format depends on the shape being defined:

✦ For rectangles, group the x, y coordinates into comma-separated pairs with a single

space in between each pair

✦ For circles, separate the center point coordinates from the diameter with a space

✦ For polygons, group the x, y coordinates into comma-separated pairs with a single

space in between each pair — just like rectangles

Your new map file should be stored on your server, probably in a subfolder of the cgi-bindirectory

Not all servers expect server-side image maps in the same format The format offered hereconforms to the NCSA HPPD standard If you’re unsure of the required format or of where toput your maps on your server, check with your server administrator before creating a server-side image map

Including the map link

The second phase of converting a client-side map to a server-side one involves making theconnection between the Web page and the map file A client-side image map link directly callsthe URL associated with it In contrast, all references from a server-side link call the mapfile — which in turn calls the specified URL

You add the connection to a server-side map as you would add any link to a graphic You can,

of course, do this directly in Dreamweaver Simply select your graphic and, in the ImageProperty inspector, insert the map file URL in the Link text box Be sure the image’s borderproperty is set to zero to avoid the link outline

The final addition to your script is the ismap attribute Place the ismap attribute in the <img>tag of the graphic being used for the image map, as follows:

<img href=”images/biglogo.gif” width=”200” height=”350” ismap>

As noted earlier, it is entirely possible to use client-side and server-side image maps together.The easiest way to do it is to keep the image map data as written by Dreamweaver and addthe ismap attribute The HTML example shown in the previous section, “Client-Side ImageMaps,” would then read as follows:

<a href=”http://www.idest.com/cgi-bin/maps/imap.txt”>

<img src=”images/imagemap.jpg” width=”640” height=”480” Æusemap=”#navbar” ismap><a/>

Caution

Dreamweaver Technique: Building

an Image Map Rollover

One of the most popular Web page techniques today is known as a rollover A rollover occurs

when a user’s mouse moves over a button or graphic in the page and the button or graphicchanges in some way You learned how to create these graphic rollovers in Chapter 8 In thissection, you’ll try out one method for applying the same technique to an image map

The following method uses advanced techniques involving JavaScript behaviors and layers Ifyou’re unfamiliar with these concepts, you might want to examine Chapters 21 and 23before proceeding

Before you get underway, keep in mind that this technique — because it uses layers — worksonly with 4.0 browsers and later

Step 1: Create two images

As with behavior-based button rollovers, you use two images to represent the “off” and

“over” states of the graphic However, because you are using image maps here, rather thanseparate graphics, you only need a total of two images (versus two for every button) In thisexample, three buttons are “carved” from one graphic; but there could very easily have beeneight or a dozen separate buttons, which would have required 16 or 24 separate images Allyou need are two image maps

After building your first image, bring it into your favorite image-processing program and makethe alterations necessary to create the second image Figure 13-4 shows examples of the twoimages you need, inserted into Dreamweaver As you can see, all that was necessary to makethe “over” image was to add a glow effect to each of the three hotspots

Reference

Cross-Attaching Behaviors to Image Maps

A hotspot is basically an interactive trigger Although hotspots are used most frequently to opennew Web pages, they can also be used to trigger other events, such as swapping an image on thepage, showing or hiding a layer, or even opening another smaller browser window InDreamweaver, you accomplish these things by assigning behaviors to linked text or images Withits upfront image maps, Dreamweaver makes it straightforward to assign behaviors to hotspots

as well

To attach a behavior to a hotspot, first select the hotspot and then choose the Add (+) button inthe Behaviors panel Select your behavior from the list, and enter its parameters After you’veconfirmed your options, you may find it necessary to change the event from its default, which isoften onMouseDown or onMouseOver To do so, select the down triangle between the event andthe action in the Behaviors panel and choose a new event from the list

Here’s a cool and useful feature: If you copy an image with defined hotspots and behaviors, allthe associated behaviors are copied as well as the image map

Figure 13-4: You need two separate images, representing “over” and “off,” for a

rollover image map

One of the methods used in this technique involves clipping a region of an image Presently,layers support only rectangular clipping Keep this in mind as you build your primary image,and avoid placing hotspots too close together

Step 2: Set up the layers

This technique takes advantage of three different layer properties: absolute positioning, bility, and clipping The idea is to display just a portion of a hidden layer during an

visi-onMouseOverevent To perform this function without rewriting the code, a layer for each ofthe hotspots is necessary Each layer will later be clipped to show just that hotspot Thebeauty of this technique is that although it uses multiple layers, only two images arerequired, as the single “over” image is used for each rollover

To get started, you just need two layers — one for each of the images Follow these steps toestablish the initial layers:

1 Choose Insert ➪ Layer or select the Draw Layer button on the Insert bar to create thelayer that will hold the image displayed when the mouse is over the graphic I gave mylayer the name overLayer

If you use the menu option instead of drawing out the layer, it is created at a standardsize, and you won’t have to spend as much time adjusting the layer sizes later

Tip

2 Making sure the cursor is in the layer, choose Insert ➪ Image or select the Image button

on the Insert bar Load your “over” graphic If the layer is smaller than the image, thelayer automatically expands

3 Create a second layer that will hold the image displayed when the mouse is off the

image; I named my example offLayer

4 Insert the “off” graphic in the new layer.

5 If necessary, open the Layers panel by choosing Window ➪ Others ➪ Layers or ing F2, and make sure of the following:

press-• Both layers must have unique names In this example, you use offLayer andoverLayer

• The offLayer must be visible

• The overLayer must be hidden

• The overLayer must be exactly on top of the offLayer, so that when you make

a portion of the overLayer visible, it obscures the offLayer For precise tioning of each layer, set the left and top attributes using the layer Propertyinspector

posi-Figure 13-5 shows how the screen looks with both layers in place and the visibility propertiesset correctly

Figure 13-5: Two image maps are placed on top of each other in layers, and the top

layer is hidden

Invisible Layer icon

After you’ve created your initial layers, you need to create a layer for each remaining hotspot.

I name these layers sequentially, such as overLayer2 and overLayer3, and then insert the

“over” graphic in each of these layers Finally, all the overLayers should be in the same tion as, but on top of, the offLayer and hidden layer Basically you have a stack of identicaloverLayerson top of the offLayer

posi-If you have many hotspots, you may want to name the overLayers something more nizable For example, with my three shapes, I could name the layers overLayer_star,overLayer_nest, and overLayer_clapboard You need to be able to match the layers

recog-to the hotspot as part of the technique A proper naming scheme can smooth your workflow

Step 3: Make the image map

The first part of this step is to make the actual image map that will eventually be used to vate the onMouseOver and onMouseOut events Follow these steps to complete this task:

acti-1 Select the image in one of the layers You can use either image (the “over” or the “off”)

to draw the image map I selected the overLayer, with the slightly fuzzier edges

2 In the Map field of the Property inspector, give your map a unique name.

3 Draw out the image maps using the drawing tools.

4 In the Hotspot Property inspector, give each area a URL in the Link box.

5 Complete the Target and Alt text boxes, if desired.

Normally, when building an image map, this is where you would stop However,because you’re using multiple layers, you need to apply the same image map to each ofthe remaining layers You don’t need to redraw the hotspots, but you do need to assignthe same map name to each copy of the image, as described below

6 Using the Layers panel, select the next layer and then choose the image.

7 In the Map Name field, enter the same name as previously assigned.

This ensures that all the layers use the same image map; if you do not perform thisstep, the off and over images will appear to flicker

8 Repeat Steps 6 and 7 for each of the remaining layers.

Tip

Aligning Layers

In Dreamweaver you can use layer alignment commands to easily line up the two layers Thecommands are covered in detail in Chapter 21, but here are the steps briefly Select both layers byclicking each layer name in the Layers panel while pressing the Shift key Choose two of theModify ➪ Align options — Align Left and Align Top, for example — so that the layers are in the sameposition The layer alignment commands all work the same; all layers are aligned to the edge ofthe last layer selected If the layers are different shapes, you can make them the same size bychoosing Modify ➪ Align ➪ Make Same Width and/or Modify ➪ Align ➪ Make Same Height

Step 4: Attach the behaviors

Dreamweaver includes a JavaScript behavior called Show/Hide Layers that does exactly whatyou need for this technique Follow these steps to assign the Show/Hide Layers behavior tothe layers:

1 Be sure the offLayer (the layer holding the basic, unchanged image) is visible and

that all the overLayers are hidden You can select the visibility options in the Layerspanel to open and close the “eyes” of the respective layers

2 Select the first hotspot of the image in the offLayer.

3 Open the Behaviors panel by clicking the Show Behavior button in the Launcher, or by

selecting Window ➪ Behaviors

4 In the Behaviors panel, click the Add (+) button and then click Show Events For ➪ 4.0and Later Browsers, if it’s not already selected

5 Still in the Behaviors panel, select the Add (+) button again and choose Show-Hide

Layers from the drop-down menu

If the appropriate command is not enabled in the drop-down menu, make sure the hotspot

is selected in the Document window

6 When the Show-Hide Layers dialog box opens, Dreamweaver searches for all the layers

in your document After they are displayed, select overLayer and click the Show ton (see Figure 13-6) Click OK when you’ve finished

but-Figure 13-6: Highlight overLayer and then click the Show

button to ensure that the Show-Hide Layers behavior makes the appropriate layer visible

7 The item listed in the Events column should be onMouseOver If it isn’t, select the item

and click the down arrow between the Event and Action lists Choose onMouseOverfrom the Add Event drop-down list

So far, you’ve assigned one behavior to make overLayer visible when the pointer isover the image Now you have to assign another behavior to hide overLayer when thepointer moves away from the image

8 Click the Add (+) button and again select Show-Hide Layers from the option list.

9 Now select overLayer again and click the Hide button Click OK when you’re finished.

10 Finally, change the event to onMouseOut for this new behavior, following the same

pro-cedure described in Step 7

Note

You now have two behaviors assigned to one image You need to repeat the attachment of thebehaviors to each of the additional hotspots in your graphic However, instead of showingand hiding overLayer, each hotspot has its own overLayer to show and hide For example,after I’ve selected my second hotspot, I show and hide overLayer02, and so on.

Step 5: Add the clipping

If you test the image map rollover at this stage, you’ll see the entire over graphic for everyhotspot To achieve the rollover effect, each of the overLayers must be clipped All that isleft to do now is assign the clipping values

The clipping property of a layer essentially crops the visible portion of that layer Four valuesare used to define the clipped section: Left, Top, Right, and Bottom These values are pixelmeasurements relative to the upper-left corner of the layer Although you could bring yourimage into an image editor to find the measurements, you can, with a slight bit of trickiness,also get the measurements right from Dreamweaver

To get the relative pixel values within a layer, I use another temporary layer drawn over myclipped area I can shape this temporary layer to the exact size of the clip and then note thelayer’s coordinates and dimensions Because one layer can nest inside another, I can find therelative positioning — the Left and Top values — very easily Finding the Right and Bottom val-ues then requires only a minor calculation

To add the clipping values to your overLayers, follow these steps:

1 From the Layers panel, select the first of the overLayers.

2 Click the graphic in the overLayer.

3 Press the left-arrow key once to move your cursor in front of the image but within the

layer

4 Choose Insert ➪ Layer

This new layer is a temporary one that will be used for measurement purposes onlyand then deleted

5 Drag the temporary layer into position for the first area to be clipped.

6 Use the resizing handles to reshape the temporary layer until it frames the area you

want to clip, as shown in Figure 13-7

7 In the Property inspector, note the values for Left, Top, Width, and Height (L, T, W, and

H, respectively) of the temporary layer

8 From the Layers panel, select the overLayer.

9 In the Clip section of the Property inspector, enter the Left and Top values as noted

from the temporary layers

You must include the letters px, for pixels, after your clip value, without a space in between.

For example, 20px If you just enter the number, the clipping may not be displayed properly

in either Netscape Navigator or Internet Explorer

Caution

Figure 13-7: You can use a temporary layer to get exact clipping measurements.

10 For the Clip Right (R) value, enter the sum of the temporary layer’s Left and Width

Top, 20px; Right, 240px (Left + Width); and Bottom, 160px (Top + Height)

After you’ve entered the last clipping value (and pressed Tab or Enter/Return to firm), Dreamweaver displays just the clipped area

con-12 Repeat this procedure (Steps 1 through 11) for each of the remaining overLayers, until

all have clip values

13 Delete the temporary layer when you are done.

After you’ve implemented these changes, test your object You should see the type of tion demonstrated in Figure 13-8

reac-When you preview your work in a browser, make sure that visibility is set correctly for eachlayer

Note

Figure 13-8: The completed image map rollover technique in action.

Summary

Image maps provide a necessary capability in Web page design Without them, you wouldn’t

be able to link irregularly shaped graphics or to group links all in one image Dreamweaver’sbuilt-in Image Map Editor gives you all the tools you need to create simple, effective client-side image maps

✦ Image maps enable you to define separate areas of one graphic and link them to ent URLs Image maps come in two varieties: client-side and server-side Dreamweavercreates client-side image maps through its Image Map Editor

differ-✦ Dreamweaver offers three basic drawing tools for creating rectangular, circular, andirregularly shaped image maps, selectable from the Image Property inspector

✦ If your Web site uses server-side image maps, you can make them by modifying andconverting Dreamweaver-generated client-side image maps

✦ It’s possible to create the effect of a graphic rollover, common on Web pages, usingclient-side image maps This chapter’s Dreamweaver technique shows you how

In the next chapter, you learn about frames in Dreamweaver

Using Frames and Framesets

The first time I fully appreciated the power of frames, I was visiting

a site that displayed examples of what the Webmaster considered

“bad” Web pages The site was essentially a jump-station with a series

of links The author used a frameset with three frames: one that ranall the way across the top of the page, displaying a logo and otherbasic information; one narrow panel on the left with a scrolling set oflinks to the sites themselves; and the main viewing area, which took

up two-thirds of the center screen Selecting any of the links causedthe site to appear in the main viewing frame

I was astounded when I finally realized that each frame was truly anindependent Web page and that you didn’t have to use only Webpages on your own site — you could link to any page on the Internet

That was when I also realized the amount of work involved in lishing a frame Web site: Every page displayed on that site used mul-tiple HTML pages

estab-Although the technology allows you to include any page on theWeb within your own frameset, Internet etiquette and, in somecases copyright law, dictate that you obtain permission to displayanother site’s pages within your own site, and that you clearlycredit work that is not your own

Dreamweaver takes the head-pounding complexity out of coding andmanaging frames with a point-and-click interface You get easy access

to the commands for modifying the properties of the overall framestructure, as well as each individual frame This chapter gives you anoverview of frames, as well as all the specifics you need for insertingand modifying frames and framesets Special attention is given todefining the unique look of frames through borders, scroll bars, andmargins

Frames and Framesets: The Basics

It’s best to think of frames in two major parts: the frameset and theframes The frameset is the HTML document that defines the framingstructure — the number of individual frames that make up a page,their initial size, and the shared attributes among all the frames Aframeset by itself is never displayed Frames, on the other hand, arecomplete HTML documents that can be viewed and edited separately

or together in the organization described by the frameset

an existing framesetSelecting, saving, andclosing framesetsAltering frame andframeset properties —borders, scroll bars,margins and moreOpening links inspecific framesTargeting multipleframes with a singleclick

Inserting framelesscontent

Understanding iframes

A frameset takes the place of the <body> tags in an HTML document, where the content of aWeb page is found Here’s what the HTML for a basic frameset looks like:

refer-In Dreamweaver’s Code view, you can directly add a <frameset> .</frameset> tag pair

by clicking the Frameset button in the Frames category of the Insert bar Add a <frame> tag

in Code view by clicking the Frame button in the Insert bar Of course, Dreamweaver givesyou other ways to create framesets in Design view; see the section “Creating a Frameset andFrames” for more information

Columns and rows

Framesets, much like tables, are made up of columns and rows The columns and rowsattributes (cols and rows) are lists of comma-separated values The number of values indi-cates the number of either columns or rows, and the values themselves establish the size ofthe columns or rows Thus, a <frameset> tag that looks like this:

<frameset cols=”67,355,68”>

denotes three columns of widths 67, 355, and 68, respectively And this frameset tag:

<frameset cols=”270,232” rows=”384,400”>

declares that two columns exist, with the specified widths (270 and 232); and two rows exist,with the specified heights (384 and 400)

Sizing frames

Column widths and row heights can be set as absolute measurements in pixels, or expressed

as a percentage of the entire screen HTML frames also support an attribute that assigns thesize relative to the other columns or rows In other words, the relative attribute (designatedwith an asterisk) assigns the balance of the remaining available screen space to a column orrow For example, the following frameset:

<frameset cols=”80,*”>

sets up two frames, one 80 pixels wide and the other as large as the browser window allows.This ensures that the first column will always be a constant size — making it perfect for a set

of navigational buttons — while the second is as wide as possible

The relative attribute can also be used proportionally When preceded by an integer, as in n*,

this attribute specifies that the frame is allocated n times the space it would have received

otherwise Therefore, frameset code like this:

<frameset rows=”4*,*”>

ensures that one row is proportionately four times the size of the other

Creating a Frameset and Frames

Dreamweaver offers you two strategies for creating a frameset You can explicitly create aframeset file and add content to each of the frames, or you can start with existing contentand create a frameset around it You can achieve the same results using either method

Within Dreamweaver, you can create a frameset in any of the following ways:

✦ Create a new, empty frameset using the File ➪ New command, and then add content tothe frames

✦ Start with an existing document, and use drag-and-drop to draw frames around the document

✦ Start with an existing document and apply one of several common frameset layouts to

it, using menu commands or the Insert bar

Creating a new frameset file

Most of the framesets in use on the Web today use two or three frames, albeit in different figurations For example, a common setup is to have one narrow frame spanning the top ofthe page to hold a banner and some site navigation; a lower-left frame to hold a table of con-tents or additional navigation; and a large lower-right frame to hold the content of the site(see Figure 14-1)

con-Figure 14-1: The most common designs using framesets call for only two or three frames.

Dreamweaver gives you quick access to a full array of the most common setups when youcreate a frameset document from scratch using the File ➪ New command Of course, youcan customize any of these initial frameset setups by resizing the frames or adding newframes, as described in the sections “Working with the Frameset Property Inspector” and

“Adding More Frames,” later in this chapter

To explicitly create a new frameset file, follow these steps:

1 Choose File ➪ New or press Ctrl+N (Command+N)

2 In the New Document dialog box, choose the Framesets category A list of possible

framesets appears, as shown in Figure 14-2

3 Select the desired entry from the Framesets list Selecting an entry displays a

descrip-tion of that frameset

4 Click Create to create the frameset and display it in the Document window.

Figure 14-2: In the New Document dialog box, you can choose

from many preformed framesets

Once you’ve created a new frameset, you can enter text, images, and other content in each ofthe frames, as you would for any other HTML document Alternatively, you can change indi-vidual frames to contain previously created documents by clicking in a frame and then choos-ing the File ➪ Open in Frame command As explained later in this chapter, you can also addmore frames to the frameset, resize the frames, or change other frame properties, such as thecapability to scroll

For almost all of the frame objects, Dreamweaver creates one or more frames with a set size.Although by default the set width or height is 80 pixels, you can easily resize the frame bydragging the frame border The only framesets that do not have at least one set frame are theSplit Horizontal and Split Vertical framesets, for which the two frames are divided equally.Dreamweaver also sets the Scroll option to No for frames with absolute sizes

Note New Feature

Creating a frameset visually

Another way of creating a frameset is to start with an existing document and use the mouse

to drag-and-drop the frame borders into position To create a frameset visually, using themouse, follow these steps:

1 If necessary, switch to Design view by clicking the Show Design View button on the

Document toolbar, or by choosing View ➪ Design (You can also work in Design andCode view, but these steps do not apply to Code view.)

2 Turn on the frame borders in Design view by selecting View ➪ Visual Aids ➪ FrameBorders

A 3-pixel-wide inner border appears along the edges of your Design view These bordersindicate the boundaries of your frames so you edit them easily; these borders do notappear when the frameset is viewed in a browser window See “Working with theFrameset Property Inspector,” later in this chapter, to learn how to make the bordersvisible in a browser

3 Position the cursor over any of the frame borders.

If your pointer is over a frame border, the pointer changes into a two-headed arrowwhen over an edge; it changes into a four-headed arrow (or a drag-hand on the Mac)when over a corner

4 Drag the frame border into the Document window Figure 14-3 shows a four-frame

frameset

Figure 14-3: After you’ve enabled the frame borders, you can drag out your frameset

structure with the mouse

Dreamweaver initially assigns a temporary filename and an absolute pixel value to yourHTML frameset code Both can be modified later if you wish.

With the other methods of frameset creation, you can initially create a frameset with onlytwo or three frames Although you can further split these into additional frames, the fastestway to create a frameset with four frames is by Alt+dragging (Option+dragging) the corner

of the frame border

When the frameset is selected, Dreamweaver displays a black, dotted line along all the frameborders and within every frame You can easily reposition any frameset border by clickingand dragging it If you just want to move the border, make sure you don’t press the Alt(Option) key while dragging the border; this action creates additional frames

Another method of creating a frameset by splitting the page into frames uses the menus.Open a document that you want to appear in one of the frames Then choose Modify ➪Frameset and, from the submenu, select the direction in which you would like to split theframe: left, right, up, or down Left or right splits the frame in half vertically; up or down splits

it horizontally in half The direction indicates where the content will go; for example, the SplitFrame ➪ Left command splits the page into “columns” and places the existing documentinto the left frame

Quickly creating framesets with frame objects

Dragging out your frameset in Dreamweaver is a clear-cut method of setting up the variousframes However, despite its ease, it can still be a bit of a chore to create even simple frame-sets by clicking and dragging To hasten the development workflow, Dreamweaver uses frameobjects, which can build a frameset with a single click

As previously mentioned, most of the Web sites using frames follow a simple, general pattern.Dreamweaver includes frame objects for the most common frameset configurations Theframe objects are available through the Insert ➪ Frames menu commands and through theFrames category of the Insert bar, shown in Figure 14-4 Choose one of the basic designs, andyou’re ready to tweak the frame sizes and begin filling in the content It’s a great combination:ease of use mixed with design flexibility

The frame objects are roughly organized from simplest framesets to most complex On theInsert bar, you might notice that each of the icons shows an example frameset with one bluesection The placement of the color is significant The blue indicates in which frame the cur-rent page will appear when the frameset is constructed For example, if you begin to con-struct your main content page, and then decide to turn it into a frameset with separatenavigation strip frames to the left and beneath it, you would choose the Left and NestedBottom Frame button Figure 14-5 provides a before-and-after example, first with the pre-frame content and then the same content after a Left and Nested Bottom Frame object hasbeen applied

Note Tip

Figure 14-4: The Frames category of the Insert bar holds the most commonly used

frameset configurations

The different framesets available from the Frames category of the Insert bar, and the Insert ➪Frames menu commands are as follows:

✦ Left: Inserts a blank frame to the left of the current page.

✦ Right: Inserts a blank frame to the right of the current page.

✦ Top: Inserts a blank frame above the current page.

✦ Bottom: Inserts a blank frame below the current page.

✦ Bottom and Nested Left: Makes a nested frameset with three frames; the bottom frame

spans the width of the other frames The current page is placed in the upper-rightframe

Frame tags (available only in Code view)Common frameset configurations

✦ Bottom and Nested Right: Makes a nested frameset with three frames, with the bottom

frame spanning the other frames The current page appears in the upper-left frame

✦ Left and Nested Top: Creates a nested frameset with three frames, with the left frame

spanning the height of the other frames Dreamweaver puts the current page in thelower-right frame

✦ Left and Nested Bottom: Opens a nested frameset with three frames The left frame

spans the other frames, and Dreamweaver places the current page in the upper-rightframe

✦ Right and Nested Top: Inserts a nested frameset with three frames, with the right

frame spanning the height of the other frames The current page is placed in the left frame

lower-✦ Right and Nested Bottom: Makes a nested frameset with three frames, with the right

frame spanning the other frames The current page is placed in the upper-left frame

✦ Top and Bottom: Inserts a three-frame frameset, with all frames spanning the width of

the entire window Dreamweaver places the current page in the center frame

✦ Top and Nested Left: Creates a nested frameset with three frames, with the upper

frame spanning the width of the other frames The current page is put in the lower-rightframe

✦ Top and Nested Right: Inserts a nested frameset with three frames, with the top frame

spanning the other frames Dreamweaver inserts the current page in the lower-leftframe

Using the frame object can be, quite literally, a one-click operation Just select the desiredframeset from the Frames category of the Insert bar or the Insert ➪ Frames menu, andDreamweaver automatically turns on Frame Borders, if necessary, and creates and names therequired frames For all frame objects, the existing page is moved to a frame in which thescrolling option is set at Default, and the size is relative to the rest of the frameset In otherwords, the existing page can be scrolled, and it expands to fill the content

Because Dreamweaver automatically puts the existing document in an expandable framewith scroll bars, it’s most efficient to apply a frame object to an existing page only if that page

is intended to be the primary content frame Otherwise, it’s better to select the frame objectwhile a blank page is open and then use the File ➪ Open in Frame command to load anyexisting pages into the individual frames

Adding More Frames

Regardless of how you create your initial frameset, you’re not at all limited to your initialframe choices In addition to being able to move frame borders visually, you can also set thesize through the Frameset Property inspector, as described in the next section Furthermore,you can continue to split either the entire frame or each column or row as needed — usingeither menu commands or the mouse When you divide a column or row into one or moreframes, you are actually nesting one frameset inside another

Tip

Once you’ve created the basic frame structure, you can select View ➪ Visual Aids ➪ FrameBorders again (it’s a toggle) to turn the borders off and create a more accurate preview ofyour page.

Figure 14-5: Top: Before Bottom: After Existing content is

incorporated into a new frameset when a frame object is chosen

Left and Nested Bottom button

Tip

Using the menus

To split an existing frame using the menus, position the cursor in the frame you want to alterand choose Modify ➪ Frameset ➪ Split Frame Left, Right, Up, or Down Figure 14-6 shows atwo-row frameset in which the bottom row was split into two columns and then repositioned.The Frameset Property inspector indicates that the inner frameset (2 columns, 1 row) isselected The direction in the command (Left, Right, Up, or Down) indicates the frame inwhich the existing page will be placed For example, selecting Split Frame Right places thecurrent page in the right frame

Figure 14-6: Use the Modify ➪ Frameset menu command to split an existing frame intoadditional columns or rows and create a nested frameset

You can clearly see the “nested” nature of the code in the following HTML fragment ing the frameset in Figure 14-6:

describ-<frameset rows=”80,*”>

<frame src=”ExistingTop.htm” name=”topFrame”>

<frameset rows=”*” cols=”130,614”>

<frame src=”UntitledFrame-12”>

<frame src=”ExistingLower.htm” name=”mainFrame”>

</frameset>

</frameset>

Using the mouse

Notice that when you use the menus to split a frame, only the currently selected frame issplit When you need to create additional columns or rows that span the entire Web page, usethe mouse method instead Select the specific frameset to which you want to add rows orcolumns, and then Alt+drag (Option+drag) any of the frame’s borders that span the entirepage, such as one of the outer borders Figure 14-7 shows a new row added along the bottom

of our previous frame structure

Figure 14-7: An additional frame row was added using the Alt+drag (Option+drag)

method

Selecting, Saving, and Closing Framesets

Once you’ve initially created your frameset in Dreamweaver, you should know some otherbasics before modifying the frameset or individual frames For example, it may not be obvi-ous how to select framesets or individual frames at first, but it’s easy once you know how

Before changing your framesets, you’ll also want to know how to save your changes and closethe frameset files

Selecting framesets and frames

To change or view the properties of a frameset or a specific frame, you first have to select theframeset or frame You can select either the frameset itself or one of the frames within it fromDesign view or from the Frame panel

The Frame panel shows an accurate representation of all the frames in your Web page Openthe Frame panel by choosing Window ➪ Others ➪ Frames As you can see on the right inFigure 14-8, the Frame panel displays the names, if assigned, of the individual frames, and (noname) if not Nested framesets are shown with a heavier border.

Figure 14-8: Use the Frame panel to visually select a frame to modify.

To select a frameset, click on an outside border of the frameset in the Frame panel You canalso select a frameset by clicking on any border of the frameset in Design view If you can’tsee the frame borders, choose View ➪ Invisible Elements ➪ Frame Borders

To select a specific frame, click inside the represented image of the frame in the Frame panel.For more complex Web pages, you can resize the Frame panel to get a better sense of thepage layout You can also select a frame by pressing Alt (Option+Shift) and clicking in thedesired frame in the Document window

When you are working with multiple framesets, use the Tag Selector together with the Framepanel to identify the correct nested frameset Selecting a frameset in the Tag Selector causes

it to be identified in the Frame panel with a heavy black border

Tip

Click frame name to select frameClick frame border to select frameset

Once a frame is selected, you can move from one frame to another within the same frameset

by pressing Alt (Command) and then using the right and left arrow keys You can move from anested frameset to its “parent” by using the keyboard shortcut Alt+up arrow (Command+uparrow) Likewise, you can move from a parent frameset to its “child” by pressing Alt+downarrow (Command+down arrow)

Saving framesets and frames

Remember that when you’re working with frames, you’re working with multiple HTML files

You must be careful to save not only all the individual frames that make up your Web page,but also the frameset itself

Dreamweaver makes it easy to save framesets and included frames by providing several cial commands To save a frameset, select the frameset as previously described and chooseFile ➪ Save Frameset to open the standard Save File dialog box You can also save a copy ofthe current frameset by choosing File ➪ Save Frameset As and then specifying a filename andlocation for the new copy

spe-You can save a single frame by clicking in the frame and then choosing File ➪ Save Frame

Make a copy of a document within a frame by choosing File ➪ Save Frame As and then ing a filename and location

enter-Although you can separately save each frame in the frameset, saving each frame can be achore unless you choose File ➪ Save All The first time this command is invoked,Dreamweaver cycles through each of the open frames and displays the Save File dialog box

Each subsequent time you choose File ➪ Save All, Dreamweaver automatically saves everyupdated file in the frameset

As you are saving all the files in the frameset for the first time, you will see a separate Save

As dialog box for each previously unsaved file You can tell which file you are currently saving

by looking in Design view — a dotted, black line borders the frame currently being saved

Closing framesets

There’s no real trick to closing a Dreamweaver frameset: Just choose File ➪ Close, as youwould for any other file If you have made changes to any of the frames or the frameset itselfsince the last time you’ve saved, Dreamweaver will ask if you want to save your changesbefore it closes the files When you are asked to save a file, in Design view, a dotted black bor-der appears around the frame or frameset that needs to be saved

Working with the Frameset Property Inspector

The Frameset Property inspector manages elements, such as the borders, that are common

to all the frames within a frameset It also offers more precise sizing control over individualrows and columns than you can achieve visually by dragging the borders To access theFrameset Property inspector, choose Window ➪ Properties, if the Property inspector is notalready open, and then select any of the frame borders in Design view

Tip

When a browser visits a Web page that uses frames, it displays the title found in the set HTML document for the entire frame The easiest way to set that title is to select theframeset and then enter the name directly in the Title field of the Document toolbar, if visi-ble You can also set the title by selecting the frameset and then choosing Modify ➪ PageProperties In the Page Properties dialog box, enter your choice of title in the Title text box, asyou would for any other Web page All the other options in the Page Properties dialog box —including background color and text color — apply to the <noframes> content, covered inthe section “Handling Frameless Browsers,” later in this chapter.

frame-Resizing frames in a frameset

With HTML, when you want to specify the size of a frame, you work with the row or column inwhich the frame resides Dreamweaver gives you two ways to alter a frame’s size: by draggingthe border or, for more precision, by specifying a value in the Property inspector

As shown in Figure 14-9, Dreamweaver’s Frameset Property inspector contains a Row/Columnselector to display the structure of the selected frameset For each frameset, you select thetab along the top or left side of the Row/Column selector to choose the column or row youwant to modify

Figure 14-9: In the Frameset Property inspector, you use the

Row/Column selector tabs to choose which frame you are going

to resize

The Row/Column selector shows only the rows and columns for one frameset at a time.Therefore, if your design uses nested framesets, you won’t see an exact duplicate of yourentire Web page in the Row/Column selector

Whether you need to modify just a row, a column, or both a row and a column depends onthe location of the frame:

✦ If your frame spans the width of an entire page, like the top or bottom row shown inFigure 14-7, select the corresponding tab on the left side of the Row/Column selector

✦ If your frame spans the height of an entire page, select the equivalent tab along the top

of the Row/Column selector

✦ If your frame does not span either the entire height or width, like the middle row inFigure 14-7, you need to select both its column and its row and modify the size of each

in turn

Tip

Row selector tabs

Column selector tabsSize of selected row or column

Tip