skills lesson ONE Introducing Microsoft FrontPage

Transcription

1 FP03_Lesson_01_ qxd 2/25/2008 4:53 PM Page 1 1 lesson ONE 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 Introducing Microsoft FrontPage skills 1. Introducing Microsoft FrontPage 2. Starting FrontPage 3. Exploring the FrontPage Interface 4. Opening a Web Page 5. Saving a Web Page 6. Working in Design View 7. Getting Help in FrontPage 8. Exiting FrontPage The World Wide Web (WWW) is made up of millions of Web sites. Each Web site is a group of related Web pages. Web sites generally consist of a home page and other related pages of text, graphics, and multimedia. Web pages are created using Hypertext Markup Language (HTML) and connected using hyperlinks, which enable users to navigate among the different pages. HTML uses strings of text called tags, which instruct Web browsers how to display the page elements and how to respond when users 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 can be used to quickly enter text, insert graphics, and create page banners, navigation buttons, 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 to display 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 as The Web server downloads the requested page and all of 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 is referred to as a disk-based Web site. The advantage to creating your Web site locally is that you can test and edit the site before it is available to users to make sure that everything is working correctly. You can also create a server-based Web site. Serverbased Web sites are created directly on the Web server and do not need to be published. They are available to users on the WWW immediately and while in progress. The server must be running Front Page Server Extensions or SharePoint Services. 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 a Web page, save a Web page, and get help. Lesson 2 explains how to create new Web pages, use the Web Wizard, and edit a Web page. Lesson 3 explains how to customize Web pages by adding hyperlinks, tables, and custom themes. And Lesson 4 explains how to organize, maintain, and publish Web pages. Lesson Goal: In this lesson you will learn how to start FrontPage, and you will explore the FrontPage interface. You will also learn how to open and save a Web page, view a Web page, get help in FrontPage, and exit the application.

2 FP03_Lesson_01_ qxd 2/25/2008 4:53 PM Page 2 FP 1.2 LESSON ONE Introducing Microsoft FrontPage skill 1 Introducing Microsoft FrontPage Concept Although familiarity with HTML can help you to create Web sites with advanced designs and features, 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 provides speed and convenience, it is used by many small businesses, non-profit institutions, social and cultural clubs, athletic leagues, and similar organizations. Whether it is for a personal Web site or an e-commerce site, FrontPage provides tools for effective Web design and Web management. Figure 1-1 is an example of a simple Web page designed in FrontPage This Web page includes 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, this relative lack of text is quite common. It does, however, include a title and a menu bar with text hyperlinks. As you continue through this book, you will have many opportunities to add and format text on your Web pages. Hyperlinks: The words Reservation, Fees, Information, Us, Maps, and Crews are underlined text, identifying them as hyperlinks. (Hyperlinks can vary from this format.) You click a hyperlink to navigate to other Web pages on the site. The Us hyperlink opens a new message in your program with the of the owner or operator (Webmaster) of the Web site inserted in the To field. Home pages almost always contain links to the other Web pages on the site, and they commonly include links to other Web sites. Frames: These are physical subdivisions of a Web page. A frameset is used to display mulle Web pages on one screen at the same time. A frameset might include a table of contents on the side frame. Each item in the table of contents is commonly linked to a Web page. When you click one of the links, the Web page opens in the large middle frame, which is main section of the page. A frames page also commonly includes a top banner that can also contain hyperlinks, and it may also include a footer frame. In FrontPage 2003 there are a number of frames-page templates with different page divisions from which you can choose. Graphics: These are images such as page banners, Clip Art, photographs, cartoons, or other visual elements on a page. Graphics that include moving images or sound are called dynamic graphics. You can use graphics to identify page topics or functions, display additional information, break large sections of text into related subsections, or illustrate text. They also can function as hyperlinks.

3 FP03_Lesson_01_ qxd 2/25/2008 4:53 PM Page 3 I n t e c t i v e L e a r n i n g S e r i e s FP 1.3 Figure 1-1 A FrontPage 2003 Web Page Web page title Graphic Hyperlinks

4 FP03_Lesson_01_ qxd 2/25/2008 4:53 PM Page 4 FP 1.4 LESSON ONE Introducing Microsoft FrontPage skill 2 Starting FrontPage Concept 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. how to The steps and screenshots assume that you are using a version of the Windows XP operating system. If you use a different version of Windows or have switched to the Windows Classic theme or another theme, your screen will look slightly different. Start the FrontPage application. 1. Make sure the computer, monitor, and any other necessary peripheral devices are turned on and the Windows desktop is on your screen. 2. On the Windows Taskbar at the bottom of your screen, click the Start button in the lower-left corner to open the Start menu. Your screen may differ slightly from the one shown in the graphic. 3. Point to All Programs to open a submenu similar to the one shown in Figure 1-2. If you do not see Microsoft FrontPage listed on the All Programs submenu, you may find it on the Microsoft 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 prompts you to make it your default editor. Click (Figure 1-3). More Your startup procedure may be slightly different from the one described in this skill due to variations in setup. Each computer varies in its setup depending on the hardware and software configurations. In 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.

5 FP03_Lesson_01_ qxd 2/25/2008 4:54 PM Page 5 I n t e c t i v e L e a r n i n g S e r i e s FP 1.5 Figure 1-2 Starting FrontPage Start menu All Programs submenu Start button Taskbar Figure 1-3 Setting FrontPage as the default HTML editor

6 FP03_Lesson_01_ qxd 2/25/2008 4:54 PM Page 6 FP 1.6 LESSON ONE Introducing Microsoft FrontPage skill 3 Exploring the FrontPage Interface Concept When FrontPage opens, a new blank Web page ready to be designed opens. In FrontPage, a group 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 unique address for locating a Web page or document that can be viewed in a browser on the Internet, for example, A Web site is composed of a group of linked Web 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 has several 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 Web pages. To search for other topics, type a keyword in the Search for text box and click the Start searching button. The Open section at the bottom of the task pane contains links to open 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 start a new blank page, text file, or new page from an existing page. There are also several different options to create new Web site (Figure 1-5). In FrontPage 2003 there are two types of views: Web site views and Page views. Web site views are used to work on entire Web. These views will be covered Lesson 2. Page views are used to design individual pages. As previously noted, when you open FrontPage 2003, a new blank Web page opens. Since you are working on an individual page, the Page views are in effect. There are four Page views: Design, Split, Code, and Preview. You use the buttons at the bottom of the Web page to select a view. Figure 1-4 shows Design view. In Design view, you enter text, insert pictures and hyperlinks, add other design elements, and arrange everything on the page. The HTML code is automatically generated as you make additions and changes. 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 FrontPage application 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. The Maximize button replaces the Restore button when the FrontPage window is not enlarged to fit the entire screen. 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 display a list of related commands. Standard toolbar: This is the row of icons used to execute common commands such as open, save, or print a file. Formatting toolbar: This is the row of list boxes and icons used to perform common text formatting functions such as enlarging, centering, or numbering text.

7 FP03_Lesson_01_ qxd 2/25/2008 4:54 PM Page 7 I n t e c t i v e L e a r n i n g S e r i e s FP 1.7 Title bar Menu bar Figure 1-4 The FrontPage application window Minimize, Maximize, and Close buttons Standard toolbar Formatting toolbar Task pane Page views Status bar Figure 1-5 The New task pane

8 FP03_Lesson_01_ qxd 2/25/2008 4:54 PM Page 8 FP 1.8 LESSON ONE Introducing Microsoft FrontPage skill 4 Opening a Web Page Concept 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 to the text, page design, and Web structure. After you have saved a Web, you must know how to reopen it. In order to open a Web, you must know the name of the file and its location. how to You can also use the History, My Documents, Desktop, Favorites, and My Network Places buttons on the left side of the Open File dialog box to locate the Student Files folder. Open 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 folder is stored on a floppy disk, click 3 1/2 Floppy [A:] to access it. If the folder is on your hard drive or in a network location, click the location and double-click to open any subsequent subfolders 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).

9 FP03_Lesson_01_ qxd 2/25/2008 4:54 PM Page 9 I n t e c t i v e L e a r n i n g S e r i e s FP 1.9 Figure 1-6 The Open File dialog box Click to select a location Click to open the file Figure 1-7 A Web page opened in FrontPage Click to close the file Practice Locate and open the fpprac1-4.htm file in your Student Files folder. Use the Close button in the upper right corner of the Web page (Figure 1-7) to close the file.

10 FP03_Lesson_01_ qxd 2/25/2008 4:54 PM Page 10 FP 1.10 LESSON ONE Introducing Microsoft FrontPage skill 5 Saving a Web Page Concept Frequently saving your work is always a good practice when working with any computer program. 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. how to The My Webs folder is created when you install FrontPage, and it is the default storage folder for Web pages and Webs. However, you can save Webs in any folder. (In Windows XP Home Edition, the My Webs folder is called My Web Sites.) If the Folder List command is not on the View menu, close all open pages. Open the File menu and click Open Site. In the Open Site dialog box, navigate to and reopen the skydiver.htm Web page. Click Open. If a dialog box displays asking you to add information to your folder, click Yes. To create a new folder in any location, click the Create New Folder button in the Save As dialog box. Save 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 open the Save As dialog box. 2. On the left side of the dialog box, click the My Documents button to place the My Documents 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 Web that 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-click it 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 and the 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 an underscore. Most of these are not shown in the Folder List. Right-click and select Explore to open Windows Explorer. 11. In the folder tree, select your My Documents folder. In the contents window, double-click the 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 hidden files 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. More It is important to understand the difference between the Save and Save As commands. When you save a document for the first time, you can use the Save command on the File menu or the Save button on the Standard toolbar to open the Save As dialog box. In the Save As dialog box, you choose a location and name for the file. However, after you have named a file and stored it in a specific location, the Save command simply overwrites 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 a document and use the Save As command to save it with a new name. This way, the original file with the original file name is retained. The File menu includes both the Save and Save As commands.

11 FP03_Lesson_01_ qxd 2/25/2008 4:54 PM Page 11 I n t e c t i v e L e a r n i n g S e r i e s FP 1.11 Figure 1-8 Saving a Web page with a different name Click to create a new folder Click to save the Web page Type the new name for the Web page Figure 1-9 Saved Web page and Folder List Folder List When there are several Web pages in a Web, you can use the page tabs to easily switch between several open Web pages Practice Page views Open fpprac1-5.htm in your Student Files folder. Save the file as caddy.htm in a new folder named Lucky Caddy.

