HTML in 10 Steps or Less- P24 ppsx

In the lower half of the Properties inspector, click on the map shape that works for the area you want to turn into an image map see Figure 204-2.. • To help visitors decide which hotspo

Creating Image Maps

An image map is a group of hotspots — geometric shapes drawn on top of an

image that you associate with specific URLs or files This turns the area into

a hyperlink

1. Click once on the image you want to turn into an image map

Handles appear around it and the Properties inspector shows image-related tools (see Figure 204-1)

Figure 204-1: Selecting an image in Dreamweaver

2. In the lower half of the Properties inspector, click on the map shape that works for the area you want to turn into an image map (see Figure 204-2)

Figure 204-2: The image map tools

3. As soon as you draw the map area, the Properties inspector changes its features (see Figure 204-3) Click in the Link box and type the URL or path to the file the image map area should link to

4. Make a target choice for your link: _blank, _self, _parent, or _top

5. Repeat Steps 2 through 4 for each area you want to include in the image map

note

• The “_blank” target makes

the linked page open in a

new browser window;

“_self” opens the link

within the existing

window, replacing the

current content; “_parent”

opens the linked window

in the parent frameset

(only applicable if you

use frames); and “_top”

replaces the frameset

itself If you’re not using

frames, “_blank” and

“_self” are your only

options, but “_blank” is

preferable because it

doesn’t let the visitor

entirely leave your site.

caution

• Although you can link as

many areas of an image

map as you want, don’t

cram in too many links.

Keep enough space

between hotspots so that

visitors aren’t confused

when they click somewhere

on the image map.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• To help visitors decide which hotspot to click, enter something in the Alt text box in the Properties inspector so that text appears when users mouse over the hotspot Bear in mind, however, that Alt text

on hotspots is not univer-sally supported in all browsers or versions thereof As good design dictates, always test your pages in more than one browser.

Figure 204-3: Setting the link details for a specific image map area

6. When your image map is complete, press F12 to preview your page

in a browser View the links that have been placed in the image map (see Figure 204-4)

cross-reference

• Learn to set up hotspots in FrontPage — see Part 16.

Creating Image Rollovers

Arollover consists of two images that occupy the same space on your Web page One image replaces the other when the mouse pointer hovers over it Rollovers are most useful for images because the image’s change in appearance draws attention to the link A rollover can also provide instructions (such as

“Click Here!”)

1. In Design view click to position the cursor where the image rollover should appear

2. Choose Insert ➪ Interactive Images ➪ Rollover Image to open the Insert Rollover Image dialog box (see Figure 205-1)

Figure 205-1: The Insert Rollover Image dialog box gives you all the options you need

to set up your rollover

3. Give the rollover a name in the Image Name text box The name helps you find the code pertaining to the rollover in Code view

4. Type the name of the file you want to use for the original image, or click the Browse button to find the file manually

5. Choose the rollover image — the image that appears when someone’s mouse rolls over the original image

6. Type any desired alternate text, such as instructions for following the link, a description of what happens when the link is clicked, or text that serves as a caption for the image that appears

7. In the When Clicked Go to URL text box, type or browse to the URL that the interactive image should link to

note

• Naming the rollover helps

you spot the code that

refers to it when you edit or

view your HTML code.

cautions

• Before posting any page to

the Web that contains

inter-active images, preview it in

a browser to make sure the

images appear in the right

order and the link works.

• Too much button

interactiv-ity is not always a good

thing Don’t overwhelm your

audience by placing too

many confusing rollovers on

your site.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• Preparation is key here Don’t wing it and pick your two images at the last minute Both images must have the exact same dimensions Save both files

in the Images folder of your site so they’re readily avail-able Make sure you know which two images to use, and in what order to use them After you’ve done all this, you’re ready to create the rollover.

• People who have graphics turned off in their browser,

