Dreamweaver MX 2004 Bible phần 6 doc

✦ To end an item in a numbered list, press Enter Return twice, or press Enter Returnand deselect the Ordered List button on the Text Property inspector.. In the expanded portion of the T

Editing ordered lists

The HTML code for an ordered list is <ol> Both <ol> and <ul> use the list item tag, <li>, tomark individual entries, and Dreamweaver handles the formatting identically:

<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.</li>

<li>Toss in 150 cubic yards of fog.</li>

is generated, and any styles in use (such as font size or name) are carried over

✦ To insert a new item within the list, put your cursor at the end of the item you want toprecede the new item, and press Enter (Return) Dreamweaver inserts a new number insequence and automatically renumbers the following numbers

✦ To rearrange a numbered list, highlight the entire list item you want to move Using the drag-and-drop method, release the mouse when your cursor is in front of the itemimmediately below the new location for the item you are moving

✦ To end an item in a numbered list, press Enter (Return) twice, or press Enter (Return)and deselect the Ordered List button on the Text Property inspector

Using other numbering styles

You can apply these different numbering styles to your numbered lists:

✦ Arabic Numerals: 1, 2, 3, and so forth (this is the default style)

✦ Roman Small: i, ii, iii, and so forth

✦ Roman Large: I, II, III, and so forth

✦ Alphabet Small: a, b, c, and so forth

✦ Alphabet Large: A, B, C, and so forth

You can restyle your entire list all at once, or you can just change a single list item To changethe style of the entire ordered list, follow these steps:

1 Position your cursor anywhere in an existing list.

2 If necessary, click the expander arrow on the Text Property inspector to display the

additional options Select the List Item button The List Properties dialog box openswith Numbered List displayed as the List Type, as shown in Figure 15-5

Figure 15-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

Dreamweaver Technique: Creating Navigation Buttons from Lists

CSS has made many innovations possible in Web design One of those innovations is stylednavigation buttons that look and act like sliced-bitmapped graphics with JavaScript rollovercapability CSS navigation bars, however, take up much less bandwidth, are instantly accessi-ble, and are far easier to modify than bitmapped graphics Although the same technique dis-cussed in this section could be applied to a series of paragraph tags, the unordered list is amore natural fit Of course, you don’t want the bulleted list to look like a bulleted list, and CSSmakes such a transformation possible with ease

Here’s an overview of the process:

1 Create background graphics for both the standard and mouse-over views.

2 Put a list of links in a <div> tag Each link serves as a separate button.

Caution

3 Build up the CSS file that combines the background graphics and the links.

4 Apply the appropriate CSS ID to the <div> tag — and let CSS do the rest.

In addition to standard rollover behavior, this technique makes it possible to style an ual list item as the current page indicator, as shown in Figure 15-6

individ-Figure 15-6: Turn a bulleted list into a

navbar with CSS and just two bandwidth images

low-Step 1: Preparing background graphics

A little bit of prep work is needed before you can begin applying CSS to your list The firststep is to use a graphics program, such as Fireworks MX 2004, to make the button images.Two separate but similar images are needed: one for the initial button look and another forthe rollover view

Here’s the process I used to create my graphic images with Fireworks:

1 In Fireworks, create a new document larger than you expect your button to be My

initial document was 300 ×200 You can, of course, create a document the same size

as your button image, but Fireworks’s Fit Canvas feature makes trimming the excesscanvas area a one-click operation

2 Using the Rectangle tool, draw an object slightly larger than the expected width and

height of a single button; my image is 150 pixels wide ×50 pixels high The image is to

be used in the background of your navigation element and should be large enough sothat it does not tile