12 FP03_Lesson_01_ qxd 2/25/2008 4:54 PM Page 12 FP 1.12 LESSON ONE Introducing Microsoft FrontPage skill 6 Working in Design View Concept As you have learned, Web pages are designed in Design view. This is where you add and reformat text, graphics, and other Web elements. Design view is the WYSIWYG ( what you see 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 their Web browsers. The Page tabs are used when there are mulle pages in a Web to easily switch 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 half displays the Web page in Design view. As you add elements in Design view, the code in the top pane automatically updates. If you edit the code in the top half, the text and page elements are automatically modified. Code view displays just the HTML code for the Web page and Preview enables you to view a close approximation of what the Web page will look like in a browser. However, because Web pages will look different in different browsers, you should always open your Web pages in several browsers to view the exact results. how to Use the Page views. 1. Open the skydive.htm Web page, if necessary. You can use the Page tab at the top of the window to select the Web page, or you can double-click the skydive.htm Web page in the Speed 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 the HTML 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 a browser. You cannot format or edit your page in Preview view. You can use this view only to click hyperlinks and to preview visual effects. Since no effects have been added, it looks the same as Design view. More As you have learned, FrontPage is an HTML editor. The work you create in the WYSIWYG view is converted into Hypertext Markup Language (HTML) format. If you know HTML, you can use either Code or Split view to create or modify a page and then preview the results. Split view is useful if you know HTML because you can watch as the HTML code is generated and see what tags are used for different effects. Furthermore, you can move back and forth between the WYSIWYG interface and the HTML code without changing views. If you do not know HTML, Split view can be a great learning tool.

13 FP03_Lesson_01_ qxd 2/25/2008 4:55 PM Page 13 I n t e c t i v e L e a r n i n g S e r i e s FP 1.13 Figure 1-10 Web page in Split view Show Split view Figure 1-11 Web page in Code view HTML code Show Preview view Show Code view Practice Open the caddy.htm file you saved in the previous practice and view it in Split, Code, and Preview view.

14 FP03_Lesson_01_ qxd 2/25/2008 4:55 PM Page 14 FP 1.14 LESSON ONE Introducing Microsoft FrontPage skill 7 Getting Help in FrontPage Concept FrontPage 2003 includes several methods for getting help. When you click the Microsoft Office 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 Search for text box and click the Start searching button to search the Help files. If you are connected to the Internet, you can use the links in the bottom half of the task pane to connect to Microsoft Office Online or to get online training. If you prefer, you can use the Office Assistant. However, in FrontPage 2003, the task pane is the starting point for opening Help files. Even if you start by entering a question in the Office Assistant search balloon or in the Type a question for help box on the right end of the Menu bar, the task pane displays the Search Results. You select a topic from the Search Results list to open either a Help page or a Microsoft Office Online Web page. how to In the Search Results list, a blue circle with a question mark inside indicates a page in the local Help files. A page icon with a question mark in a circle indicates a Microsoft Office Online Web page. 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 four Page sub-views that you explored in the previous skill are not on the View menu. 14. Close the Microsoft Office FrontPage Help window. More You can also click the Table of Contents link on the FrontPage Help task pane to open the Table of Contents for the Help files. A book icon represents each main category. Click one of these links to open the topic and view the subtopics. The subtopics are also book icons. Just like in the Search results list, a page icon with a question mark in a circle indicates a Microsoft Office Online Web page and a blue circle with a question mark inside indicates a page in the local Help files.

15 FP03_Lesson_01_ qxd 2/25/2008 4:55 PM Page 15 I n t e c t i v e L e a r n i n g S e r i e s FP 1.15 Figure 1-12 The Microsoft FrontPage Help window Click to reveal all of the text on the page Forward button Back button Click the Back and Forward buttons to move back and forth between topics you have already viewed Auto Tile: Click to display the Help page and the FrontPage window side by side Figure 1-13 Microsoft Office Online Practice Use FrontPage Help to look up information about folders and hyperlinks.

16 FP03_Lesson_01_ qxd 2/25/2008 4:55 PM Page 16 FP 1.16 LESSON ONE Introducing Microsoft FrontPage skill 8 Exiting FrontPage Concept To exit FrontPage you can open the File menu and click Exit or you can click the Close button on the title bar. If you have forgotten to save your work, you are prompted to save before the application closes. how to Exit FrontPage when you are finished working. 1. Click the Close button in the right corner of the Search Results task pane to close the task 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 the Web 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. More The Close button on the Title bar closes the application. The Close button in the upper-right corner of 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]. You can also use the Control menu icon to close the application. The Control menu icon is on the left end of the Title bar. You can double-click the Control menu icon to close the application or right-click the Control menu icon or the Title bar and then click Close on the Control menu.

17 FP03_Lesson_01_ qxd 2/25/2008 4:55 PM Page 17 I n t e c t i v e L e a r n i n g S e r i e s FP 1.17 Figure 1-14 The Search Results task pane Click to close the task pane Indicates a page in the local Help files Indicates a Microsoft Office Online Web page Control menu icon Figure 1-15 Closing a Web Click to close the application Click to close the site without exiting the application Click to close the current Web page Click to close all open Webs and FrontPage Practice Open the caddy.htm file you saved in a previous skill, if necessary. Close the file and exit FrontPage.

18 FP03_Lesson_01_ qxd 2/25/2008 4:55 PM Page 18 FP 1.18 LESSON ONE Introducing Microsoft FrontPage shortcuts Function 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

19 FP03_Lesson_01_ qxd 2/25/2008 4:55 PM Page 19 I n t e c t i v e L e a r n i n g S e r i e s FP 1.19 quiz A. Identify Key Features Name the items indicated by callouts in Figure Figure 1-16 FrontPage screen elements B. Select the Best Answer 11. 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 view for the Web page 14. Physical subdivisions of a Web page used to display mulle d. Window controls Web 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 pane or 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 (Continued on next page)

20 FP03_Lesson_01_ qxd 2/25/2008 4:55 PM Page 20 FP 1.20 LESSON ONE Introducing Microsoft FrontPage quiz (continued) 18. Buttons at the top right of a window that enable you to h. URL alter the window size 19. The FrontPage interface element where Search Results display i. Split view that serves as the starting point for opening Help files 20. The Page view where you can view both the HTML code for j. Hyperlinks the page and the Web page. C. Complete the Statement 21. You can use this to access Microsoft Office Online. a. Title bar b. Menu bar c. Task pane d. Status bar 22. The default storage folder for Web pages and Webs 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 Microsoft Help files and Microsoft Office Online: a. Getting Started b. New c. Answer Wizard d. FrontPage Help 26. This screen element contains graphical buttons that 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 Web pages is: a. URL b. Web code c. FrontPage 2002 code d. HTML 29. The keyboard shortcut to exit FrontPage is: a. [Alt]+[F4] b. [Ctrl]+[F4] c. [Ctrl]+[S] d. [Ctrl]+[F1]

21 FP03_Lesson_01_ qxd 2/25/2008 4:55 PM Page 21 I n t e c t i v e L e a r n i n g S e r i e s FP 1.21 interactivity Build Your Skills 1. 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 Files folder. 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 in list 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 task pane. j. Establish a connection to the Internet, if necessary, and click the Assistance link in the Microsoft Office Online section of the task pane.

22 FP03_Lesson_01_ qxd 2/25/2008 4:55 PM Page 22 FP 1.22 LESSON ONE Introducing Microsoft FrontPage interactivity (continued) 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. Problem Solving Exercises 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 to use the Web site to distribute information to agents, authors, and other potential business partners. They also want to conduct certain business transactions from the Web site. Create a rough draft of a Web site. Nothing concrete is necessary, just a few conceptual proposals including thematic examples and possible features. Some possible features to consider 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 the Web site should include. All of your ideas may not be plausible, but many may work. For example, images complete with animation can be added. Plug-ins and applets are other possibilities. These terms will be explained in future lessons if 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 Web site. 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 other attributes. Take detailed notes about what makes these sites attractive and engaging to visitors. Your notes should include everything from animation and graphics to theme, color, writing style, font size, and font color. If possible, also take note of the navigational structure. How are the pages linked? Try to draw a map or hierarchy of the pages on the site.

23 2 lesson TWO 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 Creating Web Sites skills 1. Using a Template to Create a Web Page 2. Using a Template to Create a Web 3. Using a Web Wizard 4. Using the Import Web Wizard 5. Adding Text to a Web Page 6. Formatting Web Page Text 7. Adding and Formatting Lists 8. Using the Spelling Checker and Editing a Web Page 9. Using the Find Command 10. Previewing a Web Page in a Browser Before you begin to build a Web site, you should develop a plan that includes the types 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 preliminary work, you can begin to create the necessary Web pages. There are several ways to create a new Web page. As you learned in Lesson 1, you can start with the new blank page that automatically opens when you start FrontPage. You can also use a template or Wizard to create a new page. Templates are preformatted Web pages with boilerplate text and pictures. You can start with a template, enter your text, and modify and reformat the page to create a unique Web page. Similarly, you can use a Wizard to create a Web page with boilerplate text that can be modified. The Wizard asks a series of questions that give you somewhat more control over the final product. Wizards and templates can also be used to create entire sites. In this Lesson, you will use the Guest Book template to create a Web page for visitors to sign a public guest log and to enter comments. Then you will use the Customer Support Web Site template to create a Web site devoted to identifying and serving customer needs. Next, you will use the Corporate Presence Wizard to create a professional Web site for the Internet. Finally, you will use the Import Web Site Wizard 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 entering and formatting text and adding and formatting lists. It is very important to spell check and edit your Web pages to make sure that you maintain a professional appearance. You will also learn how to find information on a Web page and how to preview a Web page in a browser. This lesson introduces you to the basics of building and viewing Webs. Lesson Goal: Learn how to use Wizards and templates, add and edit text, and run the Spelling Checker on a Web page. You will also learn how to find and replace specific words and how to preview a published Web page.

24 FP 2.2 LESSON TWO Creating Web Sites skill 1 Using a Template to Create a Web Page overview 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 start building Web pages. You can create a Web page quickly by using a template and then entering your text and modifying the page to customize it for your Web. You can also create your own templates. This is particularly useful when mulle 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 on the hard drive of every Web site author who opens the Web. In this way, all authors who open the Web can use the template to create pages consistent with the initial design. how to 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 a new 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 dialog box. 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 not display 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 Book template 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 the template. extra As you can see, a template provides a basic structure or outline for a Web page. Some templates are specifically designed to accommodate graphics, some come equipped with option buttons, and still others have pre-designed return forms. You can use these templates to create functional Web pages. You may have noticed that the Design view window comes equipped with scroll bars directly below and to the right of the window. As in all Windows applications, scroll bars are equipped with scroll boxes and scroll arrows. To move the page view to the right or left, click the right or left scroll arrow on the horizontal scroll bar. To move the page view up or down one line at a time, click the up or down scroll arrow on the vertical scroll bar. To move the page view more quickly, 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, horizontal scroll box size decreases.

25 I n t e c t i v e L e a r n i n g S e r i e s FP 2.3 Figure 2-1 The Page Templates dialog box Description of the page template Preview of the page template Web page templates Figure 2-2 The Guest Book template This instructional text is for the Web author only. It does not display on the Web page Scroll box This text can be modified to suit your needs. Scroll arrows Practice Open FrontPage and create a new Web page using the template of your choice. Save the Web page as myfpprac2-1.htm and close the file.

