Google Sites

A Class Website

• Have you ever had students miss a class and you had to reteach all the content material, perhaps for each one at different times?

• Have you ever had students ask for review material from a class that they came to? 

• Have you ever had a student say that they didn't know about homework, didn't know exactly what the homework was, or didn't know when the homework was due?

• Have you ever wanted to give your students a formative assessment and not hassle with sorting through all the pieces of paper to understand the results?

• Have you every had two or more parallel classes in a year, that needed the same type of content matter? Have you ever taught a class that needed most of the content matter you used in a previous year? 

• Have you ever wondered if your students gave the important notices to their parents? Have you ever wanted to give the parents information without having to call each family (or each guardian)?

• Have you ever wanted to collect information from your students or their parents without dealing with piles of pieces of paper? 

All these annoying and time-wasting events, and others, can be avoided if you have a class Website (with the proper elements), which you up-date with important content matter and precise  homework assignments for each class. You can also use the class Website to announce important information to the students and to their parents. 

Yes, it takes a bit of time and a bit of thought to create and maintain a class Website, but in the long run, you will save much more time and energy! Moreover, after the initial learning curve, building and using the Web site will become increasingly easier. Not only will your current students (and their parents) be able to find information, you can use the same Website (or a copy of it) year after year for the same type of class with very little work.

Where are we going this lesson?

Click here to view a sample website, which can serve as a model for your website. It has the correct structure, following the rubrics, but not the content. You will have to construct your own site, with the proper content. 

Google Sites vs. an Institutional LMS

If your work place has its own LMS (Learning Management System); like Google Classroom, MicroSoft Teams, Moodle, Blackboard, etc.; then you will probably want to use the powerful options of these tools. On the other hand, there are some important reasons to consider using Google Sites to build a class Website, in addition or instead of the LMS:

1. Like the institutional LMS, it allows you to present content material and links to the students. 

2. The learning curve for Google Sites is usually much lower than LMSs.

2. It is probably much easier to use, in the long run, than most LMSs.

3. It makes you the owner of the content, not the institution. You have constant access to the content.

4. It is portable. If/when you move to a new school, you still have control over your material, barring issues of copyright. 

Constructing Your Google Sites 

Getting Started

Here are video snippets of a longer tutorial from 9 July 2024, in which Russell Stannard explains how teachers can construct and use Google Sites. The snippets give you the basics for your homework this lesson and for the final project of the "Expanding the Digital Classroom" course. 

After watching the snippets, you can watch  the complete video  Please remember that Google, along with most other online companies, often changes the interface of its tools, so the tutorial may not be 100% accurate. Russell Stannard posted a second video (OPTIONAL) that covers advanced features of Google Sites.

The first snippet, below, explains how to start building your Google Site, add some textual and video content, and add new pages. PLEASE NOTE:

If you are looking at a published version of your website, just scroll up a bit and you will see the EDIT icon (a pencil) in the lower-right of the screen. Just click on this icon to enter the EDIT mode. 

In the EDIT mode, Russell Stannard likes to put his curser at the place he wants to INSERT something new and then  double-click to open the options in Google Sites. You can also so this by accessing all the options in the INSERT column (on the right) of the EDIT MODE. Just make sure that you have SELECTED  the section (i.e.,  It has a blue border.) just above the section you want to INSERT something into. Google Sites has to know where to INSERT your new item! 

PLEASE NOTE: For some reason, the PREVIEW option for embedded videos does not work in Israel. As you are building your website, use PUBLISH it after every addition or change, then click on VIEW at the bottom of the page to make sure your embedded videos look right on the screen. 

Publishing Your Site and Embedding Google Products

In this next snippet, Russell Stannard demonstrates how to publish a newly created Google Site to the Internet (and how to unpublish it). Please note:

• The file name must not have any spaces in it!

• Make sure your Google Site is PUBBLIC (i.e., "anyone with the link") when you publish it so other people can see it. If it is PRIVATE than only specified people can see it.

Watch how to share editing rights with other people, but don't worry about this for now. You may want to know this if you decide to set up some Google Sites for your own students. But DO NOT share editing rights for your own class website. Other editors may destroy some, or all, of your work by accident!!

Stannard then demonstrates how to show Google Slides and Google Docs in a webpage. Because they are Google products, they are "embedded" automatically. Make sure you have SHARED each of the items as PUBLIC in your Google Drive, otherwise other people will not see them! (You will see them as the "owner," but other people will not see them as the "users.")

In this third snippet, Russell Stannard explains how to EMBED non-Google products in the Google Site by using the "embedding code." He uses Padlet as an example, but please be aware that every non-Google product has a slightly different way to access the embedding code. We will deal with this problem after watching the snippet. 

