Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Hello and welcome to another edition of Teacher Tips. With winter break right around the corner, this week we're going to quickly build a classroom website where we can post assignments for students to complete over the holiday. This way students will always have access to the assignment instructions and resources, anytime they have access to the internet. Also, having assignments on line means you can email parents the link, and make sure both parents and students have a clear understanding of the winter break homework. To build our website, we're going to use an online education version of Weebly. Weebly will allow us to build a free website in just a few minutes.
Let's go ahead and dive right in by creating our logins and styling our website. To get started, let's go to education.weebly.com in our web browser. From here, we can select the user name, I'm going to go ahead and use scienceovs, for Orange Valley School. I'll select a password, and I'll put in my email address. You can access the Weebly terms of service by accessing the Terms of Service link. If you agree with these terms of service, go ahead and click the check box for I accept, and then click Sign Up. The first step is to go ahead and build in some information about yourself and your school.
I'll go ahead and put in my first and last name. My school name, a school district, if you have one. I'll also select the Country and State, and then click Submit. While there's a variety of options you can do at this point, to watch demos for how to use Weebly, or even build classes directly into your website. We're going to skip these steps, and just go ahead and create our first website. So let's click on Create a Website. The first step is to choose a theme. Now the themes give your website some basic styling, such as, what do the menu bars look like, what are the colors and the fonts that are going to be used on your website.
Some colors can actually be customized inside of an individual theme. So, for example, as I scroll down and look at the theme right here on the left, as I hover my cursor over the theme, I can see a variety of colors that pop up at the bottom. If I select, let's say this fuchsia color, I can see that the links and the buttons inside of this theme change colors. This allows you to customize your theme to your school look, and make it perfect for your classroom. I'm going to go ahead and scroll down the page, until I come to the theme that I'm looking for. So here I have a theme that resembles a little bit of a chalkboard. It's kind of a dark gray background with some lighter images that are placed on it.
I enjoy the sewn look of this menu bar and I think the layout will work really well for the website I'm creating, which is a place to post student information. The one thing that I don't like is that the title and the links are this green color. Because my school colors are blue, I'm going to go and select the blue color from the options at the bottom of the theme window. Now, with this blue title and the grey background, the colors match my school colors perfectly. I'm going to go ahead and click choose theme. So at this point, we've created out account, we've selected the theme of our website. The next step is to choose how people can access our website.
The first option, which is the option I recommend, is to use a sub-domain of weebly.com. Here you can select some text, that will be, the text.weebly.com, and that will be how people access your website. This is a free service that you can use through weebly. Here you can also choose to register your own domain. So, for example, it could be yourschool.com, but this is a service that does cost money. If you'd like to register your domain, you can choose this option and weebly will walk you through the process of finding a domain and registering the domain. If your school already owns a domain, and you'd like to make your website on that domain, you can also choose to connect it to Weebly here.
Let's go ahead and select Use a Subdomain of Weebly, and I'm going to put in OVS science for Orange Valley School science class. So my students and parents will access the website at ovsscience.weebly.com. I'll go and click the Continue button. So here, Weebly gives us an introduction video to how to use the platform. I'm going to go ahead and click on Build my site. You'll also notice as I start to use Weebly that they have tool tips that help me learn how to use the various parts of their website. For example, the main part of the screen is actually what the website's going to look like once it's finished and published.
There's places where there's filler text. And if I do not replaced this filler text, it will not show up on the website. I'll go ahead and click to remove the Tool tip. And as I scroll down I can see that there's also places where I can add more information to the website. As of right now I have just one page created, which is my Home page. Because the box around it is dark, and I can see the interior shadow, that tells me that the Home page is selected, and that's what I'm looking at. In this main view, as I'm styling my website, I can actually click between various pages that appear in the top navigation, and then style those pages as well.
On the left hand side, I have a navigation bar that allows me to add various parts to the website. The first section navigation is the basic site. Here I can drag additional titles and text, images, and even assignment forms directly into the pages. The next section of tools down is the structure. I can add dividers and columns to websites. I can also add buttons. And you notice here that search box has a little star to it. The star refers to pro members of the Weebly community. If you would like to pay for your website, and have a pro membership, you can then add the functions that have the stars in them into your websites.
Because we're using the free version, we won't be able to add a search box to our website. The next section down is media where we can add video, audio, documents, Youtube, flash files, and even embed Word documents directly into our website. Once again, HD video and audio have stars on them for the premium members. The next step down is commerce where we can sell products on our website. And then finally we have the More menu, where we can add things such as polls, RSVP forms, and even forums directly into our website. Throughout the building of our website, we will use a few of these features.
However, I highly recommend exploring the rest of these features, as you may choose to develop your website, beyond our use, during this holiday break. Before I start adding pages and information, I'd like to make a few changes to the website that are going to be site wide. Meaning the changes I make right now will impact every single new page I create. The first thing I'd like to do is to go ahead and add a title to my site. I will double click over top of the title section, and I will just go ahead and type out Mr. Quigley's Science Classes. On every single page of the website, Mr. Quigley's Science Classes will show up as the title.
In addition to that, there's a place for some text at the top left-hand corner of the page. I'm going to go ahead and add a quote here that says, exploration is the path to knowledge. The last change I'd like to make is here on the Home page. By default, the Home page has an image that shows up. Now, there's several ways that we can choose to style the Home page or any page that we create. By clicking on the gear icon in the upper right hand menu, I can go ahead and change this page layout. I can have a tall header, a short header, a landing page which is a combination of a left hand image with some text and a button, or I can choose to have no header at all.
I'm going to go ahead and leave this defaulted to tall header, but this picture of a house isn't real appropriate for my winter science website. So I'm going to go ahead and add an image of a scientist working in the Arctic. To change this, I'm going to click on the Edit Image icon, and I'm going to in and click on Add Image. If you're a premium member of lynda.com, you have access to the exercise files. Inside the exercise files, I've included an image of a scientist that is setting up some equipment in the snow. To upload this file I'm going to go and click upload a photo from my computer. On my desktop I have the exercise files. I'll go and select the image and then click Open.
So by default Weebly is taking that image and just fitting it in its first dimension constraint, which happens to be the height. However I'd like this image to fit this entire area including the white spaces, the left and right. To make that happen, I'm going to go ahead and grab one of these corner anchor bars. I'm going to click and hold. I'm going to drag up until I see the line to the left hand side of the page. The same way I grabbed the anchor and drag up on the top, I'm going to grab the left anchor icon. I'm going to click and hold, and I'm going to drag all the way to the left, until it snaps to the side of the page. Here, anything that's dark will be automatically cropped out of this image.
So right now, if I were to click Okay, and to save this, the head of the scientist would be cut off. But I'd like to have the majority of the science equipment, as well as the top of the hand of the scientist in the shot. If the scientist's legs are cut off, that's okay, it won't really ruin the photo for this particular header. So I'm going to grab the image and drag it straight down, until the part of the image I'd like in the header is visible. I'll go and click the Okay button. And here I can see a preview of what the header image is going to look like. If I'm satisfied with the way that it's cropped I can go and click Save. And I'm going to choose to Save to All Pages.
So, any page that's using this particular header layout, will now have this image added to it. Here I can scroll up and down, and so far my website's starting to take shape. The next step is to go ahead and add some content to the Home page, as well as to create individual pages, for both the seventh and eighth grade class, where they can access their homework over holiday break.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 64698 Viewers
80 Video lessons · 124318 Viewers
52 Video lessons · 60253 Viewers
59 Video lessons · 46084 Viewers