SlideShare a Scribd company logo
How to Make
a Free Website
with Google
Sites
Overview
Creating a Website
Adding Pages and
Navigation
Adding & Editing
Content
Publishing Your
Website
Part 1
Step1: Go to
https://sites.google.com in
your web browser.
If you're signed in to your Google account,
you'll be taken to Google Sites. If not,
you'll be prompted to sign in now.
If you don't have a Google account, you
can create one easily.
You can start with a blank page or choose
a responsive layout template from Google
Sites.
As you edit your website, your changes are
saved automatically. However, your
changes won't go live until you click
Publish.
Step 2: Select a template or start from
scratch.
• In the "Start a new site" section at the top of the page, you'll
see the option to create a Blank site, as well as several
templates. You can click the Template gallery to view
additional templates. Once you find a template you like, click to
select it. This creates the structure for your new website and opens it
for editing.
• You'll be able to modify any template by moving elements around,
adding or removing images, changing colors, and replacing sample
text with your own.
Step 3: Name your website.
At the top-left corner above the editor, you'll see the name of the template
you selected (or "Untitled site" if you selected the Blank template). Click
the name, then type a new name for your site.The name you enter is how
your website will appear when you sign in to Google Sites. Nobody will be
able to see this name except you.
As you make changes to your website, they'll be saved automatically. Even
if you were to close your web browser right now, you'll be able to access
your site again by signing back in to Google Sites and clicking the name of
your website. However, your changes won't be visible to people on the
internet until you publish the website.
Step 4: Create a website title.
Once your theme opens in the editor, you can create a title for
your website. The title appears both at the top of your website
(in the header) and in the title bar of peoples' web browsers.[1]
If you chose the blank template, click Enter site name at the
top-left, type a title, then press Enter or Return.
Some templates already have sample titles. If yours does,
double-click the current title, then replace it with your own.
If you chose a single-page template, you won't see a title. You
can only set a title if your website has 2 or more pages. But
don't worry—you can add pages easily.
Google, Bing, and other search engines will also display your
title in search results.
Step 5: Select a theme.
•
•
•
•
Step 6: Share editing duties with
someone else (optional).
•
•
•
Step 7: Click the Preview icon to see how
your site will look.
• This icon looks like a laptop with an overlapping cell
phone, and you'll see it at the top of the page. Whenever
you make a significant change (e.g., changing colors or
adding a text box), you can preview your changes before
publishing your website.
• When previewing a site, you can click different screen
sizes at the bottom of the page to see how the page will
look on a phone, tablet, or computer screen.
• Click the X to exit the preview and return to the editor.
Part 2
Step 1: Click the Pages
tab.
•
•
Step 2: Add a new page.
•
•
Step 3: Customize the navigation bar.
•
•
•
•
•
•
Step 4: Change how
pages appear on the
navigation bar.
•
•
•
•
•
•
•
Part 3
Step 1: Click
the Pages tab
in the right
panel
You'll see a list of
the pages you’ve
added to your
Google site.
Step 2: Click the
page you want to
edit.
This opens the selected page
for editing.
Changes you make to one
page do not impact other
pages.
Step 3: Add or edit text.
•
•
•
•
•
•
•
Step 4: Add a section layout.
•
•
•
•
Step 5: Edit
and move
sections.
As you hover your mouse over the sections of your page that
contain images, text, or both (including Content Blocks), you'll
see a few icons on the left side of the editor, and a handle with
10 dots. Each of these sections can be edited and moved as
one with these tools.
To move a section, drag the section from the 10-dot handle on
its left side. You can move sections anywhere up or down the
page.
Click the palette icon to change the section's background color.
If you want to use an image as the section's background, you
click Image to upload one from your computer, select a stock
image, or choose a picture you added to Google Photos or
Google Drive.
You can move text, images, and other elements in and out of
sections by dragging them.
To delete any part of a section, such as an image or text block,
click the object, then click the trash can above it.
Step 6: Add an
image.
You can insert either stock
images or custom images
anywhere on your website.
Click Images on the Insert
tab.
Select Upload to upload an
image from your computer,
or Select to choose an image
from Google Drive, Google
Photos, or from the web.
Once you've added the
image, you can drag it
anywhere you wish, such as
into a section.
Resize an image by dragging
the blue dots surrounding it
in any direction, or crop the
image by clicking the Crop
icon (the first on the image
toolbar).
To make an image link to
another page on your
website, click the link icon,
then select the page you
want to link to.
To replace an existing image,
click the image, click the
three-dot menu on its right
side, then select Replace.
To add an image carousel,
click Image carousel on the
insert tab, then choose your
images.
Step 7: Add spaces and dividers.
•
•
•
•
•
Part 4
Step 1: Make sure you've titled all
pages.
Step 2: Add a favicon (optional).
•
•
•
•
Step 3: Click the Preview
icon to see how your
website will look.
•
•
Step 4: Click Publish
Step 5: Enter your custom web
address.
•
•
•
Step 6: Choose who can view your
website.
•
•
•
•
•
Step 7: Click Publish to
publish your website.
Your website is now
live. To view the live
website, click the
drop-down menu
next to the
"Publish" button
and select View
published site.
The next time you
make a change to
your website, you
will need to click
Publish again to
push those changes
to the internet.
Q&A
Thank you
Komaa Nancy
+211924971077
komaanancy@gmail.com
5 – 18 Page 1
Google Sites
Creating Websites and e-Portfolios
What is Google Sites?
Google Sites is a free web application for creating websites. You can develop the website by
yourself or collaborate with others to create the content of the pages. You can decide the level of
sharing you would like to permit, who the owners of the website are, and to whom you’d like to give
permission to edit or revise the site. You can also provide permission to visitors for viewing
purposes only.
Why Use Google Sites?
● It’s free and it’s easy to create. You don’t need to know any web coding.
● You can collaborate with other users or create the website solely.
● It is integrated with other Google Apps and tools so you can easily share video, photos,
presentations, or calendars.
● Your site is stored on Google’s server.
● 100 MB of free online storage.
● Faculty and students can use Google Sites to create a professional ePortfolio.
What is an ePortfolio?
● A collection of digital files (artifacts) that are shared electronically for the purpose of
reflection, comment and evaluation.
● It’s quite simply a website that enables users to collate digital evidence of their learning.
● ePortfolios contain a wide range of digital files, including but not limited to, text or PDF
documents, videos, sound files, images and links to other websites or online resources.
Examples of Google Sites ePortfolios:
● Maxine Boggio’s Professional Teaching Portfolio
● The Veteran College Student’s Portfolio
● Kaitlin Craig’s ePortfolio
Step 1: Getting Started
1) Go to sites.google.com
2) Enter your Montclair email address without mail, e.g. NetID@montclair.edu and password
3) Click Sign in
4) Click Create and select in new Sites
2
5) Enter site name: When you create a new site, enter a unique name. The site name
appears in the header in the web or mobile window title bar after you publish the site.
6) Enter your page title: Each page in your site has a title, which appears at the top of the
page. The page title also appears in the navigation menu.
Step 2: Editing Pages
The page editor screen allows you to add/change content to your page. On the right, click on
Insert, or double-click on the page where you want to add the content. You can add text, images,
URL links and anything from google docs. Choose the content you want to add.
3
Accessibility Tips:
Check text size and alignment: To make your site easy to read, use large, left-aligned text when
possible. Justified text is more difficult to read because of extra space between the words.
Use text to support formatting: It's best not to rely on visual formatting alone to communicate
meaning. Screen readers might not announce formatting changes, such as boldface or
highlighting. For example, to mark an important section of text, add the word "Important." Use
numbered and bulleted lists:
Use headings to organize your site: Headings are formatted with built-in heading styles, not
changed through font size and formatting. Levels of heading are accurate and should not be
skipped.
To Insert an Image:
1) Click on Insert
2) Select Images
3) Select image by URL or from your albums or from Google drive.
4
Accessibility Tips:
Use alternative text (alt text) for images, drawings, and other graphics so that everyone can
understand your site. Without alt text, screen reader users just hear "image."
To Insert a Link:
1) Highlight the text you want to become a link
2) Select the icon Insert Link
3) Enter the URL address
4) Click Apply
Accessibility Tips:
Use descriptive links: Screen readers can scan for links, so descriptive link text is helpful. It's
best to use the title of the page as the linked text. For example, if you're linking to your profile
page, the link text should say "my profile," not "click here" or the full URL.
To Insert a Video:
1) Click on Insert
2) Click on Google Embeds > YouTube
3) Type in the search field to find the video
4) Select the video
5
Accessibility Tips:
Captioning: Make sure that your video is captioned or, if appropriate, provide a transcript.
Step 3: Adding Pages
1) Click Pages in the top right corner
2) Click the + Page button
3) Enter a name for the page under Name
4) Click Done
5) Under Pages, select a page and click on More (3 dots)
● Set it as the homepage
● Rename the page
● Create a sub-page
Step 4: Select a background image, header type, and theme
You can select the background image. Each theme comes with a preset background, color
scheme, and font selection. You can adjust fonts, colors, and the background.
6
Change the background image
1) Go to the site and hover your mouse over the background image and click change image
2) Select an image from the Gallery or choose another image to upload
Change the header type
1) Hover your mouse over the background image and click Header type
2) Choose an option
a. Large banner
b. Banner
c. Title only
Change the theme and font style
1) In the top right corner, click Themes
2) Select a theme option and choose a color
3) Click Font style and select a style
Accessibility Tips:
Check for high color contrast: High color contrast makes text and images easier to read and
comprehend. Web Content Accessibility Guidelines (WCAG) 2.0 recommend a minimum ratio of
4.5:1 for large text and 7:1 for other text and images. For example, avoid light gray text on a white
background. To check contrast, use the WebAIM contrast checker.
Step 5: Sharing Your Site with Others
1) To share a site from Sites, click on Add editors
2) To set permissions across the University, click Change next to Published – Anyone at
Montclair State University can find and view, select that option and click Save.
3) To share with individuals, enter their email address under Invite people.
4) To change their level of access to your site, click on Change
7
5) Choose the level of access you wish to share. (Anyone you set to Can view can look at the
site. Anyone you set to Can edit can change the look and content of the site.
6) To share with specific people, enter email address of the people you want to share.
7) Click Done.

