lessononelessononelessononelessonone …wps.prenhall.com/wps/media/objects/5528/5661380/... · an...

skills1. Introducing Microsoft

FrontPage

2. Starting FrontPage

3. Exploring theFrontPage Interface

4. Opening a Web Page

5. Saving a Web Page

6. Working in DesignView

7. Getting Help inFrontPage

8. Exiting FrontPage

Introducing Microsoft FrontPageThe World Wide Web (WWW) is made up of millions of Web sites. Each Web site is agroup of related Web pages. Web sites generally consist of a home page and otherrelated pages of text, graphics, and multimedia. Web pages are created using HypertextMarkup Language (HTML) and connected using hyperlinks, which enable users tonavigate among the different pages. HTML uses strings of text called tags, whichinstruct Web browsers how to display the page elements and how to respond whenusers enter data, click a button, or click a hyperlink. HTML includes hundreds of tags,or markers, that can be somewhat difficult to learn.

FrontPage is a Web site authoring application. It simplifies the process of building Web pages by writing the HTML code for you, enabling you to quickly create, edit,and design Web pages. The structured FrontPage interface and easy-to-learn tools canbe used to quickly enter text, insert graphics, and create page banners, navigationbuttons, and hyperlinks.

Web sites are usually created on your local computer and later uploaded, or published,on a Web server. A Web server is simply a computer running the software necessary todisplay HTML pages to visitors when they enter the Uniform Resource Locator(URL) in a browser. A URL is the address for a Web page on the WWW, such aswww.azimuth-interactive.com. The Web server downloads the requested page and allof the associated graphics and other files to the Web browser.

A FrontPage Web site that you create on your local hard disk and later publish isreferred to as a disk-based Web site. The advantage to creating your Web site locally isthat you can test and edit the site before it is available to users to make sure thateverything is working correctly. You can also create a server-based Web site. Server-based Web sites are created directly on the Web server and do not need to bepublished. They are available to users on the WWW immediately and while inprogress. The server must be running Front Page Server Extensions or SharePointServices.

In the next four lessons, you will learn the basic steps of Web page and site design.Lesson 1 explains the basic elements of FrontPage: how to start the software, open aWeb page, save a Web page, and get help. Lesson 2 explains how to create new Webpages, use the Web Wizard, and edit a Web page. Lesson 3 explains how to customizeWeb pages by adding hyperlinks, tables, and custom themes. And Lesson 4 explainshow to organize, maintain, and publish Web pages.

Lesson Goal:

In this lesson you will learn how to start FrontPage, and you will explore theFrontPage interface. You will also learn how to open and save a Web page, view a Webpage, get help in FrontPage, and exit the application.

L E S S O N O N E L E S S O N O N E L E S S O N O N E L E S S O N O N E

1111111111111111111

lessonONE

1

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:53 PM

skill 1Introducing MicrosoftFrontPage

Although familiarity with HTML can help you to create Web sites with advanced designs andfeatures, a Web-authoring program such as FrontPage provides a user-friendly interface to design,write, and format Web pages quickly without knowledge of HTML. Because FrontPage providesspeed and convenience, it is used by many small businesses, non-profit institutions, social andcultural clubs, athletic leagues, and similar organizations. Whether it is for a personal Web site oran e-commerce site, FrontPage provides tools for effective Web design and Web management.

Concept

Figure 1-1 is an example of a simple Web page designed in Front003. This Web pageincludes many of the Web page elements you will learn to create.

• Text: The Web page in Figure 1-1 is relatively free of text, but since it is a home page, thisrelative lack of text is quite common. It does, however, include a title and a menu bar withtext hyperlinks. As you continue through this book, you will have many opportunities toadd and format text on your Web pages.

• Hyperlinks: The words Reservation, Fees, Information, E-Mail Us, Maps, and Crewsare underlined text, identifying them as hyperlinks. (Hyperlinks can vary from thisformat.) You click a hyperlink to navigate to other Web pages on the site. The E-Mail Us hyperlink opens a new message in your e-mail program with the e-mail of the owneror operator (Webmaster) of the Web site inserted in the To field. Home pages almostalways contain links to the other Web pages on the site, and they commonly includelinks to other Web sites.

• Frames: These are physical subdivisions of a Web page. A frameset is used to displaymultiple Web pages on one screen at the same time. A frameset might include a table ofcontents on the side frame. Each item in the table of contents is commonly linked to a Webpage. When you click one of the links, the Web page opens in the large middle frame, whichis main section of the page. A frames page also commonly includes a top banner that canalso contain hyperlinks, and it may also include a footer frame. In FrontPage 2003 there area number of frames-page templates with different page divisions from which you canchoose.

• Graphics: These are images such as page banners, Clip Art, photographs, cartoons, orother visual elements on a page. Graphics that include moving images or sound are calleddynamic graphics. You can use graphics to identify page topics or functions, displayadditional information, break large sections of text into related subsections, or illustratetext. They also can function as hyperlinks.

LESSON ONE Introducing Microsoft FrontPageFP 1.2

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:53 PM Page 2

FP 1.3I n t e r @ c t i v e L e a r n i n g S e r i e s

Figure 1-1 A FrontPage 2003 Web Page

Web page title

GraphicHyperlinks

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:53 PM

skill 2 Starting FrontPage

Before you can view or edit a Web page, you must open the FrontPage 2003 application.FrontPage opens with a new blank Web page file.ConceptStart the FrontPage application.

1. Make sure the computer, monitor, and any other necessary peripheral devices are turned onand the Windows desktop is on your screen.

2. On the Windows Taskbar at the bottom of your screen, click the Start button inthe lower-left corner to open the Start menu. Your screen may differ slightly from the oneshown in the graphic.

3. Point to All Programs to open a submenu similar to the one shown in Figure 1-2. If youdo not see Microsoft FrontPage listed on the All Programs submenu, you may find it on theMicrosoft Office submenu (Figure 1-2).

4. Click Microsoft FrontPage 2003 to open FrontPage with a blank Web page.

5. If FrontPage is not currently your default Web page (HTML) editor, a dialog box promptsyou to make it your default editor. Click (Figure 1-3).

how to


tipThe steps andscreenshots assume thatyou are using a versionof the Windows XPoperating system. If youuse a different versionof Windows or haveswitched to theWindows Classic themeor another theme, yourscreen will look slightlydifferent.

MoreIn this book, if you are instructed to click, always click once with the left mouse button unless otherwise indicated.Double-clicks and right-clicks (clicking the right mouse button) will be clearly indicated.

Your startup procedure may be slightly different from the one described in this skill due to variationsin setup. Each computer varies in its setup depending on the hardware and software configurations.

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:53 PM

Figure 1-2 Starting FrontPage

Figure 1-3 Setting FrontPage as the default HTML editor


Start button Taskbar

AllProgramssubmenu

Start menu

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM

skill 3Exploring the FrontPageInterface

When FrontPage opens, a new blank Web page ready to be designed opens. In FrontPage, agroup of related, interconnected Web pages that make up a Web site are referred to as a Web. Each Web page has its own URL or Uniform Resource Locator. A URL is a uniqueaddress for locating a Web page or document that can be viewed in a browser on the Internet,for example, www.azimuth-interactive.com. A Web site is composed of a group of linkedWeb pages. Figure 1-4 shows the FrontPage application window.

On the right side of the FrontPage application window is the task pane. The task pane hasseveral different views. When you start the program, the Getting Started task pane opens. The top half of the Getting Started task pane contains links to Microsoft Office Online Webpages. To search for other topics, type a keyword in the Search for text box and click theStart searching button. The Open section at the bottom of the task pane contains links toopen Web sites and Web pages that you have recently opened and to create a new page or site.Point to the arrow at the bottom of the task pane to view the Create a new page or site link.When you click this link, the New task pane opens. The New task pane includes links to starta new blank page, text file, or new page from an existing page. There are also several differentoptions to create new Web site (Figure 1-5).

In FrontPage 2003 there are two types of views: Web site views and Page views. Web siteviews are used to work on entire Web. These views will be covered Lesson 2. Page views areused to design individual pages. As previously noted, when you open FrontPage 2003, a newblank Web page opens. Since you are working on an individual page, the Page views are ineffect. There are four Page views: Design, Split, Code, and Preview. You use the buttons at thebottom of the Web page to select a view. Figure 1-4 shows Design view. In Design view, youenter text, insert pictures and hyperlinks, add other design elements, and arrange everything onthe page. The HTML code is automatically generated as you make additions and changes.

Concept

The other elements in the FrontPage window are as follows:

• Title bar: The Title bar, as in all MS Office programs, runs across the top of the FrontPageapplication window. It contains the FrontPage Control menu icon, the application name,the page name and location, and the Window controls in the right-hand corner.

• Window Controls: The Minimize button reduces the application window to a program

button on the taskbar. If the FrontPage window is not enlarged to fit the entire screen, use

the Maximize button to enlarge the application window. If the window is maximized,

the Restore button displays. The Restore button is used to revert the window to its

previous size and location. To close the application, click the Close button .

• Menu bar: This is the row of menu titles below the Title bar. Click a menu title to displaya list of related commands.

• Standard toolbar: This is the row of icons used to execute common commands such asopen, save, or print a file.

• Formatting toolbar: This is the row of list boxes and icons used to perform common textformatting functions such as enlarging, centering, or numbering text.


tipThe Maximize buttonreplaces the Restorebutton when theFrontPage window isnot enlarged to fit theentire screen.

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM


Figure 1-4 The FrontPage application window

Figure 1-5 The New task pane

Status barPage views

Formattingtoolbar

Task pane

Title bar Minimize,Maximize,and ClosebuttonsMenu bar

Standardtoolbar

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM

skill 4 Opening a Web Page

Designing a Web usually requires at least several sessions in which you add text, graphics,additional pages, and hyperlinks. Generally, the process will involve many modifications tothe text, page design, and Web structure. After you have saved a Web, you must know how toreopen it. In order to open a Web, you must know the name of the file and its location.

ConceptOpen an existing Web page.

1. Click File on the Menu bar to open the File menu.

2. Click the Open command to access the Open File dialog box.

3. Click the list arrow on the Look in list box and locate your Student Files folder (Figure 1-6).

4. The folder may be located on a floppy disk or in a folder on your hard drive. If the folderis stored on a floppy disk, click 3 1/2 Floppy [A:] to access it. If the folder is on your harddrive or in a network location, click the location and double-click to open any subsequentsubfolders until you locate the Student Files folder.

5. After you locate the Student Files folder, open the Lesson 1 folder and select the fphowto1-4.htm file.

6. Click to open the rudimentary Web page (Figure 1-7).

how to


tipYou can also use theHistory, My Documents,Desktop, Favorites, andMy Network Placesbuttons on the left sideof the Open File dialogbox to locate theStudent Files folder.

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM

Locate and open the fpprac1-4.htm file in your Student Files folder. Use the Close button in theupper right corner of the Web page (Figure 1-7) to close the file.

Practice


Figure 1-6 The Open File dialog box

Figure 1-7 A Web page opened in FrontPage

Click to selecta location

Click to openthe file

Click to closethe file

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM

skill 5 Saving a Web Page

Frequently saving your work is always a good practice when working with any computerprogram. Data loss can occur during power shortages or any type of computer failure. You can save Web pages on your hard drive, on a floppy disk, or on a network drive.ConceptSave a Web page with a new name and in a new location.

1. With the fphowto1-4.htm student file open, open the File menu and click Save As to openthe Save As dialog box.

2. On the left side of the dialog box, click the My Documents button to place the MyDocuments folder in the Save in list box.

3. In the contents window, double-click the My Webs folder to place it in the Save in list box.

4. In the File name text box, delete the existing name and type skydive.htm (Figure 1-8).

5. Click the Create New Folder button to open the New Folder dialog box. Each Webthat you create should be stored in its own folder in the My Webs folder.

6. Type Speed Demons in the Name text box and click .

7. The new Speed Demons folder should now be in the Save in list box. If not, double-clickit to open it and place it in the Save in list box.

8. Click . The Web Site tab opens and the page tab changes from fphowto1-4.htm to skydive.htm.

9. Open the View menu and click Folder List to display the _private and images folders andthe new Speed Demons folder alongside the skydive.htm Web page (Figure 1-9).

10. The special folders in which FrontPage stores the information for a Web begin with anunderscore. Most of these are not shown in the Folder List. Right-click andselect Explore to open Windows Explorer.

11. In the folder tree, select your My Documents folder. In the contents window, double-clickthe My Webs folder to view the contents.

12. Click the Tools menu and select Folder Options to open the Folder Options dialog box.

13. Click the View tab. Under the Hidden files and folders folder, select the Show hiddenfiles and folders option button. Click .

14. You can now view the other folders FrontPage uses to store data associated with a Web.Close Windows Explorer.

how to


tipThe My Webs folder iscreated when you installFrontPage, and it is thedefault storage folder forWeb pages and Webs.However, you can saveWebs in any folder. (InWindows XP HomeEdition, the My Websfolder is called My WebSites.)

tipTo create a new folder inany location, click theCreate New Folder buttonin the Save As dialog box.

tipIf the Folder Listcommand is not on theView menu, close allopen pages. Open theFile menu and clickOpen Site. In the OpenSite dialog box, navigateto and reopen theskydiver.htm Web page.Click Open. If a dialogbox displays asking youto add information toyour folder, click Yes.

Morename for the file. However, after you have named a file and stored it in a specific location, the Save command simply over-writes the existing document.

The Save As command then is used to change the name and/or location of the existing document. You can make changes to adocument and use the Save As command to save it with a new name. This way, the original file with the original file name isretained. The File menu includes both the Save and Save As commands.

It is important to understand the difference between the Save and Save As commands. When you save adocument for the first time, you can use the Save command on the File menu or the Save button on theStandard toolbar to open the Save As dialog box. In the Save As dialog box, you choose a location and

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM

Open fpprac1-5.htm in your Student Files folder. Save the file as caddy.htm in a new foldernamed Lucky Caddy.

Practice


Figure 1-8 Saving a Web page with a different name

Figure 1-9 Saved Web page and Folder List

Click to createa new folder

Click to savethe Web page

Folder List

When there areseveral Web pages ina Web, you can usethe page tabs to easilyswitch betweenseveral open Webpages

Type the newname for theWeb page

Page views

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM

skill 6 Working in Design View

As you have learned, Web pages are designed in Design view. This is where you add andreformat text, graphics, and other Web elements. Design view is the WYSIWYG (“what yousee is what you get”) view. This means that, as you add Web elements and reformat the page,you will see a very close approximation of how the page will look to Web site visitors in theirWeb browsers. The Page tabs are used when there are multiple pages in a Web to easilyswitch between pages, enabling you to work on several pages at once. Split view cuts the Web page in half. The top half shows the HTML code for the page, and the bottom halfdisplays the Web page in Design view. As you add elements in Design view, the code in thetop pane automatically updates. If you edit the code in the top half, the text and page elementsare automatically modified. Code view displays just the HTML code for the Web page andPreview enables you to view a close approximation of what the Web page will look like in abrowser. However, because Web pages will look different in different browsers, you shouldalways open your Web pages in several browsers to view the exact results.

Concept

Use the Page views.

1. Open the skydive.htm Web page, if necessary. You can use the Page tab at the top of thewindow to select the Web page, or you can double-click the skydive.htm Web page in theSpeed Demons folder in the Folder List. By default the page is displayed in Design view.

2. Click the Split button at the bottom of the Web page. The page is split in half with theHTML code in the top pane (Figure 1-10).

3. Click the Code tab to view only the HTML code (Figure 1-11).

4. Click the Preview tab to view a close approximation of how the Web page will appear in abrowser. You cannot format or edit your page in Preview view. You can use this view onlyto click hyperlinks and to preview visual effects. Since no effects have been added, it looksthe same as Design view.

how to


MoreSplit view is useful if you know HTML because you can watch as the HTML code is generated and see what tags areused for different effects. Furthermore, you can move back and forth between the WYSIWYG interface and the HTMLcode without changing views. If you do not know HTML, Split view can be a great learning tool.

As you have learned, FrontPage is an HTML editor. The work you create in the WYSIWYG view isconverted into Hypertext Markup Language (HTML) format. If you know HTML, you can use eitherCode or Split view to create or modify a page and then preview the results.

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM

Open the caddy.htm file you saved in the previous practice and view it in Split, Code, andPreview view.

Practice


Figure 1-10 Web page in Split view

Figure 1-11 Web page in Code view

Figure 1-10 Web page in Split view

Show Splitview

Show Codeview

ShowPreview view

HTML code

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM

skill 7 Getting Help in FrontPage

FrontPage 2003 includes several methods for getting help. When you click the MicrosoftOffice FrontPage Help button on the Standard toolbar, the FrontPage Help task pane opens. At the top of the task pane in the Assistance section, you can type a keyword in the Searchfor text box and click the Start searching button to search the Help files. If you are connectedto the Internet, you can use the links in the bottom half of the task pane to connect toMicrosoft Office Online or to get online training. If you prefer, you can use the OfficeAssistant. However, in FrontPage 2003, the task pane is the starting point for opening Helpfiles. Even if you start by entering a question in the Office Assistant search balloon or in theType a question for help box on the right end of the Menu bar, the task pane displays theSearch Results. You select a topic from the Search Results list to open either a Help page or a Microsoft Office Online Web page.

Concept

Use FrontPage Help.1. If you do not have a continuous connection, connect to the Internet. You do not need to

open Internet Explorer (or another browser). Simply establish the connection.2. Open the Help menu and click Microsoft Office FrontPage Help to open the FrontPage

Help task pane.3. Type Report in the Search for text box and press [Enter] or click the Start searching

button .4. The Search Results task pane displays a list of potential Help topics. If necessary, scroll

down and click About reports to open the related Help topic.5. Click Site Summary and read about this kind of report (Figure 1-12).6. Close the Help page.7. Scroll down the Search Results list and click the About FrontPage Web sites link.

A Microsoft Office Online Web page opens (Figure 1-13).8. Read the Microsoft Office Online Web page and close it.9. Click the Microsoft Office FrontPage Help button on the Standard toolbar to reopen

the FrontPage Help task pane.10. Open the Help menu and click Show the Office Assistant. Click the Office Assistant to

open a search balloon.11. Type Design views in the search balloon text box and press [Enter] or click .12. Click the Switch views link. Click the Show All link in the upper-right corner of the Help

