A Google Sites Classroom Website

August 9, 2019

A Google Sites Classroom Website

August 9, 2019
class websiter

I have kept a classroom website for as long as I can remember. And I used to keep very elaborate sites! I remember the years when I had extensive information about each subject for parents...it's probably around here on my blog somewhere!

But a LOT has changed over time.

And people don't always have the opportunity to read websites like they used to. So my class website has morphed back into a simpler form.

In fact, what you see in that top image? That's it. That's my class website.

class website2

No pages, no extensive list of links...just a landing page of our most important go-tos.

I'll be breaking down the links I use for my students later in this post. But first,  to share how to get a Google Sites website up and running.

First, google "new google sites" (see what I did there?). This will take you to a page to launch your first site:

website1

Click the + mark at the very bottom, righthand side of the page. Name your new site. (The example I am creating will be just like my class website...just a second copy to keep our website anonymous).

website2

The default site comes with a header, ready to use. I honestly have a hard time with these headers. The pre-loaded images aren't super amazing for education...and if you upload a photo, it's very hard to get it sized accurately.

If you'd like to add a header, click on the large banner at the top and you will see options to upload or choose images:

website3

Since I wanted a simple landing page for my students, I removed the header completely and opted for more of a clean look.

To start designing your site, head over to the righthand side of the page and choose "Themes".

So the interesting thing about Google Sites is there is very little choice as to the "look" of your site. Once you choose a template, you are able to add colors of choice. But the fonts are set...you have a choice of three fonts within each template:

Picture1

So I ended up choosing a template with the fonts I liked best, which is the Simple template with the Light font:

website4

After you've chosen your favorite theme, you can start adding photos, files, and links.

Go to the "Insert" menu.

You will find a very long dropdown menu of choices...here you can add text, photos, files from your Drive, and more.

You can also choose the layout of your page, which helps keep things very balanced:

For our site, I added a few images from our classrooom for visual interest. I also designed some buttons at the top to link to our most-used websites. (Using Google Classroom has really eliminated the need for all those website pages I used to have, since I can now put all assignments and wesite links by subject in there...a post for the near future!).

Adding Photos

There are two ways to add photographs. If you would like them to all be the same size and consistent across the page, it will be best to use one of the layout options:

website7

Once you have chosen a layout, click the + sign to add a photograph:

website8

Your photos can have subheadings and caption text if you would like. I kept mine blank on my website. If you would like to remove the text, just click delete as you hover over each text option:

website9

Once all of your photos have been uploaded, you can click and drag them to change the order.

The great thing about using the layout feature is all of your photos will be the same size and fit on the page nicely:

website10

The downside to using the layout feature is that your photos will be cropped.

If you would like your photographs to display larger, you can also upload them one at a time without the layout option:

website11

You will have some more freedom when it comes to sizing your photos with this option, so they will be less cropped (but it does require a bit of maneuvering!).

Google Sites will help by showing guidelines as you resize your photos, so you can set them to the same size and a balanced layout:

website 12

Once you have your photos sized to your liking, you are all set!

You can always delete or move any section. If you click on the lefthand side of your site, you will see a menu pop up to copy, move, or delete your content:

website13

Adding Icons/Clipart

This part will require a bit more work!

I like to use visual icons for my students. I make my designs in Adobe Illustrator. If you don't have this program, you can also design buttons in PowerPoint using clipart (and a file I'm sharing below to help!).

Sizing the icons was the hardest part for me.

There is not a super ton of size control on Google Sites...so if you add a little icon to the page and try to increase the size a bit, it sometimes jumps to a huge size!

website14

(You can see above...the icon went from being tiny and the next size up was too large!)

Luckily there is a workaround for this!

If you use a white square or rectangle and place your design on top of it, this will help balance all of your icons/clipart.

To help with this, I made a PowerPoint file with a white rectangle already sized for you! Here are the steps to use it...

Click here to open the PowerPoint file. It will open as Google Slides. To use it as a PowerPoint, go to FileDownload As, and choose PowerPoint.

Once you open this file in PowerPoint, you will see a rectangle and square like this:

website15

Add any icon/clipart you would like for your website over the gray square. Delete the gray square. You will want to keep your icon centered on the rectangle and close to the bottom of it (this will make your icon/clipart close to the text you type under it later on):

website19

Now select both your icon and the rectangle. Copy and paste them three times on the PowerPoint slide, so you can make the rest of your icons/clipart.

These rectangles are sized to make four icons total. Once you have designed all four, you can remove the gray lines on all the white rectangles so they don't show on your website.

Click on each of the white rectangles (not your clipart) and change the line from gray to no line:

website20

