Intermediate FrontPage
From TechHelp
Using Frontpage at an Intermediate level assumes that you have a site already and that you would like to add some more interactivity for your audience.
The following information needs to be edited
Now that you have created a basic design for your web page you want to add some bells and whistles. Depending on your audience, and goal of the site, this may differ from web site to web site. If the goal of a certain area of your page is information you may simply want to add organizational pieces to the site. If your goal is to have students listening and interacting with different elements within the site your goal may be more focused on how the content will be shown.
Contents |
[edit] Naming the Page
When you have a site each page should have a name. You would think that the name you give your page when you saved it would be enough, but unfortunately it isn’t. When people look at different pages within a site they may want to know what you titled the page. One way to do this in a web browser, without going to the top of the page, is to look at the title bar. Which will show the title of the page you have open.
If you don’t make this change it will show up with the default name.
To change the name of the page go to File>Properties. The Page Properties Menu will appear. Under the section titled Title type the name that you would like to appear in the menu bar.
[edit] Adding a Background Image and Background Color
Many sites use either a simply graphic or different colors for a background. No matter which you use keep in mind the contrast between the background and the text. Ask yourself the following questions, could a young child read this, and could an older person with difficulty reading look at your page? Keeping these questions in mind will help you design an appealing page.
[edit] Changing the Background Color
Simply changing the background color may be all you want to do to your page. Perhaps you want to use the colors to keep consistency between one section of your site and the other. To change the actual color the first thing you need to do is go to File>Properties. This will bring you to the Page Properties menu.
The different tabs relate to the page that you are working on. To change the page background color you want to select the Background Tab. This will bring you to the background menu.
The background menu gives you a lot of different options to work with. The section that deals with the background color is under the heading Colors. By selecting the dropdown menu labeled Background you will have a selection of colors like this. By selecting the More Colors… selection at the bottom of the menu you have a greater choice of colors. The colors for the web are called Hexadecimal Colors. This is why as you change the color you will notice that the section labeled Value changes. Keeping your colors within this range will make sure that most people who view your site will see the correct color.
[edit] Adding a Background Image
Adding a background image is very similar to changing the color of the page. You want to start in the same place by going to File>Properties. This will bring you to the Page Properties Menu. Select the Background Tab again. There is a section in the menu called Formatting. Under this section there is a checkbox labeled Background picture, make sure that this box is checked. The next thing that you have to do is select the picture for your background. One hint on this make sure that the picture file size is small, for example a file size of less than 150 KB would load on the web page quicker than a file of 300 KB. Keeping the size small helps people view your pages faster. To find the picture that you want click on the Browse button. This will take you to a screen that allows you to find the right picture. Once you have found the right picture click OK to select the picture then click OK again to see the page with the picture.
[edit] Changing the Font Color
Now that you have a picture in the background you may want to take a look at the font color and change it a little. When you are changing the font color you will be in the same area as the adding a background. So select File>Properties and take a look at the section labeled Colors. These will be the same colors as those that were available for the background. One thing to remember, if you have a hyperlink there are a few different colors to think about. The first is the color of a hyperlink. The default color is blue if you have a similar color background you should change the color of the link. Use the dropdown box to the right of the word hyperlink to select the color that you want. Another link color is for a visited link the color should be different enough from the regular hyperlink so that people will know that they have already been to that section of your page. To change the color click on the dropdown box to the right of the word visited link. The last type of link is the called an active hyperlink which means that the link has been selected by the viewer. To change the color of an active hyperlink click on the dropdown box to the right to choose a color. To change the entire color of the page from black to something else, click on the text dropdown box and select your color.
[edit] Adding Buttons, Marquees, Movies, and Sounds
[edit] Adding Sounds
Now we have a color scheme, so lets add some sound to the page. Perhaps you would want to add a song, or a voice recording of instructions. One thing to remember about sound is that the larger the file size, the longer it will take the sound to load. Adding a song is as easy as adding a hyperlink. The only thing you need to make sure of is that your sound file is inside your folder when you upload it to the web. To add a sound go to Insert > Hyperlink and then browse for your sound file. When you preview it in the browser it should play the sound inside of Windows Media Player.
[edit] Adding Movies
Now with the advent of high speed Internet the possibility to add movies to a web site has become easier for people to do. The same concept of file size applies to video as it does to sound and pictures. The larger the file size the longer it takes to load into a web page. Adding a movie is similar to adding a picture. The major difference is before adding the movie make sure that you have dragged it into your My Webs Folder from where you have it saved (this occurs outside of Frontpage). For example I have a file named movie-1 in the My Video folder in My Documents. To move this movie into the correct place for my web site I would take movie-1 copy the file by right clicking and selecting copy from the menu. Then I would open the My Webs folder and paste the copy of my movie there. Now when I go back into Frontpage I have to click the Refresh button and the file should appear in the Folder List side bar. Now that the file is inside of your web folder you are ready to add the video. There are three different ways to add a movie. The easiest and most reliable is to create a link to the file. For example I might type the title of the movie My Great Movie and then highlight the text. After this I would insert a hyperlink to the file, by choosing Insert>Hyperlink. At this point I would see a screen similar to this. I would then choose the movie file that I wanted to link. In this case it is the file titled movie-1.avi.
Another way to insert a movie into a page is to insert the movie as a component. This allows you to open the file within the page. To do this you would want to go Insert>Advanced>Plug-in. This will open an new window that looks like this . The section called Data Source is the area where your file name will be entered. You can click the browse folder to find the right file. The area that says Message for browsers without plug-in support is where you will want to tell your audience what they need to view your file. For example if I insert a QuickTime movie I have to make sure that people have QuickTime installed on the computer in order for them to view the movie. The area labeled Size is for you to specify the physical size of the file that you are inserting. For example a movie might be 640 x 480 in size, this is where you would put those values. The alignment allows you to choose how the plug-in is viewed in the page. Note: You can use plug-ins to add music files also, such as MP3s.
The final way to insert a video into your page is to go to Insert>Picture>Video…. You will be brought to a screen that shows the Folder List. At this point I would select my file named movie-1.avi, then when I click on OK the movie should appear in my web page. To see how your video will play in your web site open File>Preview in Browser your movie should begin playing when the page opens. If you want to change the way that a movie shows right click on the movie in Frontpage and select the Picture Properties option.
This will open another menu that looks like this. There are a few different options to change the way a video shows in the browser. By default the options you see here are selected. Under the Video Source area there is a box labeled Show controls in Browser, this will show the play and stop button in some web browsers. Under the Repeat menu there is an option called Loop. This causes the video to replay as many times as you would like. The last two options labeled On file open and On mouse over relate to the way the video begins to play. Keeping the On file open ensures that your video plays once the page opens. However be sure that the video is small enough to work quickly, otherwise people may not wait long enough to see the video. If you do have a long video you can create a hyperlink to it instead of displaying it in the page. You would do this just like adding a regular hyperlink.
[edit] Add Buttons
If you have some time and want to dress up your existing site with a little more color you can add rollover buttons that change as your audience moves over them with their mouse. The way a rollover button works is that two pictures are loaded on your page one on top of the other. These pictures have different functions assigned to each one. One appears first when someone opens the page. The other appears when the assigned action occurs, such as someone moves their mouse over the button. To insert this type of button you will want to place your cursor where you want the button to appear. Then go to Insert>Component>Hover Button this will bring up the following menu . This menu gives you all the different options to create a button right within Frontpage. In the area labeled Button text simply type the words that you want to appear on the button that you are creating. Where it says Link to you will want to add the URL of the web page that this button will go to. If you click the Browse button you can look for files or web pages the same way you would look for a hyperlink. You can change the way that your button appears by changing the button color, the effect (this is what happens when someone moves their mouse over the button), the effect color, and the size of the button. Once you have everything set click OK and see how your button turned out. If you aren’t satisfied with something simply select the button, you will see little handles when the button is selected, and right click. You will see this menu when you right click . Select the last option to edit your hover buttons properties. You can also create custom buttons by using images that you have created outside of Frontpage, though this can be a little work since you have to make sure that the images are the same size prior to using them. To do this you would click the Custom button at the lower right hand side of the Hover Button Properties menu. This would open another menu that looks like this . From here you would click the Browse button next to the button text area. This would be the picture that people would see when they first opened your page. Then you would have to browse for the picture that changes called the On hover button. Once you had done this you would click OK to return to the Hover button properties menu and click OK again.
[edit] Add Marquees
A Marquee might be useful on a web page if you want to have a welcome message, or a news type ticker on the page. Adding a marquee is very simple. Go to Insert>Component>Marquee this will open another menu that looks similar to this . Enter the text that you want to scroll across the screen in the Text area. Then choose the Direction that you want the marquee to come from. The speed of 90 and 6 gives you a smooth scrolling marquee, though you can change the speed if you would like. You can change the Behavior of the way the marquees scrolls. By choosing Scroll your text will start on one side scrolling to the other then reappear where it started. By choosing Slide the text will start from one side and slide to the other where it stops. If you want your text to bounce between the sides of your page you will want to choose Alternate which will have the text bounce from the left to the right side of the page. By changing the width of the marquee you can make the text act in different ways depending how long your string of text is and how wide you make the text area on the page. You can also choose to have the text scroll continuously for your audience. Once you have set the way you want the marquee to appear go ahead and click OK. If you want to edit the marquee select the text area and right click and select the Marquee Properties from the menu to change the way your marquee appears.
[edit] Inserting A Date
Something that also may be important to your viewers is when you last updated your site. There is nothing worse than going to a page looking for information, only to find out that it is outdated. By inserting an auto date you are showing your audience that you check to make sure they have the most current information. To insert an auto date place your cursor where you want the date to appear, usually either at the top or bottom of the page. Then go to Insert>Date and Time this will open a menu that looks like this . Choose the way you would like the date to appear and simply click OK. This will insert an auto date for you, now every time your page is updated your audience will know.
[edit] Site Management
Navigation Strategies- One thing that sketching out your web page design before you begin to develop helps with is deciding how to make it easy for people to navigate your page. Remember you have a worldwide audience out there when you publish something to the Internet, and there are a lot of different types of technology that they are using to see your web page. To help people see your pages and navigate them easily here are some things to consider. You may want to include a menu of your web site on every page. By keeping your pages consistent and including a menu it makes it easy for people to navigate your site for information.
Also there are times someone is going to follow a link to a page off of your site. If it is an interesting page, (hey it is off of your site isn’t it) they may spend some time there and want to get back to your page, but can’t find it! So how can you prevent this? One way is to have pages outside of your site open in a new window.
To do this you want to have your link selected and the Hyperlinks property menu open. To do this you can highlight the link you want to work with, then right click. This will open what is called a contextual menu that will look similar to this . Select the last option for Hyperlink Properties. You could also open the same menu by going to Insert>Hyperlink. This will open the menu to edit your hyperlink . Here you can change the way your link works. To have it open in a new window you will want to click the button next to the area labeled Target frame. This will open a menu that lets you control the way a link works.
This menu has five different selections. The two that are the most important when dealing with simple html pages are Page Default (none) and New Window. Page Default is the way that links will work normally. By selecting New Window from the menu you will change the way that your link works. Now the people that view your page will click on the link and a new browser window will open displaying the linked page. You may want to think about how this could affect your audience a bit before using it. This can be a double edged sword, since you may have viewers that loose themselves with more then one window open, as well as having viewers that would rather have the window open in a new window to prevent from having to use the back button. As with anything that has an audience you need to decide what will appeal to the majority of people using the site.
==Anchors== (in FrontPage known as bookmarks) An Anchor, bookmark, is used to help someone navigate a long single page. If you have a list of resources on a page that you have categorized you may want to have anchors on the page so people can jump right to where they want instead of having to scroll down, or up the page. For this example we want to show how this works. If simply hit return until you have a blank page in front of you we can see how this works. At the bottom of your web page you will want to simply type Bottom of the Page, remember this is just an example. Now we want to make it so that someone at the top of your page could simply jump to the bottom to see what it is you have to say. To do this, place your cursor in front of your Bottom of the page text. Now go Insert>Bookmark. This will bring up a menu that looks like this . You will want to enter a name for the bookmark that describes where it will go. You shouldn’t use spaces or special characters here as with the rest of your web files. Type the name of your bookmark and click OK. Now next to your text you should see an icon that looks like this . This icon will now act similar to a web page. Now you can link to this bookmark in your web site. So go back to the top of your page and select some text to link to the bookmark. Once you have your text selected go to Insert>Hyperlink this will open our hyperlink menu . At the bottom of the page under the Optional area of the menu you will see a selection named Bookmark click the arrow to the right of the menu an you will see the name of your bookmark, highlight the name to select it and then click OK. Now save your page and see how it works.
[edit] Checking Links, Creating Tasks, and Posting Pages
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. You will also want to be able to post your pages, and perhaps even keep track of tasks you need to finish. So lets start by checking the links.
[edit] Checking Links
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.
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.
The last View button that you may find valuable 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 menu>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] 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. A free download of WS-FTP, which allows you to do this, is available to educators and students at http://www.ftpplanet.com/downloadLE.asp. 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 noncontiguous 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.
