Pre_Activity 1: Getting Started

Create a Folder Called Yourname_web, in a location on your computer that is easily accessible

• This folder has been created already and can be found on your desktop, or in the Teacherwebs folder on the server.
• Open the folder and look inside, to view the file structure, but do not open any files by clicking on them.
• A recommended file structure inside the web would include folders for images, backgrounds, and respective unit folders Unit folders can contain any type of file, including word documents, and other image folders. (see example structure we are shooting for here)
• Caution, folder and file naming is important !!! All folders and all files inside the web folder should have filenames that contain only one word and which do not contain any odd symbols such as %$^#*%&% ! An underscore can be used to separate words, but no spaces. (Ex. poet_frost_1)
• Mac users need to add file extensions to all files. (Ex. poet_frost_1.doc if it is a Word Document)

Open the program Microsoft Frontpage (a web page editor)

• On the taskbar go to Start....Programs...Microsoft Frontpage.
• (Select the "Page" option on the left if it is not already, and verify that you are looking at a blank page)

A Frontpage help centre is available at the address below. http://help.earthlink.net/websupport/startersite/fp2000/index.html

If you have a high speed connection, click on the Multimedia Demo link near the bottom of the page.

http://microsoft.saltmine.com/frontpage/demo/

Site Creation

Activity 1: The first pages using Frontpage.

Begin Site By Using Standard Word Processing Skills

1. Type the following list onto the first line at the very top of your page,

  |  Welcome  |   Showcase   |   Links    |   Semester Plan   |  Calendar   |    Contacts  |

then press return about 5 times to set the font and size for the whole document and to leave space for inserting other things.

2.   Save your page right away.     Call it "index".   

• Press File.... Save As. 
• Go "up levels" until you are "Saving In"  the Desktop Location
• Double click the Folder icon to open the folder called Yourname_web.
• Save the page just inside the folder Yourname_web.

3.  Insert an appropriate graphic (A Large Text Title could be used.)

• Move the flashing cursor to the line just under the line of text you already typed.
• Press Insert....Image.  Another "select file" window will appear. 
• Find and double-click the Folder icon called Images, and find an appropriate graphic file inside according to its name.
• Press okay to see the image inserted.

  • The picture must be in either in JPEG (.jpg) or GIF (.gif) formats..

  The picture does not actually become part of the page, but is instead linked to it. So, if you move the picture's location later, you may have to redo this process to update the insert.

  The picture can be  resized and bordered by Right-clicking on the image, then by choosing Image Properties, then choosing the Page tab called Appearance.  However, this will not actually change the file size of the image, and could result in a blurred image when viewed.  Use Microsoft's Photoeditor to actually change the picture file size.

4. Insert and Alter a Text Title

• Place the cursor just under the picture and type the title Welcome To Our Class Site.
• Highlight title and change its size by using the Increase Text Size icon on the tool bar.
• RESAVE THE PAGE NOW.  (Try using the key board "Control...S"  !!!)

  • Notes:

  Use the default font or standard well-known fonts such as Times or Verdana, otherwise some computers may not be able to read your pages.

5.  Setting Global Page Properties  (Title, etc.)

• Right click on an empty spot of the page.
• Choose Page Properties.  (Or use File.....Page Properties.)
• Create a short, appropriate title which will work for all pages in your web site.
• Here is also where you may want to standardize things like background and text colour.
• (In some editors, this is where you can add Key Words and Descriptions.)

6. Creating and Saving all other pages.

• Highlight the title, delete it, then change it to "Showcase",
• Type 3 to 4 sentences explaining what sort of student work you might place on that page.  Be creative.  Yes, we will all be reading it later!
• Resave page as "showcase" (small letters) into the same folder as your index page.  (Mac users call it showcase.html)
• Repeat this process for all the other pages.

  • Only the welcome page has a name restriction and must be called index.html (Windows will automatically add a hidden .html, so just call it index.  A searching browser goes into the file and looks for the index page by default.

  Only the 5 or 6  principal pages need to be just inside the first Yourname_web folder.  This will make the URL or web address easier to remember.   The other pages can be inside their respective Unit Folders.
  
  
  

Using The Web Page Editor's Tools

Some Typical Html Web Page Editor Features

7. Inserting a Link (text and images can both be linked to other pages !)

• Close the page you are on then open the index page again.  File .... Open.   Double click on your index file.
• Highlight the word Welcome.   (Yes this will link the page to itself !??   Wait, you will see.)
• With the word highlighted, go up to Insert Hyperlink  (or use the little blue icon with the chain)
• --- >  A "Create Hyperlink" window opens with a space for a URL.   (a web address).
• Use the browse for file icon to Make a Hyperlink to a local file.
  

• Find the file index, and "select" it.  The text Welcome should now be blue:
• |  Welcome  |   Showcase   |    Links   |   Semester Plan   |  Calendar    |   Contacts  |
• Repeat this process for the words Showcase, selecting the file "showcase", etc......

8. Copying and Pasting Linked Items.

The linked line should look like this:

| Welcome | Showcase | Links | Semester Plan | Calendar | Contacts |

This line must now be copied and placed on top of all other principal pages.

• Highlight the whole linked line.
• Press Edit.... Copy.
• Carefully open your pages one at a time.
• Highlight the old unlinked line.
• Press Edit.... Paste.
• Resave each page.

To test your site, close frontpage and go and click on your index page which should open in the browser Internet Explorer.  Your links should work on your computer, just as they would on the web.

9.  Extras to try.

Change the background colour

• Right click on page.  Go to Page Properties...Then Background.  (Avoid using a light coloured text because it will not print.)
• You can also browse for a Background image but clicking that option then searching for an appropriate image in the backgrounds folder I provided.  Background images are small, repeated images that create a unified effect on the page.  They are difficult to make, but can be found free all over the net, or (taken) from other pages by right clicking on the page and choosing Save Background As. 

Insert a Link to a Person's Email Address

• Write your name, for example, then highlight it and press Insert Hyperlink.  Choose the little letter icon to "Make a Link that Sends Email"
• Write just the email address and press OK;  notice the link line reads mailto: [email protected]

Insert a Meta Tag

Right click on page, choose Page Properties, then Custom, then Add in User Variable section.  Add a  (user variable named)  "Description" for your page.  Add "Keywords" (separated by commas).

Insert a Table

• Put your cursor below the text on the calendar page.
• Go to Table... Insert Table
• Specify rows, columns, border (or none 0), width in percent of window (adjusting) or a pixel size (640isgood).
• You can even choose style change the background colour of only your table.
• Definitely, go into Style section and change the Text option so that the text Alignment is specified.
• You can later make changes by right-clicking anywhere inside your table and choosing Table Properties.

9.  Publishing.

To publish today,

Place your whole Yourname_web folder into the Teacher's Web Folder on the server.   When it asks you if you want to replace it with your newer version, say Yes.

To publish to the web,

Use an FTP program to connect to your server's FTP address.  (username and password required)

• Draw the old files over to replace the new files.
• When asked if you want to replace an older file with your new ones, say Yes or Yes to All.

Here is a link to a cute FTP tutorial I saved here (original can be found on their site at http://www.cuteftp.com (not at www.cute.ftp !!!)

 Here is a quick look at their interface: