HTML in 10 Steps or Less- P27 pot

To change the style of the line or arrow, click the line or arrow you drew handles appear at both ends of the line/arrow, and use the Line Style or Arrow Style buttons to choose a thickn

Drawing and Formatting Shapes and Lines

Your graphical options don’t end with clip art and photos FrontPage allows you to draw shapes and lines using the Drawing toolbar found in all Microsoft Office applications Apply colored fills and outlines to your shapes and use vari-ous options for creating dotted and dashed lines, with or without arrowheads

1. Display the Drawing toolbar by right-clicking the currently displayed toolbar and choosing Drawing from the submenu

2. Using the Drawing toolbar, click the AutoShapes button and choose

a shape category (see Figure 233-1)

Figure 233-1: Choosing from five shape categories

3. From the shape category, such as Block Arrows, select a shape to draw (see Figure 233-2)

4. Move your mouse to the spot where you want to draw and then click and drag to draw the selected shape

notes

• The palette displayed offers

colors that match any

theme that’s currently

applied to your Web pages.

You can also access a full

palette of hundreds of

Web-safe colors.

• Resize a shape or line by

selecting it and then

drag-ging the handles — side or

corner handles on shapes,

endpoint handles on lines

and arrows — to make the

shape bigger or smaller, or

the line/arrow longer or

shorter Change the angle

of a line by dragging one of

the endpoints up or down.

Task 233

• the starting point — the

far-ther you drag, the bigger the shape is By controlling the angle of the drag, you can control the proportions

of the image — the relative width and height.

• Constrain the angle of the line (or arrow) to 45-degree angles by holding down the Shift key as you draw the line.

5. Change the fill color or outline color of your drawn shape using the

Fill Color and Line Color buttons on the Drawing toolbar

6. To draw a line or arrow, click the Line or Arrow tool and draw a

straight line/arrow in any direction

7. To change the style of the line or arrow, click the line or arrow you

drew (handles appear at both ends of the line/arrow), and use the Line Style or Arrow Style buttons to choose a thickness, apply dots and dashes, or choose from a variety of arrowheads Figure 233-3 shows the Arrow Style option

Figure 233-3: Customizing your arrow or line

cross-reference

• You can achieve the look

of colored rectangles with table cells that have colored backgrounds (see Task 48).

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

Adding Flash Content to Web Pages

Moving pictures catch the eye and capture the attention of your site’s visitors

To add movies in the form of Macromedia Flash files, all you need to do is insert the object and preview the page in a browser to see the movie play as it would online It couldn’t be easier

1. In Page view click the Design button to make sure you’re in that view

2. Click to position your cursor where the Flash content should appear

on the page

3. Choose Insert ➪ Picture ➪ Flash (see Figure 234-1)

Figure 234-1: Selecting the Flash command

4. Using the Select Flash File dialog box (see Figure 234-2), navigate to the file you wish to insert

5. When you find the file you want to insert, double-click it or select the filename and click the Insert button

Task 234

caution

• Don’t go crazy inserting lots

of moving objects in your

Web pages — Flash movies,

animated GIFs, etc Too

much motion is distracting

and gives your site a

circus-like feeling Unless you are

designing the Web site of a

circus, keep animations to

a minimum.

• Inserting multimedia in HTML is covered in Part 4.

Figure 234-2: Look for the right SWF file to insert into your Web page

6. With the Flash object on your Web page, click the Preview button to

see the page in a browser window View the Flash movie to make sure

it works properly (see Figure 234-3)

Figure 234-3: Watching the Flash movie run in a browser window through Preview mode

• you’re in Code view, it’s

more difficult to choose the spot where the movie should appear FrontPage

is designed to be used in a graphical way — working with its WYSIWYG features more so than the tools that show and allow you to edit HTML code.

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

Creating WordArt Images

Because FrontPage is part of the Microsoft Office suite, you get the benefit of some of the features in other Office components, such as WordArt Adding WordArt on a Web page does add a lot of FrontPage-specific code to your other-wise HTML, but for sites that are viewed primarily through Microsoft Internet Explorer, the ability to easily create graphic text can be a creative, convenient addition to your Web page

