Styling your website
Video: Styling your websiteWhen it comes to creating a Google site, even though we're using a page template, we have a lot of control over the look and the feel of the actual website itself. Before we start adding a ton of content, I want to go ahead and layout how the site itself should look. Each individual page can also be styled, and we'll take a look at doing that in a later video. To help us start styling the site, I've actually added a little bit of content to each one of our pages. This content is found in chapter six of the exercise files, in a word document called Website_Page_Contents.docx. All I've done is I've edited each page and copied and pasted the appropritate text.
- Next steps
Viewers: in countries Watching now:
Google Apps has been embraced by millions of schools and campuses, but is your classroom getting the most from it? Join educator Aaron Quigley as he shows K–12 teachers how to use Google Apps for Education to streamline communication, save time, and increase content mastery. Administrators can learn how to set up Apps for Education, verify your domain name, and add users, while teachers learn how to sort personal from school email, set up email signatures, add events to calendars, and create lesson plans with Google Drive. Administrators and teachers alike can learn how to set up custom Google sites for collaboration with parents and students, and extend Google Apps with apps like YouTube and Google Scholar.
- What is Google Apps for Education?
- Creating a Google account
- Verifying the domain name
- Configuring Gmail
- Archiving school communication
- Adding office hours to calendars
- Centralizing school documents
- Collaborating with Google Docs
- Creating a Google site
- Adding educational apps
Styling your website
When it comes to creating a Google site, even though we're using a page template, we have a lot of control over the look and the feel of the actual website itself. Before we start adding a ton of content, I want to go ahead and layout how the site itself should look. Each individual page can also be styled, and we'll take a look at doing that in a later video. To help us start styling the site, I've actually added a little bit of content to each one of our pages. This content is found in chapter six of the exercise files, in a word document called Website_Page_Contents.docx. All I've done is I've edited each page and copied and pasted the appropritate text.
To edit a page from your site, you simply select it, and then click on the Edit button in the upper right hand corner. Let's go ahead and talk about how we can make changes, though, to the overall look of the site. Any time we'd like to make site wide changes, we need to do this by using the Site Management menu. To access this, we're going to click on the More button with the drop down arrow. Under the drop down, we're going to go ahead and choose to Edit the Site Layout. So at this point, we have the ability to make changes that are going to impact the entire site. What that means, is whatever I change here, even though I'm currently viewing the home page, those pages will stay consistent, no matter what page of the site I'm viewing.
For example, let's go ahead and edit the sidebar. On the left hand side, I can see that the sidebar has an Edit button, as well as a Plus button. The Plus button will allow me to add additional elements to the sidebar. The Edit button will allow me to change the format of the sidebar. I'm going to go and click the Edit button. At this point, we have a chance to choose whether or not the sidebar is going to display on the left or the right of the screen and what its overall width is. By default, it's at 150 pixels for this particular theme. I'm going to go ahead and make this a little bit wider, to, let's say, 250 pixels, so that it takes up a little bit more of the screen space.
And as we start adding more pages, as well as more drop downs to those pages, all the text will fit without wrapping. I'm going to go and click OK. You can now see that the sidebar has been widened by an additional 100 pixels. In addition to that, let's go ahead and add something else into our sidebar by clicking the Plus button. One thing that we can do with collaborative sites, especially if we're working on a project, is we can add a countdown to when the project begins. So I'm going to go ahead and add a countdown until the date that we expect our garden to be complete. To edit this, I'm simply going to click on it.
Let's just say that our garden is one year away from completion. I'm going to go ahead and give this event a title, which is Garden Opening. And I'm going to choose a date that's exactly one year from today. So I will go to October 11, 2014. I will click OK. And I can now see on the left-hand side, I have a countdown showing that there's 365 days left until we expect our garden to open. The next thing I'd like to edit is actually the header of our particular sidebar. To do that, I want to make sure that the header's turned on. The buttons in the top corner act as toggle buttons.
Clicking the header button actually turns it off. Clicking it again, turns it back on. In addition to having the header there, I'd also like to add some horizontal navigation. This is some navigation that's going to go across the top of our website, and for this navigation, currently there's only a Home button available. To edit the navigation, I'll put my cursor anywhere above it, and I'll go ahead and click. At this point, I'm going to go ahead and add a couple pages to the navigation. I'll select Funding Page, and I will click OK. And then I will add another page, and I will select Planning Page and click OK.
So at this point, we should have three different items across the top of it. I can also choose whether or not they're be boxes, tabs, or links. I'm going to go and leave them as boxes and then click OK. So now we have some top level navigation. We have some sidebar navigation. We have the title of our site, and then the main content area. The last thing we need to do is take a look at some of these colors. By default, a lot of these fonts are coming through with kind of a red color. However, our school colors are blue. So let's go ahead and edit the colors of these particular fonts. To do that, we need to exit the Site Layout and go into Managing the Site.
I'm going to go ahead and click Close to save those changes. I'm going to go back to More > Manage Site. Under Managing Site on the left-hand side, I'm going to select Themes, Colors, and Fonts. Here I have the ability to change how different parts of the site look. For the entire page, I can choose to change the colors of the background, how images display, as well as wrapper images. I can also click on Text, and I can choose to change how the text looks. Now, by default that pulls all this information from the theme that we have selected.
However, I can choose to overwrite any of these theme options by selecting the radio button to the right of it and then making whatever changes I want. So, for example, if I want to change the font of the text, I can use this drop-down menu, I can come down here and I can choose the font that I want, click it, and you'll see that the fonts automatically change in the preview screen below. Now even though I can see the change in the preview screen, this change has not taken effect yet. None of the changes I make will take effect until I click the Save button. But the preview screen allows me to see how the font colors, sizes, and everything fit together before making those changes.
The next thing I'm going to change is the link color. As of right now, the theme has kind of this reddish color for all links. I'm going to go ahead and change this, and I'm going to choose something more appropriate to my school colors, such as this blue color. You can now see down in the preview, that all of the links have switched to a blue color. At this point, I like the way the site's starting to come together. I'm going to go ahead and click the Save button, and then I'll click on the site title on the left hand side to to back to the main site home page. So here you can see some of the site-wide changes already taking effect. We've made the sidebar a little different, we've changed some of the fonts, and we've even changed the link colors.
There are currently no FAQs about Google Apps for Educators.