Google Sites: Link an image

Sometimes when creating webpages you want to make an image clickable so that when your users click the image it will go to another page on your site or an external URL.  Below is a tutorial on how to accomplish this.

Tutorial

1.  Login to your google site page that you plan on editing.

2.  Once you are on the page, click the "Edit" icon that looks like a pencil.

3.  Now we want to add the image that we will add to the page.  To do that we will click on "Insert and choose the "Image" option.

4.  If your image is located on your computer then click the "Choose File" or if you are using an image from the internet click the "Web address (URL)" option.  In this tutorial I will be picking a file I already have on my computer.

5.  Navigate to your image, select it, and then click the open button.

6.  If a link already exists as did mine, just click the "Remove" link so that you can add a new one, or if you already know what the link is then click "Change" and you will save yourself a couple of mouse clicks.

7.  If your image didn't have a link already then just highlight it by moving your mouse while holding the left click on your mouse.  It should change to a different color to let you know it is now highlighted.

8.  Once it is highlighted click the "Link" icon on your tool bar that looks like a chain link.

9.  Now we need to decide where we are linking the image too.  On the left side we have "Sites page", "Web address, and Apps Script.  I would completely ignore Apps Script.  If you are linking the image to another page on your site, just find that site using the directory tree on the right.  If you want to link to an external website, one that you didn't create, then just click the Web Address option and then paste or type in the correct web address.  Click the "OK" button, once you are done.

10.  Once you are done with your edits and adding the link, just click the save button on your page and you are all set.

In Case you missed it: This weeks tech ideas.

I thought I would start a new idea this week on the Education in the Cloud with Web 2.0 Tools.  I am going to start a series called "In Case you Missed it."  This set of blog posts will review some of the posts that I have already made and allow you to get a brief summary of what the post entailed.

1. Import Contacts into Gmail
•  This quick tutorial will demonstrate how to take an exported GMail CSV file and import it into your own Gmail contacts list.
2. Google Sites:  Fly out Menu.
• For those using Google Sites as your class webpage solution, on this post you will be taught how to create flyout menus that you commonly see on other sites.  Flyout Menus are those tabs on a web page that when you hover your mouse over them you see new options appear.
3. Smartboard:  Create a study game that resembles a board game.
• I found this idea on Youtube and adapted it to my own needs.  For those teachers using Smartboard in the classroom, this game can be an easy addition to a lesson on which you would like to improve.
4. Create research citations and works cited pages using a Citation Wizard.
• This online citation wizard is extremely easy to use and will do both APA and MLA style citations.
5. Create a virtual corkboard/presentation using Spaaze.
• Spaaze is a web 2.0 tool that educators and their students can use to present information.  Spaaze give the user another means and opportunity to present.

Google Contacts: Import contacts from somebody else.

It is that time of year when educators across the country are trying to get ready for the new school year.  If you are new to a district and your district is using Google Apps for Education as their email and document collaboration solution, then you may want to get the contacts imported from a colleague who has been teaching longer.  Below is a tutorial on how to import Google contacts into your own contact list.  If you currently have some of the contacts from the imported list, then no problem.  You will be able to merge both lists and names in just a couple of clicks and that is part of the tutorial as well.

Tutorial

1.  First this tutorial is based on the idea that your colleague has already exported their contacts.  Once they have exported their contacts have them email you the file that they saved.

2.  After you have logged into your Google Apps you need to click on the "Contacts" at the top of your screen.

3.  Once you are on your own Contacts page, click the "More" button and then choose the "Import" option.

4.  Click the "Choose File" button and navigate to where you save the Google Contacts file that was emailed to you by a colleague.