Now you are ready to save each icon separately. Click on one rectangle. Hold Shift and click on the clipart in that rectangle.

Now both should be selected. You can also click and drag over both to select them:

website21

Go to Arrange and choose Group, so your rectangle and clipart are now one picture:

website23

Right-click on the icon and choose Save As...

website24

Do the same for each of your iconos, then head back to your Google Site.

As you upload the first icon, try to resize it as shown below (about five columns wide). You can resize by clicking on the icon and grabbing a diagonal corner to adjust it:

website25

You will need to uncrop the icon as well, so it will fit nicely:

website30

Now you can copy and paste this icon three times on your page, for a total of four:

website26

This will make it easy to upload your remaining graphics. Click on the second picture, choose Replace Image and then Upload to change to your next icon:

website27

To add text below, click on Add Caption:

website29

Now you will have some nice visuals to help your students navigate your website with ease!

website31

And that's it for the design part! A few photos and the four sites we use most often.

Here's a quick overview of the four I chose for my students:

Books We've Read

This button leads to a student-friendly Google Form my students use to track the books they've read this year as a class.

After they read a book, they will click on the Books We've Read button to access the Google Form:

website32

Students will fill out their name, the title of the book they just read, and then select the genre of the book:

website33

As they enter this data, it is automatically generated into charts we can refer to as a class.

One chart keeps a count of the total books read and the other tallies the genres we've read. I'm hoping this will lead to some great discussion about the kinds of books we like to read and inspire my fourth graders to try new genres as well!

website34