1. In Page view, be sure your Drawing toolbar is displayed by choosing View ➪ Toolbars ➪ Drawing

2. Click to position your cursor where the WordArt will go

3. Click the WordArt button on the Drawing toolbar The WordArt Gallery opens (see Figure 235-1)

Figure 235-1: Pick from 30 different WordArt styles

4. Double-click the style you want to work with, or select it and click

OK The Edit WordArt Text dialog box opens (see Figure 235-2)

note

• You can rotate a WordArt

object (or any graphic

ele-ment added through the

Drawing toolbar) by

drag-ging the Rotation handle

(the little green circle

appended to the object’s

top center handle)

either clockwise or

counter-clockwise.

Task 235

caution

• When choosing a WordArt

style, pick one that doesn’t

clash with or blend too

much into your page

back-ground This is especially

important if you employ

a theme.

• aspect ratio (proportions)

by holding down the Shift key while you drag a corner handle Be sure to release the mouse before you release the Shift key to maintain the proportions.

Figure 235-2: Replacing the sample text with your own

5. Type the text you want to render in the selected WordArt style After

you type your text, click OK

6. When your WordArt object appears on the page (see Figure 235-3),

drag it to reposition it or resize it by dragging its handles

Figure 235-3: Using your mouse to position and resize your WordArt object

cross-reference

• Sizing graphic objects in HTML is discussed in Part 3.

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

Adding Navigation Bars

Based on the theme you apply to your Web page (or the entire site), you can add navigation bars to help visitors move through your site, navigate from the home page to the subpages and back again You can also add buttons and other types of links for navigating to external pages or sites, but that’s covered in the next task – for now, we’ll be creating navigation tools for moving around within our own site

1. In Page view of the home page, click to position your cursor where you want the navigation bar to appear

2. Choose Insert ➪ Navigation to open the Insert Web Component dialog box (see Figure 236-1)

Figure 236-1: A list of all Web components, from counters to search boxes

3. If it’s not already selected, choose Link Bars from the list of compo-nent types

4. On the right side of the dialog box click Bar Based on Navigation Structure

5. Click Next

6. In the Choose a Bar Style version of the Insert Web Component dialog box, click Next to confirm that the link bar you’re creating should adhere to the current theme

7. In the next box, click to choose either vertical or horizontal orienta-tion for your link bar (see Figure 236-2)

8. Click Finish The Link Bar Properties dialog box opens (see Figure 236-3), allowing you to choose which pages to include in the link bar you’re creating

9. Click OK to create the finished navigation bar (see Figure 236-4)

note

• When you add a link bar

to subpages, be sure to

include a Home Page link

by clicking that option in

the Link Bar Properties

dialog box.

Task 236

caution

• Ignore the displayed theme

in the Choose a Bar Style

box It won’t look like your

current theme and will only

confuse you.

• page and then repeat the

following steps for each page in your site.

• Let FrontPage do as much work for you as possible.

By basing the link bar on your site’s structure, links between pages are set

up automatically When you rearrange pages later

in Navigation view, the links will update automatically.

• When adding a link bar

to the home page, select Child Level from the list of hyperlinks to add, but do not click the Home Page option on the right.

Figure 236-2: Choosing the direction (up and down or across) that your link bar should run on the page

Figure 236-3: Establishing your link bar properties

Figure 236-4: A vertical strip of buttons, one for each page in the site, appears on the home page

cross-reference

• When creating naviga-tional tools in HTML, you have to insert a series of text or image links Read about how to do this in Part 5.

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

Inserting and Aligning Page Banners

Apage banner is really just a page title, and is normally the same text that appears on a browser’s title bar while the page in question is displayed The graphic page banner is more visually dynamic than the title bar, however, and people are more likely to notice it While the term “banner” reminds people of advertising banners — which, of course, you can also create with this feature, for our purposes, you will simply insert a banner to inform visitors what the name

of the page is

1. In Page view, click the Design button to make sure you can see the entire Web page

2. Click to place your cursor at the top of the page, on the left side

3. Choose Insert ➪ Page Banner to open the Page Banner Properties dialog box (see Figure 237-1)

Figure 237-1: Confirming your page banner properties

4. Choose whether the banner will be a picture or text, and type the text that should appear in the banner itself

