1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last...

23
1 Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive. Constructivist. Collaborative. Communities. WHAT IS GOOGLE SITE? With one single click, you can create a website without any knowledge of HTML. Google Sites provides you with customizable professional templates to create different look and feel for your site. For Sites created under sites.google.com/site, site storage is 100 MB per site, and max attachment size is 20 MB. There are no set limits on pages per site. For sites created in GoogleApps, site quota is unlimited; and quota per domain is 100Gb. LEARNING OBJECTIVES Create a Google site in DonsApps environment. Learn about various site features, templates, page settings, and manage site. How to create a page, edit a page, add links, add pictures, add calendar, add video, change sidebar navigation, add attachment, and change layout. Share site with viewers and collaborators. Versions and subscription. Sign up for a New Google Site 1. Login to myUSF and choose Email. 2. Click the Apps icon on top right and choose Sites. (If you are working on an iPad, choose DonsApps >Drive> More > Sites.)

Transcript of 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last...

Page 1: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

1

Center for Instruction and Technology Last Updated: 4/10/2015

Create a Google Site in DonsApp

Google Web Site Interactive. Constructivist. Collaborative. Communities.

WHAT IS GOOGLE SITE?

With one single click, you can create a website without any knowledge of HTML. Google Sites provides you with customizable professional templates to create different look and feel for your site. For Sites created under sites.google.com/site, site storage is 100 MB per site, and max attachment size is 20 MB. There are no set limits on pages per site. For sites created in GoogleApps, site quota is unlimited; and quota per domain is 100Gb. LEARNING OBJECTIVES

• Create a Google site in DonsApps environment. • Learn about various site features, templates, page settings, and manage site. • How to create a page, edit a page, add links, add pictures, add calendar, add video,

change sidebar navigation, add attachment, and change layout. • Share site with viewers and collaborators. • Versions and subscription.

Sign up for a New Google Site

1. Login to myUSF and choose Email. 2. Click the Apps icon on top right and choose Sites.

(If you are working on an iPad, choose DonsApps >Drive> More > Sites.)

Page 2: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

2

Center for Instruction and Technology Last Updated: 4/10/2015

3. Click the button. 4. When the Create new site in usfca.edu page opens, choose a template to use. 5. Choose a Blank template for our training purpose.

6. Enter a Name for your site. 7. Enter Site categories and Site description if you wish. 8. Choose a theme for your site.

9. Scroll up and click the button again to finish. 10. You will then see the homepage of your newly created site.

Edit and Add Page Content

1. When the new page opens, click the to add content to your homepage. 2. Keep the title Home for your homepage. Start typing content in the document window.

Save your Work • Click the button to save your work after you are finished.

Page 3: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

3

Center for Instruction and Technology Last Updated: 4/10/2015

Create a New Page using the Web Page Template

1. Click New page button to create a new web page.

2. Type a Name for your page and select a template to use - Web Page. Then click the Create button.

Insert an Image

1. To insert image, click Insert > Image, and choose from either Uploaded images or from a Web address.

2. Enter Alt text to describe your image. Then click OK.

Page 4: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

4

Center for Instruction and Technology Last Updated: 4/10/2015

Create an External Link

1. To create an external link, first select text and then click Link icon. 2. Select Web Address and enter the complete URL under Link to this URL. 3. To open the link in a new browser window, check the box next to Open this link in a new

window. Click OK.

4. Click Change/Remove button to change the link address or to remove it.

Create a Relative Link

1. To create a link to another page in your site, first select text and then click Link. 2. Select Sites page and select existing page from the list on the right. 3. Click OK when you are done.

Page 5: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

5

Center for Instruction and Technology Last Updated: 4/10/2015

Create an Email Link

1. To create an email link, first select text and then click Link. 2. Choose Web address and type mailto:useraddress in the Link to this URL link field. 3. Click OK.

Attach Files to a Single Web page

You can attach files on the webpage by clicking on the icon at the bottom of each page. Users can then choose to download the files from your page. Please note that this Add Files option is available on each new page you create except the Homepage of your site. To turn off this option, choose More > Page Settings > Uncheck Allow attachments.

