Google Classroom with Google Sites

Digital Maestro Magazine

Google Classroom with Google Sites

Build an instructional site and reference it from Google Classroom every year.

A pragmatic combination digitalmaestro.org

May 15, 2018

Google Classroom with Google Sites

Table of Contents Creating an instruction site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Creating pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Inserting images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 An overview of Google Docs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Inserting Google Docs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Embed Google Drive folders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 YouTube Content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Embed Google Calendar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Google Classroom. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Parting Thoughts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Digital Maestro Magazine • digitalmaestro.org – 3

Google Classroom with Google Sites

Google sites in combination with Google Classroom is one way to integrate technology resources in a Blended or flipped classroom. Google Sites is part of a Gmail account. We create an account by going to google.com and using the sign-in link in the upper right-hand corner of the search page.

The site service link takes us to the old version of Google Sites. This version might be old but it is very good. It provides a great deal of flexibility and many advanced options. We will not be using this older site. There is a new service Click the Apps launcher to access some of the that is much easier to use. The new site creation free Google applications and services. Find the service has drag and drop tools that make the Sites icon and click on it. If you don’t see the site creation process quick and easy. A link to Sites icon there is another way to access the the new Google Sites service is found in the left service. In the address bar, type https://sites. menu panel. Click the New Google Sites link. google.com and press the return key.

After creating an account, you will have access to the Google Apps launcher. The Google Apps launcher is an icon with nine small squares.

Some people say it looks like a waffle.

... ...

0

ifo0ii My Sites

Deleted Sites New Goog le Sites II

4 – Digital Maestro Magazine • digitalmaestro.org

Classroom Projects lsitwclassroomprnjec t sa le>CI

Shared wi

Google Classroom with Google Sites

If this is your first time accessing the new Google Sites service you won’t see any content.

With Google Sites, we can create multiple sites.

I have created dozens of sites and have not encountered any limitations.

To create a site we click the Plus button in the lower right corner of the page.

The options below the Google Drive link allow us to embed content from YouTube, Google Calendar, and Google Maps. Each of these options will take us to services where we can find a YouTube video, select a calendar, or find a location using Google maps.

l.l

From Drive

Google Embeds

D

Youlube

~

Calendar

9

Map

""

-

The Google Docs options in the last section of the panel are filtered options for adding content.

A blank site will be created for us. The site The Docs option will list Docs in Google Drive. includes a banner at the top for the title and The Slides option will list Slides. The Charts a banner image. The white section below the option will find charts that have been generated banner is where we assemble our web content. with Sheets and display the charts. A chart must be created with Sheets before it will be generated on a page.

•

Your page title

Google Docs

Eil

Docs

c::i Slides

The tools for assembling our site are located in the panel on the right. The first four icons are services to create text boxes, add images, embed web content, and upload content. I recommend uploading all content to Google Drive before adding it to the website. Adding content is much easier once it is on Google Drive.

GI

Sheets

II

Forms

At the top of the panel, we have sections. We are currently in the Insert section. The Pages section lists all pages created within the site. We click the Plus button at the bottom of the Pages panel to create our first page. This would actually be the second page on the site. The first page is the home page currently on the left side of the panel.

Digital Maestro Magazine • digitalmaestro.org – 5

Google Classroom with Google Sites

The themes section has basic site templates with banner images and basic colors. There aren’t many templates. We can easily modify our site with our own banner image and colors. I begin with the simple site template and use it to develop a custom site.

ii'H·Nii

INSERT

PAGES

TT Text box

<> Embed

THEMES

While stretching the box you will notice faint vertical lines in the background. These are column layouts. There are 14 columns with a small gap between each column. These gaps are called gutters. The number of columns and their width cannot be adjusted. The columns are here as guides. They are used to help align content. They are also used to help resize and crop images.

!!

Im ages

a Upload

Creating an instruction site There are many ways to develop content. I will cover the broader content options. These should get you started and help guide your development of a useful classroom site. We all have our teaching style and the site should reflect that style. Your students will come to expect it.

,stronomy

ss While stretching content to the edges you will notice that we cannot stretch the text box all the way to the edge. The last column serves as a border or padding between the content and the edge. Think of it like the margins on a page.

The first step is to give the site a title. Click once On my banner, the name of the class wraps onto on the page title text box in the banner. Provide a second line where it ends with the word class. a title like, Mr. Reyes Astronomy Class.

Click once before the word astronomy and press the return key to force the word astronomy to Title • C-J j the second line. ~

Mr Reyes' Astronomy Class

The title will be longer than the available text box width. Circles appear to the left and right of the text box. These are handles to resize the text box. Use them to stretch the box.

6 – Digital Maestro Magazine • digitalmaestro.org

The basic formatting options for text in Sites includes standard text styles for websites. These styles include titles, heading, subheading, and normal text. The title for our site is using the title style. This style can be selected and changes using the toolbar above the textbook.

Above the site banner and to the left is the site name. The site name is currently in a light grey color. Click once on the site name box. Type Astronomy Class 1A.

Google Classroom with Google Sites

Normal text ....

Above the site name is a blue icon for Google Sites. Click once on the space to the right of the icon. The title we just entered for the site will be placed here by Google Sites.

