Google Sites. Lesson Planet

Transcription

1 Google Sites

2 Introduction Welcome to Google Sites a course designed to provide you with the essentials for using this simple and free tool to create your own website that meets your needs as an educator. The course is designed for K-12 educators looking to integrate technology into their classroom by developing their first website with Google Sites. Creating a resource like this offers many opportunities for engaging students and their families. By the end of this course, you will have created your own website with a template offered in Google Sites. This Guide Will: Cover how to add, remove, and modify the content on your website Demonstrate the editing tools and menus Show you how to create a table Teach you how to change the look of your website, including the background color and image Provide information on how to collaborate with others to build your website Before You Get Started Check your district or school policy regarding posting any material online before proceeding. Be particularly cautious with posting information that could personally identify your students. For this course, you will need to have a computer with Internet access, a web browser such as Chrome, Firefox, Internet Explorer, or Safari, and a free Google account. The guide will lead you through how to create a Google account. Each short chapter is designed to address one topic at a time so that you can build your skills step by step. Please do follow along and try out each step while you work i

3 through the guide. Feel free to skip around to the sections that you need most. To help focus your website, identify two or three types of information to display, such as your class calendar and homework, that you think your students and families would benefit from. To help focus your website, identify two or three types of information to display, such as your class calendar and homework, that you think your students and families would benefit from. Don t worry if you aren t sure where to begin. The guide will model creating content commonly used on websites so that you can follow along and adapt the content to meet your needs. The goal of the course is to get you up and running with your first website as quickly as possible, so continue to start that process. ii

4 1 Creating a Free Google Account To begin, make sure you have access to a Google account. Your school or district may have already provided one for you. If you do already have an account, go ahead and sign in. Click the grid in the upper-right corner and then choose Sites to get started. Otherwise, continue with this chapter. Lesson Planet 2014 Get started with your site by signing into or signing up for a Google account. Creating an Account If you know you don t have access to a Google account, visit and follow these steps: 1. Choose Sign In 2. Select Create an account. 3. Complete the requested information 4. Choose Next Step 3

5 You have now created a Google account, which includes a free gmail account and free access to Google Drive. 5. You will be prompted to add a photo; you can select Next Step even if you don t choose to add a photo You have now created a Google account, which includes a free Gmail account and free access to Google Drive. Google Drive is a storage location for your files and the website you will create. Click the grid in the upper-right corner to be taken to Google Drive and your other Google Apps. Once you re here, you are ready to take the first steps toward creating a website. 4

6 2 Creating a Website You are now ready to create a website using the free Google app called Sites. When you see the word Sites, think websites. The Google Sites app will help you create your own websites. Accessing the App Once you have logged into your Google account, click the grid in the upper-right corner. Notice the list of Google apps here, including Mail, Drive, and Calendar. You may see Sites listed here as well if you are using a school or district Gmail account and that feature is available to you. Now click on Sites if you have that option. Scroll down the list of options and locate Sites. Click on it. You will be taken to login screen. Use the same password you set up for your Google account. Selecting a Template 1. After you open up Sites, you will see the word Create on the left; click on it 2. Skip over Blank template, which would be used to create a website from the ground up; the goal of this course is to become familiar with the basics of the If you created a Gmail account on your own, you will see a screen like this and will need to click More and then Even more from Google. 5

7 This guide will use this particular template in the examples during the rest of this course. It s a great one to start with for your first website. Sites app and using a pre-exiting template will help you do just that, and quickly 3. Your screen may look a bit different than the images in this guide, but no matter what, you will see Browse the gallery for more 4. Select that and notice a list of template options 5. Select Schools & education from the categories on the left 6. Notice the different titles; each is descriptive enough to provide a general understanding of what the template was designed to do 7. Scroll down and open the one labeled Science Classroom Website This will give you a general sense of how the template looks. This guide will use this particular template in the examples during the rest of this course. It s a great one to start with for your first website. 6

