Click on a bullet to expand the topic's menu!

bullet

Overview of Tutorial
bullet

File Management

bullet

Knowing Your Options

bullet

What is FrontPage2000?

bullet

Views Toolbar

bullet

Create a Page!
bullet

Text and Tables

bullet

Backgrounds and Themes

bullet

Hyperlinks

bullet

Images and Clipart

bullet

Thumbnails

bullet

Image manipulation

bullet

Hotspots

bullet

Saving Your Web

bullet

Frames

bullet

Navigation and Page Connection
bullet

Shared Borders

bullet

Navigation Bars

bullet

Page Banners

bullet

FrontPage Components
bullet

Marquees

bullet

Hit Counter

bullet

Hover Buttons

bullet

Creating a Form
bullet

Search Page

bullet

Forms

bullet

One-line Text Box

bullet

Radio Button

bullet

Check Box

bullet

Scrolling Text Box

bullet

Drop-Down Menu

bullet

Form Properties

bullet

Confirmation Page

bullet

Dynamic HTML
bullet

Collapsible Outlines

bullet

Bookmarks

bullet

Text Effects

bullet

Image Effects

bullet

Page Effects

bullet

Publishing Your Web
bullet

FrontPage Extensions

bullet

Publishing to Ednet

Front Page 2000

Tutorial and Reference Guide

γ Monica Stoilov 

 

File Management:

To begin, an understanding of file systems is imperative for functionality in webs. If you look at your computer as a file cabinet with many "hanging folders" that contain "file folders", it will make the understanding of navigation of your web easier.

First, the file cabinet has drawers – on you computer the common ones are A: drive (for floppy disks), C: drive (located inside your computer), D: drive (usually CD ROM). Similarly, there are sometimes B: drive (additional floppy), E: drive (for DVD or CD ROM read/write) and network drives that can be called H:, Z:, or various other letters.

