Teacher Web Page Basics

Alex Reyes
LESSON 1
Create A Free Account
Weebly is a web based, it can be accessed by either Windows
or Mac computers. Open your favorite browser and go to
weebly.com.
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.
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 youve 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. Youre 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.
Remember, make your site clean and professional. We
recommend a simple basic theme for your site.
Hover over a theme, a menu will display at the bottom with a
button to choose the theme. Click on the choose button.
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
arent 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.
Create your free subdomain in Weebly. This is the link you
will provide to others for the site.
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.
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
Weebly Teacher Page
LESSON 2
Update The Landing Page
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.
On the menu above your page, click the Pages option.
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.
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.
Select the short header page layout and click the save & edit
button.
9
Weebly Teacher Page
Your home page now has a short header.
10
Weebly Teacher Page
LESSON 3
Your Site Name
Weebly provides a generic name to your site. Lets update this
with your personal site name. Click once on the site title after
the E in SITE.
You might have to click a couple of times, but eventually the
cursor will appear.
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
Weebly Teacher Page
LESSON 4
District Centennial Logo
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.
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.
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 youre 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. Ill 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
Weebly Teacher Page
LESSON 5
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
Weebly Teacher Page
LESSON 6
Contact Form
Weebly automatically creates three pages when it creates a
site. Weve 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.
Weebly has a contact form element. Drag and drop this
element onto your contact page.
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.
Lets edit a few things on this form.
Click on the area that reads, click here to edit.
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
Weebly Teacher Page
LESSON 7
Schedule Page
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.
If you want to repurpose the About page, click the about page
selector in the left panel.
30
Weebly Teacher Page
Lets change the page name to Schedule. After changing the page name, you can select a page layout for
the schedule page. Ill 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 dont 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
Ive named my page Schedule and selected the no header page
layout.
If you dont 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
Weebly Teacher Page
LESSON 8
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 publish button.
Click the link to your site to view the published information.
The page opens in a separate window or tab.
Dont provide information for the .com option. This will try to
sell you a .com domain name.
37
Weebly Teacher Page
Return to the previous window or tab and click the close
button to edit, update or add content.
38
Weebly Teacher Page
2014
xxxix
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.