Web Page Building
Instructional Notes for Microsoft FrontPage
 

To Create a New Blank Page
Click File, New, Page, Make your selection from templates or use Normal

First Time Setup
Click View from top menu, Toolbars, check the following: Standard, Formatting, Tables
Click Tools from top menu, Page Options, Compatibility Tab,
   Browsers should = Both Internet Explorer and Navigator, Click OK
*Note - this will remove the possibility of using Marquee from Components and some of the Dynamic HTML effects are gone from Format.  These are only possible when using Internet Explorer.
Click View from top menu, have Folder List unchecked.

Overview of the software:
Three views are always possible which are found from the tabs located at the bottom left of your screen.
Normal (use this for creating your web page)
HTML (use this to see the embedded coding, advanced users can add HTML to this area)
Preview (use this to preview your web page)
*Note - To preview my pages, I usually click on the Preview in Browser icon (located to the left of the spell checker icon). 
 To return to FrontPage, click on FrontPage button from your taskbar.
The hourglass in the bottom right of your screen represents the approx. time it will take your page to load.

To Save Your Web Page
Click File from top menu, Save As..., save to your "public_html folder (it is in your login folder (G drive).
Note- Everything must be saved to this folder "public_html"; images, pages, clipart, etc.
  Give it a file name  DO NOT USE SPACES in your file name.
   If you don't like the Page Title click on the Change button
    *Note - the page title is what appears on upper left corner when someone prints your web page.
     Click Save when finished

Enter key
When you press the Enter key it automatically adds the paragraph coding which inserts an extra line between your lines of text.  To prevent this, hold the Shift key down while pressing the Enter key.

Visit the following links to view some tables in use:

Visible Tables:

• Grant Info Page (Columns and rows)
• Session Registration page (Splitting cells)

Invisible Tables:
If you are using Netscape as your browser, visit the following sites, then click File, Edit Page.
This will place you into composer mode where you can see the invisible tables.

• TEEN Homepage (a way to divide your working area)
• Yahoo (Most websites use invisible tables)

To Add A Table
Click the Insert Table icon, highlight the number of rows and columns you want to use, then Click

To Delete A Table
Highlight all the cells by dragging your mouse across them
  Right click on the table
    Click on Delete cells

To Make A Table Invisible
Right click on the table
  Table Properties
    Change Border size to 0.  (A dotted frame will now appear on your page.)

To Edit A Table
  Right click on your table in the cell you are trying to edit
    From here you can: Insert rows & columns, split cells, go to Table properties or Cell properties
*Note -  Many of the editing features can also be found on the Table Toolbar (click on your table to activate this toolbar).  If the feature you are trying to do does not show up when you right click on the table, first highlight the cells you are wanting to change.  If the Table toolbar is still not visible, click View from the top menu, highlight Toolbars and make sure Tables is checked.

Hold the mouse on top of each icon from this toolbar while in FrontPage to see what each can do.

To add Color to Cells
Highlight the cells you want to change 
  Click on the Color bucket from the Table toolbar

To Change the Padding/Spacing Between Cells & Width of Border
Right click on the table
   Left click on Table properties
     Cell Padding (the space between the contents of the cell and the inside border)
             

     Cell Spacing (the space between the cell and the outside border)

     Border Size (the width of the border)

To Create Columns With Different Sizes
   Create your table, then position your mouse over the column lines, click and drag

To Create Same Size Columns
Highlight the cells
  Right click on the cells
    Click Distribute Columns Evenly

To Move Text From One Cell To Another
  (This is especially useful when you have inserted another row and need to reposition your text)
  Highlight your text, then click on that highlighted text and drag and drop into its new position.

To Copy an Entire Table
  Highlight at least one line before your table begins, drag your mouse down and include at least one line after your table ends.
   Click Edit from the top menu, Copy
       Reposition your cursor so that it is on the page where you would like to have a copy of this table.
          Click Edit from the top menu, Paste

Other:
If your table will not center itself on your page by using the Center icon, do the following:
   Right click on your table
     Left click Table properties
       Make sure Layout Alignment equals Center

If your table will not react to the icons you are clicking, it is sometimes necessary to delete the table and begin again.

Links
To Create A Link
Type whatever text you want to appear on the screen.
  Highlight that text
    Click on the Hyperlink button
      From here you have 5 choices of links to make:
      1) you can type in the URL if you already know it
      2) you can select the first icon to the right of the URL box to make your browser go to that web site
           Once you get to that site, simply click back on your FrontPage button from your Taskbar to
           find that the link has already been added to the URL location.
      3) you can select the 2nd icon to the right of the URL box to select a supporting page that you have
          already created for your web site.
      4) you can select the 3rd icon to the right of the URL box to create an e-mail me link
      5) you can select the 4th icon to the right of the URL box to create a new blank page

To Remove A Link
Right click on that link, Select Hyperlink Properties,  Delete all the information in the URL box, OK.

To Change Link Color
Right click on your page, Select Page Properties, Click on the Background Tab, choose color for hyperlinks.