26 FP 2.4 LESSON TWO Creating Web Sites skill 2 Using a Template to Create a Web overview You can also use a template to create a new multi-page Web (Web site). Templates enable you to choose from a variety of themes and formats to create an entire Web site with a Home page and a general organizational structure and outline. As you have learned, you can replace placeholder text to customize the Web pages for your site. how to Every Web contains a Home page. A Home page is the first page that visitors see when they reach a site. Links are used to navigate among the pages of a Web. If you are on a network or a multi-user computer the default storage location is as follows: C:\Documents and Settings\<username> \My Documents\My Webs\mysite. You can use the Specify the location of the new Web site list box in the Web Site Templates dialog box to save a Web with a different name and/or in an alternate location. Use a template to create a Web. 1. On the New task pane, in the New Web site section, click the More Web site templates link 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 view and the Folder List contain the same information, but Folders view provides additional details 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, and move 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 to return to the default Reports view. 7. Click the Folders button to return to Folders view. To view the home page, doubleclick index.htm either on the Folder List or in the Web Site window. Web servers require a default name for Home pages, usually, index.htm. If you change it, FrontPage automatically renames 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 of the 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 Design view. As you use the Navigation Pane to view each page, a tab for the page is added to the top of the Web Site window. Subsequently, you can use these tabs to view and work on a page. Scroll Left and Scroll Right arrows are added at the end of the tabs. Use the scroll bars along the right and bottom of the Web Site window to view each page in its entirety 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 default location in the My Webs folder as mysite. As you use additional Web templates and Web Wizards to create Web sites, they are saved automatically as mysite2, mysite3, etc. Click the C:\My Documents\MyWebs\mysite command to reopen the Web. The path to the Web displays in the Title bar and below the Web Site tab in Folders view.

27 I n t e c t i v e L e a r n i n g S e r i e s FP 2.5 Figure 2-3 The Web Site Templates dialog box Use to change the default storage location and Web name Description of the Web site Figure 2-4 The Customer Support Web site in Folders view Web site views

28 FP 2.6 LESSON TWO Creating Web Sites skill 2 Using a Template to Create a Web (Cont d) extra The Web Site Templates dialog box provides a description of each available template. The Customer Support Web is geared towards software companies, and it supplies a feedback mechanism to improve customer support services. The Project Web site provides a team member directory and can be used by project team members to discuss ideas and concerns, post status reports, and schedule meetings. A Personal Web site consists 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. Unnecessary pages can be deleted and additional pages can be inserted. For example, if a company wants to advertise using mulle photographs, 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 geared to the type of Web site you are trying to create.

29 I n t e c t i v e L e a r n i n g S e r i e s FP 2.7 Figure 2-5 The Home page (index.htm) Web site views Practice Create a Web using the Project Web Site template in the Web Site Templates dialog box. View the navigational structure of this Web, open and examine each page, and then close the Web. You do not need to save this Web. It will save automatically as mysite2.

30 FP 2.8 LESSON TWO Creating Web Sites skill 3 Using a Web Wizard overview A Wizard is an automated procedure built into a program that is used to simplify a complex operation. Wizards provide a series of dialog boxes in which you choose from various options to 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. how to Default settings are pre-selected settings which are already selected in the Wizard. Use 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 Corporate Presence 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. Make sure 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 Mission Statement 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 Site Changes 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 settings and 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 to be compatible with database and spreadsheet programs. The Yes, use tab-delimited format option button is selected by default. 9. Click to accept the default setting. The next dialog box sets up the Table of Contents Page. 10. Click to accept the default setting, Use bullets for top-level pages. The next dialog box is used to add objects to the top and bottom of each page. Leave the default settings selected and click the Your Company s logo check box to place the company logo at the top of each page (Figure 2-10). 11. Click. The next dialog box prompts you to mark each unfinished page in your Web with the Under Construction icon. 12. Click to accept the default setting, Yes. The next dialog box is used to enter the full name and short version of your company name and the company address. Click and drag 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 name text box. Type Speed Demons.

31 I n t e c t i v e L e a r n i n g S e r i e s FP 2.9 Figure 2-6 The Corporate Presence Web Wizard Figure 2-7 Selecting the topics for the Home page Description of a Home page Click the topics for the Home page Figure 2-8 Selecting the topics for the What s New page Figure 2-9 Selecting the information to collect on the Feedback Form The progress bar displays how much of the Web is complete Figure 2-10 Selecting the objects to be added at the top and bottom of each page The selected items will be included on the Feedback Form Click to return to the previous step

32 FP 2.10 LESSON TWO Creating Web Sites skill 3 Using a Web Wizard (Cont d) how to The first letter of the location in which you save a folder specifies the drive. Generally, A: is the floppy disk drive, C: is the hard drive, and D: is the CD ROM drive. After you designate the drive, you specify the location, such as Desktop, or My Documents. The final element of a Web pathname is the folder which can be at the end of any number of subfolders. 14. Enter 345 Rocky Rd., Falling Water, N.Y in the What is your company s street address text box (Figure 2-11). 15. Click. Enter (914) in the What is your company s telephone number? text box and (914) in the What is your company s FAX number text box. 16. Enter miller@speed_demons.com in the What is the address of your webmaster? text box. Enter info@speed_demons.com in the What is the address for general info 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 of the five pages (Figure 2-13).Notice that the Web was automatically saved in the default location 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 the Corporate Presence Web. extra Wizard that is used to create a message board and an Import Web Site Wizard, which you will use in the next skill. As you saw in the skill, a Web Wizard can help you to create a complex Web quickly. You can use the Database Interface Wizard to create Web pages to add, edit, and delete database records on a Web site hosted on a server running Active Server Pages (ASP). There is also a Discussion Web Site In the Web Site Templates dialog box, you can change the default location to store the new Web site. In the Specify the location of the new Web site list box, enter the location or click the Browse button to select a location. If you include a new folder name at the end of the pathname, FrontPage creates the new Web folder.

33 I n t e c t i v e L e a r n i n g S e r i e s FP 2.11 Figure 2-11 Entering company information Figure 2-12 Completing the Corporate Presence Web Wizard Click to finish the Wizard with the data entered up to that point on any step Click to cancel the Wizard on any step Figure 2-13 Tasks view The tasks in the newly created site are to customize the five pages Figure 2-14 Navigation view To open a Web page, double-click the page icon Practice Use the Discussion Web Wizard to create a new Web. Save it in the My Webs folder and name it Discussion.

34 FP 2.12 LESSON TWO Creating Web Sites skill 4 Using the Import Web Wizard overview You can use the Import Web Wizard to create a new Web from pre-existing files. You can import an entire Web or just pages from a Web that is stored locally, on network drive, or on the Web. You can also create a Web site that is filled with documents from a local directory or a remote file system. how to Use 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 task pane. 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 transfer data 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\Speed Demons (Figure 2-15). 5. Click. The first Import Web Site Wizard dialog box opens. Click the File System option button to import files from a source directory on your local computer or network (Figure 2-16). 6. Click to open the New Publish Location dialog box. Use the Look in list box to navigate to the location where your Data Files folder is stored, open the Lesson 2 folder, and click the fphowto2-4 folder. Click to close the dialog box and return to the Import Web Site Wizard. 7. Click to open the Import Web Site Wizard - Choose your destination web location screen. The Add to current Web site check box is selected by default. C:\My Documents\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) to publish 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 original Skydiver page you worked with in Lesson Click the Web Site tab. In the Status box at the bottom of the window, you can publish all changed pages from the local Web to the remote Web, from the remote Web to the local Web, or you can synchronize the two Webs to ensure that both include the same pages and content. 13. Click the File menu and click Exit to close the FrontPage application window for the Speed Demons Web.

35 I n t e c t i v e L e a r n i n g S e r i e s FP 2.13 Figure 2-15 Starting the Import Web Site Wizard Figure 2-16 The Import Web Site Wizard Click to import files from a source directory on your local computer or network Click to import a Web site from a Web server

36 FP 2.14 LESSON TWO Creating Web Sites skill 4 Using the Import Web Wizard (Cont d) extra 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 to open the Import dialog box. To import a file from your local computer or network, click the Add File button to open the Add File to Import List dialog box. Use the Look in list box to locate and click the file you want to import and then click Open. Repeat the procedure 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 in the skill. Click the HTTP option button. Click the Browse button, locate and select the start page for the Web site, and then click Open. The start page does not have to be the home page. It can be any Web page in the site.