note

• Page banners are helpful to

site visitors They let them

know what sort of

informa-tion they can find on a

given page For

consis-tency’s sake, if you put a

banner on one page, put it

on all other pages, too.

Task 237

• rates graphics from your

selected theme, such as patterns from your back-ground image, graphics from the buttons, and navi-gation tools that are part of the theme’s defaults A text banner is just that — text — that adheres to the theme’s font and font color only.

• Keep the alignment of ele-ments consistent through-out the Web site If most

of your text and graphical content is left-aligned, you may want your banner to

be left-aligned as well On the other hand, if you have

a centered navigation bar across the top of the page and then put a banner above it, the banner should probably be centered as well.

Figure 237-2: A picture banner across the top of the page

6. To change the alignment of your banner, click on the banner to select

it, and then use the Alignment buttons (Left, Center, or Right) on the Formatting toolbar

7. If you change your page theme, the page banner’s design will change,

too To see how various themes will affect your banner, choose Format ➪ Theme, and view the task pane You can click on individual themes and see how they’ll look on your page or pages

cross-reference

• You can create a page banner in HTML, using

<font> tag attributes to control the size, font, and color of text across the top

of a page (see Part 2).

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

Creating Interactive Buttons

The term “interactive” means that when your visitor performs an action, some-thing happens FrontPage allows you to insert interactive buttons that per-form a number of tasks — from linking to another Web site to playing a song These buttons come in a variety of preset styles, and you can customize the text that appears on the button face

1. Working in Page view, click to position your cursor where you want the new interactive button to appear

2. Choose Insert ➪ Interactive Button to open the Interactive Buttons dialog box (see Figure 238-1)

Figure 238-1: Choose a button style and type your button face text

3. After the dialog box appears, scroll through the Buttons list and choose the button you’d like to use As you click on individual items

in the list, a preview appears at the top of the dialog box

4. Type the text into the Text box that should appear on the button face The preview updates to show your text on the selected button

5. To establish the file, page, or site to which the button links, click in the Link box and type the path or URL, or click the Browse button

to locate the file, page, or site manually

6. Click the Text tab in the Interactive Buttons dialog box (see Figure 238-2) to make any required adjustments to the font, size, and color

of the text in your button

7. Click the Image tab (see Figure 238-3) to increase the button width and height

caution

• If you create a series of

interactive buttons that

appear in a group, make

them all the same size.

Otherwise, they’ll look like

a “crazy quilt.” If you

increase the size of one

button to accommodate

extra text, size the other

buttons equally, even if

they don’t require it.

Task 238

• tons can also be tabs, set

up a table to house the tabs (one per cell) above

a table row or frame that displays the content to which the tabs link.

• If your button has more than a word or two on it, increase the button size a bit so the text doesn’t appear crowded.

• Copy and paste buttons from one page to another, bringing the link informa-tion with them This makes

it easier to create consis-tent navigation tools on all the pages of your site.

Figure 238-3: Making your button bigger

or smaller

Figure 238-4: A group of similarly-styled interactive buttons to build a central navigation area for your site

cross-reference

• Dreamweaver gives you the ability to create Flash but-tons, which look and act very much like FrontPage interactive buttons (see Task 201).

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

Changing Page Backgrounds and Colors

After you apply a theme to a site or use a template that determines the colors and backgrounds in your Web pages, you can still change your mind after the fact Either apply a new theme, which updates all your themed pages to the new one, or reopen the Page Properties dialog box and make your desired changes Through the Page Properties dialog box, you can change your background image, choose a solid color for your page background, and even set the color of your text links

1. If you applied a theme and want to change it, choose Format ➪ Theme to open the Theme task pane (see Figure 239-1)

Figure 239-1: Viewing the current theme and selecting an alternative one

note

• Theme elements cannot be

changed from within the

Page Properties dialog box.

Task 239

caution

• When you change themes,

all the theme-based

ban-ners, link bars, and

ele-ments change as well This

can cause problems if the

new theme’s graphical

ele-ments don’t go as well with

your content To see if your

intended theme will cause

problems, click once on the

thumbnail to preview the

theme on the page that

cur-rently appears in Page view.