In addition, Stannard demonstrates how to find your Google Site in your Google Drive. Instead of wasting time looking for your Google Site this way, I strongly suggest bookmarking your Google Site (i.e., making it a "favorite") in your browser's navbar.  That way, you can easily access your Google Site via the bookmark.

EMBEDDING

It's important to understand the difference between LINKING vs. EMBEDDING. A link usually brings the user to a different page. 

• LINKS in Google Sites will open a new tab for a page that is outside your Website. This keeps the original page (i.e., in your Website) in the "background," which your students can re-access by clicking on its tab at the top of the browser window. 

But once your students have left your digital class (i.e., your class Website), they may start surfing the Internet, spending valuable time at off-task Web pages, possibly even viewing inappropriate content.

• The superior situation is to EMBED an item from another source into your digital classroom and let the students work on the material inside your digital classroom. When they finish, they will be more likely to move on to the next relevant task.

How to EMBED

For YouTube videos embedding is quite easy. Below each video, there is a SHARE icon. Click on that and SAVE the special URL. Then go to the INSERT menu of the EDIT mode in your Google Site and scroll down to the YouTube icon. Follow the instructions from there.

For many other Google services, there are various ways of EMBEDDING via the DRIVE icon in the INSERT menu of the EDIT mode of your Google Site. Russell Stannard demonstrated this with Google Slides and Google Docs. Other Google services require some specialized actions, which we will deal with in the future. IMPORTANT: With all Google products (except YouTube) you must SHARE with "anyone with the link." (With YouTube, you must mark your video as "Public.")

For non-Google tools, you will probably have to use the "< > Embed" icon in the INSERT menu of the EDIT mode in your Google Site. The actual embedding is not a major problem, but sometimes finding the HTML embedding code at the source (i.e., what you are embedding) requires a little bit of detective work. Here is a non-inclusive list of symbols pointing to the ability to embed the non-Google tool:

• SHARE

• EMBED

• EMBEDDING CODE

• <>

• </>

• <HTML>

• or icons like these:

PLEASE NOTE: While EMBEDDING the CODE into your Google Site, make sure you have chosen "CODE" and not "link" in the dialog box.

Reordering Pages, Image Carousels, and Dividers

Here's a snippet from the advanced Google Sites video, in which Russell Stannard explains how to reorder the webpages in the Google Site, create an image carousel, and use dividers. 

Creating a Vertical Menu and Subordinate Pages

Russell Stannard uses the default horizontal menu, across the top of the screen. This style of navigation will quickly become quite messy. For your final project of the course, you will have to create a vertical menu system on the left-hand side of the screen. It's quite easy to do this:

1. In the EDIT mode, look at the top of the page and click on the gear icon (i.e., the SETTINGS icon).

2. You will then see a box with NAVIGATION on the top of the menu. This item will be already selected as the default. 

3. In the "MODE" section (the very first) change TOP to SIDE.

4.  You can now leave the SETTINGS because your change has automatically been saved.

You also have to make at least one SUBORDINATE page to prove you know how to do this. 

1. In the PAGES section (on the right) of the EDIT MODE, mouse over the "mother page" under which you want your subordinate (or sub-page).

2. To the right of the name of the page, on the right side of the screen, you will see the MORE icon (i.e., the three vertical dots). Click on that icon.

3. Click on the "Add a subpage" option.

4. When the dialogue box appears, type in the name of your subpage (i.e., your subordinate page). 

5. When you click on the DONE option (below the name, to the right), Google Sites will bring you automatically to your new page, in this case your new subordinate page in the EDIT MODE. 

6. When you PUBLISH the newly amended Google Site, which includes the subordinate page, you will see an arrow next to the "mother page." When you click on that arrow, you will see all the subordinate pages under that "mother page."

A Few Tips for Web Design for L2 Learners

All ways keep your end-users (i.e., your students) in mind when you are designing your website!

1. Make sure your end-users can actually see what you put on your website. You are the "owner," so you can see everything, but if you don't SHARE things PUBLICLY (or at least "Everyone with the Link"), then the end-users may not have access to embedded or linked content. After you add something to a page, check the webpage with another browser. You can (should) ask another person to view your website, with a critical eye, on another computer.

2. Use fonts that do not hinder speakers of an L1 that doesn't use Latin fonts. Use large (or at least medium) size fonts. 