37 I n t e c t i v e L e a r n i n g S e r i e s FP 2.15 Figure 2-17 Remote Web site view Click to synchronize the selected files Practice Use the Import Web Site Wizard to import the fpprac2-4 folder (in your Data Files folder in the Lesson 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.

38 FP 2.16 LESSON TWO Creating Web Sites skill 5 Adding Text to a Web Page overview Composing the text is arguably the most important job when building a Web site. Since the primary goal of any Web site is communication, clear, readable, well-placed text that quickly conveys information to Web site visitors should be your top priority. Creating a functional Web site begins with adding text. how to The [Tab] key on the keyboard moves text several spaces, generally to the right when you place the insertion point in front of a word or to the left if you place the insertion point at the end of a word, depending on the page format. You can use the [Enter], [Tab], and [Space bar] keys to change the position of the text on a page. Add 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 you created 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 word Club (Figure 2-18). 5. Press the [Enter] key four times. 6. Type The best in the Skydiving Industry. Your page should look like Figure Click the File menu and click Save. 8. Close the Index.htm page. extra You can use the Formatting toolbar to format or change the appearance of text. This includes changing the font, font style, size, color, and alignment. For example, to decrease the size of the text you just entered, select the phrase, click the list arrow on the Font Size list box, and click a smaller font size for example, 6 (24 pt). You can also use the Increase Font Size and Decrease Font Size buttons on the Formatting toolbar to increase or decrease the font size one level. The Increase Indent button is used to apply a standard paragraph indent of approximately ½ inch. Simply position the insertion point in front of the line or paragraph you want to indent and then click the Increase Indent button. The Decrease Indent button is used to reduce or eliminate a paragraph indent. Special effects, such as Marquee text (which you will learn about in Lesson 3), can also be added to emphasize certain text.

39 I n t e c t i v e L e a r n i n g S e r i e s FP 2.17 Figure 2-18 Adding text to a Web page Insertion point Figure 2-19 The Skydiver Web page with new text added Practice In the Caddy Shop Web you created in the previous practice, five lines below the last line of text on the Index page, type Best Prices in Westchester County. Save the change.

40 FP 2.18 LESSON TWO Creating Web Sites skill 6 Formatting Web Page Text overview 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 apply highlighting or borders. There are also buttons to create either a bulleted or numbered list. how to 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 select the 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 before you begin typing, it will be applied to the entire page, until you toggle off the button. If you continue typing text after the word Club, the new text is underlined until you toggle off the button. 7. Click once anywhere on the screen to deselect the selected text. Your page should now resemble Figure Click the Save button on the Standard toolbar to save the changes. 9. Close the Index file. extra Your choice of font can help to set the mood for your Web site. Some fonts are bold, some are ornate, 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 separately. 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 the page. You can use the [Spacebar] and the alignment buttons to arrange text on a page.

41 I n t e c t i v e L e a r n i n g S e r i e s FP 2.19 Figure 2-20 Selecting text Selected text Numbering, Bullets, Decrease Indent, & Increase Indent Figure 2-21 Formatting toolbar buttons Increase Font Size & Decrease Font Size Highlight & Font Color Style box Font box Font Size box Bold, Italic, and Underline Align Left, Center, Align Right, and Justify All Borders Figure 2-22 Formatted text Underlined text New size and font Practice On the Index page in the Caddy Shop Web, underline the shop address text and change the font to Century Gothic. Save the change.

42 FP 2.20 LESSON TWO Creating Web Sites skill 7 Adding and Formatting Lists overview When you design Web pages, remember that site visitors are often in a hurry. You must make important information stand out and format it so that it is clear and easily read. One way to do this is to create a list. Lists consolidate information in a concise format and enable you to separate topics or information from the rest of the page. You can use the buttons on the Formatting toolbar to create either numbered or bulleted lists. Although you use the same procedure to create either kind of list in FrontPage, bulleted lists are often referred to as unordered lists, while numbered lists are referred to as ordered lists. These terms refer to the HTML tags used behind the scenes to create the two types of lists. how to You can also use the Style list box on the Formatting toolbar to create a list. Click either Bulleted List or Numbered list in the Style list box before you begin typing. For text that is already typed, select the items you want on the list and use either the buttons on the Formatting toolbar or the Style list box. The items you want to turn into a list must be separated by paragraph breaks, not line breaks. Paragraph breaks leave a blank line between the lines of text. Add a new page with a list to a Web. 1. Open the Index page in the Speed Demons 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 blank page to the Web. 4. Type Organizational Goals on the first line of the page. On the Formatting toolbar, click the 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: Generate media attention, Stress safety procedures, and Make skydiving more affordable and enjoyable for all. Compare your page to Figure Right-click one of the bullets and click List Properties to open the List Properties dialog 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 to change 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 in the Speed Demons Web with the default name (organizational_goals.html) (Figure 2-25). 13. Close the page. extra If you use the Numbering button to create a numbered list, you can open the List Properties dialog box on the Numbers tab and change the numbering style to capital or lowercase letters or Roman numerals.

43 I n t e c t i v e L e a r n i n g S e r i e s FP 2.21 Figure 2-23 Bulleted list A bulleted list Figure 2-24 The List Properties dialog box Click to view the options for creating a numbered list Figure 2-25 Saving a new Web page in a Web Click to use a graphical bullet from the current theme (if a theme has been applied) or to browse to locate a graphic you have saved that can be used as a bullet Practice Create a new page in the Caddy Shop Web. At the top of the page type Best selling items. Center the text and format it with the Elephant font in the 5 (18 pt) size. Create a numbered list aligned left 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.

44 FP 2.22 LESSON TWO Creating Web Sites skill 8 Using the Spelling Checker and Editing a Web Page overview As you compose text on your Web pages, you will inevitably make mistakes. The FrontPage spelling checker makes it easy to locate and fix errors. You can run a spell check in three of the four Page views: Design view, Split view, and Code view. You cannot run a spell check in Preview view. Red and green underlines often referred to as squigglies, alert you to misspellings and grammatical errors respectively. how to A word with red underlining indicates a misspelled word (or one that is not in the FrontPage dictionary). The wavy line enables you to perform on-the-spot editing without opening the Spelling Checker. Check a Web page for spelling errors and make corrections. 1. Open a new FrontPage application window (in addition to the application window in which you 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 click Spelling to open the Spelling dialog box. The Spelling dialog box opens if the spelling checker 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_s.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 page graphics with the new file. 11. Close the FrontPage application window. extra English words that are not in the dictionary. Click the Add button in the Spelling dialog box to add a word to the FrontPage dictionary. This feature helps especially if the checker frequently stops on proper names or non- Another method is to right-click a misspelled word to access a shortcut menu that contains a list of possible replacements and 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 the topmost folder in the Web site folder hierarchy. Click the Spelling button. A different Spelling dialog box prompts you to check the spelling of the selected page (s) or of the entire Web site. You can also add a task to Tasks view for each page with misspellings and perform the spell check later.

45 I n t e c t i v e L e a r n i n g S e r i e s FP 2.23 Figure 2-26 The Spelling dialog box Click to ignore a word that is not in the dictionary click to ignore all words with the same spelling Click to change the identified word to the word selected in the Suggestions box Click to change all instances of the same misspelling to the word selected in the Suggestions box Figure 2-27 Misspelled word on a page Misspelled word Practice 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 Shop Web.

46 FP 2.24 LESSON TWO Creating Web Sites skill 9 Using the Find Command overview 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 and accurately. The FrontPage 2003 Find and Replace utility uses Extensible Markup Language (XML) to perform queries. Extensible Markup Language (XML) is a comprehensive markup language used to create other special-purpose markup languages. The term markup language refers to the combination of text with additional data, or markers, that describe how text displays. HTML is the most commonly known markup language. XML is used to facilitate 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 Queries folder for the current user, C:\Documents and Settings\<username>\Application Data\Microsoft\FrontPage\Queries, but you can save them in an alternate folder if desired. how to In the Find where section, you can select check boxes to search All pages in a Web, all Open page(s) in a Web, the Selected page(s), or just the Current page. In the Direction section, you can choose to search the entire document or Web (All), or to search Up or Down the document. You can click the Replace command on the Edit menu to open the Find and Replace dialog box on the Replace tab. Steps 9-14 create a query using the default settings. 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 which you have the Speed Demons Web open). 2. Click the File menu, point to Recent Files and click the writing_s.html page that you saved 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 to open 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, Open query, is used to open saved queries, and the disk icon, Save query, is used to save queries. Click the Save query button to open the File Save dialog box. The Queries folder 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.

47 I n t e c t i v e L e a r n i n g S e r i e s FP 2.25 Figure 2-28 The Find and Replace dialog box Select to search the entire document or Web Click to search up the page Click to search up the page Figure 2-29 Finding text Open query button Save query button

48 FP 2.26 LESSON TWO Creating Web Sites skill 9 Using the Find Command (Cont d) how to You can use the Find and Replace commands in almost every view. You can also use them to find and replace HTML code in Code view. 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 been created to find agian and replace it with again (Figure 2-31). 21. Close Notepad. Close the FrontPage application window. You can use the options in the Advanced section to create more complex queries, including conditional queries in which you can replace a word or an HTML tag only in certain circumstances (e.g., when a particular condition is met). extra 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 replace all instances of a particular word or phrase. The Replace command may be on the extended Edit menu. In Office 2003, menus have a double arrow in a circle at the bottom. Point to or click this Expand button to view the entire menu. Commands on the primary menu include those most commonly used and those that a user has recently used. In the Advanced section, you can click the Match case check box to search only for words or phrases that match the capitalization you have entered in the Find what box or you can click Find whole word only to search only for entire words. For example, if you enter to in the Find what box and do not click the Find whole word only check box, all words that begin with to are located as well as the word to itself.

49 I n t e c t i v e L e a r n i n g S e r i e s FP 2.27 Figure 2-30 Locating the Queries folder Figure 2-31 An XML Find and Replace statement Practice In the Caddy Shop Web, open order_form.htm and find a question that asks the user to enter his or her age. Close the Find and Replace dialog box, view the question, and close the page.

50 FP 2.28 LESSON TWO Creating Web Sites skill 10 Previewing a Web Page in a Browser overview In Preview view in FrontPage 2003, Web pages appear as they will appear in Internet Explorer 6 or above, but they may look very different in other browsers. (To make sure you are secure with the terminology, a browser is the program used to view Web pages and HTML documents.) In FrontPage 2003, you can design Web sites that display well both on many different browsers and at different screen resolutions in those browsers. You can add your target browsers (those you think that most of your users will be using) along with target screen resolutions and open Web pages directly from FrontPage to see how they will look to Web site visitors. Only browsers that are installed on the computer can be added, but there is no limit to the number of browsers you can add. This flexibility enables you to test your Web pages in both older and newer versions of browsers. The exception is Internet Explorer because you can install only one version of IE. In order to test Web pages in older versions of IE you must install them on a different computer, set up a dual-boot system, or run Microsoft Virtual PC for Windows or another software virtualization application. how to As long as they are in good working order, your hyperlinks operate when you preview a page in a browser. You can also doubleclick a Web page file (.htm) in its storage folder to open it in your default browser. 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 the bottom 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 Mulle Browsers on the Preview in Browser submenu to open the Web page in two or more browsers at once. Notice that there are also Preview in Mulle Browsers commands that specify the screen resolution. 5. You can also use the Preview in Browser button on the Standard toolbar to preview a Web page in a browser. Click the list arrow to select from all browsers you have installed and 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. extra To add a new preview browser (other than Internet Explorer), you must first install the browser software. Then open the File menu, point to Preview in Browser and click Edit Browser List to open the Edit Browser List dialog box (Figure 2-33). If the new browser is not on the Browsers list, click Add to open the Add Browser dialog box. Enter the browser name in the Name text box and click Browse to open the 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). Click OK to close the Add Browser dialog box. Click the check box for the browser in the Edit Browser List dialog box and select the additional window sizes. To automatically save a Web page before previewing, click the Automatically save page before previewing check box and click OK to close the Edit Browser list dialog box.

51 I n t e c t i v e L e a r n i n g S e r i e s FP 2.29 Figure 2-32 Previewing a Web page in a browser Figure 2-33 The Edit Browser List dialog box Click to save a Web page you are working on before it opens in the browser Figure 2-34 Adding a browser Figure 2-35 The Add Browser dialog box Click the executable file and click Open to enter the path in the Command text box Enter the browser name Practice Open the Index page in the Caddy Shop Web and preview it in your default browser at the 640 x 480 screen resolution. Close the Web page and the Web.

52 FP 2.30 LESSON TWO Creating Web Sites shortcuts Function Button/Mouse Menu Keyboard 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 Decrease Font Size Click Format, click Font. In the Font dialog box, click the font size in the Size list box Click Format, click Font. In the Font dialog box, 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 indent in the Before text spin box Decrease Indent Click Format, click Paragraph. In the Paragraph [Ctrl]+[Shift]+[M] dialog box, click a number amount to indent in the Before text spin box Align text right Justify text Align text left Center text [Ctrl]+[R] [Ctrl]+[L] [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]

53 I n t e c t i v e L e a r n i n g S e r i e s FP 2.31 quiz A. Identify Key Features Name the items indicated by callouts in Figure Figure 2-36 Web page in FrontPage A. Select the Best Answer 11. An automated procedure built into a program that presents a series a. Home page of dialog boxes in which you choose from options to accomplish a task 12. Used to create a new Web from pre-existing Webs or Web b. The text layout buttons pages that are stored locally, on network drive, or on the Web 13. Used to change the numbering style for a numbered list c. Bulleted lists to capital or lowercase letters or Roman numerals 14. The first Web page you visit on a Web site d. Edit Browser List dialog box 15. These are also referred to as ordered lists e. List Properties dialog box 16. A pre-designed format for a Web page that can include f. Browser text and graphics 17. These are used along with the [Spacebar] to arrange text on a page g. Import Web Wizard 18. These are also referred to as unordered lists h. Numbered lists 19. This is used to add a new preview browser to FrontPage after i. Template the browser software has been installed 20. The program used to view Web pages and HTML documents j. Wizard

54 FP 2.32 LESSON TWO Creating Web Sites quiz (continued) C. Complete the Statement 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 in which it is stored. 22. If you do not see a command on the regular menu, 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, you can 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 down the 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 new Web site that you create using a template or a Wizard 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 site list 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 bullet list: 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 utility uses 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 saved with this extension a..fpq b..csv c..mdb d..dqy

55 I n t e c t i v e L e a r n i n g S e r i e s FP 2.33 interactivity Build Your Skills 1. 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 location of the new Web site list box. Remember, you can enter a new folder name at the end of the pathname and FrontPage 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\My Webs folder for your user account. f. Close the Web. 3. Use a Web Wizard 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 Project Web Site icon. d. Type C:\Documents and Settings\<username>\My Documents\My Webs\Project in the Specify the location of the 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\My Webs folder for your user account. f. Close the Web. 4. Import 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 Import Web Site Wizard icon.