window.13. Read the Help page. Note that you also can use the Page, Folders, Remote Website,

Reports, Navigation, and Tasks commands on the View menu to switch between the Page views and the Web site views, which you will learn about in Lesson 2. The fourPage sub-views that you explored in the previous skill are not on the View menu.

14. Close the Microsoft Office FrontPage Help window.

how to


tipIn the Search Resultslist, a blue circle with aquestion mark insideindicates a page in thelocal Help files. A pageicon with a questionmark in a circleindicates a MicrosoftOffice Online Web page.

Morepage icon with a question mark in a circle indicates a Microsoft Office Online Web page and a blue circle with a question markinside indicates a page in the local Help files.

You can also click the Table of Contents link on the FrontPage Help task pane to open the Table ofContents for the Help files. A book icon represents each main category. Click one of these links to openthe topic and view the subtopics. The subtopics are also book icons. Just like in the Search results list, a

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM

Use FrontPage Help to look up information about folders and hyperlinks.

Practice


Figure 1-12 The Microsoft FrontPage Help window

Figure 1-13 Microsoft Office Online

Click to reveal all ofthe text on the page

Auto Tile: Click to display theHelp page and the FrontPagewindow side by side

Click the Back and Forwardbuttons to move back andforth between topics youhave already viewed

Back button

Forward button

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM

skill 8 Exiting FrontPage

To exit FrontPage you can open the File menu and click Exit or you can click the Closebutton on the title bar. If you have forgotten to save your work, you are prompted to savebefore the application closes.ConceptExit FrontPage when you are finished working.

1. Click the Close button in the right corner of the Search Results task pane to close thetask pane (Figure 1-14).

2. Click the Close button in the right corner of the Web page to close skydive.htm.

3. In the Folder List, double-click skydive.htm (in the Speed Demons folder) to reopen theWeb page.

4. Open the View menu and click Folder List to toggle it off and close the Folder List.

5. Open the File menu and click Close Site to close the Speed Demons Web (Figure 1-15).

6. Open the File menu and click Exit to close FrontPage. If you have not made any changes,FrontPage simply closes.

how to


MoreYou can also use the Control menu icon to close the application. The Control menu icon is on the left end of the Titlebar. You can double-click the Control menu icon to close the application or right-click the Control menu icon or the Titlebar and then click Close on the Control menu.

The Close button on the Title bar closes the application. The Close button in the upper-right cornerof the active FrontPage window closes the current Web page. You can also use the keyboard shortcut[Alt]+[F4] to exit FrontPage. The keyboard combination to close the active file is [Ctrl]+[F4].

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM

Open the caddy.htm file you saved in a previous skill, if necessary. Close the file and exitFrontPage.

Practice


Figure 1-14 The Search Resultstask pane

Figure 1-15 Closing a Web

Click to closethe task pane

Click to closethe currentWeb page

Click toclose theapplication

Indicates a page inthe local Help files

Click to closethe site withoutexiting theapplication

Controlmenu icon

Click to closeall open Websand FrontPage

Indicates a MicrosoftOffice Online Web page

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM

shortcutsFunction Button/Mouse Menu Keyboard

Open file Click File, click Open [Ctrl]+[O]

Save file Click File, click Save [Ctrl]+[S]

Open Microsoft Office Click Help, then click Microsoft [F1]FrontPage Help Office FrontPage Help


FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM

quizA. Identify Key Features

Name the items indicated by callouts in Figure 1-16.

B. Select the Best Answer11. The Page view where you add and reformat text, graphics, and other a. Preview view

Web elements

12. A Web page address b. Windows taskbar

13. The Page view where you can view and enter HTML code c. Design viewfor the Web page

14. Physical subdivisions of a Web page used to display multiple d. Window controlsWeb pages on one screen at the same time

15. The Web page element used to navigate to other Web pages on the site e. Task paneor to other Web sites

16. Where the Start button is found f. Frames

17. The Page view where you can view a close approximation of g. Code view what the Web page will look like in a browser

1.2.3.4.

5.

6.

7.

8.

9.

Figure 1-16 FrontPage screen elements

10.


(Continued on next page)

FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM

quiz (continued)

21. You can use this to access Microsoft OfficeOnline.

a. Title bar

b. Menu bar

c. Task pane

d. Status bar

22. The default storage folder for Web pages andWebs is called:

a. My Documents

b. Recent Webs

c. My Webs

d. FrontPage Webs

23. This Page view can be used to learn HTML.

a. Preview view

b. Design view

c. Code view

d. Split view

24. This Page view is used to add text, hyperlinks,and other Web page elements to Web pages:

a. Preview view

b. Design view

c. Code view

d. Split view

25. This task pane is used to access the MicrosoftHelp files and Microsoft Office Online:

a. Getting Started

b. New

c. Answer Wizard

d. FrontPage Help

26. This screen element contains graphical buttonsthat execute specific commands:

a. Standard toolbar

b. Menu bar

c. Graphical toolbar

d. Taskbar

27. The Control menu is accessed from the:

a. File menu

b. Taskbar

c. Title bar

d. Menu bar

28. The formatting language used to create Webpages is:

a. URL

b. Web code

c. Front02 code

d. HTML

29. The keyboard shortcut to exit FrontPage is:

a. [Alt]+[F4]

b. [Ctrl]+[F4]

c. [Ctrl]+[S]

d. [Ctrl]+[F1]

C. Complete the Statement

18. Buttons at the top right of a window that enable you to h. URLalter the window size

19. The FrontPage interface element where Search Results display i. Split viewthat serves as the starting point for opening Help files

20. The Page view where you can view both the HTML code for j. Hyperlinksthe page and the Web page.


FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM Page 20

interactivity1. Start FrontPage 2003:

a. Open the Start menu.

b. Access the All Programs submenu.

c. Access the Microsoft Office submenu if necessary.

d. Click the Microsoft Office FrontPage 2003 command.

2. Open a Web page:

a. Click the Open button on the Standard toolbar to open the Open File dialog box.

b. Use the Look in list box to navigate to the location where you have stored your FrontPage 2003 Student Filesfolder.

c. Open the Lesson 1 folder

d. Locate the fpskill1.htm Web page and open it.

3. Save a Web page:

a. Open the File menu and click Save As to open the Save As dialog box.

b. Locate the My Webs folder (in the My Documents folder). Make sure that the My Webs folder is in the Save inlist box.

c. Create a new folder named Water Taxi.d. Save the file as watertaxi.htm.

4. View a Web page in the four Page views:

a. Click the Split button at the bottom of the Web page.

b. Click the Code button.

c. Click the Preview button.

d. Click the Design button.

5. Getting help in FrontPage:

a. Open the Help menu and click Microsoft Office FrontPage Help.

b. Type Creating Web Pages in the Search for text box and click the Start searching button.

c. Click the About creating and designing Web pages link. Read the page.

d. Close the Microsoft Office FrontPage Help window.

e. Open the View menu, point to Toolbars, and click Task Pane to toggle the command off and close the task pane.

f. On the right end of the Menu bar, type graphic in the Type a question for help list box.

g. See which Help topics appear in the Search Results list on the task pane.

h. Click the Home button on the task pane to open the Getting Started task pane.

i. Click the Microsoft Office FrontPage Help button on the Standard toolbar to switch to the FrontPage Help taskpane.

j. Establish a connection to the Internet, if necessary, and click the Assistance link in the Microsoft Office Onlinesection of the task pane.

Build Your Skills


FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM

k. Close the Microsoft Office Assistance Home Page.

6. Exit FrontPage:

a. Click the Close button in the right corner of the FrontPage Help task pane to close the task pane.

b. Press [Ctrl]+[F4] to close watertaxi.htm.

c. In the Folder List, open the Water Taxi folder and double-click watertaxi.htm to reopen the Web page.

d. Open the View menu and click Folder List to toggle it off and close the Folder List.

e. Open the File menu and click Close Site to close the Web.

f. Double-click the Control menu icon in the upper-left corner of the Title bar to close FrontPage.

interactivity (continued)

1. Congratulations! You have been hired by a small publishing house, Diggs & Associates, as the new Web administrator.You will create and maintain the company Web site. In order to maintain a competitive advantage, the publishers want touse the Web site to distribute information to agents, authors, and other potential business partners. They also want toconduct certain business transactions from the Web site. Create a rough draft of a Web site. Nothing concrete isnecessary, just a few conceptual proposals including thematic examples and possible features. Some possible features toconsider are a product ordering page and a guest book to record visitors to the site.

2. Make a list of the Web site components you favor. Use your imagination; be creative and brainstorm about what theWeb site should include. All of your ideas may not be plausible, but many may work. For example, images completewith animation can be added. Plug-ins and applets are other possibilities. These terms will be explained in future lessonsif you are unfamiliar with them.

3. Create a rough draft for a personally significant Web site. For example, if you are a soccer enthusiast, plan a soccer Website. Consider what type of information will be relevant and useful to visitors and what sites might complement yours. Search the Internet for related sites to link to yours.

4. Find one or more Web sites that you like and compile a list of the Web elements, navigation features, and otherattributes. Take detailed notes about what makes these sites attractive and engaging to visitors. Your notes should includeeverything from animation and graphics to theme, color, writing style, font size, and font color. If possible, also takenote of the navigational structure. How are the pages linked? Try to draw a map or hierarchy of the pages on the site.

Problem Solving Exercises


FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM

skills1. Using a Template to

Create a Web Page

2. Using a Template toCreate a Web

3. Using a Web Wizard

4. Using the Import WebWizard

5. Adding Text to a WebPage

6. Formatting Web PageText

7. Adding andFormatting Lists

8. Using the SpellingChecker and Editing a Web Page

9. Using the FindCommand

10. Previewing a WebPage in a Browser

Creating Web SitesBefore you begin to build a Web site, you should develop a plan that includes thetypes of pages you need and a rough outline of their content, the navigational scheme,and the features and graphics for each page. After you have completed this preliminarywork, you can begin to create the necessary Web pages. There are several ways tocreate a new Web page. As you learned in Lesson 1, you can start with the new blankpage that automatically opens when you start FrontPage. You can also use a templateor Wizard to create a new page. Templates are preformatted Web pages withboilerplate text and pictures. You can start with a template, enter your text, and modifyand reformat the page to create a unique Web page. Similarly, you can use a Wizard tocreate a Web page with boilerplate text that can be modified. The Wizard asks a seriesof questions that give you somewhat more control over the final product. Wizards andtemplates can also be used to create entire sites.

In this Lesson, you will use the Guest Book template to create a Web page for visitorsto sign a public guest log and to enter comments. Then you will use the CustomerSupport Web Site template to create a Web site devoted to identifying and servingcustomer needs. Next, you will use the Corporate Presence Wizard to create aprofessional Web site for the Internet. Finally, you will use the Import Web SiteWizard to import a Web site to a new local storage location.

In the later skills in this lesson, you will learn Web design basics, including enteringand formatting text and adding and formatting lists. It is very important to spellcheck and edit your Web pages to make sure that you maintain a professionalappearance. You will also learn how to find information on a Web page and how topreview a Web page in a browser. This lesson introduces you to the basics ofbuilding and viewing Webs.

Lesson Goal:

Learn how to use Wizards and templates, add and edit text, and run the SpellingChecker on a Web page. You will also learn how to find and replace specific wordsand how to preview a published Web page.

L E S S O N T W O L E S S O N T W O L E S S O N T W O L E S S O N T W O

2222222222222222222

lessonTWO

2

skill 1Using a Template toCreate a Web Page

A template is a pre-designed format for a Web page that can include text and graphics. The predefined templates included with FrontPage 2003 provide one of the easiest ways to startbuilding Web pages. You can create a Web page quickly by using a template and then enteringyour text and modifying the page to customize it for your Web. You can also create your owntemplates. This is particularly useful when multiple authors are working on a Web. For example,you can design the home page for your site and use it to create a template that will be saved onthe hard drive of every Web site author who opens the Web. In this way, all authors who openthe Web can use the template to create pages consistent with the initial design.

overview

Use a template to create a Web page.

1. Open the FrontPage application.

2. In the Open section at the bottom of the Getting Started task pane, click the Create anew page or site link to open the New task pane.

3. In the New page section, click More page templates to open the Page Templates dialogbox.

4. Click the Guest Book icon and click (Figure 2-1).

5. The new Web page opens in the FrontPage window complete with placeholder text (Figure 2-2). The placeholder text demonstrates the text format and can be modified. The purple text at the top of the page is instructional text for the Web author. It does notdisplay to Web site visitors.

6. Click the Preview button to see approximately how the page will look in a browser.

7. Close the file without saving it.

8. Click the View menu and Click Task Pane to reopen the New task pane. The Guest Booktemplate is listed in the Recently used templates section at the bottom of the task pane. You can click this link to bypass the Page Templates dialog box and quickly reopen thetemplate.

how to

extraYou may have noticed that the Design view window comes equipped with scroll bars directly below and to the right ofthe window. As in all Windows applications, scroll bars are equipped with scroll boxes and scroll arrows. To move thepage view to the right or left, click the right or left scroll arrow on the horizontal scroll bar. To move the page view upor down one line at a time, click the up or down scroll arrow on the vertical scroll bar. To move the page view morequickly, drag the scroll boxes up, down, left, or right, as needed. The size of the scroll box changes with the page size.The longer a page is top to bottom, the shorter the vertical scroll box. Conversely, as page width increases, horizontalscroll box size decreases.

As you can see, a template provides a basic structure or outline for a Web page. Some templates arespecifically designed to accommodate graphics, some come equipped with option buttons, and stillothers have pre-designed return forms. You can use these templates to create functional Web pages.

LESSON TWO Creating Web SitesFP 2.2

Figure 2-1 The Page Templates dialog box

Open FrontPage and create a new Web page using the template of your choice. Save the Webpage as myfpprac2-1.htm and close the file.

Practice


Description of thepage template

Preview of thepage template

Web pagetemplates

Figure 2-2 The Guest Book template

This instructional text is forthe Web author only. It doesnot display on the Web page

This text can bemodified to suityour needs.

Scroll arrows

Scroll box

skill 2Using a Template toCreate a Web

You can also use a template to create a new multi-page Web (Web site). Templates enable youto choose from a variety of themes and formats to create an entire Web site with a Home pageand a general organizational structure and outline. As you have learned, you can replaceplaceholder text to customize the Web pages for your site.

overviewUse a template to create a Web.

1. On the New task pane, in the New Web site section, click the More Web site templateslink to open the Web Site Templates dialog box.

2. Click the Customer Support Web Site icon and click (Figure 2-3).

3. The Web is created and opens in Folders view. The Folder List also opens. Folders viewand the Folder List contain the same information, but Folders view provides additionaldetails such as the size and type of file, and the Modified Date an Modified By columns.Folders view is quite similar to Windows Explorer. It is used to create, copy, delete, andmove folders (Figure 2-4).

4. Notice the buttons at the bottom of the Web Site window. These are the Web site views.Click the Reports button to view the Site Summary of reports.

5. Click Unlinked files to view the unlinked files on the site.

6. Click the list arrow on the Unlinked Files button and click Site Summary toreturn to the default Reports view.

7. Click the Folders button to return to Folders view. To view the home page, double-click index.htm either on the Folder List or in the Web Site window. Web servers require adefault name for Home pages, usually, index.htm. If you change it, FrontPage automaticallyrenames it, if required by the server, when you publish the Web. (Figure 2-5).

8. To view the navigational structure, click the Navigation button at the bottom ofthe Folder List if necessary. The Navigation Pane replaces the Folder List.

9. Double-click each of the pages on the Navigation Pane to view the page in page Designview. As you use the Navigation Pane to view each page, a tab for the page is added to thetop of the Web Site window. Subsequently, you can use these tabs to view and work on apage. Scroll Left and Scroll Right arrows are added at the end of the tabs. Use thescroll bars along the right and bottom of the Web Site window to view each page in itsentirety if necessary.

10. Click the File menu and click Close Site to close the Web.

11. Click the File menu and point to Recent Sites. The Web site has been saved in the defaultlocation in the My Webs folder as mysite. As you use additional Web templates and WebWizards to create Web sites, they are saved automatically as mysite2, mysite3, etc. Clickthe C:\My Documents\MyWebs\mysite command to reopen the Web. The path to the Webdisplays in the Title bar and below the Web Site tab in Folders view.

how to


tipEvery Web contains aHome page. A Homepage is the first pagethat visitors see whenthey reach a site. Links are used tonavigate among thepages of a Web.

tipIf you are on a networkor a multi-user computerthe default storagelocation is as follows:C:\Documents andSettings\<username>\My Documents\MyWebs\mysite. You canuse the Specify thelocation of the newWeb site list box in theWeb Site Templatesdialog box to save aWeb with a differentname and/or in analternate location.

Figure 2-3 The Web Site Templates dialog box

Figure 2-4 The Customer Support Web site in Folders view


Description ofthe Web site

Web site views

Use to changethe defaultstorage locationand Web name

skill 2Using a Template toCreate a Web (Cont’d)

extraproject team members to discuss ideas and concerns, post status reports, and schedule meetings. A Personal Web siteconsists of a Home page, a Photo album page, an Interests page, and a page that links to the author’s favorite sites.

Each of these Web templates serves different purposes. However, be aware that a template is not a restrictive structure.Web templates can be edited and reorganized. Themes can be applied during or after the creation process. Unnecessarypages can be deleted and additional pages can be inserted. For example, if a company wants to advertise using multiplephotographs, the Web author can begin with the Personal Web template and add a Form page and a Guest book page. You can start with a Web template that is partly suited to your requirements and then add text, pages, and features gearedto the type of Web site you are trying to create.

The Web Site Templates dialog box provides a description of each available template. The CustomerSupport Web is geared towards software companies, and it supplies a feedback mechanism to improvecustomer support services. The Project Web site provides a team member directory and can be used by


Create a Web using the Project Web Site template in the Web Site Templates dialog box. Viewthe navigational structure of this Web, open and examine each page, and then close the Web. Youdo not need to save this Web. It will save automatically as mysite2.

Practice


Figure 2-5 The Home page (index.htm)

Web site views

skill 3 Using a Web Wizard