8 The guide will walk you though changing the colors and content so that the template matches your needs, so don t worry if you don t teach science or don t intend to create a website around that subject. Of course, feel free to choose a different template. It is much easier to take your time and choose one that you think fits your needs rather than trying to change it later. You can create a site along with this guide as a practice and go back to make a custom site later on. Depending on the type of account you have, you may be asked to type a verification code. Press the enter or return key when done You can access your site at any time by visiting sites.google.com on any computer at home, school, or elsewhere. You ve just created your webpage, and now it s time to begin understanding how the template works. Naming and Saving Your Site Click on Select and notice that the Theme Science Classroom Website is now highlighted in red After you ve selected the theme, give your website a name The webpage address, or URL, is listed here You can change that to any other name you want, as long as it hasn t been used by anyone else. You will be notified if someone else has it at the end of this process At this point, ignore theme and more options 7

9 3 Understanding the Template In the previous chapter, you selected a website template and saved it with a URL that can be passed along to others. Before you can begin adding content to this webpage, make sure you have signed into your account in one of two ways: Visit sites.google.com Visit your site using the URL, scroll down to the bottom, click Sign in Homepage The first page that visitors will see when they visit your site is called Home. This page will be referred to as your homepage through this course. 8

10 Take a quick tour of your new homepage. Along the top is a background image as a black background color. You will find out how to change that and other aspects of the website in other chapters. Below that is the title of the webpage. Moving Around Your Site Next are the navigational buttons, which provide links to the different webpages that make up your website. Body Then there is the body of your webpage. You can add different types of information including such items as: Text Pictures Files from your Drive account You can remove any and all of the information in any section so that it matches your needs. Once of the more challenging aspects of starting a new website is visualizing what a template could look like after changes are made. As you progress through this course, you will see this template change its look to something a bit more classroom-friendly. Try sticking with this template even if you aren t sure you like how it looks at this point. In order to make changes to this website template, you ll need to understand the editing tools. Move on to the next chapter to learn about these tools. 9

11 4 Overview of the Editing Tools Make your site your own using the provided set of tools. Find out what they are and their basic functions in this chapter. Google Sites has a uniform set of editing tools that allows the content to be modified to fit your needs. There are three basic editing commands to understand: Edit Page (represented with a pencil icon) New Page More Edit Page Click on the pencil icon and notice the menu options along the top: Insert Format Table Layout 10

12 Create a New Page The focus of this course is modifying existing pages within the template. The guide won t focus on creating new pages, but know that the option is there. Each of these menu choices has a chapter of its own full of detail about options. Below are several options, such as undo, redo, fonts, font size, bold, italicize, and underline. These are followed by text color, text background color, and link to another website. On the right are options to create a numbered list, create a bulleted list, decrease indentation, add indentation, change justification, and remove all formatting for text. More There are a lot of options here. In the chapter on collaborating, you will find information on Revision History, Subscribe to site changes, and Sharing and Permissions. There are several other features here that can be explored as the need arises, and as you begin to grow your site. The last option is labeled HTML. This is a place where, if you know HTML, you can come back and add your own code if you want you customize your website. Since the goal of this course is to help you create your first website as quickly and easily as possible, HTML will not be covered. Now that you have toured the Edit Page button, go back and look at the other options. Click on Cancel since we haven t made any changes that need saving. 11

13 5 Insert Menu The Insert menu is a great place to begin looking at the different types of information that you can add to your website. The goal of this chapter is to familiarize you with the various options found within the Insert menu. Insert Options To begin, choose the Edit Page button ad then click Insert. Notice three categories: Common Gadgets Google Common The Common section allows you to add images, links to other webpages, and contains other items that will be helpful as you grow your website. 12

14 Gadgets Next is a list of gadgets. Gadgets are simply tools built to do the difficult work of adding more complex information located within other websites or files. Recent posts, Text Box, and More gadgets are some options you might use right away. Having a website can make it easy for your students and parents to access important information in one location from any computer. Gadgets can help take information from one webpage and automatically update your page with that information. This way, all the information can be easily accessed in one page. Google The options here all involve inserting existing files from from Google Drive account. This is particularly helpful if: You have a set of images you have taken and want to place on your page You want to post a presentation from Back-to-School Night so that parents who missed the event can still view the information You are going on a field trip and decide to post the permission slip on your site so that it can be printed at home You are probably starting to get the idea. Having a website can make it easy for your students and parents to access important information in one location from any computer. Practice: Add a Calendar to Your Site Insert your Google Calendar as an example of how this works. Click in the area below the video and press the X button to remove the video. 13