Use A Picture As A Link
Insert your picture onto your page (Insert, Picture, From File)
   Click on your picture, then click on the Hyperlink button
     Select the file or URL you want to link to.

Pictures
Saving Pictures from the Internet
Right click on any picture you find on the Internet
  Select View Image
    Right click again on that picture
      Select Save Image As...   give it a file name and save it into the SAME folder as your web page!
*Note - Do not use spaces in your file names and do save everything into the SAME folder.

Adding Pictures With File Names To Your Page
Position the cursor where you want the picture on the page
  Click the Insert Picture From File button
    Select your picture from the appropriate folder, then click OK 

Adding Pictures From Microsoft Clip Art Gallery
Position the cursor where you want the picture on the page
   Click Insert from the top menu, Picture, Clip Art, Make your selection
     click the Insert clip icon, size your picture
       Right click on the picture, picture properties, select the GIF radio button, click OK
*Note - the next time you save your web page, it will give you opportunity to rename this clip art
   If the file extension is not gif, then change it to .gif  (mypicture.gif)

Adding WordArt (from PowerPoint)    Launch PowerPoint  Use a Blank presentation and a blank Autolayout   Insert, Picture, WordArt    Create your WordArt design    Once created, make sure you still have handles on your design, then click Edit, Copy     Return to FrontPage, position your cursor on the page, then click Edit, Paste *Note - the next time you save your web page, it will give you opportunity to rename this WordArt.    If the file extension is not gif, then change it to .gif  (mywordart.gif)

Adding Alternative Text to Pictures (Hold your mouse over the WordArt picture above for example)
Insert your picture onto your page (Insert, Picture, From File)
 Right click on your picture once it is on the screen
   Picture Properties
     In the Alternative Representations box, type in your choice of text.
     

To Edit Pictures
Click on your picture, this should automatically bring up the Picture Toolbar

Your pictures can be:
1) Rotated and flipped
2) Brightness and contrast adjusted
3) Cropped - To crop, click on the picture, click on the crop tool, outline the portion of the picture you want to keep, then click on the crop tool again.
4) Set to transparent color  - To set to transparent color, click on your picture, click on the Set to Transparent color icon, click on the area (color) that you want to become transparent.  This color will take on the color of whatever you have set for your background color of your web page.
To Remove Transparent color, right click on your picture, picture properties, remove the check by transparent.
5) Text can be added over your picture - To add text, click on your picture, click on the Text icon (the upper case A), type in your text. *Note - this feature does not always work once published.
To Remove Text, click on your text, then press the delete key on your keyboard.
6) Set to black and white using the Black and White icon
    (Use the Undo button to change it back.)

7) Set to a watermark using the Wash Out icon

     (Use the Undo button to change it back.)

8) Buttonized using the Bevel icon (Use the Undo button to change it back.)

9) Resampled using the Resample icon
(Resampling a picture reduces the file size of the picture.  Even though you drag the corners of a large picture and make it appear smaller on the screen, it still retains the larger file size.  To Resample, resize your picture, click on the Resample icon.)
10) Imaged Mapped (Image mapping divides a picture into invisible segments called Hot spots that can have links embedded underneath.  Notice what happens when you click on the 5 different stars from the following picture.)

To Set the Image Map
Click on your picture
  Select from your choice of a Rectangular, Circular, or Polygonal Hotspots
    Drag the area on your image you want to be clickable
       Follow the instructions above for creating Links
         Repeat for as many hotspots you want to make on your picture

Aligning Pictures With Text
It is usually best to place pictures and text inside of invisible tables.  It is possible to do some aligning by right clicking on your picture, select Picture Properties. Then from the Appearance tab make your selection from the Alignment window.

Specifying the Size and Border of Your Pictures
 Right click on your picture
   Picture Properties
     Click on the Appearance Tab
        You can alter the Border size and the size of your picture
  *Note - sometimes a picture used as a link will have a blue/purple border around it, if you do not want this border, change the border size to zero.

Horizontal Lines
To Add Horizontal Lines
  Click on Insert from the top menu, select Horizontal Line
To Edit Horizontal Lines
  Right click on your horizontal line
 

Horizontal Bars
A way to create horizontal bars on your page is to create an invisible table 1 row by however many columns of color you would like.  Right click in each cell to change the color, and from the Table tab mark the border size as 0.  Remember to press the spacebar in each cell so that the table will appear in browser mode.
 

Page Appearance

Right click on any blank area of your web page
  Select Page Properties
    From the Background Tab you can:
     Choose an image to use as a background for your web page
     Choose different colors for your links
     Choose a background color

Themes
The following will work even with single pages not inside of a complete web:
Headings, Bullets, Link colors, Backgrounds, & Horizontal Lines.
The following are added to the list when inside of a web:
Navigation bar, Banner, Buttons

To Add Theme
Click on Format from the top menu
  Theme
     Choose your Theme (make sure Background picture is checked) then click OK

To Remove or Change Theme
Click on Format from the top menu
   Theme
     Choose No Theme, or choose another design, then click OK