More Related Content

PDF
Personal Branding: Winning CV & Cover Letter Writing
PDF
How to Make a Free Website with Wordpress.com
PPTX
ROOT CAUSE ANALYSIS PowerPoint Presentation
PDF
Artificial Intelligence (AI) Productivity Tools for School and Office
PPTX
Impacted cerumen
PDF
EXCELLENCE FOUNDATION FOR SOUTH SUDAN (EFSS) ANNUAL IMPACT REPORT 2023
PPT
Ear,Nose and throat Disorders...
PDF
Crafting Winning CVs Cover Letters and Mastering Job Interviews with Roman Vi...
Personal Branding: Winning CV & Cover Letter Writing
How to Make a Free Website with Wordpress.com
ROOT CAUSE ANALYSIS PowerPoint Presentation
Artificial Intelligence (AI) Productivity Tools for School and Office
Impacted cerumen
EXCELLENCE FOUNDATION FOR SOUTH SUDAN (EFSS) ANNUAL IMPACT REPORT 2023
Ear,Nose and throat Disorders...
Crafting Winning CVs Cover Letters and Mastering Job Interviews with Roman Vi...

Similar to How to Make a Free Website with Google Sites (20)

PDF
Student's portfolio's creation
PDF
Net4’s EasySite Builder Step By Step Guide to Create Business Website
PDF
Net4’s EasySite Builder Step by Step Guide
PDF
How to create a landing page in 10 easy steps with GetResponse
DOCX
Get started with sites
PDF
Google sites creating editing and sharing a site
PPTX
group3-basicwebpagecreation-180605143111.pptx
PPTX
Digital portfolio 2 navigation, html, blog, logo
PPT
SharePoint Web Parts
PPTX
Group 3 basic web page creation
PDF
The Beginner's guide to creating a Google Site
PPTX
PPTX
Creating a web page
PDF
G8 Term 2 other handouts and notes
PDF
Intro.to.weebly r3-rapid aimfire global
PPTX
Presentation
PPTX
Online presentation
PPTX
Intro to weebly
PDF
Term 2 other handouts and notes
PPT
Introduction to Blogger
Student's portfolio's creation
Net4’s EasySite Builder Step By Step Guide to Create Business Website
Net4’s EasySite Builder Step by Step Guide
How to create a landing page in 10 easy steps with GetResponse
Get started with sites
Google sites creating editing and sharing a site
group3-basicwebpagecreation-180605143111.pptx
Digital portfolio 2 navigation, html, blog, logo
SharePoint Web Parts
Group 3 basic web page creation
The Beginner's guide to creating a Google Site
Creating a web page
G8 Term 2 other handouts and notes
Intro.to.weebly r3-rapid aimfire global
Presentation
Online presentation
Intro to weebly
Term 2 other handouts and notes
Introduction to Blogger
Ad

