Create a GAME PERFORMANCE Portfolio with Microsoft Word Planning A good place to start is “on paper”. Get a sheet of blank paper and just use a pencil to indicate where the content is going to be positioned on your webpage. Do this for the home page and then, on separate sheets of paper, for each of the other pages on your site. Then draw a large box around everything on your page.. this will become the “table” that holds everything. Inside the “table”, draw lines to indicate how the table will need to be divided into rows and columns to hold and position the content correctly. Refer to the “templates” to see how tables, rows and columns are constructed to hold the content on these pages. Creating the Webpage using MS Word: • Start by creating a folder on your USB Jump Drive to hold your website. Name the folder: game2 • As you create pages in the following tutorial, save them into this folder. • As you create content (word documents, PDFs, scanned images of documents and photographs, and video clips, etc.) make sure you save them INSIDE this folder BEFORE you create hyperlinks to them. o If desired, you can create a folder called, video, to hold just your videos. BUT… Make sure the video folder is INSIDE the game2 folder. Then when creating hyperlinks to the videos, make sure you use the “browse” method to choose the video file that’s inside the video folder to create the proper path from the webpage link to the video clip. • A NOTE ABOUT PICTURES INSERTED ONTO PAGES: You can save pictures that you are going to insert onto a webpage into this folder too. But, since pictures that are inserted into the pages will automatically be copied into a new folder that is created when you save the word document as a webpage, there’s no need to place these pictures inside the game2 folder since the “original pictures” will just use up unnecessary space on the server. Create your Home Page A. Open a new blank word document and switch to Web Layout View B. Setup the page layout using a table • Insert a 1 column, 2 row table • If you want your web page aligned to the left do nothing. But, if you want your web page centered in a web browser IMMEDIATELY select the upper left “move” box on the table then click on the Align to Center icon on the toolbar. • Warning: Do not drag the table to a new position on the page… this will not work when it becomes a web page. • If the table doesn’t “center” on the page using the Align to Center tool, you probably “moved” it prior to applying Align to Center. You will need to either undo to the point before you “moved” the table or start over from the beginning. Fix it now… you won’t be able to easily fix it later! • Create columns to hold the page title and your name. • Right click inside the top cell of the table and choose “split cell” • Choose 2 Columns, 1 row • Create columns to hold the menu, the descriptive text and a picture. • Right click inside the bottom cell of the table and choose “split cell” • Choose 3 Columns, 1 row • Now you can adjust the width of the cell (columns) in the top and bottom rows independently of each other. • Lock the width of the entire table to 8" so it will “fit” onto most computer monitors without need to pan the page to the right. • Right click anywhere inside the table and choose Table Properties • Check “Preferred Width” and type in 8”. Choose “Measure In: Inches” if it’s not already selected. Make sure it isn’t “Measure In: Percent” • Check to see if your table width is “locked” to 8” • Just resize the window holding your word document, make it narrower and see if your table changes width as the window gets smaller. If it doesn’t resize, it’s locked. If it gets narrower, it’s not locked and you need to redo the previous step again. C. Add “Banner” Text to top row • Type “Game Performance II” into the top left cell. • Type “Your Name” into the top right Cell. • If desired, align your name to the bottom right corner of the top right cell • Right click inside the top right cell • Choose “Cell Alignment” • Select the icon that shows the text aligned to the bottom right in the cell • Select the text and adjust the size and change the color of the text as desired • Select the column border between the left and right cell and slide it to the left against the Game Performance II text as shown in the template. D. Apply a background color to the “Banner” • Select both cells in the top row. • Right click on the selected cells. • Choose Borders and Shading. • Select the Shading tab. • Select a “Fill” Color. • Choose Apply to: “Cell” E. Create the site Navigation Menu • Inside the bottom left cell of the table type in Home. Hit the ENTER key to start a new line of text. • Under Home, type in Softball • Under Softball, type in the Competencies for that game. • Continue with all the skills. Refer to the template for games and competencies needed in your menu. • Change the font size, style and color as desired. • Warning: Stick to standard fonts… The only 100% safe fonts are Arial and Times New Roman. Keep in mind that if a font isn’t on the computer of the person viewing your website, the font will be changed to one of the fonts mentioned above. This could drastically change the appearance and layout of your web page. • Select the column border to the right of the menu cell and drag it to the left so it fits closely against the menu text without causing it to “wrap”. F. Create Navigation Menu Hyperlinks • Hyperlink the word Home to the home page • Select the Home text and right click on the selected text • Choose Hyperlink • Type index.htm into the address box. • Warning: This MUST be all lower-case letters. No capital letters or it won’t open they way it should after you upload it to the web server. • It’s good practice to always use all lower-case letters for all file names. Also, do not use spaces or any characters other than the underscore character. Use the “underscore” character instead of “spaces” • Hyperlink the Competency text links to their pages • Select one of the Competency text links and right click on the selected text • Choose Hyperlink • Type comp1softball.htm (or whatever Competency # and Game it links to) into the address box. • Repeat with the other Competency text links, changing the address links as needed. G. Add text to the center column cell and a picture in far right column cell in the second row. • Place the cursor inside one of the columns and either just type in text or choose “Insert > Picture” • NOTE: If you add pictures that are larger than the cell, the cell.. and table… will expand to hold the picture. If this happens, you need to select a corner “handle” on the picture and drag it toward the center of the picture to reduce its size until the table is 8” wide again. If you don’t do this, the web page may be wider than the screen can hold and require the viewer to scroll left/right to see all of your page’s information….not a good thing for websites! • Align the text or pictures within these cells as described above for aligning the Banner text within a cell. H. Save the page as a web page. • Choose SAVE AS • Make sure you SAVE IN: the game2 folder you created on your USB jump drive • Select SAVE AS TYPE: and choose Web Page, Filtered (*.htm; *.html) *** DO NOT SAVE AS A SINGLE FILE PAGE WEB (*.mht; *.mhtml)*** • Type index.htm in the File Name box. • Again this webpage filename should be all lower-case, no capital letters and it must match EXACTLY the filenames and extensions you used for the navigation menu hyperlinks. Create the Game Competency Pages. • Look at the Competency template example and create a basic layout using a table and cells for your competency pages. Set the width of the table to 8”. • For navigation to other pages within the site you can create a new row under the top banner row. • Merge/Split the cell as needed to hold the navigation. In the template, this rows has been split into 5 columns. Each column holds the Competency links to a different Game. • Create hyperlinks to the different Game’s Competency pages the same way you created links on the homepage. For example, the hyperlink to the Softball Competency 1 webpage could be to the file: softballcomp1.htm. • Remember to save your Competency pages with the same filename (remember “lower-case sensitive) as the filenames you used for the hyperlinks. • Add Text and Pictures inside cells • As with the homepage…If you add pictures that are too large for the cell, the cell.. and table… will expand to hold the picture. If this happens, you need to select a corner “handle” on the picture and drag it to reduce the size of the picture until the table is 8” wide again. If you don’t do this, the web page may be wider than the screen can hold and require the viewer to scroll left/right to see all of your page’s information.