A Wizard is an automated procedure built into a program that is used to simplify a complexoperation. Wizards provide a series of dialog boxes in which you choose from various optionsto accomplish a task. Another simple way to build a complete Web is to use a Web Wizard.The Web Wizards are included in the Web Site Templates dialog box.

overviewUse a Wizard to create a Web.

1. Open the File menu and click New to open the New task pane.

2. Click the More Web site templates link to open the Web Site Templates dialog box.

3. Click the Corporate Presence Wizard icon and click to start the CorporatePresence Web Wizard. The first dialog box is an introduction to the Wizard (Figure 2-6).

4. Click . In the next dialog box you choose the pages to include in your Web. Makesure that all of the check boxes are selected, and clear the Products/Services check box.

5. Click . The next dialog box is a description of the Home page. The MissionStatement and Contact Information boxes should be selected, if not click them (Figure 2-7).

6. Click . The next dialog box describes the What’s New page. The Web SiteChanges check box should be automatically selected, if not click it. Click the Articles and Reviews check box. (Figure 2-8).

7. Click . The next dialog box sets up the Feedback Form. Keep the default settingsand click the Mailing Address check box (Figure 2-9).

8. Click . The next dialog box prompts you to specify if you want the feedback file tobe compatible with database and spreadsheet programs. The Yes, use tab-delimited formatoption button is selected by default.

9. Click to accept the default setting. The next dialog box sets up the Table ofContents Page.

10. Click to accept the default setting, Use bullets for top-level pages. The next dialogbox is used to add objects to the top and bottom of each page. Leave the default settingsselected and click the Your Company’s logo check box to place the company logo at thetop of each page (Figure 2-10).

11. Click . The next dialog box prompts you to mark each unfinished page in your Webwith the Under Construction icon.

12. Click to accept the default setting, Yes. The next dialog box is used to enter thefull name and short version of your company name and the company address. Click anddrag to select the sample name in the What is the full name of your company text box.Type Speed Demons Sky Diving Club.

13. Click and drag to select the sample name in the What is the short version of this nametext box. Type Speed Demons.

how to


tipDefault settings are pre-selected settingswhich are alreadyselected in the Wizard.


Figure 2-6 The Corporate PresenceWeb Wizard

Figure 2-7 Selecting the topics for theHome page

Figure 2-8 Selecting the topicsfor the What’s New page

Figure 2-9 Selecting the informationto collect on the Feedback Form

Figure 2-10 Selecting the objects to beadded at the top and bottom of each page

Description ofa Home page

Click the topics forthe Home page

Click to return tothe previous step

The progressbar displayshow much ofthe Web iscomplete

The selecteditems will beincluded on theFeedback Form

skill 3Using a Web Wizard(Cont’d)

14. Enter 345 Rocky Rd., Falling Water, N.Y. 10566 in the What is your company’s streetaddress text box (Figure 2-11).

15. Click . Enter (914) 555-9903 in the What is your company’s telephone number?text box and (914) 555-9904 in the What is your company’s FAX number text box.

16. Enter miller@speed_demons.com in the What is the e-mail address of your webmaster?text box. Enter info@speed_demons.com in the What is the e-mail address for generalinfo text box.

17. Click to open the final page in the Corporate Presence Web Wizard (Figure 2-12).

18. Click . The Web opens in the Tasks view. There are five tasks: Customize each ofthe five pages (Figure 2-13).Notice that the Web was automatically saved in the defaultlocation as mysite3 (if you did not complete the Practice for Lesson 2, it is mysite2).

19. Click the Navigation view button to view the Web structure (Figure 2-14).

20. Open the File menu and click Exit to close the FrontPage application window for theCorporate Presence Web.

how to

extraWizard that is used to create a message board and an Import Web Site Wizard, which you will use in the next skill.

In the Web Site Templates dialog box, you can change the default location to store the new Web site. In the Specify thelocation of the new Web site list box, enter the location or click the Browse button to select a location. If you include anew folder name at the end of the pathname, FrontPage creates the new Web folder.

As you saw in the skill, a Web Wizard can help you to create a complex Web quickly. You can usethe Database Interface Wizard to create Web pages to add, edit, and delete database records on aWeb site hosted on a server running Active Server Pages (ASP). There is also a Discussion Web Site


tipThe first letter of thelocation in which yousave a folder specifiesthe drive. Generally, A: is the floppy diskdrive, C: is the harddrive, and D: is the CDROM drive. After youdesignate the drive, youspecify the location,such as Desktop, or My Documents. The final element of aWeb pathname is thefolder which can be atthe end of any numberof subfolders.

Use the Discussion Web Wizard to create a new Web. Save it in the My Webs folder and nameit Discussion.

Practice


Figure 2-12 Completing theCorporate Presence Web Wizard

Figure 2-13 Tasks view

Figure 2-14 Navigation view

Click to cancelthe Wizard onany step

To open a Web page,double-click the page icon

The tasks in the newlycreated site are tocustomize the five pages

Figure 2-11 Entering companyinformation

Click to finish theWizard with thedata entered upto that point onany step

skill 4Using the Import WebWizard

You can use the Import Web Wizard to create a new Web from pre-existing files. You canimport an entire Web or just pages from a Web that is stored locally, on network drive, or onthe Web. You can also create a Web site that is filled with documents from a local directory ora remote file system.

overviewUse the Import Web Wizard to create a new Web from pre-existing files.

1. Start FrontPage, if necessary. Open the File menu and click New to open the New taskpane.

2. Click the More Web site templates link to open the Web Site Templates dialog box.

3. Click the Import Web Site Wizard icon. You can use the Import Web Wizard to transferdata from a published Web site to a new Web as well as to convert a folder to a Web.

4. In the Specify the location of the new Web site text box type C:\My Documents\SpeedDemons (Figure 2-15).

5. Click . The first Import Web Site Wizard dialog box opens. Click the FileSystem option button to import files from a source directory on your local computer ornetwork (Figure 2-16).

6. Click to open the New Publish Location dialog box. Use the Look in list boxto navigate to the location where your Data Files folder is stored, open the Lesson 2folder, and click the fphowto2-4 folder. Click to close the dialog box andreturn to the Import Web Site Wizard.

7. Click to open the Import Web Site Wizard - Choose your destination weblocation screen. The Add to current Web site check box is selected by default. C:\MyDocuments\Speed Demons should be entered in the Local copy location text box.

8. Click to open the Import Web Site Wizard - Congratulations screen.

9. Click . The Web site opens in Remote Web site view (Figure 2-17).

10. Click Index.htm in the Remote Web site list box. Click (between the two panes) topublish the selected file from the Remote Web site to the local Speed Demons Web.

11. Double-click Index.htm in the Local Web site list box to open the page. It is the originalSkydiver page you worked with in Lesson 1.

12. Click the Web Site tab . In the Status box at the bottom of the window, you canpublish all changed pages from the local Web to the remote Web, from the remote Web tothe local Web, or you can synchronize the two Webs to ensure that both include the samepages and content.

13. Click the File menu and click Exit to close the FrontPage application window for theSpeed Demons Web.

how to


Figure 2-15 Starting the Import Web Site Wizard

Figure 2-16 The Import Web Site Wizard


Click to import aWeb site from aWeb server

Click to importfiles from asource directoryon your localcomputer ornetwork

skill 4Using the Import WebWizard (Cont’d)

extraTo import a file from your local computer or network, click the Add File button to open the Add File to Import Listdialog box. Use the Look in list box to locate and click the file you want to import and then click Open. Repeat theprocedure to import additional files.

To import a folder from your local computer or network, click the Add Folder button to open the File Open dialog box.Use the Look in list box to locate and select the folder you want to import and then click Open.

To import a Web site from a Web server, click the From Site button to start the Import Web Site Wizard that you used inthe skill. Click the HTTP option button. Click the Browse button, locate and select the start page for the Web site, andthen click Open. The start page does not have to be the home page. It can be any Web page in the site.

You can also use the Import command on the File menu to import a Web site, folder, or file. First,open the Web site to which you want to import the files. Open the File menu and click Import toopen the Import dialog box.


Use the Import Web Site Wizard to import the fpprac2-4 folder (in your Data Files folder in theLesson 2 folder) to a new local Web named Caddy Shop (C:\My Documents\Caddy Shop).Publish the index.htm file from the Remote Web site to the local Caddy Shop Web.

Practice


Figure 2-17 Remote Web site view

Click tosynchronize theselected files

skill 5Adding Text to a WebPage

Composing the text is arguably the most important job when building a Web site. Since theprimary goal of any Web site is communication, clear, readable, well-placed text that quicklyconveys information to Web site visitors should be your top priority. Creating a functionalWeb site begins with adding text.

overviewAdd text to a Web page. You will add text to the imported Home page in the Speed Demons Web.

1. Start FrontPage, if necessary.

2. Click the File menu, point to Recent Sites, and click the Speed Demons Web that youcreated in the previous skill.

3. Double-click Index.htm to open the home page in Design view.

4. Place the mouse pointer at the end of the word Club and click. A flashing insertion point(a black bar that marks where text will be added) should appear at the end of the wordClub (Figure 2-18).

5. Press the [Enter] key four times.

6. Type The best in the Skydiving Industry. Your page should look like Figure 2-19.

7. Click the File menu and click Save.

8. Close the Index.htm page.

how to

extrasmaller font size—for example, 6 (24 pt). You can also use the Increase Font Size and Decrease Font Sizebuttons on the Formatting toolbar to increase or decrease the font size one level. The Increase Indent button isused to apply a standard paragraph indent of approximately ½ inch. Simply position the insertion point in front ofthe line or paragraph you want to indent and then click the Increase Indent button. The Decrease Indent buttonis used to reduce or eliminate a paragraph indent. Special effects, such as Marquee text (which you will learn aboutin Lesson 3), can also be added to emphasize certain text.

You can use the Formatting toolbar to format or change the appearance of text. This includeschanging the font, font style, size, color, and alignment. For example, to decrease the size of thetext you just entered, select the phrase, click the list arrow on the Font Size list box, and click a


tipThe [Tab] key on thekeyboard moves textseveral spaces, generallyto the right when youplace the insertion pointin front of a word or tothe left if you place theinsertion point at theend of a word,depending on the pageformat. You can use the[Enter], [Tab], and[Space bar] keys tochange the position ofthe text on a page.

Figure 2-18 Adding text to a Web page

In the Caddy Shop Web you created in the previous practice, five lines below the last line of texton the Index page, type Best Prices in Westchester County. Save the change.

Practice

Figure 2-19 The Skydiver Web page with new text added


Insertion point

skill 6Formatting Web PageText

The FrontPage Formatting toolbar includes many formatting options such as changing the font(or typeface), font style, font size, color, and text alignment. Text can be aligned to the left,right, or center. You can also underline, italicize, or make text made bold, and applyhighlighting or borders. There are also buttons to create either a bulleted or numbered list.

overview

Change the font and font size of Web page text.

1. Open the Index page in the Speed Demons Web.

2. Place the insertion point before the letter T in the second phrase. Click and drag to selectthe phrase (Figure 2-20).

3. On the Formatting toolbar, click the list arrow on the Font Size list box and click 5 (18 pt) (Figure 2-21). The selected sentence changes size.

4. Click the list arrow on the Font list box, scroll down the list, and click Monotype Corsiva.

5. Select the first two lines of text on the page (Speed Demons Sky Diving Club).

6. On the Formatting toolbar, click the Underline button . If you apply a format beforeyou begin typing, it will be applied to the entire page, until you toggle off the button. Ifyou continue typing text after the word Club, the new text is underlined until you toggleoff the button.

7. Click once anywhere on the screen to deselect the selected text. Your page should nowresemble Figure 2-22.

8. Click the Save button on the Standard toolbar to save the changes.

9. Close the Index file.

how to

extraseparately. The three style buttons are especially useful for headers, footers, and other text you want to emphasize. The four layout buttons, Align Left , Align Right , Center , and Justify control where text appears on thepage. You can use the [Spacebar] and the alignment buttons to arrange text on a page.

Your choice of font can help to set the mood for your Web site. Some fonts are bold, some areornate, and some are classic. You can even choose a comical or a serious font to set the tone. Next to the Underline button are the Bold and Italic buttons, which can be used together or


Figure 2-20 Selecting text

On the Index page in the Caddy Shop Web, underline the shop address text and change the fontto Century Gothic. Save the change.

Practice

Figure 2-22 Formatted text

Figure 2-21 Formatting toolbar buttons


Selected text

New size and font

Underlined text

Font Sizebox

Bold, Italic,and Underline

Align Left, Center, AlignRight, and Justify

Highlight &Font Color

Style box Font box

Numbering, Bullets,Decrease Indent, &Increase Indent

All Borders

Increase FontSize & DecreaseFont Size

skill 7Adding and FormattingLists

When you design Web pages, remember that site visitors are often in a hurry. You must makeimportant information stand out and format it so that it is clear and easily read. One way to dothis is to create a list. Lists consolidate information in a concise format and enable you toseparate topics or information from the rest of the page. You can use the buttons on theFormatting toolbar to create either numbered or bulleted lists. Although you use the sameprocedure to create either kind of list in FrontPage, bulleted lists are often referred to asunordered lists, while numbered lists are referred to as ordered lists. These terms refer to theHTML tags used behind the scenes to create the two types of lists.

overview

Add a new page with a list to a Web.


2. Click the File menu and click New to open the New task pane.

3. In the New page section at the top of the task pane, click Blank page to add a new blankpage to the Web.

4. Type Organizational Goals on the first line of the page. On the Formatting toolbar, clickthe Center button .

5. Select the text and format it so that the font is Arial Black and the size is 5 (18 pt).

6. Place the insertion point after s in Goals. Press [Enter]. Click the Align Left button .Click the Bullets button .

7. Type Increase club membership. Press [Enter]. Type Increase public awareness. Press[Enter].

8. Follow the same procedure to expand the list to include the follow bullet points: Generatemedia attention, Stress safety procedures, and Make skydiving more affordable andenjoyable for all. Compare your page to Figure 2-23.

9. Right-click one of the bullets and click List Properties to open the List Propertiesdialog box.

10. Click the empty circles bullets and click (Figure 2-24).

11. To change the properties for only one item on the list, right-click the item you want tochange and click List Item Properties to open the List Item Properties dialog box. The List Item Properties dialog box includes the formatting options for a single bullet list item.

12. Open the File menu and click Save As to open the Save As dialog box. Save the new page inthe Speed Demons Web with the default name (organizational_goals.html) (Figure 2-25).

13. Close the page.

how to


tipYou can also use theStyle list box on theFormatting toolbar tocreate a list. Click eitherBulleted List orNumbered list in theStyle list box before you begin typing.

tipFor text that is alreadytyped, select the itemsyou want on the list anduse either the buttons onthe Formatting toolbaror the Style list box. The items you want toturn into a list must beseparated by paragraphbreaks, not line breaks.Paragraph breaks leave a blank line between thelines of text.

extra If you use the Numbering button to create a numbered list, you can open the List Propertiesdialog box on the Numbers tab and change the numbering style to capital or lowercase letters orRoman numerals.

Create a new page in the Caddy Shop Web. At the top of the page type Best selling items. Centerthe text and format it with the Elephant font in the 5 (18 pt) size. Create a numbered list alignedleft with the following items: Tees, Balls, Clubs, Bags, Shoes, Shirts, Pants, DVDs, and Books.Save the page as best_selling_items.htm and close the file.

Practice


Figure 2-23 Bulleted list

Figure 2-24 The List Propertiesdialog box

Figure 2-25 Saving a new Web page in a Web

A bulleted list

Click to use a graphical bullet fromthe current theme (if a theme hasbeen applied) or to browse tolocate a graphic you have savedthat can be used as a bullet

Click to viewthe optionsfor creating anumbered list

skill 8Using the Spelling Checkerand Editing a Web Page

As you compose text on your Web pages, you will inevitably make mistakes. The FrontPagespelling checker makes it easy to locate and fix errors. You can run a spell check in three ofthe four Page views: Design view, Split view, and Code view. You cannot run a spell check inPreview view. Red and green underlines often referred to as squigglies, alert you tomisspellings and grammatical errors respectively.

overview

Check a Web page for spelling errors and make corrections.

1. Open a new FrontPage application window (in addition to the application window in whichyou have the Speed Demons Web open).

2. Open the fphowto2-8.htm Web page in the Lesson 2 folder in your Data Files folder.

3. Click the Spelling button on the Standard toolbar or open the Tools menu and clickSpelling to open the Spelling dialog box. The Spelling dialog box opens if the spellingchecker locates a word that is not in the FrontPage dictionary (Figure 2-26).

4. Click to replace the word with the suggested change.

5. Click to close the Spelling dialog box.

6. The misspelled word is selected on the page. Click after the letter k in the misspelled word(Figure 2-27).

7. Press the [Backspace] key on the keyboard to delete the letter k.

8. Type rm, so the word Determine is spelled correctly.

9. Save the file as writing_tips.htm in the Speed Demons folder in your My Webs folder (in My Documents).

10. When the Save Embedded Files dialog box opens, click to save the Web pagegraphics with the new file.

11. Close the FrontPage application window.

how to

extraEnglish words that are not in the dictionary.

Another method is to right-click a misspelled word to access a shortcut menu that contains a list of possible replacementsand the Add to Dictionary and Ignore All commands.

You can also run the Spelling Checker on an entire Web. In Folders view, click the top level site. The top-level site is thetopmost folder in the Web site folder hierarchy. Click the Spelling button. A different Spelling dialog box prompts you tocheck the spelling of the selected page (s) or of the entire Web site. You can also add a task to Tasks view for each pagewith misspellings and perform the spell check later.

Click the Add button in the Spelling dialog box to add a word to the FrontPagedictionary. This feature helps especially if the checker frequently stops on proper names or non-


tipA word with redunderlining indicates amisspelled word (or onethat is not in theFrontPage dictionary).The wavy line enablesyou to perform on-the-spot editingwithout opening theSpelling Checker.

In the Caddy Shop Web, open fpprac2-8.htm (in the Lesson 2 folder in your Data Files folder).Find and correct the spelling errors on the page. Save it as order_form.htm in the Caddy ShopWeb.

Practice


Figure 2-26 The Spelling dialog box

Figure 2-27 Misspelled word on a page

Click to ignore aword that is notin the dictionary

Misspelled word

click to ignore allwords with thesame spelling

