Chandler Tech Teaching

School’s back in session, and along with the kids, bells, and ARD paperwork, teachers are also being inundated with 1001 directives from administrators. Among these directives is likely the annual reminder to post a teacher website. If you’ve been negligent on this front, are a new teacher, or just want to do something a little flashier than Firstclass and more professional-looking than Wix, then Google Sites might be just what the AP ordered. Follow along for a quick crash-course in building a teacher website with Google Sites.

Step 1: Log-In and Go to Sites


Step 2: Create a New Page

After clicking the red “Create” button, you’ll have a number of options. Right at the top, you can choose a template. If you choose to do this, you’ll find numerous teacher site templates that you can use. For our purposes, we’re going to use a blank template. You can also choose color themes. Again, I’m going to choose the “blank slate” theme, but this won’t make any difference for the tutorial. Next comes the name – I highly suggest not putting any spaces into your title, as every space will be a hyphen in your site’s URL. Once you’ve done all this, go ahead and click “Create” again.

Step 3: Getting to Know the Sites Interface

For editing an individual page (web-lingo 101: a “site” is a website which is made up of “pages”), you click the little pencil at the top. The plus-symbol page button is for creating a new page on the site (we’ll be doing this later). The gear button next to that has a lot of different of functions that we’ll be using over and over again. Finally, the share button is very important, so much so that we’re going to go ahead and push that now.

Step 4: Change the Share Settings

For people to see your site, you need to change the share settings. Click “Change” and change it to “public on the web.” Note that at the top of this page you can also see the link for linking this page. This will come up again at the end of the tutorial.

Step 5: Messing Around with the Settings

Before going back to the page (done by clicking the bolded name of your site on the left), we are actually already in the Manage Site page. You can access this from your page view by clicking the gear and choosing “Manage Site.” Click “General.” There are a few things you can mess around with here, but for now we need to un-check the box that says “Show site name at top of page.” After you’ve done this, click Save.
Next, choose the “Themes, Colors, and Fonts” settings. You can change all sorts of stuff here, or choose a new theme. Change some things around if you like, then head back to your page.

Step 6: Changing the Layout

To change the site’s layout, click the gear icon and select “Edit Site Layout.” You can leave this alone if you want to. For the purposes of this tutorial (and also because it’s my personal preference), I’m going to change the layout to the settings in the picture below:
This gets rid of the sidebar, which I think is kind of gross-looking, and replaces it with horizontal navigation that can look much snazzier without any additional work. I left the header so that we can make a custom one, which we’ll do now.

Step 7: Making a Custom Header

Other methods include making a cool-looking logo in programs like Powerpoint and Word, using the WordArt function, then taking a screenshot. When editing it in your image editor of choice, I suggest making it around 600 pixels wide by 200 pixels high. This should fit nicely but may still need some tweaking. Once you’ve got a logo to use, go to your site. While in the “Edit Site Layout” mode, mouse over the area near the top of the page. You’ll see that it highlights a light blue, indicating that you can click it. Do so, and it will pop up this screen:
Choose the settings that I’ve got here, then attach the file. Once you’ve done this, you’ll see what your page will look like with your new, custom header. If it doesn’t look right, then keep tweaking the image to your satisfaction. 

Step 8: Designing the Homepage

Editing your site is easy – just click the little pencil icon. From here, it’s pretty much just like creating a document in Docs. You do have some extra options. The “Insert” dialog has a LOT of stuff available. I encourage you to mess around in here and see what all there is. Gadgets in particular can be really useful and fun. You can also insert a lot of useful stuff from Google, such as anything you have saved in your Drive (this is why I said at the top that it was important to use the same Google account that you use for Drive) and Calendars.
It’s up to you to decide what goes on the homepage. I recommend keeping it fairly simple, though you’ll notice that my own has quite a bit going on. It might be a good idea to write down what sort of things you want on your site and then which of those you want to be on its own page. I’d recommend having a page for each of the following:
* calendars
* downloads
* contact information
* links

Step 9: Create More Pages

To create a new page on your site, click the new page button at the top. You’ll be given some options. 
Step 10: Add Your New Pages to the Navigation
Once you’ve created your new pages, the next step is to add them to your navigation. To do this, open up any of the pages in “edit site layout” mode, then click the navigation area. 
At this point, it’s pretty self-explanatory. You can add the pages, put them in whatever order you like, add external pages (I don’t recommend this, because they’ll be missing the navigation bar), and change the look
Once you’ve done all this, all that’s left to do is actually fill in the content. Mess around with the Insert button, adding gadgets like a Google Calendar or your school’s official Twitter feed
Bonus Round: Adding Your Site to Your School’s Website
Okay, so you’ve followed this 10 step guide to making your teacher website in Google Sites, but how do you get your school’s website to point to it? That depends on what system your school uses for its website and just how much extra work your technology administrators want to do. If you’re in a small district or are best buds with the tech admin, you may be able to get them to just point directly to your site’s URL (found with the Share button at the top of the page). If that’s not the case, you may have some other options. You can always just put a link to your site on your official school page, but that’s kind of lame. I’m going to show you two other options, using HTML. These assume that you have some sort of simple website builder for your school site, such as RWD (the webpage builder that comes with Firstclass)
First, make sure that you are in whatever mode allows HTML coding (in RWD, you right-click the page while in editing mode and select “Format Text” then “Literal HTML”):
At this point, you have two options: you can either embed your site inside of your school site, which does not appear to work with RWD any longer, or you can set it to automatically redirect to your new site. Now, the latter will look nicer, but may not be strictly allowed by your district. I’ll give you the HTML code to copy-paste for either option below, making sure to replace the URL (in red) with your own site’s URL. Make sure that you leave ALL punctuation and spacings intact, exactly as they appear below (you may want to change the width and height fields in the second example so that they fit your school’s format better, but note that they’ll cause scrunching unless you change the layout settings on your Google Site)
Redirect HTML:
<meta http-equiv=”refresh” content=”1;url=”>
If you are not redirected automatically, click <a href=””>HERE</a>
Embed HTML:
<iframe src=”” width=”800″ height=”800″>
<p>Your browser does not support iframes.</p>
If you do not see the page embedded above, please click <a href=””>HERE</a>
Please comment below if you have any questions. Thanks for reading!

+ There are no comments

Add yours