Google

Google Sites

Google Sites is a fantastic way for getting up a website quickly and efficiently even if you know nothing about web development or actual coding. You can add any Google Docs, such as Sheets or even Charts, to your site.

To access Google Sites, once you're logged into your Google account, you can either click the thumbnail icon on the top right-hand side and find Sites in the list, or you can also point your browser to https://sites.google.com/new

https://sites.google.com/new

Working with Sites

On the Google Sites Dashboard page you will see your site and others sites. To start creating a brand new site, click the plus sign with the red circle on the very bottom right-hand side of the screen. Your site will also be saved to your Drive. This is where the actual site is being stored.

The first thing you can do is give your site a name. On the top left-hand side of the screen, click Untitled Site. Here's where you can rename it with the name of your own site. This site name is not the same thing as the URL. You'll be able to specify that later when you publish your site.

The Interface

To get back to the home screen of Google Sites, click the blue icon on the very top left-hand side of the screen.
To the right of that, you can see that all your changes are saved. (You never have to save your changes in Google Drive, it saves them automatically.)
The curved arrows are Undo and Redo for your last action if you made a mistake.
The eye with the circle on it will allow you to preview what your site is going to look like in a browser, without all the editing tools visible.
You can click to add editors to share working on the site (Anywhere these show up you can click them to get to the context menu.)
The “Publish" button is for when you are ready to publish your site to the Wildwood community.

On the right are all the tools to create your site.

Insert Tab

The Insert tab contains things like text boxes, images, URLs, and uploads. I can add a component such as a divider, a horizontal rule. Directly below that are all the Google products that I can insert into my site. For example, I could insert a file from Google Drive, a YouTube video, a Google Calendar, a Map, and directly below that are any type of Google Docs I can insert, such as a presentation, a sheet, even a survey or a chart.

Pages Tab

I can click Pages tab to add some new pages to my site. Click the plus button and here's where to add pages and edit pages already existing. You can make some pages main pages (they show up on the navigation) and others sub-pages of those pages.

Themes Tab

I can choose a theme for my site. This is going to control the color and font, and the general look and feel of the site.

Customizing Your Site

The individual pages are made up of different elements such as the navigation, header, and body of the page.

If I hover my mouse over a text block I can see that block outlined in blue, the applicable context menus will appear. For example, the availability to change an image, or clicking on a header type.

I can also double-click inside any particular white space to bring up items that I can add.

Choosing a Site Theme

Google Sites has several themes for you to pick from. Once you create your site, it is a good idea to pick your theme so as you build out your site you can simultaneously be working on the look of the site as well.

Go to the Themes tab in the right-column. Scroll down and choose a theme. Once you click on a theme, you can choose from some default colors, but you can also click on the paint-can icon and put in my your own custom color. If you have a logo or color scheme you can use this to create a consistent or pleasing looking site.

You have a default font, but there are a few options available to choose from in the Font style menu.

Add a Logo

You can add a logo image that will show up in your global navigation bar. An “Add logo” box will appear in the upper left of the header.

You can upload or select a logo from your Drive.

Once you add your logo you can change the color of the navigation (transparent, white, black, or the colors Google pulls from your logo).

Site Navigation

The gear icon next to the navigation bar gives you options to change the navigation mode from the default “Top navigation” to having “Side navigation”.

The Header

Within the header you can change the Header Type. This menu comes up when you hover your mouse into the header area.

Options for the Header (this changes the size of the background):

Cover
Large Banner
Banner
Title Only

You can use the default background image or you can click "Change image” to select a different one.

Upload an image from your desktop computer or use “Select image…”. Selecting image will let give you the option to choose from a gallery that already exists in Google Sites.

Or you can put an image in if I know the URL of it. You can do a Google image search and find an appropriate header.

You can also look through your Google Photos or images that are stored in your Google Drive.

Add Editors to Your Site

A great feature of the new Google site is the ability to add editors and work with them simultaneously on your site. When you add someone to work on a site, it will show up in their list of sites on the Google Sites dashboard.

Working with Pages