Click to changeall instances ofthe samemisspelling tothe wordselected in theSuggestions box

Click to changethe identifiedword to the wordselected in theSuggestions box

skill 9 Using the Find Command

Quickly locating specific words or phrases can be difficult on a lengthy page or a whole Web.The Find and Replace commands are used to search for and review or edit text quickly andaccurately. The FrontPage 2003 Find and Replace utility uses Extensible Markup Language(XML) to perform queries. Extensible Markup Language (XML) is a comprehensivemarkup language used to create other special-purpose markup languages. The term markuplanguage refers to the combination of text with additional data, or markers, that describe howtext displays. HTML is the most commonly known markup language. XML is used tofacilitate data sharing between different systems, most commonly over the Internet. In FrontPage 2003, you can even create your own queries that can be saved as files with a.fpq file extension and shared with other users. Queries are saved by default in the Queriesfolder for the current user, C:\Documents and Settings\<username>\ApplicationData\Microsoft\FrontPage\Queries, but you can save them in an alternate folder if desired.

overview

Use the Find command to locate text. Use the Find and Replace utility to create a query.

1. Open a new FrontPage application window (in addition to the application window in whichyou have the Speed Demons Web open).

2. Click the File menu, point to Recent Files and click the writing_tips.html page that yousaved in My Webs\Speed Demons.

3. The insertion point should be blinking on the left side of the page.

4. Click the Find button on the Standard toolbar or open the Edit menu and click Find toopen the Find and Replace dialog box.

5. In the Find what text box type adverb clauses.

6. In the Find where section, the Current page option button is selected by default. The Direction is set to All. (Figure 2-28).

7. Click . The first instance of adverb clauses is selected.

8. Click again. The second occurrence of adverb clauses is selected (Figure 2-29).

9. Click the Replace tab.

10. Type agian in the Find what text box.

11. Type again in the Replace with text box.

12. To the right of the Advanced section, there are two Query icons. The folder icon, Openquery, is used to open saved queries, and the disk icon, Save query, is used to savequeries. Click the Save query button to open the File Save dialog box. The Queriesfolder is the default storage location.

13. Type Again Query in the File name text box.

14. Click .

15. Click to close the Find and Replace dialog box.

16. Click .point to All Programs, point to Accessories and click Notepad.

17. Click the File menu and then click Open to access the Open dialog box.

how to


tipIn the Find wheresection, you can selectcheck boxes to searchAll pages in a Web, allOpen page(s) in a Web,the Selected page(s), orjust the Current page. In the Direction section,you can choose tosearch the entiredocument or Web (All),or to search Up orDown the document.

tipYou can click theReplace command onthe Edit menu to openthe Find and Replacedialog box on theReplace tab.

tipSteps 9-14 create aquery using the defaultsettings.


Figure 2-28 The Find and Replace dialog box

Figure 2-29 Finding text

Select to searchthe entiredocument orWeb

Click to searchup the page

Click to searchup the page

Save querybutton

Open querybutton

skill 9Using the Find Command(Cont’d)

18. Use the Look in list box to navigate to C:\Documents and Settings\<username>\Application Data\Microsoft\FrontPage\Queries (Figure 2-30).

19. In the Files of type list box, click All Files.

20. Click Again Query.fpq and click . A very simple XML statement has beencreated to find agian and replace it with again (Figure 2-31).

21. Close Notepad. Close the FrontPage application window.

how to

extramenu. In Office 2003, menus have a double arrow in a circle at the bottom. Point to or click this Expand button to viewthe entire menu. Commands on the primary menu include those most commonly used and those that a user has recentlyused.

In the Advanced section, you can click the Match case check box to search only for words or phrases that match thecapitalization you have entered in the Find what box or you can click Find whole word only to search only for entirewords. For example, if you enter to in the Find what box and do not click the Find whole word only check box, allwords that begin with to are located as well as the word to itself.

You may have noticed the two additional buttons on the Replace tab, Replace and Replace All.Click to replace a single instance of a particular word or phrase. Click to replaceall instances of a particular word or phrase. The Replace command may be on the extended Edit


tipYou can use the Findand Replace commandsin almost every view.You can also use themto find and replaceHTML code in Codeview.

tipYou can use the optionsin the Advanced sectionto create more complexqueries, includingconditional queries inwhich you can replace aword or an HTML tagonly in certaincircumstances (e.g.,when a particularcondition is met).

In the Caddy Shop Web, open order_form.htm and find a question that asks the user to enter hisor her age. Close the Find and Replace dialog box, view the question, and close the page.

Practice


Figure 2-30 Locating the Queries folder

Figure 2-31 An XML Find and Replace statement

skill 10Previewing a Web Pagein a Browser

In Preview view in FrontPage 2003, Web pages appear as they will appear in Internet Explorer6 or above, but they may look very different in other browsers. (To make sure you are securewith the terminology, a browser is the program used to view Web pages and HTMLdocuments.) In FrontPage 2003, you can design Web sites that display well both on manydifferent browsers and at different screen resolutions in those browsers. You can add yourtarget browsers (those you think that most of your users will be using) along with targetscreen resolutions and open Web pages directly from FrontPage to see how they will look toWeb site visitors. Only browsers that are installed on the computer can be added, but there isno limit to the number of browsers you can add. This flexibility enables you to test your Webpages in both older and newer versions of browsers. The exception is Internet Explorerbecause you can install only one version of IE. In order to test Web pages in older versions ofIE you must install them on a different computer, set up a dual-boot system, or run MicrosoftVirtual PC for Windows or another software virtualization application.

overview

Preview a Web in a browser and register a browser.

1. Open the Speed Demons Web.

2. Click the Index.htm page.

3. Click the File menu, point to Preview in Browser (You may have to click Extend at thebottom of the menu), and click Microsoft Internet Explorer (800 x 600) (Figure 2-32).

4. If you have another browser installed on your computer you can click Preview in MultipleBrowsers on the Preview in Browser submenu to open the Web page in two or morebrowsers at once. Notice that there are also Preview in Multiple Browsers commands thatspecify the screen resolution.

5. You can also use the Preview in Browser button on the Standard toolbar to preview aWeb page in a browser. Click the list arrow to select from all browsers you have installedand added (See the extra section) and the resolution you want to use.

6. View the Web page in the browser.

7. Close the browser.

8. Close the Web and exit FrontPage.

how to

extraclick Add to open the Add Browser dialog box. Enter the browser name in the Name text box and click Browse to openthe Add Browser dialog box. Use the Look in list box to navigate to the location of the browser executable file (Figure 2-34). Click the executable file and click Open to enter the path in the Command text box (Figure 2-35). ClickOK to close the Add Browser dialog box. Click the check box for the browser in the Edit Browser List dialog box andselect the additional window sizes. To automatically save a Web page before previewing, click the Automatically savepage before previewing check box and click OK to close the Edit Browser list dialog box.

To add a new preview browser (other than Internet Explorer), you must first install the browsersoftware. Then open the File menu, point to Preview in Browser and click Edit Browser List toopen the Edit Browser List dialog box (Figure 2-33). If the new browser is not on the Browsers list,


tipAs long as they are ingood working order,your hyperlinks operatewhen you preview apage in a browser.

tipYou can also double-click a Web page file(.htm) in its storagefolder to open it in yourdefault browser.

Open the Index page in the Caddy Shop Web and preview it in your default browser at the 640 x480 screen resolution. Close the Web page and the Web.

Practice


Figure 2-32 Previewing a Web page in a browser Figure 2-33 The Edit BrowserList dialog box

Figure 2-34 Adding a browser

Figure 2-35 The Add Browserdialog box

Click to save a Web pageyou are working on beforeit opens in the browser

Click the executable file andclick Open to enter the pathin the Command text box

Enter thebrowser name


Bold Click Format, click Font. In the Font dialog [Ctrl]+[B]box, click Bold in the font style list box

Italic Click Format, click Font. In the Font dialog [Ctrl]+[I]box, click Italic in the font style list box

Underline Click Format, click Font. In the [Ctrl]+[U]Font dialog box, click the Underline check box in the Effects section

Increase Font Size Click Format, click Font. In the Font dialogbox, click the font size in the Size list box

Decrease Font Size Click Format, click Font. In the Font dialogbox, click the font size in the Size list box

Increase Indent Click Format, click Paragraph. In the Paragraph [Ctrl]+[M]dialog box, click a number amount to indentin the Before text spin box

Decrease Indent Click Format, click Paragraph. In the Paragraph [Ctrl]+[Shift]+[M]dialog box, click a number amount toindent in the Before text spin box

Align text right [Ctrl]+[R]

Justify text

Align text left [Ctrl]+[L]

Center text [Ctrl]+[E]

Create a Click Format, click Bullets and Numbering. To open the Bullets bulleted list In the Bullets and Numbering dialog box, and Numbering

click the Plain Bullets tab and select a dialog box:bullet style [Alt]+[O]+[N]

Create a Click Format, click Bullets and Numbering. To open the Bullets numbered list In the Bullets and Numbering dialog box, and Numbering

click the Numbers tab and select a dialog box:numbering style. [Alt]+[O]+[N]

Spelling checker Click Tools, click Spelling [F7]

Find and Replace Click Edit, click Find [Ctrl]+[F]

Preview in Click File, point to Preview in Browser, select To preview a Web Browser browser and screen resolution page in the default

browser:F12 To open the Preview in Browser menu: [Alt]+[F]+[B]


quizA. Identify Key FeaturesName the items indicated by callouts in Figure 2-36.

A. Select the Best Answer11. An automated procedure built into a program that presents a series a. Home page

of dialog boxes in which you choose from options to accomplisha task

12. Used to create a new Web from pre-existing Webs or Web b. The text layout buttonspages that are stored locally, on network drive, or on the Web

13. Used to change the numbering style for a numbered list c. Bulleted liststo capital or lowercase letters or Roman numerals

14. The first Web page you visit on a Web site d. Edit Browser List dialog box15. These are also referred to as ordered lists e. List Properties dialog box16. A pre-designed format for a Web page that can include f. Browser

text and graphics17. These are used along with the [Spacebar] to arrange text on a page g. Import Web Wizard18. These are also referred to as unordered lists h. Numbered lists19. This is used to add a new preview browser to FrontPage after i. Template

the browser software has been installed20. The program used to view Web pages and HTML documents j. Wizard

1.

2.

3.

4.

5.

6.

7.

8.

9.

Figure 2-36 Web page in FrontPage

10.


quiz (continued)

21. If you open an .htm file directly from a folder,rather than opening it in FrontPage:

a. It will open in FrontPage anyway.

b. It will open in a Web editor.

c. It will open in the default browser.

d. You cannot open a .htm file from the folder inwhich it is stored.

22. If you do not see a command on the regularmenu, you may need to:

a. Open a dialog box.

b. Open the extended menu.

c. Use a wizard.

d. Use a keyboard shortcut.

23. When you use the Find and Replace utility, youcan search:

a. Left-to-right or right-to-left.

b. By the size of the word.

c. The entire document or Web or up or downthe page.

d. By the verb tense.

24. When you use the Import Web Wizard, you use this to select the folder to import:

a. The New Publish Location dialog box.

b. The File Open dialog box.

c. The Style list box.

d. The Import dialog box.

25. If you misspell a word, FrontPage alerts you by:

a. Selecting the word.

b. Automatically changing the word.

c. Automatically opening a dialog box.

d. Underlining the word with a wavy red line.

26. To change the default storage location for newWeb site that you create using a template or aWizard you use:

a. The List Item Properties dialog box.

b. The Status box at the bottom of the Remote Webs site view window.

c. The Specify the location of the new Web sitelist box in the Web Site Templates dialog box.

d. The Add File to Import List dialog box.

27. You use this to format a single item on a bulletlist:

a. The Add Browser dialog box.

b. The Formatting toolbar.

c. The Style dialog box.

d. The List Item Properties dialog box.

28. The FrontPage 2003 Find and Replace utilityuses this to perform queries:

a. Hypertext Markup Language (HTML).

b. Structured Query Language (SQL).

c. Extensible Markup Language (XML).

d. Common Query Language (CQL).

29. Every Web site contains:

a. FrontPage-based templates.

b. A Home page .

c. Graphics and/or photographs.

d. All of the above.

30. FrontPage Find and Replace queries are savedwith this extension

a. .fpq

b. .csv

c. .mdb

d. .dqy



interactivity1. Use a template to create a new Web page.

a. Open Front Page.

b. Click the File menu, point to Recent Sites, and click the Caddy Shop Web.

c. Click the File menu and click New to open the New task pane.

d. In the New page section, click More page templates to open the Page Templates dialog box.

e. Click the Photo Gallery icon and click OK to close the Page Templates dialog box and to create the new page.

f. Click the Save button on the Standard toolbar to open the Save As dialog box.

g. Save the file with the default name (photo_gallery.htm) in the Caddy Shop Web.

h. When the Save Embedded Files dialog box opens, click OK to save the graphics with the page.

2. Use a template to create a Web.

a. Click the File menu and click New to open the New task pane.

b. In the New Web site section, click More Web site templates to open the Web Site Templates dialog box.

c. Click the Personal Web Site icon.

d. Type: C:\Documents and Settings\<username>\My Documents\My Webs\Personal in the Specify the locationof the new Web site list box. Remember, you can enter a new folder name at the end of the pathname andFrontPage will create the new Web folder.

e. Click OK to close the Web Site Templates dialog box and to create the Personal Web in the My Documents\MyWebs folder for your user account.

f. Close the Web.

3. Use a Web Wizard to create a Web.



c. Click the Project Web Site icon.

d. Type C:\Documents and Settings\<username>\My Documents\My Webs\Project in the Specify the location ofthe new Web site list box.

e. Click OK to close the Web Site Templates dialog box and to create the Project Web in the My Documents\MyWebs folder for your user account.

f. Close the Web.

4. Import a Web.



c. Click the Import Web Site Wizard icon.

Build Your Skills


d. Type C:\Documents and Settings\<username>\My Documents\My Webs\Water Taxi in the Specify thelocation of the new Web site list box.

e. Click OK to close the Web Site Templates dialog box and to start the Import Web Site Wizard.

f. Click the File System option button.

g. Click the Browse button to open the New Publish Location dialog box.

h. Use the Look in list box to navigate to the Lesson 2 folder in your Data Files folder.

i. Click the fpskill2 folder and click Open to import the folder to the local Web.

j. Click Next to open the Choose your destination web location screen. C:\Documents and Settings\<username>\My Documents\My Webs\Water Taxi should appear in the Local copy location text box. The Add to currentWeb site check box should be selected.

k. Click Next to open the Congratulations screen. Click Finish to import the files to the new local Web.

l. Click index.htm in the Remote Web site list box. Click the Publish Selected Files from the Remote Web site tothe local Web site arrow.

m.Right-click watertaxi.htm in the Local Web site box and click Delete. Click Yes in the Confirm Delete dialogbox.

n. Double-click Index.htm in the Local Web site list box, if necessary, to open the page.

5. Perform a spell check and add and format text.

a. Click the Spelling button on the Standard toolbar to open the Spelling dialog box.

b. Fix the spelling error on the index.htm page in the Water Taxi Web.

c. Click below the table to position the insertion point.

d. Press [Enter] four times.

e. Type: Safe, rapid transportation to your island destinations.

f. Select the new text.

g. Change the font to Arial Black, center the text, and apply the Italic font style.

h. Save the changes.

6. Preview a Web page in a browser.

a. With the index.htm page in the Water Taxi Web open, click the File menu, point to Preview in Browser, and thenclick Microsoft Internet Explorer 6.0 (640 x 480).

b. Preview the file, close the browser, and close the Water Taxi Web.



1. Use the Corporate Presence Wizard to create a Web site for Diggs & Associates. Name the Web folder Diggs andsave it in your My Documents\My Webs folder. Keep your earlier plans in mind. You can always add pages to aWeb to accommodate your various ideas. Include a Products/Services page. Accept the default settings for theHome page. Accept the default settings for the What’s New page. Accept the default settings for theProducts/Services page. Include the Mailing Address on the Feedback Form. Keep the default setting (tab-delimited) for the feedback form. Accept the default settings for the Table of Contents page. Keep the defaultsettings for the top and bottom of each page. Mark unfinished Web pages with the Under Construction icon. Enterthe company name, Diggs & Associates, short version, Diggs, and address, 987 Park Lane, Thompson, MA02411. Enter the telephone number, (502) 555-9043, and fax number, (502) 555-9044. Enter your e-mail address asthe Webmaster’s address and info@ diggs.com as the general info address.

2. Use the Form Page Wizard in the Page Templates dialog box to create a product-ordering page. In the seconddialog box, click Add to select the type of input to collect. Click product information in the Select the type ofinput for this question list box and click Next. Click the Product code and Serial Number check boxes and clearthe other two check boxes (Model and Platform and version). Click Next. Click the Add button again. Clickordering information in the Select the type of input for this question list box and click Next. All three checkboxes should be selected by default. If not click them. Enter 20 in the Maximum number text box and click Next.Click Finish to create the product ordering page. Save the page as order_form.htm in the Diggs Web. Replace thetext New Page 1 with the text Order Form. Replace the text This is an explanation of the purpose of the formwith the text Use this form to order books and magazines. Save the change and close the Web.

3. Open the Personal Web site you created in Build Your Skills, Step 2. Edit and format the Web pages in any way youchoose. Add at least one additional page. Possible page topics include Education, Hobbies, Sports, Favorite Booksand CDs, and Future Plans. Develop each page as fully as you can. Save the new page, save the changes to the Web,and close the Web.


skills1. Creating Tables

2. Formatting Tables

3. Applying a Theme to aWeb

4. Applying CustomThemes

5. Creating TextHyperlinks

6. Editing Hyperlinks

7. Adding Images

8. Formatting Images

9. Image Mapping

10. Creating anInteractive Button

11. Creating a Marquee

12. Creating Forms

13. Adding Check Boxesand Option Buttons

14. Creating a Drop-Down List Box

15. Creating a PushButton

Formatting and Adding Objects to Web PagesAs you saw in Lesson 2, if you use a template you can keep your Web site formattingtasks to a minimum. However, as you become more skilled at creating your own Webpages, you will probably want to exert more control over the design. Formatting yourWeb pages to make your site readable, easy for visitors to use, and aesthetically pleasingis difficult. Your broad goals are to attract first-time visitors and to keep visitors comingback. When you design Web pages, remember a simple rule: function over form. Jobone is to make your site functional. Use styles and graphics only to enhance yourmessage. Site usability is your foremost concern. Never add design elements that makeit harder for the user to find information or perform a task.

