FrontPage Tutorial
Click on a bullet to expand the topic's menu!
 |
Overview of Tutorial
| ||||||||||||||||||
|
Create a Page!
| ||||||||||||||||||
|
Navigation and Page Connection
| ||||||||||||||||||
|
FrontPage Components
| ||||||||||||||||||
|
Creating a Form
| ||||||||||||||||||
|
Dynamic HTML
| ||||||||||||||||||
|
Publishing Your Web
|
Front Page 2000
Tutorial and Reference Guide
γ
Monica Stoilov
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:
| Double click on My Computer |
| Double click on "C:" |
| Click on "My Documents" |
| Right click on a white section of the screen (a menu will pop up) |
| Select new folder |
| Type your name under the folder |
Now, you have set up a web folder of your own.
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.
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!
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 tables 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.
| By 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. |
| By 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. |
| By 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.
You can use text or images to create hyperlinks to other locations. There are 3 types of hyperlinks:
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).
***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.
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.
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.
|
| Transparent 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. |
|
| Absolute 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. |
|
| Rotation The rotation button allows you to turn your picture on 90 degree angles. |
|
| Contrast and Brightness The contrast and brightness buttons allow you to adjust these components when you select an image. |
|
| Crop 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. |
|
| Bevel 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. |
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.
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.
| Developing 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. |
| Developing 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
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 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.
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
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:
| Whether 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. |
| The speed of the marquee and the delay between starts. |
| The behaviour of the marquee scroll, slide or alternate from side to side. |
| How you would like the text aligned in the marquee box. |
| What size you would like the marquee box to be. |
| Whether you would like to continuously repeat the marquee or if you would like it to scroll in and stop. |
| The background colour for the marquee box. If you would like it to be transparent, select automatic. |
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.
A hover button interacts with a viewers 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!
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
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).
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.
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.
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.
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 fields 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.
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.
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.
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.
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.
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).
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.
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.
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.