Page 6: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

6

Center for Instruction and Technology Last Updated: 4/10/2015

Add a New Page using the List Template

1. To create a List, choose the List template. 2. Type a name. 3. To create another level, for instance, under ‘About us’, choose ‘Put Page under’, then click

Choose a different location, and choose a location.

4. Click Create to create the new page. 5. Choose a Template from among the four default templates.

Add a Blog using Announcement

1. To create a new page, choose the Announcement template. 2. Type a name. 3. Select a location. 4. Click the Create button.

Page 7: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

7

Center for Instruction and Technology Last Updated: 4/10/2015

5. Click the button to start creating your post.

Add a Presentation

1. Click the New Page button, and then choose the Web Page template. 2. Enter a Name for your page. 3. Select a location. 4. Click Create. 5. After a new page is created, choose Edit Page icon. 6. Choose Insert > Drive > Presentation.

7. Choose the desired presentation to insert and click Select. 8. Use the display defaults, and click Save.

Page 8: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

8

Center for Instruction and Technology Last Updated: 4/10/2015

Insert a Google Calendar

1. Click the New Page button, and then choose the Web Page template. 2. Choose Insert > Calendar. 3. Choose the desired calendar to insert and click Select. 4. Keep all the defaults and click Save.

5. Your calendar is now inserted into your page. Adjust Properties, Alignment, Wrap as desired using the tools provided. Make sure you are in the Edit Page mode, and you are selecting the Calendar.

6. Remember to click the Save button on the top right of the page before the calendar can be displayed.

Page 9: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

9

Center for Instruction and Technology Last Updated: 4/10/2015

Add a YouTube Video

1. Choose Insert > YouTube Video. 2. Copy the URL of the video and paste it to the URL field. 3. Save, and Save again.

Add a Google Document

1. Choose Insert > Drive > Document. 2. Choose your document, and click Select. 3. Click Save to display the document.

Page 10: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

10

Center for Instruction and Technology Last Updated: 4/10/2015

Add a Google Form

1. Choose Insert > Drive > Form. 2. Choose your document, and click Select.

3. Select the form you want, and click Select. 4. Adjust the Height and Width of the display form as desired. 5. Click Save to display form.

Page 11: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

11

Center for Instruction and Technology Last Updated: 4/10/2015

Upload and Link to Multiple Files

1. Create New Page. 2. Select File Cabinet as the template to use. 3. Click the Add File button and navigate to any files on your computer. 4. You can also choose Add from Drive to add documents already saved in your Drive. 5. Continue adding multiple files in your File Cabinet. 6. To link to your files, first click View next to the file and copy the URL when it opens up. 7. In your HTML page, simply paste this URL and set link.

To Create a Simple Table

1. Click Table > Insert Table. Define your table rows and columns. 2. Change the width and height of one cell is not possible; you can drag the white handlers of a

selected cell to change the width of a column or height of a row.

Page 12: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

12

Center for Instruction and Technology Last Updated: 4/10/2015

To Move a Page

1. Navigate to the page you want to move. 2. Choose More> Move Page. 3. Or, choose More >Manage Site, and then choose Pages. 4. Click and drag to move pages to a new location.

Disable Attachments and Comments on a Page Choose More > Page Settings, and then uncheck Allow Attachments or Allow comments.

Delete a Page

First go to the page you want to delete. Choose More > Delete Page, and Delete again. Create Page Template

1. Choose More > Save as Page Template. 2. Enter a name for it. Click Save. 3. Saving a page as a template will create a copy of this page that you and others can use to

create new custom pages. Any content on your page will be included in the new template.

Change Page Template

1. To change your existing page template, choose More > Change Page Template. 2. Then choose a template, and click the Change button.

Change Site Information, Site Themes, Colors and Fonts, and Delete Site

1. From More > choose Manage site.

2. Under General, you can delete the entire site by clicking the button. 3. Under Themes, you can change the look of your web page. Click Preview before you Save. 4. Under Colors and Fonts, you can customize colors, fonts, and logo of your selected theme.

