Creating Classroom Websites Using Contribute By Macromedia

Transcription

1 Creating Classroom Websites Using Contribute By Macromedia Revised: 10/7/05 Creating Classroom Websites Page 1 of 22

2 Table of Contents Getting Started Creating a Connection to your Server Space.. Page 3 General Comments on Web Design Page 4 Basic Features and Their Meanings. Page 4 Creating your Index Page Choosing a Design.. Page 5 Your Website Navigation Menu.. Page 6 Changing your Navigation Titles. Page 6 Creating Links to New Pages... Page 7 Changing Page Colors.. Page 8 Formatting Appearance of Pages. Page 9 Inserting an Image Page 10 Inserting Important Links.. Page 11 Publishing Pages Publishing your Index Page.. Page 12 Publishing your other Main Pages Page 13 Organizing your Website Adding a Hit Counter to your Index Page Page 14 Editing your Policies Page Page 15 Editing your Policy Sub-Pages Page 15 Creating Lesson Plan Webpages in Word.. Page 16 Editing your Class/Lesson Plan Page.. Page 16 Editing your Links Page.. Page 17 Editing your Personal Information Page. Page 17 Editing your Photo Gallery Page. Page 18 Updating your Site.. Page 19 Changing any File into a PDF. Page 19 Solutions to Common Problems..... Page 20 Sites Worth Remembering.. Page 22 Revised: 10/7/05 Creating Classroom Websites Page 2 of 22

3 Creating a Connection to the Server Space Open Contribute 3 Click OK when you receive the error message. Click the green plus to maximize your window space. The space on the right is 800 pixels wide, showing you how most visitors to your site will be viewing the page. When using Contribute for the first time: Click CREATE CONNECTION Type the web address: You must type your login exactly as it appears on your Home Directory folder (it is case sensitive). This takes you to the Connection Information window. Click in the first box and select Local/Network. Click the button that says BROWSE. Find your sites folder, click on it once, then click SELECT. Click CONTINUE. Type in your name and on the next screen. Click OK and FINISH. Contribute should open up a page that says This is your Site or Forbidden. If you ve already created an index page, it may bring up that page. If This is your Site appears, go to your Sites Folder and drag the index.html page into the trash, then go back into Contribute before continuing. Revised: 10/7/05 Creating Classroom Websites Page 3 of 22

4 General Comments on Web Design School and classroom websites are intended to: Provide classroom and school information. Inform parents and the community about curriculum. Announce classroom and school events. Showcase classroom projects. Provide relevant parent and student information. Pages that are consistent and uniform are more userfriendly. Pages that are easy to navigate are more userfriendly. Using fancy fonts, too many animations, or too large of photos distracts the visitor from your main goal. Know your audience. Have your site reflect what you think the audience needs, wants, or would be interested to see. Be creative. Add something to your site that will make the visitor return, or even better, add something that will make them tell someone else. You want to be unique without being distracting. Basic Features and their Meanings Edit Page: Make changes to a page in your server space. Publish: Places your page in your server space, online. File Action Publish as New Page: Creates a copy of your current page with a different name. Cancel: Asks you if you want to discard the changes on the page that was open. This returns it to its last published version. Insert Link: Lets you create a link to a website, , or file at your cursor location. Insert Image: Lets you insert an image at your cursor location. Font Color: Clicking this button allows you to choose the font color of the text you highlighted Highlight Color: Clicking this button allows you to choose the background color of the table cell or highlighted text. Styles: These are text formatting sets that are already created for your starter page. You can highlight your text and click on these to choose a pre-set format. Revised: 10/7/05 Creating Classroom Websites Page 4 of 22

5 Choosing a Design Click File New Page Starter Web Pages Click the arrow next to the titles to open each section of templates. Click inside those sections to view more starter pages and select a template you would prefer for your site. Look for a general format and color scheme that you like. You may change the colors later, but they should be similar to colors you would like so that the portions of the page that you can t change will still match. Click on the Home Page for your choice. Name it Welcome to Site. Click Open. Make changes to the Website Name and Website Subtitle by highlighting the text and typing over it. Revised: 10/7/05 Creating Classroom Websites Page 5 of 22

