Creating a Web Page and Web Site Using Microsoft FrontPage 2003

8/8/2019 Creating a Web Page and Web Site Using Microsoft FrontPage 2003

http://slidepdf.com/reader/full/creating-a-web-page-and-web-site-using-microsoft-frontpage-2003 1/6

Creating a Web Page and Web Site Using Microsoft FrontPage 2003

1.Starting Microsoft FrontPage 2003

In this tutorial you’ll first create a single web page using Microsoft FrontPage

2003. Then, we’ll create a web site, which consists of multiple, linked web pages.

To open Front Page, go to Start, Programs, and then FrontPage. Click -on all

of the Titles in the Menu bar (like the one below) and familiarize yourself with whatthey do. You’ll notice that the major portion of your screen, below the Menu Bar and

Button Bars, is white. In the upper left corner of this white area you’ll see an image

like the one on figure 1 – new_page1.htm. This is like a new, default document in a

word processor, but it’s a default FrontPage webpage. Later, after we’ve begun creatingour web page, we’ll save the web page with a different name.

Figure 1 New_page_1

Go to the bottom of the window, on the left side, where you’ll find a toolbar which let

you select how you want to view your work (figure 2).

Figure 2 View modes

You can choose to view in design mode, split, code and you can preview your page by

clicking preview. By default, FrontPage lets you view your work in design mode. Youcan change your view mode to code, where you’ll see all the HTML codes of your web

page (figure 4 a). Or you can click Split mode, where the screen is divided into two parts.

The upper part shows design mode, while the lower part is the HTML codes (figure 5). Itis easier to do your work in design mode. But sometimes you may need to view its

HTML codes, to know what really is going on.



(a)

(b)Figure 4 (a) code view mode, (b) split mode view

2. Page title and adding Text

We’ll start this tutorial by placing a title on our web page. Your cursor should beflashing on the left-hand side of the white area. The upper left corner, above the white

area, should indicate: new_page_1.htm (figure 5).

Fugure 5 Flashing Cursor

First we’ll enter some text. Type something like: Your first name (’s) Home Page (e.g.



BEE4213 homepage) as shown in figure 6. Then tap the Enter key once. Notice, that

when you tapped the Enter key, that the cursor moved down two lines (double

spaced). This is just the way FrontPage 2003 works (it has to do with the web page programming called HTML). If you desire a single space between your text, simply

Hold Down the Shift key and, while you are holding down the Shift key, tap the Enter

key. You can edit your text by clicking Menu FormatFont, the same way as inMicrosoft Word 2003.

Figure 6 Entering text

When you save your home page, FrontPage will set the text you entered as the title of your home page. In this case, the title is “BEE 4213 homepage”.

4. Saving your web page

It’s wise to save your web page periodically so that you don’t loose your hardwork. First, click -on File in the Menu Bar and then click-on Save. Select the drive you

want to save your work. Then create a new folder, and give appropriate name for it. This

is where you will save your work.

You will need to give your web page a File name under which it will be saved.

Be careful here. FrontPage will try to use the title you enter in the File name: area. If your web page name is more than 8 characters long, some older computer systems andservers might not work well with the name. Also, the name should not have an

apostrophe (’) as this is a reserved Java character and could cause later problems as well.

So, create a logical name for your web page like in figure 7 – we used “index”. When youhave selected your drive and name, click-on Save.



Figure 7 Saving web page

Change your view mode to split. Take note of where the changes you’ve made is place in the code (Figure 8). The <title> BEE 4213 homepage </title> tag on line 6

indicates that “BEE 4213 homepage” is the title of your web page. Also the <p>BEE

4213 homepage</p> tag on line 11 indicate a paragraph has been created, containing

text.

Figure 8 HTML code





Viewing web pages in a browserSo far we have been working only in the Microsoft Page Design View. We have notreally seen how the web page will “really” look to the “world” in a browser. In thebutton bar, below the Menu bar, there is a button (see Figure 11) that will load our

web page in a browser (e.g. Microsoft Explorer, Netscape, etc).

Figure 11 Viewing web page in browser

Click-on the review in browser button. Or, you can click -on File in the Menu bar andthen click-on review 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. Microsoft Explorer browser will load inyour computer and your web page will appear. It will appear just like it would if someone

looked at it in their browser.

Documents

Creating a Web Page and Web Site Using Microsoft FrontPage 2003