Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the first part of this course, we created the basic structure and layout for a website that we're going to use to upload assignments for our students to access over winter break. In this video we're going to go ahead and create the pages for each one of our classes, and upload an assignment the students can then access online. We'll also create a way for the student to turn an assignment in directly inside of the website. To get started, let's go and create pages for each of our classes. To add new pages to your Weebly website, we're going to click on the pages button in the upper navigation. By default, we have only one page created which is our home page.
With the home page selected, here I have the opportunity to change the page name. I can select a new layout for the home page. And I can even choose to hide the home page in the navigation menu. I'm going to go ahead and click Add New Page in the upper left hand corner. I'm going to select to add a standard page, and I'm going to call this standard page, seventh grade. Because I want the seventh grade page to contain an assignment, I'm going to go and select the No Header page layout. That way, when my students navigate to the seventh grade page, they'll immediately see the assignment information, and not the photo.
I'm going to go and click, Save and Edit. Weebly's going to automatically save that page for me and take me to that page so I can start adding information. To help speed up this process, I've created a Word document that contains all of the information we're going to use in our website. And if you're a premium member of lynda.com, then you'll have access to this Word document. I highly recommend downloading the exercise files to your desktop so you can quickly move between the Word document and your Weebly website. Here, because we just created the seventh grade page, I'm going to go ahead and copy all of the information for the seventh grade assignment.
I'll use the keyboard shortcut of Cmd+C, or Ctrl+C on the PC. I'll head back over to my website, and now I need to go ahead and paste that text. In order to add elements to the website, we select an element from the left hand list, and simply drag it onto the website, where we'd like to have it. Let's start by adding a title. I'm going to select and hold the title box, I'm going to drag it over to the website, and then go ahead and release. To edit the title, I'm going to go ahead and click where it says, click to edit, and I'm going to type, 7th grade winter break homework.
I'll click outside of its box to go ahead and save those changes. The next thing I'd like to do is to add the text or the main body of the assignment. To do that, I'm going to grab the Text element on the left-hand side, drag it over to the main website. And I'm going to make sure that the blue line that appears is directly below the title that I just typed. I'll go ahead and release that. And then I will click on that text to edit it. Now, because I copied that text from the Word document, all I have to do is paste that text, by using the keyboard shortcut of Cmd+V, or Ctrl+V on the PC.
And here I've added the instructions for our students to complete an assignment over holiday break. I'd also like to give students the ability to submit the assignment directly online. To do that, I'm going to go ahead and click outside of the box. I'm going to come back to the left-hand element, and I'm going to select an assignment form, drag it over to the website, I'm going to put it directly below the assignment prompt. I'm going to go ahead and click on the main webpage to remove the tooltip so we can format this particular prompt. So I'm going to click to edit the form, click a second time to edit the title text, and type, turn paper in here.
Now by default, students are going to be asked to fill some basic information. Their first and last name, their email address, and then there's a dialog box where they can upload their paper, and a Submit button where they can submit it. The biggest question you're probably asking yourself is what happens to the paper when students submit it. Well, in order to determine how this form works, let's go and click on Form Options in the upper right-hand corner. By default, all form submissions are going to be emailed out to you. You can also choose to change the confirmation text that will appear after a student turns the paper in. You can change the spacing of this form. And you can also customize the Submit button.
I'm going to go ahead and leave all of these settings as default, so that every single time a student turns in a paper, that paper will be emailed to me. This way I can quickly open the paper up, use Track changes to make some comments and add a grade, and then simply email the graded paper back to the student. Let's go and click Save in the upper right hand corner to save this form. So here we've created the seventh grade page, that has an assignment and a place for students to turn the page in. Let's go and create the next page, which is for our eighth grade class. I'll click on the Pages button again, and then click on Add Page.
Once again I'll select a standard page. I'll give this page a page name of eighth grade, and I'll select No Header again. Let's go and click Save & Edit. So here for the eighth grade page, I'll go ahead and add another title. I'll click to edit that text, and say, winter break homework. I'll click outside of that box. Let's head over to our Word document, and copy and paste the eighth grade homework. Now eighth grade's being asked to do an at-home lab, so I'm going to go ahead and copy all of this information. Use the keyboard shortcut of Cmd+C, or Ctrl+C on the PC.
Head back to the website. We'll go and grab a text box, drag it over to the webpage. Click to edit the text, and we'll paste it in there using Cmd+V, or Ctrl+V on the PC. Now you can see that some of the formatting came through, such as the bolded text. If at any time you'd like to edit this text, you can simply highlight a certain section of text. Use the text editing tools to bold, italicize, underline. You could even change the color of certain parts of the text. I think that this lab information though looks pretty good, and I'm just going to go ahead and scroll to the very bottom of all the instructions, click outside of it, and go ahead and drag an assignment form in directly below the lab information.
Once again, I'll click to enter the form. Click again to edit the title text. And we'll go ahead and say, turn in lab report here. I'll click the Save button to save that form. And I now have my seventh and eight grade pages completed. The last step is to go ahead and help students find these pages on the home page. To that, let's go and click on Home. Here from the home page, when students first navigate to the website, I'd like to give them some information on how they can find their particular section. We're going to start again with a title bar.
I'll click and drag a title onto the main website area. I'm going to go ahead and click to add text, and I'm going to say, winter break homework. Now I'd like to center this particular text on the website. To do that, I'm going to use the drop-down menu for the paragraph justifications, and I'm going to select Center. The next step is to add some text directly below that. This text, I'm going to click to edit, is going to say, choose your class to see a list of required break, work, and resources. I'll again use the paragraph justifications to center that text. Now what I'd like to create is two buttons that are side by side: a button for seventh grade and a button for eighth grade.
To do this, I need to do a couple of steps. The first step is I need to add two different columns in this page. To add columns, I'm going to go ahead and click on the Structure button in the upper navigation. Under the structure menu, I'm going to grab the Column button, I'm going to drag the columns on to the website. And here you can see that two columns were created. If I'd like to increase the number of columns, I can simply choose a different number to change the number of columns. The next step is I'm going to go ahead and grab the Button icon and drag a button on to the left hand column.
Now, notice, the blue line is only showing up going halfway across the page. If I'm slightly above the column, you'll see that that line now goes all the way across the page. That's not what we want. We'd like to have this button be directly inside of the left-hand column. So with the line in the proper place, I'll go ahead and release my mouse. When I click on the button, I then have the opportunity to style the button. The first thing I'm going to do is to go ahead and center the button inside of its column. The next step is to change the button link. I'm going to ahead and triple click on the text and type 7th grade.
So here, with our button centered on the left hand side, and with it saying, 7th Grade, it's going to look really nice when we add that other button the right hand side. The last step is to actually choose where does this button go to, and we can select that by clicking on Link in the button menu. If I'd like to, I could actually type in website address, or what I can choose is a page on our website. Because we've already created the seventh grade page, let's go and click Page on our website and select seventh grade and then click Save. We're going to duplicate that exact same process for the eighth grade button.
I'll grab a button from the left hand side, drag it over until it's in the right hand column. I'll release it. Click on the button to bring up the button dialogue box. I'll center that button in the column. Triple-click on the button text to select it all, type, Eighth grade, click on the link, we're going to choose to link this to a page on our website, we're going to select Eighth grade, and then click Save. I'm going to click outside of everything to make the button dialog box go away so we can now take a look at our website.
So here we have a home page that when students come to they can see information about the class. They can scroll down to see winter break homework. And they can choose to click on 7th grade to go to the 7th grade page or 8th grade to go to the 8th grade page. The last step, now that our website's complete, is to go ahead and publish it. I'm going to click on the publish button in the upper right-hand corner. Because we're choosing to use a subdomain of Weebly, I'm going to go ahead and leave the subdomain that I chose earlier selected, and I'm going to click Continue. For the website category, I'm going to choose Education. And then for the subcategory, I'm going to choose a teacher website and then click continue again.
So this time Weebly's going through. It's creating the pages, and it's publishing our website. When we get to this screen, our website's been officially published at ovsscience.weebly.com. I can click on this link, and Weebly's going to take me to my finished website. Here I can see the website as it'll appear to our students. Our students can scroll down the page, come to their individual class, when they click on their class button. And they can even choose to turn their assignments in directly on the website. I hope you enjoy using Weebly to create a classroom website for your own class.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 67765 Viewers
80 Video lessons · 126117 Viewers
52 Video lessons · 61701 Viewers
84 Video lessons · 28193 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.