More from Excellence Foundation for South Sudan (20)

PDF
Female Student Internship Program - Cohort VI Open Call
PDF
Critical Thinking and Bias with Jibi Moses
PDF
Introduction to Digital Content Creation presentation with Andrew Akol
PDF
Introduction to Digital Marketing with Andrew Akol
PDF
Female Student Internship Program Cohort V Advertisement March 2025
PDF
Diplomatic Nursery and Primary School Teachers' Workshop Report February 2025
PDF
Liech Nursery and Primary School Teachers Workshop Report March 2025
PDF
Alekma Academy + Starlite Nursery and Primary School Teachers Workshop Report...
PDF
Friendship Academy Nursery, Primary and Secondary School Teachers Workshop Re...
PDF
How Children Learn - Teaching and Learning Process.pdf
PDF
Guidance and Counseling for Educators.pdf
PDF
Managing Administration-Teacher-Parent Relationships in Schools
PDF
Mental Health and Psychological Wellbeing for Educators
PDF
Bright Light Secondary School Teachers Workshop Report February 2025
PDF
St Paul Nursery and Primary School (Hai Referendum) Teachers Workshop Report ...
PDF
Union Nursery & Primary School Teachers Workshop Report February 2025
PDF
Baraka Central Nursery and Primary School Teachers' Workshop Report February ...
PDF
JCC Hai Negil Kindergarten and Basic School Teachers Workshop Report February...
PDF
Activity Report_Female Student Internship Program COHORT III
PDF
New Africa International School Workshop Report
Female Student Internship Program - Cohort VI Open Call
Critical Thinking and Bias with Jibi Moses
Introduction to Digital Content Creation presentation with Andrew Akol
Introduction to Digital Marketing with Andrew Akol
Female Student Internship Program Cohort V Advertisement March 2025
Diplomatic Nursery and Primary School Teachers' Workshop Report February 2025
Liech Nursery and Primary School Teachers Workshop Report March 2025
Alekma Academy + Starlite Nursery and Primary School Teachers Workshop Report...
Friendship Academy Nursery, Primary and Secondary School Teachers Workshop Re...
How Children Learn - Teaching and Learning Process.pdf
Guidance and Counseling for Educators.pdf
Managing Administration-Teacher-Parent Relationships in Schools
Mental Health and Psychological Wellbeing for Educators
Bright Light Secondary School Teachers Workshop Report February 2025
St Paul Nursery and Primary School (Hai Referendum) Teachers Workshop Report ...
Union Nursery & Primary School Teachers Workshop Report February 2025
Baraka Central Nursery and Primary School Teachers' Workshop Report February ...
JCC Hai Negil Kindergarten and Basic School Teachers Workshop Report February...
Activity Report_Female Student Internship Program COHORT III
New Africa International School Workshop Report
Ad

