Web Publishing An Introduction

Getting started

Click the Start button and choose Microsoft FrontPage from the Programs menu. The first time you use it, FrontPage opens with a blank web page called new_page_1.htm in the main pane ready for you to enter content. The left-hand pane contains tools for viewing your site in different ways. It starts with Page view. There is only one page is this site so far so the other views are not relevant.

If you wish to create a web site, do not enter text onto the first page but click File, New and choose One Page Website, under New Web Site on the task pane.

Choose Empty Web Site and specify the location and Web Site name.

In the text box on the right you must specify where you want the web created. At college type in A:\myweb. At home you can save it where you wish. Then click OK.

FrontPage will now create a web structure with a single page: a blank "home" page with the file name index.htm, and 2 sub-folders - one called images and one called _private. The home page will be open ready for you to enter content exactly as you did with the single page. To view the files and folders in your web, click View, Folders.. To view another page (when you have one) double-click on the file name in the Folder list on the left. Once pages are opened, you will see the tabs at the top of the Page View.

Enter some text eg

Hello World!

Welcome to the Website of Joe Bloggs!

etc etc

Simple text formatting

• Make the first line of text into a heading by clicking on the small triangle to the right of the Style box in the left-hand corner of the format toolbar. Select Heading 1. This is the largest heading.
• Centre the heading by clicking the Center button on the toolbar.
• Add a line underneath by choosing Horizontal Rule from the Insert menu.
• Make the rest of the text larger by highlighting it. Click the triangle next to the font size box  and choose size 4 from the drop down list. Centre this as well if you like.
• Change the font.
• Change the background and text colours. Select Background from the Format menu. In the dialog box, click on the triangle to the right of the Background box and choose a colour. Do the same with the text
• Make the heading a different colour from the rest of the text by highlighting it and clicking on the triangle to the right of the Font colour button on the right of the toolbar.

Viewing your page

There are 4 different views of each page. You have been working in the Design view. Now have a look at the HTML that FrontPage has created by clicking on the Code tab at the bottom of your page. Now click on the Preview tab. It won’t look very different from the Normal view. Return to Design. Theother view is Split - which allows you to see the code and the design.

You can also preview a page by viewing it offline in your browser. First you must save the page (see below). Then either go to File -->Preview in Browser or click the Preview in Browser button on the toolbar. (Keyboard shortcut F12). This will show you more accurately what the page would look like seen in this browser on this computer. You can view the HTML of a web page in your browser by selecting Source from the View menu in Internet Explorer. (In Netscape it is Page Source.)

Saving your pages

Click File, Save As to savew teh pages to the web site you have created. File names should NOT contain spaces. The extension .htm is added automatically by FrontPage. The Page Title is what will appear at the top of the browser window and in the users Favourites list, so ensure it is sensible and user friendly.

Closing pages and webs

When you have finished working on a page you will need to close it down by clicking on the X in the top right-hand corner of the page (not the whole screen) or using Close from the File menu. Or you can save the whole web then close the whole web from the File menu.

To close FrontPage choose Exit from the File menu. (If you have not already saved each page you will be prompted to do so.)

Opening a page

The New and Open buttons in FrontPage have down triangles on, which enable you to select a New Page or Web, or to Open a page or Web.  Click on the Open page or Web button on the toolbar and search for the file name in the usual way. . It will open in Folder view and you then need to double-click on a page to open it.

Adding pages

There are several different ways of doing this

• With a page open in the working area click on the New Page button on the toolbar. (If you are using a web template this page will have the same theme applied).
• Choosing New ->Page from the File menu. You will then get a dialog box allowing to select from different page templates (layouts).

Importing a page

If you have a "loose" page that you want to incorporate into your web, choose File -->Import, click the Add File button, search for the file in the Add File to Import List Box and click the Open button. Then click OK.

Deleting pages

Renaming pages

Go to Folder List view. Right click on the file name and type the new name.

Lists

Bulleted lists

Click the Bullets button on the toolbar. Type the first item then press Enter to create the next bullet. (Alternatively, you can type the list, highlight it and then click the Bullets button.)

To end the bullets press Enter twice.

Numbered lists

Follow the same procedure but using the Numbering button on the toolbar.

Nested lists

After you have pressed Enter at the end of an item, press the Increase Indent button twice. To return to the original bullets, press Enter and then Decrease Indent.

Definition lists

Click on the triangle to the right of the Style box and choose Defined Term. Type the term you want to define then press Enter and type the definition. Press Enter and type the next term etc. Notice the Definition is indented underneath the Defined Term.

Using templates

FrontPage comes with a number of pre-designed websites that only require you to enter your own words. The use of FrontPage web templates will not be covered in class. If you want to try using them at home, follow the instructions below.

To open up the Personal Web template, select New->Web from the File menu and click on Personal Web from the display of templates and wizards. Specify the location in the box on the right e.g. A:\personal and click OK. FrontPage now automatically creates a website with 5 pages and displays the home page. It will take quite a long time. N.B. The home page of a site will always have the filename index.htm.

An additional pane will now appear on the left showing the folders and files in the new web. If you click on Navigation in the Views pane a diagram of the navigation structure of the web will appear in the working area. You can change the position of pages by clicking and dragging.

Have a look at each page in the website. You can do this by double-clicking on the filename in the Folder pane or by holding down the CTRL button and clicking on the hyperlinks on the page itself.

Changing themes (Again we will not be covering this in class)

The template has a “theme” applied to it. To change it, choose Themes from the Format menu and select another one. Click OK. It will take several minutes.

Margins 

If you want your web to appear at the very top/left of the viewer’s browser, you need to change the margins in the Page Properties. Right click on the page and select Page Properties. Click the Advanced tab. Check the boxes to set the relevant margin(s) at 0. You can of course add values other than zero here if you want to.

Page margins – via the File menu and Page Set up.  These will only affect how the printed page will appear.  If you wish to print from your site, you should do so from within the browser, not from FrontPage.

Printing

You may wish to print out just a section of your page.  Again, preview in browser and highlight the text/object you require.  Click File, Print and select the option to print Selection under Page Range. 

There are two ways to print the HTML code: click the HTML tab at the bottom of the FrontPage screen and then print in the usual way.  Or in the browser, click View, Source and print from the File menu in the window that appears.

 Home | Top of page