Teacher Web Page Basics
Alex Reyes
L ESSON 1
Weebly Teacher Page
Create A Free Account
On the Weebly home page you will be prompted to create a free account. Fill in the information beginning with your full name, district email address and a password of your choice. Weebly is a web based, it can be accessed by either Windows or Mac computers. Open your favorite browser and go to weebly.com.
Use your district email, Weebly will use this for the contact information in the contact form, which we will be creating later. Use any password you like, but we recommend using your district password. We do not manage Weebly, so if you forget the password you will need to retrieve it through Weebly.
1
Weebly Teacher Page
Once you’ve entered the required information, click the get started button.
When you return to Weebly the next time, click Login in in the upper right corner.
2
Weebly Teacher Page
After clicking the get started button, a page will display where you will be prompted to select a pricing plan. We will be using the free version, so click choose on the free version.
The next page will prompt for the type of site you will be creating. Click on the first option to create a basic site. We will learn more about creating blogs in other lessons.
3
Weebly Teacher Page
After clicking site, you will be prompted to select a theme for the site. You’re not stuck to a theme. Themes can easily be changed later without loosing your content. In this lesson I will be using the first theme.
Hover over a theme, a menu will display at the bottom with a button to choose the theme. Click on the choose button.
Remember, make your site clean and professional. We recommend a simple basic theme for your site.
4
Weebly Teacher Page
A page will display and prompt you to select a domain for your web site. A domain is a site name like www.yisd.net or www.apple.com. These are domain names. Domain names aren’t free. Weebly provides subdomains for free. Subdomains are like the ones we use in the district. For example, eduphoria.yisd.net or my.yisd.net. In each of these examples eduphoria and my are subdomains of yisd.net.
When creating your subdomain, the district wants you to use your district account. This is the same account used when logging into your computer, email and other services in the district. My email address is lreyes1@yisd.net so my district account name is lreyes1. Enter your district account for the subdomain.
Create your free subdomain in Weebly. This is the link you will provide to others for the site.
5
Weebly Teacher Page
Weebly is not a district purchased service and it is used by people around the world. Chances are good that your subdomain name might already be taken. If this happens, you will need to provide a number after your current account. This is fine for district purposes, we understand the limitations of the system.
Update your subdomain name if needed until you see the available check mark on the right.
6
Weebly Teacher Page
Click the continue button in the lower right corner.
A box will open with a video introduction to Weebly. To begin building the site, click the build my site button on the bottom of this box.
7
L ESSON 2
Weebly Teacher Page
Update The Landing Page
On the menu above your page, click the Pages option.
Weebly creates your site with what it calls a landing page. A landing page is like a welcome page or and introductory page. The first thing we need to do is change the home page from a landing page to a regular page.
8
Weebly Teacher Page
The home page settings will display. The current page layout is set to Landing Page. This selection is highlighted in blue on the right.
Select the short header page layout and click the save & edit button.
We can select one of three other options. We can select a page layout with a tall header, short header or no header. What is a header? A header is a banner image at the top of the page. Tall header images take up too much space in my opinion but I think my home page needs a header, so I will select a short header layout. The header image banner is a great way to highlight events with pictures. 9
Weebly Teacher Page
Your home page now has a short header.
10
L ESSON 3
Weebly Teacher Page
Your Site Name
You might have to click a couple of times, but eventually the cursor will appear.
Weebly provides a generic name to your site. Let’s update this with your personal site name. Click once on the site title after the E in SITE.
11
Weebly Teacher Page
Erase the generic title and enter your own title. Use what every you like, but make sure to keep it professional and education related.
When editing your site name, a menu displays with the options to use the text on your home page, to turn off the site heading or to use a logo. Currently, the district wants teachers to use the district logo on their web site pages. We will learn how to place the logo on your site in the next part of this lesson. The Logo will replace your site name.
12
L ESSON 4
Weebly Teacher Page
District Centennial Logo
Scroll down to the bottom of the home page and find the other resources section. In the other resources section, click on the For Employees link. To place the district logo on your Weebly site, you need a copy of the official district logo. Go our our district site ate www.yisd.net.
13
Weebly Teacher Page
Find the links section and click on the Branding Resources link.
The branding resources are stored in our district SharePoint site. This site is only accessible by district employees. Enter your district user name and password and click the OK button.
14
Weebly Teacher Page
Click on the District Logos folder.
Click on the YISD Centennial Logo folder.
15
Weebly Teacher Page
We need the logo titled YISD_Centennial_Logo_PNG.
Hover your mouse over the file and you will see a check box next to the file icon.
16
Weebly Teacher Page
When you place a check mark on the file, the SharePoint Ribbon will display with several options. Click on the Download a Copy option.
Depending on the browser you’re using, the file will automatically download to your download folder or you will be prompted to save the file. If prompted, click save file. In either case, the file is saved to your download folder.
17
Weebly Teacher Page
Login to your Weebly site and click once on your Site name.
When the contextual menu displays, click on the logo option.
18
Weebly Teacher Page
A window will open with the option to drag and drop the image onto the window or to select the file from your computer. I’ll chose the upload option from my computer.
The image should be in your download folder. Select the image and click the choose button.
19
Weebly Teacher Page
The image will upload and automatically be placed as the logo to your site.
20
L ESSON 5
Weebly Teacher Page
Basic Site Information
Weebly uses what it calls elements to help build your site. Scroll down a little on your home page below the header image. You will see instructions to drag elements here.
The elements we can use are located on the left panel. Teachers are required to provide some minimal information on their site. To provide this information we need a text element. Drag and drop a text element onto the home page.
21
Weebly Teacher Page
When dragging an element onto a page, look for the element to change to a blue color and a blue line. This blue line will be useful in future lessons for positioning content. When you see the blue line and blue element, release the element.
The text box element will display a helpful click here to edit. Click here to edit.
22
Weebly Teacher Page
You will see a cursor and a contextual menu for formatting text.
The minimum information required is... 1. Your name 2. Grade level or content 3. Email address 4. Classroom phone number
23
Weebly Teacher Page
To change the size of the text, select the text and click the plus button to increase the text size.
There is no save button because your changes are automatically being saved.
24
L ESSON 6
Weebly Teacher Page
Contact Form
Weebly has a contact form element. Drag and drop this element onto your contact page.
Weebly automatically creates three pages when it creates a site. We’ve entered basic information on the home page. Now we need to create a contact for visitors to your site. These visitors are typically parents or students. One of the pages is a contact page. Click on the contact menu link.
25
Weebly Teacher Page
A basic contact form is automatically created. This contact form will send email to the email used when creating the Weebly account. If you used the district email to create the account, this form will send the information on this form to that email.
Click on the area that reads, click here to edit.
Let’s edit a few things on this form.
26
Weebly Teacher Page
The text box will activate. Erase the text and enter your own.
The next thing you might want to change is the fields that are required. The form automatically requires visitors to provide an email address. Most people have an email address today, but some of your parents may not. It would be a good idea to remove this requirement. Click on the email box once.
27
Weebly Teacher Page
A field box will appear around the email field. Click again on the email box.
The email field configuration panel will display. The panel is showing that this field information is required. Move the slider from Yes to No.
28
Weebly Teacher Page
When you change the requirement from Yes to No, the required asterisk is removed from the email field.
Forms are different from text boxes in that changes to forms need to be manually saved. Click on the orange save button.
29
L ESSON 7
Weebly Teacher Page
Schedule Page
If you want to repurpose the About page, click the about page selector in the left panel.
The last item we will add to our site in this basics lesson, is a class schedule page. We already have an about page. We can repurpose this page for our schedule or create a new page for our class schedule. Click on Pages in the menu.
30
Weebly Teacher Page
Let’s change the page name to Schedule.
After changing the page name, you can select a page layout for the schedule page. I’ll leave mine with a short header.
31
Weebly Teacher Page
Click the save and edit button to begin working on your class schedule.
If you don’t want to repurpose your About page, you can add another page. Click on the Add Page button.
32
Weebly Teacher Page
Click on the Standard Page option.
The page will be created and placed at the bottom of the pages. Click on the page name field and give your page a name.
33
Weebly Teacher Page
I’ve named my page Schedule and selected the no header page layout.
If you don’t want the schedule page to be the last menu item, drag and drop the page up the menu list.
34
Weebly Teacher Page
Drag and drop the page button to your desired location.
Click the save and edit button.
35
Weebly Teacher Page
Drag a text element onto the schedule page.
Click to edit the text box with your schedule information.
36
L ESSON 8
Weebly Teacher Page
Publish None of what you have created thus far is viewable to the world. You must publish changes for them to be viewable by everyone.
Click the link to your site to view the published information. The page opens in a separate window or tab. Don’t provide information for the .com option. This will try to sell you a .com domain name.
Click the publish button.
37
Weebly Teacher Page
Return to the previous window or tab and click the close button to edit, update or add content.
38
Copyright ŠCopyright 2014 by Alex Reyes Cover design by Alex ReyesBook design by Alex Reyes This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License. To view a copy of
this license, visit http://creativecommons.org/licenses/by-nc-nd/3.0/.
Every effort has been
made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is provided without warranty, either expressed or implied. Neither the author, nor any distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.The author has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, the author cannot guarantee the accuracy of this information.
Š 2014 xxxix