c539744 ch01.qxd 9/26/03 9:09 AM Page 3 1 C H A P T E R Getting to Know FrontPage ✦ ✦ ✦ ✦ In This Chapter F rontPage 2003 is both a powerful tool for creating sophisticated Web sites, and fairly easy to use. This means that you’ll probably feel at home in FrontPage right away, and it also means that many important FrontPage features won’t be so obvious to you. FrontPage is actually a combination of many different elements.
c539744 ch01.qxd 4 9/26/03 9:09 AM Page 4 Part I ✦ FrontPage Essentials Before diving into the nuts and bolts of creating a Web site, the following section briefly defines some of the basic elements with which you will be working. FrontPage Webs, Web Sites, and Web Pages From the vantage point of a Web designer, you work on two basic levels when you create a Web site: Web design and page design. Unless your Web site is only one page, you have two related jobs.
c539744 ch01.qxd 9/26/03 9:09 AM Page 5 Chapter 1 ✦ Getting to Know FrontPage Web pages Web pages differ from other documents in that they are designed to be interpreted by Web browsers. Microsoft Internet Explorer (IE) and Netscape Navigator take text, graphics, and even interactive elements, such as input forms, sound, and video, and enable Web site visitors to access them. Web browsers interpret and display Web page content by reading Hypertext Markup Language (HTML).
c539744 ch01.qxd 6 9/26/03 9:09 AM Page 6 Part I ✦ FrontPage Essentials FrontPage server extensions are files that are installed not on your personal PC, but on the server on which your Web site is hosted. Technically, you can have a Web server on your own PC. However, your server software is more likely to be located on a remote computer connected by an office intranet or the Internet.
c539744 ch01.qxd 9/26/03 9:09 AM Page 7 Chapter 1 ✦ Getting to Know FrontPage Using FrontPage extensions can cause headaches for Web server administrators (and you folks can jump to Chapter 23 for help). You can avoid worrying about any of it, however, by simply contracting with a Web provider that has FrontPage extensions as part of its Web-hosting package. What’s New in FrontPage 2003? More is new to FrontPage 2003 than the interface design.
c539744 ch01.qxd 8 9/26/03 9:09 AM Page 8 Part I ✦ FrontPage Essentials Table 1-1 (continued) New Feature Description Improved Publishing FrontPage has finally given you more control over how much of a site you publish to a server. In addition, it provides better interactivity with FTP. (See Chapter 3.) New Themes FrontPage 2003 has added a dozen or so new themes. Real theme lovers will continue to explore the add-ins provided by FrontLook. (See Appendix C.
c539744 ch01.qxd 9/26/03 9:09 AM Page 9 Chapter 1 ✦ Getting to Know FrontPage FrontPage views are generally divided into those that let you organize your entire Web site, and Page view, which is where you design the content of specific pages. FrontPage 2003, like other Office 2003 applications, opens with a Task Pane displayed on the right side of the FrontPage window. Here, you’ll find quick links to jump to frequently used features in FrontPage.
c539744 ch01.qxd 10 9/26/03 9:09 AM Page 10 Part I ✦ FrontPage Essentials The Clipboard pane is a helpful way to grab recently copied or cut objects. The Search pane is an easy way to rummage through a Web site to locate pages with select text. You can easily access Clip Art, Themes, and even data sources here. All the features available in the Task Pane are also available from the FrontPage menu, and many are available from buttons on various taskbars.
c539744 ch01.qxd 9/26/03 9:09 AM Page 11 Chapter 1 ✦ Getting to Know FrontPage ✦ Folders view: This is a directory of the files that you create in FrontPage. FrontPage creates two empty folders (_private and images) when you open a new Web site. When you save a Web page, or any other element of your Web site, you’ll see files listed in this view. ✦ Reports view: FrontPage can generate reports that assess the status of your Web site.
c539744 ch01.qxd 12 9/26/03 9:09 AM Page 12 Part I ✦ FrontPage Essentials Figure 1-3: The New Task Pane Your first decision is whether to create a new Web from scratch or to get help and save time by using a Web template. In either case, you’ll be choosing from the links under the New From Template heading in the New Page or New Web Site Task Pane. If you want to create your own Web from scratch, choose Empty Web. Alternatively, you can choose from the set of preconfigured Web templates.
c539744 ch01.
c539744 ch01.qxd 14 9/26/03 9:09 AM Page 14 Part I ✦ FrontPage Essentials Where to save your new Web As mentioned earlier, you have two basic options in creating a Web. One, you can create your Web on a Web server that is accessible to the Internet or an intranet. Or two, you can create your Web on a local computer drive (your hard drive). Webs saved to your hard drive do not all have the advanced features available in FrontPage, such as the capability to collect data from input forms.
c539744 ch01.qxd 9/26/03 9:09 AM Page 15 Chapter 1 ✦ Getting to Know FrontPage Selecting a Location for Your Web Site If you have just unwrapped your copy of FrontPage and installed it, this discussion of where to save your Web site may seem a bit daunting. However, after you complete the process of deciding where to save your Web site, you don’t have to make that decision again. In addition, you can easily change the location of your Web site.
c539744 ch01.qxd 16 9/26/03 9:09 AM Page 16 Part I ✦ FrontPage Essentials Figure 1-6: A Web site can be as simple as a single page. If you created your new Web from the Empty Web template, you can click the New Page button in the FrontPage toolbar to create a new page. The first page you create will be your home page. Adding pages to your Web site You can add Web pages to your Web site in Navigation view by clicking the New Page button in the toolbar.
c539744 ch01.qxd 9/26/03 9:09 AM Page 17 Chapter 1 ✦ Getting to Know FrontPage Figure 1-7: You can chart out your Web site in Navigation view. Web design strategies are explored in much more detail in Chapter 2, and navigation options are discussed in depth in Chapter 9. For now, remember that your Web site can run many levels, but in general, you should limit the number of pages at each level of the site to between three and five. After you define a Web structure, you can easily change it.
c539744 ch01.qxd 18 9/26/03 9:09 AM Page 18 Part I ✦ FrontPage Essentials Figure 1-8: You can rearrange pages in Navigation view by clicking and dragging. Page titles and filenames Web pages have both titles and filenames. The filename is used internally for FrontPage to organize the Web. The title is the Web page’s “public” name, and is displayed in the visitor’s browser when the Web page is opened. New pages are generated with filenames that have titles such as New Page 6.
c539744 ch01.qxd 9/26/03 9:09 AM Page 19 Chapter 1 ✦ Getting to Know FrontPage Changing page filenames Although page names do not appear in browser title bars or as generated navigation links, you still may want to rename them. One good reason is so that when you edit pages and keep track of files, you can associate a page filename with a page title. As you generate new pages in Navigation view, they appear as HTML files in the Folder list on the left side of the Navigation view window.
c539744 ch01.qxd 20 9/26/03 9:09 AM Page 20 Part I ✦ FrontPage Essentials To assign a theme, follow these steps: 1. With your Web open, select Format ➪ Theme from the FrontPage menu. You can do this from any view. 2. Click one of the themes that appear in the Theme list on the right side of the interface. You see a small sample of a theme provided on each button. Use the checkboxes at the bottom to experiment with Vivid Colors, Active Graphics, or a Background Picture, as shown in Figure 1-9.
c539744 ch01.qxd 9/26/03 9:09 AM Page 21 Chapter 1 ✦ Getting to Know FrontPage part, as navigational tools. However, shared borders in FrontPage 2003 come with some restrictions from previous versions of FrontPage, and you find out all about them in Chapter 7 for details. CrossReference Refer to Chapter 7 for more details on shared borders and their restrictions.
c539744 ch01.qxd 22 9/26/03 9:09 AM Page 22 Part I ✦ FrontPage Essentials Figure 1-10: Comments and shared border dividers are visible in the Normal tab of Page view. Figure 1-11: The HTML tab is a full-fledged HTML editor.
c539744 ch01.qxd 9/26/03 9:09 AM Page 23 Chapter 1 ✦ Getting to Know FrontPage Preview tab The Preview tab in Page view displays your Web page similar to the way it will look in a browser (compared to how it is displayed in the Normal tab). Elements such as comment text and shared border dividers don’t display in the Preview tab. However, you cannot edit in Preview tab. Figure 1-12 shows a Web page displayed in the Preview tab of Page view.
c539744 ch01.qxd 24 9/26/03 9:09 AM Page 24 Part I ✦ FrontPage Essentials To preview your Web page in a browser, select File ➪ Preview in Browser. The Preview in Browser dialog box enables you to select from any browser installed on your computer and any screen resolution supported by your system. Before continuing in this chapter, to explore the process of editing and formatting page content, you may want to experiment with the following tutorial to sharpen your Web design skills.
c539744 ch01.qxd 9/26/03 9:09 AM Page 25 Chapter 1 ✦ Getting to Know FrontPage 10. If you have a browser installed on your computer, select File ➪ Preview in Browser, and then double-click one of your installed browsers. Test your Web site in your browser by clicking underlined links in the navigation bars to move from page to page. 11. Select File ➪ Close Web to close your entire Web, including all the page files.
c539744 ch01.qxd 26 9/26/03 9:09 AM Page 26 Part I ✦ FrontPage Essentials Here is a quick explanation of each button (from left to right) in the Page view Standard toolbar: ✦ The New drop-down list/button is set to Page by default: At that setting, it creates a new Web page.
c539744 ch01.qxd 9/26/03 9:09 AM Page 27 Chapter 1 ✦ Getting to Know FrontPage ✦ Show All: Shows paragraph and line breaks, image anchors, and other elements that do not display in a browser window ✦ Show Layer Anchors: This option shows where the layers are anchored on the page. ✦ Help Tool: Opens the Microsoft FrontPage help window, with a variety of options for looking up information Most of your Web page text formatting is controlled from the Formatting toolbar in Page view.
c539744 ch01.qxd 28 9/26/03 9:09 AM Page 28 Part I ✦ FrontPage Essentials ✦ Outside Borders: Defines borders around selected text and/or objects ✦ Font and Highlight Color: Adds a background highlight to selected text Editing text You can type anywhere on a page in Page view to add text. You’ll find that all standard text-editing and navigation techniques used in other Windows applications can be used to edit text in Page view.
c539744 ch01.qxd 9/26/03 9:09 AM Page 29 Chapter 1 ✦ Getting to Know FrontPage 3. Click a clip art category to see a list of available pictures. 4. Click a picture that you want to insert, and select the Insert Clip button from the drop-down list, as shown in Figure 1-16.
c539744 ch01.qxd 30 9/26/03 9:09 AM Page 30 Part I ✦ FrontPage Essentials You can insert a graphic file in much the same way: use the menu, or more quickly use the Insert Picture button, following these steps: 1. Click the Insert Picture from File button in the Standard toolbar. 2. Click the Select a File from Your Computer button in the lower-right corner of the Picture dialog box. 3.
c539744 ch01.qxd 9/26/03 9:09 AM Page 31 Chapter 1 ✦ Getting to Know FrontPage Making images transparent Another useful graphic feature in FrontPage 2003 is the capability to assign transparency to one color in an image. To do that, click the image. The Picture toolbar, covered in detail in Chapter 12, will appear on the bottom of the page. Each of the Picture toolbar’s buttons is a powerful editing tool.
c539744 ch01.qxd 32 9/26/03 9:09 AM Page 32 Part I ✦ FrontPage Essentials Figure 1-19: Saving an embedded image As you save your page and its embedded graphic files, those graphic files are converted to a Web-compatible graphics format and saved to your FrontPage Web. The following tutorial walks you through the process of creating and editing a Web page in a Web site. Tutorial 1-2: Editing a Web page 1. Open a Web page from an existing Web (the Web you created in Tutorial 1-1 will work fine). 2.
c539744 ch01.qxd 9/26/03 9:09 AM Page 33 Chapter 1 ✦ Getting to Know FrontPage 9. Enter a word in the Search Text box of the Insert Clip Art pane, and click Search. Click one of the resulting images, and then click the Insert Clip button in the drop-down list next to the image. With your picture selected, click the Align Left button in the Formatting toolbar. 10. Press Ctrl+End again to move to the bottom of your Web page, and type Visit Microsoft at www.microsoft.com.
c539744 ch01.