56 FP 2.34 LESSON TWO Creating Web Sites interactivity (continued) d. Type C:\Documents and Settings\<username>\My Documents\My Webs\Water Taxi in the Specify the location 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 current Web 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 to the local Web site arrow. m.right-click watertaxi.htm in the Local Web site box and click Delete. Click Yes in the Confirm Delete dialog box. 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 then click Microsoft Internet Explorer 6.0 (640 x 480). b. Preview the file, close the browser, and close the Water Taxi Web.

57 Problem Solving Exercises 1. Use the Corporate Presence Wizard to create a Web site for Diggs & Associates. Name the Web folder Diggs and save it in your My Documents\My Webs folder. Keep your earlier plans in mind. You can always add pages to a Web to accommodate your various ideas. Include a Products/Services page. Accept the default settings for the Home page. Accept the default settings for the What s New page. Accept the default settings for the Products/Services page. Include the Mailing Address on the Feedback Form. Keep the default setting (tabdelimited) for the feedback form. Accept the default settings for the Table of Contents page. Keep the default settings for the top and bottom of each page. Mark unfinished Web pages with the Under Construction icon. Enter the company name, Diggs & Associates, short version, Diggs, and address, 987 Park Lane, Thompson, MA Enter the telephone number, (502) , and fax number, (502) Enter your address as the 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 second dialog box, click Add to select the type of input to collect. Click product information in the Select the type of input for this question list box and click Next. Click the Product code and Serial Number check boxes and clear the other two check boxes (Model and Platform and version). Click Next. Click the Add button again. Click ordering information in the Select the type of input for this question list box and click Next. All three check boxes 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 the text New Page 1 with the text Order Form. Replace the text This is an explanation of the purpose of the form with 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 you choose. Add at least one additional page. Possible page topics include Education, Hobbies, Sports, Favorite Books and 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.

58 3 lesson THREE 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 Formatting and Adding Objects to Web Pages skills 1. Creating Tables 2. Formatting Tables 3. Applying a Theme to a Web 4. Applying Custom Themes 5. Creating Text Hyperlinks 6. Editing Hyperlinks 7. Adding Images 8. Formatting Images 9. Image Mapping 10. Creating an Interactive Button 11. Creating a Marquee 12. Creating Forms 13. Adding Check Boxes and Option Buttons 14. Creating a Drop- Down List Box 15. Creating a Push Button As you saw in Lesson 2, if you use a template you can keep your Web site formatting tasks to a minimum. However, as you become more skilled at creating your own Web pages, you will probably want to exert more control over the design. Formatting your Web pages to make your site readable, easy for visitors to use, and aesthetically pleasing is difficult. Your broad goals are to attract first-time visitors and to keep visitors coming back. When you design Web pages, remember a simple rule: function over form. Job one is to make your site functional. Use styles and graphics only to enhance your message. Site usability is your foremost concern. Never add design elements that make it 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 interesting graphics, hyperlinks, or other design elements. It simply means that you must make sure that your design elements are either compatible with or enhance the primary goals of readability and usability. Some common mistakes novice Web designers make are choosing a difficult-to-read font, making text harder to read by using a font color that does not contrast sufficiently with the background or a textured background, using uncommon hyperlink styles so that users do not recognize them as hyperlinks, using an unusual name for a link that is commonly used on many sites with a well-known name, and placing commonly used design elements in unusual positions on the page. One of the easiest formatting methods is applying a theme. Themes include pre-selected fonts, text colors, background, bullet styles, and graphics. Since complementary elements are selected and applied all at once, this can save you considerable design time. There are many different types of objects you can add to your Web pages. Tables and lists 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 site visitors on a form. A form can either be inserted on a Web page or created as an independent page. You can apply formatting changes to any object you add to a Web page, 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 and format 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, option buttons, drop-down boxes, and push buttons.

59 FP 3.2 LESSON THREE Formatting and Adding Objects to Web Pages skill 1 Creating Tables overview One of the most common Web page design elements is a table. Tables are used to structure and organize information. They consist of horizontal rows and vertical columns with a cell at the intersection of each row and column. Text, numbers, graphics, buttons, lists, and even other tables can be inserted in each cell. Web page designers commonly use tables to structure their page layout. You can use any of three methods to create a table. You can use the Insert Table 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 Insert Table dialog box, you have more control over the table design. You can set cell padding and cell spacing, border size and color, and a background color for the table. how to Tables that you have created in Microsoft Word or Microsoft Excel can also be imported to a Web page. To create a table with no borders, set the Cell padding, Cell spacing and Size (in the Borders section) spin boxes to 0. As you add content to your table, the rows and columns expand. To add more rows to the table you just created, press the [Tab] key at the end of the text in the fourth cell. Another row with two cells is automatically inserted. 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 the club. 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, 2Rowsand 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 cell gridlines 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 walls between the cells. 7. In the Borders section, click the list arrow on the Color list box and select the White square either in the Standard Colors section or the Document Colors section. The border color 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 insertion point in the first cell. 9. Type Organizational Goals and press the [Tab] key.

60 I n t e c t i v e L e a r n i n g S e r i e s FP 3.3 Table 3-1 Deleting elements of a table Action Delete a table Delete a cell Delete a row Delete a column Steps Click anywhere in the table you want to delete, open the Table menu, point to Select, and click Table. Right-click the table and select Delete Cells. Click in the cell you want to delete, open the Table menu, point to Select, and click Cell. Right-click the cell and select Delete Cells. Click in any cell in the row you want to delete, open the Table menu, point to Select, and click Row. Right-click the row and click Delete Rows. Click in any cell in the column you want to delete, open the Table menu, point to Select, and click Column. Right-click the column and click Delete Columns. Figure 3-1 The Insert Table dialog box Use to set the amount of space between the cells and the cell content Use the Rows and Columns spin boxes to set the number of cells in the table Use to set the border size around the table and around each of the cells in pixels Use to set the thickness of the cell walls between the cells

61 FP 3.4 LESSON THREE Formatting and Adding Objects to Web Pages skill 1 Creating Tables (Cont d) how to 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 now look like Figure 3-2. extra When you use the Insert Table button on the Standard toolbar, you cannot set any specific design parameters for the table. You simply use the drop-down palette to select the number of cells. To control how much space a table occupies on the Web page, use the Specify width and Specify height check boxes in the Layout section in the Insert Table dialog box. You can set the width and height in either the number of pixels or the percent of the screen the table occupies. Fixed table widths are set in pixels. The In percent width setting sizes the table width relative to the page. The table resizes automatically when users resize their browser windows. If you do not set a specific 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 as necessary. To change the background for the table, use the Background section. You can make the background a different color from the page or insert a graphic to serve as the table background. The Size list box in the Borders section sets the border 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.

62 I n t e c t i v e L e a r n i n g S e r i e s FP 3.5 Figure 3-2 Inserting a table Rows Cell Column Practice 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 the file.

63 FP 3.6 LESSON THREE Formatting and Adding Objects to Web Pages skill 2 Formatting Tables overview You can also apply formatting changes after a table has been created. To apply text formatting changes including font changes, underlining and color, use the Formatting toolbar. To change the cell padding, cell spacing, background color, border size, or cell width, use the Table Properties dialog box. You can make changes to the entire table, individual cells, or specific rows or columns. how to You can also format the font in a table in the Font dialog box. First, select the table or cell you want to format. Then, rightclick the table and click Font to open the Font dialog box. Text can be aligned in a cell either horizontally or vertically. The choices in the Horizontal alignment list box are: Default, Left, Right, Center, and Justify. The choices in the Vertical alignment list box are: Default, Top, Middle, Baseline, and Bottom. The Baseline setting aligns the text in a row along an imaginary line across the bottoms of the letters. Format a table. 1. On the Index page in the Speed Demons Web, right-click the table and click Table Properties to open the Table Properties dialog box. 2. In the Borders section, click the list arrow on the Light border list box and select the Aqua 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 all browsers. 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 has changed. 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 Click to save the changes. extra border. When you see the vertical resizing arrow, drag up or down to increase or decrease the table height. You can also use the mouse to resize a table. To resize the table horizontally, position the pointer over a vertical border. When you see the horizontal resizing arrow, drag to the left or right to increase or decrease the width of the table. To resize the table vertically, position the pointer over a horizontal To add rows or columns, first drag to select the table. Open the Table menu, point to Insert, and click Rows or Columns to open the Insert Rows or Columns dialog box (Figure3-5). You can also right-click the table and select Insert Rows or Insert Columns to insert a single row (above) or a single column (to the left).

64 I n t e c t i v e L e a r n i n g S e r i e s FP 3.7 Figure 3-3 The Table Properties dialog box The Float setting is used to push a table to the left or the right and format the text on the page to flow around the table. This may not be visible in all browsers. The light border color is used for the top and left edge of the table, and the dark border color is used for the bottom and right edge of the table The border colors and size have been changed and the text centered in each cell Figure 3-5 The Insert Rows or Columns dialog box Figure 3-4 Formatting a table Click to insert rows. The Number of columns spin box changes to the Number of rows spin box Practice Format the table on the Index page in the Caddy Shop Web so that the borders are the same Green color as the text. Change the font to Comic Sans MS and increase the Font size to 4 (14 pt). Save the file.

65 FP 3.8 LESSON THREE Formatting and Adding Objects to Web Pages skill 3 Applying a Theme to a Web overview A theme is a preformatted style that you can apply to a Web page or an entire Web. A set of formatting instructions controls the background, fonts, colors, and button styles. Themes provide a fast method for designing Webs or applying a matching design to mulle pages. It is usually best to apply a theme to an entire Web to maintain visual consistency. Although you can apply a theme to only one page or various themes to different pages, it is generally not recommended. One benefit of themes is that they knit your site together as a coherent and professional whole. how to FrontPage 2003 automatically applies themes using cascading style sheets (See Lesson 5). Older themes may not format correctly in Netscape or Mozilla browsers. To apply a theme only to selected pages, first select the pages on the Folder List. Use the [Ctrl] key to select mulle pages. Then, select Apply to selected page(s) on the menu for the theme you want to apply. 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 theme in the All Available themes section. 4. Point to the Blends theme, click the list arrow, and select Apply as default theme to apply the Blends theme to all pages in the Web (Figure 3-6). 5. A Microsoft Office FrontPage warning message opens to caution you that applying a default theme replaces existing formatting information, but pages to which a theme has already been applied do not change. Themes applied to an individual page take precedence over themes applied to the entire Web (Figure 3-7). 6. Click. Close the Theme task pane. To remove a theme from a Web, open the Theme task pane, click the list arrow on No theme, and select Apply as default theme. To remove a theme from a single page, open the page, open the Theme task pane, click the list arrow on No theme and select Apply to selected page(s).

66 I n t e c t i v e L e a r n i n g S e r i e s FP 3.9 Figure 3-6 Applying a default theme Select to switch from normal colors to vivid colors The active graphics set uses animated page elements such as interactive buttons rather than plain buttons or link bars Figure 3-7 Applying a default theme warning message

