GOOGLE SITES HOW TO USE GOOGLE SITES TO CREATE A WEBSITE FOR CORNERS, STUDENT GROUPS, YOUTH CLUBS, YALI STEPHEN PERRY, IRO, GHANA OCTOBER 2014

STEP 1 is to create and then sign into your Gmail account; once signed in, click on the series of dots to the top right of your screen.

Once you have clicked on this series of dots, click on More and then EVEN MORE and navigate to the category HOME & OFFICE and then click on SITES to begin (you are still logged into your GMAIL ACCOUNT)

SITES can also be used to create Company INTRANETS as well as shared Information that all American Spaces at Post can use and share

STEP 2: CLICK CREATE TO GET STARTED: CHOOSE YOUR TEMPLATE, NAME YOUR SITE, TYPE THE SECURITY CODE, then click on the Create Site button.

We are naming this website the XANADU AMERICAN SPACES WEBSITE as a case study of how to create similar sites. This is what the Bare Bones Web Site looks like. Not very impressive is it?

STEP 3 is to click the Edit Button (represented by the pencil) to start the creation process and click Home to create your description. EDIT BUTTON

STEP 4: Using the Edit key function, erase Home, type the name of your webpage, and in the box below describe what you want your web site to accomplish. Click on SAVE to save results. Below, an example of a possible edited page. THE SAVE FUNCTION IS ON TOP

STEP 5: You need to create some TABS on the left, such as AC CONTACT INFORMATION. To accomplish this, use the NEW PAGE icon in the middle, top right, next to the edit function. The New Page has a plus + key as you hover over the icon with your mouse. In the New Page setup, type the name of the Tab representing a specific topic, such as AC CONTACT INFORMATION. You now have a choice of templates: either Web Page or File Cabinet – your preference will dictate which option to pick. Under select a location, choose the first option, page at the top level, to create your sidebar. This places all Tabs on the left for easier navigation. Then, click Create (on top left) when finished.

The New page will look like this slide. Click Create (top left) to save the page. Choice of Templates here

Note that the page you have just created is now on the sidebar to the left. It is time to edit it to add actual contact information! Click on the page just created and then click the Edit key, top right. Your new page will look like this. Next, start typing!

This is how your Contact Page might look: note that in the Add Files at the bottom, you can add your Brochure complete with a map, so prospective clients know how to find your Corner. You can also add your Business Card as well. Then, click Save, top right, to save this page. ADD FILES

To add to your sidebar, or list of specific tabs, you click on New Page to create a new Sidebar item (such as Monthly Reports,) you edit it, save the page, and so on, until your sidebar (left hand navigation items) are complete to your satisfaction. This is the procedure you would use to add additional sidebars, such as in the example below. A complete sidebar navigation page of specific tabs for your Spaces could look like this, but let specific needs at Post be your guide :

STEP 6: Levels of Permission: Next you need to add your levels of permission. DO you want the whole world to see your website? Who do you want to edit, that is, add information and edit documents? Your IRC staff, Corner Coordinators, anyone in PAS? – this is up to you, and you can be highly specific in setting your edit permissions. TO MANAGE PERMISSIONS, click on MANAGE PAGE AND THEN SHARING AND PERMISSIONS, as below:

This is what the Sharing Permissions Page looks like, you can decide if you want anyone on the Internet to view the page and then you set specific edit permissions, as below Can change who can see the web page Can also be highly specific in who you want to edit your page

STEP 7 and the final, but most important step of all: you need to add a Shared Calendar. This is somewhat laborious so please follow the steps below: While still logged into your gmail account, go to calendar.google.com Create a calendar – title it something like SHARED PROGRAMMING CALENDAR for AMERICAN SPACES Go to Calendar Settings – set the time zone, review the title, who can view it, permissions to edit, etc. Go to Customizations to ensure you are pleased with everything. Click update HTML settings and copy the code given Go back to your Google Sites page, create a page titled Shared Calendar (use template Web Page) and then paste code and save. The Calendar will pop up nicely.

Logged into Gmail, type CALENDAR.GOOGLE.COM in a separate window and then click on My CALENDARS on the left and you will see a pop-up titled CREATE NEW CALENDAR. CLICK ON THIS as

