Developing a Home Page

Web sites are organized around a "home page," that acts as a point of entry into a group of Web pages in your site. In hierarchical organization, your home page sits at the top of the chart, and all pages in your Web site should contain a direct link back to that home page. The World Wide Web URL for your home page is the Web "address" you will use to point users to your Web site, and the address of your home page may be as important as your street address in the years to come. The top of your home page will be the first thing Web users see when accessing your site, so the proper design of home pages is crucial to the success of your site. Design strategies for home pages vary, based on the function and needs of typical users of the site, the esthetic and design goals for the site, and the nature and complexity of the organization of the Web site as a whole.

The home page can include various types of information. As you design your site, decide what information you would like to include on your home page:

1. A welcome to parents, students or others.

2. Introduction about yourself and/or the classes you teach.

3. Various images to add to the appeal of your site.

4. An e-mail link so individuals can contact you with a simple click.

5. Links to other pages designed by you. Possible other pages could include a link page, syllabus page, class schedule, notes, old test, quizzes, homework page, etc.

To get started, open FileMaker Home Page to create your home page. It is important to realize that this page will continue to evolve, not only during the two day training session, but as long as you continue to use it. It should reflect ongoing changes.
   
Helpful Tools
Menu Bar
 The menu bar contains everything you need to develop a Web page.
 
Tool Bar
 The tool bar is very important when using FileMaker Home Page. Watch the video for additional information about the tool bar. This information will become very helpful later in your training.
Tip: To quickly find out the name of a tool , place your cursor over the button, but don't click. The button's name appears in the Tool Status line to the right of the basic toolbar.
 
Help Menu
 The help menu is available at any time as one designs a Web page. The menu is arranged alphabetically and provides textual directions.
Text or Image Menus
Information

The most basic decision you will make about your home page layout concerns how heavily you will use images on the page. Most corporate, institutional, and educational home pages display at least a small image banner across the top of the home page, and in commercial sites the trend is rapidly moving toward menus constructed from complex, full-page images. While strong images can be effective at grabbing a browser's attention, large image menus impose long loading times for pages, especially for users connecting to the Internet via modems or slower network connections. Even if the user is accessing your Web site at ethernet speeds (10 Mbits/sec), graphic menus may still load ten times slower than text-based lists of links. Don't worry if you're confused by this information. You will learn more later in the training about images and downloading speeds. But first, let's begin by adding some text to your Web page.
Adding Text
Activity
 Open a blank FileMaker Home Page document
 
Activity

Earlier, each staff member developed a storyboard design for his/her Web site. Now start transferring these ideas to an actual Web page by typing your text onto the blank document. Typing text in FileMaker Home Page is very similar to any word processing program. While typing your text, experiment with it, making it larger, smaller, different colors, indented and aligned, just to become familiar with the text tools. The video provides information about typing text in FileMaker Home Page and the basics of the tool bar.

NOTE: Different fonts may be used, but they may not show up properly on all machines. It is important to know your audience. As a general rule it is good to use the default settings for text.

Add Links to Other Sites
Information
 One of the fun parts of designing your own Web site is linking to other sites around the world. Everyone who has accessed the Internet has used links. Every time you click on blue text and your browser takes you to a new Web page, you have used a link. As you designed your Web site on your storyboard, you probably listed sites on the Web to which you plan to link. This activity is to help you learn to create links.
     
Activity

Type the name of your school (Holton HS, Atchison HS, Washburn Univ. etc.). Then change that text into a link so that when clicked on in browser mode, it will take the viewer to the school's Web site.

  • Holton -- http://www.holton.k12.ks.us
  • Atchison -- http://www.atchison.k12.ks.us
  • Washburn -- http://www.washburn.edu

If your storyboard design included links to other pages, add these links now to your home page. You can also link to other Web pages you create and store in your folder. This will be explained later when you create your second Web page.
Save Work

Information

It is now time to save your work. There are several ways this can be done, but for this training you will save it on the hard drive of your computer in a folder called "Documents." Later you will be taught how to move this folder to the Web server and how to save directly onto the Web server.
Activity
 Save your work in the "Documents" folder. When asked to give a name to your document, title it "index" and click OK. Then you will need to locate the "Documents" folder within the dialog box and create your own folder (a new folder) in which to save your work. Once your new folder is ready and active, click SAVE. Notice when it's finally saved in the folder, FileMaker Home Page adds .html to the file name. For more information about saving, watch the video.
Previewing Your Work
Activity

Are you wondering how your site will look in Netscape or Explorer? FileMaker Home Page allows you to preview your site at anytime. When working on a Web page, it is important to view it in a browser to see how it will look to others when they access it. Different browsers affect the appearance of a Web page, so it really helps to preview a Web page by both the Netscape and the Explorer browsers. Also, Web pages designed by Windows computers and Macintosh computers will appear differently. You're currently viewing this training page through Netscape, so let's take a look at your site with Netscape. There are two ways to preview your Web site, each with its own advantages, and both can be found on the toolbar. Preview your page in Netscape now.

  • First preview your page using the preview page button located on the tool bar. This button converts your Web page into an actual working page as it would do in a browser.
  • This time preview your page using the Preview in Netscape/Explorer. Except for the address, this is what your page should look like.

Web Address
Information

In the previous activity, the address of your page did not appear while previewing it in Netscape. Until your page is actually placed on a Web server, only the computer you are currently using can view it. It is important to understand how a Web address works. This explanation has been divided into three parts:
Information
 Domain name.......http://www.holton.k12.ks.us