To create a new page, click the Page icon with a plus sign and title it. Once I start creating pages, you will see them added to the navigation bar at the top. This is what site visitors will use to move around the site.

Drag a page to reorder or drop it on top of another page to make it a subpage. Dragging a page to the very top of the list will make it the site’s homepage, aka the first page users see when they visit the site.

Clicking the three dots on the right-hand side will give you some actions that you can do with that page. You will be given options to:

Make homepage
Duplicate page
Properties
Add subpage
Hide from navigation
Delete (once you delete you will have a short window to restore, after that you will NOT be able to get the page back).

Adding Text and Other Components

On the pages of your site you can add elements or “components” to your page and the you can drag those items around the virtual grid on the screen. There are a few ways to add components.

Directly from the Insert Panel
Double-clicking on any blank space on the screen
Drag images onto your page from your Desktop computer

Working with Text

Google Sites has predefined styles for you to choose from.

You can also bold and italic normal text, choose how it is aligned, add numbered or bulleted lists, link text, or delete with the trash icon.

To stop typing click outside of that text box.

Change the Size of Elements (Text, Images, etc)

You can change the size of a text box or any other element by dragging the blue dots at the side.

Then you will be able to move elements within the columns of the page. You can add other elements in the other columns.

Images

Once you add an image, clicking on it will give you several options including; cropping, uncorking, linking, deleting, replacing, add alt text (describing the image for accessibility), and adding a caption.

Double click on an inserted image will allow you to zoom in and crop that image.

Sections

Once you start adding elements to your page you will notice that Sites has started putting them into sections that are divided by dashed lines. Hover over a section to get options (change background, duplicate, trash) or hover over the dotted columns to click and drag this sections to move it.

Each section is given it’s own background color and you can change from the default regular white one to Emphasis 1, Emphasis 2, or an image.

Add Embedded URLS and Links

You have the ability to link images and text. You can make any text be a link by highlight it and click the link icon.

Link directly to a site page or add a custom url. Click “Apply” to add.

Embed from the Web

You also have the option to embed from the web onto your page. Choose the embed icon.

You can then paste the URL of the site you’d like to embed (it would add the widget).

Or paste in the embed code.

Add Google Forms

You can embed files from Google Drive, such as sheets, slides and docs. You can also embed a Google form that users can fill out right from your site. This is good for applications, questionnaires, contact responses, et cetera.

From the Insert Tab choose “Forms”.

You can then search your Google Drive for you forms and select one and click “Insert”. Use the blue dots to click and drag to resize it.

Add Charts

You can also embed charts that you created in your Google Sheets.

Go to the Insert tab and scroll down into the Google Docs section and select charts. This will pull up a list of the Google Sheets. Select the one you would like to use. This will bring a dialog box with the charts from the Sheet and then pick the one you would like to add.

Embedding YouTube, Calendar, Maps

You also have the ability to add other Google products such as Maps (your created My Maps as well) and YouTube videos. Select any of these options from the Insert Panel.

When adding a YouTube video you will need to grab the URL and paste it in the dialog box after selecting the YouTube option.

Click the gear icon once the video has been inserted to changes a few of the options.

Change the name of the video
Choose to hide the controls or keep them in place
Change the color of the progress bar
Toggle whether or not I want to allow the viewer to go full screen with the video

Previewing & publishing

Preview a Site Before Publishing

It's a good idea to go through and preview your site before publishing it. To preview it, click the eye icon on the top center of the page. It's going to launch the page as it will look to a visitor in the browser.

On the bottom right-hand side of the screen in preview mode, you can toggle through different options for previewing it to see how it looks on a desktop large screen, on a tablet, or on a mobile phone.

Publish Your Site

Once you are done you can hit the “Publish” button.

Here you can customize your Web address and finalize the permissions of who can view your site.

As you update your site, make sure you you click “Publish” when you want those changes to go live!

Change Your Site URL and Privacy Settings

Once a site is published, a new drop down arrow appears next to the Publish button. Clicking it gives you three options.

Publish settings...
View published site (This is how you can get to the site without having to type the URL in the browser first)
Unpublish

In Publish settings you can change the url if want to.

Google Sites

Report abuse