When you click on “Create a Calendar,” you see this screen, fill it out, note you can set permissions of who you want to enter calendar and program events – impt to make calendar public, so your contacts can see your full range of programming: see arrows below and then save it by clicking on create calendar at top left of screen.

Step 8, go back to your calendar (type calendar. google.com if necessary) and you will see a list of all your calendars. Click on the one just created ( i.e. SHARED PROGRAM CALENDAR) and you will see “CALENDAR SETTINGS” in the pop-up – click on this as in the illustration below.calendar. google.com

When you click on “Calendar Settings” you will see the following screen.

Click on “Customize the Color, Size and other Options.” See arrow below.

In Customized Settings, you will see the screen below. Provide Calendar Title, set the Time Zone, language, change calendar size by changing the pixels, the day of the week you want the calendar to start on, background color, and anything else for your special customization.

In the same screen, click “Update HTML” and then copy and paste the code given. HTML CODE HERE

Step 9, go back to your Google Sites, making you have created a page titled Shared Calendar, using the Web Site Template, as below, and then click on EDIT, using EDIT FUNCTION (pencil icon)

Step 10, go to Format on top left and click on Code so that is checked. Then using the HTML box (See arrow) paste the HTML code you had previously copied, as below. THEN SAVE

STEP 11, click on the already noted HTML icon (as per previous slide) to paste the Calendar’s HTML code as below and then click Update (see orange arrow)

You will then see this screen.

SAVE CLICK SAVE and as if by magic, your Shared Calendar will now pop up!

Step 12: Creating an event (an American Space program) in the calendar. First give specific permissions through your original Calendar settings, as discussed earlier. Post should give permissions to all Corner Coordinators, IRC Staff, and PAS American Officers to be able to create program events. After specific permissions are given, create a program event in the shared calendar using following steps.

very bottom of the calendar Step 13: to create a calendar or program event by clicking on the small plus (+) key in Google Calendar at the very bottom of the calendar, as shown by the bright orange arrow in this screen

When you click on the plus (+) key, you will see a full-fledged calendar that looks like this

Click on a day and time you want (assuming Post has given you explicit permission to edit the calendar)and create your event – choose your correct calendar – you may have created several!

Notice I chose the Calendar we have just created and I typed the specific event (Book Discussion, noting a specific time and day and month) as in the screen below then click on Create Event (Green Arrow below) to save it Choose the correct calendar TYPE YOUR EVENT Click on Create Event to save it

Once saved, you can then double click on the event title to input more information, such as where the event will take place, any description of the event, set a reminder, even add an attachment - such as a handout, webliography, etc. See the Screen below. See arrows Add location Can add guests if you wish and change any permissions Click Save once finished

Save (TOP LEFT OF SCREEN.) Example of a Completed Program event with all information: Note the Location, the complete Program Description, and the Reminder. Once you are happy with this calendar event, please click Save (TOP LEFT OF SCREEN.) REMINDERS CAN BE SET AND CHANGED DAY BY DAY

To set colors and themes for your page, go to Manage (last Icon on Right, and then Colors and Themes) See Bright Orange Arrow below

Click on the already noted Manage Icon and then on Manage Site as in the screen below, with the bright orange arrow.

You will then come to this screen: The last choice on the left is THEMES, COLORS, FONT. Use this option (note bright orange arrow) for your finished product and how you want your web site to look to the public

Click on Themes, Colors, Fonts and you can choose an overall theme and change the color of any specific section, SIDEBAR GADGETS, ENTIRE PAGE, CONTENT AREA, etc. It is fun to experiment! CHOOSE OVERALL THEME HERE CHOOSE COLOR HERE

Here is just one possibility (out of hundreds) of a possible finished product. Importantly, you can choose what you want your finished site to look like!

These websites can be used to share information with your publics on all American Space programming. The website also serves as an excellent way to communicate with far-flung Corners by having a shared calendar. You can use the same web site for YALI (sharing documents) especially when YALI creates their own site and posts their own documents. Youth Clubs, Youth Organizations, Schools, and Student groups could also be very interested in this site. It is a great teaching tool and schools will love it!

Thanks for your attention. This step by step approach to website creation using GOOGLE SITES has been researched by Stephen Perry, IRO, Ghana October 2, 2014 Accra, Ghana