This is the document name. A site in Google Sites is referred to as a document. This document name is part of the link that will be used to access the site. We don’t have to accept this name. It can be changed. Change the document name to astronomy.

Iii

Astronom

B

I

,_ ,-

·­

c-::>

Type an introduction to your class. It can have instruction for navigating the site and finding content. You don’t have to put a lot of information here in the beginning. The information you want to include here will become evident as the site is developed. Type anything you want and the text box will grow to accommodate the information. Don’t press the return key to go to a new line, the text will automatically wrap. Press the return key once to insert a new paragraph.

Paragraphs on web pages are usually formatted using the block style. We can indent paragraphs by pressing the space key twice. Don’t press the tab key to indent paragraphs. A tab is too much for an indent.

Okay, let’s review. We have learned that a site can have one name for the banner, another for the site title and another for the site document name that is used for the link.

Our first text box Go to the panel on the right and click the Insert section. Click the text box button. A text box will appear below the banner. This text box has a few more options because it is used in the body of a page. This box has the options to bold or italicize text. It has the option to create numbered and bulleted lists.

Digital Maestro Magazine • digitalmaestro.org – 7

Google Classroom with Google Sites

Hover over the main page title again and add other subpages. Title each subpage Venus, The main site page is often called the home Earth, and Mars. Each subpage is created and page. We create additional pages to organize added below the previous. Repeat the same and group content. Content is grouped under process with the other pages. pages with sub-pages. We will create several pages and sub-pages.

Creating pages

Organizing pages

I find it useful to set up pages in a structure that mirrors the content to be taught. In astronomy, I will begin by covering the inner planets. After that I will cover the outer planets, constellations, and galaxies.

The pages on our site are nicely organized. The order of these pages is easy to change. Click and drag a page up or down to change its order.

Release the page when a blue line appears at the location where you want it to be placed.

Click on the pages section and click the Plus button near the bottom of the panel. Title this page Inner Planets and click the done button.

Repeat the process to create the other pages for outer planets, constellations, and galaxies.

...I

Inner Planets

I

Mercury

I

Venus

I

E 71

11::. JI ... ,,.,, II,

+

Create subpages to organize content within each category. Hover over the first page we created. Three vertical dots will appear to the right of the page title. The is the actions menu.

Click the actions menu and select the option to add a subpage. Title the page Mercury and click the done button.

1 1

Make homepage

Duplicate page Propert ies

Add subpage

8 â&#x20AC;&#x201C; Digital Maestro Magazine â&#x20AC;˘ digitalmaestro.org

To place a page as a subpage we drag the page above another page and release when a rectangular highlight appears around the page title.

To promote a subpage it has to be dragged out of the main page.

Hiding pages Created pages are viewable by anyone once a site is published. We donâ&#x20AC;&#x2122;t always need pages to be viewable. Sometimes we need to hide pages while they are being developed. To hide a page we click the actions menu and select the option to hide page. Repeat the process to un-hide the page.

Google Classroom with Google Sites

Inserting images

content.

Click the images button. There is a variety of ways we can add images to a page. The option to add an image through a URL will link to an image located somewhere on the Internet. Be careful of copyright when linking to images from other sites. Linking to images from other sites is not always the most reliable. The owner of the site could decide to remove the image at any time. I recommend placing all images in your Google Drive and then linking to those images.

Find a photo and double-click the image. You can also click on it once then click the select button.

We can insert multiple images. To insert multiple images we click on each image then click the select button. This is a good way to insert a handful of images. This is not the way I recommend inserting an image gallery. There is another way to do this and I will cover the process later.

Select images By lJRL

Search

Yam albLJms

Google Drive

Paste an image URLhere:

The search option is similar to linking to an image on the Internet. The search option is good if you do not already have an image saved.

The option, in this case, is useful because the images returned in the search are in the Creative Commons or in the Public Domain. Images in the Creative Commons or Public domain do not violate copyright law.

Organizing and formatting images Images are placed within image boxes on the page. Use the handles to resize images. Bringing the handles inward too close to the image will result in distorting the image or cropping the image. Cropping occurs when edges of an image are hidden or taken away. Use the handles to resize and crop the image as needed.

Images can be moved by clicking and dragging the image around the page. The column guides help align the image to other sections on the page. Use the column guides to space and tile images.

The option to insert images from your album will display images uploaded to your Google Photos account. Images can be added to this account from smartphones, tablets, and computers. The albums option is a good way to collect and insert images provided by students. Google Photos has an option to share albums for contribution.

The option to add photos from Google drive will access all the folders and files in your Google Drive. This is where we need to be organized with folders for content we intend to share. I recommend creating a main folder for all your instructional content. Create additional folders within this folder to organize documents and Digital Maestro Magazine â&#x20AC;˘ digitalmaestro.org â&#x20AC;&#x201C; 9

Digital Maestro Magazine Thank you for reading these sample pages.

Purchase the full issue atâ&#x20AC;Ś

digitalmaestro.org/shop

Google Classroom with Google Sites

"Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid" ~ Albert Einstein

22 â&#x20AC;&#x201C; Digital Maestro Magazine â&#x20AC;˘ digitalmaestro.org