15 Next is a set of options; choose Agenda under the View option, set your timezone, and give your calendar a more descriptive title 1. Under Insert, choose Calendar 2. Notice a set of different calendars appears on the right; you might see different options if you are using a district or school Google account 3. Find the calendar with your name or address in it and then choose Select; this will show all the calendar events you have added to your calendar, and it s public 4. Next is a set of options; choose Agenda under the View option, set your timezone, and give your calendar a more descriptive title, such as Classroom Calendar 5. Click Save when you are done Notice that there is a large blank area and the words Google Calendar along the top. That is to be expected. See how it looks by clicking Save in the upper-right corner. The calendar will appear with all the information you have added to it. 14

16 When you enter important information in your Google calendar, your website will automatically update to reflect changes. When you enter important information in your Google Calendar, your website will automatically update to reflect changes. You don t need to go back in and add it a second time to the calendar on your site. This same concept applies to any of the files created in Google Drive that you choose to insert into your website. Any changes made to them will automatically update. 15

17 6 Format Menu The Format menu primarily focuses on changes to text within a given area on your website. Try Out the Format Menu Choose the Edit Page option and highlight the first bullet point. Next, choose Format and scan the options here. The first four choices all deal with the size of the font. Start by selecting Minor Head H4 and notice what happens. Next, select Sub-heading H3 and then Heading H2 and pick the one you think is the right size for your title. Choose any of the other options, such as Strikethrough, Superscript, Subscript, or any of the alignment options to make additional adjustments. Apply what you have just learned by changing the title of the text box to something more useful, such as Spotlight on Learning. 16

18 The text here could be left justified. Select all the text and find that choice in either the editing tools or the Format menu. Next, write a brief description of a recent unit of study and locate areas that might need some formatting. The text here could be left justified. Select all the text and find that choice in either the editing tools or the Format menu. Feel free to continue to make adjustments with the Format menu or the editing tools. 17

19 7 Table Menu The Table menu offers the ability to insert and modify a table. Think of a table as a grid. That grid can be used for multiple purposes. In this chapter, you ll find out how to construct a rubric for assessing student writing. You might think of your own use for a grid, or even decide that you don t want to include one on your website. Review how to construct one so that you are familiar with the process if you ever need it. the ability to delete a table, row, or column 4. For this example, create a simple fourpoint rubric to assess writing for fourth graders; type in Writing Rubric, increase the font to 18 point, and press the return or enter key on your keyboard 5. Your table will need to be five cells wide and four down in order to assess organization of ideas, support, evidence, and conventions Adding and Editing Table 1. To begin, click the Edit Page icon 2. Next, click in the large blank area at the bottom of the page, just to the right of AdSense, and press the delete key on your keyboard or the X button 3. Select Table from the menu and review the options, which include: Insert table, options to add rows and columns, 18

20 6. Back under table, choose Insert table, then drag five across and four down so that 5 x 4 is shown 7. Next, begin entering information into each cell within the table Don t worry if the text appears bunched up; enter the information first, then adjust the size of the table later. Once you are done entering information, click on a cell. Notice that white handles appear. Click to hold and move the handles to make adjustments to the dimensions of your table. Notice that sometimes you may start typing a set of words, but they appear jumbled together. After you are done entering all the information for that cell, you can go back and add spaces by clicking and tapping the spacebar once. Once you are done entering information, click on a cell. Notice that white handles appear. Click to hold and move the handles to make adjustments to the dimensions of your table. You can adjust the height, width, and size of the rows and columns by clicking and dragging the handles that appear. You have just finished creating your first table. You can go back and modify it at any point and change the subject of the table to best meet your needs. 19

21 8 Layout Menu The layout menu allows you to shift and organize the information on your website. Quick Tour: Layout Menu To better understand what this menu does, click on the Edit Page icon and choose Layout. Notice that there are small images on the left of the menu and brief descriptions on the right, such as One column (simple). The template you are using is indicated with a checkmark. The particular template used for demonstration in this guide is a website that organizes information using two large columns. It also has space at the top and bottom. Take a closer look. The area along the top is currently blank. The two columns contain information that you ve added: Spotlight on Learning and your calendar. The area along the bottom shows the rubric you created using the table option. This gives you a rough idea of the layout that is currently being used. You don t need to make any changes to the layout at this time, but you can experiment with different layouts at any time. 20

