FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:53 PM Page 1 lesson 1
LESSONONELESSONONELESSONONELESSONONE ONE 1111111111111111111
Introducing Microsoft 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 skills 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 1. Introducing Microsoft be used to quickly enter text, insert graphics, and create page banners, navigation FrontPage buttons, and hyperlinks. 2. Starting FrontPage 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 3. Exploring the display HTML pages to visitors when they enter the Uniform Resource Locator FrontPage Interface (URL) in a browser. A URL is the address for a Web page on the WWW, such as www.azimuth-interactive.com. The Web server downloads the requested page and all 4. Opening a Web Page of the associated graphics and other files to the Web browser. 5. Saving a Web Page A FrontPage Web site that you create on your local hard disk and later publish is 6. Working in Design 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 View everything is working correctly. You can also create a server-based Web site. Server- 7. Getting Help in based Web sites are created directly on the Web server and do not need to be FrontPage 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 8. Exiting FrontPage 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. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:53 PM Page 2
LESSON ONE Introducing Microsoft FrontPage FP 1.2
Introducing Microsoft skill 1 FrontPage
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, Concept 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 2003. 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, E-Mail 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 E-Mail Us hyperlink opens a new message in your e-mail program with the e-mail 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 multiple 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. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:53 PM Page 3
Inter@ctiveLearning Series FP 1.3
Figure 1-1 A FrontPage 2003 Web Page
Web page title
Hyperlinks Graphic FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:53 PM Page 4
LESSON ONE Introducing Microsoft FrontPage FP 1.4
skill 2 Starting FrontPage
Before you can view or edit a Web page, you must open the FrontPage 2003 application. Concept FrontPage opens with a new blank Web page file.
Start the FrontPage application. how to 1. Make sure the computer, monitor, and any other necessary peripheral devices are turned on and the Windows desktop is on your screen. tip 2. On the Windows Taskbar at the bottom of your screen, click the Start button in The steps and the lower-left corner to open the Start menu. Your screen may differ slightly from the one screenshots assume that shown in the graphic. you are using a version 3. Point to All Programs to open a submenu similar to the one shown in Figure 1-2. If you of the Windows XP do not see Microsoft FrontPage listed on the All Programs submenu, you may find it on the operating system. If you Microsoft Office submenu (Figure 1-2). use a different version of Windows or have 4. Click Microsoft FrontPage 2003 to open FrontPage with a blank Web page. switched to the 5. If FrontPage is not currently your default Web page (HTML) editor, a dialog box prompts Windows Classic theme you to make it your default editor. Click (Figure 1-3). or another theme, your screen will look slightly different.
Your startup procedure may be slightly different from the one described in this skill due to variations More 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. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM Page 5
Inter@ctiveLearning Series 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 FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM Page 6
LESSON ONE Introducing Microsoft FrontPage FP 1.6
Exploring the FrontPage skill 3 Interface
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 Concept 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, www.azimuth-interactive.com. 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.
• 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 tip the Maximize button to enlarge the application window. If the window is maximized, The Maximize button the Restore button displays. The Restore button is used to revert the window to its replaces the Restore button when the previous size and location. To close the application, click the Close button . FrontPage window is • Menu bar: This is the row of menu titles below the Title bar. Click a menu title to display not enlarged to fit the a list of related commands. entire screen. • 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. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM Page 7
Inter@ctiveLearning Series FP 1.7
Figure 1-4 The FrontPage application window Title bar Minimize, Maximize, and Close Menu bar buttons
Standard toolbar Formatting toolbar
Task pane
Page views Status bar
Figure 1-5 The New task pane FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM Page 8
LESSON ONE Introducing Microsoft FrontPage FP 1.8
skill 4 Opening a Web Page
Designing a Web usually requires at least several sessions in which you add text, graphics, additional pages, and hyperlinks. Generally, the process will involve many modifications to Concept 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.
Open an existing Web page. how to 1. Click File on the Menu bar to open the File menu. 2. Click the Open command to access the Open File dialog box. tip 3. Click the list arrow on the Look in list box and locate your Student Files folder You can also use the (Figure 1-6). History, My Documents, 4. The folder may be located on a floppy disk or in a folder on your hard drive. If the folder Desktop, Favorites, and is stored on a floppy disk, click 3 1/2 Floppy [A:] to access it. If the folder is on your hard My Network Places drive or in a network location, click the location and double-click to open any subsequent buttons on the left side subfolders until you locate the Student Files folder. of the Open File dialog box to locate the 5. After you locate the Student Files folder, open the Lesson 1 folder and select the Student Files folder. fphowto1-4.htm file. 6. Click to open the rudimentary Web page (Figure 1-7). FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM Page 9
Inter@ctiveLearning Series 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. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM Page 10
LESSON ONE Introducing Microsoft FrontPage FP 1.10
skill 5 Saving a Web Page
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. Concept You can save Web pages on your hard drive, on a floppy disk, or on a network drive.
Save a Web page with a new name and in a new location. how to 1. With the fphowto1-4.htm student file open, open the File menu and click Save As to open the Save As dialog box. tip 2. On the left side of the dialog box, click the My Documents button to place the My The My Webs folder is Documents folder in the Save in list box. created when you install FrontPage, and it is the 3. In the contents window, double-click the My Webs folder to place it in the Save in list box. default storage folder for Web pages and Webs. 4. In the File name text box, delete the existing name and type skydive.htm (Figure 1-8). However, you can save 5. Click the Create New Folder button to open the New Folder dialog box. Each Web Webs in any folder. (In that you create should be stored in its own folder in the My Webs folder. Windows XP Home Edition, the My Webs 6. Type Speed Demons in the Name text box and click . folder is called My Web Sites.) 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. tip 8. Click . The Web Site tab opens and the page tab changes from If the Folder List fphowto1-4.htm to skydive.htm. command is not on the View menu, close all 9. Open the View menu and click Folder List to display the _private and images folders and open pages. Open the the new Speed Demons folder alongside the skydive.htm Web page (Figure 1-9). File menu and click Open Site. In the Open 10. The special folders in which FrontPage stores the information for a Web begin with an Site dialog box, navigate underscore. Most of these are not shown in the Folder List. Right-click and to and reopen the select Explore to open Windows Explorer. skydiver.htm Web page. Click Open. If a dialog 11. In the folder tree, select your My Documents folder. In the contents window, double-click box displays asking you the My Webs folder to view the contents. to add information to your folder, click Yes. 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 tip files and folders option button. Click . To create a new folder in any location, click the 14. You can now view the other folders FrontPage uses to store data associated with a Web. Create New Folder button Close Windows Explorer. in the Save As dialog box.
It is important to understand the difference between the Save and Save As commands. When you save a More 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 over- writes the existing document. The Save As command then is used to change the name and/or location of the existing document. You can make changes to 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. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM Page 11
Inter@ctiveLearning Series 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
Page views Practice
Open fpprac1-5.htm in your Student Files folder. Save the file as caddy.htm in a new folder named Lucky Caddy. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:54 PM Page 12
LESSON ONE Introducing Microsoft FrontPage FP 1.12
skill 6 Working in Design View
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 Concept 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 multiple 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.
Use the Page views. how to 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.
As you have learned, FrontPage is an HTML editor. The work you create in the WYSIWYG view is More 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. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM Page 13
Inter@ctiveLearning Series FP 1.13
Figure 1-10 Web page in Split view
Figure 1-11 Web page in Code view Show Split 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. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM Page 14
LESSON ONE Introducing Microsoft FrontPage FP 1.14
skill 7 Getting Help in FrontPage
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. Concept 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.
Use FrontPage Help. 1. If you do not have a continuous connection, connect to the Internet. You do not need to how 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 tip down and click About reports to open the related Help topic. In the Search Results 5. Click Site Summary and read about this kind of report (Figure 1-12). list, a blue circle with a 6. Close the Help page. question mark inside indicates a page in the 7. Scroll down the Search Results list and click the About FrontPage Web sites link. local Help files. A page A Microsoft Office Online Web page opens (Figure 1-13). icon with a question 8. Read the Microsoft Office Online Web page and close it. mark in a circle 9. Click the Microsoft Office FrontPage Help button on the Standard toolbar to reopen indicates a Microsoft the FrontPage Help task pane. Office Online Web page. 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.
You can also click the Table of Contents link on the FrontPage Help task pane to open the Table of More 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. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM Page 15
Inter@ctiveLearning Series 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. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM Page 16
LESSON ONE Introducing Microsoft FrontPage FP 1.16
skill 8 Exiting FrontPage
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 Concept before the application closes.
Exit FrontPage when you are finished working. how to 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.
The Close button on the Title bar closes the application. The Close button in the upper-right corner More 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. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM Page 17
Inter@ctiveLearning Series 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
Figure 1-15 Closing a Web Control menu icon Click to close the application
Click to close the site without exiting the Click to close application 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. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM Page 18
LESSON ONE Introducing Microsoft FrontPage FP 1.18 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 FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM Page 19
Inter@ctiveLearning Series FP 1.19 quiz
A. Identify Key Features Name the items indicated by callouts in Figure 1-16.
Figure 1-16 FrontPage screen elements 1. 2. 3. 4. 5. 6. 7.
8.
9.
10.
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 multiple 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) FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM Page 20
LESSON ONE Introducing Microsoft FrontPage FP 1.20 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 c. Answer Wizard Online. d. FrontPage Help a. Title bar 26. This screen element contains graphical buttons b. Menu bar that execute specific commands: c. Task pane a. Standard toolbar d. Status bar b. Menu bar 22. The default storage folder for Web pages and c. Graphical toolbar Webs is called: d. Taskbar a. My Documents 27. The Control menu is accessed from the: b. Recent Webs a. File menu c. My Webs b. Taskbar d. FrontPage Webs c. Title bar 23. This Page view can be used to learn HTML. d. Menu bar a. Preview view 28. The formatting language used to create Web b. Design view pages is: c. Code view a. URL d. Split view b. Web code 24. This Page view is used to add text, hyperlinks, c. FrontPage 2002 code and other Web page elements to Web pages: d. HTML a. Preview view 29. The keyboard shortcut to exit FrontPage is: b. Design view a. [Alt]+[F4] c. Code view b. [Ctrl]+[F4] d. Split view c. [Ctrl]+[S] 25. This task pane is used to access the Microsoft d. [Ctrl]+[F1] Help files and Microsoft Office Online: a. Getting Started b. New FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM Page 21
Inter@ctiveLearning Series 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. FP03_Lesson_01_09-16-05.qxd 2/25/2008 4:55 PM Page 22
LESSON ONE Introducing Microsoft FrontPage FP 1.22 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. lesson 2
LESSONTWOLESSONTWOLESSONTWOLESSONTWO TWO 2222222222222222222
Creating Web Sites 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 skills 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. 1. Using a Template to Create a Web Page 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 2. Using a Template to Support Web Site template to create a Web site devoted to identifying and serving Create a Web 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 3. Using a Web Wizard Wizard to import a Web site to a new local storage location. 4. Using the Import Web In the later skills in this lesson, you will learn Web design basics, including entering Wizard and formatting text and adding and formatting lists. It is very important to spell 5. Adding Text to a Web 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 Page preview a Web page in a browser. This lesson introduces you to the basics of 6. Formatting Web Page building and viewing Webs. Text Lesson Goal: 7. Adding and Learn how to use Wizards and templates, add and edit text, and run the Spelling Formatting Lists Checker on a Web page. You will also learn how to find and replace specific words and how to preview a published Web page. 8. Using the Spelling Checker and Editing a Web Page 9. Using the Find Command 10. Previewing a Web Page in a Browser LESSON TWO Creating Web Sites FP 2.2
Using a Template to skill 1 Create a Web Page
A template is a pre-designed format for a Web page that can include text and graphics. The predefined templates included with FrontPage 2003 provide one of the easiest ways to start overview 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 multiple authors are working on a Web. For example, you can design the home page for your site and use it to create a template that will be saved 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.
Use a template to create a Web page. how to 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.
As you can see, a template provides a basic structure or outline for a Web page. Some templates are extra 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. Inter@ctiveLearning Series 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. LESSON TWO Creating Web Sites FP 2.4
Using a Template to skill 2 Create a Web
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 overview and a general organizational structure and outline. As you have learned, you can replace placeholder text to customize the Web pages for your site.
Use a template to create a Web. how to 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 tip 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. Every Web contains a Folders view is quite similar to Windows Explorer. It is used to create, copy, delete, and Home page. A Home move folders (Figure 2-4). page is the first page that visitors see when 4. Notice the buttons at the bottom of the Web Site window. These are the Web site views. they reach a site. Click the Reports button to view the Site Summary of reports. Links are used to 5. Click Unlinked files to view the unlinked files on the site. navigate among the pages of a Web. 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, double- tip click index.htm either on the Folder List or in the Web Site window. Web servers require a If you are on a network default name for Home pages, usually, index.htm. If you change it, FrontPage automatically or a multi-user computer renames it, if required by the server, when you publish the Web. (Figure 2-5). the default storage 8. To view the navigational structure, click the Navigation button at the bottom of location is as follows: the Folder List if necessary. The Navigation Pane replaces the Folder List. C:\Documents and Settings\
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 LESSON TWO Creating Web Sites FP 2.6
Using a Template to skill 2 Create a Web (Cont’d)
The Web Site Templates dialog box provides a description of each available template. The Customer extra 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 multiple 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. Inter@ctiveLearning Series 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. LESSON TWO Creating Web Sites FP 2.8
skill 3 Using a Web Wizard
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 overview 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.
Use a Wizard to create a Web. how to 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 tip Changes check box should be automatically selected, if not click it. Click the Articles Default settings are and Reviews check box. (Figure 2-8). pre-selected settings which are already 7. Click . The next dialog box sets up the Feedback Form. Keep the default settings selected in the Wizard. 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. Inter@ctiveLearning Series FP 2.9
Figure 2-6 The Corporate Presence Figure 2-7 Selecting the topics for the Web Wizard Home page
Description of Click the topics for a Home page the Home page
Figure 2-8 Selecting the topics Figure 2-9 Selecting the information for the What’s New page 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 The selected added at the top and bottom of each page items will be included on the Feedback Form
Click to return to the previous step LESSON TWO Creating Web Sites FP 2.10
Using a Web Wizard skill 3 (Cont’d)
14. Enter 345 Rocky Rd., Falling Water, N.Y. 10566 in the What is your company’s street how to address text box (Figure 2-11). 15. Click . Enter (914) 555-9903 in the What is your company’s telephone number? text box and (914) 555-9904 in the What is your company’s FAX number text box. 16. Enter miller@speed_demons.com in the What is the e-mail address of your webmaster? text box. Enter info@speed_demons.com in the What is the e-mail address for general info text box. tip 17. Click to open the final page in the Corporate Presence Web Wizard (Figure 2-12). The first letter of the 18. Click . The Web opens in the Tasks view. There are five tasks: Customize each of location in which you the five pages (Figure 2-13).Notice that the Web was automatically saved in the default save a folder specifies location as mysite3 (if you did not complete the Practice for Lesson 2, it is mysite2). the drive. Generally, A: is the floppy disk 19. Click the Navigation view button to view the Web structure (Figure 2-14). drive, C: is the hard 20. Open the File menu and click Exit to close the FrontPage application window for the drive, and D: is the CD Corporate Presence Web. 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.
As you saw in the skill, a Web Wizard can help you to create a complex Web quickly. You can use extra 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 Wizard that is used to create a message board and an Import Web Site Wizard, which you will use in the next skill. In the Web Site Templates dialog box, you can change the default location to store the new Web site. In the Specify 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. Inter@ctiveLearning Series FP 2.11
Figure 2-11 Entering company Figure 2-12 Completing the information 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. LESSON TWO Creating Web Sites FP 2.12
Using the Import Web skill 4 Wizard
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 overview the Web. You can also create a Web site that is filled with documents from a local directory or a remote file system.
Use the Import Web Wizard to create a new Web from pre-existing files. how to 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 1. 12. 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. Inter@ctiveLearning Series 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 LESSON TWO Creating Web Sites FP 2.14
Using the Import Web skill 4 Wizard (Cont’d)
You can also use the Import command on the File menu to import a Web site, folder, or file. First, extra 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. Inter@ctiveLearning Series 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. LESSON TWO Creating Web Sites FP 2.16
Adding Text to a Web skill 5 Page
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 overview conveys information to Web site visitors should be your top priority. Creating a functional Web site begins with adding text.
Add text to a Web page. You will add text to the imported Home page in the Speed Demons Web. how to 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. tip 3. Double-click Index.htm to open the home page in Design view. The [Tab] key on the keyboard moves text 4. Place the mouse pointer at the end of the word Club and click. A flashing insertion point several spaces, generally (a black bar that marks where text will be added) should appear at the end of the word to the right when you Club (Figure 2-18). place the insertion point 5. Press the [Enter] key four times. in front of a word or to the left if you place the 6. Type The best in the Skydiving Industry. Your page should look like Figure 2-19. insertion point at the 7. Click the File menu and click Save. end of a word, depending on the page 8. Close the Index.htm page. format. You can use the [Enter], [Tab], and [Space bar] keys to change the position of the text on a page.
You can use the Formatting toolbar to format or change the appearance of text. This includes extra 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. Inter@ctiveLearning Series 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. LESSON TWO Creating Web Sites FP 2.18
Formatting Web Page skill 6 Text
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, overview 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.
Change the font and font size of Web page text. how to 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 2-22. 8. Click the Save button on the Standard toolbar to save the changes. 9. Close the Index file.
Your choice of font can help to set the mood for your Web site. Some fonts are bold, some are extra 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. Inter@ctiveLearning Series FP 2.19
Figure 2-20 Selecting text
Selected text
Numbering, Bullets, Decrease Indent, & Increase Indent
Increase Font Size & Decrease Highlight & Font Size Font Color Figure 2-21 Formatting toolbar buttons
Style box Font box Font Size Bold, Italic, Align Left, Center, Align All Borders box and Underline Right, and Justify
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. LESSON TWO Creating Web Sites FP 2.20
Adding and Formatting skill 7 Lists
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 overview 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.
Add a new page with a list to a Web. how to 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 tip page to the Web. You can also use the 4. Type Organizational Goals on the first line of the page. On the Formatting toolbar, click Style list box on the the Center button . Formatting toolbar to create a list. Click either 5. Select the text and format it so that the font is Arial Black and the size is 5 (18 pt). Bulleted List or 6. Place the insertion point after s in Goals. Press [Enter]. Click the Align Left button . Numbered list in the Click the Bullets button . Style list box before you begin typing. 7. Type Increase club membership. Press [Enter]. Type Increase public awareness. Press [Enter]. tip 8. Follow the same procedure to expand the list to include the follow bullet points: Generate For text that is already media attention, Stress safety procedures, and Make skydiving more affordable and typed, select the items enjoyable for all. Compare your page to Figure 2-23. you want on the list and 9. Right-click one of the bullets and click List Properties to open the List Properties use either the buttons on dialog box. the Formatting toolbar or the Style list box. 10. Click the empty circles bullets and click (Figure 2-24). The items you want to 11. To change the properties for only one item on the list, right-click the item you want to turn into a list must be change and click List Item Properties to open the List Item Properties dialog box. separated by paragraph The List Item Properties dialog box includes the formatting options for a single bullet breaks, not line breaks. list item. Paragraph breaks leave a blank line between the 12. Open the File menu and click Save As to open the Save As dialog box. Save the new page in lines of text. the Speed Demons Web with the default name (organizational_goals.html) (Figure 2-25). 13. Close the page.
If you use the Numbering button to create a numbered list, you can open the List Properties extra dialog box on the Numbers tab and change the numbering style to capital or lowercase letters or Roman numerals. Inter@ctiveLearning Series 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. LESSON TWO Creating Web Sites FP 2.22
Using the Spelling Checker skill 8 and Editing a Web Page
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 overview 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.
Check a Web page for spelling errors and make corrections. how to 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). tip 4. Click to replace the word with the suggested change. A word with red underlining indicates a 5. Click to close the Spelling dialog box. misspelled word (or one 6. The misspelled word is selected on the page. Click after the letter k in the misspelled word that is not in the (Figure 2-27). FrontPage dictionary). The wavy line enables 7. Press the [Backspace] key on the keyboard to delete the letter k. you to perform 8. Type rm, so the word Determine is spelled correctly. on-the-spot editing without opening the 9. Save the file as writing_tips.htm in the Speed Demons folder in your My Webs folder Spelling Checker. (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.
Click the Add button in the Spelling dialog box to add a word to the FrontPage extra dictionary. This feature helps especially if the checker frequently stops on proper names or non- English words that are not in the dictionary. Another method is to right-click a misspelled word to access a shortcut menu that contains a list of possible 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. Inter@ctiveLearning Series FP 2.23
Figure 2-26 The Spelling dialog box
Click to ignore a click to ignore all word that is not words with the in the dictionary same spelling
Click to change Click to change all instances of the identified the same word to the word misspelling to selected in the the word Suggestions box 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. LESSON TWO Creating Web Sites FP 2.24
skill 9 Using the Find Command
Quickly locating specific words or phrases can be difficult on a lengthy page or a whole Web. The Find and Replace commands are used to search for and review or edit text quickly and overview 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\
Use the Find command to locate text. Use the Find and Replace utility to create a query. how to 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_tips.html page that you tip saved in My Webs\Speed Demons. In the Find where 3. The insertion point should be blinking on the left side of the page. section, you can select check boxes to search 4. Click the Find button on the Standard toolbar or open the Edit menu and click Find to All pages in a Web, all open the Find and Replace dialog box. Open page(s) in a Web, 5. In the Find what text box type adverb clauses. the Selected page(s), or just the Current page. 6. In the Find where section, the Current page option button is selected by default. In the Direction section, The Direction is set to All. (Figure 2-28). you can choose to 7. Click . The first instance of adverb clauses is selected. search the entire document or Web (All), 8. Click again. The second occurrence of adverb clauses is selected (Figure 2-29). or to search Up or 9. Click the Replace tab. Down the document. 10. Type agian in the Find what text box. tip 11. Type again in the Replace with text box. You can click the 12. To the right of the Advanced section, there are two Query icons. The folder icon, Open Replace command on query, is used to open saved queries, and the disk icon, Save query, is used to save the Edit menu to open queries. Click the Save query button to open the File Save dialog box. The Queries the Find and Replace folder is the default storage location. dialog box on the Replace tab. 13. Type Again Query in the File name text box. Click . tip 14. Click to close the Find and Replace dialog box. Steps 9-14 create a 15. query using the default 16. Click .point to All Programs, point to Accessories and click Notepad. settings. 17. Click the File menu and then click Open to access the Open dialog box. Inter@ctiveLearning Series 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 LESSON TWO Creating Web Sites FP 2.26
Using the Find Command skill 9 (Cont’d)
18. Use the Look in list box to navigate to C:\Documents and Settings\
tip 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).
You may have noticed the two additional buttons on the Replace tab, Replace and Replace All. extra 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. Inter@ctiveLearning Series 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. LESSON TWO Creating Web Sites FP 2.28
Previewing a Web Page skill 10 in a Browser
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 overview 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.
Preview a Web in a browser and register a browser. how to 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 tip bottom of the menu), and click Microsoft Internet Explorer (800 x 600) (Figure 2-32). As long as they are in 4. If you have another browser installed on your computer you can click Preview in Multiple good working order, Browsers on the Preview in Browser submenu to open the Web page in two or more your hyperlinks operate browsers at once. Notice that there are also Preview in Multiple Browsers commands that when you preview a specify the screen resolution. page in a browser. 5. You can also use the Preview in Browser button on the Standard toolbar to preview a tip 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. You can also double- click a Web page file 6. View the Web page in the browser. (.htm) in its storage Close the browser. folder to open it in your 7. default browser. 8. Close the Web and exit FrontPage.
To add a new preview browser (other than Internet Explorer), you must first install the browser extra 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. Inter@ctiveLearning Series 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. LESSON TWO Creating Web Sites FP 2.30 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 Click Format, click Font. In the Font dialog box, click the font size in the Size list box Decrease Font Size 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 [Ctrl]+[R] Justify text Align text left [Ctrl]+[L] Center text [Ctrl]+[E] Create a Click Format, click Bullets and Numbering. To open the Bullets bulleted list In the Bullets and Numbering dialog box, and Numbering click the Plain Bullets tab and select a dialog box: bullet style [Alt]+[O]+[N] Create a Click Format, click Bullets and Numbering. To open the Bullets numbered list In the Bullets and Numbering dialog box, and Numbering click the Numbers tab and select a dialog box: numbering style. [Alt]+[O]+[N] Spelling checker Click Tools, click Spelling [F7] Find and Replace Click Edit, click Find [Ctrl]+[F] Preview in Click File, point to Preview in Browser, select To preview a Web Browser browser and screen resolution page in the default browser:F12 To open the Preview in Browser menu: [Alt]+[F]+[B] Inter@ctiveLearning Series FP 2.31 quiz
A. Identify Key Features Name the items indicated by callouts in Figure 2-36. Figure 2-36 Web page in FrontPage
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
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 LESSON TWO Creating Web Sites FP 2.32 quiz (continued)
C. Complete the Statement 21. If you open an .htm file directly from a folder, 26. To change the default storage location for new rather than opening it in FrontPage: Web site that you create using a template or a Wizard you use: a. It will open in FrontPage anyway. a. The List Item Properties dialog box. b. It will open in a Web editor. b. The Status box at the bottom of the Remote c. It will open in the default browser. Webs site view window. d. You cannot open a .htm file from the folder in c. The Specify the location of the new Web site which it is stored. list box in the Web Site Templates dialog box. 22. If you do not see a command on the regular d. The Add File to Import List dialog box. menu, you may need to: 27. You use this to format a single item on a bullet a. Open a dialog box. list: b. Open the extended menu. a. The Add Browser dialog box. c. Use a wizard. b. The Formatting toolbar. d. Use a keyboard shortcut. c. The Style dialog box. 23. When you use the Find and Replace utility, you d. The List Item Properties dialog box. can search: 28. The FrontPage 2003 Find and Replace utility a. Left-to-right or right-to-left. uses this to perform queries: b. By the size of the word. a. Hypertext Markup Language (HTML). c. The entire document or Web or up or down b. Structured Query Language (SQL). the page. c. Extensible Markup Language (XML). d. By the verb tense. d. Common Query Language (CQL). 24. When you use the Import Web Wizard, you use this to select the folder to import: 29. Every Web site contains: a. The New Publish Location dialog box. a. FrontPage-based templates. b. The File Open dialog box. b. A Home page . c. The Style list box. c. Graphics and/or photographs. d. The Import dialog box. d. All of the above.
25. If you misspell a word, FrontPage alerts you by: 30. FrontPage Find and Replace queries are saved with this extension a. Selecting the word. a. .fpq b. Automatically changing the word. b. .csv c. Automatically opening a dialog box. c. .mdb d. Underlining the word with a wavy red line. d. .dqy Inter@ctiveLearning Series 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\
d. Type C:\Documents and Settings\
LESSONTHREELESSONTHREELESSONTHREELESSONTHREE THREE 333333333333333333
Formatting and Adding Objects to Web Pages
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 skills 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 1. Creating Tables 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. 2. Formatting Tables This does not mean that you must design drab Web sites that have no interesting 3. Applying a Theme to a graphics, hyperlinks, or other design elements. It simply means that you must make sure Web that your design elements are either compatible with or enhance the primary goals of readability and usability. 4. Applying Custom Themes 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 5. Creating Text with the background or a textured background, using uncommon hyperlink styles so that Hyperlinks 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 6. Editing Hyperlinks design elements in unusual positions on the page. 7. Adding Images One of the easiest formatting methods is applying a theme. Themes include pre-selected fonts, text colors, background, bullet styles, and graphics. Since complementary 8. Formatting Images elements are selected and applied all at once, this can save you considerable design 9. Image Mapping time. 10. Creating an 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, Interactive Button and drop-down menus are used to gather different types of information from Web site 11. Creating a Marquee 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 12. Creating Forms page, including hyperlinks and images. You can reposition objects, change their colors, size, and borders, and even add animation. 13. Adding Check Boxes and Option Buttons Lesson Goal: 14. Creating a Drop- Learn how to create and format tables, apply a theme to a Web or to individual pages, Down List Box 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. 15. Creating a Push Learn how to create forms and add form fields including text boxes, check boxes, option Button buttons, drop-down boxes, and push buttons. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.2
skill 1 Creating Tables
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 overview 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.
Create a table. how to 1. Start FrontPage and open the Speed Demons Web. 2. Open the Index page. tip 3. Position the insertion point halfway between the name of the club and the slogan for the club. Tables that you have created in Microsoft 4. Open the Table menu, point to Insert, and click Table to open the Insert Table dialog box Word or Microsoft (Figure 3-1). Excel can also be 5. In the Size section, 2Rowsand 2 Columns are selected by default. In the Layout section, imported to a Web page. 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. tip 6. In the Cell spacing spin box, enter 3. Cell spacing is the thickness of the cell walls To create a table with no between the cells. borders, set the Cell padding, Cell spacing 7. In the Borders section, click the list arrow on the Color list box and select the White and Size (in the Borders square either in the Standard Colors section or the Document Colors section. The border section) spin boxes to 0. 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 tip point in the first cell. As you add content to 9. Type Organizational Goals and press the [Tab] key. 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. Inter@ctiveLearning Series FP 3.3
Table 3-1 Deleting elements of a table Action Steps Delete a table Click anywhere in the table you want to delete, open the Table menu, point to Select, and click Table. Right-click the table and select Delete Cells. Delete a cell Click in the cell you want to delete, open the Table menu, point to Select, and click Cell. Right-click the cell and select Delete Cells. Delete a row Click in any cell in the row you want to delete, open the Table menu, point to Select, and click Row. Right-click the row and click Delete Rows. Delete a column Click in any cell in the column you want to delete, open the Table menu, 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 Use the Rows between the and Columns cells and the cell spin boxes to set content the number of cells in the table
Use to set the Use to set the thickness of the border size cell walls around the table between the cells and around each of the cells in pixels LESSON THREE Formatting and Adding Objects to Web Pages FP 3.4
skill 1 Creating Tables (Cont’d)
10. Type Schedule of Events and press [Tab]. how to 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.
When you use the Insert Table button on the Standard toolbar, you cannot set any specific extra 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. Inter@ctiveLearning Series 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. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.6
skill 2 Formatting Tables
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 overview 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.
Format a table. how to 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. tip 2. In the Borders section, click the list arrow on the Light border list box and select the You can also format the Aqua square. font in a table in the Font 3. In the Dark border list box, select the Silver square. If the border size is greater than one, dialog box. First, select you can select two border colors to create a 3-D effect. This effect may not be visible in all the table or cell you want browsers. to format. Then, right- click the table and click 4. Enter 3 in the Size spin box (Figure 3-3). Font to open the Font dialog box. 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. tip 7. In the Layout section, select Center in the Horizontal alignment list box. Text can be aligned in a cell either horizontally 8. Click to close the Cell Properties dialog box. Only the cell you clicked has or vertically. The changed. choices in the Horizontal alignment 9. Click and drag to select the entire table. list box are: Default, 10. Right-click the table and click Cell Properties to open the Cell Properties dialog box. Left, Right, Center, and Repeat Step 7 to center the remaining cells. Justify. The choices in the Vertical alignment 11. Click to close the Cell Properties dialog box. list box are: Default, Top, Middle, Baseline, 12. Click outside the table to deselect it. Your page should look like Figure 3-4. and Bottom. The 13. Click to save the changes. Baseline setting aligns the text in a row along an imaginary line across the bottoms of the letters.
You can also use the mouse to resize a table. To resize the table horizontally, position the pointer extra 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 border. When you see the vertical resizing arrow, drag up or down to increase or decrease the table height. To add rows or columns, first drag to select the table. Open the Table menu, point to Insert, and click Rows or 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). Inter@ctiveLearning Series 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 Figure 3-4 Formatting a table or Columns dialog box
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. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.8
Applying a Theme to a skill 3 Web
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 overview provide a fast method for designing Webs or applying a matching design to multiple pages. It is usually best to apply a theme to an entire Web to maintain visual consistency. 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.
Apply a theme to a Web. how to 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. tip 3. Use the scroll bar on the right side of the task pane to locate and select the Blends theme FrontPage 2003 in the All Available themes section. automatically applies 4. Point to the Blends theme, click the list arrow, and select Apply as default theme to apply themes using cascading the Blends theme to all pages in the Web (Figure 3-6). style sheets (See Lesson 5). Older themes may 5. A Microsoft Office FrontPage warning message opens to caution you that applying a not format correctly in default theme replaces existing formatting information, but pages to which a theme has Netscape or Mozilla already been applied do not change. Themes applied to an individual page take precedence browsers. over themes applied to the entire Web (Figure 3-7). 6. Click . Close the Theme task pane. tip To apply a theme only to selected pages, first select the pages on the Folder List. Use the [Ctrl] key to select multiple pages. Then, select Apply to selected page(s) on the menu for the theme you want to apply. tip 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). Inter@ctiveLearning Series 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 LESSON THREE Formatting and Adding Objects to Web Pages FP 3.10
Applying a Theme to skill 3 a Web (Cont’d)
7. On the Folder List, double-click organizational_goals.htm to open the Organizational how to Goals page. The Blends theme has been applied to all Web pages in the Web (Figure 3-8). 8. Click to save the changes.
You can apply a theme to one or more pages or you can make it the default theme to apply it to an extra 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. Inter@ctiveLearning Series 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. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.12
skill 4 Applying Custom Themes
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 overview 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.
Customize an existing theme. how to 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). tip 5. In the What would you like to modify? section, click to open a Customize The Background picture Theme dialog box dedicated to modifying colors. In the Color Schemes list box, scroll check box is selected by down and select Nature. default because all 6. Click the Color Wheel tab. Drag the color wheel indicator (the circle on the color wheel) themes use a graphic as to the right and closer to the center to make the Colors in this scheme tan/brown, royal the background. To use blue, white and medium blue (Figure 3-10). a plain white background instead, 7. Click the Custom tab. In the Item list box, select Body. The body text should be royal clear the Background blue as shown in the Color list box. picture check 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. Inter@ctiveLearning Series 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 LESSON THREE Formatting and Adding Objects to Web Pages FP 3.14
Applying Custom Themes skill 4 (Cont’d)
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 how to Sans MS (Figure 3-11). 11. Click to close the Customize Theme (text) dialog box. The table text changes to the selected font. tip Use the Graphics button 12. Click to open the Save Theme dialog box. Type Modified Expedition in the to change Enter new theme title text box. Click to save the custom theme. the background image 13. Click to close the Customize Theme dialog box. for the theme, or the 14. On the Theme task pane, in the All available themes section, select Modified Expedition. graphics for buttons, bullet lists, and banners. 15. Click the list arrow on the Modified Expedition theme and select Apply as default theme. You can also format 16. Click to close the warning dialog box. button and banner text. 17. Close the Theme task pane. 18. Save the changes.
There are two ways to customize the colors for the elements in a theme. In this Skill you used the extra 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 rule (lines) table borders, and hyperlinks can each be set to a specific color individually. In the Customize Theme dialog box that opens when you click the Graphics button, if you select a Web page element 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. Inter@ctiveLearning Series FP 3.15
Figure 3-11 Customizing theme text Select the type of text (Body or Heading type)
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. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.16
skill 5 Creating Text Hyperlinks
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 overview hyperlinks to download files or start other operations such as opening your e-mail program with a recipient’s e-mail 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 e-mail address.
Create text hyperlinks how to 1. Open the Index page in the Speed Demons Web, if necessary. 2. In the table, drag to select the text Organizational Goals. tip 3. Open the Insert menu and click Hyperlink to open the Insert Hyperlink dialog box. The easiest way to You can also click the Insert Hyperlink button on the Standard toolbar. create a hyperlink is to 4. Click organizational_goals.htm in the contents window for the Current Folder type the URL of the (Figure 3-12). target page directly onto the Web page. 5. Click to close the dialog box and create the hyperlink. Click . FrontPage automatically creates a link to the Web 6. Click Recent News in the table. address. 7. Open the Insert menu and click Hyperlink to open the Insert Hyperlink dialog box. tip 8. In the Address list box, type recent_news.htm. You can also create a 9. Click to close the dialog box and create the hyperlink. The hyperlink is hyperlink without created, but you must still create the page. choosing a specific word, phrase, or image 10. Click Schedule of Events in the table. Open the Insert Hyperlink dialog box. on the Web page. Simply place the 11. On the Link to bar, click the Create New Document button. insertion point where 12. Type schedule_of_events.htm in the Name of new document text box and click you want to position the The new document is created using the default theme for the Web. hyperlink. Open the Insert Hyperlink dialog 13. Click the Index.htm tab to return to the Index page. Follow the same procedure to box and locate the target create a hyperlink and a new page for the target URL skydiving_near_you.htm. page or file. When you create the link, the title 14. Return to Index.htm. Each time you create a hyperlink, the text is underlined and the of the target page is text color changes according to the color scheme for the theme. Royal blue is the Web inserted standard for hyperlink text, but this can vary in FrontPage themes. as hyperlink text on the 15. Save the changes. Click the Preview tab to switch to Preview view. Web page. If there is no title, the URL is inserted. Inter@ctiveLearning Series 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 e-mail address
The target address LESSON THREE Formatting and Adding Objects to Web Pages FP 3.18
Creating Text Hyperlinks skill 5 (Cont’d)
16. Move the pointer over one of the new hyperlinks. The pointer turns into a hand pointer, how to 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 tip Goals page. Make sure you give the 18. Close Internet Explorer. The followed link has turned pink (Figure 3-13). bookmark a name that clearly identifies the section of text and do not include spaces in the bookmark name. tip Some browsers may not have the ability to open a blank, pre-addressed e-mail window.
In the Insert Hyperlink dialog box on the Link to bar, there are four buttons. The Existing File or extra 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 E-mail Address button is used to create a link to an e-mail address. When users click the link, their default e-mail program opens to a mail-composing window with the specified e-mail address inserted in the To field. Inter@ctiveLearning Series FP 3.19
Figure 3-13 Hyperlinks on a Web page
The followed Hyperlink text changes link turns pink 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 e-mail address [email protected]. Click the E-mail Address button on the Link to bar, enter the e-mail address, and click OK. Finally, link Employment to a new file, employment.htm. Use the Create New Document button to create the new blank Web page. Save the changes. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.20
skill 6 Editing Hyperlinks
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 overview of link to another-for example, change a URL link to an e-mail 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 2003. As you saw in the previous skill, you can use the Preview in Browser command to test the links in a browser. You also can 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.
Edit hyperlinks how to 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 tip 3. On the Folder List, right-click skydiving_near_you.htm and click Delete to delete the page from the Web. You can modify hyperlink text just as 4. The Confirm Delete dialog box prompts you to confirm that you want to delete the page. you edit any text on a Click (Figure 3-14). Web page. You can use 5. Right-click the Recent News hyperlink and click Hyperlink Properties to open the Edit the Formatting toolbar Hyperlink dialog box. to change the font, font color, font size, and font 6. Delete recent_news.htm from the Address list box. style of hyperlink text. 7. Click the Create New Document button. Type news.htm in the Name of new document text box (Figure 3-15). tip 8. In the When to edit section, select the Edit the new document later option button and With the hyperlinks in click to close the dialog box. the table structure, you can select the table and 9. Double-click news.htm in the Folder List. Open the File menu and click Save As. Make apply formatting sure Speed Demons is selected in the Save in list box. changes to all of the 10. Click to open the Set Page Title dialog box. Type News in the Page title text hyperlinks in the table at box (Figure 3-16). once. 11. Click to close the Set Page Title dialog box. tip 12. Click . A Microsoft Office FrontPage warning message prompts you to To edit a hyperlink you replace the existing file. Click to save the page with the title change can also select the hyperlink and click (Figure 3-17). on the Standard toolbar 13. Click the Index.htm tab to return to the Index page. Move the pointer over the Recent to open the Edit News hyperlink. Hyperlink dialog box. 14. Press the [Ctrl] key and click the hyperlink. The link takes you to the new page, news.htm. Inter@ctiveLearning Series 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 Click to return to the new page 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 LESSON THREE Formatting and Adding Objects to Web Pages FP 3.22
skill 6 Editing Hyperlinks (Cont’d)
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 how to 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 .
To delete a hyperlink, select the hyperlink, open the Edit Hyperlink dialog box, and click extra . 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. Inter@ctiveLearning Series 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. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.24
skill 7 Adding Images
Graphics are used primarily for design purposes, but they can also add informative content. Although using images and photographs can make your Web site appealing to visitors, you overview 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.
Insert an image. how to 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. tip 4. In the Search for text box, type airplane and press [Enter] to display the results To insert a picture from (Figure 3-20). your hard disk, open the Insert menu, point to 5. Click the second clip to insert it. Picture and click From 6. Close the Clip Art task pane (Figure 3-21). File to open the Picture dialog box. Use the 7. Click . The Save Embedded Files dialog box opens. Look in list box to 8. Click to save the image in the Speed Demons Web. If the image is not saved in locate the file on your the Web, or is accidentally saved in a folder in another Web, it will not appear in the computer and click the published Web. Insert button. tip 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.
You can check the Estimated Time to Download box on the Status bar to find out approximately extra 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. Inter@ctiveLearning Series 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. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.26
skill 8 Formatting Images
After you have inserted an image, you can modify and reformat it. You can resize the image, change its location, modify the colors and insert a border around the image. To reposition an overview 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.
Format an image how to 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. tip 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 If the image is a image so that the right and left edges of the image are even with the word Diving above hyperlink the border is (Figure 3-22). inserted in the hyperlink color. 3. Right-click the image and click Picture Properties to open the Picture Properties dialog box. tip 4. On the Appearance tab, in the Layout section, enter 3 in the Border thickness spin box. The Wrapping styles are (Figure 3-23). used to designate how 5. Click to insert a 3 pt border around the image. the text surrounding the image is displayed in 6. Click to save the changes to the file. relation to the image.
When you create a Web, FrontPage automatically creates an images folder. If you intend to use a lot extra 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. Inter@ctiveLearning Series 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 Use to set a precise height pixels or as percentage of for the image either in pixels the width of the original or as a percentage of the image height of the original image LESSON THREE Formatting and Adding Objects to Web Pages FP 3.28
skill 9 Image Mapping
An image containing multiple links is called an image map. You can use the Pictures toolbar to easily create a link, or multiple links, from an image to other pages in a Web. overview The individual hyperlinks on an image map are referred to as hotspots. The Pictures toolbar contains three buttons for creating hotspots of different shapes.
Create a hotspot on an image how to 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. tip 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 You can use either the or above the Status bar if you prefer. Circular Hotspot or Polygonal Hotspot 4. Click the Circular Hotspot button on the Pictures toolbar. (Figure 3-24). button on the Pictures 5. Use the pencil pointer to draw a circle around the airplane. Start in the middle of the toolbar to more airplane and drag outward to create the circle. If it is not exactly as you want it, you can precisely conform to the use the sizing handles to adjust the shape after you insert the hyperlink (Figure 3-25 on shape of the chosen area page FP 3.31). on the image. 6. The Insert Hyperlink dialog box opens. Click the Create New Document button. tip 7. In the Name of new document text box, type table_of_contents.htm. Click . You can insert as many 8. Close the Pictures toolbar. hotspots as will fit on an image. However, you 9. Open the File menu and click Save As to open the Save As dialog box. should choose an image 10. Click to open the Set Page Title dialog box. with easily distinguishable areas so 11. Type Table of Contents in the Page title text box and click . that visitors can discern 12. Click . Click to save the page with the title change. where the links are. 13. Click the Index.htm tab to return to the Index page. tip 14. Click the Preview tab. Notice that the pointer turns into a hand over the airplane as it To change the link for a would over any other hyperlink, but not when it is over part of the image that is not hotspot, double-click the mapped. hotspot to open the Edit 15. Open the File menu, point to Preview in Browser and click Microsoft Internet Explorer Hyperlink dialog box. 6.0. Click the image to open the linked page. Change the URL in the Address list box or 16. Close Internet Explorer and return to Design view. browse to locate the 17. Save the changes, and use the tabs to close all open Web pages. If you are prompted to page or file. save the changes to any of the pages, click . tip To delete a hotspot, select it and press the [Delete] key. Inter@ctiveLearning Series FP 3.29
Figure 3-24 The Pictures toolbar
Insert Picture From File Polygonal Hotspot
Click to Circular insert text Hotspot over an image
Rectangular Hotspot Click to create a Bevel thumbnail of the image Crop
Position Less Absolutely Contrast
Bring More Forward Brightness
Less Send Contrast Backward
Rotate Left More 90º Contrast LESSON THREE Formatting and Adding Objects to Web Pages FP 3.30
skill 9 Image Mapping (Cont’d)
You can also turn the entire image into a hyperlink. Click the image, open the Insert menu, and click extra 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 Pages, and Recent Files buttons to locate the page or file. Inter@ctiveLearning Series FP 3.31
Figure 3-25 Creating a Hotspot
Use the sizing handles to adjust the shape of A hotspot 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. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.32
Creating an Interactive skill 10 Button
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 overview 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.
Create an interactive button. how to 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 tip dialog box. You can also click the 4. In the Component type list box, Dynamic Effects is selected by default (Figure 3-26). Web Component button on the Standard 5. In the Choose an effect list box, double-click Interactive Button to open the Interactive toolbar to open the Buttons dialog box. Insert Web Component 6. In the Buttons list box, scroll down and select Embossed Capsule 9. dialog box. 7. In the Text text box, type Home. When the Web page is opened in a browser and in tip Preview view, Home will identify the interactive button. When you save an 8. Click the Font tab. In the Original Font Color list box, select the brown square in the interactive button, the Theme Colors section. image file names are 9. In the Hovered Font Color list box, select the tan/orange square in the Theme Colors automatically entered section. as button followed by 10. In the Pressed Font Color list box, select the Teal square in the Standard Colors section a unique number or (Figure 3-27). letter. If you use several interactive buttons in 11. Click the Image tab. The Width and Height spin boxes are used to change the size your Web, you should of the image. Unlike other images, you cannot resize interactive buttons in Design view change the default (Figure 3-28). names to better identify 12. Click the Button tab. Click to open the Edit Hyperlink dialog box. the buttons. 13. Click the Existing File or Web Page button, if necessary. tip 14. In the Current Folder, select Index.htm to link the interactive button on the To edit and make Organizational Goals page to the Index page. formatting changes to 15. Click to close the Edit Hyperlink dialog box. an interactive button, right-click it and select Button Properties to open the Interactive Buttons dialog box. Inter@ctiveLearning Series 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 LESSON THREE Formatting and Adding Objects to Web Pages FP 3.34
Creating an Interactive skill 10 Button (Cont’d)
16. Click to close the Interactive Buttons dialog box. how to 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. tip 20. Click the images folder and click to close the dialog box (Figure 3-30). When you delete an 21. Click to close the Save Embedded Files dialog box and save the interactive interactive button, you button images in the images folder in the Speed Demons Web. must also delete the 22. Open the File menu, point to Preview in Browser and click Microsoft Internet three image files. They Explorer 6.0. are not automatically deleted. 23. 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.
Interactive buttons are powered by JavaScript, a scripting language used to create interactive effects. extra 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. Inter@ctiveLearning Series 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. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.36 skill 11 Creating a Marquee
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, overview 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.
Add a marquee how to 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).
Although marquees typically appear at the top of a page, you can place them wherever you wish. If extra 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. Inter@ctiveLearning Series 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. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.38 skill 12 Creating Forms
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 overview 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.
Create a form, add form fields, and assign name-value pairs how to 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 tip for the Web. You can also insert a 4. Press [Enter] three times. form on a page you have already created. 5. Open the Insert menu, point to Form, and select Form. Two buttons, Submit and Reset A form does not have are inserted on the page. to be on a separate 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 tip Name: and press [Spacebar]. You can also create a 8. Open the Insert menu, point to Form and select Textbox to insert a text box in the form form by inserting a text (Figure 3-34). box on a page. The default setting is 9. Right-click the text box and select Form Field Properties to open the Text Box Properties for FrontPage to dialog box. automatically insert 10. Type username in the Name text box. The name identifies the question and designates the the Reset and Submit type of information you are prompting the user to enter (Figure 3-35). buttons when you insert In the Initial value text box, you can enter text that will be visible to the user in the text box. a text box. 11. 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. tip When the form is submitted, the user input value is matched with the name. If the default setting has been changed, open the 12. Click to close the Text Box Properties dialog box. Tools menu and select 13. Position the insertion point after the text box and press [Enter]. Type E-mail: and press Page Options to open [Spacebar]. the Page Options dialog 14. Open the Insert menu, point to Form, and select Textbox. box. On the General tab, select the Automatically 15. Right-click the text box and select Form Field Properties to open the Text Box Properties enclose form fields dialog box. within a form check 16. Type email in the Name text box. box. Inter@ctiveLearning Series 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 LESSON THREE Formatting and Adding Objects to Web Pages FP 3.40 skill 12 Creating Forms (Cont’d)
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 how to 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]. tip 20. Open the Insert menu, point to Form, and click Text Area. Text boxes are limited 21. Right-click the text area box and select Form Field Properties to open the TextArea Box to a maximum of 500 Properties dialog box. characters. For multiple Type first_experience in the Name text box. lines of input, use a text 22. area 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 tip enter; it is the number of lines that are visible in the text area box as the user is typing You can also press (Figure 3-36). [Ctrl]+[Q] to open the Quick Tag Editor. 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 tip 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, To reposition a text box, in the Edit Tag box, after cols=“35”, type wrap (Figure 3-37). use the pointer to drag the text box to the 28. Click Enter to close the Quick Tag Editor and save the HTML code change. The text correct location on the in the text area box will now wrap for all users. form. 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 3-38.
To resize a form field, you can also select it and use the sizing handles to adjust the dimensions. extra 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. Inter@ctiveLearning Series 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 E-mail: 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. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.42
Adding Check Boxes and skill 13 Option Buttons
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 overview 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.
Add a check box and option buttons to a form and assign the name-value pairs how to 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]. tip 5. Open the Insert menu, point to Form and click Checkbox to insert a check box In order to be used (Figure 3-39). in form scripting 6. Right-click the check box and select Form Field Properties to open the Check Box languages, entries in Properties dialog box. the Name text box must start with a letter 7. In the Name text box, type previous_experience. or an underscore. All 8. The Value text box says ON. This is the default value for a check box (i.e. On or Off). subsequent characters Since this is a Yes/No answer, type YES in the Value text box. Yes/No and On/Off are two must be letters, digits, variations of the same value. or underscores. 9. The Initial state is set to Not checked by default. The check box will be empty on the tip form (Figure 3-40). To enable site visitors 10. Click to close the Check Box Properties dialog box. to select a check box by 11. Position the insertion point after the check box and press [Enter]. clicking either the label or the check box, select 12. Type How many times? Press [Enter]. the text and the check 13. Open the Insert menu, point to Form and click Option Button to insert an option button. box, open the Insert menu, point to Form, 14. Type: 1-5. Right-click the 1-5 option button and click Form Field Properties to open the and click Label. 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. Inter@ctiveLearning Series 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 LESSON THREE Formatting and Adding Objects to Web Pages FP 3.44
Adding Check Boxes and skill 13 Option Buttons (Cont’d)
20. Right-click the 6-10 option button and click Form Field Properties to open the Option how to 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 6-10. 22. Click to close the Option Button Properties dialog box. tip 23. Position the insertion point after the 10 and press [Tab]. You cannot create a 24. Add another option button and type 11 or more. validation rule for a check box. If you think 25. Open the Option Button Properties dialog box for the 11 or more option button. a validation rule is number_times has been automatically entered as the group name. Type 11 or more in the needed to ensure that Value text box (Figure 3-42). data is entered correctly, 26. Click to close the Option Button Properties dialog box. use an option button or a drop-down box 27. Click to save the changes. instead. 28. Switch to the Preview view. Your page should look like Figure 3-43.
In a group of check boxes, where the user can select more than one answer, change the default value extra 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 e-mails about, each check box could have a value of send. The name-value pairs submitted could be, for example: Soup: send, Chili: send You can create validation rules for most types of form fields. Validation rules are used to reduce data entry errors. 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). Inter@ctiveLearning Series 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. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.46
Creating a Drop-Down skill 14 Box
Drop-down boxes are used for form fields that have multiple possible selections. They simplify data entry by enabling users to select from a list of choices rather than typing an overview 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 multiple selections.
Add a drop-down box to a form and create the name-value pairs. how to 1. Open the Feedback Form page in the Speed Demons Web in Design view. 2. Position the insertion point after the text area box. tip 3. Press [Enter]. Type In what area of the country do you live? To change the order of 4. Press [Spacebar] three times. the items on the drop- down list, open the 5. Open the Insert menu, point to Form, and select Drop-Down Box to insert a drop-down Drop-Down Box box. Properties dialog box. 6. Double-click the drop-down box to open the Drop-Down Box Properties dialog box. Select a menu item in the Choice column and 7. Type Location in the Name text box. click the Move Up or 8. Click to open the Add Choice dialog box. Type Northeast in the Choice text Move Down button. box (Figure 3-45). 9. In the Initial State section, make sure the Not selected option button is selected. Click tip to close the Add Choice dialog box. If you want to create a 10. Follow the procedure in steps 8-9 to add Southeast, Midwest, Southwest, Rockies, scrolling list box, which Northwest, California, Alaska, and Hawaii. displays some of the choices on the form, 11. When you are finished the Drop-Down Box Properties dialog box should look like enter the number of Figure 3-46. 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. Inter@ctiveLearning Series 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 LESSON THREE Formatting and Adding Objects to Web Pages FP 3.48
Creating a Drop-Down skill 14 Box (Cont’d)
12. In the Allow multiple selections section, make sure the No option button is selected. how to 13. Click to close the Drop-Down Box Properties dialog box. 14. Click to save the changes. tip 15. Switch to the Preview view. Click the list arrow on the drop-down box to view the menu The Allow multiple (Figure 3-47). On drop-down boxes, the menu can either open downward or upwards. selections option in the If there is not enough space on the page below the box to accommodate all of the options, Drop-Down Box the menu opens upwards. Properties dialog box is set to No by default. If you want to allow your visitors to make multiple 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.
In the skill, you left Not selected as the initial state for each option button. Set the initial state to extra 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. Inter@ctiveLearning Series 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. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.50 skill 15 Creating a Push Button
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 overview 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.
Create a push button and assign the name-value pair. how to 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. tip 5. Double-click the button to open the Push Button Properties dialog box. If the tab order does 6. In the Name textbox, type Reset. The push button name usually indicates the function for not follow the desired the button. sequence, open the Properties dialog box 7. In the Value/label text box, type Reset. The push button value is visible to users. It is the for each form field text on the button. and enter the correct 8. In the Button type section, select the Reset option button (Figure 3-48). numbers in the Tab order text boxes for 9. Click to close the Push Button Properties dialog box. each form field. 10. Click to save the changes. 11. Open the File menu, point to Preview in Browser, and select Microsoft Internet Explorer 6.0. tip 12. If necessary, click the security warning below the Address bar and select Allow Blocked Use the Options section Content. Click to close the Security Warning dialog box. in the Form Properties 13. Use the [Tab] key to tab through the form fields and test the tab order. The tab order skips dialog box to specify the option buttons that are not selected and proceeds to the Name text box. Use the arrow what fields to save and keys to select a different option button. Your form should now look like Figure 3-49. where to save the data results. 14. Close Internet Explorer. 15. Right-click the feedback_form.htm tab and select Close to close the form.
To specify where to submit a form, right-click the form and select Form Properties to open the extra 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 e-mail address, database, or form processing script. There are a number of different types of form scripts you can use depending on your Web server. Inter@ctiveLearning Series 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. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.52 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 Inter@ctiveLearning Series FP 3.53 quiz
A. Identify Key Features Name the items indicated by callouts in Figure 3-50.
Figure 3-50 Formatting buttons and elements
1.
2.
3.
4.
5. 6. 7.
8. 9.
10.
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 e-mail 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 multiple possible selections on a list j. Interactive buttons LESSON THREE Formatting and Adding Objects to Web Pages FP 3.54 quiz (continued)
C. Complete the Statement
21. You can perform every function in the Insert 25. You must assign this to all form fields so that Hyperlink dialog box except: data submitted by users is in a useable format a. Color the hyperlink for a form handling script. b. Link to a new page a. A title and a tag c. Create a link that sends an e-mail b. A name-value pair d. Search for a browsed page to link to c. A name-quantity pair d. An identifier and a number 22. The file formats used on Web pages (because they compress large photographic files so that 26. Text boxes are limited to a maximum of 500 they take less time to load are): characters. For multiple lines of input, use a: a. RIFF and WMF a. Drop-down box b. JIFF and GIF b. Group of option buttons c. GIF and JPEG c. Group of check boxes d. TIFF and BMP d. Text area box 23. . To align the text in the cells of a table: 27. You can create a validation rule to reduce data a. Use the Horizontal alignment and Vertical entry errors such as allowing users to enter only alignment list boxes in the Layout section in letters in a text box, for all form fields except: the Table Properties dialog box. a. drop-down box b. Use the Horizontal alignment and Vertical b. option button alignment list boxes in the Insert Rows or c. text area box Columns dialog box. d. check box c. Use the Horizontal alignment and Vertical alignment list boxes in the Font dialog box 28. To turn a drop-down box into a scrolling list d. Use the Horizontal alignment and Vertical box, which displays some of the choices on the alignment list boxes in the Layout section in form: the Cell Properties dialog box. a. Enter the number of choices you want to display in the Width in characters text box in 24. Each interactive button has three image files: the Down Box Properties dialog box. a. The original image, the hover image, and the b. Enter the number of choices you want to pressed image display in the Height box in the Drop-Down b. The original image, the interactive image, and Box Properties dialog box. the browser image c. Enter the number of choices you want to c. The browser image, the hover image, and the display in the Tab order text box in the active image Drop-Down Box Properties dialog box. d. The regular image, the followed image and d. Enter the number of choices you want to the active image display in the Number of lines text box in the Down Box Properties dialog box. Inter@ctiveLearning Series FP 3.55 interactivity
Build Your Skills 1. Create and format a list a) Open the Water Taxi Web. b) Open the File menu and click New to open the New task pane. c) Click Blank page to create a new blank page in the Web. d) Create a bulleted list for the water taxi destinations: Ocean Harbor, Lee Beach, Red Sands Cove, Bay Sands Beach, Cherry Road, Blue Birch Point, and Tom’s Grand Cove. e) Change the font and font size for the list to Arial 4(14 pt). f) Save the page as destinations.htm with the page title Destinations. 2. Insert a table a) Create another new page. b) Insert a table to organize the seven destinations and their associated fees: $8.50, $6.50, $7.75, $10.00, $8.25, $4.50, and $15.00, respectively. c) Save the page as fees.htm with the page title Fees. 3. Apply a theme to a Web a) Open the Format menu and click Theme to open the Theme task pane. b) Apply the Pixel theme to the Water Taxi Web as the default theme for the Web. c) Use the Sumi Painting theme to design a custom theme. In the Customize Theme dialog box, click the Colors button. d) On the Custom tab, change the background color to Silver. e) Change the Heading 1 text to Blue and the Heading 2 text to Teal. f) Save the theme as Modified Sumi Painting and apply it as the default theme for the Web. 4. Create hyperlinks a) Open the Index page in the Water Taxi Web. b) Create hyperlinks for the text in each cell in the table. Select the text Fees and create a link to the newly created Fees page. Select the text Information and create a link to the Destinations page. c) For the rest of the cells in the table, create a new document and link the text to the new page (reservations.htm, maps.htm, and crews.htm). Link the text E-mail Us to info@johnnys_water_taxi.com. d) Right-click each of the three new pages in the Folder List and click Properties to open the Properties dialog box. In the Title text box, type the appropriate title (Reservations, Maps, and Crews) and click OK to assign a page title to each page. e) Save the changes and open the Index page in Microsoft Internet Explorer. Test the links. Use the Back button on the Standard Buttons toolbar to return to the Index page as you test each link. f) Close Internet Explorer. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.56 interactivity (continued)
5. Add images and create a hotspot a) On the Index page in the Water Taxi Web, position the insertion point one line below the table. b) Click the Insert Picture From File button on the Standard toolbar to open the Picture dialog box. c) Use the Look in list box to navigate to your Data Files folder. Open the Lesson 3 folder, select WaterTaxi.gif and click the Insert button. d) Select the image and center it on the page. e) Click just after the image and press [Delete] three times to move the text Safe, rapid transport to your island destination directly below the image. f) Save the page. Save the embedded file in the images folder. g) Open the Destinations page and insert WaterTaxi2.gif below the bulleted list. h) Click the image and use the sizing handle in the lower right corner to decrease the size of the image. i) Open the Pictures toolbar and draw a rectangular hotspot around the boat. Create a hyperlink to reservations.htm. j) Close the Pictures toolbar and save the changes. Save the embedded file in the images folder. k) Use the tabs to close all open Web pages and save the changes if necessary. 6. Create a marquee and an interactive button a) On the Index page in the Water Taxi Web, select the company name. b) Click the Web Component button on the Standard toolbar to open the Insert Web Component dialog box. c) Double-click Marquee to open the Marquee Properties dialog box. Click OK. d) Switch to Preview view to view the marquee. e) Open the Destinations page in Design view. f) Click the Web Component button on the Standard toolbar to open the Insert Web Component dialog box. g) Double-click Interactive Button to open the Interactive Button Properties dialog box. Type Home in the Text text box. h) In the Buttons list box, select Soft Capsule 6. i) Click the Browse button. Click the Existing File or Web Page button, if necessary. In the Current Folder, select index.htm and click OK. j) Switch to Preview view and point to the button. Note the change. Click the button and hold down the right mouse button. Note the change. k) Return to Design view. Save the changes. In the Embedded files to save box, select the first button image and click the Rename button. Notice the picture in the Picture preview box. Name the button destinations_hover.jpg. Click the second button. Rename it destinations_pressed.jpg. Click the third button. Rename it destinations_original.jpg. Save the embedded files in the images folder. 7. Create a form, insert a drop-down box, and set the name-value pairs a) In the Water Taxi Web, open the Reservations page. b) Open the Insert menu, point to Form, and click Form. c) Press [Enter] two times. d) Press the up arrow key two times and type What is your destination?. Inter@ctiveLearning Series FP 3.57 interactivity (continued)
e) Press [Spacebar] and insert a drop-down box. f) Double-click the drop-down box to open the Drop-Down Box Properties dialog box. Type Destination in the Name text box. g) Add values for the seven destinations on the bulleted list on the Destinations page. 8. Create an option button group and set the name-value pairs a) In the Water Taxi Web, on the Reservations page, position the insertion point after the drop-down box and press [Enter]. b) Type How many people in your party? c) Press [Enter] Type 1-3. Insert an option button. d) Right-click the 1-3 option button and select Form Field Properties to open the Option Button Properties dialog box. e) Type number_people in the Group name text box. Type 1-3 in the Value check box and click OK. f) Position the insertion point after the option button and press [Tab]. Type 4-6. Insert an option button. g) Open the Option Button Properties dialog box and type 4-6 in the Value text box. number_people is automatically entered as the group name. Click OK. h) Position the insertion point after the 4-6 option button and press [Tab]. Type 7-10. Insert an option button. i) Set the value for the option button to 7-10. 9. Insert a text box and a text area box and set the name-value pairs a) In the Water Taxi Web, on the Reservations page, position the insertion point after the 7-10 option button and press [Enter] b) Type On what date will you be riding with us? and press [Spacebar]. Add a text box. c) Open the Text Box Properties dialog box, type Date in the Name text box, and click OK. d) Position the insertion point after the text box and press [Enter]. e) Type Please tell us about any special accommodations and press [Spacebar]. f) Insert a text area box. g) Open the TextArea Box Properties dialog box and type accommodations in the Name text box. Type special accommodations in the Initial value text box. This text will appear in the form. h) Set the Width in characters to 35 and the Number of lines to 6. Click OK. i) Save the changes and open the Reservations page in Internet Explorer. Test the tab order. j) Close IE. Close the Water Taxi Web and save the changes if prompted. LESSON THREE Formatting and Adding Objects to Web Pages FP 3.58 interactivity (continued)
Problem Solving Exercises 1. On the Index page in the Diggs Web, write the introductory paragraph and the mission statement. Delete the Contact Information comment. Design a conservative, professional-looking theme and apply it as the default theme for the Web. The Bold Stripes and Industrial themes are good places to start. On the Table of Contents page, replace the current content with a table. Create cells for Products, Services, Place an Order, News, Feedback, and Search, and link them to the appropriate pages. On the Products page, delete the current content and create two products lists one for Fiction and one for Non-Fiction. Format the title text in any way you choose. On each list create appropriate sub- categories. For example, under Non-Fiction, you could include: Textbooks, History, Current Events, Sports and Fitness, How-To, Biography, Auto-Biography, Cooking, and Reference. Under Fiction, you could include, Children’s, Poetry, Drama, Mystery, Romance, Short Stories, Science Fiction, Westerns, and Horror. On the Index page, create a marquee for the company name. Increase the text size and change the background color for the marquee. At the bottom of the page, create an interactive button and link it to the Products page. Make sure to set the button text (Products). Change the original, hovered and pressed font colors for the button. Use the page tabs to save the changes and close the pages in the Diggs Web. Save the embedded files for the interactive button in the images folder. Rename each button image with an appropriate name (i.e. Products_hovered.jpg, Products_original.jpg, and Products_pressed.jpg). 2. Delete the order_form.htm page. On the product_ordering.htm page that you created in Lesson 2, change the label on the Product Name drop-down box to Category. Open the Drop-Down Box Properties dialog box and modify the choices to include the fiction and non-fiction categories you created for the lists in Problem Solving #1. Use the Move Up and Move Down buttons to put the list in alphabetical order. Set the height for the drop-down box to 2. Set the Name to Category. Change the text on the Model text box to ISBN number. Open the Text Box Properties dialog box and change the Name to ISBN_Number. Drag to select the Version Number and Operating System labels and text boxes and press [Delete] two times to delete the two table rows. Change the Product Code label to Product Name. Open the Text Box Properties dialog box and change the Name to Product_Name. Delete the Serial Number text box and label. Drag to select the next section on the form and press [Delete] two times to delete the Qty/Description table and the label. In the Billing section, change the label on the Purchase Order # text box to Payment Method. Replace the text box with a drop-down box with the choices, Visa, Master Card and American Express. Enter the Name for the drop-down box (Payment_Method). Drag to select the Shipping section, right-click the table and select Table Properties to open the Table Properties dialog box. Increase the number of rows to 8. In the eighth row of the table, add a check box for Next Day Delivery. Open the Check Box Properties dialog box and set the Name for the check box. Change the Value to YES. 3. Begin formatting your personal Web site. You may want to begin by writing and formatting text. Change the font to set the tone for your site. Apply bold formatting, or underline or italicize your text. Align it left, right, or center. If you have digital camera photographs or can scan photos, add several to your site. You can create text hyperlinks, image hyperlinks, and/or hotspots. You can create an image map to link to the other pages in your Web. If appropriate, organize information into a table or create a numbered or bulleted list. Decide if you want interactive buttons or a marquee for your Home page. Get out the list you created earlier and insert the elements you found appealing.