Targets/Bookmarks

Targets or Bookmarks are links within your own web page.  The table above uses these to jump to a defined area of this web page.
To Set Targets/Bookmarks
  Highlight the first word of the text on the screen you want to use as your bookmark
    Click on Insert from the top menu
       Select Bookmark
         Click OK
           Your text will have a dotted line appear underneath it.  This will be the target of your link.
             Next, highlight the word or words you want to click on
               Click on the Hyperlink button
                  Click on the Optional Bookmark window and select the target you just made earlier
                     Click OK

Components
Click on Insert from the top menu, Component

Hit Counters * Only works on a web server with Microsoft Extensions
  Click on Insert from the top menu, Component, select Hit Counter
   Select your counter, OK

Hover Buttons 
  Click on Insert from the top menu, Component, select Hover Button
   Choose from All available options and remember to create your link
     *Note - when you publish your web page, you must also publish 2 additional files:
          fphoverclass and fphoverxclass
  To Edit Hover Buttons
   Double click on the hover button

Banner Ad Manager
  Click on Insert from the top menu, Component, select Banner Ad Manager
    Click on Add to select first picture, repeat until you have added all pictures for sequence
      Adjust width, height,  transition, timing, then click OK
     *Note - when you publish your web page, you must also publish 2 additional files:
          fprotate.class and fprotatx.class

Search Form * Only works on a web server with Microsoft Extensions

Dynamic HTML Effects
Example #1 Moving Text   Example #2 Moving Links
Example #3 Changing Pictures   Example #4 Changing Picture  Example #5 Pictures & Text
Page Load effect is possible for some objects (spiral, fly ins)
Mouse over effect is possible for others.  Watch what happens to the following picture when you place the mouse over the top of it.  This is an example of mouse over.

The pictures you are going to use must already have filenames and should already be saved into your webpage folder.  Insert your first picture onto your page. (Insert, Picture, From File)
   Click on your picture once it is on screen, then Click on Format from the top menu, Dynamic HTML Effects
      Pull down each small window and set up as follows:
       On = mouse over     Apply = Swap picture     Choose picture = (select your filename for 2nd picture)
*Note - remember to also publish the animate.js file to your web site.

Form Files *Note - form files will only work if published to the TEEN server not TEEN3.
Click here to receive instructions for mailto scripts.
  The THANKURL is not needed.  It is possible to add SUBJECT (for a subject line).
  To add your fields, click on Insert, Form, and then make your selections.
 

Webs Visit here for an example.
When creating a web, all of your pages are automatically linked to your home page.  The same background, links, theme, borders and navigation bars are added to each page.  There are many views to see your web.  The two you will use the most are Page and Navigation.  Make sure your View bar is present on screen by clicking on View from the top menu, and place a check beside Views Bar.  Also have your Folder list on screen by clicking on Folder list from the View menu.

To Begin A New Web
Click on File from the top menu
  New
   Web  (you can start with a one page web) OK
 

To Create Additional Pages
(You should be in Navigation view.)
  Click on File from the top menu
   New
    Page

To Add Theme
From Navigation View, double click on the Home icon.
  Click on Format from the top menu
    Theme
      Select your choice of theme, then click OK
        Apply theme?  Yes

To Add Shared Borders
(You must be in Page view.)
 Click on Format from the top menu
    Shared Borders
      Select your choice (you might try Top and Include Navigation Buttons, All pages), click OK
 

To Choose Navigation Bar Properties
(You must be in Page view.)
  Double click on the Home Page icon from Navigation view
   Double click on the place where it says "Edit the Properties..." or on any link or button showing up
     Select your choice (you might try Child pages under Home)
      check Horizontal (this will also give a Banner) or Vertical
      check Buttons or Text
      check Parent page & Home page, click OK

To Rename Page Titles
(You must be in Navigation View.)
   Right click on any page icon
     Rename
      Type in new text and then click outside of area when finished.

To Rename Filenames
  From the Folder List, right click on any filename 
   Rename
     (change the name from new_page_2.htm to your own choice of filename.htm)
       Click outside of area when finished.  

To Save A Web
  Double click on a filename from the Folder List
   File, Save
     Repeat for all your .htm files

To Open A Web
  File, Open Web, choose your desired webfolder #, click Open
   If a new file called new_page_1 appears, File, Close, then double click on index.htm from the folder list.

To Import Existing Files Into A New Web
File  New  Web
   Import Web Wizard, click OK
     Select From a source directory of files on a local computer
        Use the Browse button to select the current location of your web files
           OK, Next
              All Files will be included in your web unless you Exclude them
                 Next, Finish
                    From the Folder List (View, Folder List) right click on your homepage file and rename it
                    as index.html
                    From the Folder List drag any web page file and attach it to your homepage while in the Navigation view.
 

To Import Existing Files Into A Current Web
Open up your current web
   File, Import, Add File, Find the location of that file, OK
      From the Folder List drag that web page file and attach it to your homepage while in the Navigation view.