Paenga Kūkara

Getting started - Plan the layout of your Site

Decide on the look, feel, functionality and flow of your site

• Plan your pages and subpage structure
• How will each page be laid out?
• How will you ensure consistency throughout

​

Site Plan

Use a whiteboard, paper or graphic organiser to:

identify site pages, map the navigation and

organise the layout of individual pages.

Site Headers - The first thing your audience will see

Creating your Site and Page header

• Select header size
• Select your Header image
• Create custom headers through Google Drawing

Custom Image Size

1366 x 400 pixels and Google Sites will adjust to fit it to their constraints

Creating Google Site Buttons

Get Organised

1. Decide on a theme for your buttons e.g. images or artwork from your classroom, royalty free images. Organise these images either in a folder on your computer or uploaded to your Google Drive for easy access.
2. In your Site Folder create the Google Draw file you are going to use to create buttons.

​

Buttons can be created using a variety of software or web based apps. We are choosing to use Google Draw to create buttons. This is an opportunity to develop your confidence with this app as it one of the key apps available to both you and your learners to support learn create share.

Flaticon Extension Icons for Slides & Docs in Google Slides - select, icon, size and colour. Copy to your Google Draw to create a button.

Finding images that are free to use and share

Creating Google Site Buttons

Make a copy of this Google Draw file, move to your Site folder and use this to create your buttons.

​

Note: Use the one Google Draw file to create all buttons so they are the same size.

Switch out the images and update text using the existing text.

You will be downloading each button as a PNG and uploading to your site.

You will not be embedding the Google Draw in your site.

​

​

​

​

Colour Wheel/Colour Theory

To help select colours that �work well together.

Creating Google Site Buttons

Buttons with Images, Shapes and Colour

Options for creating customised buttons using Google Draw with shapes or mask image to shape.

​

Crop and adjust images

​

​

​

​

​

Google Draw Tips

​

Option: Create buttons with Art by your learners

​

Use the Custom Colour dropper to select� colours from your art for fonts, borders and backgrounds.

​

Adobe Express

Use icons to create buttons

Creating Google Site Buttons

Upload and position buttons on your Google Site

​

Page Navigation and Hyperlinks

• pages can be hidden as they are prepared and navigation added when ready to share
• pages can be archived by removing or changing the navigation links

​

​

​

Navigate to subpages via hyperlink buttons, graphics or text from the site home page.

Click here to see tips for creating subpages and adding navigation

Google site: Navigation Links

​

​

Google site: Creating Subpages

Create subpages and add navigation

​

Screencast: 4:56min

​

​

Examples of subpages

• Learning Area Homepage
• Learning page for a term: Chromebooks Insert learning support info and content from your Google Drive. Can be updated weekly
• Learning page for a term: iPads Link to published slide deck in Google Drive. Scroll down the page for instructions
• Timetable: includes template
• About our Us: teacher/s contact and information about this learning space.
• Notices
• Learning Links: resources and tips for organising learning and reference tools

Copying site pages

In Google Sites, you have the ability to copy a single page or subset of pages into a new site.

Previously, it was only possible to make a copy of an entire site.

This feature gives you more control, allowing you to reuse part of a site or easily break up a large site into smaller sites.

Embedding Hāpara Workspaces in Google Sites

Check your site is visible

1. On a computer, open the Google Site.
2. At the top, click Share .
3. Next to "Published," click Change. Then choose an option:
• Anyone on the web
• View in Chrome’s incognito to double check

​

The link you share publicly needs to be the link for the Published Site not the link for the page you are editing.