67 FP 3.10 LESSON THREE Formatting and Adding Objects to Web Pages skill 3 Applying a Theme to a Web (Cont d) how to 7. On the Folder List, double-click organizational_goals.htm to open the Organizational Goals page. The Blends theme has been applied to all Web pages in the Web (Figure 3-8). 8. Click to save the changes. extra You can apply a theme to one or more pages or you can make it the default theme to apply it to an entire Web. This is the recommended method to maintain consistency throughout the site. When you set a default theme, it is automatically applied to new pages. The 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, table borders, and the page background. You can select the Vivid colors check box at the bottom of the Theme task pane to apply vivid colors. Graphics: Graphical page elements include background pictures, page banners, bullets, navigation buttons, and horizontal 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.

68 I n t e c t i v e L e a r n i n g S e r i e s FP 3.11 Figure 3-8 The Organizational Goals page with the Blends theme Practice Apply the Citrus Punch theme to the Caddy Shop Web as the default theme for the Web. Save the change.

69 FP 3.12 LESSON THREE Formatting and Adding Objects to Web Pages skill 4 Applying Custom Themes overview Themes are particularly useful because they are flexible and can be modified. You are not restricted to only the preset format. Even though colors, fonts, bullets, and other elements have been applied, you can still customize each element. You can apply a theme site-wide and yet make enough changes that the site design does not have a prefabricated look. how to The Background picture check box is selected by default because all themes use a graphic as the background. To use a plain white background instead, clear the Background picture check box. Customize 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 Customize Theme dialog box (Figure 3-9). 5. In the What would you like to modify? section, click to open a Customize Theme dialog box dedicated to modifying colors. In the Color Schemes list box, scroll down 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, royal blue, white and medium blue (Figure 3-10). 7. Click the Custom tab. In the Item list box, select Body. The body text should be royal blue as shown in the Color list box. 8. In the Item list box, select Hyperlinks. Standard hyperlink text is royal blue. In the Preview of pane, you can see that hyperlinks that have been followed (clicked) turn pink and active hyperlinks are red. 9. Click to close the Customize Theme (color) dialog box.

70 I n t e c t i v e L e a r n i n g S e r i e s FP 3.13 Figure 3-9 The Customize Theme dialog box Click to customize the colors for the elements in a theme Click to change the background image for the theme, or the graphics for buttons, bullet lists, and banners Figure 3-10 Creating a color scheme Drag to change the colors in the Colors in this scheme box

71 FP 3.14 LESSON THREE Formatting and Adding Objects to Web Pages skill 4 Applying Custom Themes (Cont d) how to Use the Graphics button to change the background image for the theme, or the graphics for buttons, bullet lists, and banners. You can also format button and banner text. 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 Comic Sans MS (Figure 3-11). 11. Click to close the Customize Theme (text) dialog box. The table text changes to the selected font. 12. Click to open the Save Theme dialog box. Type Modified Expedition in the Enter 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. extra rule (lines) table borders, and hyperlinks can each be set to a specific color individually. There are two ways to customize the colors for the elements in a theme. In this Skill you used the Color Wheel to generate a color scheme. You can also select a color for each Web page element on the Custom tab. The background, banner text, body text, headings, navigation buttons, horizontal In the Customize Theme dialog box that opens when you click the Graphics button, if you select a Web page element in the 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 text hyperlinks. The hovered image displays when you position the mouse pointer over a button. An active hyperlink is a hyperlink that is currently selected in the browser.

72 I n t e c t i v e L e a r n i n g S e r i e s FP 3.15 Select the type of text (Body or Heading type) Figure 3-11 Customizing theme text Practice Create a customized theme for the Caddy Shop Web. Apply the Capsules theme and modify it using the Cactus color scheme. Change the font type to Garamond for the Body and all six Headings. Save the theme as Modified Capsules and apply it to all four pages in the Web as the default theme for the Web. Save the changes to the Web.

73 FP 3.16 LESSON THREE Formatting and Adding Objects to Web Pages skill 5 Creating Text Hyperlinks overview As you probably know, a hyperlink is text or an object on a Web page that most commonly connects a visitor to a file, another Web page, or another Web site. You can also design hyperlinks to download files or start other operations such as opening your program with a recipient s address already inserted in the To box. You can turn almost any object, 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 (Uniform Resource Locator) for a specific Web page, file, or address. how to The easiest way to create a hyperlink is to type the URL of the target page directly onto the Web page. FrontPage automatically creates a link to the Web address. You can also create a hyperlink without choosing a specific word, phrase, or image on the Web page. Simply place the insertion point where you want to position the hyperlink. Open the Insert Hyperlink dialog box and locate the target page or file. When you create the link, the title of the target page is inserted as hyperlink text on the Web page. If there is no title, the URL is inserted. 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 is created, 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 click The 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 to create 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 the text color changes according to the color scheme for the theme. Royal blue is the Web standard for hyperlink text, but this can vary in FrontPage themes. 15. Save the changes. Click the Preview tab to switch to Preview view.

74 I n t e c t i v e L e a r n i n g S e r i e s FP 3.17 Figure 3-12 The Insert Hyperlink dialog box Click to create a link to a bookmark Click to create a link to an address The target address

75 FP 3.18 LESSON THREE Formatting and Adding Objects to Web Pages skill 5 Creating Text Hyperlinks (Cont d) how to Make sure you give the bookmark a name that clearly identifies the section of text and do not include spaces in the bookmark name. 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 Internet Explorer 6.0. Click the Organizational Goals hyperlink to view the Organizational Goals page. 18. Close Internet Explorer. The followed link has turned pink (Figure 3-13). Some browsers may not have the ability to open a blank, pre-addressed window. extra In the Insert Hyperlink dialog box on the Link to bar, there are four buttons. The Existing File or Web Page button is used to locate existing files or Web pages on your computer or your local network. You can either use the Current Folder, Browsed Pages, and Recent Files buttons to locate the document you want to link to or you can use the familiar Look in list box. The Place in This Document button is used to link to a location on the current document. Before you can create this type of link, you must set a bookmark to the target section of the document. Position the insertion point before the section to which you want to link, open the Insert menu and click Bookmark to open the Bookmark dialog box. Enter a name for the bookmark in the Bookmark name 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 Address button is used to create a link to an address. When users click the link, their default program opens to a mail-composing window with the specified address inserted in the To field.

76 I n t e c t i v e L e a r n i n g S e r i e s FP 3.19 Figure 3-13 Hyperlinks on a Web page The followed link turns pink Hyperlink text changes color and is underlined Practice Create hyperlinks for the items in the table on the Index page in the Caddy Shop Web. Link Sales to orderform.htm, Products to best_selling_items.htm, and Contact Us to the address luckycaddy@luckycaddy.com. Click the Address button on the Link to bar, enter the address, and click OK. Finally, link Employment to a new file, employment.htm. Use the Create New Document button to create the new blank Web page. Save the changes.

77 FP 3.20 LESSON THREE Formatting and Adding Objects to Web Pages skill 6 Editing Hyperlinks overview When page names or target addresses change, you must edit your hyperlinks so that they remain functional. You may also need to edit a hyperlink if you want to switch from one kind of link to another-for example, change a URL link to an address link. Another reason you may have to fix a hyperlink is if you delete a Web page and want to redirect the link to a new 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 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 also test your links in Preview view, or you can test them in Design view by holding down the [Ctrl] key and clicking the link. how to You can modify hyperlink text just as you edit any text on a Web page. You can use the Formatting toolbar to change the font, font color, font size, and font style of hyperlink text. With the hyperlinks in the table structure, you can select the table and apply formatting changes to all of the hyperlinks in the table at once. To edit a hyperlink you can also select the hyperlink and click on the Standard toolbar to open the Edit Hyperlink dialog box. 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 the page 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 Edit Hyperlink 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 document text box (Figure 3-15). 8. In the When to edit section, select the Edit the new document later option button and click to close the dialog box. 9. Double-click news.htm in the Folder List. Open the File menu and click Save As. Make sure 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 text box (Figure 3-16). 11. Click to close the Set Page Title dialog box. 12. Click. A Microsoft Office FrontPage warning message prompts you to replace 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 Recent News hyperlink. 14. Press the [Ctrl] key and click the hyperlink. The link takes you to the new page, news.htm.

78 I n t e c t i v e L e a r n i n g S e r i e s FP 3.21 Figure 3-14 The Confirm Delete dialog box Figure 3-15 The Edit Hyperlink dialog box Enter the name for the new document. Web page names should not contain spaces. Use underscores to create spaces in your document names Select to open the new page Click to return to the index page Figure 3-16 The Set Page Title dialog box Enter the title for the Web page Figure 3-17 Replacing an existing file with a new page title The warning message box opens because you are saving the page with a new title

79 FP 3.22 LESSON THREE Formatting and Adding Objects to Web Pages skill 6 Editing Hyperlinks (Cont d) how to 15. Reopen the Index page and right-click the Skydiving Near You hyperlink. Open the Edit Hyperlink dialog box. Follow the procedure in steps 6 through 12 to change the link to a new 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 the schedule_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 procedure to close each of the Web pages. If you are prompted to save the changes to any of the pages, click. extra 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. If no theme is applied, you can use the Page Properties dialog box to modify the format for hyperlinks. Right-click the hyperlink 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 text hyperlinks. To change the text color for all hyperlinks in a Web to which a theme is applied, open the Customize Theme dialog box for the Web site default theme from the Theme task pane. Click the Colors button. On the Custom tab, in the Item list box, select Hyperlinks, Hyperlink (Active) and Hyperlinks (Followed) in turn, and select a color in the Color list box.

80 I n t e c t i v e L e a r n i n g S e r i e s FP 3.23 Figure 3-18 Saving a page with a new name and page title Figure 3-19 A Web page properties dialog box You can also change the page title for a Web page in the Properties dialog box for the page Practice In the Caddy Shop Web, open best_selling_items.htm. Save it with the new name products.htm. Change the page title to Products. Delete best-selling_items.htm. Change the target URL for the Products link to products.htm. Save the change. Use the tabs to close all open pages in the Web.

81 FP 3.24 LESSON THREE Formatting and Adding Objects to Web Pages skill 7 Adding Images overview 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, you must use caution. Many Web site visitors still use dial-up Internet service providers, and each graphic you add increases the time it takes for a Web page to load in visitors browsers. how to To insert a picture from your hard disk, open the Insert menu, point to Picture and click From File to open the Picture dialog box. Use the Look in list box to locate the file on your computer and click the Insert button. Insert an image. 1. Open the Index page in the Speed Demons Web. 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 in the Web, or is accidentally saved in a folder in another Web, it will not appear in the published Web. To insert a picture from your hard disk, you can also click the Insert Picture From File button on the Standard toolbar to open the Picture dialog box. extra You can check the Estimated Time to Download box on the Status bar to find out approximately how long it will take for a Web page to download. If you use many images on your Web, use this tool to ensure that your pages will load in a reasonable amount of time. The best formats to save images in are GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts Group). These formats compress large photographic files so that they take less time to load when published. Images you insert that are not in GIF or JPEG format are automatically converted to GIF when FrontPage copies them to the Web page folder. Some Clip Art images may be inserted as WMF (Windows Meta File) files. WMF files can be viewed in Internet Explorer, but they may not display in other browsers, such as Netscape Navigator. However, you can convert a WMF file to GIF. Double-click the image to open the Picture Properties dialog box (or right-click the image and click Picture Properties). 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 Picture Properties dialog box.