6 Your Website Navigation Menu What is a Navigation Menu? A Navigation Menu is found at the top (horizontal menu) or side (vertical menu) of your home page. It allows your visitors to connect from any page on your site to any other page on your site. It must be user-friendly in order for the visitor to find your information. The pages you are going to want your site to link to should be chosen now. If you decide you want a new section of pages later (like a photo section), you would have to change all of your pages to include that in the menu. If you later decide you want something else on your site, but you don t want to change all of your pages, there are easier ways (like adding it to your home page and your links pages). You can change your mind, but it s easier to start off with the correct information before you begin. Changing your Navigation Titles Highlight each navigation title that s already written and type the title that you want in that space. Do not backspace over the text or delete the text. That will delete the html coding that is in your navigation menu. You must highlight the text, then type over it. Frequently-Used Mac Key Strokes for Editing Apple-a Selects entire cell, page, or text Apple-c Copies highlighted selection Apple-v Pastes the copied selection Apple-z Undoes last change(s) Apple-y Repeats last change(s) Apple-x Deletes highlighted/selected section If you need more titles in your Navigation Menu, follow one of the following rules: Horizontal Menu: Copy from start to end of one of the navigation titles, click your mouse after the last title, and click paste. Highlight the new title and type over it. Repeat. Vertical Menu: Click in the last box. Hit apple-a to select the entire cell. Hit apple-c to copy the entire cell. Click in that same box, after the last letter. Hit apple-v to paste a new box at the end of your menu. Repeat. Revised: 10/7/05 Creating Classroom Websites Page 6 of 22

7 Creating Links to the New Pages Highlight the text in the first Navigation Title created. Click the link icon at the top of the page Click Browse to Webpage Click the Advanced Options arrow to open box Click in the HREF box Type the name of the page to link to. Home should link to index.html Policies should link to policies.html Do not type The Target Frame box should say Default Click OK You can also create a link to your or a file on your computer from this screen. Just click the appropriate option. Write the name of that link and page on your Navigation Form (even though the page isn t created yet). Repeat these steps for all of your Navigation Titles in your Navigation Menu. In general, if you are linking a page that will be made by you, then you want it to open over your current page. (Target Frame is DEFAULT). If you are linking to an outside website, then you will want it to open in a new window, so visitors never actually leave your site when they click the link. (Target Frame is NEW WINDOW). Revised: 10/7/05 Creating Classroom Websites Page 7 of 22

8 Changing Page Colors To change the font colors, you can do one of the following: Highlight the text that you would like to change and click in the style menu. Choose the appropriate font style that you would like. Highlight the text that you would like to change and click on the Font Color button. Choose a color from the palette, or move the mouse over any color on your page that you would like to choose. To change the color of the table cells: Click in the table cell that you want to change or highlight the set of table cells that you want to change. Click the Highlight Color button and choose the color from the palette or move the mouse over the color you would like to choose on the page. Based on the starter page that you chose, you can only change the font color and highlight color of certain items on your page. Font Color Highlight Color Some of the items are set to a certain color based on the html code and the style sheet. For example, you cannot change the rollover color of your Navigation Menu, but you can change the background color of your Navigation Menu. Choosing a color from this palette can change the font or the highlight color, depending upon which button you clicked above. Revised: 10/7/05 Creating Classroom Websites Page 8 of 22

9 Formatting Appearance of Pages To change the page title, background color, or link color: Click FORMAT Choose Page Properties This opens a window with choices down the left: Click Titles/Encoding to change the title that appears on your page when it is opened in the browser. Click Appearance to change the main font used, the main text color used, and the background color or image used. Click Links to change the color of your links. Link Color changes how the link appears. Rollover Links changes the color of your link when the mouse rolls over it. Visited Links changes the color of your links once someone has visited that site. Active Links changes the color of links that are currently open in other windows. Based on the starter page that you chose, you can only change the font color and highlight color of certain items on your page. Revised: 10/7/05 Creating Classroom Websites Page 9 of 22

