If you're reading this book, you're probably already somewhat familiar with the Internet. The fastest growing part of the Internet is the World Wide Web. Most people don't become interested in designing their own Web pages unless they have seen pages created by others. You realize that the Internet is a great way to tell the world about yourself or your company. This book shows you some ways to do just that.
You have the right development tool in FrontPage-it's a powerful, well-thought-out product. FrontPage should satisfy the novice in its simplicity and ease of use. You'll be amazed at how easy FrontPage makes it to produce professional-looking Web pages. FrontPage also appeals to the more experienced Web-page developer in its support of extended features and custom code. Get ready to learn how to develop and manage Web sites the easy way!
There is no doubt about it-it takes some planning to create a good Web site. Before you start designing your pages, think about what you want to accomplish with your site and how the content should be organized. The things you should consider when you sit down to plan your site are the type of audience you are targeting the site for, the topics and areas you want to focus on, and the features you want to include in your pages.
If you want to build your corporate site to attract customers or increase consumer interest, consider what appeals to that audience the most. Would your site be better represented by clean, professional pages with a limited amount of graphics and multimedia, or would flash and style catch their attention and pique their interest more? If your site is targeted for a mixed audience, how should the content be arranged? Do you need areas for internal business use, as well as areas for public information and feedback?
If you're designing a personal site, chances are that you want your site to appeal to others who have interests that are similar to your own. The nice thing about designing a personal site is that you can put anything you want on your pages. Unfortunately, it's also harder to decide what to focus on-hence, the next topic.
Corporate and business Web designers have an easier time of deciding the focus of a Web site. A corporate site can focus on the company's products, services, customer relations, employee project coordination, and more. FrontPage offers many templates and wizards that help in this regard and get corporate sites off and running in no time. This book describes how and when to use them all.
When it comes to designing a personal site, however, it is not quite as easy to choose the focus of your site. It is one of the first obstacles that you have to face. Once you hear that you have 1, 5, or even 25 megabytes of space to store pages on your server, you are in a quandary over what to fill them with. Most personal Web sites focus on one or more topics of interest, with each topic organized in a group of pages that make up one section of a Web.
Your home page typically welcomes people to your site and explains what it is about, but you can use it as a gateway to much else. If you cannot think of anything more than filling your site with pictures of your kids and pets, here are some ideas:
| TIP |
If you do not have a scanner or access to one, but have a CD-ROM drive, ask your photo shop to put your photographs on a photo CD. Many shareware and commercial graphics programs support the Photo-CD format. |
The most popular browser on the Internet is Netscape Navigator 3.0. Following behind and gaining ground in the browser battle is Internet Explorer 3.0. In their latest releases, both of these browsers support Netscape Plug-Ins, Java, JavaScript, animation, sound, tables, and more. Internet Explorer 3.0 supports ActiveX, as does Netscape 3.0 through third-party plug-ins. Not all browsers support these features. Those are the types of features that make a site really stand out among the crowd. To keep track of the features that are supported by the vast collection of browsers, drop in on BrowserWatch, shown in Figure 1.2. The BrowserWatch keeps track of the latest versions of all known browsers, and also tracks Netscape Plug-Ins, ActiveX controls, and more. You can find them at
Figure 1.2 : Keep tabs on the latest browsers and the features they support at BrowserWatch.http://browserwatch.iworld.com/
When you design your site, be aware that some features are browser-specific. If you do use features that are targeted more toward one browser, mention that browser on your site and provide a link to download it. At the same time, provide alternative content that can be viewed in lieu of your browser-specific pages for those who prefer to stick with their current browser.
Bear in mind, as you design your pages, that each visitor who navigates to your site can control how he or she views your page. A user can customize the text size, font, color, link colors, viewing of graphics, and more in his or her browser. There isn't much you can do about this except be aware that it happens and offer alternatives in case a user chooses to turn off the graphics.
Most important, check your pages in several different browsers as you develop them. This is easy to do in FrontPage 97. After you design or implement a feature in your page that you want to check in another browser, simply choose the File | Preview in Browser command from the FrontPage Editor. Select the browser you want to preview the page in, and the resolution of the preview.
Once you have the basic idea for your Web site down, think about how you want to organize the information. Make it easy for visitors to find their way around your site.
Figure 1.3 shows an example of an initial idea for a personal site. The home page is linked to two main areas, each of which contains pages that discuss the person's areas of interest. Pages about whitewater rafting appear in one section of the Web, and pages about myths and mysteries appear in another section of the Web. Links to both sections appear on the home page. Now that an idea has taken shape, FrontPage can do its job.
Figure 1.3 : Plan your information before you start building your Web site.
You start FrontPage from the Windows 95 Start menu. Choose Microsoft FrontPage. The Getting Started with Microsoft FrontPage dialog box appears, after which you can choose one of several options.
The Getting Started with Microsoft FrontPage dialog box, shown in Figure 1.4, provides a means to create and open webs quickly.
Choose one of the following commands from the Open a FrontPage Web section to open a web you have already created. The tasks to complete each of these choices are discussed later in this chapter as indicated below:
Open webname. Webname is the name of the last web on which you worked. See "Opening Your Most Recent Web," later in this chapter.
Open Existing FrontPage Web. See "Opening an Existing FrontPage Web."
Choose one of the following commands from the Create a New FrontPage Web section to create a new FrontPage web on your local or remote server, or your local or network hard drive:
From a Wizard or Template. See "Creating a New FrontPage Web."
With the Import Wizard. See "Creating a Web with the Import Wizard."
Blank FrontPage Web. See "Creating a Normal Web."
If you prefer to enter the FrontPage Explorer immediately after starting Microsoft FrontPage, you can disable the Getting Started with Microsoft FrontPage dialog box. Follow these steps:
If you have the Getting Started with Microsoft FrontPage dialog box disabled and want to re-enable it, follow these steps:
The Getting Started with Microsoft FrontPage dialog box provides commands to open your most recent web and to open any other FrontPage web that exists on your server or hard drive. You can also open webs from the FrontPage Explorer.
You can open the most recent Web you worked on in one of two ways:
Use the Open FrontPage Web dialog box, shown in Figure 1.5, to open an existing FrontPage web. You can open this dialog box from the Getting Started with Microsoft FrontPage dialog box or from the FrontPage Explorer.
| NOTE |
The Name and Password Required dialog box appears the first time you open or create a web after starting the FrontPage Explorer. Enter the name and password you configured in the FrontPage Server Administrator while installing FrontPage to your local computer. |
When you create a new web in FrontPage, you can select from a number of different web templates and wizards. You choose one of the templates and wizards from the New FrontPage Web dialog box, shown in Figure 1.6.
Figure 1.6 : You select the type of web you want to create from the New FrontPage Web dialog box.
FrontPage 97 makes it much easier to create webs with or without using the Personal Web Server. Depending on the way you enter the server name in the template or wizard dialog box, you can create a new web in one of three ways.
If you prefer to develop your pages while online with a remote server that uses the FrontPage Server Extensions, you can enter your server name, as shown in the following example and in Figure 1.7:
Figure 1.7 : Enter the URL of your FrontPage-enabled server if you want to develop or edit pages remotely.http://servername.com/
To create a new web on your local computer using the Personal Web Server, enter one of the server names returned to you when you installed FrontPage, or choose the server from the Web Server or File Location drop-down menu. An example is shown in Figure 1.8. You can use entries such as the following:
Normally, you enter or choose a server name when you create or
open webs. This starts the FrontPage Personal Web Server, which
allows you to develop, test, and maintain full-featured webs that
utilize all the features of FrontPage. New to FrontPage 97 is
the capability to create FrontPage Webs without using the FrontPage
Personal Web Server. To do this, you specify a drive and directory
on your local or network hard drive in the Web Server or
File Location drop-down menu. This option is ideal to choose if
you want to develop pages for a Web site that doesn't or won't
have the FrontPage Server Extensions. When you create a web on
your local or network hard drive, FrontPage converts the directory
to a FrontPage web, installing only the files it needs to track
your web pages and the features they contain. If your pages contain
features that require the FrontPage Server Extensions, they won't
function correctly when you preview your pages in a browser. You'll
need to manually start the FrontPage Personal Web Server to test
them.
| NOTE |
If your web is destined to reside on a server that doesn't have the FrontPage Server Extensions installed, avoid using the bots discussed in Chapter 22, "Runtime Bots-The Heartbeat of FrontPage Forms," unless you know how to write and configure scripts of your own. |
To create a new web in a directory on your local or network hard drive, enter the file location of a drive and directory which already exist on your local or network hard drive, as shown in Figure 1.9 and as follows:
Figure 1.9 : FrontPage 97 makes it very easy to develop pages without the web server and save them to your local or network hard drive.c:\MyWebs\ f:\NetworkWeb\WebDirectory\
You create a new web in FrontPage by choosing one of the templates or wizards from the New FrontPage Web dialog box, shown earlier in Figure 1.6.
To begin a web from scratch, choose the Normal Web template, which creates a web that contains a blank home page, or the Empty Web template, which contains no pages. The Normal Web is discussed next in "Creating a Normal Web."
Businesses and corporations may find several of the web templates and wizards provided with FrontPage to be of interest. The Corporate Presence Wizard is an ideal way to create a business web site where your products and services are highlighted. The Customer Support Web and the Discussion Web Wizard feature discussion groups which contain threaded messages. The Customer Support Web features pages that provide communications for customer relations, whereas the Project Web features pages for project coordination.
To start a personal web site quickly, choose the Personal Web template. This creates a web that contains a personal home page. As an alternative, you can create an empty web and use the FrontPage Editor's Personal Home Page Wizard to create a customized home page.
The Import Web Wizard helps you import existing Web content into a FrontPage web. This wizard is discussed later in this chapter.
To create a new FrontPage web:
As just mentioned in "Creating a New FrontPage Web," the Normal Web template features one blank page. This page is typically used to create the home page in your new web. You use the Normal Web Template dialog box, shown in Figure 1.10, to select the server and specify a name for your normal web.
To create a normal web:
When you install FrontPage on a system that contains a previous version of FrontPage, you are given the option to install the client and the server over the previous version or to a new directory. When you install over the previous version, your existing content is automatically imported into FrontPage 97 and converted as necessary. If you choose to install the FrontPage 97 server to a new directory, your existing content directory is left untouched and a new content directory is created. You'll need to import existing content into your new FrontPage content directory.
What if you have already developed Web pages without using FrontPage? How do you bring those pages into FrontPage, so that you can take advantage of the way FrontPage helps you manage your site? In FrontPage 97, it's very easy to do-you use the Import Wizard. The Import Wizard imports files from your local or network hard drive into your FrontPage web. If your web content is located on a remote server, you'll need to use an FTP program such as WS-FTP or CuteFTP to copy your Web pages to your local computer first, duplicating the directory structure of your web pages on your local computer as you do so.
As mentioned in "Creating a New FrontPage Web," the Import Wizard helps you import existing Web content into your FrontPage web. You start the Import Wizard from the Import Web Wizard dialog box, shown in Figure 1.11.
To import existing content using the Import Web Wizard:
In the first screen of the Import Web Wizard, shown in Figure 1.12, you select the source directory in which your Web content resides.
To choose your source directory:
The second screen of the Import Web Wizard is the Edit File List screen, shown in Figure 1.13. A list of all the files in the directory and subdirectories you selected appears in the Files list. To complete this screen:
In the final screen of the Import Web Wizard, you are notified that you have answered all the questions.
Folder View, shown in Figure 1.15, displays the details of all the folders and files in your Web. You display your web in Folder View by choosing View | Folder View or by clicking the Folder View button in the FrontPage Explorer toolbar. From Folder View, you can create new folders in your web, rename and move pages, and drag and drop pages to open them in the FrontPage Editor.
Folder View is divided into two sections. The All Folders section appears at the left of the screen. It lists all the folders in your current FrontPage web. Clicking a folder displays the files contained within it in the Contents section, in the right portion of the screen. From the Contents section, files can be sorted by filename, file title, size, type, modified date, the name of the person who modified the page, or comments for the page. This is quite handy for large webs.
When you right-click on a filename in the Contents view, the pop-up menu shown in Figure 1.15 appears. The following commands appear in this pop-up menu:
Show Hyperlinks. Switches the FrontPage Explorer to Hyperlink View and displays the hyperlinks to and from the page that you selected.
Open. Opens the selected page in the FrontPage Editor.
Open With. Opens the selected page in another editor that has already been configured using the Configure Editors tab of the Options dialog box.
Cut. Cuts the selected pages or content into the Windows clipboard.
Copy. Copies the selected pages or content into the Windows clipboard.
Rename. Renames the selected page or content.
Delete. Deletes the selected page from the Web.
Properties. Opens the Properties dialog box for the selected page.
As your web grows, it becomes more and more difficult to keep track of pages if they are all contained in one directory. You can easily organize pages with similar content into their own directories. It is very easy to create new subfolders within your web and move pages into them.
To create a new folder in your current web, follow these steps:
In FrontPage 97, it is extremely easy to rename and move files in your web. Files can be renamed by simply clicking on them and editing the name of the file. To move a file to a new directory, simply drag and drop the file into the directory that you want to move it to. FrontPage automatically updates the pages that contain links to the file you're moving-so your links keep working!
To rename a page or file:
You can easily move files or copy files from one folder to another. This is another task that is accomplished in Folder View. To move a page into a new folder, all you need to do is drag and drop, as shown in Figure 1.16.
To copy or move a file:
Hyperlink View, shown in Figure 1.17, displays the incoming and outgoing links to a page graphically. To display your web in Hyperlink View, use one of two procedures:
The left portion of the screen contains the All Hyperlinks window. Here, your web is displayed in a hierarchical manner. You can expand pages that are preceded by a plus sign to view the pages which it links to. To contract the list, click on a page that is preceded by a minus sign.
The right portion displays the currently selected page in the center of the view. Pages are displayed as icons, with the title of the page labeling the icon. Links to and from the pages are displayed as arrows, and pages that are included within the page are displayed as circles. You can navigate your way through the tree by clicking on a page icon that has a plus sign (+) in its upper-left corner, after which the view expands.
If you right-click on any of the page icons in the right window of Hyperlink View, a pop-up menu appears, giving you quick access to some commonly used commands. Five commands are associated with the Hyperlink pop-up menu:
Move to Center. To display this command in the pop-up menu, select one of the pages that link to or from the page displayed in the center of Link View. Then right-click to open the pop-up menu. This command moves the page that you selected into the center of the Link View and displays its links.
Open. Opens the page in the FrontPage Editor.
Open With. Opens the page in another editor that is configured with the Configure Editors tab in the Options dialog box.
Delete. Deletes the selected page from the Web.
Properties. Opens the Properties dialog box for the selected page.
You can easily change the name and title of your web, using the Configuration tab in the FrontPage Web Settings dialog box, which is shown in Figure 1.18.
The FrontPage Explorer has a status bar and a toolbar that can be displayed or hidden.
The status bar is located at the bottom of the FrontPage Explorer workspace and provides brief descriptions of what each menu command or toolbar button accomplishes. To display the status bar in the FrontPage Explorer, choose View | Status Bar. Repeat the command to hide the status bar.
The FrontPage Explorer toolbar, shown in Figure 1.19, is located beneath the Menu List. The buttons on the toolbar provide quick access to the commands you most commonly use in the FrontPage Explorer. From left to right, the commands are: New FrontPage Web, Open FrontPage Web, Cross File Find, Cross File Spelling, Hyperlink View, Folder View, Up One Level, Hyperlinks to Images, Repeated Hyperlinks, Hyperlinks Inside Page, Show FrontPage Editor, Show To Do List, Show Image Editor, Stop, and Help.
To display the toolbar in the FrontPage Explorer, choose View | Toolbar. Repeat the command to hide the toolbar.
The FrontPage Editor is used to create your Web pages. It is a WYSIWYG editor, meaning that what you see on your page is a good representation of how the page looks on the Web using the most popular browsers. Figure 1.20 shows a Web page with graphics as it appears in the FrontPage Editor. Individual browsers handle certain features differently (tables are a good example), so it's wise to keep a variety of browsers on hand to fully test your pages before you publish them.
Figure 1.20 : You create and edit pages in the FrontPage Editor.
The FrontPage Editor does a great job of conforming to standards and generating "legal" HTML code. It makes your job a lot easier as a result: You can create forms and framesets in a flash, add color and emphasis to text, add images, create image maps and transparent GIFs, and use a host of other great features, all without touching a bit of HTML code. You can view and edit the code, though, by using the View | HTML command in the FrontPage Editor. An example is shown in Figure 1.21.
Figure 1.21 : You can view the code of your pages using the View | HTML command.
To open the FrontPage Editor from the FrontPage Explorer, use one of two methods:
Throughout this book, you'll use the FrontPage Editor to generate pages that can be saved to your web. You'll learn how to create pages from templates and wizards and how to create pages on your own. The pages range from simple, text-only pages to those with advanced features, such as forms, frames, and tables, that enhance your page layout. You begin each page with the File | New command in the FrontPage Editor. The rest can be as straightforward or as creative as you choose.
When you have several pages open at once in the FrontPage Editor, you can arrange the windows to overlap each other or to tile in the FrontPage Editor workspace:
Like the FrontPage Explorer, the FrontPage Editor has a status bar and toolbars that can be displayed or hidden.
The Standard toolbar, shown in Figure 1.22, provides a quick way to access common page creation and editing commands. From left to right, the commands are: New, Open, Save, Print, Preview in Browser, Check Spelling, Cut, Copy, Paste, Undo, Redo, Show FrontPage Explorer, Show To Do List, Insert WebBot Component, Insert Table, Insert Image, Create or Edit Hyperlink, Back, Forward, Refresh, Stop, Show/Hide, and Help. To display this toolbar, choose View | Standard Toolbar.
Figure 1.22 : The Standard toolbar.
The Format toolbar, shown in Figure 1.23, contains buttons that access text and paragraph style formatting commands. From left to right, the commands are: Change Style, Change Font, Increase Text Size, Decrease Text Size, Bold, Italic, Underline, Text Color, Align Left, Center, Align Right, Numbered List, Bulleted List, Decrease Indent, and Increase Indent. To display or hide the Format toolbar, choose View | Format Toolbar.
Figure 1.23 : The Format toolbar.
The Image toolbar, shown in Figure 1.24, provides commands that allow you to create image maps and transparent GIFs. From left to right, the commands are: Select, Rectangle, Circle, Make Transparent, Highlight Hotspots, and Polygon. To display or hide the Image toolbar, choose View | Image Toolbar.
Figure 1.24 : The Image toolbar.
The Forms toolbar, shown in Figure 1.25, provides commands that allow you to place form fields on your page. From left to right, the commands are: One-Line Text Box, Scrolling Text Box, Check Box, Radio Button, Push Button, and Drop-Down Menu. To display or hide the Forms toolbar, choose View | Forms Toolbar.
Figure 1.25 : The Forms toolbar.
The Advanced toolbar, shown in Figure 1.26, provides commands that allow you to place advanced features into your web pages. From left to right, the commands are: Insert HTML, Insert ActiveX Control, Database Connector Wizard, Insert Java Applet, Insert Plug-In, and Insert Script. To display or hide the Advanced toolbar, choose View | Advanced Toolbar.
Figure 1.26 : The Advanced toolbar.
FrontPage allows you to print your pages to hardcopy. Before you print the page, you can configure how you want the page to be printed and preview the printout before it goes to your printer.
To preview your pages before they are sent to the printer, follow two steps:
You can print your pages from the FrontPage Explorer. When the pages print, all text and images (with the exception of your background image) are printed. You can preview one or two pages before you print them.
To print your page, use the File | Print command (Ctrl+P). If you need to specify margins or special printing options, complete steps 1, 2, and 3 of the following nine steps:
Now you have a general idea of what the FrontPage Explorer and the FrontPage Editor do and how they work together to help you manage and build your Web site. You'll learn far more in the rest of this book about how to use these tools to build your own Web sites.
This chapter introduced you to the FrontPage Explorer and the FrontPage Editor. You learned how you can use them together to build a Web site on your local computer, how to import existing content into your Webs, and how to print your Web pages to your printer.
The chapters in this book are arranged in five sections that guide you from the most basic steps to publishing your Web pages on the Internet. In brief, you learn the following in each section:
| Q: | Do I have to use the FrontPage Explorer while I develop my Web site? |
| A: | You don't have to, but allow me to say thisÉtry it, you might like it! Once you learn how easy it is to manage your Web site with the FrontPage Explorer, there may be no turning back. |
| Q: | What makes the FrontPage Server Extensions so special, and why are they necessary? |
| A: | The FrontPage Server Extensions allow you to apply advanced features to your Web site without programming. Features like discussion groups, searches, and access permissions are implemented through the Server Extensions. These features might otherwise require you to write custom scripts. Chapter 27, "Working with the FrontPage Servers," provides more details on this topic. |
| Q: | Do I have to use a provider that has the FrontPage Server Extensions? |
| A: | Not necessarily, but if you're new to web development and want to use advanced features on your site (like forms), you can implement them without a lick of programming by using any of the FrontPage bots and selecting a service provider that has the FrontPage Server Extensions. Of course, you can always be adventurous and learn how to implement the other advanced features yourself! |
