Computers in the Classroom: A Seminar for Teachers
June 4, 2004
Wayne C. Rush, Librarian
Caldwell, NJ Back to Home Page
If you can use Microsoft Word, then you can use FrontPage. Although the programs are very similar, FrontPage specializes in preparing a “web” for publication on the Internet.
First, let’s distinguish between a “web” and a “web page.” A “web” is a system of pages, in this case designed by FrontPage, that functions as a whole. In contrast, a “web-page” is a single page that serves as a part of the larger web. It takes more than one page to create a web.
This class is about creating not only web pages with FrontPage, but also webs. By the time you leave, I hope that you will have the “skills” necessary to create a web for educational purposes.
If the task of putting together a web seems daunting to you, please don’t worry. You can gradually add information and other pages to your web until it is finished, yet when it is finished think of your web as a living entity, which will function as a communicative tool for your students and parents. Unlike printed letters, memos, and word-processing documents, web sites can be dynamically changed and continually updated even after they’ve been published. You can add, delete, and modify text, pictures, and entire pages at any time.
The best way to get acquainted with FrontPage is through hands-on practice and trial and error. This tutorial will show you how easy it is to build webs every bit as sophisticated and attractive as a “professional site”. My personal site is the Grover Cleveland Middle School Library.
http://faculty.caldwell.edu/wrush
I. File Names
II. The Surface of FrontPage
A. HTML Editor Screen
B. Views Bar
C. Editor Views
D. Standard Toolbars
E. MS Word Functions
III. Creating a Web.
IV. The “Index” Page
A. Inserting Text
B. Backgrounds
V. Images: Using Pictures
VI. Link Types
A. Internal (bookmarks)
B. Other Web Pages
C. External
D. Using Images as Hyperlinks
Please be advised that the standard extension on a web document is file_name.htm or filename.html. Under no circumstances is your web document to contain spaces or weird symbols (i.e. * @ ! # $) when you name your files. If you do so, your file-server (the big machine in Technology Administration Office) will get very mad at you and tell you that your web page doesn’t work!
q Correct file name: homework_help.html
q Correct file name: homeworkhelp.html
q Incorrect file name: homework help.html
HTML stands for hypertext markup language
A. Below is the HTML editor: This is where you create your page.
B. Views Bar
On the left of the screen is the “Views Bar”. This bar is helpful when you are working on a web page that is made up of several linked HTML pages.
q Folders View – shows the folders and files that make up your website, similar to using Windows Explorer.
q Reports View – allows you to create reports on your web sites.
q Navigation View – shows you the links between pages and allows you to trace the path a surfer may take through your site.
q Hyperlinks View – displays the pages that have inbound links to the current document and the pages that the current document has links outbound to.
q Tasks View – is a to-do list for the web developer(s) working on the website.
FrontPage supports three different views or ways to look at your document:
1. Normal – This is the Default Editor view.
2. HTML – Displays the raw HTML code.
3. Preview – You cannot edit in the Preview view, it displays your page the way it will look in a browser.
You can switch between these three views using the icons in the bottom left corner of the editor screen.
D. Standard Toolbar
The Standard toolbar contains many basic commands similar to many word-processing programs, such as:
q New, Open, Save, Publish Web
q Folder List
q Print, Preview in browser, and Check spelling
q Cut, Copy, Paste and Format Painter
q Undo, Redo
q Insert Component, Insert Table and Insert Picture
q Create or Edit Hyperlink
q Refresh, and Stop
q Show / Hide marks
q Help
You can find other toolbars under the menu View and then Toolbars.
Bold, italics, underline, character formatting, and alignment are all the same as in Word. Using the Insert Menu and selecting Symbol, you can insert special Characters not found on the average keyboard.
F. Alignment
You can change the alignment of an element in FrontPage by (clicking) on the element you want to align and pressing one of the three alignment buttons on the Format toolbar.
Alignment usually means LEFT 
,
RIGHT 
,and
CENTER 
but,
it may also refer to TOP, BOTTOM, MIDDLE, etc. depending on the element you have
selected.
III. Creating a Web
When using FrontPage, the word “web” refers to the system of pages you have created that are intended to function together. In essence, the web you create, barring any errors, will be the web you see on the Internet.
Now, we will practice creating our first “web”. Please follow these steps:
1. Open FrontPage
2. Click “File”
3. Click “New”
4. Click “Web”
5. On right side of screen click “Empty Web”
6. Specify the location of the new web as- A:\workshop
7. Click “OK”
You can think of your “index” page as home base. Whenever a visitor logs onto your site, this is the first page that they will see. Type in the following:
Welcome to [insert your name here] Website
This website is here to keep you updated about what is happening in the classroom and in school. Take some time to explore this site and see what we are doing in the classroom! Make sure to check out the class news, calendar, and my favorite links.
Remember that the index page should always remain named as index.htm - never change the name. Manipulating text in FrontPage is the same as any ordinary word processor.
A. Inserting Background Color
Go to-
1. Format
2. Background
3. Page Properties will appear and you should be on the Background tab
4. Clicking on Background will give you a pull down menu allowing you to choose any standard color or custom color.
V. Images
A. How to Insert Images & Editing Picture Properties (alignment & wrapping)
1. Find the “Insert” menu at the top of the page and scroll down to “Picture”.
2. Take your arrow over and choose Clip Art and find a picture to insert.
E. Image/Picture Properties
To edit an image’s properties, select the image, right click on the image and choose “Picture Properties” from the pop up menu.
VI. Links
There are two major types of links we will be looking at:
Internal Links are links within a document. They help in the navigation of large documents.
External Links are links to Internet sites. External links are always the full URL.
A. Creating Internal Links (Bookmarks)
An Internal Link or “Bookmark” is a named location on a page that is the target of a hyperlink. These are usually used on pages that have a lot of text where you want to locate specific items from a different part of the page. To create a “Bookmark” follow these steps:
1. Select the word in the document you would like to create a link to by highlighting it. Locate the “Insert” menu and select the option “Bookmark”.
2. In the Bookmark Name field of the dialog box that appears, what was highlighted should appear there. Click on OK. FrontPage places a dotted underline beneath the text to indicate a Bookmark has been applied.
3. Next select the text that you would like to create a link to the bookmark. Make sure it is highlighted then go to the Insert Menu and select “Hyperlink” from the list of options.
4. An Insert Hyperlink window appears. On the right hand side choose Bookmark. Another window appears labeled Select Place in Document. Your Bookmark word(s) should be listed there. Select it and click OK.
B. Other Web Pages
1. To Hyperlink to other web pages in your site you must first have created that page to link to.
2. Create a new page and give it the title My Favorite Links.
3. Save the page and name it My Favorite Links.
4. Go back to your Index page and highlight the words My Favorite Links. Go to the Insert Menu and select “Hyperlink” from the list of options.
5. An Insert Hyperlink window appears. The saved page, My Favorite Links, should be listed in the window. Select it and click on OK.
F. Creating External Links
1. On your page, My Favorite Links, type in Grover Cleveland Middle School Library.
2. Highlight Grover Cleveland Middle School Library.
3. Go to the Insert Menu and select “Hyperlink” from the list of options.
4. An Insert Hyperlink window appears. Type in the complete URL address as follows:
http://faculty.caldwell.edu/wrush
5. Click on OK.
6. Notice that the words are now underlined and in blue. It is now hyperlinked to the Internet.
7. You can change the color of the links by highlighting the link and going to File menu. Select Properties and then the Background Tab. Choose you color here for your site.
G. Using Images as Links
You can turn any image into an internal or external link.
1. Click on the image (small black boxes should appear at the corners and edges). Go to the Insert menu to Hyperlink or just click on the icon of the world with a chain link in front.
2. Enter the URL you wish it to link to.
Make sure you save you work numerous times as you work.
THE END OF THE BASICS!