10 Inserting an Image Open up Internet Explorer of Safari In the address bar, type Click Teacher Resources Click Web Site Creation Resources for Teachers, then click Graphic Links. Go through the list to find an image you like. Click on it to enlarge it. Control-click on it and choose to download image to disk. Choose your Desktop and rename the file, keeping the extension (.jpg,.gif,.bmp) the same. Go back to Contribute and click the cursor where you want the image to be placed or delete the image that is already there. Click the Insert Image button. Choose From My Computer Find your image and choose it Resize the image by clicking on it and clicking the Resize Button. Repeat the process if you want more images. You can use the same process if you are searching for images on google or any other website. Look for copyright notifications on the websites from which you are using images. You must abide by copyright laws when using graphics from other sources. Resize Rotate Crop Click in box to change these values Revised: 10/7/05 Creating Classroom Websites Page 10 of 22

11 Inserting Important Links Off to the side, create a title that says Important Links or something similar. Anything that links to a website outside of your site should open up in a new window. Creating a Link Type the title of the website (i.e. PowerSchool) Highlight the title Click the link icon Choose Browse to Webpage In the Web Address (URL) box, type Click the arrow next to Default in the Target Frame Box Click New Window Click OK Write a description of the link below (i.e. Retrieve student updates on grades) Repeat steps 1-3 for as many outside links as you think are important enough to appear on your home page. These links should appear on your home page: Southgate Schools Your sgate.k12.mi.us Teacher Website Directory PowerSchool Revised: 10/7/05 Creating Classroom Websites Page 11 of 22

12 Publishing your Index Page Change the Welcome Message line to a title you want on this page. Write a Welcome Message for visitors to your site. This should explain what can be found on your site, a little information about yourself, and your . You can always edit it later. Click Publish. Type the file name index.html in the box. Click Publish. Congratulations! You just published your home page of your website. You can now click the Don t Show Again box if you don t want to be congratulated every time you publish a page. Click Bookmarks. Then click Add Bookmark to place your site in your Contribute Bookmarks. In Internet Explorer or Safari, visit your page: Make sure that your page appears in the manner in which you intended. Add this page to your Favorite Places. Go back to Contribute and click EDIT PAGE. Make any desired changes to the page and click PUBLISH again. Revised: 10/7/05 Creating Classroom Websites Page 12 of 22

13 Publishing your Other Main Pages Click Edit Page on the index.html page. Highlight the title of this page and change it to a title that corresponds to your next Navigation Menu link. Highlight the welcome message text and change it to say This is where I will type information about. Fill in the blank with the title of your next Menu link. Click File Actions Publish as New Page Create a Page Title for this page (This shows up on the top of the browser bar on the internet). Type the file name in the box (use your Navigation Form to see what you called the second page in the Navigation Menu) Click Publish. Repeat these steps for each of the other links in your Navigation Menu. You now have your main website navigation system set up. Go to Internet Explorer or Safari and open your site to see how it links to all of the pages you created. Revised: 10/7/05 Creating Classroom Websites Page 13 of 22

14 Adding a Hit Counter to Your Index Page Free web counters are free because they are supported by advertisements, but using this method of installing the image in Contribute removes that advertisement until you create the link to it again. If you don't recreate the link, they may do periodic searches and find out the advertisement was removed, then they can remove your counter by deleting your account. If your counter is removed, just repeat these steps and start the counter at the number your old one left off on. Go to rapidcounter.com (or any other free hit counter site) and click to sign up for your free web hit counter. Type a valid address in the box. Click the text See other Styles to see all of the counter styles available. Choose the counter style that you like by clicking on it. Click Sign Up. Any free counter site will now give you an html coding for the counter in a text box on the page. Find the part of the code after the first src= Highlight inside the quotes next to the equals sign. Do not highlight the quotes, though! It looks like this: Copy the line you highlighted (apple-c). Go back into your page in Contribute. Click the mouse where you want the counter to appear. Click the INSERT IMAGE BUTTON in the toolbar at the top. Insert an image From Your Website there. Pick any small graphic that you already have in your IMAGES folder. (This creates a needed location for any image). Click select or choose. Once you re back editing your page where the new image appears: Control-click on the picture and choose IMAGE PROPERTIES. Highlight what's in the Image File box and paste what you copied in there from the hit counter site ( apple-v). Click OK The image may say ERROR DETECTED... it's okay. Adding the link to rapidcounter.com back onto the counter: Click on the image (even though it may say error detected). Click the LINK button, BROWSE TO WEBPAGE. Type the link to the free site that you used (rapidcounter.com) Click in the TARGET FRAME box and choose NEW WINDOW. Click OK PUBLISH THE PAGE The counter should appear on your page and it should add one every time you refresh the page. If the counter does not appear instantly, go to internet explorer or firefox and check your page. Revised: 10/7/05 Creating Classroom Websites Page 14 of 22