This does not mean that you must design drab Web sites that have no interestinggraphics, hyperlinks, or other design elements. It simply means that you must make surethat your design elements are either compatible with or enhance the primary goals ofreadability and usability.

Some common mistakes novice Web designers make are choosing a difficult-to-readfont, making text harder to read by using a font color that does not contrast sufficientlywith the background or a textured background, using uncommon hyperlink styles so thatusers do not recognize them as hyperlinks, using an unusual name for a link that iscommonly used on many sites with a well-known name, and placing commonly useddesign elements in unusual positions on the page.

One of the easiest formatting methods is applying a theme. Themes include pre-selectedfonts, text colors, background, bullet styles, and graphics. Since complementaryelements are selected and applied all at once, this can save you considerable designtime.

There are many different types of objects you can add to your Web pages. Tables andlists are used to structure and organize text, and text boxes, option buttons, check boxes,and drop-down menus are used to gather different types of information from Web sitevisitors on a form. A form can either be inserted on a Web page or created as anindependent page. You can apply formatting changes to any object you add to a Webpage, including hyperlinks and images. You can reposition objects, change their colors,size, and borders, and even add animation.

Lesson Goal:

Learn how to create and format tables, apply a theme to a Web or to individual pages,and customize a theme. Learn how to create and edit hyperlinks and how to add andformat images. Learn how to create an image map, interactive buttons, and a marquee.Learn how to create forms and add form fields including text boxes, check boxes, optionbuttons, drop-down boxes, and push buttons.

L E S S O N T H R E E L E S S O N T H R E E L E S S O N T H R E E L E S S O N T H R E E

333333333333333333

lessonTHREE

3

skill 1 Creating Tables

One of the most common Web page design elements is a table. Tables are used to structureand organize information. They consist of horizontal rows and vertical columns with a cell atthe intersection of each row and column. Text, numbers, graphics, buttons, lists, and evenother tables can be inserted in each cell. Web page designers commonly use tables to structuretheir page layout. You can use any of three methods to create a table. You can use the InsertTable button on the Standard toolbar to select the number of rows and columns from a palette,the Tables toolbar to draw a table, or the Insert Table dialog box. When you use the InsertTable dialog box, you have more control over the table design. You can set cell padding andcell spacing, border size and color, and a background color for the table.

overview

Create a table.

1. Start FrontPage and open the Speed Demons Web.

2. Open the Index page.

3. Position the insertion point halfway between the name of the club and the slogan for theclub.

4. Open the Table menu, point to Insert, and click Table to open the Insert Table dialog box(Figure 3-1).

5. In the Size section, 2 Rows and 2 Columns are selected by default. In the Layout section,enter 4 in the Cell padding spin box. Cell padding is the amount of space between the cellgridlines and the text or other content in the cell.

6. In the Cell spacing spin box, enter 3. Cell spacing is the thickness of the cell wallsbetween the cells.

7. In the Borders section, click the list arrow on the Color list box and select the Whitesquare either in the Standard Colors section or the Document Colors section. The bordercolor designates the color of the outer edge of the table and the cell borders.

8. Click to close the Insert Table dialog box. A table is inserted with the insertionpoint in the first cell.

9. Type Organizational Goals and press the [Tab] key.

how to

LESSON THREE Formatting and Adding Objects to Web PagesFP 3.2

tipTables that you havecreated in MicrosoftWord or MicrosoftExcel can also beimported to a Web page.

tipTo create a table with noborders, set the Cellpadding, Cell spacingand Size (in the Borderssection) spin boxes to 0.

tipAs you add content toyour table, the rows andcolumns expand. To addmore rows to the tableyou just created, pressthe [Tab] key at the endof the text in the fourthcell. Another row withtwo cells isautomatically inserted.


Table 3-1 Deleting elements of a table

Action Steps

Delete a table Click anywhere in the table you want to delete, open the Table menu, point toSelect, and click Table. Right-click the table and select Delete Cells.

Delete a cell Click in the cell you want to delete, open the Table menu, point to Select, andclick Cell. Right-click the cell and select Delete Cells.

Delete a row Click in any cell in the row you want to delete, open the Table menu, point toSelect, and click Row. Right-click the row and click Delete Rows.

Delete a column Click in any cell in the column you want to delete, open the Table menu, pointto Select, and click Column. Right-click the column and click Delete Columns.

Figure 3-1 The Insert Table dialog box

Use the Rowsand Columnsspin boxes to setthe number ofcells in the table

Use to set theborder sizearound the tableand around eachof the cells inpixels

Use to set thethickness of thecell wallsbetween the cells

Use to set theamount of spacebetween thecells and the cellcontent

skill 1 Creating Tables (Cont’d)

extraTo control how much space a table occupies on the Web page, use the Specify width and Specify height check boxes inthe Layout section in the Insert Table dialog box. You can set the width and height in either the number of pixels or thepercent of the screen the table occupies. Fixed table widths are set in pixels. The In percent width setting sizes the tablewidth relative to the page. The table resizes automatically when users resize their browser windows. If you do not set aspecific width, the table expands horizontally to fit the content you enter. Generally, you do need to set the height;therefore, the Specify height check box is not selected by default. The table contents force the table to expand as high asnecessary.

To change the background for the table, use the Background section. You can make the background a different colorfrom the page or insert a graphic to serve as the table background. The Size list box in the Borders section sets theborder size in pixels. The border is inserted both around the table and around each of the cells.

Table 3-1 explains how to delete part or all of a table. You can delete or add tables in either Design or Split view.

When you use the Insert Table button on the Standard toolbar, you cannot set any specificdesign parameters for the table. You simply use the drop-down palette to select the number of cells.


10. Type Schedule of Events and press [Tab].

11. Type Recent News and Skydiving Near You, pressing the [Tab] key after each entry.

12. When you have finished entering the text, click to save the file. Your page should nowlook like Figure 3-2.

how to

Insert a four-celled table below the last line of text on the Index page in the Caddy Shop Web.In the four cells add the following text: Sales, Products, Contact Us, and Employment. Save thefile.

Practice


Figure 3-2 Inserting a table

ColumnRows Cell

skill 2 Formatting Tables

You can also apply formatting changes after a table has been created. To apply text formattingchanges including font changes, underlining and color, use the Formatting toolbar. To changethe cell padding, cell spacing, background color, border size, or cell width, use the TableProperties dialog box. You can make changes to the entire table, individual cells, or specificrows or columns.

overview

Format a table.

1. On the Index page in the Speed Demons Web, right-click the table and click TableProperties to open the Table Properties dialog box.

2. In the Borders section, click the list arrow on the Light border list box and select theAqua square.

3. In the Dark border list box, select the Silver square. If the border size is greater than one,you can select two border colors to create a 3-D effect. This effect may not be visible in allbrowsers.

4. Enter 3 in the Size spin box (Figure 3-3).

5. Click to close the Table Properties dialog box.

6. Right-click the table and click Cell Properties to open the Cell Properties dialog box.

7. In the Layout section, select Center in the Horizontal alignment list box.

8. Click to close the Cell Properties dialog box. Only the cell you clicked haschanged.

9. Click and drag to select the entire table.

10. Right-click the table and click Cell Properties to open the Cell Properties dialog box.Repeat Step 7 to center the remaining cells.

11. Click to close the Cell Properties dialog box.

12. Click outside the table to deselect it. Your page should look like Figure 3-4.

13. Click to save the changes.

how to

extraborder. When you see the vertical resizing arrow, drag up or down to increase or decrease the table height.

To add rows or columns, first drag to select the table. Open the Table menu, point to Insert, and click Rows or Columnsto open the Insert Rows or Columns dialog box (Figure3-5). You can also right-click the table and select Insert Rowsor Insert Columns to insert a single row (above) or a single column (to the left).

You can also use the mouse to resize a table. To resize the table horizontally, position the pointerover a vertical border. When you see the horizontal resizing arrow, drag to the left or right to increaseor decrease the width of the table. To resize the table vertically, position the pointer over a horizontal


tipYou can also format thefont in a table in the Fontdialog box. First, selectthe table or cell you wantto format. Then, right-click the table and clickFont to open the Fontdialog box.

tipText can be aligned in acell either horizontallyor vertically. Thechoices in theHorizontal alignmentlist box are: Default,Left, Right, Center, andJustify. The choices inthe Vertical alignmentlist box are: Default,Top, Middle, Baseline,and Bottom. TheBaseline setting alignsthe text in a row alongan imaginary line acrossthe bottoms of theletters.

Figure 3-3 The Table Propertiesdialog box

Format the table on the Index page in the Caddy Shop Web so that the borders are the sameGreen color as the text. Change the font to Comic Sans MS and increase the Font size to 4 (14 pt). Save the file.

Practice

Figure 3-4 Formatting a table


The light border color is usedfor the top and left edge of thetable, and the dark border coloris used for the bottom and rightedge of the table

The Float setting is used to pusha table to the left or the right andformat the text on the page toflow around the table. This maynot be visible in all browsers.

The border colors and size havebeen changed and the textcentered in each cell

Figure 3-5 The Insert Rowsor Columns dialog box

Click to insert rows. The Numberof columns spin box changes tothe Number of rows spin box

skill 3Applying a Theme to aWeb

A theme is a preformatted style that you can apply to a Web page or an entire Web. A set offormatting instructions controls the background, fonts, colors, and button styles. Themesprovide a fast method for designing Webs or applying a matching design to multiple pages. It is usually best to apply a theme to an entire Web to maintain visual consistency. Althoughyou can apply a theme to only one page or various themes to different pages, it is generallynot recommended. One benefit of themes is that they knit your site together as a coherent andprofessional whole.

overview

Apply a theme to a Web.

1. Open the Index page in the Speed Demons Web, if necessary.

2. Open the Format menu and click Theme to open the Theme task pane.

3. Use the scroll bar on the right side of the task pane to locate and select the Blends themein the All Available themes section.

4. Point to the Blends theme, click the list arrow, and select Apply as default theme to applythe Blends theme to all pages in the Web (Figure 3-6).

5. A Microsoft Office FrontPage warning message opens to caution you that applying adefault theme replaces existing formatting information, but pages to which a theme hasalready been applied do not change. Themes applied to an individual page take precedenceover themes applied to the entire Web (Figure 3-7).

6. Click . Close the Theme task pane.

how to


tipFrontPage 2003automatically appliesthemes using cascadingstyle sheets (See Lesson5). Older themes maynot format correctly inNetscape or Mozillabrowsers.

tipTo apply a theme onlyto selected pages, firstselect the pages on theFolder List. Use the[Ctrl] key to selectmultiple pages. Then,select Apply to selectedpage(s) on the menu forthe theme you want toapply.

tipTo remove a theme froma Web, open the Themetask pane, click the listarrow on No theme, andselect Apply as defaulttheme. To remove atheme from a single page,open the page, open theTheme task pane, clickthe list arrow on Notheme and select Applyto selected page(s).


Figure 3-6 Applying a default theme

Figure 3-7 Applying a default theme warning message

The active graphics setuses animated pageelements such asinteractive buttonsrather than plainbuttons or link bars

Select to switch fromnormal colors to vividcolors

skill 3Applying a Theme to a Web (Cont’d)

extraThe elements included in a theme affect all aspects of page appearance including:

• Colors: The color scheme sets the color for body text, headings, hyperlinks, page banner text, link bar labels, tableborders, and the page background. You can select the Vivid colors check box at the bottom of the Theme task paneto apply vivid colors.

• Graphics: Graphical page elements include background pictures, page banners, bullets, navigation buttons, andhorizontal lines. You can use standard or active graphics. The Active graphics check box at the bottom of the Theme task pane applies animated page elements such as interactive buttons rather than plain buttons or link bars.

• Styles: A theme uses its own font styles and font sizes for body text and headings.

You can apply a theme to one or more pages or you can make it the default theme to apply it to anentire Web. This is the recommended method to maintain consistency throughout the site. When youset a default theme, it is automatically applied to new pages.


7. On the Folder List, double-click organizational_goals.htm to open the OrganizationalGoals page. The Blends theme has been applied to all Web pages in the Web (Figure 3-8).

8. Click to save the changes.how to

Apply the Citrus Punch theme to the Caddy Shop Web as the default theme for the Web. Savethe change.

Practice


Figure 3-8 The Organizational Goals page with the Blends theme

skill 4 Applying Custom Themes

Themes are particularly useful because they are flexible and can be modified. You are notrestricted to only the preset format. Even though colors, fonts, bullets, and other elementshave been applied, you can still customize each element. You can apply a theme site-wide andyet make enough changes that the site design does not have a prefabricated look.

overviewCustomize an existing theme.

1. Open the Format menu and click Theme to open the Theme task pane.

2. In the Select a theme section, locate and select the Expedition theme.

3. Select the Vivid colors check box.

4. Click the list arrow on the Expedition theme and select Customize to open the CustomizeTheme dialog box (Figure 3-9).

5. In the What would you like to modify? section, click to open a CustomizeTheme dialog box dedicated to modifying colors. In the Color Schemes list box, scrolldown and select Nature.

6. Click the Color Wheel tab. Drag the color wheel indicator (the circle on the color wheel)to the right and closer to the center to make the Colors in this scheme tan/brown, royalblue, white and medium blue (Figure 3-10).

7. Click the Custom tab. In the Item list box, select Body. The body text should be royalblue as shown in the Color list box.

8. In the Item list box, select Hyperlinks. Standard hyperlink text is royal blue. In thePreview of pane, you can see that hyperlinks that have been followed (clicked) turn pinkand active hyperlinks are red.

9. Click to close the Customize Theme (color) dialog box.

how to


tipThe Background picturecheck box is selected bydefault because allthemes use a graphic asthe background. To usea plain whitebackground instead,clear the Backgroundpicture check box.


Figure 3-9 The Customize Theme dialog box

Figure 3-10 Creating a color scheme

Click to customizethe colors for theelements in a theme

Drag to change thecolors in the Colorsin this scheme box

Click to change the backgroundimage for the theme, or thegraphics for buttons, bullet lists,and banners

skill 4Applying Custom Themes(Cont’d)

extrarule (lines) table borders, and hyperlinks can each be set to a specific color individually.

In the Customize Theme dialog box that opens when you click the Graphics button, if you select a Web page element inthe Item list box and the Active Graphics option button is selected, you can change the normal picture, selected picture,and hovered picture for navigation buttons. This is similar to the color changes for regular, followed, and active texthyperlinks. The hovered image displays when you position the mouse pointer over a button. An active hyperlink is ahyperlink that is currently selected in the browser.

There are two ways to customize the colors for the elements in a theme. In this Skill you used theColor Wheel to generate a color scheme. You can also select a color for each Web page element onthe Custom tab. The background, banner text, body text, headings, navigation buttons, horizontal


10. Click to open a Customize Theme dialog box dedicated to changing text styles.Body should be selected in the Item list box. In the Font scrolling list box, select ComicSans MS (Figure 3-11).

11. Click to close the Customize Theme (text) dialog box. The table text changes tothe selected font.

12. Click to open the Save Theme dialog box. Type Modified Expedition in theEnter new theme title text box. Click to save the custom theme.

13. Click to close the Customize Theme dialog box.

14. On the Theme task pane, in the All available themes section, select Modified Expedition.

15. Click the list arrow on the Modified Expedition theme and select Apply as default theme.

16. Click to close the warning dialog box.

17. Close the Theme task pane.

18. Save the changes.

how totipUse the Graphics button

to changethe background imagefor the theme, or thegraphics for buttons,bullet lists, and banners.You can also formatbutton and banner text.

Create a customized theme for the Caddy Shop Web. Apply the Capsules theme and modify itusing the Cactus color scheme. Change the font type to Garamond for the Body and all sixHeadings. Save the theme as Modified Capsules and apply it to all four pages in the Web as thedefault theme for the Web. Save the changes to the Web.

Practice


Figure 3-11 Customizing theme textSelect thetype of text(Body orHeading type)

skill 5 Creating Text Hyperlinks

As you probably know, a hyperlink is text or an object on a Web page that most commonlyconnects a visitor to a file, another Web page, or another Web site. You can also designhyperlinks to download files or start other operations such as opening your e-mail programwith a recipient’s e-mail address already inserted in the To box. You can turn almost anyobject, word, or image into a hyperlink. Hyperlinks are also commonly referred to as links,jumps, hotlinks, and hypertext. The key to a hyperlink is that it is linked to a URL (UniformResource Locator) for a specific Web page, file, or e-mail address.

overview

Create text hyperlinks

1. Open the Index page in the Speed Demons Web, if necessary.

2. In the table, drag to select the text Organizational Goals.

3. Open the Insert menu and click Hyperlink to open the Insert Hyperlink dialog box. You can also click the Insert Hyperlink button on the Standard toolbar.

4. Click organizational_goals.htm in the contents window for the Current Folder(Figure 3-12).

5. Click to close the dialog box and create the hyperlink. Click .

6. Click Recent News in the table.

7. Open the Insert menu and click Hyperlink to open the Insert Hyperlink dialog box.

8. In the Address list box, type recent_news.htm.

9. Click to close the dialog box and create the hyperlink. The hyperlink iscreated, but you must still create the page.

10. Click Schedule of Events in the table. Open the Insert Hyperlink dialog box.

11. On the Link to bar, click the Create New Document button.

12. Type schedule_of_events.htm in the Name of new document text box and clickThe new document is created using the default theme for the Web.

13. Click the Index.htm tab to return to the Index page. Follow the same procedure tocreate a hyperlink and a new page for the target URL skydiving_near_you.htm.

14. Return to Index.htm. Each time you create a hyperlink, the text is underlined and thetext color changes according to the color scheme for the theme. Royal blue is the Webstandard for hyperlink text, but this can vary in FrontPage themes.

15. Save the changes. Click the Preview tab to switch to Preview view.

how to


tipThe easiest way tocreate a hyperlink is totype the URL of thetarget page directly ontothe Web page.FrontPage automaticallycreates a link to the Webaddress.