Second, you can store files and programs on these disks. These can be located either as a file right on C: (or inside the file cabinet drawer labeled C:) or in a folder (like a hanging folder in your file cabinet. It is good to keep your files neatly inside folders. In fact, you can put sub-folders within folders. For example, when developing a year plan in math, a folder called MATH is created. Inside that folder you could create sub-folders titled Unit 1, Unit 2, etc. FrontPage 2000 automatically sets up some folders in which you can save your webs.

To create a folder for your web:

bulletDouble click on My Computer
bulletDouble click on "C:"
bulletClick on "My Documents"
bulletRight click on a white section of the screen (a menu will pop up)
bulletSelect new folder
bulletType your name under the folder

Now, you have set up a web folder of your own.

Knowing your Options:

One of the least used tools in the Windows environment is the RIGHT CLICK on your mouse. By right clicking on a selected object or text, a menu will appear that gives you all the options available to that component. In web design, right clicking will save you valuable time and facilitate the learning of FrontPage.

What is FrontPage 2000?

FrontPage 2000 allows you to create web sites that can have numerous interconnected pages without having to learn Hypertext Markup Language (HTML). For example, your class web site might consist of a main index page, a homework page, a pictures page, a projects page, etc. FrontPage 2000 is a Microsoft product and has the same standard toolbars as Office (see image below).

 

What is the views section inside the program?

The Views toolbar shown on the left side of the screen is where you switch view of your web. Below is a table of the elements and an explanation of each.

View

Explanation

Page

Allows you to edit the current page

Folders

Allows you to organize files and folders of the open web

Reports

Displays status of files and hyperlinks of the open web

Navigation

Displays navigation structure of currently open web and allows you to add navigation buttons to your pages

Hyperlinks

Displays hyperlinks to and from each page in the open web.

Tasks

Displays list of tasks to be completed in the open web.

 

Since FrontPage is a graphically interfaced program that creates HTML documents (web pages), there is no need for you to know and learn HTML. However, there may be times when you either want to view or edit the HTML. This can be done by clicking on the HTML tab at the bottom of the screen. Additionally, you can preview your document as it will appear on the internet by clicking on the preview tab.

Creating a Page!

Text and Tables

Formatting text in FrontPage is exactly like Word. To format font style, size, colour and orientation, click on the appropriate buttons/boxes on your formatting toolbar.

Invisible tables have become the favoured way to efficiently use space in your web page. By creating tables (and tables within tables) there will be very little empty space in your web.

To insert a table into your web, click Table and select Insert table. A menu will appear that allows you to format the table. To create an invisible table, set the border size to 0 (zero). Cell padding is the distance between what you put in the cell and the cell walls. Cell spacing is the distance between cells. Experiment with these to find the spacing that you prefer. Make sure that you select 100% width so that the table spans the width of your page. Finally, select the columns and rows that you would like.

 

Below is a page that is being organized as a list of other pages available to the left and an empty space to the right. Note that you can adjust the column width after inserting the table. You can also choose to colour your table’s frame.

There are times when a standard table will not fit the purpose. To draw a non-standard table, click Table then Draw Table. Drag the drawing tool to create the outline of the table. Then, draw column and row lines as you need them. There is also an eraser tool for erroneous lines.

Formatting Backgrounds and Themes

You can choose to format your background in 3 different ways.

bulletBy choosing a colour from the colour palette. To do this, select Format then Background. A window will appear that allows you to perform various formatting to your web page. Click the down arrow to select a colour or you may choose More Colours to see the full spectrum.
bulletBy using a background picture. Keep in mind that a background picture is tiled. That is, it is repeated numerous times over the background. Some images are better as backgrounds than others. To do this, select Format then click in the box beside Background Picture. Click the Browse button to find the previously saved picture.
bulletBy using a theme from FrontPage. To do this, select Format then Theme. Select either apply to all pages or selected pages. Browse the themes and choose one to apply.

 

One more formatting point that should be discussed here is selecting the colours for hyperlinks. When using a theme, the hyperlinks are set to coordinate with the colour scheme. However, when using an image or a colour for the background, the standard colours for hyperlinks are: Hyperlink=blue, visited hyperlink=purple and active hyperlink=red. So, if you choose a blue background you would want to change the colour of your hyperlinks so that they do not blend into your background and cannot be seen. To do this, select Format then Background. You can set the colours of hyperlinks by clicking on the down arrow and select a compatible colour.

 

Creating Hyperlinks

You can use text or images to create hyperlinks to other locations. There are 3 types of hyperlinks:

  1. Hyperlink to a World Wide Web location
  2. Hyperlink to another page you have created
  3. Hyperlink to different places on the same page
  4. Hyperlink to an email address (this will only work if you have an email program on your computer -- remote email sites will not work)
  1. To hyperlink to a World Wide Web location select the text or image you want to be hyperlinked, click on the hyperlink button and enter the full address in the appropriate box (URL) when the window appears.
  2. To hyperlink to another page that you have created, select the text or image you want to be hyperlinked, click on the hyperlink button and select the page in the web shown.
  3. To hyperlink to different places on the same page place your cursor at the point in which you would like a bookmark or target. Select Insert then Bookmark. Choose a name for your bookmark. An icon will appear where you selected. Now, select the text or image at the top of your document that you want hyperlinked to this section of the page. Click on the hyperlink button and select the bookmark you want.
  4. You can also hyperlink to an email address by clicking on the envelope and entering in the target email address.

You may want the hyperlinked page to open up in a new window. To do this, simply click on the target frame button and select new window.

 

Finally, FrontPage can verify if your hyperlinks are accurate and working. To do this, click on the Reports button in the Views Toolbar. Right click on a white area of the table and choose Verify Hyperlinks from the menu that appears. Hyperlinks that are working will be reported as OK while broken ones will be reported as Broken (see below).

 

 

Adding Images and Clipart

***You should note that placing many images on your page will create a long load time and frustration for the viewer of your site.***

Inserting images

To insert an image, first place the cursor in the spot that you want the image to appear. Click Insert then Picture then From File. A window will appear that allows you to choose what kind of image you would like to insert. To insert clipart, click on the clipart button and select the image. To insert a previously saved picture, click on the file button and browse to find the image that you prefer. It is not recommended that your web page retrieve a graphic from another site. Keep in mind that graphics, just as text, are the property of the designer. Copyright rules also apply to images. You can resize the image by clicking once on it, placing your cursor over a corner until you see a two-way arrow and click and drag the picture to the desired size. Whenever you save your web page, FrontPage automatically embeds and saves all images associated with that page.

 

 

 

 

Thumbnails

Thumbnail images are small representations of larger pictures. This is a great way to create albums of images without causing a long load time. When you create a thumbnail image, FrontPage automatically creates a hyperlink between the thumbnail and a larger image. A viewer simply has to click on the thumbnail to see the larger image. It should be noted that the pictures must be in .jpg format for a thumbnail option to be displayed

To create a thumbnail of an image click on the picture to select it, on the picture toolbar that appears at the bottom of the screen, click on the auto thumbnail button . You will see the picture shrink in size. If you would like to display text when a viewers cursor moves over the clip, right click on the picture and select Picture Properties. Under the General tab, type what text (such as "click the thumbnail to view larger version") you would like to appear in the text box.

Image Manipulation

There are many things you can do to an image using a graphic manipulator. FrontPage has a basic set of tasks that can perform manipulations on images.

bulletTransparent Images – To make an image transparent, click on the image, then click on the transparent button on the image toolbar. A wand will appear that will allow you to select which colour you would like to make transparent. If the picture is not in .gif format, FrontPage will ask you if you would like to convert it to a .gif. Select OK. Now, click on the area that you would like to make transparent. The image will remain and the background will disappear. Keep in mind that there are many different shades of the same colour. You can only make one shade transparent, therefore, if the background has a number of shades, it will look splotchy.
bulletAbsolute Position – The absolute position button on the image toolbar allows you to place your image anywhere on your page without having to use tables to hold the position. When you select an image and click on this button, a 4-way arrow will appear allowing you to position your image anywhere on your page.
bulletRotation – The rotation button allows you to turn your picture on 90 degree angles.
bulletContrast and Brightness – The contrast and brightness buttons allow you to adjust these components when you select an image.
bulletCrop – The crop button allows you to cut out a selection of an image leaving only the part you want. Select your image, click on the crop button, resize the outline grid and click on the crop button AGAIN to cut.
bulletBevel – The bevel button is a great tool for making buttons on your page. Select an image and click on this button to make the image beveled.

 

bulletHotspots – Hotspots allow you to take a portion of a picture and make a hyperlink. There can be numerous hotspots on one image. To do this, simply select which shape you would like. A pen will appear which allows you to draw the area that you would like hyperlinked. Click and drag to select. When you release the click, a window will appear that allows you to type in either a web address or select a file to hyperlink. Continue in this manner until you have created all the hotspots that you would like.

Saving Your Web

To save your web either click on the save button or click File, Save. A window will appear that will ask you to choose the space on your computer that you would like to place your web. Select the space on your computer. Another window will appear that asks you if you would like FrontPage to save all the embedded files (images and such). Click OK.

Frames

Consistency is a desired feature in web sites. Leaving certain information (like your navigation menu) accessible at all times allows the user to jump from one area to another without ever having to hit a Back button. The hyperlink loads in a certain part of the frame while the other section remains constant. To do this, click File, New, Page. A window will appear that contains 2 tabs. Click on the Frames tab and choose the type of frame most appropriate to your purpose.

You can either develop your pages for each frame or you can begin with a frame page and add the pages as you go.

bulletDeveloping the pages first – To do this, create your pages keeping in mind the width of the frame that it will fit into. Open a new frames page and click the "set initial page" button in the frame. Choose the file which you would like displayed in the frame. Repeat in this manner until all frames have been filled with a web page.
bulletDeveloping the Frame first – To do this, open a new frames page described above. Click on the "new" button and begin editing your page. Repeat in this manner until all frames have been filled with a web page

Saving your frames page

Saving a frames page can be confusing. Usually, the first page in a web must be called index.htm (or html)(check with your service provider). Therefore the frames page must be saved as index.htm and your individual pages as some other names. Below is an example of a 3 frame page to be saved.

 

Frame Properties

By right clicking inside each frame, you can modify the frame properties. These include identifying the name of the web page to load inside the frame, the width of the frame and the width and height of margins in the page, formatting scrollbars and formatting borders of the frame. The page above does not have any borders so the frame blends together in the browser window. To do this, right click inside a frame and select frame properties. A window will appear that allows you to choose your settings for this frame. If you would like to format the borders to be invisible, click on the Frames Page button, click on the Frames tab and unclick the box beside show border. When hyperlinking your menu items remember to select which frame to load the page into (this can either be the main section of your frame page or a whole new window.

Navigation and Page Connections

Shared Borders

Another way to keep continuity within your site is to used shared borders. For example, you may want to include a menu of links to your other pages, an email address or navigation bars on every page of your site.

To do this, first create a page that has the constant item (such as a menu) contained in it. Then, click Format, Shared Borders. A window will appear that will allow you to choose which borders you would like to keep constant among your site. Choose the borders by clicking in the radio button – an example will appear. Click ok. Then, highlight your menu, cut and past it into your left border and create the constants in your other shared borders. Some examples for a bottom border would be a copyright, an email link or a date last revised. Some examples for a top border would be a title, graphic, picture (this is great if you like to theme your pages according to the season or holiday – one change and all the other borders change as well).

Navigation Bars

Navigation bars create links to your other pages using the theme you choose. These are particularly useful if you move pages to other folders or areas – FrontPage relinks them to the selected page. You must first link your pages together using the Navigation tool in the Views Toolbar. First, click on Navigation. You will see a list of files in your web inside the left hand frame and your index.htm as an icon in the right frame. To link your pages together, simply click and HOLD the file in the left hand frame and drag it over to the right frame until a dotted line appears linking it to your index page. Do this for all your other pages. Keep in mind how your pages are now connect to each other. Is there a parent page? Are all your other pages at the same level? To insert a navigation bar, click Insert then Navigation Bar. A menu will appear that asks you to choose which level navigation bar you would like and whether you would like the home and parent level included in the bar. Choose whether you would like the navigation bar to go horizontal across the top of the page or vertical down one side and whether you would like buttons or text for the elements of the navigation bar. The above visual has buttons for the vertical bar that is at the same level as the current page. Note that the name appearing on the button is the name of the page when saved (not the name of the file). You can change the name of the page from the Navigation on the Views Toolbar by simply selecting the page title that you would like to change and retyping a new name.

 

Page Banners

Inserting a page banner at this point is simply as you have just finished the difficult linking and renaming tasks. To insert a page banner, click Insert and then Page Banner. Select whether you would like the banner to be text or picture and type into the box the name you would like to appear as the banner.

 

Other Front Page Components

Marquee

To insert a marquee as a banner on your page click Insert, Component, Marquee. A window will appear that will allow you to format your marquee. First, type in the text string that you would like in your marquee. Then select:

bulletWhether you want the text to go to the left or to the right. In the English language it is better to select left as that is the way we read words.
bulletThe speed of the marquee and the delay between starts.
bulletThe behaviour of the marquee – scroll, slide or alternate from side to side.
bulletHow you would like the text aligned in the marquee box.
bulletWhat size you would like the marquee box to be.
bulletWhether you would like to continuously repeat the marquee or if you would like it to scroll in and stop.
bulletThe background colour for the marquee box. If you would like it to be transparent, select automatic.

Hit Counter

There will be a time that you wonder how many people are viewing your site. You can keep track of the activity on your web by placing a hit counter on it. To do this, click Insert, Component, Hit Counter. Select which type of counter you would like on your page and click OK. The component will not appear until you publish your page.

Hover Buttons

A hover button interacts with a viewer’s mouse actions. Buttons can glow, bevel out or make a sound on click. Place your cursor where you would like to insert a button. To insert a hover button, click Insert, Component, Hover Button. A window will appear that allows you to format the button. First, choose the text you would like to appear on the button. Next, either type in a www address or browse to select a file in your web. Next, choose a button colour and the effect that will happen on mouse-over. Next, choose the effect colour and the background colour. If you would like, you can specify the size of the button but it is easier to resize is after it is inserted. Finally, click OK. Repeat this process until you have inserted and linked all files.

 

Creating a Form

A form is a collection of interactive components called form fields. When you create a form it is a good idea to pre-design what the form will look like and the information you will be asking the user. There are various uses for forms – a search component for your page, an on-line test, an interactive WebQuest – the possibilities are unlimited!

Search Page

To create a search page open a new page. Format your colours, background and place any components like a page banner on the page. Then, select Insert, Component, Search form. A window will appear that will allow you to change the settings on your search form. If you would like to change the label of the form and the buttons on the form do so in the first tab. Click on the Search Results tab. It is here that you can have the FrontPage component display the results with date, file size, etc. Save your page. You can preview your search page but the component will not work until you publish your web.

Form Components

Inserting a Form

Depending on your purpose, there are various components that you can insert into your form. To insert a form into your page, select Insert, Form, Form. A box with a Search button and a Reset button will appear. Press Enter to insert a line and move up to that new line. If you would like a heading on your form format the first line – centered, font type and size – then press Enter to go to the next line. The next step is to add fields to your form. A field can be a one-line text box (good for short answers), a scrolling text box (good for long responses), a check box (generally for yes or no answers and might be a part of a group of responses where more than one answer can be submitted) and a radio button (which is most often used in a group where only one response can be selected).

One-line Text Box

To Insert a one-line text box select Insert, Form, One-line Text Box. A box will appear at the point where you placed your cursor. You can type instructions or an identifier beside the text box.

Radio Button

To insert a radio button select Radio Button from the same menu. Type the value of the button beside it. To associate that value with the button you must label it. To do this, select both the given name and the radio button. Click Insert, Form, Label and FrontPage connects the two. It is at times good to keep your buttons and boxes in an invisible table. This keeps them organized and in a stationary manner. Now, you must form a group for your radio buttons. To do this, right click on the radio button and select Form Field Properties from the menu. A window will appear that allows you to place a group name on your radio button. I have chosen "Subject" as the group of radio buttons pertain to various subjects. Click OK when done. Do the same for the other radio buttons that you insert.

Check Box

To insert a Check Box select Check Box from the same menu. Again, place the value of the check box beside the box. Right click on the check box and select Form Field Properties. A window will appear that allows you to set a name to your check box. The value set will be

ON. This means that if the box is checked by the viewer, it is ON or has been selected. Make sure that the Initial Status of the box is set to "Not checked". Click OK when you are done. Do this same procedure for each of the check boxes you insert.

 

Scrolling Text Box

To insert a scrolling text box into your form, choose Scrolling Text Box from the same menu. You can resize the box by dragging the corner and stretching it to desired size. Again, you should format your field’s properties. To do this, right click on the scrolling text box and choose Form Field Properties. In the window that appears give the field a name. You can choose to have an initial value placed in the field which will be deleted when the viewer starts typing.

 

Drop-Down Menu

To insert a drop-down menu place the cursor at the position you desire. Click Insert, Form, Drop-Down Menu. Double-click the drop-down menu field to open the drop-down menu properties window. Type a name for your drop down menu. Click the Add button. Type the items you would like in your drop down menu. You can set an initial instruction such as "Choose one". Continue adding values to your drop down menu and press the OK button when you are done.

Most of these components are used in the form on the page below. Keep in mind that you should always test your form for performance.

 

Form Properties

Finally, you will want to tell the form where to send the information collected. Right click on a blank area of your form. From the menu that appears, click Form Properties. A window will appear. The default to send the information will be a file named: _private/form_results.txt. This means that within your web space at Ednet there will be a folder called private and in that folder will be a file called form_results.txt. To view this file simply place the folder and filename after your address in a browser. You will notice that the information is not easily distinguishable. Each field is separated by a comma and all the information taken from the form blends together. A way to alleviate this is to save the information in htm format – maybe something like survey1.htm. The format of this type of file is easily read and organized in a line by line manner.

Creating a Confirmation Page

FrontPage automatically creates a confirmation page for the viewer. However, if you would like to customize your confirmation page follow these steps. Click the new page button to start a new page. Insert what you would like the viewer to see after they have submitted the form. If you would like the viewer to be able to see their submission, provide a link to the file that was created in the above section.

Dynamic HTML

Dynamic HTML allows you to add special effects to text, outlines and pictures. The effects are similar to Powerpoint. You can have words and graphics fly in and out of a page or change pictures when the viewer clicks on them or on mouse-over. The following component are easily done in FrontPage.

Collapsible Outlines

To create a collapsible outline start a new web page. Format your background. Type a Heading for your page. Start a bulleted list by clicking on the bullets button. Before you begin typing right click on the first bullet. Select List Properties from the menu that appears. A window will appear. Click on the bullets tab (if necessary). Click inside the Enable Collapsible Outlines AND Initially Collapsed check boxes and click OK. Now type your first heading in your outline and press ENTER. To create a sub-category under this heading, click the increase indent button twice. Now, type in your sub-categories and press ENTER after each one. When you are done, click the decrease indent button twice to begin another heading. Repeat this process until your outline is complete. Now preview your page by clicking on the preview tab. Click on the heading and the sub-categories should appear under each heading. Click again to collapse the list.

Bookmarks

You also have the option to hyperlink your sub-categories to a bookmark placed just before the actual part of your document. For instance, in long documents it is good practice to use bookmarks so the viewer can easily jump to the section that they need. To do this, place your cursor immediately before the sub-title or part of the document the viewer will jump to, then click Insert, Bookmark. Go back to your list, select the sub-category by highlighting it and click the hyperlink button . At the bottom of the window that appears, click the down arrow beside the bookmark section and choose which bookmark this sub-category text should be hyperlinked.

(see hyperlink illustration above).

Text Effects

To add special DHTML effects to your text select the text you would like to animate by highlighting it. Then, select Format, Dynamic HTML Effects. A toolbar will appear. Choose the event and the effect you desire. For instance, in the illustration below, the text will elastic from the bottom on page load. You can also have text appearance change on mouse-over. The sub-menu elements in the on-line version of this tutorial have a mouse-over text appearance change. Experiment with the settings to discover which one suits your purpose the best.

 

Image Effects

You can add DHTML effects to images on your page. Images can "fly in" on page load or swap images when a viewer moves the mouse over the image or clicks on it. To do this, select an image to animate. Select Format, Dynamic HTML Effects. When the toolbar appears, select the dynamic effects you would prefer.

 

Page Effects

Transitions, such as pages turning in a book or vertical blinds closing, add interesting effects as visitors enter or leave a selected page in your Web. This can be a fun way to display your web but use it with caution – too many effects tend to distract the viewer.

To add page effects, open the page you would like to animate. Select Format, Page Transition. A window will appear that allows you to select the event (page enter, page exit), and the effect that you would like applied when that event takes place. You can place an effect for each of the events listed.

Publishing your Web

To successfully upload your web with FrontPage Components to a server, the server must have Front Page Extensions installed on their computer. Sympatico does not support FrontPage components, however, Ednet does have FrontPage Extensions installed.

To upload your page, you first must have a login and password to the IMP mail system. This login name and password is exactly the same for your web space provided by Ednet. Next, click File and then Publish Web. A window will appear where you must type in the address of where your web will be stored. The address for your Ednet webspace will be http://hrsbstaff.ednet.ns.ca/username. For instance, mine would be:

http://hrsbstaff.ednet.ns.ca/mstoilov

Finally, click the Publish button to send your files to Ednet. FrontPage uploads all graphics, backgrounds, themes and files attached to your web.

Subwebs

There are times when you will want to create a space for your students to save their work into without having access to your web pages or folders. To do this, we create subwebs for each student.

  1. Click on the "folder list" button in FrontPage to view your folders.
  2. Right click on your web space address and select "new folder".

  1. Rename the folder to a student's name.
  2. Right click on the folder again and select "Convert to Web" for the menu that appears.  Sometimes, this takes several minutes to process -- BE PATIENT! A blue dot will appear on the folder when the conversion is done. You now have a subweb!

  1. One last setup process needs to be completed before the subweb is ready. Double click on the subweb to enter the space. Then, click on TOOLS -- SECURITY -- PERMISSIONS

  1. A window will appear with 2 tabs (settings & users). In the settings tab, you must select: "Use unique permissions for this web" or the students will need to know your password.  Here, you can select a password for them that they can change at a later time. Then, click APPLY.

  1. Finally, you need to set them up as a user of this web. First, click on the users tab. You should see hrsbstaff and yourself as having the ability to administer, author and browse.  Make sure that the "Everyone has the right to browse" is selected at the bottom. Then, add the student as a user by clicking on the add button. 

  1. Lastly, add the user, give him/her a password and give them rights to Administer, Author and Browse this web. Click okay, and you have set up your first subweb. Continue in this manner to create webs for each of your students.