15 Editing your Policies Page Click on your Policies Page in the navigation menu. Click Edit Page Create a general description of your class and how it is run in the main text section. In the Important Links section, delete the links created and type Specific Procedures as the title of that section. Create links to specific policies under the Specific Procedures section: Type Grading Policy. Highlight Grading Policy and click the link icon. Click Browse to Webpage In the HREF box, type grading.html Target Frame should be set to DEFAULT. Click OK. Write this name down on your Navigation Form because it is a new page you will create for Grading Policy. Repeat this step for Assignments, Homework Policy, Lab Safety, Required Materials, Calculator Agreement, Attendance Policy, Honor Code, etc. (Anything you would normally explain to your students about class.) Click Publish. You now have a Policies Page that links to specific policies that are important to your class. These new pages will be referred to as sub-pages. Editing Your Policy Sub-Pages Edit your Policy Sub-Pages by clicking in the browser box. Click on your Policies button to get to the page you just made. Click EDIT PAGE. You are going to be using the Policies Page to create your Grading Policy Page. You will then publish it as a new page (DO NOT CLICK THE PUBLISH TAB). Change the title of the page in the heading box (i.e. Grading Policy ) Type in your grading policy in the blank or copy and paste it from another document you already have on your computer. Edit this the same way you would edit a Word Document. You can add photos to this page the same way as previously described. Click File Actions Publish as New Page Type Grading Policy in the blank Type grading.html as the file name (use your Navigation Form) Click Publish. Repeat these steps for any other sub-page that you have created a link for on the Policies Page. Revised: 10/7/05 Creating Classroom Websites Page 15 of 22

16 Using Microsoft Word to Create Lesson Plan Web Pages Creating links to your lesson plans will forever save them on the Internet, but it is wise to save them in a second location as well. Lesson plans should be organized in a way that will allow easy access and modification in future years of teaching. Create a folder in your SITES folder called PLANS: Click on your Sites folder Control-click and choose New Folder Name the folder PLANS. Open Microsoft Word and create your lesson plans for the week in the format of your choice. Save your lesson plans as a Webpage: Click FILE, SAVE AS WEBPAGE. Find the PLANS folder that you just created. Name your file class0901.html This helps if you teach more than one class. Your lesson plans will then be grouped together alphabetically by class, and numerically by month. i.e. chem0901.html and advchem0901.html or chemweek01.html and advchemweek01.html Click SAVE. Repeat this procedure for every week s lesson plans, but change the date or the week number. Use Contribute to link to those lesson plans by using the instructions to the left each week. Editing your Class Pages Click on your Class Page or your Lesson Plans Page in the navigation menu. Click Edit Page Create a general description of the topics you cover in class or the class in general in the main text section. In the Important Links section, delete the links created and type Lesson Plans. Create a link to your lesson plans for this week. Type September 1, 2004 (next week s Monday). Highlight that date and click the link icon Click Browse to Webpage In the HREF box, type plans/class0901.html In the Target Frame box, click New Window. Click OK Write this name down on your Navigation Form. Repeat this step for every other week of lesson plans you wish to put on this page (if you started typing them from week one, then include them all. Keep the current week s plans on top and write the others in reverse order below). Click Publish. Repeat this whole process if you have more than one class that you teach and you save the lesson plans as separate files. Revised: 10/7/05 Creating Classroom Websites Page 16 of 22

