We’ll create a small personal web site to get you started. You should be in Navigation View.
First, left click-on the Home Page in the middle of the screen. Prior to your click, it will appear as a light yellow icon, when you click-on it, the page will turn blue. This indicates to FrontPage which page you desire to work on. In this case we’ll add, and automatically link, three additional pages below our main home page.
If you accidentally double-clicked on the Home Page icon, this indicates to FrontPage 2003 that you want to edit this page in FrontPage Design View, so FrontPage loaded your page in the Design View. We’ll do this a lot after our pages are created. It’s not a big deal anyway. Simply click-on the Navigation button at the bottom of the screen and you’ll be back where you want to be. Make sure that you have clicked the Web Site tab, so you can see the Navigation button.
Make sure the Home Page icon is blue. To add the first page under your home page, you will notice, in the upper right corner of the screen, a small button (that looks like a sheet of paper) that indicates New Page (see arrow at right). Click-on this New Page button.
As soon as you click, your screen will change to reflect that you have just created a New Page 1 below your Home Page (index.htm).
This is where FrontPage really does its work. When you click, all of the pages you create in FrontPage 2003 will automatically be hyperlinked by FrontPage. Your screen should now look like the one at the right. We’ll come back and “name” our pages later, after we have created our little web site.
Now we’ll add two more pages under our Home Page (index.htm). Each time, click-on the Home Page (index.htm) to turn it blue, and then click-on the New Page button. Your screen should now look like the one below – after you click the New Page button two more times.
Next, we’ll add two pages under New Page 3. The process is similar to what we just did. First, click-on New Page 3, to turn it blue, and then click-on the New Page button. Do this twice. Your web site should now look like the one below.
If you happen to make a mistake, as you are adding new pages, you can simply left click-on the erroneous new page and tap the Delete key, or right click-on the page and then left click on Delete. A Delete Page menu (like the one on the right) will appear. Click-in the Delete this page from the web site “circle,” and click OK.
Or, you could always click-on the Undo button at the top of the screen.
You now have the beginning of a small web site. Before we attempt to look at it, we need to do a very important task. Remember the words below the Home Page - where we indicated that we would come back to naming the pages? We need to “tell” FrontPage “what” we want to “see” on our web pages - in our web site. To do this we first have to follow the instructions below the Home Page (see bottom of Page 44). They tell us to select Shared Borders in the Format menu.
Before we do this, we have to make sure that Shared Borders are “activated,” so we can use them. To make sure your Shared Borders are OK, do the following. Click-on Tools in the Menu Bar and then click Page Options. The Page Options Menu screen will appear (like the image at the top of the next page).
When the Page Options menu screen appears, click the Authoring tab (see top arrow above). Next, look down the screen and locate Shared Borders (bottom arrow above). Make sure there is a check mark in the little box to the left of Shared Borders. If there is no check, click-in the box and a check will appear. If a check is already there, you are OK. Click the OK button at the bottom of the Page Options menu screen.
To access Shared Borders, click-on Format in the Menu bar then click on Shared Borders (see image to right).
The Shared Borders menu screen will appear (like the one on the right).
To make the titles of each web page and the links visible, you will need to click-in the small circle in front of All Pages, and in the squares to the left of: Top, and Include navigation buttons, and Left, and Include navigation buttons. Your Shared Borders screen should look exactly like the Shared Borders at the right (see arrows). When it does, click-on OK.
To “see” what your web site will look like on the World Wide Web; double click quickly on the Home Page (index.htm) icon. You can also click the right mouse button while the cursor is on the Home Page (index.htm) and, when the menu appears, left click on Open. This will load the Home Page in Microsoft FrontPage 2003 Design view.
efore we open the web site in a browser (Microsoft Internet Explorer, Netscape, etc.), take a few moments to look at the top of the page in the Display View. It should look like the image below. Notice two things. First 1. observe that the title Home Page (index.htm) appears at the top of the page in the Display View – just as it did when Front Page created it. Second 2. , note the New Page 1, 2 and 3 on the left side of the view below. These are links to pages below the one you are editing in the Display View. As indicated earlier, we’ll return to the Navigation View and re-name these pages so that they make more sense to your web site. Again, these are the “automatic” hyperlinks created by FrontPage 2003. Don’t worry about the “dashed lines” you see. These are simply to assist you later in the Display View. You’ll see that they “disappear” when you view your web site in a browser.
Viewing web pages in a browser
Now, in Design View, click-on the browser button in the button bar. Or, you can click-on File in the Menu bar and then click-on Preview in Browser. If you do click-on Preview in Browser, Explorer will ask you to choose a browser that is saved on your computer. We normally use Microsoft Explorer, as it has proven more reliable of late. However, if you are a Netscape or other browser user, then choose your favorite, if this is important to you. Your initial view of your Home Page (index.htm) should look like the image at the top of the next page.
Now you’re in a browser and your “blank” web site will respond like any web site. When you move the cursor over New Page 1, 2 and 3, you will notice that the “little pointy hand” appears indicating a hyperlink. Click-on New Page 1. Your New Page 1 should look like the image below.
Notice that all of the “text buttons” are on the “line” below New Page 1 (see arrow above). These are “real” hyperlinks back to the Home Page and to Pages 2 and 3. When we created our Shared Borders in FrontPage 2003, links for pages that are ABOVE or on the SAME level as Page 1, show below the page title (New Page 1). It does not matter if there are more than three pages above, or on the same level as the current page, all the pages will show with their names. These are part of the automatic hyperlink that we mentioned earlier. As indicated earlier, in the tutorial, this means that all of the pages are either above [Home] or on the same Navigator level as New Page 1 [New Page 2 and 3].
Now click-on New Page 3 in the browser, remember that we created two new pages below New Page 3. Your browser should now look like the image below.
Pages Above and at the Same Level
Notice the line below New Page 3 contains the text links for pages above (Home) or on the same Navigator level (New Pages 1 and 2). The text links on the left are to pages below New Page 3 (Pages 4 and 5).
Titles for web pages in your web site
Now let’s go back to the Navigation View in FrontPage 2003 and “name” our web pages. We’ll be doing the following process frequently, so it’s good to make sure that you understand the process of moving from one program to another. At the bottom of your screen there is an area which shows/indicates what programs are active. This is called the Task Bar. Since we are using FrontPage 2003, as well as a browser [in our case we’re using Microsoft Internet Explorer]. Your Task Bar should look similar to the one below.
FrontPage 2003 Internet Explorer
The icon for FrontPage 2003 has a white arrow on blue (icon on left). The icon on the right is for Microsoft Internet Explorer and indicates that it is “New Page 3.” If you are unsure which icon is which, you can “move” your cursor over an icon, pause on it for a few moments, and text help will appear to indicate the name of the program (e.g. FrontPage, etc.). Click-on the Microsoft FrontPage 2003 icon (indicated by the arrow above) to return to FrontPage 2003. In the upper left corner of the screen it should indicate that you are in FrontPage 2003 (like below).
If you’re not in the FrontPage 2003, try again.
When you return to the FrontPage 2003, make sure that you are in the Folders view. You should see a view similar to the one below. Click-on the Web Site tab at the top of the screen,
Then, click-on the Folders button at the bottom of the screen.
Along the left side, of the Folders screen, under the Name column, you see the “web page names (index.htm, new_page_1, etc.)” for each page. Under the Title column you see the Names as shown in the Navigation web page “boxes (index.htm, New Page 1, etc.).” When we rename the pages the “new” names will appear in the Title column. So let’s get started.
Click-on the Navigation button in the bar at the bottom of your screen to return to our Navigation View of all the web pages.
Carefully, click once lightly on the title (index.htm) in the Home Page box. The box will turn blue once again. Now click lightly on the title in the Home Page box (index.htm) one more time and wait a few moments. The title will now be highlighted in blue. Your image should look like the one on the right.
In a Windows program this indicates that you are able to edit the text. You may start typing immediately. What you type will replace index.htm, or you can also delete the text and then type. For now, type-in your first name (with an apostrophe) and then an “s,” and then the words Home Page (we’ve typed-in the name of two persons who have assisted wonderfully with these tutorials). When you are finished, tap the Enter key.
Now click-on View in the Menu bar and then click-on Refresh. This will “update” your changes to the index.htm page.
Click-on the Folders button in the bar at the bottom of your screen.
You will see that the Title of the page has changed to your name. Your “box” in the organization chart, and in the Title column, should look similar to those below.
Now we’ll place some titles in the other “boxes.” We’ll use some “basic” titles for a general personal web. Once you get the idea of this, you can change the titles to anything you desire, add more pages, etc.
Return to Navigation view by clicking-on the Navigation button again.
For each page type-in the following:
New Page 1: About Me
New Page 2: About My Family
New Page 3: My Hobbies
New Page 4: Type-in the name of a hobby
New Page 5: Type-in the name of another hobby
When you have completed these titles, click-on View in the Menu bar and then click-on Refresh.
Navigation view should look like the left image below. Click-again on the Folders button again. The Folders View should look like the one on the lower right.
Let’s look at what we’ve accomplished by looking at your web pages in the browser. We’ll repeat what we did previously. You should be in FrontPage 2003 Navigation view. So, click-on the Navigation button again.
To “see” what your site looks like on the World Wide Web double click-on quickly on the Your Home Page icon. Or, you can also click the right mouse button while the cursor is on the Home Page and, when the menu appears, left click on Open. This will load the Home Page in Microsoft Page Design View.
In Design View, click-on the browser button in the button bar. Or, you can click-on File in the Menu bar and then click-on Preview in Browser.
Your pages may not open your browser (like before), so if your browser does not open, look in the Task Bar at the bottom of your screen. Your browser button should be “flashing” blue. If it is click-on it.
Click around your web site. You will notice that FrontPage 2003 has automatically changed all of your pages and buttons.
If you'll remember, in the Microsoft Creating a Single Web Page tutorial, we browsed on the Internet and found nice, colorful, backgrounds to replace the white default background in the web page.
Now, in Microsoft FrontPage 2003, we have the neat option to have a "Theme" background throughout our web site. The theme uses the same color scheme for each web page its buttons and links (you can change them page by page later if you desire).
Let’s try this. First, you’ll need to be in Microsoft FrontPage 2003. So, click-on the FrontPage “button” in the Task Bar at the bottom of the screen, like you have done before.
It is best to be in Design view when you apply your themes – so that you can see your themes as you apply them to your web site.
First, make sure you are in the Navigation view. If you are not, click-on the Web Site tab at the top of your screen.
Then click-on the Navigation button at the bottom of the screen.
When you see your web site organization chart, double-click quickly on your home page at the top of the chart. As before, this will take you to the Design view and your home page. When we apply a theme to our web site, we will be able to see each theme as we apply it to our home page.
Now, click-on Format in the Menu bar and then click-on Theme.
When you click-on Themes a Theme Task Pane will appear on the right side of you screen (similar to the one on the left). When it first appears, you will notice that the default is blank (No Theme).
To view the Theme choices you’ll need to use the elevator bar on the right side of the Theme Task Pane (as shown by the Elevator Bar indicated above). When you do, you’ll notice that the first Theme choice, Afternoon, is at the top of the “list.”
Move down the list and view some, or all, of the choices. The first thing you notice is that they are hard to see, but this is not a problem. Move your cursor over the RIGHT side of one of the themes.
We chose the Axis theme. When we moved our cursor over the right side of the Axis theme we saw a down arrow in a blue background appear. We clicked-on the down arrow (see upper arrow at right), and a drop down menu appeared.
To see what this theme will look like, on our web site, we chose Apply as default theme (see lower arrow above).
Note: When we chose Apply as a default theme (above) this meant that our theme was applied to All of the pages in our web site. You can apply a different theme to each page, or one theme to all pages. You can select a totally different theme at any time you desire – page by page or all pages by using the choice menu above.