tipYou can also create ahyperlink withoutchoosing a specificword, phrase, or imageon the Web page.Simply place theinsertion point whereyou want to position thehyperlink. Open theInsert Hyperlink dialogbox and locate the targetpage or file. When youcreate the link, the titleof the target page isinserted as hyperlink text on theWeb page. If there isno title, the URL isinserted.


Figure 3-12 The Insert Hyperlink dialog box

The targetaddress

Click to create alink to a bookmark

Click to create a linkto an e-mail address

skill 5Creating Text Hyperlinks(Cont’d)

16. Move the pointer over one of the new hyperlinks. The pointer turns into a hand pointer,just as it would in a browser.

17. Open the File menu, point to Preview in Browser, and click Microsoft InternetExplorer 6.0. Click the Organizational Goals hyperlink to view the OrganizationalGoals page.

18. Close Internet Explorer. The followed link has turned pink (Figure 3-13).

how to

extrathe document you want to link to or you can use the familiar Look in list box. The Place in This Document button isused to link to a location on the current document. Before you can create this type of link, you must set a bookmark tothe target section of the document. Position the insertion point before the section to which you want to link, open theInsert menu and click Bookmark to open the Bookmark dialog box. Enter a name for the bookmark in the Bookmarkname text box and click OK. A flag, or bookmark, is inserted at the insertion point.

As you saw in the skill, the Create New Document button is used to create a new page for a link. The E-mail Addressbutton is used to create a link to an e-mail address. When users click the link, their default e-mail program opens to amail-composing window with the specified e-mail address inserted in the To field.

In the Insert Hyperlink dialog box on the Link to bar, there are four buttons. The Existing File orWeb Page button is used to locate existing files or Web pages on your computer or your localnetwork. You can either use the Current Folder, Browsed Pages, and Recent Files buttons to locate


tipMake sure you give thebookmark a name thatclearly identifies thesection of text and donot include spaces in thebookmark name.

tipSome browsers may nothave the ability to opena blank, pre-addressed e-mail window.

Create hyperlinks for the items in the table on the Index page in the Caddy Shop Web. Link Salesto orderform.htm, Products to best_selling_items.htm, and Contact Us to the e-mail [email protected]. Click the E-mail Address button on the Link to bar, enter the e-mail address, and click OK. Finally, link Employment to a new file, employment.htm. Use theCreate New Document button to create the new blank Web page. Save the changes.

Practice


Figure 3-13 Hyperlinks on a Web page

Hyperlink text changescolor and is underlined

The followedlink turns pink

skill 6 Editing Hyperlinks

When page names or target addresses change, you must edit your hyperlinks so that theyremain functional. You may also need to edit a hyperlink if you want to switch from one kindof link to another-for example, change a URL link to an e-mail address link. Another reasonyou may have to fix a hyperlink is if you delete a Web page and want to redirect the link to anew page. You must check all links after you publish your Web on a Web server.

There are three ways to test your links in FrontPage 2003. As you saw in the previous skill,you can use the Preview in Browser command to test the links in a browser. You also can alsotest your links in Preview view, or you can test them in Design view by holding down the[Ctrl] key and clicking the link.

overview

Edit hyperlinks

1. In the Speed Demons Web on the Index page, switch to Design view, if necessary.

2. Open the View menu and click Folder List to open the Folder List, if necessary

3. On the Folder List, right-click skydiving_near_you.htm and click Delete to delete thepage from the Web.

4. The Confirm Delete dialog box prompts you to confirm that you want to delete the page.Click (Figure 3-14).

5. Right-click the Recent News hyperlink and click Hyperlink Properties to open the EditHyperlink dialog box.

6. Delete recent_news.htm from the Address list box.

7. Click the Create New Document button. Type news.htm in the Name of new documenttext box (Figure 3-15).

8. In the When to edit section, select the Edit the new document later option button andclick to close the dialog box.

9. Double-click news.htm in the Folder List. Open the File menu and click Save As. Makesure Speed Demons is selected in the Save in list box.

10. Click to open the Set Page Title dialog box. Type News in the Page title textbox (Figure 3-16).

11. Click to close the Set Page Title dialog box.

12. Click . A Microsoft Office FrontPage warning message prompts you toreplace the existing file. Click to save the page with the title change (Figure 3-17).

13. Click the Index.htm tab to return to the Index page. Move the pointer over the RecentNews hyperlink.

14. Press the [Ctrl] key and click the hyperlink. The link takes you to the new page,news.htm.

how to


tipYou can modifyhyperlink text just asyou edit any text on aWeb page. You can usethe Formatting toolbarto change the font, fontcolor, font size, and fontstyle of hyperlink text.

tipWith the hyperlinks inthe table structure, youcan select the table andapply formattingchanges to all of thehyperlinks in the table atonce.

tipTo edit a hyperlink youcan also select thehyperlink and click on the Standard toolbarto open the EditHyperlink dialog box.


Figure 3-14 The Confirm Delete dialog box

Figure 3-15 The Edit Hyperlink dialog box

Figure 3-16 The Set Page Title dialog box

Enter the name for the newdocument. Web page names shouldnot contain spaces. Use underscoresto create spaces in your documentnames

Select to openthe new page

Enter the title forthe Web page

Click to return tothe index page

Figure 3-17 Replacing an existing file with anew page title

The warning message boxopens because you are savingthe page with a new title

skill 6 Editing Hyperlinks (Cont’d)

15. Reopen the Index page and right-click the Skydiving Near You hyperlink. Open the EditHyperlink dialog box. Follow the procedure in steps 6 through 12 to change the link to anew page named local.htm and save the page with the new page the title Local Venues(Figure 3-18).

16. In the Folder List, right-click schedule_of_events.htm and click Properties to open theschedule_of_events.htm Properties dialog box.

17. In the Title text box, type Events (Figure 3-19).

18. Click to close the dialog box. Click .

19. Right-click the news.htm tab and click Close to close the page. Follow the same procedureto close each of the Web pages. If you are prompted to save the changes to any of thepages, click .

how to

extraIf no theme is applied, you can use the Page Properties dialog box to modify the format for hyperlinks. Right-click thehyperlink and click Page Properties. Click the Formatting tab. You can add a background picture for the hyperlink,change the background color, change the text, and change the colors for regular, followed (visited), and active texthyperlinks.

To change the text color for all hyperlinks in a Web to which a theme is applied, open the Customize Theme dialog boxfor the Web site default theme from the Theme task pane. Click the Colors button. On the Custom tab, in the Item listbox, select Hyperlinks, Hyperlink (Active) and Hyperlinks (Followed) in turn, and select a color in the Color list box.

To delete a hyperlink, select the hyperlink, open the Edit Hyperlink dialog box, and click. The text that you used to activate the link remains on the Web page. Only the link is

removed. You can also delete the hyperlink text directly from the Web page.


In the Caddy Shop Web, open best_selling_items.htm. Save it with the new nameproducts.htm. Change the page title to Products. Delete best-selling_items.htm. Change thetarget URL for the Products link to products.htm. Save the change. Use the tabs to close allopen pages in the Web.

Practice


Figure 3-19 A Web page propertiesdialog box

Figure 3-18 Saving a page with a new name andpage title

You can also change thepage title for a Webpage in the Propertiesdialog box for the page

skill 7 Adding Images

Graphics are used primarily for design purposes, but they can also add informative content.Although using images and photographs can make your Web site appealing to visitors, youmust use caution. Many Web site visitors still use dial-up Internet service providers, and eachgraphic you add increases the time it takes for a Web page to load in visitors’ browsers.

overviewInsert an image.


2. Position the insertion point between the title of the club and the table.

3. Open the Insert menu, point to Picture, and click Clip Art to open the Clip Art task pane.

4. In the Search for text box, type airplane and press [Enter] to display the results (Figure 3-20).

5. Click the second clip to insert it.

6. Close the Clip Art task pane (Figure 3-21).

7. Click . The Save Embedded Files dialog box opens.

8. Click to save the image in the Speed Demons Web. If the image is not saved inthe Web, or is accidentally saved in a folder in another Web, it will not appear in thepublished Web.

how to

extraThe best formats to save images in are GIF (Graphic Interchange Format) and JPEG (Joint Photographic ExpertsGroup). These formats compress large photographic files so that they take less time to load when published. Images youinsert that are not in GIF or JPEG format are automatically converted to GIF when FrontPage copies them to the Webpage folder.

Some Clip Art images may be inserted as WMF (Windows Meta File) files. WMF files can be viewed in InternetExplorer, but they may not display in other browsers, such as Netscape Navigator. However, you can convert a WMF fileto GIF. Double-click the image to open the Picture Properties dialog box (or right-click the image and click PictureProperties). Click the General tab and click the Picture File Type button to open the Picture File Type dialog box.Click the GIF option button and click OK to close the Picture File Type dialog box. Click OK to close the PictureProperties dialog box.

You can check the Estimated Time to Download box on the Status bar to find out approximatelyhow long it will take for a Web page to download. If you use many images on your Web, use thistool to ensure that your pages will load in a reasonable amount of time.


tipTo insert a picture fromyour hard disk, open theInsert menu, point toPicture and click FromFile to open the Picturedialog box. Use theLook in list box tolocate the file on yourcomputer and click theInsert button.

tipTo insert a picture fromyour hard disk, you canalso click the InsertPicture From File button

on the Standardtoolbar to open thePicture dialog box.

In the Caddy Shop Web, insert the Clip Art picture that you locate when you search for golfbelow the table in the Index page. Close the Clip Art task pane and save the embedded file.

Practice


Figure 3-20 The Clip Arttask pane

Figure 3-21 Image inserted in a Web page

Search results

Estimated Timeto Download

Inserted image

skill 8 Formatting Images

After you have inserted an image, you can modify and reformat it. You can resize the image,change its location, modify the colors and insert a border around the image. To reposition animage, you can either drag and drop it to a new location or cut and paste it to the new location.It is important to understand, however, that image layout is limited by what HTML cansupport. You can also use tables or cascading style sheets (CSS) (See Lesson 5) to positionimages. You can use the alignment buttons on the Formatting toolbar to position images, butimage alignment does not work exactly the same way as text and paragraph alignment.

overview

Format an image

1. On the Index page in the Speed Demons Web, click the image to select it. Sizing handlesappear at the corners and on each side of the image.

2. Move the pointer over the sizing handle in the lower-right corner of the image. When thepointer turns into a resizing arrow, click and drag upward to decrease the size of theimage so that the right and left edges of the image are even with the word Diving above(Figure 3-22).

3. Right-click the image and click Picture Properties to open the Picture Properties dialogbox.

4. On the Appearance tab, in the Layout section, enter 3 in the Border thickness spin box.(Figure 3-23).

5. Click to insert a 3 pt border around the image.

6. Click to save the changes to the file.

how to

extraYou use the midpoint sizing handles to resize an image either horizontally or vertically. To adjust an image horizontally,drag the right or left midpoint sizing handle. To adjust an image vertically, drag the top or bottom midpoint sizing handle.

To delete an image, select it and press the [Delete] key or position the insertion point after the image and press[Backspace]. To position an image on the Web page, you can use the alignment buttons (Align Left, Center, and AlignRight) on the Formatting toolbar or you can use the Alignment list box on the Appearance tab in the Picture Propertiesdialog box.

In the Picture Properties dialog box, the Specify size check box is selected by default. This means that the height andwidth of the image are specified in the HTML code. If you clear this check box, the height and width are set according tothe size of the image. In general, you should leave the Specify size check box selected because images load more quicklywhen the size is specified in the HTML code. The Keep aspect ratio check box is used to automatically adjust the heightof the image so that it stays in proportion to the width of the image.

You can also use the Pictures toolbar to format an image. To open the Pictures toolbar (if it does not open automaticallywhen you select an image), open the View menu, point to Toolbars, and click Pictures. You can use this toolbar to rotate,flip, crop, bevel, or to send the image in front or in back of the text. You can also adjust the contrast and brightness andwrite text over the top of the image.

When you create a Web, FrontPage automatically creates an images folder. If you intend to use a lotof images, you should move them to this folder. You can use the Save Embedded Files dialog box tosave images in the images folder. This is a good file-management practice that enables you to quicklylocate images.


tipIf the image is ahyperlink the border isinserted in the hyperlinkcolor.

tipThe Wrapping styles areused to designate howthe text surrounding theimage is displayed inrelation to the image.


Figure 3-22 Resizing an image

Figure 3-23 The Picture Properties dialog box

Sizing handles

Use to set the horizontalspacing between the imageand the nearest text orimage in pixels

Use to set a precise widthfor the image either inpixels or as percentage ofthe width of the originalimage

Use to set the vertical spacingbetween the image and thenearest text or image on theline above or below in pixels

Use to set a precise heightfor the image either in pixelsor as a percentage of theheight of the original image

skill 9 Image Mapping

An image containing multiple links is called an image map. You can use the Pictures toolbar to easily create a link, or multiple links, from an image to other pages in a Web. The individual hyperlinks on an image map are referred to as hotspots. The Pictures toolbar contains three buttons for creating hotspots of different shapes.

overviewCreate a hotspot on an image

1. On the Index page in the Speed Demons Web, click the image to select it.

2. Open the View menu, point to Toolbars and click Pictures to open the Pictures toolbar.

3. If necessary, use the Title bar to drag the Pictures toolbar to a location on the screen whereit does not cover the image. You can dock the toolbar either below the Formatting toolbaror above the Status bar if you prefer.

4. Click the Circular Hotspot button on the Pictures toolbar. (Figure 3-24).

5. Use the pencil pointer to draw a circle around the airplane. Start in the middle of theairplane and drag outward to create the circle. If it is not exactly as you want it, you canuse the sizing handles to adjust the shape after you insert the hyperlink (Figure 3-25 onpage FP 3.31).

6. The Insert Hyperlink dialog box opens. Click the Create New Document button.

7. In the Name of new document text box, type table_of_contents.htm. Click .

8. Close the Pictures toolbar.

9. Open the File menu and click Save As to open the Save As dialog box.

10. Click to open the Set Page Title dialog box.

11. Type Table of Contents in the Page title text box and click .

12. Click . Click to save the page with the title change.

13. Click the Index.htm tab to return to the Index page.

14. Click the Preview tab. Notice that the pointer turns into a hand over the airplane as itwould over any other hyperlink, but not when it is over part of the image that is notmapped.

15. Open the File menu, point to Preview in Browser and click Microsoft Internet Explorer6.0. Click the image to open the linked page.

16. Close Internet Explorer and return to Design view.

17. Save the changes, and use the tabs to close all open Web pages. If you are prompted tosave the changes to any of the pages, click .

how to


tipYou can use either theCircular Hotspot orPolygonal Hotspotbutton on the Picturestoolbar to moreprecisely conform to theshape of the chosen areaon the image.

tipYou can insert as manyhotspots as will fit on animage. However, youshould choose an imagewith easilydistinguishable areas sothat visitors can discernwhere the links are.

tipTo change the link for ahotspot, double-click thehotspot to open the EditHyperlink dialog box.Change the URL in theAddress list box orbrowse to locate thepage or file.

tipTo delete a hotspot,select it and press the[Delete] key.


Figure 3-24 The Pictures toolbar

InsertPictureFromFile

Click toinsert textover animage

MoreContrast

MoreBrightness

Click tocreate athumbnailof theimage

PositionAbsolutely

BringForward

SendBackward

Rotate Left90º

LessContrast

Crop

Bevel

RectangularHotspot

CircularHotspot

PolygonalHotspot

LessContrast

skill 9 Image Mapping (Cont’d)

extraPages, and Recent Files buttons to locate the page or file.

You can also turn the entire image into a hyperlink. Click the image, open the Insert menu, and clickHyperlink to open the Insert Hyperlink dialog box. For an existing file or Web page, enter the URLfor the page in the Address list box or use the Look in list box or the Current Folder, Browsed


On the Index page in the Caddy Shop Web, create a hotspot on the golfer picture. Link to a newfile, frequently_asked_questions.htm. Save the page with the title FAQ and close all open Webpages.

Practice


Figure 3-25 Creating a Hotspot

A hotspot

Use the sizing handlesto adjust the shape ofthe hotspot

skill 10Creating an InteractiveButton

An interactive button is a hyperlink button that looks different when a user points to it orhovers the mouse pointer over it. Interactive buttons replace hover buttons in earlier versionsof FrontPage. They have a more sophisticated design and can be modified in many more waysthan hover buttons. Interactive buttons can be rounded, shiny, or beveled, capsule shaped,rectangular or tab shaped. FrontPage creates the image files; however, when you save the Web page you are prompted to save them in the Web. There are three image files: the originalimage, the hover image, and the pressed image. The original image is how the button looksnormally, when the pointer is not hovered over it and it is not pressed. The hover image ishow it looks when the pointer is hovered over it, and the pressed image is how it looks whenit is clicked and the mouse button is held down.

overview

Create an interactive button.

1. In the Speed Demons Web, open the organizational_goals.htm page.

2. Position the insertion point below the last line of text.

3. Open the Insert menu and click Web Component to open the Insert Web Componentdialog box.

4. In the Component type list box, Dynamic Effects is selected by default (Figure 3-26).

5. In the Choose an effect list box, double-click Interactive Button to open the InteractiveButtons dialog box.

6. In the Buttons list box, scroll down and select Embossed Capsule 9.

7. In the Text text box, type Home. When the Web page is opened in a browser and inPreview view, Home will identify the interactive button.

8. Click the Font tab. In the Original Font Color list box, select the brown square in theTheme Colors section.

9. In the Hovered Font Color list box, select the tan/orange square in the Theme Colorssection.

10. In the Pressed Font Color list box, select the Teal square in the Standard Colors section(Figure 3-27).

11. Click the Image tab. The Width and Height spin boxes are used to change the size of the image. Unlike other images, you cannot resize interactive buttons in Design view(Figure 3-28).

12. Click the Button tab. Click to open the Edit Hyperlink dialog box.

13. Click the Existing File or Web Page button, if necessary.

14. In the Current Folder, select Index.htm to link the interactive button on theOrganizational Goals page to the Index page.

15. Click to close the Edit Hyperlink dialog box.

how to


tipYou can also click theWeb Component button

on the Standardtoolbar to open theInsert Web Componentdialog box.

tipTo edit and makeformatting changes to an interactive button,right-click it and selectButton Properties toopen the InteractiveButtons dialog box.