17 Editing your Links Page Click on your Links Page in the navigation menu. Click Edit Page. Create links on this page the same way you ve been creating them off to the side on your other pages. The main purpose of this page is to put any class links, subject links, helpful links, fun links, etc. that you may want students to visit. In the section that says Important Links, create a list of minor links. The main section could be important class links and the section off to the side could be fun links. Anything linking to a website outside of your site should open up a new window. Check the District s Website Guidelines to make sure that you are linking to appropriate sites. Click Publish when your list is complete. Editing your Personal Information Page Click on your About Me Page in the navigation menu. Click Edit Page. Type information about yourself that you would want students to know: Educational background Your teaching philosophy Educational goals and objectives Fun information about you and your family Highlight the Important Links text and type My Favorite Links Create links to your colleges Create links to your favorite sports teams Favorite sites Interests that you have (tv shows, rubik s cube, games, etc) All of these links should open up in a new window. This is where students can find out more information about you as a person instead of just as a teacher. Check the District s Website Guidelines to make sure that you are linking to appropriate sites. Click Publish. Revised: 10/7/05 Creating Classroom Websites Page 17 of 22

18 Edit your Photo Page using iphoto In Contribute, choose and edit your Photo Page. Open iphoto Click on the folder that you want on your site. Make sure that the name has all lower-case letters/no spaces. Click FILE, EXPORT Click the Export as Webpage tab Type the title you want to show up on the page Change the background and title colors if you wish Change the Max Width of the Thumbnails to 100. Click EXPORT Click until you reach your sites folder, click New Folder. Give it the same name as the folder in iphoto. Click OK. iphoto made a folders and files for you, based on the name you created for the new folder. Go back to Contribute Type Student Photos or an appropriate name. Type a description of the photo set underneath the title. Highlight Student Photos and click the link icon Click Browse to Webpage Click the CHOOSE button. Double-click on your website address to display all of your files and folders (skip this step if you already see your files). Double-click on the folder you created in iphoto. Double-click on the html file (has the same name as the folder). In the Target Frame box, click New Window. Click OK Click Publish. Revised: 10/7/05 Creating Classroom Websites Page 18 of 22

19 Updating Your Site Open Contribute. It will automatically connect you to the server and give you an error message. Click OK when you receive the error message. Click Bookmarks, and click on your site. If you want to edit current pages: Click Edit Page Make Changes Click Publish Repeat for any page you wish to update or change If you want to create new pages: Open up a page that is similar to the page you want to create and edit that page to look the way you want Click FILE ACTIONS PUBLISH AS NEW PAGE Rename the title of the page Create a new file name. Make sure that you link to the new page from some page in your site (usually home page, links page, or lesson plan pages will be best). You should always put a Last Updated on [date] notice on your index page when you make changes on any page. Changing any File into a PDF Documents, or any other non-html page, should be posted on the internet with the.pdf extension. This allows almost any computer user to open up that page, regardless of the software on their computer. It also limits the spread of viruses. You should always save your page (whether it be a Word document, Excel Spreadsheet, or even a Newsletter) in the normal format required by that program. Open the document in Word (or any other program used). Click FILE PRINT. Click SAVE AS PDF (at the bottom of the window). Name the document in the following format: name.pdf To link to that file on your website: Type the title of the document (i.e. Chapter 1 Study Guide) Highlight the title Click the link icon Choose FILE ON MY COMPUTER Click BROWSE Click folders until you find the pdf file and click on it once. Click CHOOSE Click the arrow next to Default in the Target Frame Box Click New Window Click OK Revised: 10/7/05 Creating Classroom Websites Page 19 of 22

