Transcripts
1. 0 Google Sites Introduction: Google Sites allows
you to quickly and easily create websites that are based within the Google Suite where you can bring in
various components. My name is Lawrence
and I'm going to be your instructor for this course. I come to you many years of
web development experience. I am a Google Developer
Expert and I really enjoy working with the Google
workspace sites provides us a great opportunity to create interactive content and create a web URL that we can
share with others. You can create a Google site
in under five minutes and customize the content,
customizing images, components, adding your Google content,
adding additional pages, and customizing how your webpage will behave are
fully responsive. They can go across mobile
desktops and tablets with Google Sites gives you a fully interactive editor
that you can select. Insert various components, such as textbox, images, embed, select content from your drive, and more that you can select, insert it into the
page as needed. Displaying content from
your Google Drive, you can select from
various pre-built layouts, as well as customize components, such as a collapse
table of contents, image carousel, which provide
more interaction for users. There's also you can bring in YouTube videos, your calendar, maps, Docs, Slides,
Sheets, Forms, and charts. There's various themes
to select from, which will change
the look and feel, as well as the colors
of your webpage. You can change images
from your web page. You can select the
different headers, different header types, and easily update
your website if you want other pages
for your website. That's easy to do as well, where you can select and create another webpage
for your website, which is the click of a button. And then this webpage
can of course be customized just as
the other pages. You can navigate
between the pages. There's also a
quick preview area where you can see the webpage, how it's going to look like. So you can get a
better sense for what it's gonna do, how
it's going to feel, and as well what the viewers are going to be
able to see on your website. There's different
responsive views of your website within
the preview section. And once you're
ready to publish, it's one click of the button. And that will allow you
to publish the website to a custom URL that you can then share with others so that they can view your
Google Sites content. You can also select who can
view your content, customize, add in a customized domain, and set the search settings as needed for the
viewers of the page. So all of this and a
whole lot more is going to be covered in the
upcoming lessons. Let's get started. You will need to have
a Google account in order to access
the Google sites.
2. 1 Create Your Site Page: This lesson, I'm going
to show you how you can create this website from scratch within minutes and have it live with a web URL that you
can share to others. So this is a fully functional
web site that's going to be live online that
others can go to. They can view your
content and of course, you can customize the
content as needed and also change the display settings
and update the text, even add in additional
pages as needed. So this is all coming from a default template that
we're going to click. Create the website. And I'll show you how to do
that in under five minutes. Go ahead and log into your
Google account and then head on over to
sites.google.com. And this is where you can create a brand new site within
the Google Sites platform. So as long as you have
a Google account, you can create sites. And this is also if you are using a organizational account, the administrator does
have to enable the sites. So if you are using an
organizational account to him, if you are logging in but you're getting some type
of error or you can't see the sights the same way that we're looking
at it right now. That means that your
organization administrator might have blocked the site
option within the accounts. So if you are able to go over to sites.google.com and
see the site's content. Just as I do. This is where you can start
creating your blank site. Up at the top you have an option to create a brand new
site, just a blank one. You're also able to select from the various portfolios
that are available. You can click the
template gallery, and this will give
you a sampling of the available sites that
you can select and create. So this is a quick and
easy way to create a website using one of
the predefined templates. So for example, if you do have a holiday party that
you're planning, you can select the
holiday party template. And that will open
up the sites editor. And from here, you can
create your own version of that template so you can update the various elements
on the page. You can move them around, you can resize them. And I'll be showing you
a little bit more about that later on in the lessons. Can also customize, change
the images and updated and customize the site's page in
order to suit your needs. And then once you've
made all of the changes, you've updated all
of the site pages, then you are ready
to publish it. Selecting publish. You can have a customized
web address to publish to. And you also have an option
to set to a custom domain. So this is an option
that you can select. And that's if you already
have a domain registered, then you can publish
it to the domain. And I'll call it Holiday test. And it provides me the URL where my website is going
to be available. And just below that, you can select who
can view your site. So right now I have anyone being able to view the website. So anyone that comes
to this web address is going to be able to see the
website as holiday test. So sites.google.com, forward slash forward
slash holiday test. I can also change this
so that I can customize who is able to see it
from shared accounts. And I can change
the links as well. So I can restrict it to
only the users that I'm providing access to or I can keep it as public,
which is the default. And that allows anyone with the web URL to be
able to see the page. There's also another option that says the search settings. So this is for searching, so that search engines
can display your website. And if you select the checkbox, this will requests that
public search engines do not display this
particular Google Sites page. This is an option
and by default, they will display the speech and they will index the page. But if you don't want
them to index it, then you can always request that it doesn't show
up within search. So once you've set
your web address, you've customized
who can view it, and you've set your
search settings, you can click publish, and that's going to publish
the website to the URL. And once it's published,
you can select, there's buttons at
the top where you can select to preview the website. And that's going
to launch it into the preview of the website. You can also copy the
Published site link, and this is going to be the cop, this is going to
be the site link that you can share to others. You also have an option
to share it with others. So you can send over to people and have others
be able to edit, update the site that you
just created as well. And if you do want to see
the view Published site, you can go under the Publish. There's an icon on
the right-hand side, and you can select the
view Published site. And that will allow you to see the live published website at the live URL that you'd
be sharing with others. And it's as easy as that
to get started and create a Google Sites page using
the templates coming up. Next, I'll show you
how you can do that and customize it using a blank template and a blank theme to build your
own website from scratch.
3. 2 Create a Sites Page from Scratch: So this lesson, we're
going to be starting with a blank page. And I'm going to show
you how you can create a simple two-page website really easily using
Google Sites. So we're going to
set up a logo and then we're gonna give
the site a name. We're also going
to set two pages, so a homepage, a second page. The homepage is going to
have this pop-up window, which is going to have a click
a button, and a message. You can also, whenever
you're previewing, go into the different
responsive sizes. That is for the mobile phones, for tablets, and for
the large screens. So you can see what your
website is going to look like on all the
different sized screens. Fully responsive. And that's really the nice
thing about Google Sites, is it's really easy to
add additional pages. And then they all
come out nice and neatly within the menu, as well as their
responsive websites. So let's get started. In the previous
lesson, we showed you how easy it is to
get started with sites by selecting a template
from the template gallery. This lesson we're going
to be walking through how to set up a blank site. So you can also use
the templates as a default starting
point and then update the templates the same
way that we're going to be updating the blank page. And that might be a quicker
way to achieve what the look and feel
that you're looking for if it's already existing
within the templates. So let's go ahead
and select blank. We're going over to
sites.google.com, selecting to create
a blank site. And this is going to
create a fresh blank site with no content yet. And then first thing
to do is to give the site document a title. And I'm just going to
call it the testing site. And automatically once
you add in a title, it's going to add a title up
at the top left-hand side. And it also gives you an
option to add in a logo. So if you do have a logo for your website that
you want to use, you can add it here, selecting from the uploads. So if you do have
it on your computer or if you've already
uploaded it, you can use Select, and that will allow
you to select images that you might already
have on your Google Drive. You can also search by URL, do an image search using
the Google images. Or you can select from
existing photos that you might already have on your Google
within your Google account. So I'm going to select an
image from my Google Drive. I'm going to select an
image from my Google Drive. And using the JavaScript logo, I'm going to insert that. And that will add it as
a logo for my webpage. Also within the settings
we can add in alt text. So adding an alt
text for your logo, it will select the logo color
as a color for your theme. So I'm going to go ahead
and select that as my theme color so it
matches the logo, so it automatically
sets that up. There's also an option
for a Pfaff con. So this is the icon that you will show up
within the web pages. Up at the top left whenever the user has an open
within the browser tabs. So again, these are optional. You don't have to have one. But if you do, then this is
where you can add it in. There's also under the Settings, you can select the navigation. So this will set how you want
your page navigation to be. By default, it's set at the top. You can select it to be
navigation at the site as well. And that will include
navigation on the web site, on the side of the website. There's also the
different colors. So right now, we'll just
keep it as transparent. But if you want your
navigation to be noticeable, you can set it up as a black background or a white background
for the navigation. And I'll set up as black so that we can see
where it's located. So right now again, it
is at the top there. There's also under
the viewing tools. So this is a website
feature that will show an info icon in the lower
left of your Published site. So it shows the
specific pj details. And then viewers can click on it to reveal additional content. So this is optional. There's also with
the anchor links, they appear on the site. Viewers as the hover over
headings on the page and allows viewers to link to the specific sections
of the page. So by default, both of these are enabled and I would
suggest that just to keep them enabled unless for whatever reason you don't
want these to be showing up. But by default, they are
enabled and they are good feature for navigation when viewers come
to your website. There's also an option
for custom domains. So that means that
if you do have a Registered domains
such as a.com domain, then you can set that up as the domain that's going to be pointing to the Google sites. And you can use your own custom
domain for Google sites, There's also an
option for analytics. So analytics, if you do have
a Google Analytics account, then you can enable
the analytics. And this will allow you to track the analytics for the
webpage, for the Google site. So it makes it really
easy to integrate your analytics tracking
or measurement ID. And then you can enable
it once you do have that added into the input field. There's also an
announcement banner. So this is our banner
that's going to get displayed above
your content. By default, it's not enabled. So this is if you have
special announcements or some type of special
offer that you want for your site viewers
to be able to see. For that you can show the banner and then you
can have the message. So for now we'll just have
a showing the banner. It'll be a welcome message. And there's a button. And then when the
button gets clicked, it will open up to whatever the webpage is that
we want to use. So I'm going to set it
to link to my website. And we can have
the visibility on the homepage only
or on all pages. I'll just gonna set it
only for the homepage. So once I've completed
the settings, and once I'm satisfied
with the settings, I can close that off. And there's the
banner showing up at the top with the Click
Me button, the welcome. And now that I've
made the settings, I can click Preview to see what my website's
going to look like. In the bottom right-hand side, I can preview on the
different display sizes. So if I want to see
what the website is going to look
like on the phone, I can see what it's going
to look like on a tablet, which is slightly
larger than the phone. And then what it looks like
on the larger screens, we can exit the preview
at anytime by closing it. In the left-hand side, we've got the Information icon. And it gives some information
where you can report abuse or you can go to the
Google Sites homepage. And that's that information icon that we've enabled
on the website. So this is what you can turn off within the settings that
we were looking at earlier. So it's got the banner
here across the main page. Right now only do
have the one page. So it's just got the homepage. And if I click it, it's going to redirect
and open up to my website just as we
indicated within the settings. So let's go ahead and
close the preview and we'll mix some more
updates to the webpage. In the right-hand side, we can select the various
themes that are available. And that will change
the styling as well as the color scheme for the
site that you're using. And then you can select
them and customize them. I'll show you how to do that
in the upcoming lessons. Also under pages, we only have just
currently the homepage. So if you want to
add a second page, you can create a new page. Clicking the new page icon
in the bottom right side. You can also have a new
menu section or a new link. We're just gonna
create a second page, and I'll call it second. There's also an advanced
option here where we want, if we want set a custom path. Otherwise it's just going to use the page name for the path. So we're going to keep it
out second and hit Done. So that creates the second
page within our website. And now if we go to the preview, we've got the navigation
on the left-hand side, and the two pages are
automatically added into the menu. The first page is
the only one with the pop-up window there. And the other pages won't have that as we set that already
within the settings. So that's how you can easily add additional pages
to your website. And when you do wanna
make updates to them, you can just select
them and that will automatically put
them in the display area. And then you can make
updates to them as needed. And then if you
do want to adjust any of the settings of the site, you can always click
where the logo was. Or you can select in the
top right side settings, it's going to open up the
settings pop-up window. And from here, if
you want to set the navigation back to the top, you can set it that way. You can also update the
color of the navigation, so set it to transparent. And then once you're satisfied, you can go out and you
can check to see what it's gonna look like
within the live site.
4. 3 Insert Site Elements: So we're going to be
taking a blank site, selecting a theme for the site, show you how you
can update some of the styling colors
and then how you can insert a text box and
you can insert images, how you can embed web
pages and web content. And then also you
can select content that's sitting on your
Google Drive and embed that on your page so it's viewable within
the page content. So that's all coming up. In the previous
lesson, we selected sites.google.com
created a blank site. So this lesson we're gonna
do some more customizations using the Insert
option to the site. We had already
created two pages, so we've got a homepage
and a second page. So let's go back to Insert. And from here you can insert the various elements
on the page. By default, the template and the theme is already
going to have some styling and some
elements existing. So you have an option
to select these. You can change them,
you can delete them, you can update, you
can edit the text. So all of this is available. If you do select
to edit the text, you're gonna get a
wysiwyg text editor, which is going to allow
you to customize the font, the font size, the different
font styling, bold. There's also aligning it and there's some more
options here as well. If you want to indent the texts, strike through or the
clear the formatting. So the color, if you wanted to change the color of the line, That's going to be
sitting within the theme. And that's because we're
using the impression theme. So selecting the different
themes will give you an option for customizing how that particular
element is going to look. So going back down
to the themes, if you do want to customize the color in this
part of the theme, this line is going to be red. So you can select
it to be yellow, green, gray, black, or yellow. And you can select
different colors as well. So that's all available
under the themes. So going back to insert
within the main display area, this section is
completely blank. So if you want to
insert a text box, you can click Text. And what this will do
is it's going to insert a text box in the next
available element. So it's stacking the elements. And if you insert another one that's going
to be inserted underneath, once it's inserted, you have an option to move them around. So if for instance, you want to move the second
one above the first one, you just drag it and drop it. And it's nice
drag-and-drop interface. So you can customize where the text is going
to sit on the page. It anytime you can select the text that's going to open
up the editor for the text. So you can customize how this text is going
to be displayed, the font, the size, the styling for the text. You also have an option
to select colors. In the right-hand side, you're going to get
a little pop-up menu that's going to allow you
to select the colors. So allowing you to have the various theme styles of
colors for the text areas. And then you can customize
these as needed. If you find that this textbox
is a little bit too wide, you can also always
narrow it down. And also you can move other textboxes into the
empty areas as needed. So you can really customize how your content is going to
get displayed on the page. Selecting the textboxes
is going to give you the option for the
themes and the colors. So for this one, let's set the style back to
style number 1. And now this styling is going to be the same
across both of them. You can always
drag this one out, update the styling of it. And as soon as you drag
it into the main element, it's going to take
the styling of the first element
within that line. So you can't have
two different styles on one line of the elements. If you want to insert an
image, inserting an image, you select Insert image
where you can upload an image from your computer
or you can select an image. Selecting the image will
open up your Google Drive. And I'm going to select
one of the images that I have on my drive. And you have all of
the same image options to make the selection
of the images. You can also select under embed, which allows you to embed
a URL onto the page. So if you have a URL
that you want to use, what it's gonna do, it's
gonna embed the web URL. It's going to give you either
a whole page or a preview. And once you do an insert, it's going to insert and embed the whole page into the website. If there are any blocks that
you want to move around, you can always select
them and move them. You also have all
of the options for the color options for
the blocks of code. And you can also duplicate the sections and
delete the sections. So that will just
clear out the section. And then you can start
again if you wanted to insert them from the Insert, There's also from the drive. So what you can do is you can select a document
from your drive. So if you have
some Google sheets that you want to insert, you can select it. You can select multiple items. You can also select the
ones that have been shared. So just as you would
within your Google Drive, the recent the start and the computers and shared with me. So I'm going to just
select the one and insert a spreadsheet into the dock. And the way that it will
display the spreadsheet. So it will have all of the different sheets as
tabs there at the bottom. The users coming to your website can see the sheet contents. So let's take a quick preview
and see how this looks. So this is on the second page, and this is how a user would be able to see the
spreadsheet content. They're able to
click the tabs at the bottom to navigate
to the different sheets. If the sheet has more content, you can roll down and scroll down and get the sheet content. They also get the
option to open it up within a brand new page. So if they don't want to look at it as embed into your site, they can open it up on a separate page and see
all of the sheet content. And you can also apply
some styling and also do some resizing
to the sheet content. So I'm going to move
it just up here. I'm going to shrink
it down so it fits in the same as the image. And I'll make the
image slightly larger, announced to a
preview of that and check out what that's gonna
look like on the page. So it does a full
responsive design with the sheet content. So even if we shrink
it down to mobile, it will naturally re-size the sheet content is
viewable within the webpage, trying to stick to
as much as what you've set within the
design window as possible. So this case it is keeping both columns and on the tablet but not
on the mobile phone. And then on the large screen, of course we do see the
tab both columns present. Go ahead and try it. It selects some content from your Google Drive
embedded on your sheet, add some images and update
some of the themes styling, and it could be ready to
move on to the next lesson.
5. 4 Google Sites Layout Tips: So we're going to be looking at the layout and how we
can add various media, including YouTube videos,
content from our drive, images maps easily into a
predefined preset component, which is going to make it
easy to add this content to our webpage in the format that we want underneath
the layouts. Let's look at the
layouts that we have available within the sites. Again, to get rid of the
announcement banner. So that's not showing
up within the heading. And on the right-hand side, under the Insert tab, you've got an option
for layouts so you can open and close the
layouts group. And what the layouts do is
they give us a quick way to customize some of the opponents that we want on our website. So in this case
we've got an image and some text on the
right-hand side. So it Presets what this particular element
is going to look like. And then from here I can upload, I can select an image. I can get YouTube Calendar or a map says number of choices of the media
that water insert. In this case, I'll select
an image from my drive. So going over to the drive, it's going to pop open the
drive on the right-hand side. And I'll just select recent, selecting an image that I
have currently on my drive. And then add in some text and then there's
some subtexts below. So you can customize
this as needed. And that's what the layout does, is it provides you a
quick way to customize. So if you have four images, three images to two,
small, one big. So if you want this
type of layout or different types of media
that you're adding in. You can easily select this from the layouts
and add that in. So let's go ahead and
select from YouTube. I don't have any content
uploaded to my YouTube account, but I can search out videos
that are currently on YouTube and I can
add in those videos, and that will show
the video there on the left-hand side
within the window there. There's also options
for going into the map. So if we want to select a
particular location on the map, you can enter that in and
start typing it, select that, and then that will
automatically populate and create a map for you,
for your webpage. And then here we're going
to select from the drive and we'll select one of the documents that
I have on my drive. And in this case we'll just
do another spreadsheet again. So we're populated all
the three media elements just as we do within
the layout there. And this is the layout
that we've chosen to use. We do have an option to
customize the layout so we can resize the
media as needed. We can also move the
media around as needed. We can apply the different
selection colors. And we can also insert
additional text if we want, by dragging it and dropping it into the element of the layout. So we can fully customize
the layout as needed. And then if we
want to get rid of particular elements
in the layout, we could do that as well, and then we can resize
them as needed. So the layout basically provides
you a quick and easy way to set up and style the
components on your webpage.
6. 5 Google Sites Add Content: So listen, we're going to show
you how you can customize your Google sites by bringing in the various pre-built components that can interact with
content on your Google Drive, from YouTube, from
external websites. You can also have more
interactive components for your webpage. And then these can
all be customized once you have them as components on your webpage and you can customize them and
style them as needed. Going over to sites.google.com, we've got a site
We're working on. This is originally a blank page and we're going over
to the Insert tab. And from the Insert tab we can select the various components. So there's a collapse group
that we can show and we can say that it's collapsible or it doesn't
have to be collapsible. So that will just show
that group uncollapsed. So what we need is a heading. And then this can be
the second part to it. And when we click on this, it will open up the
collapsed part. So let's take a look at
that within the preview. So what a collapsed menu does is it gives us this option to expand the content and then the expanded content will
show once it gets clicked. So this is a nice way to create more interactive components
within your web content. There's also a table of
contents that you can add in. And what the table
of contents is gonna do is it's going
to basically take the headings that you have
within the webpage and create a quick way to navigate them within the
table of contents. There's also an image
carousel that you can add in so we can insert
multiple images. So either uploading the image or selecting existing images
that I have on my drive. I'm going to select a
couple images that I have on my drive to make
the image carousel. So you need at least two
images for the image carousel. Once you insert
that and set that up going into the preview, it's going to show you
the image carousel. And these were very big images, so they're showing
up rather large. I can also expand
this and resize this to fit better within
the area of the page. So resizing the images. And that's the image carousel. So you do have some options
when you select it, to select the settings of it. So you can edit the
images, remove the images. You can add text to the images within
the Settings option. There's also the
cog here where we can set whether we
want to show the dots, show the captions, autostart it, and have a different
transition speed. So we can set all of this within the settings and editing
the image carousel. If you want a button
for your content, you can select the button. So what this does
is this odd sin a button and then whatever we
want where it's linking. So by default we're linking
to the second page. So that's going to
be page second, that's going to
link to that page. We could enter in a URL. So there's a number of
things that we could have there for the
button, the button, just as the other
components, you can drag it, drop it in to where you
need it to show up. It will automatically resize the other components
within the element rule. There's divider.
So the dividers, just a colorful divider
that you can add in if you want to update the
color of the divider, you can select that under
the themes where you can set the different
theme colors. And also notice that when
you change the theme colors, that's going to change the
corresponding elements as well to whatever the
theme color that's selected. So if you were to
change the theme, that's going to change the
color scheme for your website. And then each theme has its
own color scheme that you can select from and update
and customize it. Let's go back to
the place holder. So placeholder is just a place
holder that you might want to come back later to add in some type of content
or component. So placeholder settings,
and we can set it to have an image, Dr
content, YouTube. So this is good while you're
creating your webpage. And then once you have the
content that you want to use, you can easily add that into, can add it into the
place holder as needed. There's also the YouTube. So YouTube will, just as
we saw at the placeholder, it opens up the option to search YouTube ad in a YouTube
video calendar. So you can select calendars
from your account. So this is the account
that I've logged in when I'm creating the test site. So I can select any
one of those calendars and insert them into the page. There's also map
which we've seen before where your
inter location. You can also have your own
customized maps. There's Docs. So these are docs that
are sitting within your Google Drive
that you can add in. And that will set up the dock. There's Slides, Sheets,
Forms, and charts. So these are all available
from your Google Drive. If you're inserting charts, you can select the sheet
where the chart is within. And before you try
to insert the chart, It's suggested that you
do go into the sheet, select the chart and create
the chart within the sheet, and then go back to sites
and added in that way. And those are the various
components that you can add in to really customize
the user, the website. Within Google Sites.
Laurence Svekis, Best Selling Course Instructor