3 Style your rectangle however you choose I used an orange solid fill (#FF9900) and

applied a Vein texture at 80% It’s a good idea to create your graphics with the dualstates in mind I’ll be able to create a darker version of my image for the rollover just

by altering the texture percentage

4 Choose Fit to Canvas to trim the excess canvas from your background image.

5 Export in either JPG or GIF format This serves as the background for my initial button

(also referred to as mouse-out), so I’ve named this image listnav_out.jpg and stored

it in my Dreamweaver site

6 Alter the graphic to represent the rollover state I simply lowered the Vein texture

set-ting to 60%, which darkens the image significantly Figure 15-7 shows a comparisonbetween the two figures

Figure 15-7: These two images were exported from the same

source file; the only difference is the texture setting

7 Export the image with an appropriate name; my second image is called

listnav_over.jpg

Be sure to save your source file so that you can easily make alterations as needed With yourimages created, you’re ready to move into Dreamweaver to create the list and encompassing

<div>tag

Step 2: Creating the list and containing <div>

Next, you create the basic HTML and text elements for the CSS navigation bar Because one ofthe elements you need is an absolutely positioned <div> tag, you can set up your CSS file andenter the first of the CSS definitions

It’s not absolutely necessary for you to create the CSS before you insert the tags, but becauseDreamweaver renders each new style as it is applied, this approach gives you a better sense

of what the CSS styles are doing

To set up the CSS file with the first of the CSS definitions, follow these steps:

1 Create a new CSS file by choosing File ➪ New and then selecting CSS from the General

category I named my file navlist.css

2 Open the HTML or dynamic page to which you want to add the navigation.

3 From the CSS Styles panel, select Attach Style Sheet; when the dialog opens, import

your previously created style sheet Click OK to close the dialog when you’re done

Next, you define the first of your CSS, which positions and gives the basic shape to thenavigation bar

4 From the CSS Styles panel, select New CSS Style.

Tip

5 In the New CSS Style dialog box, select Advanced and enter the ID for the element to

contain the list navigation I called mine #listnav You’ll recall that the opening hashmark designates an ID selector in CSS

6 Click OK to open the CSS Style Definition dialog and switch to the Position category.

7 Set these values in the Positioning category, as shown in Figure 15-8:

• Type: Absolute

• Width: 125 pixels

• Top: 50 pixels

• Left: 25 pixels

Figure 15-8: Determine where the navigation element is to

appear by setting values in the Positioning category

8 When you’re finished, click OK to close the CSS Style definition dialog The next step

combines two actions into one: inserting a <div> tag and assigning the CSS style youjust created

9 From the Layout category of the Insert bar, select Insert Div Tag.

10 In the dialog box, choose the just-defined CSS style from the ID list When you click OK

to close, your <div> is added to the page with some placeholder text Now you’reready to add your list items

11 Delete the placeholder text in the <div> and, from the Property inspector, select

Unordered List

12 Enter the text for your button labels, one button per bullet I’ve got four list items:

• Home

• Products

• Services

• About

13 Be sure to avoid placing any unnecessary paragraph returns following the list Only the

list items you want to appear as buttons should be in the <div> tag

14 Add a link to each list item by selecting the text and entering a filename in the Link field

of the Property inspector Alternatively, you can select the folder icon and then select afile from the Select File dialog

At this point, you should have a plain bullet list of links in an absolutely positioned <div> tag

on your page, as shown in Figure 15-9 Now you’re ready to start styling!

Step 3: Building the CSS styles

The definition of the CSS styles is at the heart of this technique In all, six different styles areneeded:

✦ #listnav ul: Defines the font face and size for all the list items as well as removing

the standard bullet and clearing the margin and padding

✦ #listnav li: Ensures a bottom margin is present to separate each list item.

✦ #listnav a: Extends the active area of the link to the block-level and adds a

back-ground image, width, and border

✦ #listnav a:link, #listnav a:visited: Defines the look of the text when the

but-tons are in their standard state, giving a specific color and removing the underline from the link

✦ #listnav a:hover: Swaps the background image and alters the text color in the

rollover state

✦ #sellistnav a:link, #sellistnav a:visited, #sellist a:hover: Sets the look

and feel of the selected button, indicating the current page in a navigation bar

Because I’ve already laid the foundation with a list of links inside a <div> with a defined CSS

ID, the changes are immediately evident

The process is the same for defining each CSS rule Each rule is named with the Advancedselector type chosen in the New CSS Style dialog box, which allows the user to enter any type

of selector

To get started with #listnav ul, follow these steps:

1 From the CSS Styles panel, select New CSS Style.

2 In the New CSS Style dialog box, with Selector Type set to Advanced, enter #listnav

ul in the Selector field and click OK to open the CSS Style Definition dialog.

3 Set these values in the Type category:

• Font: Verdana, Ariel, Helvetica, sans serif

• Size: 14 pixels

• Weight: Bold

4 Set this value in the Box category:

• Margin: 0 pixels (for all)

• Padding: 0 pixels (for all)

5 Set these values in the Border category:

• Style: Solid (for all)

• Width: 1 pixel (for all)

• Color: #990000 (for all)

6 Set this value in the List category:

• Type: None

7 When you’re finished, click OK to close the CSS Style definition dialog.

You should notice an immediate difference in Dreamweaver The bulleted list is already ing to look much more button-like (see Figure 15-10)

start-Figure 15-9: Making each list item a link is a major step toward converting them into

CSS buttons

Figure 15-10: After you define the #listnav ul style, the bullets disappear from the

unordered list

The next style, #listnav li, affects each list item individually Follow these steps:

1 From the CSS Styles panel, select New CSS Style.

2 In the New CSS Style dialog box, with Selector Type set to Advanced, enter #listnav

li in the Selector field and click OK to open the CSS Style Definition dialog.

3 Set this value in the Box category:

• Margin-Bottom: 2 pixelsThe Margin-Bottom value determines the distance between each of the navigation but-tons; increase the value to make the buttons farther apart

4 When you’re finished, click OK to close the CSS Style definition dialog.

Now, to build up the #listnav a style, follow these steps:

1 From the CSS Styles panel, select New CSS Style.

2 In the New CSS Style dialog box, with Selector Type set to Advanced, enter #listnav a

in the Selector field and click OK to open the CSS Style Definition dialog

3 In the Background category, click Browse and choose the exported image to represent

the mouse-out For my navigation bar, the file is listnav_out.jpg

4 Set this value in the Block category:

6 Set these values in the Border category:

• Style: Solid (for all)

• Width: 1 pixel (for all)

• Color: #CC9900 (for all)

7 When you’re finished, click OK to close the CSS Style definition dialog.

With the background image in place, the buttons are really beginning to take shape (seeFigure 15-11)

Figure 15-11: Alter the Padding-Left setting to move the text away from the left edge of

the background image

Next, to define two CSS rules at once, #listnav a:link and #listnav a:visited, followthese steps:

1 From the CSS Styles panel, select New CSS Style.

2 In the New CSS Style dialog box, with Selector Type set to Advanced, enter #listnav a:link, #listnav a:visited in the Selector field and click OK to open the CSS Style

Definition dialog

3 Set these values in the Type category:

• Color: #993300

• Decoration: noneSetting Decoration to none turns off a link’s underline

4 When you’re finished, click OK to close the CSS Style definition dialog.

Next, you want to define the #listnav a:hover style Follow these steps:

1 From the CSS Styles panel, select New CSS Style.

2 In the New CSS Style dialog box, with Selector Type set to Advanced, enter #listnav a:hover in the Selector field and click OK to open the CSS Style Definition dialog.

3 Set this value in the Type category:

• Color: #FFFFFF

4 In the Background category, click Browse and choose the exported image to represent

the mouse-out For my navigation bar, the file is listnav_over.jpg

5 Set these values in the Border category:

• Style: Solid (for all)

• Width: 1 pixel (for all)

• Color: #990000 (for all)

6 When you’re finished, click OK to close the CSS Style definition dialog.

The last style won’t appear to have any effect until you preview the page in a browser, asshown in Figure 15-12

The final style is intended to be applied to whatever link represents the current page Assuch, it’s an exact duplicate of the style just created for #listnav a:hover, which makes

it a breeze to create Follow these steps:

1 In the CSS Styles panel, right-click (Control+click) on the #listnav a:hover style and

choose Duplicate from the context menu

2 In the Duplicate CSS Styles dialog box, enter #sellistnav a:link, #sellistnav a:visited, #sellist a:hover in the Selector field.

3 When you’re finished, click OK to close the dialog.

The style you just created is really the only one that you must apply, and you take care of thatlast detail in Step 4, which follows

Figure 15-12: The #listnav a:hover style

governs the rollover appearance

Step 4: Applying the CSS

Because of the way the CSS is written — and the fact that the containing <div> tag wasassigned a CSS class from the beginning — almost all the styles are automatically applied Theonly one left is the style that makes the current link appear selected

To apply the selected link style, follow these steps:

1 Place your cursor in the list item that represents the current page For demonstration

purposes, I’ll use Home

2 In the Tag Selector, right-click (Control+click) on the <li> tag for the selected item.

From the menu that opens, choose Set ID ➪ sellistnav, as shown in Figure 15-13

Figure 15-13: Changing the ID of a list item’s link tag creates a

down state

That’s it — your unordered list is now a fully functioning navigation bar To modify any of thelabels on the buttons, just modify the text directly To add a new button, create a new listitem by adding a paragraph return after any existing list item Your new list item turns into abutton the second you add a link to it.

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 15-14 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

Figure 15-14: Definition lists are ideal for glossaries or other situations in which you

have a list of terms followed by their definitions

Definition term

Definition data

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

cate-gory of the Insert bar

2 Type the definition term and press Enter (Return) when you are finished Dreamweaver

indents the line

3 Type 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 click the Line Break button from the Insert bar to enter one ortwo <br> tags to separate paragraphs with one or two additional lines

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

A complete 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 another numbered list You can also start with one numbering style such asRoman Large, switch to another style such as Alphabet Small, and return to Roman Large tocontinue the sequence (like an outline)

Tip Tip

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 15-15 has a couple of bulleted points (or unordered listitems) inserted within it Notice how the new items are indented one level.

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

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

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, click the Indent button Alternatively, you can choose

the Text ➪ Indent command Dreamweaver indents the selected text and creates a rate list in the HTML code with the original list’s properties

sepa-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

Note

Outdent buttonIndent button

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

in preceding sections

You can unnest your list and reverse the effects of the Indent button by clicking 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 see why one list contained inside another list is considered to be nested, 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>

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 as unordered lists You can useCascading Style Sheets to restyle these built-in tags for use in 4.0 and later browsers.Both the <menu> and <dir> tags are deprecated in HTML 4.0 Because most browsers for-mat these lists like unordered lists, you should typically just use ordered lists instead of either

of these list types Ordered lists are supported in both older browsers and will continue to besupported for the foreseeable future

Note Caution Caution

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, click 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 15-16

Figure 15-16: Making a menu list.

4 Click OK.

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, click the List Item button.

3 In the List Properties dialog box, from the List Type drop-down list (refer to Figure

15-16) choose Directory List

4 Click OK.

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

Keep these points about lists in mind:

✦ 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 uppercase or lowercase letters.

✦ CSS styles can significantly adjust the look and feel of your lists, both unordered andordered, even to the point of converting them into a navigation bar

✦ 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 these special listsare rendered in a similar fashion, but they can be adapted through style sheets forextensive use

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 If you want severalseparate areas of a picture — not just the overall graphic — to behyperlinked, you need an image map

Dreamweaver puts its image map tools front and center so thatyou can draw and manage hotspots right on your graphics in theDocument window The onscreen image map tools make it much eas-ier to manipulate your hotspots, but they have another major advan-tage: You can attach behaviors to hotspots very easily

This chapter introduces you to Dreamweaver’s hotspot tools and alsocovers more advanced techniques for creating server-side and rolloverimage 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 the user

to be able to click each state in order to visit a different page in yoursite How would you proceed? With the exception of Colorado andWyoming, all the states have highly irregular shapes, so you can’t usethe typical side-by-side arrangement of rectangular images Instead,you specify a region on the graphic to which you can assign a link

This is exactly how an image map performs

Making a server-sideimage map

DreamweaverTechnique: Creatingimage map rollovers

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 the server 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, the server loads the correspondinglink The key advantage to a server-side image map is that it works with any image-capablebrowser The disadvantages are that it consumes more of the server’s processing resourcesand it tends to be slower than the client-side version

Client-side image maps, on the other hand, keep all the data that is downloaded to the

browser in the Web page The comparison process is the same, but it requires a browser that

is image map savvy Originally, only server-side image maps were possible, but client-sideimage maps have been widely supported for several years The vast majority of image mapsused on the Web today are client-side, and you should consider using server-side image mapsonly 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 intoyour Web page, it can be an image map Select any image and open the expanded version ofthe Image Property inspector The image map tools are in the lower-left corner, as shown inFigure 16-1

If you’re working with XHTML pages, you should be aware that image maps are not ported under that document type

sup-Caution

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

hotspots directly on graphics within Dreamweaver

Creating Image Hotspots

Image maps are created with tools similar to those in any drawing program After you select agraphic, you can click a tool to describe a rectangle, oval, or polygon shape

You can also create image maps in Fireworks and bring them into Dreamweaver along withthe image In Fireworks, draw hotspots on your graphic using the Hotspot drawing tools orselect a graphic element and choose Edit ➪ Insert ➪ Hotspot After your graphic is complete,export the file as HTML and Images from Fireworks and use the Dreamweaver commandInsert ➪ Image Objects ➪ Fireworks HTML to add it to your Web page

Tip

Pointer Hotspot toolImage Map EditorImage map name field

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

or PNG Dreamweaver provides all the tools you need in an area on the Image Propertyinspector Collectively, these tools are known as the Image Map Editor Follow these steps tocreate 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 like Map1.

3 Choose the appropriate drawing tool to outline your hotspot: rectangle, circle, or

poly-gon Outline one hotspot, as described in the section “Using the drawing tools,” later inthis chapter After you complete the hotspot, Dreamweaver displays the HotspotProperty inspector, shown in Figure 16-2

Figure 16-2: Enter image map attributes through the Hotspot Property inspector.

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 want 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 17 To learn more about targeting anew browser window, see Chapter 10

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

when the user’s mouse moves over the area In Windows, the information taken fromthe Alt text box appears as a ToolTip only in Microsoft browsers Another attribute,title, is used in Netscape browsers Dreamweaver automatically adds the altattribute, but you must manually add the title attribute to achieve cross-browsercompatibility

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

Cross-Reference

Tip

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

pro-To use the Rectangular Hotspot drawing tool to outline a hotspot as a rectangle, follow thesesteps:

1 Click the image in the Document window and select the Rectangular Hotspot tool from

the Image Map Editor in 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 Image Property inspector.

To use the Oval Hotspot tool to define a round Hotspot, follow these steps:

1 Select the Oval Hotspot tool from the Image Map Editor in 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 Fill in the Link, Target, and Alt text boxes.

To use the Polygon Hotspot tool to define an irregularly shaped hotspot, follow these steps:

1 Select the Polygon Hotspot tool from the Image Map Editor in the Image Property

inspector

2 Click the first point for the 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 16-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 other definedareas (the circular and rectangular objects) are shown with light blue overlays around them

Caution

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

shaped areas

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, browsers supported a default URL property

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 (for example, entering a URL in the Link field ofthe Image Property inspector) does not work; you must define a separate rectangular hotspot asdescribed in the section “Using the drawing tools.”

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 Web

address — just above the closing </map> tag Remember, however, that this solution only works

in Netscape browsers

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 thenchoose Visual Aids ➪ Image Maps.

Modifying an image map

When you draw the hotspots on your image map initially, you need not size or position themexactly Dreamweaver gives you several options for modifying the image maps you create Youcan move any previously defined area by selecting it and then clicking and dragging to a newlocation For precise pixel-by-pixel movement, select the area and use the keyboard arrowkeys to move it in any direction

Each hotspot has a number of control points that you can use to resize or reshape it To moveany of the control points, select the Pointer Hotspot tool on the Image Property inspector

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 by choosing Modify ➪ Align:

✦ Left: Aligns selected hotspots to the left edge of the selection

✦ Right: Aligns selected hotspots to the right edge of the selection

✦ Top: Aligns selected hotspots to the top edge of the selection

✦ Bottom: Aligns selected hotspots to the bottom edge of the selection

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

hotspot You cannot resize polygon hotspots using this command, although you canchange rectangular or oval hotspots to match the polygon width if you last selected apolygon hotspot

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

hotspot As with the Make Same Width command, you cannot resize polygon hotspotsusing this command Likewise, you can change rectangular or oval hotspots to matchthe polygon height if a polygon hotspot is selected last

Although Dreamweaver lists keyboard shortcuts for all the alignment options underModify ➪ Align, these apply only to layers You must use the menus (either the Modify menu

or the Context menu) to align hotspots

Caution Tip

If your hotspots overlap, you can change the depth of any hotspot so that the desired hotspot

is on top and has the focus in a particular area Select the hotspot, choose Modify ➪ Arrange,and then choose one of these commands:

✦ 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 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 by people with voice-controlled browsers or who do not have access to a mouse

Adapting the server script

You can examine the differences between a client-side image map and a server-side imagemap using 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>

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

Note

A server expects the information in the following form:

shape URL coordinatesTherefore, you remove the <area> tag and its delimiters, as well as the phrases shape=,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 rectly The format depends on the shape being defined:

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

space 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 between each pair — just as you do with 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 aboutwhere to put 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 the nection between the Web page and the map file A client-side image map link directly calls theURL associated with it In contrast, all references from a server-side link call the map file —which, in turn, calls the specified URL

con-You add the connection to a server-side map as you would add any link to a graphic con-Youcan, 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 so 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 the user moves the mouse over a button or graphic in the page and, as a result, the ton or graphic changes in some way You learned how to create these graphic rollovers inChapter 9 In this section, you try out one method for applying the same technique to animage map

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

Keep in mind that this technique — because it uses layers — works only with 4.0 and laterbrowsers

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 than separategraphics, you need a total of only two images (versus two for every button) In this example,three buttons are sliced from one graphic; but there might very easily be eight or a dozenseparate buttons, which require 16 or 24 separate images All you 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 16-4 shows an example of thetwo images you need, inserted into Dreamweaver As you can see, all that is necessary tomake the over image is to add a glow effect to each of the three hotspots

Cross-Reference

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 a behavior from the list, and enter its parameters After you’ve con-firmed 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, youcopy all the associated behaviors as well as the image map

Figure 16-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,visibility, and clipping The idea is to display just a portion of a hidden layer during anonMouseOverevent To perform this function without rewriting the code, a layer for each

of the hotspots is necessary Each layer is later clipped to show just that hotspot Thebeauty of this technique is that although it uses multiple layers, only two images arerequired because the single over image is used for each rollover

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

1 Choose Insert ➪ Layout Objects ➪ Layer or select the Draw Layer button from the

Layout category of the Insert bar to create the layer that holds the image displayedwhen the mouse is over the graphic I gave my layer 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

from the Common category of the Insert bar Load your over graphic If the layer issmaller than the image, the layer automatically expands

3 Create a second layer to 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 ➪ Layers or pressing F2, and

make sure the following criteria are met:

• 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 16-5 shows how the screen looks with both layers in place and the visibility propertiesset correctly

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

is hidden

After you create the initial layers, create a layer for each remaining hotspot I name these ers sequentially, such as overLayer2 and overLayer3, and then insert the over graphic ineach of these layers Finally, all the overLayers should be in the same position as, but on top

lay-of, the offLayer and hidden layer Basically you have a stack of identical overLayers on top

of the offLayer

If you have many hotspots, you may want to name the overLayers something more ognizable For example, with my three shapes, I could name the layers overLayer_star,overLayer_nest, and overLayer_clapboard You must be able to match the layers tothe hotspot as part of the technique A proper naming scheme can smooth your workflow

rec-Step 3: Make the image map

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

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 Image 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 stop However, because you’re using multiple layers, you mustapply the same image map to each of the remaining layers You don’t redraw thehotspots, but you do assign the same map name to each copy of the image, asdescribed 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 this step, the off and overimages appear to flicker

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

2 Choose Modify ➪ Align, and then choose two of the options — Left and Top, for example —

so that the layers are in the same position The layer alignment commands all work thesame; all layers are aligned to the edge of the last layer selected

If the layers are different shapes, you can make them the same size by choosing Modify ➪Align ➪ Make Same Width and/or by choosing 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 choosing Window ➪ Behaviors.

4 In the Behaviors panel, click the Add (+) button and then click Show Events For ➪

4.0 and 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 16-6) Click OK when you’ve finished

