Chapter 1. Building a Basic Web Site
Many Web design graybeards consider their ability to write HTML code by hand a badge of honor. But for someone who’s new to the Web, this approach is pretty over the top. Just because you’d like to post your party photos doesn’t mean you want to become a programmer. Novices aren’t the only ones who need a hand. Pretty much every Web developer has popped a page into a visual Web editor like FrontPage at some point.
People use FrontPage and similar programs because they make the creation of Web pages fast and easy. Advantages of using FrontPage include:
Hands-on editing. Of all the benefits FrontPage offers, nothing beats its ability to let you see the changes to your Web page as you make them. While you’re working, you pretty much see pages as visitors to your site eventually will. You add and edit visual elements—like images and hyperlink buttons—by clicking on them directly. When you move or resize an object, the results show immediately.
Speed. Tasks that are extremely tedious when coding manually, like creating a table, are a snap in a program like FrontPage. In fact, many professionals who write their pages by hand often hop into programs like FrontPage just to add a table. In the process, they save themselves tons of typing.
Visual aids. FrontPage provides diagrams to help manage even the abstract aspects of your site, like hierarchy and site navigation. An illustration can be a big help when you’re having trouble organizing pages.
Guidance. FrontPage menus and toolbars provide direction that’s lacking in an all-text HTML world. For instance, even if you don’t know exactly how to do something, like format a table border, you can most likely figure it out by searching through menus called Format or Table to find the right command.
This chapter introduces you to the FrontPage workspace. After a look around, you’ll take a turn at the wheel, using FrontPage to create a simple Web site. Along the way, you’ll get to know FrontPage’s controls and windows and catch a glimpse of what the program makes possible.
The Main FrontPage Window
When you launch FrontPage, you see the basic program layout that you’ll come to know well. This workspace is your control center for creating Web sites and pages.
The FrontPage 2003 editing window looks similar to that of other Microsoft products, so if you’re familiar with programs like Word and Excel, you’ll be at home in FrontPage. This familiar setup, pictured in Figure 1-1, features a menu along the top of the screen. Below that, toolbars feature shortcut buttons to menu commands.
The menu bar contains program commands. They follow the basic layout of Microsoft menus. (See Appendix A for a detailed explanation of every menu.)
Two toolbars—Standard and Formatting—display the first time you open FrontPage. These two get top billing because they contain the most commonly used commands. Hold your cursor over a button to display its function. You’ll probably want to keep these toolbars around, but if not, you can get rid of them. Select View → Toolbars to add or hide FrontPage toolbars.
The screen is dominated by the document window, in which you’ll do most of your work. This is your canvas, where you’ll create and edit your Web pages. Buttons on the lower-left corner of the document window, pictured in Figure 1-2, let you change the way this window shows your page. Your choices are described next.
Design view is where you’ll be spending lots of time. Here you can edit in a display that mimics how pages appear in a browser.
Split view shows HTML code in the top half of the window, and Design view shows code in the bottom half. Highlight an element in Design view, and FrontPage will highlight its code above. This view is an easy way to find a code snippet and also a great reference if you’re learning HTML.
Code view fills the window with the page’s HTML code, which you’re free to edit.
Preview is a page preview function, intended to display your page exactly as a browser would. Use this feature sparingly, as it’s not necessarily 100% accurate. You’re always better off previewing your pages in an actual browser anyway (more on that later). One advantage to this page preview option is that you can preview your page—including interactive features like hyperlinks—more quickly than when using a browser. But beware—this function works in concert with your Microsoft browser. So it shows how your page appears in only Internet Explorer and not in other browsers like Netscape.
The Task Pane
Some commands are buried deep within submenus. It’s a chore slogging through list after list to find and select the choice you want. Of course, FrontPage 2003 offers shortcuts like toolbar buttons and keystrokes. But the program includes another helpful feature that pops up now and then looking to assist you with a whole bunch of tasks. Not surprisingly, it’s called the task pane.
The task pane displays on the right side of the screen (see Figure 1-1). The first time FrontPage opens, the Getting Started incarnation of the task pane appears.
This is just one of a number of separate task panes that display in this area. You can access other choices through the task pane menu, as shown in Figure 1-3.
As you use FrontPage, the task pane pays attention to what you’re doing. When you carry out different functions, the pane changes automatically to offer selections that are appropriate to the task at hand. For example, if you select File → New, the task pane presents choices for creating a new page or a new Web site. If the pane takes up too much screen space, you can close it by clicking the x in the upper-right corner (of the task pane, not the overall FrontPage window). But you can’t keep this feature down. The task pane opens again automatically if you select an activity that requires use of a task pane, like searching for clip art. And you’ll definitely need the task pane if you ever want to do things like add layers or behaviors to a page. (You’ll learn all about those features in Chapters 8 and 9.)
Creating a Simple Web Site
You’ve barely scratched the surface of what FrontPage has to offer. The menu and toolbar choices that you have yet to explore help you do things like create actual Web pages, so it’s time to start moving around in the program a bit. Make your way through the simple steps below for creating a sample Web site. In the process, you’ll learn more about the program’s layout and get to check out some additional views and features. Complete coverage of all the skills you’ll need to create the full-blown Web site of your dreams follows throughout the rest of this book.
Creating a New Web Site
Sure, you can create an individual Web page with no ties or connections to other pages, but Microsoft designed FrontPage to create and manage entire sites. The focus of the program is always on your Web site as a whole. As a result, the first thing you’ll do when working in FrontPage is create a new Web site.
In previous versions of FrontPage, Microsoft used the word “Web” to mean Web site. Because this term understandably created some confusion, Microsoft finally switched to the more appropriate “Web site.” However, you’ll still occasionally see the old moniker “Web” pop up from time to time.
When the program first opens, a blank page appears. To avoid creating pages within an existing site, make sure you don’t already have a Web site open by selecting File → Close Site. If the option is grayed out, you don’t have a site open.
Select File → New.
A selection of site templates appears. Most of these are Microsoft’s automated templates that come with preset designs; they even include text and pictures. If you want to know more about a template, click once on it to read a description. For now, you’ll create your own site from scratch without the help of a template.
Click once to highlight the Empty Web Site option.
Next, FrontPage needs to know where to save the site. Usually, the location box is automatically set to your computer’s My Webs folder (there’s that old Microsoft-speak for “Web site” showing up). Saving in this folder is fine, though FrontPage isn’t very creative with the site names it wants to use. Were you to save a few sample sites, you’d see the program name them myweb1, myweb2, and so on. Names like that make it hard later on to remember what’s in the site. So, although what you’re working on right now is just a sample Web site, you should go ahead and name it. For best results, don’t include any spaces, capital letters, or special characters in the name, and keep it short. Later in this book, you’ll find more detailed guidelines for naming Web sites and files.
Do not create the site on the highest level (geeks call this the root) of your C:\ drive (meaning the location should never be something like C:\mysite). Always create the site in a folder that’s at least a level or two away from plain C:\. This path could be something like C:\misc\sites\mysite, for instance—or better yet, just use the My Webs folder. If you create your site’s folder directly on C:\ and not within an additional folder, you’ll have problems later.
Click in the Location box. At the end of the site name proposed by FrontPage, following the last back slash, change the name of your Web site to anything you want (Sample, Test, or whatever), and click OK.
Your new empty Web site opens in FrontPage. The folder list is now visible on the left side of FrontPage’s main window. The folder list, which (no surprise) shows the folders and files in your site, is the tool you’ll use to keep your site organized. After all, you have to find your Web pages to edit them. Even though you haven’t added a thing to this site yet, FrontPage has already placed two folders in the folder list, the images folder, used to hold your images, and the _private folder, used to hold files you wish to keep hidden from public view. You should sleep soundly knowing that FrontPage takes an active hand in managing your site. It creates and updates hidden files that your site needs to work correctly.
Adding Web Pages
A Web site is nothing without a page or two or 40. You can handle the creation of pages within your site in a few different ways. Some Web authors work from the outside in. In other words, they create a site’s structure and then fill in the details on each page. Most people work from the inside out: they craft a Web site page by page, placing each page where it belongs in the pecking (or clicking) order until their site is complete.
For now, keep it simple. Create a page the old-fashioned way, in Design view.
Create a new page.
You can create a new page using one of the following methods: click the New Page icon on the toolbar, or press Ctrl+N on your keyboard, or select File → New and click New Page within the task pane.
The Layout Tables and Cells task pane may have automatically opened when you created the new page, as illustrated in Figure 1-4. If it didn’t, open it now by selecting View → Task Pane. Then click the Task Pane drop-down menu and select Layout Tables and Cells.
Within the Layout Tables task pane, under the Table Layout section, click the third choice, “Corner, Header, Left, and Body,” as illustrated in Figure 1-4 .
FrontPage applies the layout to the page, dividing it into sections (which are really cells of the layout table). There are pros and cons to using layout tables, which you’ll read about later. For now, proceed blithely on.
Close the task pane to increase your workspace.
Adding Content to Your Web Site
Whatever your site is about, one thing is always true: to get your message out there, you’ve got to get it onto your Web pages. Fortunately, FrontPage’s features for adding text, pictures, and other elements are plentiful and easy to work with.
Even Web pages that consist mostly of pictures include a few words. For all the ins and outs of working with text in FrontPage, check out the next chapter. Meanwhile, the following steps give you a rudimentary start.
Click to place your cursor within the table cell on the top right of your new page and type a few words that will serve as the heading for your page.
Leaving your cursor on the line you just typed, click the Style drop-down menu on the formatting toolbar (where the current choice is Normal) and select Heading 1 from the list.
On the formatting toolbar, click the Center button.
The text is now centered within that cell. If you weren’t using a layout table, your text would be centered on the page.
Highlight all the text you just typed.
To do this, drag your cursor across the entire line (just as though you were selecting text in Microsoft Word). Don’t leave out any letters. The additional formatting you’re going to apply is character-based, meaning it applies only to the characters you select.
On the formatting toolbar, click the drop-down arrow to the right of the Font Color button and select red.
Click to place your cursor in the cell on the lower right (just below the cell your heading’s in).
Your cursor should still be in the right side of the layout table. Perhaps you’ve seen Web pages that look similar to the format you’re using? In the upper-left corner there’s room for a logo. Below that on the left, a long narrow cell is a nice place to put a vertical menu bar with links to other parts of the site. On the right, you can enter general page content, as you’re about to do.
Type a line of text and press Enter.
Type another line and press Enter.
You’ve now got yourself a simple Web page with some text on it. It’s not going to win any awards, but it’s a start.
Hyperlinks are like glue. They bind the pages of your site to each other and also to the rest of the Web. If you forget to link to one of your site’s pages, it could languish in oblivion, unread for ages. Actually, FrontPage can help you find these unlinked pages, but the point is that pages need hyperlinks if you want people to get to them.
You can add hyperlinks that open other pages or even initiate emails. Right now, you’ll create another Web page in your site and link to it—all in one step.
Highlight a word or line of text on your page.
Right-click and select Hyperlink.
The Insert Hyperlink dialog box opens (see Figure 1-5).Figure 1-5. Use the Insert Hyperlink dialog box to set the destination of a link. Hyperlinks can lead to other pages within your site or to pages out on the Web. You can even use this dialog box to create new pages. The text you highlighted on the page appears in the “Text to display” box at the top. This text will serve as the hyperlink on your Web page.
Click once on the Create New Document link option on the left.
The dialog box presents some new options based on your selection. The “Text to display” box shows you the text on the page that will become your hyperlink. You can edit this text here or on the page itself.
Within the Name field, type a name for your new page (again, don’t include spaces, capital letters, or special characters) and click OK.
You’ve just created a new page within your Web site and linked to it at the same time. Your new page appears in the document window.
At the top of your new page, type a heading, format it as Heading 1, center the text, and press Enter.
Did you forget how to do that already? Check out steps 2 through 5 in the previous section.
Select Insert → Horizontal Line and press Enter again.
Once you’re a FrontPage whiz, you’ll probably use tables to lay out your pages (as you did in the previous section). But FrontPage gives you other elements you can use to organize a page, too. The horizontal line is an easy (if unrefined) way to break text into sections.
If your cursor isn’t centered on the page, click the Center button on the formatting toolbar.
Since you didn’t lay this page out with a table, centering elements like headings and images is a quick way to make the page look better. (However, when it comes to longer paragraphs, left align looks more professional and is easier to read than centered text.)
Graphics can really spice up your page and help dazzle your visitors. Use images to share information (to show what your products look like) or provide guidance for what you want visitors to do (a picture of a house might be a link to your home page). Or they might just fulfill your decorative urges.
Whatever the reason, follow the steps below to add an image to your page. Later, when you create your own real site, you’ll probably have your own original graphics. For now, just borrow from Microsoft’s clip art collection.
The Clip Art task pane displays on the right with a search box (see Figure 1-6). You don’t need to search extensively. Don’t even bother to type anything. Just click Go, and some pictures should display on the lower-right side of the task pane.
Click any picture to select it.
The picture displays on your page.Figure 1-6. Now that you have a couple of pages, the editing window includes more options. At the top of the document window, click the tabs to switch between open pages. An asterisk next to a page name indicates that the page contains unsaved material. (You’ll learn how to save in a moment.) At left, within the folder list, your new page (Managua.htm, in this example) appears.
Close the task pane by clicking the x on the upper-right corner or selecting View → Task pane to turn it off.
Saving Your Work
Don’t let your new miniature Web site go unsaved. Actually, you already saved the site itself when you created it. After that, you’ll always be saving your site content—like pages and images. Should you try to close a site by selecting File → Close Site, FrontPage prompts you to save changes to individual pages one by one. You’ve seen these kinds of prompts before when you’ve tried to close a program that still has files open.
You’re better off saving changes as you work. Saving frequently helps fend off the danger of data loss (and nervous breakdown) due to a computer meltdown. If you never lost work to a computer glitch, consider yourself one of the few and fortunate. Caution aside, you’ll find that saving your pages regularly eases site maintenance.
If you have several pages open that contain unsaved changes, you can save them all at once by selecting File → Save All. FrontPage saves everything that’s open and unsaved.
Saving a Web Page
In the course of working on your site, FrontPage frequently prompts you to save pages. Often that’s because the program needs you to save in order to do things that you’ve asked it to do, like preview your page in a browser.
Start now by saving the edits to your site’s new page. The tab for your new page still contains an asterisk, as illustrated in Figure 1-6, which tells you that the page needs to be saved. Get rid of the asterisk with a simple click of the Save button on the toolbar. Or select File → Save (Ctrl+S). When the Save dialog box appears, FrontPage usually wants to name the page something like new_page_3.htm. Rename it so that the file name actually means something to you within the context of your site. As with a Web site name, don’t include any spaces, capital letters, or special characters in the name, and keep it short. The process of saving this page also takes care of some basic site maintenance, as you’ll see.
Save the page.
After you’ve named and saved the page, a Save Embedded Files dialog box displays. In the course of saving this page, FrontPage needs to know where it should save the image file you just incorporated in your site. (While pictures may look to you like they’re part of a page, they actually exist behind the scenes as individual image files and must be saved within your site. Don’t leave them in a random folder on your hard drive, or your Web server won’t know where to find them later when you publish your site.) If you just click OK, FrontPage saves the image into whatever folder you’re currently working in. As you create pages, the list of files associated with your site will grow quickly. It’s important to organize these files intelligently. You’ll get to site management later on in Chapter 10, but right now, put your best foot forward by saving this image file where it belongs: in the Images folder that FrontPage has automatically created within your site. But first, you’ve got to name the image properly.
Click the Rename button and change the name to something fitting and descriptive.
As is, the image file name consists of some numbers and text that will mean nothing to you later on. Since you’ll want to find the image easily in the future, rename it. Eventually you’ll have a folder full of graphic files with names like explodingeggplant.jpg and cleanuptools.gif. You’ll then be able to identify them without a hassle.
Click the Change Folder button.
Click the Images folder and click OK.
The Save dialog box now shows the new location for the file. You can click OK, and—poof!—the asterisk on the page’s tab disappears.
Select File → Close to close the page.
The first page you created—which will be the site’s home page—should be displayed in your document window. You now need to save it.
Save the home page.
The Save As dialog box displays. Note that FrontPage has already entered a name for the file: index.htm. You should keep this name, as it tells the browser that this is the home page or first page the browser should open. FrontPage always designates the first page you create in a site as the home page. If you want, you can give the page a title, too (see Figure 1-7). (Chapter 10 covers everything you need to know about home pages, file names vs. titles, and site structure.)
Within the Save As dialog box, make no changes and click Save.
Viewing Your Site
Your new site has only two pages, but imagine that you’ve got 20 or 200. At that size, keeping track of all your files is a real challenge. How can you see what’s going on?
FrontPage has got you covered. As you’ve already seen, the program provides different views for individual pages, so you can see and manage what’s on your pages effectively. In much the same way, FrontPage’s site views let you keep track of your entire site. You get a few different options. Use Folder view to group relevant files together so they’ll be easy to find and edit. At a glance, Hyperlinks view assures you that your links lead to the right pages. Click and drag in Navigation view to rearrange the hierarchy or navigation of your site.
The next two sections show you all the different ways FrontPage lets you look at everything from individual pages to your entire site.
Exploring Page Views
You’ve read about FrontPage’s different page views (Section 1.1), but now that you have an actual Web page open in FrontPage, you can see them in action. Your document window has been set to Design view as you’ve been working. You’ll probably spend most of your time there, but check out all your options, like Split view, pictured in Figure 1-8.
Explore some other page views by clicking the buttons on the bottom-left corner of the document window. For details on page view options, flip back to Figure 1-2.
Exploring Site Views
Managing an entire Web site means that you’ll be handling lots of information. You’ve got to keep track of where things are, what files are linked to each other, and who’s working on them.
You can handle it all with FrontPage’s site view options. Not only do these views show you the details you need, they also give you a handy visual representation of your site. When you tackle abstract matters like site hierarchy and the flow of your hyperlinks, a diagram of page relationships is really helpful. You’ll use site views to manage links, files, folders, and tasks.
Usually, you’ll have a page active in the document window. Tell FrontPage that you’d like to get the big picture by clicking the Web Site tab at the top of the document window. A view of your site’s folders appears in the document window. Also, the view buttons at the bottom-left corner of the document window change. They now reflect the following options to help examine your site:
Folders view mirrors the display within the folder list on the left side of the FrontPage window. Though the information is the same, this view offers an expanded workspace, which is great for reorganizing folder structure or moving files around.
Remote Web Site view is not relevant at the moment (you’ll learn more about it in Chapter 13). The normal workflow for a Web site is to edit a copy of the site on your computer or network (the local site) and then upload it to a Web server (the remote site). Using this view, you can compare the two sites, publish only select files, and exclude files from being published.
Reports view offers a variety of site tracking queries. For example, you can run a report that lets you know if your site contains unlinked pages that readers can’t access, or check for pages that load too slowly.
Navigation view provides a diagram of a site’s hierarchy. It comes with one big drawback, however. You’ve got to create and manage this view manually. There are two cases in which you’d use this view: when you want to create a Web site structure before you create individual pages filled with content, or when you plan to use some of the features that need Navigation view to work, like FrontPage link bars (automated site navigation menus). Otherwise, you’re better off using folders to handle issues of hierarchy.
Hyperlinks view, illustrated in Figure 1-9, gives you a visual representation of the location and direction of your site’s hyperlinks.
Previewing Your Site
As you create your Web pages, keep in mind that there are a variety of operating systems and browsers out there, each with its own capabilities and quirks. Creating pages that look the way you want them to in browsers from different companies (and from different eras) is a challenge worthy of a United Nations interpreter.
Get used to the fact that you’ll never have complete control over how your pages display in a browser. The browser takes fonts and other settings from a viewer’s system, which may differ vastly from those you used to preview your site. Imagine, for example, that you create a beautiful page layout, only to discover that your Aunt Sophie has her old 640 x 480 monitor set to large fonts and your page turns to a jumble on her Windows 95 jalopy.
You probably won’t have access to all the species of browsers that are out trawling the Web, but the latest release of FrontPage provides you with some additional preview options that can help. You can use these preview tools to avoid trouble and steer your site safely through most pitfalls.
These preview tools work with whatever browsers are currently on your computer. So download and install as many different browsers as you can, including less common ones like Opera and Firefox. See Chapter 12 for details on getting your browsers to appear on FrontPage’s list.
While the page Preview view gives you some idea of how your page will look, you should always preview using an actual Web browser. In fact, you should preview in many browsers, which FrontPage helps you do. Here’s how:
Confirm that index.htm is saved.
FrontPage won’t let you preview your site in a browser until you’ve saved all changes.
Click the Preview in Browser button.
This button is located on the Standard toolbar. It opens the page in your system’s standard browser—the one that opens every time you go on the Internet. You can check the appearance of your page and test the hyperlinks and other interactive elements on your pages.
Close the browser.
Select File → Preview in Browser to display the menu pictured in Figure 1-10 .
This menu is where you pick from all the different browsers you’ve got loaded on your PC.Figure 1-10. FrontPage 2003 includes new options for previewing your work. Not only does the Preview in Browser menu offer whatever browsers you have loaded on your system, it lets you see what your page will look like at different screen sizes. A page that works on your 1024 x 768 screen may not work on a monitor set to 640 x 480.
If you have multiple browsers, select one that you haven’t used, or try a different screen resolution.
You’ve done it! You’ve built a basic Web site and come to know some of FrontPage’s editing options and controls. When it comes time to work on your own site, you’ll constantly be using the skills you just sampled. You’ll be creating pages, formatting text, adding images, and linking pages like crazy. The chapters that follow cover all of these procedures in detail.