tipWhen you save aninteractive button, theimage file names areautomatically entered as button followed by a unique number orletter. If you use severalinteractive buttons inyour Web, you shouldchange the defaultnames to better identifythe buttons.


Figure 3-26 The Insert Web Component dialog box

Figure 3-27 The Interactive Buttons dialog box

Use to change the font,apply a style and changethe size of the button text

Position the mouse pointer overthe button to preview the hoveredeffect. Click the button (hold downthe mouse button) to preview thepressed effect

Use to modify the font coloron an interactive button

Figure 3-28 The Image tab

JPEGs have a solidbackground; GIFs canuse a transparentbackground

skill 10Creating an InteractiveButton (Cont’d)

16. Click to close the Interactive Buttons dialog box.

17. Click the interactive button and click on the Formatting toolbar to center the button onthe page.

18. Click . The Save Embedded Files dialog box opens. There are three button images, onefor each of the button states (Figure 3-29).

19. Click to open the Change Folder dialog box.

20. Click the images folder and click to close the dialog box (Figure 3-30).

21. Click to close the Save Embedded Files dialog box and save the interactivebutton images in the images folder in the Speed Demons Web.

22. Open the File menu, point to Preview in Browser and click Microsoft InternetExplorer 6.0.

23. Internet Explorer may block active content. If so, click the security warning below theAddress bar and select Allow Blocked Content. Click to close the SecurityWarning dialog box that cautions you about active content.

24. Move the pointer over the interactive button to see the font color change (Figure 3-31). If the font color does not change, go back and complete step 20. Notice that cornersdisplay around the image. This is because JPEG images have a solid background (See the Extra section.).

25. Click the interactive button to open the Index page.

26. Close Internet Explorer.

27. Right-click the organizational_goals.htm tab and click Close to close the page.

how to

extraWeb page. The key function in the JavaScript code for an interactive button is the Swap Image function, which instructsthe browser to switch between the original, hovered, and pressed images in response to the user.

On the Image tab in the Interactive Button dialog box, you can make the interactive button images either JPEGs orGIFs. JPEG (Joint Photographic Experts Group) files can display literally millions of colors. This wide range of colors isnecessary because rounded, beveled, embossed and shiny effects require many color gradations. The advantage to usingJPEG images is that the buttons appear smooth and rounded because of the many gradual color changes. However, evenrounded JPEG button images have a solid background. This can cause a problem if the background of the page is not asolid color. As long as the page background is solid, you can make the JPEG background color the same as the pagecolor and the JPEG background is not visible. However, if the page background is not a solid color, the JPEG buttonimage background may be visible and four corners are seen at the edges of the button. GIF (Graphic Interchange Format)files can only use 256 colors, which means that the color gradations needed to create smooth special effects are notavailable. However, GIF files can use a transparent background, so you can avoid the problem of the four cornersappearing around the edges of a round button.

Older browsers cannot read JavaScript. In order for your Web site visitors to view interactive buttons, they must useInternet Explorer 3.0 or later, Netscape Navigator 3.0 or later, or Opera 3.0 or later.

Interactive buttons are powered by JavaScript, a scripting language used to create interactive effects.HTML alone cannot provide interactive effects. JavaScript is also used to create date and timedisplays, alert messages, and calculators. The JavaScript code is inserted in the head section of the


tipWhen you delete aninteractive button, youmust also delete thethree image files. Theyare not automaticallydeleted.

In the Caddy Shop Web, add an interactive button below the numbered list on the products.htmpage to link to the Index page. Use the Metal Tab 9 button and make the button text Home.Change the font, font style, size and original, hovered, and pressed font colors in any way youchoose. Save the button image files in the images folder.

Practice


Figure 3-29 Saving the button images

Figure 3-30 The Change Folder dialog box

Figure 3-31 An interactive button in the hovered state in IE

There are three buttons images: theoriginal image, the hover image, andthe pressed image; change the defaultnames to better identify the buttons ifyou use several interactive buttons inyour Web

skill 11 Creating a Marquee

A marquee is scrolling text that flows across the Web page. Animated text is used to attractvisitors’ attention to important text. While some Web designers favor the use of marquees,others think they are distracting to visitors and do not advocate their use. Therefore, youshould use marquees sparingly. Scrolling marquees are supported by Internet Explorer, but notall other browsers. In browsers that do not support scrolling text, visitors see the marquee text,but not the special effect.

overview

Add a marquee

1. Open the Index page in the Speed Demons Web in Design view.

2. Place the insertion point in front of the S in Speed Demons.

3. Open the Insert menu and click Web Component to open the Insert Web Componentdialog box.

4. In the Component type list box, Dynamic Effects is selected by default. In the Choose aneffect list box, double-click Marquee to open the Marquee Properties dialog box.

5. In the Text text box, type Come Fly With Us.

6. In the Behavior section, select the Alternate option button (Figure 3-32).

7. Click to close the Marquee Properties dialog box.

8. Click the marquee text to select it. Sizing handles surround the marquee.

9. On the Formatting toolbar, click the list arrow on the Font Size list box and select 6 (24 pt).


11. Switch to the Preview view. The marquee text moves back and forth across the screen(Figure 3-33).

how to

extraAs you saw in the skill, to format a marquee, you must first select it so that sizing handles surround the marquee. Thesizing handles are used to increase or decrease the space in which the marquee scrolls. To format the text, either use thebuttons on the Formatting toolbar or open the Format menu and click Font to open the Font dialog box.

Although marquees typically appear at the top of a page, you can place them wherever you wish. Ifyou position the insertion point at the end of a line of text, the marquee is inserted on the next line.As you saw in the Skill, if you position the insertion point before a line of text, the marquee isinserted one line above it.


On the Index page in the Caddy Shop Web, insert a marquee at the top of the page that says,For All Your Golfing Needs. Set the marquee to slide across the screen and increase the speed(Amount) to 10. Save the change.

Practice


Figure 3-32 The Marquee Properties dialog box

Figure 3-33 Marquee sliding across a Web page

Controls how themarquee moves

Marquee

skill 12 Creating Forms

Forms are used to collect information from Web site visitors. For example, sometimes visitorsare required to complete a registration form before they can use a Web site. Other examples offorms include guest books, feedback forms, product order forms, shipping and billing forms,surveys, and log in boxes. When you create a form, initially only a Submit and a Reset buttonare inserted on the Web page. You must create the additional data entry form fields. Formfields include text boxes, text area boxes, option buttons, check boxes, and drop-down boxes.After you insert a form field you must assign a name-value pair to the field. When a usersubmits a form, the value the user enters in the field is matched with the name of the field, forexample, username: John. The name identifies the question and the value is the answersubmitted by the user.

overview

Create a form, add form fields, and assign name-value pairs

1. Open the Index page in the Speed Demons Web in Design view.

2. Open the File menu and click New to open the New task pane.

3. In the New page section click Blank page to create a new blank page in the default themefor the Web.

4. Press [Enter] three times.

5. Open the Insert menu, point to Form, and select Form. Two buttons, Submit and Resetare inserted on the page.

6. Position the insertion point before the Submit button and press [Enter].

7. Press the up arrow key [↑]to position the insertion point one line above the buttons, typeName: and press [Spacebar].

8. Open the Insert menu, point to Form and select Textbox to insert a text box in the form(Figure 3-34).

9. Right-click the text box and select Form Field Properties to open the Text Box Propertiesdialog box.

10. Type username in the Name text box. The name identifies the question and designates thetype of information you are prompting the user to enter (Figure 3-35).

11. In the Initial value text box, you can enter text that will be visible to the user in the text box.You can use this value to indicate to the user the data you want them to enter. For exampleyou could enter name here and the user would replace this value with the appropriate input.When the form is submitted, the user input value is matched with the name.

12. Click to close the Text Box Properties dialog box.

13. Position the insertion point after the text box and press [Enter]. Type E-mail: and press[Spacebar].

14. Open the Insert menu, point to Form, and select Textbox.

15. Right-click the text box and select Form Field Properties to open the Text Box Propertiesdialog box.

16. Type email in the Name text box.

how to


tipYou can also insert aform on a page youhave already created. A form does not have to be on a separate page.

tipIf the default setting hasbeen changed, open theTools menu and selectPage Options to openthe Page Options dialogbox. On the General tab,select the Automaticallyenclose form fieldswithin a form checkbox.

tipYou can also create aform by inserting a textbox on a page. The default setting is for FrontPage toautomatically insert the Reset and Submitbuttons when you inserta text box.

Figure 3-35 The Text Box Properties dialog box


Figure 3-34 Creating a form

Text box

Identifies the name half ofthe name-value pair; enterthe type of informationyou want the user to enter

Enter the number of characters theuser will be able to see in thetextbox; this does not restrict thenumber of characters, but indicateshow many characters are visible

Identifies the value half of thename-value pair; you can enteran initial value to prompt theuser to enter the correct data

Form buttons

skill 12 Creating Forms (Cont’d)

17. Type 35 in the Width in characters text box. The default width is 20 characters. The valueyou enter here does not designate the number of characters that can be entered. Itdesignates the number of characters that are visible in the text box. The user can entermore characters than the width of the text box.

18. Click to close the Text Box Properties dialog box.

19. Position the insertion point after the text box and press [Enter]. Type Describe your firstskydiving experience: and press [Spacebar].

20. Open the Insert menu, point to Form, and click Text Area.

21. Right-click the text area box and select Form Field Properties to open the TextArea BoxProperties dialog box.

22. Type first_experience in the Name text box.

23. Type 35 in the Width in characters text box.

24. Type 6 in the Number of lines text box to designate the height for the text area box. The default height is two lines. This does not restrict the number of lines the user canenter; it is the number of lines that are visible in the text area box as the user is typing(Figure 3-36).

25. Click to close the TextArea Box Properties dialog box.

26. With the text area box still selected, open the Edit menu and click Quick Tag Editor toopen the Quick Tag Editor. You may have to expand the menu.

27. Text does not automatically wrap for Netscape users. To force text wrapping for all users,in the Edit Tag box, after cols=“35”, type wrap (Figure 3-37).

28. Click Enter to close the Quick Tag Editor and save the HTML code change. The textin the text area box will now wrap for all users.

29. Position the insertion point after the text area box and press [Enter].

30. Click to open the Save As dialog box. In the File name list box, type feedback_form.htm.

31. Click to open the Set Page Title dialog box.

32. Type Feedback Form in the Page title text box.

33. Click to close the Set Page Title dialog box.

34. Click .

35. Switch to Preview view. When you switch to the Preview view, a message, To view allelements in this page correctly, save or publish the page, and preview it in a Webbrowser, displays below the page tabs. Ignore it for now. The form page should look likeFigure 3-38.

how to


tipText boxes are limited to a maximum of 500characters. For multiplelines of input, use a textarea box.

tipYou can also press [Ctrl]+[Q] to open the Quick Tag Editor.

tipTo reposition a text box,use the pointer to dragthe text box to thecorrect location on theform.

extrafield. The tab order is the order in which the form fields receive the focus as a user is pressing the [Tab] key. You can also designate a field as a Password field. In a password field, when the user types, asterisks are entered to shield thepassword from view.

To resize a form field, you can also select it and use the sizing handles to adjust the dimensions. To format a form field, right-click it and select Form Field Properties to open the Properties dialogbox for the type of form field. In the Properties dialog box, you can also set the Tab order for the

In the Caddy Shop Web, create a new page and insert a form. Create two text boxes: Name: andE-mail: Set the Width in characters for both fields to 35. Create one text area box: Describeyour golf club requirements: Set the Number of lines to 5. Save the file as feedback_form.htmwith the title Feedback Form.

Practice


Figure 3-36 The TextArea Box Properties dialog box

Figure 3-37 The Quick Tag Editor

Figure 3-38 Form in Preview view

Enter the number of lines theuser will be able to see in thetext area box; designates theheight of the text area box

the form fields are readyto be completed andsubmitted

Editing the HTML code sothat text will wrap in the textarea box in all browsers

skill 13Adding Check Boxes andOption Buttons

Check boxes are used to submit yes or no answers and to allow users to select one or moreoptions from a group of possible options. Option buttons are generally created for questionswhere there are several possible answers, but only one can be selected. Check boxes andoption buttons make data entry easier for users by allowing them to answer questions with aclick of the mouse.

overview

Add a check box and option buttons to a form and assign the name-value pairs

1. Open the Feedback Form page in the Speed Demons Web in Design view.

2. Position the insertion point before the word Name and press [Enter].

3. Press the up-arrow key [↑]to position the insertion point one line above the Nametext box.

4. Type Check if you have gone skydiving before:. Press [Spacebar].

5. Open the Insert menu, point to Form and click Checkbox to insert a check box (Figure 3-39).

6. Right-click the check box and select Form Field Properties to open the Check BoxProperties dialog box.

7. In the Name text box, type previous_experience.

8. The Value text box says ON. This is the default value for a check box (i.e. On or Off).Since this is a Yes/No answer, type YES in the Value text box. Yes/No and On/Off are twovariations of the same value.

9. The Initial state is set to Not checked by default. The check box will be empty on theform (Figure 3-40).

10. Click to close the Check Box Properties dialog box.

11. Position the insertion point after the check box and press [Enter].

12. Type How many times? Press [Enter].

13. Open the Insert menu, point to Form and click Option Button to insert an option button.

14. Type: 1-5. Right-click the 1-5 option button and click Form Field Properties to open theOption Button Properties dialog box.

15. Type number_times in the Group name text box. In a group of option buttons the groupname must be the same for each button in the group. It is the matching group name thatrestricts users to selecting only one option.

16. In the Value text box, type 1-5. The value for an option button is not visible in the form asit is in a text box. The value identifies the option the user selects (Figure 3-41).

17. Click to close the Option Button Properties dialog box.

18. Position the insertion point after the 5 and press [Tab].

19. Open the Insert menu, point to Form and click Option Button to insert an option button.Type 6-10.

how to


tipIn order to be used in form scriptinglanguages, entries in the Name text box must start with a letteror an underscore. Allsubsequent charactersmust be letters, digits, or underscores.

tipTo enable site visitors to select a check box byclicking either the labelor the check box, selectthe text and the checkbox, open the Insertmenu, point to Form,and click Label.


Figure 3-39 Inserting a check box

Figure 3-40 The Check Box Properties dialog box

Figure 3-41 The Option Button Propertiesdialog box

Check box

The initial state designateswhether or not the optionbutton is selected. Thedefault is to select the firstoption in a group

ON is the default valuefor a check box. If a userchecks the selection, theoption is on (YES)

The initial state designateswhether or not the checkbox is selected on the form

skill 13Adding Check Boxes andOption Buttons (Cont’d)

20. Right-click the 6-10 option button and click Form Field Properties to open the OptionButton Properties dialog box.

21. number_times has been automatically entered in the Group name text box. After you set thegroup name, all subsequent option buttons you insert have the group name automaticallyentered. If you create the buttons before you set the group name, you must set the same groupname for each button in the group individually. In the Value text box, type 6-10.


23. Position the insertion point after the 10 and press [Tab].

24. Add another option button and type 11 or more.

25. Open the Option Button Properties dialog box for the 11 or more option button.number_times has been automatically entered as the group name. Type 11 or more in theValue text box (Figure 3-42).



28. Switch to the Preview view. Your page should look like Figure 3-43.

how to

extrahave a value of send. The name-value pairs submitted could be, for example: Soup: send, Chili: send

You can create validation rules for most types of form fields. Validation rules are used to reduce data entry errors. Theycheck the data entered by a user and return an error message if the data is entered incorrectly. For example, you cancreate a validation rule for a text box to allow it to only accept letters. If a number is entered, an error message displays.For text boxes and text area boxes, you can set the data type and the number of characters to allow and you can require afixed number of characters. For option buttons, you can create a validation rule that requires at least one of the options tobe selected. To set a validation rule for a text box, right click it and select Form Field Properties to open the Text BoxProperties dialog box. Click the Validate button to open the Text Box Validation dialog box. You can select the Datatype (Text, Integer, Number), the Text format (if you select Text as the data type) the Numeric format (if you selecteither Integer or Number as the data type), and the Data length. If you select Required in the Data length section, youcan set both a minimum and a maximum length. You can also use the Data value section to set conditions for the field(Greater than, Greater than or equal to, Equal to, Not equal to, Less than, and Less than or equal to) (Figure 3-44).

In a group of check boxes, where the user can select more than one answer, change the default valueto identify the question being asked or the data to be entered. For example, if the group of checkboxes is recording the products users are interested in receiving e-mails about, each check box could


tipYou cannot create avalidation rule for acheck box. If you thinka validation rule isneeded to ensure thatdata is entered correctly,use an option button ora drop-down boxinstead.

On the Feedback Form in the Caddy Shop Web, create a check box with the text, Do you owngolf clubs? Set the name for the check box to own_clubs and the value to YES. Create fouroption buttons with the text, 1-3, 4-6, 7-10, and more than 10. Set the group name tonumber_clubs and the values to match the option button labels. Save the changes to the form.

Practice


Figure 3-42 Setting propertiesfor an option button group

Figure 3-43 Form in Preview view

Figure 3-44 The Text Box Validationdialog box

If you set the group name before you create the subsequent optionbuttons, the group name isautomatically entered

Select the data type(Text, Number, orInteger)

Optionbuttons

Choose how you wantnumbers to display: with acomma separator, a period,a space or no demarcation

skill 14Creating a Drop-DownBox

Drop-down boxes are used for form fields that have multiple possible selections. Theysimplify data entry by enabling users to select from a list of choices rather than typing ananswer. Drop-down boxes also save space on the form as opposed to creating many checkboxes or option buttons. The menu is only visible when a user clicks the list arrow. The rest of the time, all of the possible choices are hidden from view. Creating a drop-down list is a bitlonger process than adding the other form fields. First you must insert the drop-down box, andthen you must add each of the values for the list. The name-value pairs are the name assignedto the drop-down box and the values on the list. Drop-down boxes can be configured to acceptonly one or multiple selections.

overview

Add a drop-down box to a form and create the name-value pairs.


2. Position the insertion point after the text area box.

3. Press [Enter]. Type In what area of the country do you live?

4. Press [Spacebar] three times.

5. Open the Insert menu, point to Form, and select Drop-Down Box to insert a drop-downbox.

