Using Microsoft FrontPage
From TechHelp
Contents |
[edit] Creating a Site and the Index Page
The first step in this process is to open your web design software, for this handout the pictures and steps reflect Microsoft FrontPage. Go to the Start Menu and select Microsoft FrontPage from the Program Menu. The program opens with a blank page to start with.
At this point a good habit to get into is saving the page right away. Going to File>Save and when the save menu comes up check to make sure that you are in a folder called My Webs, this is where FrontPage saves your information.
The first page that you create should be saved as index.htm.
Now that you have saved the page you should see a sidebar that says Folder List. You should see the file name index in the Folder List.
To help organize you site it is helpful to keep information in separate folders. The only file that shouldn't be in a folder is the index page.
To create a folder Move the cursor into the Folder List highlight the name that reads file:///C:/Documents and Settings/Obrient/My Documents/My Webs. Now right click and select New Folder and name your folder, keep the name in lower case without spaces. 
Note: To simulate a space in the name of a page or folder use a dash (-) or underscore (_).
You will want to create at least two folders one for images and one for pages. This will keep your information well organized and easy to find as you build your site. You should create folders this way within your site, creating folders for pages outside of FrontPage can create some confusion. Remember don’t move the index page outside of the site folder or into subfolders, this page should be kept at the top level of your files.
[edit] Creating the Index Page
Now you are ready to start adding content to the actual page. One helpful strategy to organize the page is to insert a table inside of the page. To do this go to Table>Insert>Table 
depending on the way you have decided to organize your page depends on how set up your table. When you are at the table menu screen there are some areas that are very important to the way your page will appear to your audience. The first thing to consider is the Size of the table. You probably want to have at least two rows and one column. The Layout of the table is up to you. Here is an overview of what each section in the table menu means.
- Rows- Specify the number of rows that you want to appear in your table. Note: It doesn't hurt to add an extra row.
- Columns- Specify the number of columns that you want to appear in your table.Note: It doesn't hurt to add an extra column.
- Alignment- Specify how you want the table to appear on the page. This is similar to right and left justify in a word processor.
- Border Size- Enter the size of the border that you want for your table. This is measured in pixels (a pixel is; the basic unit of the composition of an image on a display). When the border size is set to “0” you will see a dashed line that represents the edges of the table.
- Cell Padding is the amount of space between content inside of the cell and the cell wall (measured in pixels).
- Cell Spacing is the amount of space between each cell (measured in pixels).
- Specify Width- You will want to check this box and set the number to 100 with the in percent box checked. This allows you to design a page that changes size as the person viewing it changes the size of their browser window.
Once you have set your parameters for the table click OK. You can always come back and change the table if you don’t like the way it looks.
[edit] Adding Text
Adding text and changing text in FrontPage is similar to Word. The main concern when dealing with text is not entering it, but viewing it on the web. Most web browsers will read three typical fonts Arial, Times Roman, and Sans. You can use other fonts, but don’t rely on these fonts to appear on every computer.
A few things to keep in mind while you are typing your text is:
- make sure that your text color and background don’t conflict; otherwise people might not bother even looking at the site.
- The idea of point size and justify aren’t as concrete in web design, different screen sizes and different computers will change the way the page is seen.
- Hitting return creates a new paragraph. To make a new line of text use Shift>Return.
Don’t let these things scare you, the fix is not difficult and you will find that your eye becomes more critical as you develop your design skills.
[edit] Adding Images, Colors, and Backgrounds
[edit] Images
There are a variety of ways to insert a picture into Front Page, the easiest is to go to Insert>Picture>From File. Now you are brought to a menu that lets you select your file from a few different places. The best way to do this is to browse for a file on your computer 
, this allows you to look for your file on your hard drive and also reminds you to save the picture within your site folder, that way the link to the picture will never be broken.
Note: The next time you save a page you will be asked to Save Embedded Files, this refers to the picture(s) you have added. Make sure that the picture is saved in your web page image folder.
[edit] Background Image
You may want to have an image as a background. To do this you will want to go to File>Properties which opens the menu that deals with all of your pages properties. To add an image as your background you will want to select the Background tab at the top of the menu. 
Then you will want to check the Background picture box. This will now give you the ability to Browse for an image. When you click the browse button you will see a screen where you will browse for an image on your hard drive. Once you have the right image click OK. Now click OK on the page properties menu and you will see your image appear.
One thing to watch is the contrast between your background and your text, as this can be problematic to your audience.
[edit] Color Background
If you want to use a plain color instead of an image as a background you can do this easily in the page properties menu. Go to File>Properties to open the page properties menu. You will need to select the Background tab. Then the color section of the menu there to the left of the Background section there will be an pull down menu simply click on the arrow which will bring up a selection of colors for you to choose from. If you don't see the color you want there select more colors from the drop down menu. This will open up a color picker with a selection of colors for you to choose from.
Once you have a color that you like simply click OK to apply the changes.
[edit] Creating Links with Text and Graphics
Links in a Web page are designed to point to specific places on the Internet or within your Web site. To insert links you will want to first highlight the text you are going to hyperlink then go to Insert>Hyperlink.
After you have done this you will see another screen that allows you to choose which file you will be linking. From this screen you have four options to create a link.
You can:
- Use your web browser to select a page.
- Make a hyperlink to a file on your computer (if you do this you will have to make sure that the file is included in your Web page folder before it is posted to the Internet).
- Make a hyperlink that sends email.
- Create a new page and link to that page.
Once you have selected the file that you are going to link to simply click OK and a hyperlink will be inserted. If you ever have to edit a link you will want to do the same steps as above to make your changes.
To insert a link that people would click on a picture instead of the actual text you would want to follow the same steps as above, but instead of highlighting the text you would highlight the picture.
[edit] Checking Links
Once you have your web page complete, which is a relative term. You will want to be able to post the page and make sure that the links work properly.
To check the links of your site the first thing that you want to do is open your index page. Once your page is open in FrontPage, then you need to look down the left-hand side of your screen, this sidebar is called views. Find the section that say reports and click on the icon.
The reports page will open and there will be a site summary that gives a complete overview of your site. There are different summaries that can be looked at. They vary from a site summary to broken links summary. To check broken links find the floating tool bar labeled reports and on the right hand side of the tool bar there will be an icon that looks like this 
. By clicking on this icon you will be asked whether you want to verify all of the links, or selected links. It is helpful to verify all of the links, this way you know if something has changed since you last updated your page. Once you click Start you will see that the Status column changes to show the status of each link. After the process is finished your page will look like this, but hopefully without any broken links.
Now that you know the status of the links you can begin repairing and, or eliminating the links.
Another helpful part of the Views sidebar is the Hyperlinks tab. This tab shows the way your website is structured. By clicking on this tab you will be shown a map of your entire site, this should look similar to the preplanning that you did.
[edit] Adding Tasks
One helpful button in the view side bar is the Task button. As you design pages and your site you may find that there is something you need to do next time you edit a page. By clicking on the Task button you can see the tasks that you have assigned. To assign a task you need to go to the Edit>Task>Add Task.
This will open up a menu where you can type the name of a task and a description of what is being done. When you create a task it will be associated with the page that you see in your screen. This is helpful for managing workflow.
[edit] Uploading Files to a web server
Posting Pages The last thing that you should have some familiarity with is posting a web site. The first thing that you need to have is the ability to post on a site. Each school district has its own policies as to who can post pages and the process that needs to be followed when posting pages. When contacting the person that would set this up it is helpful to have an understanding of what is going on.
Every web site is held on a server. When people access a site their computer is given a map to the server. Once the computer finds its way to the server it downloads the page, which is viewed by the person at the other end. Think of the server as the middleman for the web. You, by posting to the web, are the manufacturer and your audience is the consumer.
When you publish to the web there are many different ways this can be done. FrontPage itself can publish pages by going to the File>Publish to Web, this asks you for specific information in regards to your site. However the server that you are publishing to must be configured to accept FrontPage extensions (an extension is something added into the code of a page). Another option is to use FTP, which stands for File Transfer Protocol. This allows you to select files to transfer to the web.
There are many different FTP clients to upload your files. No matter what type of uploading software you use the process is pretty much the same. You are given access to the server and upload your page to the server. Each of these programs allows you to upload individual pages that have changed also.
In FrontPage this is done by going to the Reports tab, selecting Publish Status from the reporting menu. From there select the files that you don’t want to publish by using control>click (control>click allows you to select non contiguous files, using shift>click allows you to select contiguous items). Once you have selected the pages that you don’t want to publish right click on one of the selected items and select Properties from the shortcut menu. Now with the new window open select the Workgroup tab. At the very bottom of the menu is a check box that says Exclude this file when publishing the rest of the web, select the check box if you don’t want to publish this page.
When you get to this point of your project it would be beneficial to set up a time with the person that would approve you publishing the site and an Instructional Technology Specialist so that you understand the process of publishing.