20 Solutions to Common Problems I decided to add another title to my Navigation Menu. What is the easiest way to get this new title on all of my pages? Add the new title(s) to your Navigation Menu on the index.html page and create the link to the new page(s) you will be making. Highlight every cell in the Navigation Menu or select the entire Menu and copy it (apple-c or Edit/Copy). Publish the index.html page. Edit your next page. Highlight the entire Navigation Menu. Paste the new menu (apple-v or Edit/Paste). Edit each of your other pages, highlight, and paste. You only have to copy the correct menu once. It will remain copied in the clipboard until you copy something else. I keep receiving an error that says Page Not Found when I click on one of my pages in my Navigation Menu. Read the file name to which you are linking. Go to your sites folder and make sure that page is, spelled correctly and has the same ending (.htm or.html). Change the name of the file to match the one to which you are trying to link. If the page is not in your sites folder at all, then publish a new page with that file name. If the page is in your sites folder, spelled correctly with the correct extension, and you are sure that it is the page you are supposed to be linking to, then Kristina Repp (reppk@sgate.k12.mi.us) to explain the situation. I somehow deleted my Navigation Menu on one of my pages or I made a change to it that I cannot seem to undo. If you don t have any information on the page: Cancel the draft. Go to your sites folder and drag that file to the trash. Open a page similar to the one you just trashed and make the necessary changes so that it looks like the one you trashed. Publish this as a NEW PAGE and give it the same file name as the page you trashed. If you have information on the page: Copy the information from the page and paste it over the information on a similar page that is in correct working order. Cancel the draft of the page that has the missing/incorrect menu. Go to your sites folder and drag that file to the trash. Publish the other page as a NEW PAGE and give it the same file name as the page you trashed. Whenever I click on links on my site, new windows keep opening in front of the old ones instead of in place of the old ones. Open the pages that have the links causing the problem. Highlight the links and click the link button. In the Target Frame box, click Default instead of New Window. You will have to repeat this process for every page that has links behaving in this manner. Revised: 10/7/05 Creating Classroom Websites Page 20 of 22

21 Solutions to Common Problems (continued) My page is too wide for my screen when I view it at home or on another computer. How do I make my page fit in the screen? An image that you inserted was too wide for the table cell in which you inserted it. This stretched out the page. Go back and resize the image until the table cell returns to original width. You moved a column on the page. You can either find a page that is similar to the page with the error and follow the steps described to above or you can try to adjust the column widths yourself by clicking and dragging them back in. I accidentally published over a page instead of publishing a new page. Is there a way to get the old page back? Try one of the following: View the page you published in Contribute s browser. Click Filefi Actionsfi Roll Back to Previous Version. If that option is greyed-out, then it is not available. Edit the page. Go to Filefi ActionsfiPublish as New Page. Rename it the correct name. Go to Internet Explorer and open up the old page. Sometimes the old page remained in the cache and you can copy the information on the page and paste it into the same section in that page in Contribute. If the page already refreshed and looks like the new page, then this option is not available. Open up the new page in Contribute and go to Filefi ActionsfiPublish as New Page. Give it the name of the new page you were trying to create. Then open up the original page that you weren t supposed to publish over and retype the correct information. Click PUBLISH. Some links in my Navigation Menu look different than others or they don t roll over into a new color when I mouse over them. How do I make them all look the way they did on the original page? You probably highlighted the text and deleted it before you typed the new name or you backspaced over it before you typed the new name. ( You must highlight the text you want to change and type over it without deleting or backspacing). Try one of the following that applies to fix the problem: If one of the cells is functioning correctly, then select that cell (apple-a), copy it (apple-c), select the cell that is not functioning correctly, and paste over it (apple-v). You will then need to recreate the name and the link that should have been there before. If none of the cells are functioning correctly, then you need to open up the starter page for your design, giving it any name. Copy the entire Navigation Menu by highlighting all of the cells. Edit the page that has the menu that is not functioning properly. Highlight the entire Navigation Menu on that page and paste the correct menu over it. You will the need to recreate the names and links that should have been there before. If at any time you have questions about Contribute or your web space and none of these solutions have solved the problem, please send an to Kristina Repp (reppk@sgate.k12.mi.us) and explain the situation. Revised: 10/7/05 Creating Classroom Websites Page 21 of 22

22 Sites to Remember: Your Website (case sensitive) Southgate Schools Website Resources Teacher Website Directory Link to Your School s Page PowerSchool Your yourlogin@sgate.k12.mi.us Southgate WebMail (Use your login and password to check your Southgate from any computer. You can also have your sgate forwarded to any other account you have so you don t exceed your storage limit.) Revised: 10/7/05 Creating Classroom Websites Page 22 of 22