22 9 Editing the Website Colors The background of your website can be changed to fit your needs. While it could work to keep the image at the top and the dark background that come with this theme, you can certainly make some improvements. Changing the Look of Your Site First, examine your options. Click on the More button and select Manage Site Locate the words Themes, Colors, and Fonts along the left and notice the different aspects of the site that we change Altering the Site Header Start with changing the site header. This is the area that currently has the purple and blue circles and lines. You can place an image of the school s logo or mascot if you have a digital copy, or another image you have created. 21

23 As with posting any student information, make sure to post photos of students only if they are consistent with your school or district policies. Locate the Background section and choose the image icon Choose an existing image or take the time to capture an image, transfer it to your computer Select it, and click Choose As with posting any student information, make sure to post photos of students only if they are consistent with your school or district policies. Note that the amount of the image visible will depend upon its size. Click on Options and notice Repeat, Horizontal Position, Vertical Position Try experimenting with these options to get the result you want Next click on the word Title; notice that font, font color, and font size can all be changed here Click on the font name and choose something different Click the 24 pt option to take a look at your size options 22

24 Change Background Color Now that you have changed the header, change the background where the content is located. Choose Content Area Click on the paint bucket icon Choose a color that is found somewhere in the photo you just added to the header Navigation Button Color Finally, take a look at Horizontal Navigation. These are the buttons labeled: Home, About the Teacher, Customize the Template, and Sitemap. Choose the color you would like to try; try to find a color other than what you used for the background color of the site. Change the color of the button that indicates where you are to something different than the other buttons Feel free to experiment with the other options, such as text. For now, you have personalized the template enough to move to the next topic: editing the navigation buttons. Select Background and then the paint bucket 23

25 10 Editing the Navigation Buttons In the last chapter, you learned how to customize the look of your website, which included the navigational buttons along the top. Renaming and Deleting Buttons Currently, these buttons are labels for other webpages, and you can rename these in anticipation of updating the content on those pages. Two of these buttons, Customize the Template and Sitemap, can be removed to keep all the buttons focused on your classroom. Leave the Home button in place, since that will return the viewer to this first page. Also leave About the Teacher, but personalize that button. 1. First, choose More, then select Edit Site Layout and click on any of the buttons 24

26 2. Notice that the two options you want to remove are listed here in the Configure navigation window 3. Click once on Customize the template and click the trash can next to it Notice that the two options you want to remove are listed here in the Configure navigation window 4. Remove the check mark next to Sitemap to take the link off the webpage 5. Click OK and then Close To add a button, you need to learn how to add a new page. Find out how to complete both of these actions in the next chapter. 25

27 11 Creating a New Page and Button In the last chapter, you looked at customizing the navigation buttons along the top of the website. The next stop in building your first Google site is to learn how to create a new page and a corresponding button that will appear in the navigation bar. Create a Practice Page For this example, create a new page called Homework Help. To begin, click on the New Page icon Next, name your page Leave the rest of the options as they are and click Create Notice that you will be taken to a brand new page with the title already in place. At this point, you are ready to add links to websites that could be useful resources for your students as they complete their homework. Inserting Links 1. To begin, locate a website such as the Tips for Writers page on the National Council of Teachers of English website; copy that URL 2. Next, choose the Insert menu and then Link 3. Locate Web Address and paste the URL into the filed under the works Link to this URL 4. Under Text to Display, type Writing Tips 5. Notice Open this link a new window? Click on that so that your website 26

28 stays open while a new window with the writing tips appears You can keep adding links by repeating these steps and adding additional resources, such as YouTube videos and files from your Google Drive account, by using the Insert menu. 6. To make the link more prominent, highlight it and increase the font, change the color, and make any other adjustments using the tools located in the toolbar You can keep adding links by repeating these steps and adding additional resources, such as YouTube videos and files from your Google Drive account, by using the Insert menu. Click Save when you are done. Make a Corresponding Button It s time to create a navigational button for the Homework help page. 1. Click More and choose Edit Site Layout 2. Click on any of the buttons and the Configure Navigation window will appear 3. Select Add Page and choose Homework Help from the list of webpages 27