Click Clear all customizations to revert to default theme.

Page 13: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

13

Center for Instruction and Technology Last Updated: 4/10/2015

Edit Navigation Properties

1. Click More > Edit Site Layout. 2. Click to Enable Sidebar to show Sidebar. Click again to disable. 3. Hover your mouse over the Home link to bring up the black Navigation tab. Then click on

Navigation to start configure.

4. From the Configure navigation screen, you can choose to display or hide Title of your Sidebar.

5. You can uncheck ‘Automatically organize my navigation’, and then click the Add page link to start manually creating and ordering your navigation.

Page 14: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

14

Center for Instruction and Technology Last Updated: 4/10/2015

Placing a check in the box next to Automatically Organize my Navigation (default) will allow Google Sites to automatically build your navigation structure. New pages will be added to your site's navigation in alphabetical order, and will appear in the same hierarchical structure as they exist in your site. Any time you decide to uncheck the box next to Automatically Organize my Navigation will return your site to the manual method of managing your site's navigation. Any new pages you create from that point onward will not be automatically displayed on the nav. To add new pages on the navigation, simply click the Add page link at the bottom of the Configure Navigation window. You can also select the Add URL link near the bottom-right corner of Configure Navigation screen to add an external link. By default, new page added will appear at the bottom of the list. To reorder pages, select the page you wish to move and click the appropriate Up or Down arrow. The Right or Left arrow is used to indent or outdent a page. Indented links will show up as a drop-down menu on the navigation.

Page 15: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

15

Center for Instruction and Technology Last Updated: 4/10/2015

Add/Delete a New Sidebar

1. Choose More > Edit Site Layout. Enable Sidebar to show.

2. Click the + sign to add a new sidebar item. Then click Add.

3. Hover your mouse over the new sidebar item title and edit.

4. Click the Edit icon to edit the sidebar properties.

5. To delete a sidebar item, click X.

Share Site You can decide who can share your site. Choose More > Sharing and Permissions. Under Add people, you can invite friends to access your site (even if you have set it to private). Simply enter your colleagues’ email addresses and set permissions to either be View or Edit. They will then receive an email with a link to your site. At any point in time, you can click on the Change link to edit their access rights.

Page 16: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

16

Center for Instruction and Technology Last Updated: 4/10/2015

Important: Your friends need to create a new Google account in order to enter your site if they don’t already have one yet. Furthermore, you can turn on the Enable Page-level Permission to control who can view or edit specific pages in your site. To turn on page-level permissions:

1. From the More actions menu, select Sharing and Permissions. 2. In the top right, click Enable page-level permissions. 3. In the dialog box, click Turn on page-level permissions.

Page 17: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

17

Center for Instruction and Technology Last Updated: 4/10/2015

Setting Permissions for a Specific Page In order for a person to be able to view or edit a specific page, you'll first need to add that person at the site level. You can then change which pages they can view or edit. Once you've turned on page-level permissions and added people to your site, you can control people's permissions for each page:

1. In your site hierarchy on the left side of the ‘Sharing and Permissions’ page, click on the page that you want to set permissions for.

2. By default, your page will be set to use the same permissions as your site. To have this page use different permissions, click Change next to ‘Use the same permissions and members as X.’

3. Under ‘Use custom permissions,’ choose if you would like for this page to be visible to people you add to your site or if this page will only show to new people if you also specifically give them permission. You can always change how this page updates permissions later.

4. Once you've made your selection, click Save. 5. You'll now be able to set each person's access level for that page. Or, if you don't want a

person to be able to see the page at all, you can click the icon on the right side of their name. This will also prevent them from seeing any pages below this page.

6. Click Save changes to save your page-level permissions. You can now see what permissions people have on this page in the box on the right side of the ‘Sharing and Permissions’ page. You can also see the permissions for other pages by clicking on those pages in your site's hierarchy on the left side of the ‘Sharing and Permissions’ page.

Page 18: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

