Creating Web Pages with Microsoft Front Page

Introduction

In this activity, we'll learn to use Microsoft FrontPage to help us design web pages. While FrontPage automates many of the processes needed to write HTML source documents, it unfortunately utilizes deprecated tags, attributes, and elements for many of the items related to presentation in a web page. Nonetheless, it can still be a valuable tool to help us build the shell of our XHTML documents, and introduce us to new tags and their syntax.
Microsoft FrontPage does a great job creating web pages but it isn't exactly WYSIWYG (What you see is what you get). To make sure your pages look correct, you'll want to use the display in browser button (it looks something like this display in browser icon ) often. The preview tab, near the bottom of FrontPage's window isn't as reliable as it could be to show how the page really looks in a browser.

Getting Started

  1. On your K: drive, inside your webprog folder, make a new folder named frontpage. Inside the frontpage folder, make a new subfolders named cartoon.
  2. Browse to our basic XHTML start-up file and View the Source code. Once Notepad opens with the source code for our start-up file, save a copy to your newly created frontpage folder on your K: drive and name this copy "index.htm". Then save a copy named "cartoon.htm" to the cartoon subfolder.
  3. Start Microsoft FrontPage. To do this, click Start -> All Programs -> Microsoft Office -> FrontPage. You will use the following three things to create your pages, the Menu Bar, the Tool Bar and the Text Editors. These are illustrated below.

FrontPage window controls

Ready to Begin?

Click on one of the areas to find out how to create/use the item.