or who have slow, dial-up connections like Alternate text because when they mouse over a spot where a graphic should or will be, they get some information — preferably something that indicates what happens if they click the spot where the missing or not-yet-loaded image belongs Suggestions for alternate text include "Click here for [blank]" (where blank is what they'll see after click-ing), or "To find out more about [blank], click here."

8. Click OK to create the rollover The image appears to have shading

over it when it first appears in Dreamweaver (see Figure 205-2) This indicates that more than one image is occupying the space

Figure 205-2: The original image appears and shading indicates that another image associated with the same spot appears on the page

cross-reference

• Image links can be set up

in any text editor, including BBEdit Find out more in Part 13.

Building Navigation Bars

Anavigation bar can be very convenient, and depending on your page design, may be essential for providing a consistent list of links to pages within a site Visitors like “nav bars” because they appear the same on every page (if they’re designed correctly) and designers like them because Dreamweaver makes them easy to build

1. Click to position the cursor where the navigation bar should appear You should be in Design view (or the Design portion of the Code & Design view)

2. Choose Insert ➪ Interactive Images ➪ Navigation Bar to open the Insert Navigation Bar dialog box (see Figure 206-1)

Figure 206-1: Adding several images to a navigation bar, each pointing to a different page in your site

3. Replace the “unnamed1” text in the Element Name text box with the name you want to give the first image in the navigation bar

4. Click the plus-sign button above the Nav Bar Elements box This moves the named element into the list of elements

5. Click the Up Image text box and click the Browse button to select the image you want to appear when there’s no mouse pointer hover-ing over the first element of the navigation bar

6. Click in the When Clicked Go to URL text box and type the URL of (or browse to) the page that should appear when the first element in the navigation bar is clicked

notes

• If you like designing things

from scratch and don’t like

automatic tools like this

one, create a table for your

nav bar with as many cells

across as you want buttons

to appear Place static

images (as links) in each

cell You can also set up

rollovers in each cell for

more interactivity As long

as you keep the cell widths

and heights the same

(for a uniform look), the

nav bar will look

well-constructed Copy and

paste the table to any page

you want, creating a

con-sistent navigation tool

throughout your site.

• You can choose images for

the Over, Down, and Over

While Down states of the

navigation bar element but

you don’t have to use each

one If you want the

navigation bar to work like

a series of rollovers, choose

an Over image so that when

you mouse over the

ele-ments on the bar, the

images change The others

aren’t as useful and take

more time to set up.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• To place the same bar on all the pages in your site, copy and paste it on all pages Adjust the links on

a per-page basis using the Properties inspector, if nec-essary, to work with individ-ual elements of the bar.

• The direction you choose for your bar (horizontal or vertical) should be dictated

by the rest of your page and its overall layout.

7. Choose the direction that the navigation bar should run:

Horizontally (the default) or Vertically You can also leave the Use Tables option clicked at the bottom of the dialog box so that the bar

is placed in a table

8. Repeat Steps 3 through 7 for each element in the navigation bar

9. Click OK to create the bar (see Figure 206-2)

Figure 206-2: A navigation bar blending in with the rest of the page and running vertically, creating a graphical table of contents along the left side of the page

cross-reference

• You can create a navigation bar in FrontPage, too Find out how in Part 16.

Creating Tables

Tables are one of the most powerful tools available to a Web designer They enable you to structure your pages with considerable precision — placing text and graphics side by side, controlling the space taken up by text or graphics, and creating navigation bars and product listings Their uses are nearly unlimited Dreamweaver makes it easy to build them (As you discover in Task 208, Dreamweaver also makes it easy to change and customize them after they’re built.)

1. In Design view click to position your cursor, placing it where the table should start This can be on a page, inside a frame, within a layer, or inside an existing table

2. Click the Insert Table button on the common toolbar to open the Insert Table dialog box (see Figure 207-1)

Figure 207-1: Defining the table you want to create in Dreamweaver

3. Enter the number of rows you want in your table

4. Enter the number of columns you want in your table

5. Enter any cell padding or cell spacing you think your table needs

6. Enter the width of the table — a percentage of the page width or an exact pixel width (The default is 75 percent of the page.)

7. If you want a border on your table, click in the Border cell and enter the pixel width of that border

8. Click OK to create the table A new empty table appears (see Figure 207-2)

notes

• Tables inside other tables

are called nested tables.

Tools for creating and

editing tables are identical

whether you’re dealing with

a table on its own, a table

inside another table, or a

table that houses another

table inside it.

• The numbers you enter are

interpreted as pixels, so a

cell padding of 3 adds

three 3 pixels to the inside

of each cell, keeping the

cell content 3 pixels away

from the cell walls.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• Cell spacing is helpful if you nest tables In the nested table (the one inside a larger table) create

a small amount of cell spacing and apply a back-ground color to the main table The color shows through the nested table’s spacing, creating a nice border whose width equals the spacing Of course, you need to apply a back-ground color to the nested table’s cells so you won’t see the main table’s back-ground color through them.

• The Insert Table button is fourth from the left, and looks like a small grid You can also choose Insert ➪ Table or press Ctrl+Alt+T.

• If you create a table and realize you need four rows instead of three, just click

in the rightmost cell in the last row and press Tab to insert a whole new row.

Figure 207-2: Table as a grid that can house any text or graphics you want to place within its cells

cross-reference

• Creating a table in HTML is also covered in Part 6.

Modifying an Existing Table

You can easily resize tables, change the background color, and adjust cell padding and spacing You can also nest a table inside another one for further structural control over the placement of text, graphics, and graphical use of col-ored backgrounds and borders

1. To access tools for changing the appearance and placement of your table, point to any edge of the table When your mouse turns into a four-headed arrow (see Figure 208-1), click it

Figure 208-1: The mouse pointer as a four-headed arrow to indicate that table editing

is possible

2. In the Properties inspector, change the number of cells in your table

by changing values in the Rows and Cols fields

3. Alter the W (width) and H (height) fields to change the size of the table itself

Four-headed arrow

note

• You can enter a name for

the table in the Table ID

text box This helps you

spot references to the

table in HTML code easily.

caution

• While it’s easy to resize a

table by dragging its

bor-ders, it’s not advisable to

do this from a coding

standpoint When you drag

a cell’s walls to make it

bigger or smaller, code is

created that can conflict

the attributes set through

the Properties inspector To

adjust a cell’s width and

height, click inside a cell

and use the W and H fields

in the Cell section of the

Properties inspector to

specify a cell size.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• If you simply click in one

of the table’s cells, the Properties inspector offers the standard text-formatting tools You can, however, adjust the background (“Bg”) color of the selected cell and align text and graphics within the cell containing the cursor.

• The % and Pixels options (to the right of W and H) allow you to choose how table dimensions are inter-preted If you choose %, the W or H setting is con-sidered a percentage of the page (its width or height) If you choose Pixels, you express the table’s size in direct measurements.

• The Default alignment option is confusing.

“Default” means no align attribute is set but it’s really the same as Left because when no align-ment attribute is set for virtually any page element, the element lines up on the left side of the page.

4. Use the array of six buttons (see Figure 208-2) to make changes to

the table’s size and relationship to the page — using the first two but-tons, you can clear the row heights and column widths to size the table to its contents, ignoring any previously-set dimensions

Figure 208-2: Tidying your table’s dimensions to eliminate wasted space

5. Adjust the CellPad and CellSpace settings (entered in pixels)

6. Choose a new background color (Bg Color) for the table or apply a

background image (Bg Image) to the table

7. Apply a border (set the pixel depth in the Border field) and choose a

color (Brdr Color)

8. Align your table relative to the page using the Align list box Your

choices are Left, Center, or Right, or Default

Convert Table Width to Percent

Convert Table Height to Percent

Convert Table Width to Pixels Convert Table Height to Pixels

Clear Row Heights Clear Column Widths

cross-reference

• Learn about FrontPage’s tools for customizing a table through its Table Properties dialog box This

is covered in Part 16.

Creating Forms

Forms allow visitors to interact with your Web page through form objects: text boxes, drop lists, radio buttons, and check boxes Using these form objects, you can gather information for an online database Creating a form requires first inserting one and then populating it with form objects You can use a table to control form object placement as long as the table is within the form itself

1. To insert a form on your page, click in Design view to place your cur-sor where the form should appear Select Insert ➪ Form to open a box with a red dashed border

2. As desired, insert a table into the form box

3. Begin populating the form with form objects To insert a form object, choose Insert ➪ Form Objects

4. Continue adding objects to your form For each one, use the Properties inspector to establish the object’s settings Figure 209-1 shows the Properties inspector options for a List/Menu

Figure 209-1: Customize individual form objects to help visitors make appropriate selections in a form

5. When you complete the form, click its border to select the entire form The Properties inspector changes to offer tools for establishing how the form itself works (see Figure 209-2)

Figure 209-2: Add code to run the form with which visitors interact

List Values

Choose number of values visible at one time

Allows visitors to make multiple selections Choose default List Value

notes

• POST and GET determine

how information is passed

to your database and what

feedback, if any, returns to

the visitor using the form.

POST is preferred because

it’s more secure, especially

when confidential

informa-tion is sent.

• Enctype refers to an

encod-ing type used to send data

to a server.

caution

• Don’t forget to include

Submit and Reset buttons

(found in the list of Form

Objects) on your form;

otherwise, visitors won’t be

able to send form data to

your database.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.