Willamette uses Google Workspace, which includes Google Drive (storage), Docs (word processing), Slides (presentations), Sheets (spreadsheets), Calendar, your email, Forms (creating forms to collect information), and Google Sites.
You can create basic sites for classes, projects, blogs, portfolios, or just for fun using Google Sites.
Start creating by going to sites.google.com.
Go to sites.google.com
Under "start a new site" click on "blank site" if you would like to start from scratch. However, you are able to pick other templates if you would like to, as shown in the screenshot below.
*Note: If you choose a standard theme, you have restricted editing options. For example, changing the button color requires changing the theme color, which may have an impact on other color settings. Within the standard themes you can't modify the button size; everything is predefined.
Now we can edit the blank site we have created! There are a range of options you can pick and choose, and shortly after you start you can even preview how the site will look!
Our first edit can be our header: the header is our menu banner at the top of websites. This is the area where you will see companies' logos, names, and navigation options: About, Contact Us, etc.
To edit the header, click on site name, and then where it mentions “your page title,” edit it to add your preferred choice. You can change your preferences for the font on the right side.
You can add a site name by clicking on "Enter site name" in the upper left corner of the header.
If your header type supports images, select Image → upload to add a background image. Then, click select the picture from your computer. The editor will also automatically modify your header image to improve readability.
Alt text: As you can see, the banner has been created, the image has been uploaded and automatically modified to make sure it can be visibly easy to read. The header is "Digital Learning Studio" and the site name is "DLS" in the top left corner.
If you would like to change the design theme, click “Theme” on the right-hand side of the page. You can create and upload themes or you can use the pre-loaded themes on the website.
As you can see in the screenshot below, I have selected “Aristotle”, and it has been reflected on the site.
If you don’t like the color, there are pre-made colors for selection, or you can use the paint bucket on the right to select new colors. You can create new themes from scratch using the custom themes option (discussed in the next tab).
You can create and customize a completely new theme for your site. At the top of the "Themes" tab menu under "Custom," click the "+" button.
Give your custom theme a name, then click the "Next" button. Make your choices about color and text for your custom theme, but don't worry, you can change these later.
Now when you click on the themes tab, your custom theme will appear at the top of the menu. You can switch between themes as many times as you want if you change your mind about look at feel.
You can further customize your theme by clicking on the three dots that appear in the upper right corner and selecting "Edit" from the menu that appears.
The customization categories include colors, text, images, navigation, components, and spacing.
The colors menu allows you to create 3 colorways within your style. You can give each style a different default background color, text color for titles and headings, and text color for body text.
The text customization menu allows you to set a default font, size, format, alignment, line spacing, and paragraph spacing for normal text, titles, headings, subheadings, and small text.
The images menu allows you to set a background for your header, a logo for your site, and a favicon (the icon that appears in the browser tab beside the name of your site).
The navigation menu gives you the option of listing your pages along the top of your site, or along the side of your site. There are a lot of different options dealing with how you show your site visitor where in the site you are. Try different variations to see what you like best.
The components menu allows you to customize the way buttons, dividers, links, and the image carousel appear in each of the 3 styles of your custom theme.
The spacing menu deals with site density and width. From Google's documentation regarding spacing:
Check out Google Support's How to use Google Sites and Redesign your Google sites articles for more information.
Now we move on to adding content, first, click “insert” on the right column (this site was made with a template that automatically created these image and text boxes).
Go down to content blocks and pick what kind of content layout you would like.
Now you can edit and add information of your choice and similarly you can edit the text, font and size.
Each content choice has an image option; you can upload images, videos and calendar information; in this example below, I have chosen to add pictures.
Once you add a picture, consider adding alt text for it. Alt text allows viewers using a screen reader to get a sense of images that appear on a page. If your image provides important information, you should add alt text.
To add alt text, click on the image to bring up the image menu. Click on the three dots to see more options and select "Alt text."
Add your alt text to the Description box and click "Apply." If your image is purely decorative and does not add information, check the box that says "This is a decorative image."
You can change the background of an individual section to a different color, or set a background image. Click on the section, then click on the artist palette icon (the top icon that appears). Select a color within your theme by clicking on one of the style options. To set an image as the background, click "image," then "upload" or "select."
Once you have set an image as your background, Google Sites will create the overlay for readability. You can remove this overlay or adjust it by clicking on the section to view the options. Here is an example of a website section with a photo in the background.
NOTE: the space covered by text, photos, or other elements dictates how much of the background image is visible. You can increase the amount of background image visible by adding spacer elements to your block. A spacer will increase the margin above, below, or on the sides of elements or collections of elements.
Right-click on the Home Page, and select “add subpage” - this is to create other pages for the user to go to for a variety of information.
After this, you can build a hyperlink to specific parts of the home page. To do this, click on the link button, which is shown below.
Then you will have an option to link to the page as shown below. You have the option to link text or an image to a specific page that you have already built in the site!
You can rearrange your pages and subpages by opening the Pages tab and dragging and dropping them into your desired order.