6. Double-click the drop-down box to open the Drop-Down Box Properties dialog box.

7. Type Location in the Name text box.

8. Click to open the Add Choice dialog box. Type Northeast in the Choice textbox (Figure 3-45).

9. In the Initial State section, make sure the Not selected option button is selected. Clickto close the Add Choice dialog box.

10. Follow the procedure in steps 8-9 to add Southeast, Midwest, Southwest, Rockies,Northwest, California, Alaska, and Hawaii.

11. When you are finished the Drop-Down Box Properties dialog box should look like Figure 3-46.

how to


tipTo change the order ofthe items on the drop-down list, open theDrop-Down BoxProperties dialog box.Select a menu item inthe Choice column andclick the Move Up orMove Down button.

tipIf you want to create ascrolling list box, whichdisplays some of thechoices on the form,enter the number ofchoices you want todisplay in the Heightbox. For example, if themenu has only threeoptions, enter 3 in theHeight box to make allthree menu items visibleon the form.


Figure 3-45 The Add Choice dialog box

Figure 3-46 The Drop-Down Box Properties dialog box

Select to make themenu option thedefault (pre-selected)value

Use to set the order inwhich you want the field toreceive the focus (a numberfrom1-999); to skip a fieldin the tab order, enter -1

Select if you want theform results todisplay a differentvalue than the entryin the Choice textbox. Enter the valueyou want the formresults to show in thetext box

skill 14Creating a Drop-DownBox (Cont’d)

extraTo change one of the list values in a drop-down box, open the Drop-Down Box Properties dialog box, select the value inthe Choice column, and click the Modify button to open the Modify Choice dialog box.

Validation rules for drop-down boxes include making at least one selection from the list mandatory, setting the minimumand maximum number of choices users can make, and preventing users from selecting the first option on the list. This isdone, for example, when the first menu item is used to give users an instruction.

In the skill, you left Not selected as the initial state for each option button. Set the initial state toSelected if you think one of the answers will be chosen by the majority of your visitors. If the userwants the default option selected, he or she can skip the field, but if the option is incorrect, the usercan select another option.


12. In the Allow multiple selections section, make sure the No option button is selected.

13. Click to close the Drop-Down Box Properties dialog box.


15. Switch to the Preview view. Click the list arrow on the drop-down box to view the menu(Figure 3-47). On drop-down boxes, the menu can either open downward or upwards. If there is not enough space on the page below the box to accommodate all of the options,the menu opens upwards.

how totipThe Allow multipleselections option in theDrop-Down BoxProperties dialog box isset to No by default. Ifyou want to allow yourvisitors to makemultiple menuselections, select the Yesoption button instead.You must include aninstruction on the formto tell users to holddown the [Ctrl] keywhile they make theirselections.

On order_form.htm in the Caddy Shop Web, create a Payment Method drop-down boxbetween the Billing and Shipping sections. Name the field payment_method. Your list shouldinclude Credit card, Debit card, Cash-on-Delivery, Paypal, Check, and Money order. Savethe changes to the form.

Practice


Figure 3-47 A drop-down box on a form

Drop-down box

skill 15 Creating a Push Button

Push buttons are yet another form field. Most Web authors leave the Reset and Submitbuttons at the bottom of the form page. However, it may sometimes be convenient to have anadditional Reset or a Submit button at an earlier point in the form. In these cases, a pushbutton can be inserted. A push button can also be used to answer a yes or no question.

overviewCreate a push button and assign the name-value pair.


2. Position the insertion point after the check box at the top of the page.

3. Press [Tab] five times.

4. Open the Insert menu, point to Form, and click Push Button to create a push button in thespecified location. You may have to expand the menu to locate the Push Button command.

5. Double-click the button to open the Push Button Properties dialog box.

6. In the Name textbox, type Reset. The push button name usually indicates the function forthe button.

7. In the Value/label text box, type Reset. The push button value is visible to users. It is thetext on the button.

8. In the Button type section, select the Reset option button (Figure 3-48).

9. Click to close the Push Button Properties dialog box.


11. Open the File menu, point to Preview in Browser, and select Microsoft InternetExplorer 6.0.

12. If necessary, click the security warning below the Address bar and select Allow BlockedContent. Click to close the Security Warning dialog box.

13. Use the [Tab] key to tab through the form fields and test the tab order. The tab order skipsthe option buttons that are not selected and proceeds to the Name text box. Use the arrowkeys to select a different option button. Your form should now look like Figure 3-49.

14. Close Internet Explorer.

15. Right-click the feedback_form.htm tab and select Close to close the form.

how to

extraprocessing script. There are a number of different types of form scripts you can use depending on your Web server.

To specify where to submit a form, right-click the form and select Form Properties to open theForm Properties dialog box. Click the Browse button to locate the folder where you want the formresults to be saved. You can also send completed forms to an e-mail address, database, or form


tipIf the tab order does not follow the desiredsequence, open theProperties dialog boxfor each form field and enter the correctnumbers in the Taborder text boxes foreach form field.

tipUse the Options sectionin the Form Propertiesdialog box to specifywhat fields to save andwhere to save the dataresults.

On the order_form.htm page in the Caddy Shop Web, add a Reset button below the Shippingsection. Assign the name-value pair. Save the changes. Preview the page in a browser and test thetab order. Close IE and the page.

Practice


Figure 3-48 The Push Button Properties dialog box

Figure 3-49 The completed form in Internet Explorer

The Normal option is used if youare going to use custom scripts(e.g., JavaScript) to process theform

Enter the textfor the button

Click to clearall data onthe form


Insert TTable Click Table, point to Insert, [Alt]+[A], [I], [T]and click Table

Insert HHyperlink Click Insert, click Hyperlink [Ctrl]+[K]

Insert PPicture Click Insert, point to Picture, [Alt]+[I], [P], [F]From FFile and click From File

Insert WWeb Click Insert, click Web Component [Alt]+[I], [C]Component


quizA. Identify Key Features

Name the items indicated by callouts in Figure 3-50.

B. Select the Best Answer

11. These are used to format a page or an entire Web with a. Estimated Time to Downloadsimilar fonts, color schemes, and other format options.

12. These are used to create a hyperlink over a specific area of an image b. Option buttons

13. Hyperlink buttons that look different when a user points to them. c. JavaScript

14. Animated (scrolling) text on a Web page d. Themes

15. The location on the Status bar where you can check approximately e. Name-value pairhow long it will take for a Web page to download

16. Form field used for questions where there are several possible answers, f. Keep aspect ratiobut only one can be selected.

17. The form field component that designates how data is submitted to a file, g. Hotspotse-mail address, database, or form script.

18. The scripting language used to create interactive buttons, date and time h. Drop-down boxdisplays, alert messages, and calculators.

19. The option used to automatically adjust the height of an image so that it i. Marqueestays in proportion to the width of the image

20. Form field that has multiple possible selections on a list j. Interactive buttons

1.

2.

3.

4.

5.

6.

7.

8.

9.

Figure 3-50 Formatting buttons and elements

10.


quiz (continued)

21. You can perform every function in the InsertHyperlink dialog box except:

a. Color the hyperlink

b. Link to a new page

c. Create a link that sends an e-mail

d. Search for a browsed page to link to

22. The file formats used on Web pages (becausethey compress large photographic files so thatthey take less time to load are):

a. RIFF and WMF

b. JIFF and GIF

c. GIF and JPEG

d. TIFF and BMP

23. . To align the text in the cells of a table:

a. Use the Horizontal alignment and Verticalalignment list boxes in the Layout section inthe Table Properties dialog box.

b. Use the Horizontal alignment and Verticalalignment list boxes in the Insert Rows orColumns dialog box.

c. Use the Horizontal alignment and Verticalalignment list boxes in the Font dialog box

d. Use the Horizontal alignment and Verticalalignment list boxes in the Layout section inthe Cell Properties dialog box.

24. Each interactive button has three image files:

a. The original image, the hover image, and thepressed image

b. The original image, the interactive image, andthe browser image

c. The browser image, the hover image, and theactive image

d. The regular image, the followed image andthe active image

25. You must assign this to all form fields so thatdata submitted by users is in a useable formatfor a form handling script.

a. A title and a tag

b. A name-value pair

c. A name-quantity pair

d. An identifier and a number

26. Text boxes are limited to a maximum of 500characters. For multiple lines of input, use a:

a. Drop-down box

b. Group of option buttons

c. Group of check boxes

d. Text area box

27. You can create a validation rule to reduce dataentry errors such as allowing users to enter onlyletters in a text box, for all form fields except:

a. drop-down box

b. option button

c. text area box

d. check box

28. To turn a drop-down box into a scrolling listbox, which displays some of the choices on theform:

a. Enter the number of choices you want todisplay in the Width in characters text box inthe Down Box Properties dialog box.

b. Enter the number of choices you want todisplay in the Height box in the Drop-DownBox Properties dialog box.

c. Enter the number of choices you want todisplay in the Tab order text box in the Drop-Down Box Properties dialog box.

d. Enter the number of choices you want todisplay in the Number of lines text box in theDown Box Properties dialog box.



interactivity1. Create and format a list

a) Open the Water Taxi Web.

b) Open the File menu and click New to open the New task pane.

c) Click Blank page to create a new blank page in the Web.

d) Create a bulleted list for the water taxi destinations: Ocean Harbor, Lee Beach, Red Sands Cove, Bay SandsBeach, Cherry Road, Blue Birch Point, and Tom’s Grand Cove.

e) Change the font and font size for the list to Arial 4(14 pt).

f) Save the page as destinations.htm with the page title Destinations.

2. Insert a table

a) Create another new page.

b) Insert a table to organize the seven destinations and their associated fees: $8.50, $6.50, $7.75, $10.00, $8.25, $4.50,and $15.00, respectively.

c) Save the page as fees.htm with the page title Fees.

3. Apply a theme to a Web

a) Open the Format menu and click Theme to open the Theme task pane.

b) Apply the Pixel theme to the Water Taxi Web as the default theme for the Web.

c) Use the Sumi Painting theme to design a custom theme. In the Customize Theme dialog box, click the Colorsbutton.

d) On the Custom tab, change the background color to Silver.

e) Change the Heading 1 text to Blue and the Heading 2 text to Teal.

f) Save the theme as Modified Sumi Painting and apply it as the default theme for the Web.

4. Create hyperlinks

a) Open the Index page in the Water Taxi Web.

b) Create hyperlinks for the text in each cell in the table. Select the text Fees and create a link to the newly created Feespage. Select the text Information and create a link to the Destinations page.

c) For the rest of the cells in the table, create a new document and link the text to the new page (reservations.htm,maps.htm, and crews.htm). Link the text E-mail Us to info@johnnys_water_taxi.com.

d) Right-click each of the three new pages in the Folder List and click Properties to open the Properties dialog box. In the Title text box, type the appropriate title (Reservations, Maps, and Crews) and click OK to assign a page titleto each page.

e) Save the changes and open the Index page in Microsoft Internet Explorer. Test the links. Use the Back button on theStandard Buttons toolbar to return to the Index page as you test each link.

f) Close Internet Explorer.

Build Your Skills


5. Add images and create a hotspot

a) On the Index page in the Water Taxi Web, position the insertion point one line below the table.

b) Click the Insert Picture From File button on the Standard toolbar to open the Picture dialog box.

c) Use the Look in list box to navigate to your Data Files folder. Open the Lesson 3 folder, select WaterTaxi.gif andclick the Insert button.

d) Select the image and center it on the page.

e) Click just after the image and press [Delete] three times to move the text Safe, rapid transport to your islanddestination directly below the image.

f) Save the page. Save the embedded file in the images folder.

g) Open the Destinations page and insert WaterTaxi2.gif below the bulleted list.

h) Click the image and use the sizing handle in the lower right corner to decrease the size of the image.

i) Open the Pictures toolbar and draw a rectangular hotspot around the boat. Create a hyperlink to reservations.htm.

j) Close the Pictures toolbar and save the changes. Save the embedded file in the images folder.

k) Use the tabs to close all open Web pages and save the changes if necessary.

6. Create a marquee and an interactive button

a) On the Index page in the Water Taxi Web, select the company name.

b) Click the Web Component button on the Standard toolbar to open the Insert Web Component dialog box.

c) Double-click Marquee to open the Marquee Properties dialog box. Click OK.

d) Switch to Preview view to view the marquee.

e) Open the Destinations page in Design view.

f) Click the Web Component button on the Standard toolbar to open the Insert Web Component dialog box.

g) Double-click Interactive Button to open the Interactive Button Properties dialog box. Type Home in the Text text box.

h) In the Buttons list box, select Soft Capsule 6.

i) Click the Browse button. Click the Existing File or Web Page button, if necessary. In the Current Folder, selectindex.htm and click OK.

j) Switch to Preview view and point to the button. Note the change. Click the button and hold down the right mousebutton. Note the change.

k) Return to Design view. Save the changes. In the Embedded files to save box, select the first button image and clickthe Rename button. Notice the picture in the Picture preview box. Name the button destinations_hover.jpg. Clickthe second button. Rename it destinations_pressed.jpg. Click the third button. Rename it destinations_original.jpg.Save the embedded files in the images folder.

7. Create a form, insert a drop-down box, and set the name-value pairs

a) In the Water Taxi Web, open the Reservations page.

b) Open the Insert menu, point to Form, and click Form.

c) Press [Enter] two times.

d) Press the up arrow key two times and type What is your destination?.



e) Press [Spacebar] and insert a drop-down box.

f) Double-click the drop-down box to open the Drop-Down Box Properties dialog box. Type Destination in theName text box.

g) Add values for the seven destinations on the bulleted list on the Destinations page.

8. Create an option button group and set the name-value pairs

a) In the Water Taxi Web, on the Reservations page, position the insertion point after the drop-down box and press[Enter].

b) Type How many people in your party?

c) Press [Enter] Type 1-3. Insert an option button.

d) Right-click the 1-3 option button and select Form Field Properties to open the Option Button Propertiesdialog box.

e) Type number_people in the Group name text box. Type 1-3 in the Value check box and click OK.

f) Position the insertion point after the option button and press [Tab]. Type 4-6. Insert an option button.

g) Open the Option Button Properties dialog box and type 4-6 in the Value text box. number_people isautomatically entered as the group name. Click OK.

h) Position the insertion point after the 4-6 option button and press [Tab]. Type 7-10. Insert an option button.

i) Set the value for the option button to 7-10.

9. Insert a text box and a text area box and set the name-value pairs

a) In the Water Taxi Web, on the Reservations page, position the insertion point after the 7-10 option button andpress [Enter]

b) Type On what date will you be riding with us? and press [Spacebar]. Add a text box.

c) Open the Text Box Properties dialog box, type Date in the Name text box, and click OK.

d) Position the insertion point after the text box and press [Enter].

e) Type Please tell us about any special accommodations and press [Spacebar].

f) Insert a text area box.

g) Open the TextArea Box Properties dialog box and type accommodations in the Name text box. Type specialaccommodations in the Initial value text box. This text will appear in the form.

h) Set the Width in characters to 35 and the Number of lines to 6. Click OK.

i) Save the changes and open the Reservations page in Internet Explorer. Test the tab order.

j) Close IE. Close the Water Taxi Web and save the changes if prompted.




1. On the Index page in the Diggs Web, write the introductory paragraph and the mission statement. Delete the ContactInformation comment. Design a conservative, professional-looking theme and apply it as the default theme for theWeb. The Bold Stripes and Industrial themes are good places to start. On the Table of Contents page, replace thecurrent content with a table. Create cells for Products, Services, Place an Order, News, Feedback, and Search, andlink them to the appropriate pages. On the Products page, delete the current content and create two products lists onefor Fiction and one for Non-Fiction. Format the title text in any way you choose. On each list create appropriate sub-categories. For example, under Non-Fiction, you could include: Textbooks, History, Current Events, Sports andFitness, How-To, Biography, Auto-Biography, Cooking, and Reference. Under Fiction, you could include,Children’s, Poetry, Drama, Mystery, Romance, Short Stories, Science Fiction, Westerns, and Horror. On theIndex page, create a marquee for the company name. Increase the text size and change the background color for themarquee. At the bottom of the page, create an interactive button and link it to the Products page. Make sure to set thebutton text (Products). Change the original, hovered and pressed font colors for the button. Use the page tabs to savethe changes and close the pages in the Diggs Web. Save the embedded files for the interactive button in the imagesfolder. Rename each button image with an appropriate name (i.e. Products_hovered.jpg, Products_original.jpg, andProducts_pressed.jpg).

2. Delete the order_form.htm page. On the product_ordering.htm page that you created in Lesson 2, change the labelon the Product Name drop-down box to Category. Open the Drop-Down Box Properties dialog box and modify thechoices to include the fiction and non-fiction categories you created for the lists in Problem Solving #1. Use the MoveUp and Move Down buttons to put the list in alphabetical order. Set the height for the drop-down box to 2. Set theName to Category. Change the text on the Model text box to ISBN number. Open the Text Box Properties dialogbox and change the Name to ISBN_Number. Drag to select the Version Number and Operating System labels andtext boxes and press [Delete] two times to delete the two table rows. Change the Product Code label to ProductName. Open the Text Box Properties dialog box and change the Name to Product_Name. Delete the Serial Numbertext box and label. Drag to select the next section on the form and press [Delete] two times to delete theQty/Description table and the label. In the Billing section, change the label on the Purchase Order # text box toPayment Method. Replace the text box with a drop-down box with the choices, Visa, Master Card and AmericanExpress. Enter the Name for the drop-down box (Payment_Method). Drag to select the Shipping section, right-clickthe table and select Table Properties to open the Table Properties dialog box. Increase the number of rows to 8. In theeighth row of the table, add a check box for Next Day Delivery. Open the Check Box Properties dialog box and setthe Name for the check box. Change the Value to YES.

3. Begin formatting your personal Web site. You may want to begin by writing and formatting text. Change the font to setthe tone for your site. Apply bold formatting, or underline or italicize your text. Align it left, right, or center. If youhave digital camera photographs or can scan photos, add several to your site. You can create text hyperlinks, imagehyperlinks, and/or hotspots. You can create an image map to link to the other pages in your Web. If appropriate,organize information into a table or create a numbered or bulleted list. Decide if you want interactive buttons or amarquee for your Home page. Get out the list you created earlier and insert the elements you found appealing.

