Web Site Creation: 
    Microsoft FrontPage Tutorial     
8th grade wrestling example

.

 INTRO  and ORGANIZATION: To help you learn the use of the web editor Microsoft FrontPage, you will recreate the 8th grade wrestling web site example. Follow the link at the top of this page to go to the site as often as you need to  look at how the pages are designed. You will create several pages: 1) banner page, 2) navigation page, 3) Home page, 4) coach's page, 5) schedule  page, 6) candids page, and 7) a frame page that will display all the other pages. To begin, in your student folder, create a new folder (right click then  New - folder). Name it as your topic.  i.e., 8th GradeWrestlingWeb.  Save all files pertaining to the web site to this folder. This includes all graphics, pictures and pages-- all files  that are used for building the 8th grade wrestling site.

BANNER GRAPHIC:
Next you'll create the banner graphic. Open the Yearbook web page, right click on the banner and choose Save Image As.  Save the banner to the web site folder.

Open the banner in Adobe Photo Deluxe. You'll need to erase Yearbook from the banner so here's how to do that.  Choose Advanced from the far left menu. From Tools choose Eraser. Use the eraser to erase the word Yearbook from the banner. Next, to save the file, you need to change the file format. Go to File- Send To- File Format - JPEG- Save As JPEG. Save the new banner as your topic's namebanner. i.e., 8thGradeWrestlingbanner.  Always save in this manner in Adobe Photo Deluxe.

With the banner open, add text to the location where the word "Yearbook" was. Click on the T  in menu and choose Times New Roman font. Type in the topic( 8th Grade Wrestling in this case) and locate and resize the text to fill the title area. Save the banner using SEND TO - FILE FORMAT - JPEG- Save As JPEG. Close Photo Deluxe.

BANNER PAGE: To create the banner page, open Front Page. File - New - Page. From the right hand side menu, choose Blank Page. Next, save this blank page  file. File - Save As - name it topicbannerweb. i.e., 8thGradeWrestlingbannerWeb

 With the FP (FrontPage) file  8thGradeWrestlingbannerWeb open, choose Insert- Picture-From File and place the 8thGradeWrestlingbanner jpg at the top of the page. Center it. Save the page to your web folder. You've now created the banner page that has the banner jpeg centered at the top.

NAVIGATION PAGE: Open a new page, save it as navigation to the topic's webfolder. Insert a table with 1 column and as many rows as needed for links to your pages. Make the table 45 percent width and center justify it. Type in each row a hyperlink's name. For the sample  8th Grade Wrestling website, type in these links: Wrestling Home, candids, coach, schedule/record, West Home. One link per row. Save the page.

HOME PAGE: Open a new page, save it as Home Page to the 8th GradeWrestlingWeb folder. Copy the team pic from the 8th grade wrestling web example. Right click on the team picture and Save Image As to your topic's webfolder (8thGradeWrestlingWeb). To insert the team, have open the Home Page. Then Insert - Picture - From File.  Add the theme. Format - Theme - Blends

 

 

COACH'S PAGE: Open a new page, save it as Coach Page to the 8th GradeWrestlingWeb folder. Make sure all the pictures from the Coach's page at the 8th Grade Wrestling tutorital site have been copied to your 8th Grade Wrestling  webfolder. Create a table with 8 rows and 2 columns. You will need to MERGE  8 rows in column two: Drag across the 8 rows in column 2, choose Table - Merge Cells. The 8 cells have now become one cell.  Then insert the picture and caption, and align the caption. Turn off all table. borders.  Don't forget the Word Art. Add the theme: Format - Theme - Blends

SCHEDULE PAGE: Open a new page, save it as Schedule Page to the 8th GradeWrestlingWeb folder. Look at the Schedule/Record page at the 8th grade wrestling tutorial site.  You'll need to create this page. The Schedule/Record page is setup similar to the navigation page. It's only one table: approximately 8 rows and 2 columns; depending on the number of games.  Find any schedule at highschoolsports.net and put it in a table. Add the theme. Format - Theme - Blends

CANDIDS PAGE: Look at the 8th Grade Wrestling Candids page. Open a new page, save it as Candids Page to the 8th GradeWrestlingWeb folder. Collect all the pictures for the page by right clicking on each  picture and Save Image As to your topic's webfolder (8thGradeWrestlingWeb). To insert pictures, do this:  Insert - Picture - From File.  Then Add the theme. Format - Theme - Blends

Creating a table for 6 candids and captions:

1) Create a table with 4 rows and 3 columns. The 2nd and 4th rows are for captions.

 2) Center the table and give it a 80% width (Menu Table - Table Properties).
 
3) Insert pictures (Insert-Picture-From File) in cells Row 1,Column 1; Row 1, Column 2; Row 1,Colmn 3; Row 3,Column 1; Row 3, Column 2; Row 3, Column 3

 4) After inserting a picture, create a caption with the same width as the picture by inserting a 1 row/1 column table in the caption cell. It's called a nested table. Adjust its width and alignment (Table Properties) to be the same as the picture.

5) Turn off the borders on all the tables (set borders to 0). There are 7 tables. Click in each table then go to Tables - Table Properties.

6) With the Picture Toolbar turned on, improve the brightness of all the pictures Try other picture edits.

7) Add the theme. Format - Theme - Blends

FRAMES PAGE:  After all your pages are created, you'll need to create a frame page to place the pages in. Choose File - New - Page or Web. From the list on the right, choose Page Templates - Frames - Banner and Contents. It's the first option. Using "set initial page" place in top frame the banner page; place the navigation page in the left frame and the home page in the right frame. Save the frames page as 8thGradeWrestlingFramePage (topicFramePage).

HYPERLINKS: In the frame page, click on the navigation page to put it in the edit mode. Drag across a link, choose the hyperlink tool at the top of the page, navigate to the page you wish to link to, choose Main as the target frame, and click ok. Do this for all the links. To check the links, open up IE, File - new and look at the page in the browser. FrontPage does not support  previewing links. For the West Home, you'll need to enter the complete URL. Be sure to save your work.

 

8th grade wrestling example
Highlights Index
Personal Site Example