Monday, September 1, 2014

Google 101: How To Make a Better Teacher Website with Google Sites


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
Our first step is going to be to log-in to whatever Google account we intend to use for this. This may seem like a no-brainer, but there are some things to consider here. If you use your school's Google Education account for all things Google, then you're all set. If, like me, you use your own, personal Google account for most of what you do, then you may want to go with that. Your site is probably going to interact with your Drive account a lot, so that really needs to be the deciding factor. Either way, log-in to your account of choice and then head over to sites.google.com (alternatively, you can navigate to Sites from the app drawer next to your name at the top of any Google page).

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
This step is purely optional, and there are a number of different ways to go about it. I'm not going to explain how to make one in great detail here, but look for a future post on that topic. Basically, this is just creating an image of your site's logo or banner. The one you see at the top of this page was made by just typing in an image editor (Pixlr Editor, connected to my Google Drive account - click here for a tutorial on connected apps), using the colors from the standard Google logo. I added the shadow effects and then saved it as a .jpg. It's that easy. 


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
Okay, we've finally arrived at the meat-and-potatoes of the tutorial - designing the home page. This is really going to come down to your own personal preferences. For reference, this is my personal teacher site (it's going to look very scrunched - click here for the actual site):



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.


You may have noticed the columns in my page. You can add columns by clicking the Layout dialog, but they are pretty limited in their options. Mine were done by inserting tables and then editing the HTML code (a very good help site with tables HTML can be found here). If you don't feel up to that but want the column look, go for the Layout option instead.


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. 


For most of your pages, use the Web Page template. This is the standard page, like we've been working on so far. File Cabinet is great for a downloads page: you can easily add files to it without having to go into edit mode, and - as an added bonus - students can subscribe to it and be notified by e-mail whenever you add or remove files to it. I don't think any of the others are really useful for a teacher website, but check out the "Learn more" link to see what the other options do.

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=http://www.chandlertechteaching.com">
If you are not redirected automatically, click <a href="http://www.chandlertechteaching.com">HERE</a>

Embed HTML:
<iframe src="http://www.chandlertechteaching.com" width="800" height="800">
<p>Your browser does not support iframes.</p>
</iframe>
<br>
If you do not see the page embedded above, please click <a href="http://www.chandlertechteaching.com">HERE</a>

Please comment below if you have any questions. Thanks for reading!

4 comments:

  1. This information is quite informative to read.
    school prospectus

    ReplyDelete
  2. I am happy to find this post Very useful for me, as it contains lot of information. I Always prefer to read The Quality and glad I found this thing in you post. Thanks Haryana Ration Card Download

    ReplyDelete
  3. Capella Online University has a demonstrated reputation with more than 2,400 understudies who college writing service reviews have gone ahead to have effective professions in educating.

    ReplyDelete
  4. Just admiring your work and wondering how you managed this blog so well. It’s so remarkable that I can't afford to not go through this valuable information whenever I surf the internet! 192.168.1.1

    ReplyDelete