29 To edit the name or spelling of the button, you must repeat these steps, delete, and then readd the button. 4. Click OK and then click OK a second time 5. Click Close 6. Notice that Homework Help now appears as one of the buttons To edit the name or spelling of the button, you must repeat these steps, delete and then re-add the button. Congratulations! You ve just added a new page and button. You can create more pages to fit your needs by repeating the processes detailed in this chapter. You now have the basics for editing your site down and are ready for the basics of collaboration with Google Sites. 28

30 12 Collaborating Google Sites allows you to invite others to collaborate on creating, editing, and removing content on your site. The great thing about using the collaboration tools is that you don t need to be in the same location or even working on your website at the same time as your collaborators. A few examples of collaborative sites for which one or more teachers are responsible for posting information: Websites developed by grade or subject level teams Team teaching situations School or district sites It is best to be very selective about who you collaborate with while developing your website. Clearly communicate what information you expect on the site, since what is posted can be viewed by anyone. How to Collaborate With Google Sites In order to provide someone else the ability to edit your website, you will need to choose More and then select Sharing and Permissions. Notice that you are listed as the owner. This means you have full control over modifications to your site. 29

31 Adding People and Editing Permissions You can invite people to collaborate and work on this site with you by adding their addresses into the area labeled Invite People. You can invite people to collaborate and work on this site with you by adding their addresses into the area labeled Invite People. Next, click on the phrase Can Edit to the right. This is the area where permissions can be changed. Permissions are the amount of control you allow the selected person to have over your site. Is Owner allows other to invite and change the permissions for other people, change the theme and layout, change the name of the site, and delete the site altogether. Can Edit allows others to rearrange the order of pages, make new pages, and edit and delete pages and content. Can View limits others to viewing the site only. This isn t super helpful for collaboration, and the site is already designed to be viewed by the public. 30

32 Start with Can Edit as the permission level and come back and make changes at any time. Choose Add Message to include a note with your invitation and select Share & Save when you are done. Click on any of the version numbers to see what was changed and notice that you can revert to a previous version or compare two versions of the same page. Next click on the name of your site in the upper-left corner. Click More and notice a few more useful options that are relation to collaboration. Revision History The Revision History option is really helpful if you want to review when changes were made and by whom, in case you need to change your website to a previous state. Click on any of the version numbers to see what was changed and notice that you can revert to a previous version or compare two versions of the same page. Choose Back to version history listing and choose Revert to this version if you want your site to look like it did at a certain point in time. Click on the name of your site in the upper-left corner to return to your site. 31

33 Subscribe to Site Changes One last option to consider is Subscribe to site changes, which can be found by clicking More. If you choose this option, you will receive an every time changes are made to your site. That way, you can keep close tabs on your site s development. To enable this feature, select Subscribe to site changes. Note that no other menu or window will appear. To unsubscribe, choose More and then Unsubscribe from site changes. A phrase will appear at the top of the site that state You will no longer be notified when changes are made to this site. You are now ready to begin collaborating to develop your website. 32

34 13 Next Steps You have now created your first website and are ready to put it to use. Congratulations! This chapter includes some suggestions to help you continue building your website. Pages You Could Create A website has the potential to be used as a portfolio. Collect images of student work, such as art projects and written work samples, and display them on your site. Develop a page for each subject or class you teach. Make a page devoted to providing key concepts and practice problems with solutions to help pre-teach or re-teach content. cles, and other engaging instructional materials for students to view at home and then discuss and practice in class the next day. Think about the needs of different populations in your classroom, such as second language learners, and create a set of links to web-based resources that fit their academic goals. Design a page for professional development. Add links to sources of videos and other materials that you find most helpful. No matter what you choose, you ve already achieved success by creating a website to meet the needs of your classroom Devote a page to materials for a flipped classroom. On the page, post videos, arti- 33

35 Appendix Chapter 1 Google Chapter 3 Google Sites sites.google.com Chapter 11 NCTE Tips for Writers 34

36 Credits Rich Dixon (author) Director of Professional Learning - Lesson Planet MA- TESOL Multiple Subject Teaching Credential CLAD Certification Jennifer Gibson (author) Director of Content & Learning - Lesson Planet MA- Teaching and Technology Multiple Subject Teaching Credential Noel Woodward (editor) M. Education Single Subject Teaching Credential Karen Amling (editor) Based on the original EdTech Professional Development video course 35