Sites

Overview

Google Sites is an online website creation App that allows users to create basic websites easily. Like all Google services, Sites is completely integrated with the Google Drive app as the central storage system as well as a way to upload images. Like all Google applications, the easiest way to open the App is through the Google home page (www.google.com). In the top right hand corner, there will be an icon that I refer to as the Google waffle because it has three rows of three cubes resembling a waffle. This is a quick way to access any native Google app. It does not work for apps that are not created by Google.

Opening Google Sites

Clicking on the Google waffle, opens up a list of Google Apps that are available on your user account. If the app that you are looking for does not show up, it is possible that it is on a secondary page. Click on More at the bottom of the selection. Additional apps will display.

It is possible to rearrange the order of the Apps in a fashion that is more convenient for your usage. Simply drag the icon (click and hold on it with your mouse/trackpad) and move it to the desired spot. It is possible to move apps from the lower section to the upper section.

Open Google Sites by clicking on the icon. Another way to navigate to Google Sites is by typing the website in directly (sites.google.com). It is also possible to bookmark the Sites homepage as a shortcut.

Google Sites Start Screen

The Sites start screen will resemble the photo above. On the left hand corner, there are three horizontal bars. Clicking this will allow you to quickly navigate to other Google Apps such as sheets, slides and forms. Next to that is the Sites search bar which allows you to quickly find a previously created site simply by typing in the name or a keyword that might be contained in the document. On the right hand side of the screen is the Google Waffle similar to the Google home page. Two icons over from that is your Google Account avatar identifying the account that is being used. Below that are a list of recent sites that have been opened. This list can be further filtered by owner or by action last performed and files can be portrayed in a list or a grid view.

To create a new site, click on the '+' symbol on the bottom right hand corner of the screen.

Elements of the Sites Interface

The screen is divided into three main sections. There is the top bar with a few tools, the main screen where the website content will be built and displayed, and finally the sidebar with its three tabs: Insert, Pages, and Themes. Each section will be discussed in further detail below.

Top Toolbar

On the far left of the top toolbar, the name of the site is listed. The next item is the save status which updates to notify whenever the website is automatically saved.

The top toolbar has several global tools in it: undo, redo, preview, site link, and add collaborators. In addition, there is a more button with a few specialized functions (site analytics, duplicate site, add favicon, create a custom URL, and help). The preview button allows the website builder to see how the completed website will display on a variety of devices including a phone, a tablet and a screen. The collaborator feature specifies not only who can edit but also who can view the published site.

Finally, on the far right is the PUBLISH button with a few options made available by clicking the pull down arrow. These options include changing the website address, requesting that search engines to not display the site, and unpublishing the site.

Website Content

The main screen is where the web content will be built with the top of each page reserved for the title. The title can be configured different in three ways, known as Header Types: Large Banner, Banner, and Title Only. For the first two header types, it is possible to upload an image from the computer or to choose an image on Google Drive. Otherwise, the banner will adhere to the general theme that is selected. Themes can be changed at any time but will affect every page.

Every space in the content area can contain text, images, or content from a website. Simply double click on any empty space and the insert wheel appears. On the wheel are five different options: embed the URL of a website, add images, upload content from a computer, select content from Google Drive. Objects that are added to the site builder can be further manipulated once added. The can be moved through dragging and dropping, their size can be altered and their appearance can be manipulated.

Image Options

Images have several options that can be applied simply by clicking on the image. Once selected, the image will be outlined in blue with resize handles around it. Dragging the resize handle will change the size of the image.

Images may also be altered within the web browser in very basic ways. For more extensive photo editing, it is recommended to do this with an external program before uploading the image to Sites. The first tool is the crop button. Select any photo and the image toolbar appears above the image. The crop button increases the size of the image. The will cause some parts of the image to be cut. Drag the crop bar left to right to change the level of cropping. During the resizing process, the proportions may be affected. This can be fixed by clicking the uncropping tool. This makes the image fit the size of the space that it has been assigned proportionally. The size of the image box may also shift while using this tool. Finally, links can be added to images by clicking the link button. A link can lead to a different page on the site or to an external webpage. Finally, images can be discarded when selected, by clicking the trash can icon. Clicking the vertical ellipses to the right of the icons will display a couple of additional options: replacing the image (through uploading from the computer or by choosing from Google Drive). The other option is to add alternate text to images that people using screen readers might access due to visual impairments.

Text Options

When a text box is selected or when text is highlighted, the text toolbar will display above the text box. The tools within the text box change the appearance of the text. This includes changing the font style (Normal, Title, Heading, Subheading, and small), justification, adding a link or deleting the text.

Sidebar Menus

The sidebar located on the far right of the screen provides the greatest number of options. The three tabs, Insert, Pages, and Themes each have separate purposes. Each is described in more detail below:

Insert

The Insert tab in the sidebar is the primary way to put objects into the webpage. Typically this would be one of four items: a text box, embedded material from external websites (such as YouTube or Facebook), images, or uploaded material which is reflected in the top section of the tab.

Right below that is the option to change the layout of the page on the fly choosing from a variety of pre-made templates.

Further down, it is also possible to add components such as table of contents, a button, a divider, items from YouTube or other Google services such as a Calendar or a Map or items from the GSuite apps (Docs, Sheets, Forms, Slides or Charts).

Pages

The Pages tab in the sidebar is a visual representation of all of the individual pages that comprise the Site. Pages can be nested as a subpage within another page (up to 6 levels can be supported). Selecting a page will bring up the three vertical ellipses to its right bringing up options that can be applied to that page such as making it the homepage for the site, duplicating it, displaying its properties, adding a subpage, showing or hiding it in the navigation, or deleting the page. Navigation refers to the site menu which is typically located at the top of the page although it can be configured for the side as well. The site menu shows the outline tree of the various pages and allows for easy navigation. If a page is hidden in the navigation, it will not be displayed in the site menu.

Themes

The Themes tab in the sidebar changes the font, colour and overall look of the website and affects every page that is and has been created. Many of the themes have the option of changing the weight of the font.

Site Menu

The site menu lies on top of every page of the website and allows for navigation within pages of the site. If a page contains subpages, it can be expanded by clicking on the pulldown arrow.

The site menu can be toggled between top view or side view by clicking the settings icon to the left of the menu.

Google Sites

Report abuse