Create a GAME PERFORMANCE Portfolio with Microsoft Word

Transcription

1 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.

2 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.

3 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

4 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. Create links to documents or videos. You can create links to documents or video clips easily by creating a text link as you did for the site navigation menu. But, instead of typing in a webpage filename as you did for hyperlinks to webpages on the home page, just browse to the document or video file and choose it. IMPORTANT: Before you create hyperlinks to documents of videos, you must FIRST PLACE THE FILE INSIDE THE game2 FOLDER. You can t create hyperlinks to documents of videos that aren t inside the game2 folder the links won t work after you upload your website to the server. Creating links to other websites Same as with other hyperlinks except you type in the full URL, including the into the address window. SAVE as a Web Page Choose SAVE AS Make sure you SAVE IN: the game2 folder you created on your USB jump drive

5 Select SAVE AS TYPE: and choose Web Page, Filtered (*.htm; *.html) *** DO NOT SAVE AS A SINGLE FILE PAGE WEB (*.mht; *.mhtml)*** Type softballcomp1.htm (or whatever filename you used for the hyperlink to this page) into 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. Uploading your Website to the Kent Personal Server MAC USERS NOTE: As long as you're using a PC, all this will work but it won't work on a MAC. If you want to upload files from a MAC, you have to use FETCH or a similar MAC FTP program. FTP Logon to the Kent Personal Server: 1. Open "My Computer" 2. In the Address Type-in Box, enter ftp://mail.kent.edu/public_html. 3. When prompted, enter your Flashline user name. For example: If your kent is [email protected], the Flashline user name you should enter would be: jdoe 4. Enter your Flashline password. 5. Click the Logon button. HAVING TROUBLE LOGGING IN? If you are having trouble logging into the server, try changing the Address to just ftp://mail.kent.edu. If you can login now but can't see a folder in your IE browser window called public_html, then you have to create this folder. Just right click inside the My Computer window, select "new folder", then name it public_html. Sometimes the above won't even work. This might be because you need to change your password. Try that first. It could also be because Information Systems (the computer folks) haven't setup your web space on the server and/or given you permission to access this space. If you did the above and still couldn't login, then you will have to contact the IS Help Desk to have your web space on the server created and permissions set up for you. The IS Help Desk website and contact information is at

6 6. COPY AND PASTE or DRAG AND DROP your entire folder, game2 from your local computer to the open ftp window Check it out on the Web Now that you've moved your web pages or files to the server, you can view them on the web using Internet Explorer or any Web Browser. Type: into your browser address bar (Note: The above link won't work since it's made up) Making Changes to Webpages Open the original webpage using Word. Edit it. Remember to resave it as a filtered webpage. Login to the Server but instead of uploading the entire game2 folder: o Open the game2 folder on your jump drive so you can see the changed webpage file o Open the game2 folder on the server so you can see the old webpage file o Drag and drop the changed webpage file from your jump drive to the open server window. You will be asked if you want to over write the file. Answer yes. o Reopen your website in Internet Explorer and check to see if the change is there. Note: if you recently browsed to that page, you may have to hold the shift key down and press the refresh button on the browser to force the newly replaced page to open. New documents or videos added since the previous upload? o If you added links to documents or videos that you hadn t uploaded to the server before, you will also have to drag and drop them from the local machine to the server as well. Make sure they are in the same relative location as the original files. For example: If you put all your videos inside their own video folder inside the game2 folder, you will have to drag and drop any new videos from the video folder on the local machine into the video folder on the server.