82 I n t e c t i v e L e a r n i n g S e r i e s FP 3.25 Figure 3-20 The Clip Art task pane Search results Figure 3-21 Image inserted in a Web page Inserted image Estimated Time to Download Practice In the Caddy Shop Web, insert the Clip Art picture that you locate when you search for golf below the table in the Index page. Close the Clip Art task pane and save the embedded file.

83 FP 3.26 LESSON THREE Formatting and Adding Objects to Web Pages skill 8 Formatting Images overview 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 an image, 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 can support. You can also use tables or cascading style sheets (CSS) (See Lesson 5) to position images. You can use the alignment buttons on the Formatting toolbar to position images, but image alignment does not work exactly the same way as text and paragraph alignment. how to If the image is a hyperlink the border is inserted in the hyperlink color. The Wrapping styles are used to designate how the text surrounding the image is displayed in relation to the image. Format an image 1. On the Index page in the Speed Demons Web, click the image to select it. Sizing handles appear 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 the pointer turns into a resizing arrow, click and drag upward to decrease the size of the image 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 dialog box. 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. extra When you create a Web, FrontPage automatically creates an images folder. If you intend to use a lot of images, you should move them to this folder. You can use the Save Embedded Files dialog box to save images in the images folder. This is a good file-management practice that enables you to quickly locate images. You 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 Align Right) on the Formatting toolbar or you can use the Alignment list box on the Appearance tab in the Picture Properties dialog box. In the Picture Properties dialog box, the Specify size check box is selected by default. This means that the height and width of the image are specified in the HTML code. If you clear this check box, the height and width are set according to the size of the image. In general, you should leave the Specify size check box selected because images load more quickly when the size is specified in the HTML code. The Keep aspect ratio check box is used to automatically adjust the height of 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 automatically when 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 and write text over the top of the image.

84 I n t e c t i v e L e a r n i n g S e r i e s FP 3.27 Figure 3-22 Resizing an image Sizing handles Figure 3-23 The Picture Properties dialog box Use to set the horizontal spacing between the image and the nearest text or image in pixels Use to set the vertical spacing between the image and the nearest text or image on the line above or below in pixels Use to set a precise width for the image either in pixels or as percentage of the width of the original image Use to set a precise height for the image either in pixels or as a percentage of the height of the original image

85 FP 3.28 LESSON THREE Formatting and Adding Objects to Web Pages skill 9 Image Mapping overview An image containing mulle links is called an image map. You can use the Pictures toolbar to easily create a link, or mulle 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. how to You can use either the Circular Hotspot or Polygonal Hotspot button on the Pictures toolbar to more precisely conform to the shape of the chosen area on the image. You can insert as many hotspots as will fit on an image. However, you should choose an image with easily distinguishable areas so that visitors can discern where the links are. To change the link for a hotspot, double-click the hotspot to open the Edit Hyperlink dialog box. Change the URL in the Address list box or browse to locate the page or file. Create 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 where it does not cover the image. You can dock the toolbar either below the Formatting toolbar or 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 the airplane and drag outward to create the circle. If it is not exactly as you want it, you can use the sizing handles to adjust the shape after you insert the hyperlink (Figure 3-25 on page 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 it would over any other hyperlink, but not when it is over part of the image that is not mapped. 15. Open the File menu, point to Preview in Browser and click Microsoft Internet Explorer 6.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 to save the changes to any of the pages, click. To delete a hotspot, select it and press the [Delete] key.

86 I n t e c t i v e L e a r n i n g S e r i e s FP 3.29 Figure 3-24 The Pictures toolbar Insert Picture From File Polygonal Hotspot Click to insert text over an image Click to create a thumbnail of the image Circular Hotspot Rectangular Hotspot Bevel Crop Position Absolutely Less Contrast Bring Forward More Brightness Send Backward Less Contrast Rotate Left 90º More Contrast

87 FP 3.30 LESSON THREE Formatting and Adding Objects to Web Pages skill 9 Image Mapping (Cont d) extra Pages, 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 click Hyperlink to open the Insert Hyperlink dialog box. For an existing file or Web page, enter the URL for the page in the Address list box or use the Look in list box or the Current Folder, Browsed

88 I n t e c t i v e L e a r n i n g S e r i e s FP 3.31 Figure 3-25 Creating a Hotspot A hotspot Use the sizing handles to adjust the shape of the hotspot Practice On the Index page in the Caddy Shop Web, create a hotspot on the golfer picture. Link to a new file, frequently_asked_questions.htm. Save the page with the title FAQ and close all open Web pages.

89 FP 3.32 LESSON THREE Formatting and Adding Objects to Web Pages skill 10 Creating an Interactive Button overview An interactive button is a hyperlink button that looks different when a user points to it or hovers the mouse pointer over it. Interactive buttons replace hover buttons in earlier versions of FrontPage. They have a more sophisticated design and can be modified in many more ways than 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 original image, the hover image, and the pressed image. The original image is how the button looks normally, when the pointer is not hovered over it and it is not pressed. The hover image is how it looks when the pointer is hovered over it, and the pressed image is how it looks when it is clicked and the mouse button is held down. how to You can also click the Web Component button on the Standard toolbar to open the Insert Web Component dialog box. When you save an interactive button, the image file names are automatically entered as button followed by a unique number or letter. If you use several interactive buttons in your Web, you should change the default names to better identify the buttons. To edit and make formatting changes to an interactive button, right-click it and select Button Properties to open the Interactive Buttons dialog box. 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 Component dialog 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 Interactive Buttons dialog box. 6. In the Buttons list box, scroll down and select Embossed Capsule In the Text text box, type Home. When the Web page is opened in a browser and in Preview view, Home will identify the interactive button. 8. Click the Font tab. In the Original Font Color list box, select the brown square in the Theme Colors section. 9. In the Hovered Font Color list box, select the tan/orange square in the Theme Colors section. 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 the Organizational Goals page to the Index page. 15. Click to close the Edit Hyperlink dialog box.

90 I n t e c t i v e L e a r n i n g S e r i e s FP 3.33 Figure 3-26 The Insert Web Component dialog box Figure 3-27 The Interactive Buttons dialog box Position the mouse pointer over the button to preview the hovered effect. Click the button (hold down the mouse button) to preview the pressed effect Use to change the font, apply a style and change the size of the button text Use to modify the font color on an interactive button Figure 3-28 The Image tab JPEGs have a solid background; GIFs can use a transparent background

91 FP 3.34 LESSON THREE Formatting and Adding Objects to Web Pages skill 10 Creating an Interactive Button (Cont d) how to When you delete an interactive button, you must also delete the three image files. They are not automatically deleted. 16. Click to close the Interactive Buttons dialog box. 17. Click the interactive button and click on the Formatting toolbar to center the button on the page. 18. Click. The Save Embedded Files dialog box opens. There are three button images, one for 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 interactive button images in the images folder in the Speed Demons Web. 22. Open the File menu, point to Preview in Browser and click Microsoft Internet Explorer Internet Explorer may block active content. If so, click the security warning below the Address bar and select Allow Blocked Content. Click to close the Security Warning 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 corners display 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. extra 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 time displays, alert messages, and calculators. The JavaScript code is inserted in the head section of the Web page. The key function in the JavaScript code for an interactive button is the Swap Image function, which instructs the 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 or GIFs. JPEG (Joint Photographic Experts Group) files can display literally millions of colors. This wide range of colors is necessary because rounded, beveled, embossed and shiny effects require many color gradations. The advantage to using JPEG images is that the buttons appear smooth and rounded because of the many gradual color changes. However, even rounded JPEG button images have a solid background. This can cause a problem if the background of the page is not a solid color. As long as the page background is solid, you can make the JPEG background color the same as the page color and the JPEG background is not visible. However, if the page background is not a solid color, the JPEG button image 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 not available. However, GIF files can use a transparent background, so you can avoid the problem of the four corners appearing 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 use Internet Explorer 3.0 or later, Netscape Navigator 3.0 or later, or Opera 3.0 or later.

92 I n t e c t i v e L e a r n i n g S e r i e s FP 3.35 Figure 3-29 Saving the button images Figure 3-30 The Change Folder dialog box There are three buttons images: the original image, the hover image, and the pressed image; change the default names to better identify the buttons if you use several interactive buttons in your Web Figure 3-31 An interactive button in the hovered state in IE Practice In the Caddy Shop Web, add an interactive button below the numbered list on the products.htm page 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 you choose. Save the button image files in the images folder.

93 FP 3.36 LESSON THREE Formatting and Adding Objects to Web Pages skill 11 Creating a Marquee overview A marquee is scrolling text that flows across the Web page. Animated text is used to attract visitors 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, you should use marquees sparingly. Scrolling marquees are supported by Internet Explorer, but not all other browsers. In browsers that do not support scrolling text, visitors see the marquee text, but not the special effect. how to 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 Component dialog box. 4. In the Component type list box, Dynamic Effects is selected by default. In the Choose an effect 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). 10. Click to save the changes. 11. Switch to the Preview view. The marquee text moves back and forth across the screen (Figure 3-33). extra Although marquees typically appear at the top of a page, you can place them wherever you wish. If you 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 is inserted one line above it. As you saw in the skill, to format a marquee, you must first select it so that sizing handles surround the marquee. The sizing handles are used to increase or decrease the space in which the marquee scrolls. To format the text, either use the buttons on the Formatting toolbar or open the Format menu and click Font to open the Font dialog box.

94 I n t e c t i v e L e a r n i n g S e r i e s FP 3.37 Figure 3-32 The Marquee Properties dialog box Controls how the marquee moves Figure 3-33 Marquee sliding across a Web page Marquee Practice 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.

95 FP 3.38 LESSON THREE Formatting and Adding Objects to Web Pages skill 12 Creating Forms overview Forms are used to collect information from Web site visitors. For example, sometimes visitors are required to complete a registration form before they can use a Web site. Other examples of forms 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 button are inserted on the Web page. You must create the additional data entry form fields. Form fields 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 user submits a form, the value the user enters in the field is matched with the name of the field, for example, username: John. The name identifies the question and the value is the answer submitted by the user. how to You can also insert a form on a page you have already created. A form does not have to be on a separate page. You can also create a form by inserting a text box on a page. The default setting is for FrontPage to automatically insert the Reset and Submit buttons when you insert a text box. If the default setting has been changed, open the Tools menu and select Page Options to open the Page Options dialog box. On the General tab, select the Automatically enclose form fields within a form check box. 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 theme for the Web. 4. Press [Enter] three times. 5. Open the Insert menu, point to Form, and select Form. Two buttons, Submit and Reset are 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, type Name: 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 Properties dialog box. 10. Type username in the Name text box. The name identifies the question and designates the type 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 example you 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 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 Properties dialog box. 16. Type in the Name text box.

96 I n t e c t i v e L e a r n i n g S e r i e s FP 3.39 Figure 3-34 Creating a form Text box Form buttons Figure 3-35 The Text Box Properties dialog box Identifies the name half of the name-value pair; enter the type of information you want the user to enter Identifies the value half of the name-value pair; you can enter an initial value to prompt the user to enter the correct data Enter the number of characters the user will be able to see in the textbox; this does not restrict the number of characters, but indicates how many characters are visible