(If you'd like to learn more about this resource you can find it in my TpT store...please click the image below to check it out):

reading tracker covers

The remaining sites are ones I know most of you are familiar with!

Google Classroom

Since many of our assignments and links can be stored here, this is a really important link for us! I have this icon set to jump to our Classwork page on Google Classroom (would you like to learn more about this? I can share soon if so!):

website35

iReady

Does your district use this? We have for the past couple of years...and having a bookmarked link to iReady is key for keeping things moving quickly for us.

My students access their iReady Reading and Math lessons, activities, and assessments on this site.

Spelling City

This is another major go-to site for us. I know it's easy enough to google Spelling City...but it's faster if I link the exact student sign in page for my fourth graders. Anything to save time!

website36

And that's it!

My class website is now the hub of all our most-used digital resources.

I hope this was of help if you are trying to do something similar...or using Google Sites for the first time. Thanks so much for reading!

Looking for more Google Drive resources to organize and manage your classroom?

These are my favorite ways to keep myself on track in so many different areas:

No Comments

Leave a Reply

Instagram

  • Giant dry erase number lines = instant engagement!⠀⠀⠀⠀⠀⠀⠀⠀⠀We’ve been working on using place value understanding to round to any place this week. I knew I wanted a dry erase number line so my students could alter the set up to round different numbers to the same place (such as rounding 82 and 182 and 1,182 to the nearest ten).⠀⠀⠀⠀⠀⠀⠀⠀⠀I used electrical tape to create seven huge number lines on the floor throughout the room. Then I added dry erase strips to the top of the segments on the number lines. I did not add arrows to save on tape (we have had several discussions this year about the significance of arrows on number lines, so they are always included otherwise).⠀⠀⠀⠀⠀⠀⠀⠀⠀We worked in groups of three to round various numbers. It was awesome! It was a kinesthetic activity that kept my active learners interested.⠀⠀⠀⠀⠀⠀⠀⠀⠀We started with the benchmark numbers first, then labeled the midpoints. Then my students placed the number given and rounded it on a whiteboard to share their responses.⠀⠀⠀⠀⠀⠀⠀⠀⠀Once they were comfortable with setting up the number lines, we rounded larger numbers to the same place value. Many groups quickly realized they only needed to add extra digits to each part of their number lines to reflect the larger number...they were otherwise rounding to the same place! It worked out as a nice exploratory activity, rather than me just showing them the rules for rounding to any place.⠀⠀⠀⠀⠀⠀⠀⠀⠀The only bad part? The number lines will have to go soon, as they are stepped on throughout the day 😭 I wish we could keep them all year!⠀⠀⠀⠀⠀⠀⠀⠀⠀#math #roundingnumbers #iteachmath #iteachfourth #iteach4th #teachersfollowteachers #teachersofinstagram
  • Have you used the checkboxes in google sheets before? They are an absolute godsend!⠀⠀⠀⠀⠀⠀⠀⠀⠀This year I’ve been using them to keep track of our daily read alouds. I’m embarrassed to admit this...but I forget which books we’ve read already! #teachinginyour40s 🙄⠀⠀⠀⠀⠀⠀⠀⠀⠀And adding them is super easy. Just go to the cell you want your checkbox to appear in. Click Insert, then choose Checkbox.⠀⠀⠀⠀⠀⠀⠀⠀⠀You can change the size and color just like you would with any text. And you can click to check and uncheck. You can also hit your spacebar to check the boxes.⠀⠀⠀⠀⠀⠀⠀⠀⠀I hope this is of help if you haven’t tried this feature yet! The link to this reading tracker is in my profile if you’d like to see more...all the letters are linked up for you and there are some automatic counters to track everything you read: bit.ly/DigitalReadAloudTracker⠀⠀⠀⠀⠀⠀⠀⠀⠀#googledrive #googlesheets #technologyintheclassroom #classroommanagement #classroomorganization
  • Anyone else feel the same?⠀⠀⠀⠀⠀⠀⠀⠀⠀A very dear friend here in the states told me her likes were now hidden...and I was absolutely thrilled at the prospect!!⠀⠀⠀⠀⠀⠀⠀⠀⠀As much as I hate to admit it, I feel I have lost my taste for posting over the years. I worry too much about how my next post will be received. I think too much about what is best to share to get the most likes I can. I don’t do this in any other aspect of my life...so why do I worry here?⠀⠀⠀⠀⠀⠀⠀⠀⠀I just want to post without thinking about these things. And I can't wait until my experience on IG is changed. Anyone else?⠀⠀⠀⠀⠀⠀⠀⠀⠀#teachersfollowteachers #teachersofinstagram
  • Prepping for field trips with digital slides!⠀⠀⠀⠀⠀⠀⠀⠀⠀Ok. It took me 18 years to figure this one out.⠀⠀⠀⠀⠀⠀⠀⠀⠀After YEARS of talking through upcoming field trips and trying to explain what to expect, it suddenly occurred to me...why not SHOW my kids all of the information in google slides?⠀⠀⠀⠀⠀⠀⠀⠀⠀I mean we all know pictures are worth a thousand words. And I can prep the slides ahead of time, so I don’t forget to include any important information.⠀⠀⠀⠀⠀⠀⠀⠀⠀I keep it simple. A slide for the chaperones and groups. A second slide with an overview of the trip. And one more featuring the schedule, how to prepare, and any important notes.⠀⠀⠀⠀⠀⠀⠀⠀⠀I already used my first set last week and it was such a big help...and a huge timesaver!!⠀⠀⠀⠀⠀⠀⠀⠀⠀How do you prep your students for field trips? I hope this idea is if some help if you are looking to try something visual!⠀⠀⠀⠀⠀⠀⠀⠀⠀#fieldtrip #classroomorganization #classroommanagement #googleslides #googledrive #technologyintheclassroom #iteachfourth
  • Sooo simple, but what a game-changer!!⠀⠀⠀⠀⠀⠀⠀⠀⠀I first learned about these magnetic numbers for the date from @twoteachersinfifth, they always have the best ideas!⠀⠀⠀⠀⠀⠀⠀⠀⠀And now I NEVER forget to post the date!⠀⠀⠀⠀⠀⠀⠀⠀⠀Actually, my students don’t forget...since this is one of our class jobs 😉⠀⠀⠀⠀⠀⠀⠀⠀⠀The numbers are by Teacher Created Resources and can be found on Amazon.⠀⠀⠀⠀⠀⠀⠀⠀⠀I store ours in an Iris photo case...and I’m sharing the label on here in case anyone can use it.⠀⠀⠀⠀⠀⠀⠀⠀⠀Please click the link in my profile to grab a copy of the label! bit.ly/WhiteboardNumbers⠀⠀⠀⠀⠀⠀⠀⠀⠀How do you like to post your date each day?⠀⠀⠀⠀⠀⠀⠀⠀⠀#classroommanagement #classroomorganization #iteachfourth #iteach4th #iteach456
  • Looking for some new google fonts for your drive?⠀⠀⠀⠀⠀⠀⠀⠀⠀This summer, I compiled a huge list of favorite teacher fonts for google, thanks to so many of you who shared your favorites! 💜⠀⠀⠀⠀⠀⠀⠀⠀⠀You can grab this resource from the link in my profile. Then, just copy and paste your new faves to add to docs and slides in your own drive!⠀⠀⠀⠀⠀⠀⠀⠀⠀bit.ly/FavoriteGoogleFonts⠀⠀⠀⠀⠀⠀⠀⠀⠀Are there any we missed? What’s your favorite google font?⠀⠀⠀⠀⠀⠀⠀⠀⠀#googlefonts #googledrive #technologyintheclassroom #iteachfourth #iteach4th #iteach456

Follow @ladybugsteacherfiles

×