Shop OCD in Elementary

For hands-on resources for elementary classrooms

Shop Now!

Creating a Class Website

Hi there!  Today I'm going to show you how to start creating a google site for your classroom.  Here's why I think teachers should use Google Sites:

1.  It's free!!  Yep - I've been paying over $100 a year for mine, and this one is just as good, if not better!  I'm serious!!
2.  You can easily connect all of your Drive docs/slides/calendar/ etc to your site for easy access for parents and students.
3.  If your district uses Google, you have unlimited storage in your drive (doesn't affect your site - but that's nice to know that they all work together)

So - here's how to get started!

1.  Log in to your Google acct.  
2.  Then type in the url:
3.  Then click create
4.  Now you want to click blank template (unless you see another template you would like to have).  I make my own headers and backgrounds, though.
5.  Now name your site (you can also type in a custom domain - you might have to play around with that one for a bit, because a lot of times the more common ones are used)
6.  Click on I'm not a robot
7.  Then click create site (this will take a minute)
8.  Then this screen will pop up


Now you want to create your themes, colors and fonts...
1.  Go to your gear (settings)
2.  click on manage sites
3.  All the way at the bottom left - click on themes, colors, and fonts.

At this point - you can do MANY THINGS!!  EEEEEKKKK!!!

If you've purchased or made an image for the header - start here:

  • click on site header
  • click on the button next to the image icon (pick the image you made or bought from your computer)
  • once it uploads - you will not see the entire image - don't worry about that at this time. :)
  • click on options next to the image icon
  • Repeat - click none
  • Horizontal Position - center
  • Vertical Position - top

Background Image

  • click on entire page
  • click on the image icon in the image row (and do the same thing you did with your header)
For now - that's all we are going to do in themes, colors, and fonts.  BUT... please know, there are tons of options here as well.  I'm just leaving that for another tutorial.

NOW - CLICK SAVE - then click on the name of your site (in the left hand corner under Manage Site.  This will bring you back to the home page.

Now - go back to your gear icon (settings) and click on Edit Site Layout.

1.  click on Horizontal Navigation
2.  click on sidebar (so that it is no longer selected)
3.  put your cursor on top of the header image & click - the header turns a blueish color.  Once it turns a blueish color, click on it again.  Another box pops up called Configure site header)
4.  Change the height to ______ pixels and press ok. (The height depends on the size of your header)  If I created it - I will give you the size to change it to in the directions for setting up your blog)
5.  Site Width - Click on custom.  You will put the px of this as well, depending on what your designer tells you.  
6.  Then click close

1.  Now go back to your gear icon (settings) 
2.  Click Manage Site
3.  Scroll down until you see Enable and Configure Search Options - click on Configure search.  Now click on Enable Search if you want to get rid of the search box that is on your header image.
4.  At the top, where it says Site name - uncheck show site name at top of pages (so that it will not be on your image)
5.  NOW - CLICK SAVE - then click on the name of your site (in the left hand corner under Manage Site.  This will bring you back to the home page.


1.  Click on the plus sign with the page icon
2.  Name your page
3.  Select a template (I usually select web page) but if you click on learn more - you can see all the options)
4.  Then press Create
5.  Then press Save
6.  Repeat the process until you have all the pages you want (you can add more later)
7.  Now click on the Gear Icon
8.  Click Edit Site Layout
9.  Click on the navigation bar until it turns blue (another box will pop up called Configure Navigation)
10.  Click on Add page
11.  Select the pages you want to add (one you select them and press OK - they will now be in the top box)
12.  You can choose between Boxes, Tabs, or Links
13.  Press OK
14.  Now they are on your header  (to edit - click on the navigation bar again - and you can edit.)

Changing the way your header looks (fonts and size)

1.  Go back to your Gear (settings)
2.  Click on Manage Site
3.  Click on Horizontal Navigation
4.  Text - you can change the font, size and hover color
5.  Layout - you can change it to center, left, or right justification as well as spacing between words (this is under margin)

At this point - your website is eye appealing!  Now you get to add the fun stuff!! CONTENT!!!

If you decide that Google Sites might be something you want to try with your class - here's a link to my headers/backgrounds to help you get started.

No comments

Post a Comment

Thank you for leaving a message - let me know if you have a classroom that I can check out as well:-)