97 FP 3.40 LESSON THREE Formatting and Adding Objects to Web Pages skill 12 Creating Forms (Cont d) how to Text boxes are limited to a maximum of 500 characters. For mulle lines of input, use a text area box. You can also press [Ctrl]+[Q] to open the Quick Tag Editor. To reposition a text box, use the pointer to drag the text box to the correct location on the form. 17. Type 35 in the Width in characters text box. The default width is 20 characters. The value you enter here does not designate the number of characters that can be entered. It designates the number of characters that are visible in the text box. The user can enter more 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 first skydiving 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 Box Properties 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 can enter; 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 to open 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 text in 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 all elements in this page correctly, save or publish the page, and preview it in a Web browser, displays below the page tabs. Ignore it for now. The form page should look like Figure extra 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 dialog box for the type of form field. In the Properties dialog box, you can also set the Tab order for the field. 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 the password from view.

98 I n t e c t i v e L e a r n i n g S e r i e s FP 3.41 Figure 3-36 The TextArea Box Properties dialog box Enter the number of lines the user will be able to see in the text area box; designates the height of the text area box Figure 3-37 The Quick Tag Editor Editing the HTML code so that text will wrap in the text area box in all browsers Figure 3-38 Form in Preview view the form fields are ready to be completed and submitted Practice In the Caddy Shop Web, create a new page and insert a form. Create two text boxes: Name: and Set the Width in characters for both fields to 35. Create one text area box: Describe your golf club requirements: Set the Number of lines to 5. Save the file as feedback_form.htm with the title Feedback Form.

99 FP 3.42 LESSON THREE Formatting and Adding Objects to Web Pages skill 13 Adding Check Boxes and Option Buttons overview Check boxes are used to submit yes or no answers and to allow users to select one or more options from a group of possible options. Option buttons are generally created for questions where there are several possible answers, but only one can be selected. Check boxes and option buttons make data entry easier for users by allowing them to answer questions with a click of the mouse. how to In order to be used in form scripting languages, entries in the Name text box must start with a letter or an underscore. All subsequent characters must be letters, digits, or underscores. To enable site visitors to select a check box by clicking either the label or the check box, select the text and the check box, open the Insert menu, point to Form, and click Label. 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 Name text 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 Box Properties 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 two variations of the same value. 9. The Initial state is set to Not checked by default. The check box will be empty on the form (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 the Option Button Properties dialog box. 15. Type number_times in the Group name text box. In a group of option buttons the group name must be the same for each button in the group. It is the matching group name that restricts 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 as it 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.

100 I n t e c t i v e L e a r n i n g S e r i e s FP 3.43 Figure 3-39 Inserting a check box Check box Figure 3-40 The Check Box Properties dialog box ON is the default value for a check box. If a user checks the selection, the option is on (YES) Figure 3-41 The Option Button Properties dialog box The initial state designates whether or not the check box is selected on the form The initial state designates whether or not the option button is selected. The default is to select the first option in a group

101 FP 3.44 LESSON THREE Formatting and Adding Objects to Web Pages skill 13 Adding Check Boxes and Option Buttons (Cont d) how to You cannot create a validation rule for a check box. If you think a validation rule is needed to ensure that data is entered correctly, use an option button or a drop-down box instead. 20. Right-click the 6-10 option button and click Form Field Properties to open the Option Button Properties dialog box. 21. number_times has been automatically entered in the Group name text box. After you set the group name, all subsequent option buttons you insert have the group name automatically entered. If you create the buttons before you set the group name, you must set the same group name for each button in the group individually. In the Value text box, type Click to close the Option Button Properties dialog box. 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 the Value text box (Figure 3-42). 26. Click to close the Option Button Properties dialog box. 27. Click to save the changes. 28. Switch to the Preview view. Your page should look like Figure extra have a value of send. The name-value pairs submitted could be, for example: Soup: send, Chili: send In a group of check boxes, where the user can select more than one answer, change the default value to identify the question being asked or the data to be entered. For example, if the group of check boxes is recording the products users are interested in receiving s about, each check box could You can create validation rules for most types of form fields. Validation rules are used to reduce data entry errors. They check the data entered by a user and return an error message if the data is entered incorrectly. For example, you can create 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 a fixed number of characters. For option buttons, you can create a validation rule that requires at least one of the options to be selected. To set a validation rule for a text box, right click it and select Form Field Properties to open the Text Box Properties dialog box. Click the Validate button to open the Text Box Validation dialog box. You can select the Data type (Text, Integer, Number), the Text format (if you select Text as the data type) the Numeric format (if you select either Integer or Number as the data type), and the Data length. If you select Required in the Data length section, you can 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).

102 I n t e c t i v e L e a r n i n g S e r i e s FP 3.45 Figure 3-42 Setting properties for an option button group If you set the group name before you create the subsequent option buttons, the group name is automatically entered Figure 3-43 Form in Preview view Option buttons Figure 3-44 The Text Box Validation dialog box Select the data type (Text, Number, or Integer) Choose how you want numbers to display: with a comma separator, a period, a space or no demarcation Practice On the Feedback Form in the Caddy Shop Web, create a check box with the text, Do you own golf clubs? Set the name for the check box to own_clubs and the value to YES. Create four option buttons with the text, 1-3, 4-6, 7-10, and more than 10. Set the group name to number_clubs and the values to match the option button labels. Save the changes to the form.

103 FP 3.46 LESSON THREE Formatting and Adding Objects to Web Pages skill 14 Creating a Drop-Down Box overview Drop-down boxes are used for form fields that have mulle possible selections. They simplify data entry by enabling users to select from a list of choices rather than typing an answer. Drop-down boxes also save space on the form as opposed to creating many check boxes 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 bit longer process than adding the other form fields. First you must insert the drop-down box, and then you must add each of the values for the list. The name-value pairs are the name assigned to the drop-down box and the values on the list. Drop-down boxes can be configured to accept only one or mulle selections. how to To change the order of the items on the dropdown list, open the Drop-Down Box Properties dialog box. Select a menu item in the Choice column and click the Move Up or Move Down button. If you want to create a scrolling list box, which displays some of the choices on the form, enter the number of choices you want to display in the Height box. For example, if the menu has only three options, enter 3 in the Height box to make all three menu items visible on the form. Add a drop-down box to a form and create the name-value pairs. 1. Open the Feedback Form page in the Speed Demons Web in Design view. 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-down box. 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 text box (Figure 3-45). 9. In the Initial State section, make sure the Not selected option button is selected. Click to 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.

104 I n t e c t i v e L e a r n i n g S e r i e s FP 3.47 Figure 3-45 The Add Choice dialog box Select if you want the form results to display a different value than the entry in the Choice text box. Enter the value you want the form results to show in the text box Select to make the menu option the default (pre-selected) value Figure 3-46 The Drop-Down Box Properties dialog box Use to set the order in which you want the field to receive the focus (a number from1-999); to skip a field in the tab order, enter -1

105 FP 3.48 LESSON THREE Formatting and Adding Objects to Web Pages skill 14 Creating a Drop-Down Box (Cont d) how to The Allow mulle selections option in the Drop-Down Box Properties dialog box is set to No by default. If you want to allow your visitors to make mulle menu selections, select the Yes option button instead. You must include an instruction on the form to tell users to hold down the [Ctrl] key while they make their selections. 12. In the Allow mulle selections section, make sure the No option button is selected. 13. Click to close the Drop-Down Box Properties dialog box. 14. Click to save the changes. 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. extra In the skill, you left Not selected as the initial state for each option button. Set the initial state to Selected if you think one of the answers will be chosen by the majority of your visitors. If the user wants the default option selected, he or she can skip the field, but if the option is incorrect, the user can select another option. To change one of the list values in a drop-down box, open the Drop-Down Box Properties dialog box, select the value in the 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 minimum and maximum number of choices users can make, and preventing users from selecting the first option on the list. This is done, for example, when the first menu item is used to give users an instruction.

106 I n t e c t i v e L e a r n i n g S e r i e s FP 3.49 Figure 3-47 A drop-down box on a form Drop-down box Practice On order_form.htm in the Caddy Shop Web, create a Payment Method drop-down box between the Billing and Shipping sections. Name the field payment_method. Your list should include Credit card, Debit card, Cash-on-Delivery, Paypal, Check, and Money order. Save the changes to the form.

107 FP 3.50 LESSON THREE Formatting and Adding Objects to Web Pages skill 15 Creating a Push Button overview Push buttons are yet another form field. Most Web authors leave the Reset and Submit buttons at the bottom of the form page. However, it may sometimes be convenient to have an additional Reset or a Submit button at an earlier point in the form. In these cases, a push button can be inserted. A push button can also be used to answer a yes or no question. how to If the tab order does not follow the desired sequence, open the Properties dialog box for each form field and enter the correct numbers in the Tab order text boxes for each form field. Use the Options section in the Form Properties dialog box to specify what fields to save and where to save the data results. Create a push button and assign the name-value pair. 1. Open the Feedback Form page in the Speed Demons Web in Design view. 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 the specified 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 for the button. 7. In the Value/label text box, type Reset. The push button value is visible to users. It is the text 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. 10. Click to save the changes. 11. Open the File menu, point to Preview in Browser, and select Microsoft Internet Explorer If necessary, click the security warning below the Address bar and select Allow Blocked Content. 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 skips the option buttons that are not selected and proceeds to the Name text box. Use the arrow keys to select a different option button. Your form should now look like Figure Close Internet Explorer. 15. Right-click the feedback_form.htm tab and select Close to close the form. extra processing 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 the Form Properties dialog box. Click the Browse button to locate the folder where you want the form results to be saved. You can also send completed forms to an address, database, or form

108 I n t e c t i v e L e a r n i n g S e r i e s FP 3.51 Figure 3-48 The Push Button Properties dialog box Enter the text for the button The Normal option is used if you are going to use custom scripts (e.g., JavaScript) to process the form Figure 3-49 The completed form in Internet Explorer Click to clear all data on the form Practice On the order_form.htm page in the Caddy Shop Web, add a Reset button below the Shipping section. Assign the name-value pair. Save the changes. Preview the page in a browser and test the tab order. Close IE and the page.

109 FP 3.52 LESSON THREE Formatting and Adding Objects to Web Pages shortcuts Function Button/Mouse Menu Keyboard Insert Table Click Table, point to Insert, [Alt]+[A], [I], [T] and click Table Insert Hyperlink Click Insert, click Hyperlink [Ctrl]+[K] Insert Picture Click Insert, point to Picture, [Alt]+[I], [P], [F] From File and click From File Insert Web Click Insert, click Web Component [Alt]+[I], [C] Component

110 I n t e c t i v e L e a r n i n g S e r i e s FP 3.53 quiz A. Identify Key Features Name the items indicated by callouts in Figure Figure 3-50 Formatting buttons and elements B. Select the Best Answer 11. These are used to format a page or an entire Web with a. Estimated Time to Download similar 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 pair how 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 ratio but only one can be selected. 17. The form field component that designates how data is submitted to a file, g. Hotspots address, database, or form script. 18. The scripting language used to create interactive buttons, date and time h. Drop-down box displays, alert messages, and calculators. 19. The option used to automatically adjust the height of an image so that it i. Marquee stays in proportion to the width of the image 20. Form field that has mulle possible selections on a list j. Interactive buttons