Your Assignment

  1. Using a search engine like www.google.com, find 2 images, one large and one small, of your favorite cartoon character(s). Save them in your cartoon folder.
  2. In FrontPage, Open the index.htm file in your frontpage folder. This page will be like a table of contents to your cartoon page. Click on the HTML tab near the bottom of FrontPage's window, and give the page an appropriate <title> (my favorite cartoon), description, keywords, etc. Use the Normal tab to add a centered title "My Favorite Cartoon". Make it larger in size, colored, and in an unusual font.
  3. Click on the HTML tab near the bottom of FrontPage's window, and convert all deprecated tags and attributes to modern CSS styles.
  4. Add a paragraph (default font and regular sized text) that states that this page contains links to some things (pictures, text, and your opinion) related to your favorite cartoon.
  5. Use FrontPage's text icons to make an ordered list similar to the one shown below (with your favorite cartoon inserted). Once again, use the HTML View tab to convert all deprected tags to CSS styles for this list.
    1. My Favorite cartoon character is Batman.
      1. A big picture of Batman.
      2. A small picture of Batman.
      3. A description of Batman's cave.
      4. Why I like Batman.

  6. Next, open up the cartoon.htm file and modify the entries in its <head> to reflect the fact that this page has pictures and text about your favorite cartoon.
  7. Add a centered title to this page that states the cartoon whose image you downloaded earlier (something like "Batman"). Use FrontPage to make this title a different color and real large.
  8. Click on the HTML tab near the bottom of FrontPage's window, and convert all deprecated tags and attributes to modern CSS styles.
  9. Use FrontPage to add the larger image just below the centered title. Right click on the added image and select the picture properties menu item. On the General tab, be sure to enter some alternative text in the "Text" field (XHTML requires this). You'll need to enter this alternative text for every image you insert using FrontPage! Click on the HTML tab and see what the raw HTML for an image looks like. Try to make sense of each attribute and value.
  10. Using a search engine, find several paragraphs of text related to your favorite cartoon and paste them below the image. Try pasting in the Normal view first, if that fails, paste in the HTML View window. You'll need enough text to fill more than one browser window, so grab a lot.
  11. By looking at the earlier images raw HTML, try to insert the smaller picture of your favorite cartoon below the text you just added, by typing in the HTML yourself (in the HTML window, not the normal view window). You can ignore the width and height attributes for now. Click on the Normal View tab to see if the image shows up. If it doesn't, go back to the HTML View and try to fix it so the image will appear in the Normal View. If all else fails, use the Normal view to insert the smaller image.
  12. Add a paragraph describing why you like this cartoon, or what you like about this cartoon.
  13. You will now add "Bookmarks" to this cartoon.htm page, so that hyperlinks can jump directly to various spots within this file.
    1. In the Normal View window, highlight the first word of the paragraph about why (or what) you like about this cartoon. On the Menu Bar, click Insert and then select Bookmark. Give the bookmark a simple name that you will remember, and then click OK.
    2. In the HTML View window, look for the anchor tag <a> that was added for your bookmark. If you highlight something in the Normal View window, it sometimes appears highlighted in the HTML View window also. Unfortunately, the name attribute has been deprecated, and replaced with the id attribute. However, some browsers do not yet recognize the id attribute, so it's best to include both (with the same value). Add the text "id = sameWordAsNameIsSetEqualTo" to the opening anchor tag for your bookmark.
    3. Repeat steps (a) and (b) to add bookmarks to the large image (select it before clicking Insert and Bookmark), small image, and to the start of the downloaded text about your cartoon. See if you can't add the bookmark by typing the HTML directly using the HTML View for at least one of the bookmarks.
  14. Go back to your index.htm file in FrontPage (if it is still open, just click the tab corresponding to index.htm). We will add links from this file to the cartoon.htm file. Making a link to the "top" of another file works well in FrontPage. In the Normal View window, highlight the last word (your cartoon's name) in the first item of your list, and click on the hyperlink tool icon (hyperlink icon) on the toolbar. A window should appear that allows you to designate the file you wish to link to. Click on the cartoon.htm file as the linked to file (just click on cartoon.htm in the file list that is displayed, or click the browse to folder icon and navigate to cartoon.htm). Click OK. You should now have a relative link (no http:// or file:/// in the href attribute of your anchor tag (look at the <a> tag just inserted in the HTML View window to ensure that the href attribute is simple, something like cartoon/cartoon.htm).
  15. If you make a link point to a file, when the browser follows that link, it will open that file "at the top" of the web page. Sometimes you want to jump directly to a spot other than the top of a file. In order for this to happen, the file you are linking to must have a bookmark (named or ID anchor tag) in it, at the location you'd like to jump to. FrontPage has trouble creating a link to a bookmark in an open file, so we'll have to browse to cartoon.htm, rather than simply selecting it in the open-files list like we did above. From your index.htm file in Normal View, highlight the words "big picture" in the second item of your list. Click on the hyperlink tool icon. In the hyperlink pop-up window that appears, click on the icon that looks like a folder near the top right of the hyperlink pop-up window. In the open folder window that appears, navigate to your cartoon folder and select cartoon.htm as the file to link to. Press OK to get back to the hyperlink window. Click on the "Bookmarks" button and then select the named bookmark corresponding to the big picture in that file. Click OK to finish creating this link. If, when you click on the BookMark button, you get an error, close the error pop-up window, then simple add #bookmarkname to the end of the Address field, near the bottom of the hyper-link pop-up window and click OK. Take a look at the HTML used to reference a named anchor location (bookmark) in a different file (i.e. the code for the link you just created).
  16. In a similar fashion, add links that jump directly to the small picture, the downloaded text about your cartoon, and your reasons for liking your cartoon, from the index.htm file. Try to add one of these links by typing the HTML directly using the HTML View window.
  17. Add a link (at the bottom of the page) from the cartoon.htm file back to index.htm.
  18. View your index.htm file in a browser and make sure all of the links work properly. You may need to shrink the size of your Internet Explorer window, to make sure that the links to the bookmarks are jumping to the appropriate spots.
  19. To "turn in" your activity, go to Blackboard, and then the assignments section. Find the entry for this activity and click on the View/Complete link. In the comments text area, enter your name and the URL to your index.htm file. You can do this easily by opening Internet Explorer, and browsing to your file on www.central.edu/homepages/yourloginname (do not browse there via the K:\ drive). Once your base file (the one with the list, and links to pictures and text) appears in Internet Explorer, copy the URL in the browser's address field. That URL is what you need to add to the comments area of the assignment in blackboard. Do NOT attach any files. Since these files have images embedded, it isn't easy to attach them via Blackboard. Just give the URL to the index.htm file you created for this activity. As an example, I would enter http://www.central.edu/homepages/lintont/frontpage/index.htm in my comment field.