3. SAN SERIF fonts (without the little crowns and feet) seem to be easier to read on the screen. SERIF fonts seem to be easier to read on paper. (I apologize for using a serif font in this website, but it's the default and you are not L2 learners.)

4. Use color combinations that are easy on the eyes. Black on white is good. Black on light-grey is also good.

5. Don't make your end-user drill down more than one (or maybe two) levels. Every additional click may cause an end-user to leave your website. 

Some Caveats 

Despite the very high quality of the preceding tutorials about Google Sites, there are a few caveats to consider:

• To get into the EDIT mode of one of your own pre-existing Google Sites, scroll the Website window up a little. If you are in your Google account, you will see an EDIT icon (i.e., a pencil) in the lower-right corner of the window. (If you have more than one Google account, make sure you are signed into the account that has your Google Site.)

• The EDIT mode offers the choice of double-clicking to get the round INSERT options vs. using the right-hand menu. Stannard showed you the round INSERT option, which you can double-click at the point where you want to INSERT the new item. On the other hand, I would suggest going straight to the right-hand menu in the EDIT mode. The round menu only offers 5 INSERT options, but the right-hand menu offers all the INSERT options, plus access to the PAGES and THEMES options. Just make sure that you have SELECTED the area (i.e., it has a blue border) above where you want the new item to appear if you are using the right-hand menu.

• Be very careful about sharing editing privileges! Well-meaning co-editors can destroy many hours of your work by mistake. (I have learned that the hard way!) If you do share editing privileges, then occasionally duplicate the entire site (via the three-dot MORE icon) and name it as a backup site, with a date. This way, if a disaster befalls a co-edited site, you can go back to the previously saved copy. (There is also the HISTORY option, but having a backup is the safest way to go.)

• For our class, make sure you publish your Google Site as PUBLIC! That's the only way the other students and I will be able to see the Website without a great deal of administrative work the RESTRICTED option requires. On the other hand, you might want to use the RESTRICTED option for your actual classes (particularly if you want to maximize your students' privacy. In this case, you will have to list every student separately as an authorized user.) But if you don't publish personal information about your students, it's probably easier to use the PUBLIC option.

• Remember, whether you use the PREVIEW mode or not, you have to click on the blue PUBLISH button to save any changes you made. 

• Be careful of Google Images! Unless you go deep into the advanced settings, you will not be assured of getting legal images. In fact, assume that the image does have copyright protection. Stay safe and use Creative Commons images! 

• Notice the multiple layers of administration for using items in Google Drive. Presenting certain types of content will necessitate fetching items from Google Drive. On the other hand, if there are easier solutions, use them! For instance, uploading and INSERTING an image from your local computer is easier than fetching the same image from Google Drive (which requires SHARING it with "anyone with the link").

• The issue of Tiny URLs may not be worth the effort. If your students bookmark (i.e., make it a "favorite"), then they have easy access to your site.

• When you are sharing your Google Site with our class, or with your own students, make sure you give them the published site URL!!! Do NOT give out the URL to the EDIT MODE of your Google Site!!

Important Warning!

When you are embedding an item into the INSERT section of the Google Sites EDIT mode, make sure that you create an embedding window big enough to encompass the entire view of the item. Pull the bottom corner at the right further down to the bottom right to enlarge you embedding window.

Check how your students see the embedded items! Go to the REVIEW mode (if you use it) or to the PUBLISHED mode and see the results of your work. If you have to scroll in order to see the content, then you have to enlarge the embedding window. If that doesn't work, you might have to go back to the source and get a smaller embedding code (or embedding URL).

IMPORTANT TIPS:

1. In future lessons, as you create items that will end up in your website (see the rubrics), insert/embed them immediately into your website and check to see if they work. This will save you a lot of work at the end of the course and will allow you to fix any problems.

2. You will have the opportunity to pre-submit your website up until one week after the last session of the course. Based on the feedback, you will be able to fix any problems. After this date, all submissions will be final and not open for resubmission. Please take this opportunity to get feedback on your website before getting the grade! 

Homework:

Please note: Late homework will be penalized 20% of the initial grade. Your first post is worth 60% and the second post (a meaningful response to some one else) is worth 40%.  

1. Start (or continue) making your class Web site with Google Sites. Follow the instructions and rubrics for your semester Web site project as far as you can. (There will be many items that you will be learning about in future sessions, so don't worry if you don't recognize some of them.) 

2. Post the URL of the homepage of your Google Site in the Lesson 12 discussion forum in MOODLE, as your first post. (Make sure you are posting the PUBLISHED mode URL. Do NOT post the URL of your EDIT mode!!!)

3. Examine (and learn from) the Google Sites of at least THREE of the other students.

4. In the Lesson 12 discussion forum, comment on at least one of the sites you examined. Polite constructive criticism will be helpful. In particular, inform the owner of the Google Site if something does not appear on the screen. (This may happen if the item was not correctly SHARED.) Remember the "owner" of the Google Site sees everything, the users will not see items that are not shared properly. 

Heads Up!

Please note that the first draft of you Literature Review (of your seminar paper) will be due on April 20. This is the last day of the Pesach Vacation. Of course, I urge you to get this done as soon as possible, but setting a deadline will help some of your focus in on the seminar paper. Like submission of the seminar paper proposal, submission of your first draft of the Literature Review will be weighted as three times the grade of a normal task.