Our Hypothetical Classroom sites:

Mr. Barton - High School Social Studies
Mr. Messinger - Elementary Music Class Website
Miss Olson's- 3rd Grade Classroom
Miss Fisher's Third Grade Classroom
**Miss Myers- High School Biology**
Mr Hilt - Kindergarten
Mrs Stormes-Second Grade
Ms. Showers- 11th Grade Chemistry
Ms. Winters Chemistry 1 Classroom
Miss Heyer's First Grade Classroom Website
Miss Dentice's Second Grade Classroom

General Resources:


Look at Classroom Webpage Examples:


Plan your site. You may want to include:

  • Your teaching philosophy
  • About the teacher
  • Calendar of events
  • Homework assignments
  • Relevant Internet links for students or parents
  • Information for parents


Create your site:

In the Lab:

  • Find clip art, pictures, or backgrounds using the link to Clip art and Background sources above.
  • Save pictures and backgrounds to your H Drive / public_html / classroom site (everything for your website should be in the classroomsite folder)
  • Open the program "Microsoft Expressions Web"
  • Change background color or image from Format on the Menubar.
  • Insert pictures by choosing "Insert/ Image" from the menu bar.
  • Add links to other sites by typing the words you want to link, highlighting them, and choosing Insert / Hyperlink from the menubar.
  • Create a new page by choosing New / Page from the menubar. Save all pages into the classroom site folder. Use all lowercase letters and no spaces. Put .html at the end of each page name.
  • Link from your main page to your other pages.
  • Each page is named http://dragon.ycp.edu/~yourloginname/classroomsite/specificpagename.html
  • You should link from the first page out to all other pages and from each page back to the main page.
  • Your first page should be named index.html
  • You can organize your page visually by using a table (see the menubar)
  • To reopen pages in Expressions web at another time to continue editing - Open Expressions web, then go to File/ Open and navigate to your H Drive / Public_html / classroomsite / and open whatever page you want to edit.
  • Microsoft's Expression Web online tutorials (These may have more info than you need - but it's a resource for those who want to get more technical.)

At home:

  1. Download NVU
  2. Connect to the Internet on your computer and open NVU>
  3. NVU Tutorials (log in with Northern York's ID and password. (If you feel like learning about how to use the program)
  4. You can change your background color and other text features using FORMAT from the Menu bar.
  5. Insert pictures by choosing "Insert / Image" from the menu bar. Images for the web should be .jpg or .gif format.
  6. You can find pictures by doing a search on the web for clip art or pictures. Copy pictures by right-clicking on them and choosing "Save image as." or "Download Image to disk"
  7. Add links to other sites by typing the words you want to link, highlighting them, and clicking on the link symbol at the top of the page. In the window that opens, type in the URL of the actual page (or copy it when you are at the page and paste it here.) Click OK. The text you had highlighted should now be underlined.
  8. You can link to another spot on your page by creating an "anchor". Click where you want the anchor to be. Go to Insert / Named anchor and name your anchor. Now go to the word or words you want to link to that anchor. Highlight the words, click on the link symbol on the tool bar and find the named anchor in the drop-down menu that appears.
  9. You can organize your page visually by using a table (Menu bar / Table). You can change the background color of the table, merge cells, add and delete cells or rows, etc., by right-clicking on the table.
  10. Save the document (Use .html at the end of the name. Don't use spaces or capital letters. Use an underscore if you need a space)
  11. Save all your pictures and your actual web pages into the classroomsite folder in your public_html folder on your "H drive" at school. You can get to this drive at home by logging into My YCP. I would suggest you save all your pictures into your H Drive before you insert them into pages.
  12. You may create multiple pages - Just name them and link to those names. (You can "browse" to them or link to them with the actual web address that will be created for each page.)
  13. View the way your page will look (and act) on the Internet by clicking on the BROWSE icon.
  14. If you have saved your pictures and web pages into your "H Drive", you can check out your actual web address at http://coyote.ycp.edu/~yourloginname/classroomsite/specificpagename.html
  15. Troubleshooting:

    • If you have all your files copied into the public_html folder and your pictures aren't showing up when you view your site from the Internet, open your .html file from within your editor, right click on the picture and go to "image properties". Change the location to the exact web location (ex: http://coyote.ycp.edu/~yourusername/classroomsite/specificpicturename.jpg). If you have the image location typed in correctly, you should see the picture appear in the little preview window. Save your file back to the public_html file.
    • If your links to your own pages aren't working properly even after you have your files copied into the public_html folder, open the .html page in your editor, highlight the linked text, click on Insert/ Link and put in the entire link location (ex:http://coyote.ycp.edu/~yourusername/classroomsite/specificpagename.html) Save back into your public_html folder
  • For more information on using NVU, try these tutorials: Design your Own Web or Designing and Publishing a Site with NVU.
  • If you decide to use Microsoft's Expression Web, here are some online tutorials (These may have more info than you need - but it's a free resource for those who want to get more technical.)


  • Warning: PLEASE DO NOT EDIT YOUR WEB PAGE IN MICROSOFT WORD!!! IT DOES TERRIBLE THINGS TO THE HTML CODE. IF YOUR DOCUMENT OPENS IN WORD WHEN YOU DOUBLE CLICK ON IT, START UP NETSCAPE, NVU, OR MOZILLA FIRST, THEN GO TO FILE/ OPEN FROM THERE.


Please feel free to email me with questions or to have me take a look at your site so far.