5.  Once you find the file click on it and the click the "Open" button.  (Shortcut tip:  Double clicking a file will save you some time because you won't have to click the "Open" button.)

6.  Now click the "Import" button.

7.  Now if you aren't new to the district and you already have contacts on your contact page then you need to "Merge" the duplicates.   Just click the "More" button and then the "find and Merge duplicates" option.

8.  You will then be shown all contacts that have duplicates.  Just click the "Merge" button.

That is all there is to it.

Google Sites: Create a flyout menu.

As schools across nation are gearing up for the new year, teachers may be interested or have already created their own classroom web site.  The tutorial below demonstrates how to create flyout menus using Google Sites.

To jazz up your site a little bit and make navigating it a little bit easier, many web designers us a horizonatal fly-out menu option.  Fly-out menus give options as you hover your mouse over a specific location on your website like the following picture demonstrates.  I hovered my mouse over the "Student Resources" tab and then a menue appeared with links to other website links, links within my site, or even email addresses.

Tutorial

1.  Once you are logged into your Google Site, click the "More" button and choose the "Manage Site" option toward the bottom of the menu.

2.  Toward the left hand side you will see a set of options.  Look for the "General" section and then click the "Site Layout" option.

3.  Click the "Change site layout" button.

4.  There are many options to play with here, and this is a great place to go to add or take away options from your site.  For the purpose of this tutorial though just make sure the "Horizontal navigation bar" check box is checked.  Click the "OK" button.

5.  Now clic the "edite horizontal nav content" link found under the "horizontal navigation bar" section.

6.  Change the style to "Tabs."  You can sure play with the other to options "Boxes," and "Links" to see how that changes the appearance of your Navigation Menu on your web site.

7.  Now find the "Select pages to display" section.  If you are just starting then you wont see a whole bunch here, just the "Add page" and "Add URL" links.  Lets start with the "Add page" link.

8.  If you have pages built in Google Sites, they should display here.  You can even use the search bar to find a specific page.  Once you know which page you would like to appear on your Horizontal Menu click on it and then click the OK button.

9.  Now lets add a website link to your menu bar.  Click the "Add URL" link.

10.  Type in specific text that you would like to display in your menu.  Then type in either a website address or an email address in the second box.  Click OK.

11.  Once you have added all of your pages and URLs you need to organize them.  To the right of the box you will see 4 arrows and a boxed "x".  Use the up and down arrows to arrange the links in order.  Use the right or left arrows to create sub categories.  These sub categories are the fly-out menus and the categories are the menu tabs that you will initially see on your site.

12.  Example:  The "Governing board" tab that you see is my first category.  If you were to hover your mouse over the tab you would then see the sub categories, District Policies and SUSD5 File Cabinet.

Well that is really all there is to making a Horizontal fly out menu using Google Sites.

Smartboard: Create a study game using flip tiles.

Below is a tutorial on how you would go about creating a board game using tiles that have questions on one side and answer on the other.  This tech tutorial will demonstrate how to lock the different parts to the board while allowing you to create game pieces that can be moved.

By the time you are done with this tutorial you should have a game board that looks similar to this.  Kids will roll the dice.  They will move their game piece accordingly and then touch the tile with the question.  The tile will flip over and reveal the answer.  If the student answered it wrong they will have to go back to the start.

1.  First lest create a back ground.  Right click on your main document and choose the "Set Background" option.

2.  Now pick the colors that you want your background to have.  I personally like the gradients so I will actually pick two different colors.

3.  Now once your background is set click on your Gallery button to open up your Notebook's gallery section.

4.  Now search for the key terms "Question flipper," and then click the "Search" button.

5.  Under the section "Interactive and Multimedia" select the type of question flipper that you would want to use for your game.  I chose the 1st one for this game.

6.  Now to get your question flipper onto your game board just left click and hold and then grade it over.  To resize the flipper look toward the bottom right corner of the tile and you will see a "triangle" looking thing.  Just left click on it and drag your mouse diagonally up or down to see it's size change.

7.  Now at the top left of the tile you will see a double arrow.  >>  Click that so that you can edit your questions and answers.

8.  On the top of the tile you should now see a "Front" and "Back" tabs.  These are so that you can edit the text on both sides.  At the bottom is where you can change your font size so that your question can fit the tile better, you can change the color of your text, you can change the font style and at the very bottom you can change the background color of your tile.  Once you have jazzed up your question flipper, click OK.

9.  Once you have the basis of your first tile, you want to copy it so that you don't have to change the styles for every single tile.  Click on the tile, and the either go to "Edit" and "Copy" or use the hot key, Ctrl C.  Then just hit your Ctrl V about 20 times or so.  That will give you 20 tiles to start out with.  Now just drag those tiles about and create the shape of your game board.

10.  Now go back to your Gallery and search for the word "dice."

11.  Select the color and type of dice you would like for your game.  Drag it onto your game board and place it in a good location.

12.  Now go back to your gallery and search for the word "square."

13.  Drag the square onto your game-board and then resize it and then drag it to the beginning/start location of your game.  Now copy that image and then drag the copy over to the end/finish section of your game-board.

14.  Now left click on a blank section of your game-board and start typing the word "Start."  Change the font and color as you want it.  Drag it onto the beginning square.  Now duplicate that action and type the word "Finish" and then drag it over onto your "Finish" square.

15.  Once more click on a blank section and type in the directions/rules for your game.

16.  Your game-board should now look something like this or similar using any design you would like to use.

17.  Now what you are going to do is either go to "Edit"and choose the "Select All" option or using your keyboard hit "Ctrl A."    This will select everything you have on your board.

18.  Now find a drop down arrow on one of your object and click it.

19.  Go to the "Locking" option and then click on the "Lock in Place."  This will now make each tile, all your words so far, and you dice locked so that when you use the Smartboard you don't accidentally move the pieces around.

20.  Now go back to your gallery and search for some cool game pieces.  I chose a dog, cat, mouse, and cheese.  Resize and drag those object onto your "Start" section.

21.  Now your students can roll the dice and then move the game pieces on your board.  That is all there is to your making a pretty slick and easy to make game board that can be a very interactive method of learning and practising review questions.

If you don't particularly want to create a game and just muse my copy here is the download link.  Smartboard Game