18

Center for Instruction and Technology Last Updated: 4/10/2015

Create Horizontal Site Layout (Option)

1. To change your navigation from vertical left to a horizontal nav on the top of your page, More > Edit Site layout.

2. Click to enable Horizontal Navigation button on the top menu. 3. Then, click on the navigation area to edit.

4. Click Add Page link to begin. 5. Choose a Style – Boxes, Tabs, Links.

Page 19: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

19

Center for Instruction and Technology Last Updated: 4/10/2015

Change Header/Logo

1. To change your Header, choose More > Edit Site layout. 2. Click to enable Header on top menu. 3. Click on the header area to edit.

4. Choose a custom logo to replace the default if desired.

Page 20: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

20

Center for Instruction and Technology Last Updated: 4/10/2015

Create Drop-down Submenu Under Horizontal Navigation

1. To create a drop-down submenu, choose More > Edit Site layout. 2. Hover over Horizontal Navigation area and click to edit. 3. Click Add Page link to add pages on the navigation if you have not already done so. 4. To make links show up as a drop-down menu on the horizontal navigation bar, select the

page item so it’s highlighted in blue, then use the Right arrow to indent the item. 5. Click OK. Click Save to save your edits.

Page 21: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

21

Center for Instruction and Technology Last Updated: 4/10/2015

Create Custom Footer 1. To create a drop-down submenu, choose More > Edit Site layout. 2. Click to enable Custom Footer on top menu. 3. Hover over Custom Footer area and click to edit.

Site Search

If you don’t want the Search This Site to show up at the top of your web page, you can disable it by clicking the Configure search button under Site > Manage Site > General.

Versions

1. To revert your page to an earlier version, go to the page. 2. From More button, choose Revision History. 3. To view the individual version, click on the Version link. 4. To roll back, simply click the Revert to this version link.

Page 22: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

22

Center for Instruction and Technology Last Updated: 4/10/2015

Build your Own Custom Theme – Challenge Yourself!

1. Customize your theme by choosing More > Manage Site > Themes. 2. Click on Build your own custom theme.

3. Choose Blank Slate as the base theme, and Save. 4. Customize your layout as desired. You can change the color, background colors and images,

font type and size etc. Make sure you are selecting the right element. If you make a mistake, you can always revert by selecting Use theme default value.

5. You can choose Clear all customizations and Save to revert back to the site’s default theme. Subscribe to Page and Site Changes

Choose More > Subscribe to page changes or More > Subscribe to site changes to get an email notification whenever content has been modified.

Google Sites Help and User Settings

Choose More > Sites Help.

Copy Site

Choose Manage Site > General > click on the Copy this site button.

Page 23: 1 Create a Google Site in DonsApp - University of San … Center for Instruction and Technology Last Updated: 4/10/2015 Create a Google Site in DonsApp Google Web Site Interactive.

23

Center for Instruction and Technology Last Updated: 4/10/2015

Appendix Users set to "Can view" can:

• View pages Users set to "Can edit" can:

• Create, edit, delete pages • Move pages • Add attachments • Add comments • Subscribe to site and page changes

Users set to "Is owner" can:

• Do everything that users set to "Can edit" can do • Set other people as "Can view," "Can edit," and "Is owner" • Change site themes and layout • Change the site name • Delete the site

[Resource: Google Help on Site Sharing - https://support.google.com/sites/answer/90594?hl=en#]

Resources

Online Tutorials www.lynda.com Register your own Domain Name http://www.youtube.com/watch?v=ZHb3GKtB1uo Map your site to your Own Domain https://support.google.com/sites/answer/99448?hl=en&ref_topic=1046101 Using Google Analytics http://support.google.com/sites/bin/topic.py?hl=en&topic=1046096 Insert Custom HTML, CSS and JavaScript https://support.google.com/sites/answer/2500646?hl=en Create Free Forums on Google Site http://www.lefora.com Allow Visitors to Comment on Google Site http://www.steegle.com/websites/google-sites-howtos/visitor-comments-google-spreadsheet-form