Information
 Folder and document names...... http://www.holton.k12.ks.us/hhs/ffa/ffa1.html
Information
 Importance of of using index.html (index.htm) when saving your main page...http://www.holton.k12.ks.us/index.html or http://www.holton.k12.ks.us
 
Information
 Still confused? This older video on Web addresses is a little longer, but it does a good job of explaining. The video refers to Webstar, which is the name of the Holton main computer (Domain Name).
 
Adding Images & Animations
Information
 Adding images adds to the appeal of your Web site, but working with images requires some basic knowledge. In this next activity, you will use FileMaker Home Page Clip Art Library to add images to your pages. Images and animations are treated exactly the same way. If you work with animations, you need to understand they will only "be animated" on the Web. While in edit mode they will appear as still images. Later in the training you will add images and animations from the Internet. Some of you may also have the opportunity to work with images from scanners and digital cameras.
 
Activity

Using FileMaker Home Page Clip Art Library, find at least one item and add the image to your Web page. The video will show you how to use the Library. The next activity on consolidation is very important for successful use of images.

NOTE:There are a few differences between typing in FileMaker Home Page and typing in a word processing program. You may have already discovered this when typing your text earlier. You may also now be having some problems with your graphics. Watch the video to learn more about these differences.

Consolidation
Information
 One of the big differences between a word processing document and a Web page is how images are saved. In a word processing document the image is saved within the document itself. The Web requires a different type of setup. For an image to work correctly in a browser, it must be stored on the Web server along with the Web page. Those who have inserted a video into HyperStudio or PowerPoint know that the video is NOT stored in the stack, but instead a link is placed in the stack to the video, which is stored in the folder. With Web page images, the image is assigned an address just like the Web page you design. For a more complete explanation, watch the video. The images you just selected from the Clip Art Library are still located on the hard drive of your computer. The next step is to move the graphics into a folder which will later be placed on the Web server. FileMaker Home Page has a button which will automatically copy the image from the hard drive to a folder which can be placed on the Web server. This process is called"Consolidation."  
     
Activity

Consolidate your home page. When you consolidate in FileMaker Home Page, a dialog box will appear asking "where do you want to store your images?" The default name "images" will also appear highlighted. Just leave the default name as it is and click OK. FileMaker Home Page will create a folder titled "Images" (inside the "Documents" folder) and will save your images into this "Images" folder. Save your page and find any graphic that is not currently located in the "Image" folder you just identified.

  • Note: if you attempt to consolidate before first saving your page, FileMaker Home Page will require you to save it before continuing with the consolidation.

Adding More Images & Animations
Information
 As stated earlier, adding images and animations helps with the appeal of your Web pages. Besides using the FileMaker Home Page Clip Art Library, there are several other ways to obtain images and animations for your Web pages. Probably the largest selection of images and animations can be found on the Internet. The next activity will have you locate an image and an animation on the Web, download it and place it on your Web page. It is important to understand the issues dealing with copyright when using images and animations from the Internet. Later in this training you will be asked to do an activity relating to copyright, but for now just consider the fact that you will be a model for your students.  

.  
Activity

Downloading an image and an animation from the Internet is as simple as "point and click." Locate an image that you would like to see on your home page and download the graphic to the "Image" folder found currently in your "Documents" folder. Then find an animation and download it to the "Image" folder. To help with your search, the following links are sites where free images and animations can be downloaded for your personal use. Place your mouse over the link and a pop up window will appear with the Web page listed.

Once you have an image and an animation in your "Image" folder, return to your home page and insert the graphic onto your page.
Downloading off the Web
Inserting Web Image

Add E-mail Link
Activity
 Some Web sites have a link where the user can click and an e-mail address appears making it easy to communicate with the person in charge. On your Web page, add an e-mail link which includes your e-mail address. It is important to note, however, that unless the browser on your current computer is set up correctly, e-mail address links will not work. They will only work on computers which have been properly set up.
Changing Background
Information As you surf the Web you may notice that many Web pages have different color backgrounds or images which serve as the background. FileMaker Home Page usually uses a gray or white background as a default color. You can change the color of your background or you can use a graphic as a background.
     
Activity
 Change the color of your background. Try different colors until you find one you like, but keep in mind that you want the page easy to read for your users. You don't want the color or background to detract. It is important to understand a little about "Documents Option" both in the tool bar and the menu bar. If you're not sure what color to use for a background, return to the training home page and revisit the "What Makes a Bad Web Page?"

 
Activity
 Now try using an image for the background. For the training, you need to insert an image from the FileMaker Home Page Library. For future reference, however, you can download a background (webbackgrounds.com ) or create one of your own.
   
Assigning a Name
Information
 Have you ever noticed how the browser displays the name of a site? You can assign a name for each Web page you develop.

 
Activity
 Assign a name to your page - something like "Mr. Smith's English Site."
Review - Save Again
Activity

Save/Consolidate your page again and preview it on the Web.

Review Videos

 Save
Preview

 

Download Time

Information

While at school, things move along fairly quickly when working on the ethernet network, but it is important to remember that connecting computers via modems (as most of the parents and students accessing your page from home will be doing) slows things down quite a bit. Therefore, how fast your page loads on their computer is very important.
   
Activity

Determine how long it will take for your current page to download on a 14.4 modem and a 28.8 modem. How long is too long? That is really up to you, but consider YOUR patience level when waiting for a page to load. A good rule of thumb is somewhere around 30 to 60 seconds.
You now have your first completed Web page!! Now we move on to creating your Web site.