but-Figure 16-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 whenthe pointer 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 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 Objects ➪ Layer This new layer is a temporary one that is used

for measurement purposes only and 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 16-7

7 In the Layer 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 Layer 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 between (for

example, 20px) If you enter just the number, the clipping may not be displayed properly ineither Netscape Navigator or Internet Explorer

Caution

Figure 16-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

values

11 For the Clip Bottom (B) value, enter the sum of the temporary layer’s Top and Height

values For example, the temporary layer’s initial values were as follows: Left, 95; Top,20; Width, 145; and Height, 140 This translates into the following clip values: Left, 95px;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 finished.

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

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

Note

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

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 create 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-Be aware that the use of frames is controversial Designers who areopposed to their use give a number of reasons One argument is thatdealing with frames often confuses users, especially as they navigatethrough a site Another reason cited by designers is that searchengines have difficulty indexing a frame-based site Nonetheless,frames are valid HTML, and Dreamweaver does support their use

Although the technology enables 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 to defin-ing the unique look of frames through borders, scroll bars, and margins

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

Frames and Framesets: The Basics

It’s best to think of frames in two major parts: the frameset and the frames The frameset is theHTML document that defines the framing structure — the number of individual frames thatmake up a page, their initial size, and the attributes shared among all the frames A frameset isnever displayed by itself Frames, on the other hand, are complete HTML documents that can

be viewed and edited separately or together in the organization described by the frameset

A frameset takes the place of the <body> tags that contain the content of a Web page in anHTML document 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 on the Frames menu of the Insert bar’s HTML category Add a

<frame>tag in Code view by clicking the Frame button on the Insert bar Of course,Dreamweaver gives you other ways to create framesets in Design view; see the section

“Creating a Frameset and Frames” 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 indicates the number of either columns or rows, and the values themselves establish the size of the 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 existwith 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 is always a constant size — making it perfect for a set ofnavigational buttons — whereas 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

The Insert bar contains two Frames menus — each with different options The Frames menufound in the Layout category is intended to be used in Design view, whereas the one in theHTML category is meant to be used in Code view

Creating a new frameset file

Most of the framesets employed on the Web today use two or three frames, albeit in differentconfigurations For example, a common setup is to have one narrow frame spanning the top

of the page to hold a banner and some site navigation, a lower-left frame to hold a table ofcontents or additional navigation, and a large lower-right frame to hold the content of the site(see Figure 17-1)

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, you cancustomize any of these initial frameset setups by resizing the frames or adding new frames, asdescribed in the sections “Working with the Frameset Property Inspector” and “Adding MoreFrames,” 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 17-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.

Note

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

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

from many pre-formed framesets