Recently uploaded (20)

PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PPTX
Tenders & Contracts Works _ Services Afzal.pptx
PDF
YOW2022-BNE-MinimalViableArchitecture.pdf
PPTX
Entrepreneur intro, origin, process, method
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
PDF
Interior Structure and Construction A1 NGYANQI
PPT
Machine printing techniques and plangi dyeing
PPT
UNIT I- Yarn, types, explanation, process
PPTX
rapid fire quiz in your house is your india.pptx
PPTX
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
PDF
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PDF
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
PPTX
Media And Information Literacy for Grade 12
PDF
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
PPTX
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
PPTX
HPE Aruba-master-icon-library_052722.pptx
PPT
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
DOC-20250430-WA0014._20250714_235747_0000.pptx
Tenders & Contracts Works _ Services Afzal.pptx
YOW2022-BNE-MinimalViableArchitecture.pdf
Entrepreneur intro, origin, process, method
pump pump is a mechanism that is used to transfer a liquid from one place to ...
Interior Structure and Construction A1 NGYANQI
Machine printing techniques and plangi dyeing
UNIT I- Yarn, types, explanation, process
rapid fire quiz in your house is your india.pptx
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
AD Bungalow Case studies Sem 2.pptxvwewev
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
Media And Information Literacy for Grade 12
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
HPE Aruba-master-icon-library_052722.pptx
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt

How to Make a Free Website with Google Sites

  • 1. How to Make a Free Website with Google Sites
  • 2. Overview Creating a Website Adding Pages and Navigation Adding & Editing Content Publishing Your Website
  • 4. Step1: Go to https://sites.google.com in your web browser. If you're signed in to your Google account, you'll be taken to Google Sites. If not, you'll be prompted to sign in now. If you don't have a Google account, you can create one easily. You can start with a blank page or choose a responsive layout template from Google Sites. As you edit your website, your changes are saved automatically. However, your changes won't go live until you click Publish.
  • 5. Step 2: Select a template or start from scratch. • In the "Start a new site" section at the top of the page, you'll see the option to create a Blank site, as well as several templates. You can click the Template gallery to view additional templates. Once you find a template you like, click to select it. This creates the structure for your new website and opens it for editing. • You'll be able to modify any template by moving elements around, adding or removing images, changing colors, and replacing sample text with your own.
  • 6. Step 3: Name your website. At the top-left corner above the editor, you'll see the name of the template you selected (or "Untitled site" if you selected the Blank template). Click the name, then type a new name for your site.The name you enter is how your website will appear when you sign in to Google Sites. Nobody will be able to see this name except you. As you make changes to your website, they'll be saved automatically. Even if you were to close your web browser right now, you'll be able to access your site again by signing back in to Google Sites and clicking the name of your website. However, your changes won't be visible to people on the internet until you publish the website.
  • 7. Step 4: Create a website title. Once your theme opens in the editor, you can create a title for your website. The title appears both at the top of your website (in the header) and in the title bar of peoples' web browsers.[1] If you chose the blank template, click Enter site name at the top-left, type a title, then press Enter or Return. Some templates already have sample titles. If yours does, double-click the current title, then replace it with your own. If you chose a single-page template, you won't see a title. You can only set a title if your website has 2 or more pages. But don't worry—you can add pages easily. Google, Bing, and other search engines will also display your title in search results.
  • 8. Step 5: Select a theme. • • • •
  • 9. Step 6: Share editing duties with someone else (optional). • • •
  • 10. Step 7: Click the Preview icon to see how your site will look. • This icon looks like a laptop with an overlapping cell phone, and you'll see it at the top of the page. Whenever you make a significant change (e.g., changing colors or adding a text box), you can preview your changes before publishing your website. • When previewing a site, you can click different screen sizes at the bottom of the page to see how the page will look on a phone, tablet, or computer screen. • Click the X to exit the preview and return to the editor.
  • 12. Step 1: Click the Pages tab. • •
  • 13. Step 2: Add a new page. • •
  • 14. Step 3: Customize the navigation bar. • • • • • •
  • 15. Step 4: Change how pages appear on the navigation bar. • • • • • • •
  • 17. Step 1: Click the Pages tab in the right panel You'll see a list of the pages you’ve added to your Google site.
  • 18. Step 2: Click the page you want to edit. This opens the selected page for editing. Changes you make to one page do not impact other pages.
  • 19. Step 3: Add or edit text. • • • • • • •
  • 20. Step 4: Add a section layout. • • • •
  • 21. Step 5: Edit and move sections. As you hover your mouse over the sections of your page that contain images, text, or both (including Content Blocks), you'll see a few icons on the left side of the editor, and a handle with 10 dots. Each of these sections can be edited and moved as one with these tools. To move a section, drag the section from the 10-dot handle on its left side. You can move sections anywhere up or down the page. Click the palette icon to change the section's background color. If you want to use an image as the section's background, you click Image to upload one from your computer, select a stock image, or choose a picture you added to Google Photos or Google Drive. You can move text, images, and other elements in and out of sections by dragging them. To delete any part of a section, such as an image or text block, click the object, then click the trash can above it.
  • 22. Step 6: Add an image. You can insert either stock images or custom images anywhere on your website. Click Images on the Insert tab. Select Upload to upload an image from your computer, or Select to choose an image from Google Drive, Google Photos, or from the web. Once you've added the image, you can drag it anywhere you wish, such as into a section. Resize an image by dragging the blue dots surrounding it in any direction, or crop the image by clicking the Crop icon (the first on the image toolbar). To make an image link to another page on your website, click the link icon, then select the page you want to link to. To replace an existing image, click the image, click the three-dot menu on its right side, then select Replace. To add an image carousel, click Image carousel on the insert tab, then choose your images.
  • 23. Step 7: Add spaces and dividers. • • • • •
  • 25. Step 1: Make sure you've titled all pages.
  • 26. Step 2: Add a favicon (optional). • • • •
  • 27. Step 3: Click the Preview icon to see how your website will look. • •
  • 28. Step 4: Click Publish
  • 29. Step 5: Enter your custom web address. • • •
  • 30. Step 6: Choose who can view your website. • • • • •
  • 31. Step 7: Click Publish to publish your website. Your website is now live. To view the live website, click the drop-down menu next to the "Publish" button and select View published site. The next time you make a change to your website, you will need to click Publish again to push those changes to the internet.
  • 32. Q&A
  • 34. 5 – 18 Page 1 Google Sites Creating Websites and e-Portfolios What is Google Sites? Google Sites is a free web application for creating websites. You can develop the website by yourself or collaborate with others to create the content of the pages. You can decide the level of sharing you would like to permit, who the owners of the website are, and to whom you’d like to give permission to edit or revise the site. You can also provide permission to visitors for viewing purposes only. Why Use Google Sites? ● It’s free and it’s easy to create. You don’t need to know any web coding. ● You can collaborate with other users or create the website solely. ● It is integrated with other Google Apps and tools so you can easily share video, photos, presentations, or calendars. ● Your site is stored on Google’s server. ● 100 MB of free online storage. ● Faculty and students can use Google Sites to create a professional ePortfolio. What is an ePortfolio? ● A collection of digital files (artifacts) that are shared electronically for the purpose of reflection, comment and evaluation. ● It’s quite simply a website that enables users to collate digital evidence of their learning. ● ePortfolios contain a wide range of digital files, including but not limited to, text or PDF documents, videos, sound files, images and links to other websites or online resources. Examples of Google Sites ePortfolios: ● Maxine Boggio’s Professional Teaching Portfolio ● The Veteran College Student’s Portfolio ● Kaitlin Craig’s ePortfolio Step 1: Getting Started 1) Go to sites.google.com 2) Enter your Montclair email address without mail, e.g. NetID@montclair.edu and password 3) Click Sign in 4) Click Create and select in new Sites
  • 35. 2 5) Enter site name: When you create a new site, enter a unique name. The site name appears in the header in the web or mobile window title bar after you publish the site. 6) Enter your page title: Each page in your site has a title, which appears at the top of the page. The page title also appears in the navigation menu. Step 2: Editing Pages The page editor screen allows you to add/change content to your page. On the right, click on Insert, or double-click on the page where you want to add the content. You can add text, images, URL links and anything from google docs. Choose the content you want to add.
  • 36. 3 Accessibility Tips: Check text size and alignment: To make your site easy to read, use large, left-aligned text when possible. Justified text is more difficult to read because of extra space between the words. Use text to support formatting: It's best not to rely on visual formatting alone to communicate meaning. Screen readers might not announce formatting changes, such as boldface or highlighting. For example, to mark an important section of text, add the word "Important." Use numbered and bulleted lists: Use headings to organize your site: Headings are formatted with built-in heading styles, not changed through font size and formatting. Levels of heading are accurate and should not be skipped. To Insert an Image: 1) Click on Insert 2) Select Images 3) Select image by URL or from your albums or from Google drive.
  • 37. 4 Accessibility Tips: Use alternative text (alt text) for images, drawings, and other graphics so that everyone can understand your site. Without alt text, screen reader users just hear "image." To Insert a Link: 1) Highlight the text you want to become a link 2) Select the icon Insert Link 3) Enter the URL address 4) Click Apply Accessibility Tips: Use descriptive links: Screen readers can scan for links, so descriptive link text is helpful. It's best to use the title of the page as the linked text. For example, if you're linking to your profile page, the link text should say "my profile," not "click here" or the full URL. To Insert a Video: 1) Click on Insert 2) Click on Google Embeds > YouTube 3) Type in the search field to find the video 4) Select the video
  • 38. 5 Accessibility Tips: Captioning: Make sure that your video is captioned or, if appropriate, provide a transcript. Step 3: Adding Pages 1) Click Pages in the top right corner 2) Click the + Page button 3) Enter a name for the page under Name 4) Click Done 5) Under Pages, select a page and click on More (3 dots) ● Set it as the homepage ● Rename the page ● Create a sub-page Step 4: Select a background image, header type, and theme You can select the background image. Each theme comes with a preset background, color scheme, and font selection. You can adjust fonts, colors, and the background.
  • 39. 6 Change the background image 1) Go to the site and hover your mouse over the background image and click change image 2) Select an image from the Gallery or choose another image to upload Change the header type 1) Hover your mouse over the background image and click Header type 2) Choose an option a. Large banner b. Banner c. Title only Change the theme and font style 1) In the top right corner, click Themes 2) Select a theme option and choose a color 3) Click Font style and select a style Accessibility Tips: Check for high color contrast: High color contrast makes text and images easier to read and comprehend. Web Content Accessibility Guidelines (WCAG) 2.0 recommend a minimum ratio of 4.5:1 for large text and 7:1 for other text and images. For example, avoid light gray text on a white background. To check contrast, use the WebAIM contrast checker. Step 5: Sharing Your Site with Others 1) To share a site from Sites, click on Add editors 2) To set permissions across the University, click Change next to Published – Anyone at Montclair State University can find and view, select that option and click Save. 3) To share with individuals, enter their email address under Invite people. 4) To change their level of access to your site, click on Change
  • 40. 7 5) Choose the level of access you wish to share. (Anyone you set to Can view can look at the site. Anyone you set to Can edit can change the look and content of the site. 6) To share with specific people, enter email address of the people you want to share. 7) Click Done.