CWS 101: Building Class Websites with Weebly

Moving Towards Moving Towards Technology Enhanced Teaching

As the internet has grown, it has brought with it a number of expanded opportunities within education, the
least of which is classroom websites. Many teachers have seen beautiful websites for various classes
online, but have been left wondering how to create one for themselves. Whether you're a tech savvy
teacher or one who needs a little more assistance with technology, this course is designed to help you
build your very own class website from the ground up. By the time you are done with this course, you
should be able to create a class website, create pages within your website, add various elements to your
pages, and publish your finished products.

Course Overview
This class is designed asynchronously and is entirely self-paced. As you master the various pieces of the
puzzle, you are able to move onto the next step, building up your own website along the way. However, if
you ever need to go back and revisit a topic, you are more than welcome to. Within each content page,
there will be a short, multiple-choice self-assessment designed to help you check for understanding before
you progress further. It is highly recommended that you complete these self-assessments to the best of
your ability and use those to guide your progress through the course.

Meet Your Instructors

In order to help us develop a sense of community with our learners, we would like to share a little bit of
information about ourselves with you, our learners. We have also included some contact information so
that you can communicate any questions, comments, or concerns that you may have as we work together
to build your first class website!

Mr. Nathan Ashworth

Mr. Ashworth is an 8th grade science teacher at Dutchman Creek Middle School. He graduated in 2015
with his Bachelors Degree from the University of South Carolina and is currently pursuing his Masters in
Education from Coastal Carolina University. Outside of the classroom, he enjoys Harry Potter movie
marathons and spontaneous road trips.

Email: NAshworth@rhmail.org
Phone: (803)-985-1700
 Ms. Whitney Helton
Ms. Helton is a 7th grade science teacher at Dutchman Creek Middle School. She graduated in 2016 with
her Bachelors Degree from Winthrop University and is currently pursuing her Masters in Education from
Coastal Carolina University. Outside of the classroom, she loves spending time with her fiance, Jon, and
traveling across the country.

Email: WHelton@rhmail.org
Phone: (803)-985-1700
Ms. Katie Schaade
Ms. Schaade is a 7th grade math teacher at Dutchman Creek Middle School. She graduated in 2016 with
her Bachelors Degree from Winthrop University and is currently pursuing her Masters in Education from
Coastal Carolina University. Outside of the classroom, she enjoys spending time with her dog, Murdock,
and impromptu dance parties.

Email: KSchaade@rhmail.org
Phone: (803)-985-1700
Module 1: Creating Your Site
New Beginnings
As you begin to build your new class website, it is important to start with a strong foundation. The
purpose of this introductory module is to ensure that all learners have created a Weebly account, created
their class website within the Weebly platform, and are able to add pages to their Weebly site. By
completing these foundational tasks, you will be well on your way to creating your very own classroom
website.

Goals & Outcomes

After completing this module, students will be able to:

 Create their own account with the Weebly Education platform

 Create a Weebly website
 Add or Delete pages on their Weebly website

Topic 1.1: Getting Started

Starting Strong
We truly believe that a strong foundation is the key to building any longstanding structure. The same
principles apply to developing your classroom website. Accordingly, Topic 1.1: Getting Started has been
divided into two smaller subtopics, both of which are related, but are distinctively different. By paying
careful attention to both processes, we lay the framework for successful website building moving
forward.

Topic 1.1a: Creating Your Weebly Account

Creating Your Account
Due to its simple interface and free access, we will be using Weebly to build our class website. In order to
get started, we will need to create a user account on the Weebly website.

Start by navigating to the URL education.weebly.com (1). Once you are there, you should se e a box on the
right hand side of the page that says "Get started here" (2). Using this box, select a username and
password and enter your email address. Check the box to accept the terms of service, and then hit the
orange Sign Up button (3) to complete the process.
Be sure that you are using the correct Weebly for Education platform, as it gives you access to more
features and allows you to create more sites for free!

If you are having any troubles, please watch this screencast tutorial to help you better understand the
process of signing up for a Weebly account
Video: https://www.youtube.com/watch?v=vhz83UmDvQE
Before continuing on to Topic 1.1b, make sure to complete the following self-assessment. This will help
ensure that you have mastered this step of the process before you move on.
Assessment: https://quizlet.com/305341067/topic-11a-self-assessment-flash-cards/

Topic 1.1b: Creating Your Weebly Site

Creating Your Website
Now that we have created our account with Weebly, we will go ahead and create our first website. After
logging into the Weebly platform, you will be on a homepage with a number of tabs. Make sure that you
have the "Sites" tab selected (1) and then click the orange button that says Add Site (2).

After selecting Add Site, you will be brought to a page that will require you to select a theme. You can
select any theme that is appealing to you, but it is recommended to select a theme with navigation options
on the left-hand side of the page for easier access. One example of this is the Jack & Katie theme, found
under the Personal category.
Selecting Your Domain Name
After selecting your theme, you will have to select the domain name that will be used to navigate to your
site. You can select anything you want for this, however, if you want to publish the site for free, you
must end the domain name in weebly.com. The video below can provide further explanation on this
process.
Video: https://www.youtube.com/watch?v=pJ5qnzdJfuU
Before continuing on to Topic 1.2, make sure to complete the following self-assessment. This will help
ensure that you have mastered this step of the process before you move on.
Assessment: https://quizlet.com/305744869/topic-11b-self-assessment-flash-cards/

Topic 1.2: Adding Pages to Your Weebly Site

Deleting Pages on Weebly
After selecting your theme and domain name, you enter your own Weebly site. Unfortunately, there are a
few sample pages already created for you. Feel free to browse through these for ideas, but after doing so,
it is time to remove them from your website. At the top of the screen, select the option that says Pages (1).
From there, select a page that you would like to delete and click the icon on the right hand side of that
page's bar (2). This will not only bring you to that page, but will also bring you to a menu for that page's
settings. Here, you can customize the Page Name, select whether or not to show a header image, or edit
the Visibility and SEO settings for the page. At the bottom of this menu, you can also select the button
that says Delete (3) to get rid of the pre-populated page.
Adding Pages on Weebly
Now that you have your own blank canvas, it is time to start making it your own. At the top of your
screen, select the option that says Pages (1). From there, you will see a column on the left hand side of
your page titled Pages. Select the plus sign (2) beside the word pages to create a new page on your Weebly
website. This will open a drop down menu where you can create one of the various types of pages
available on Weebly. For your first page, we recommend adding a Standard Page (3).

If you need any further assistance, the tutorial below will help you with deleting or adding pages to your
own Weebly site.
Video: https://www.youtube.com/watch?v=xRBzqhzh_IU

Before continuing on to Module 2, make sure to complete the following self-assessment. This will help
ensure that you have mastered this step of the process before you move on.

Assessment: https://quizlet.com/305748468/topic-12-self-assessment-flash-cards/
Module 2: Building Content Pages
If You Build it, They Will Come
Now that you have created your website and can create the pages you will need, it is time to begin
building those pages, incorporating text, pictures, videos, or other forms of multimedia to communicate
with your learners. As we go through this module, we will explore the various types of media that can be
added to a page, as well as teach you how to create navigation buttons on your pages so that each of your
learners can get the most out of your class website. After completing this module, you should have a basic
understanding of the elements that are used to build pages on Weebly.
Goals & Outcomes
After completing this module, students will be able to:

 Add and edit text elements on their Weebly pages

 Add various multimedia elements to their pages, including images, videos, embedded links, and
files
 Create navigation buttons for students to easily go from page to page on their Weebly site

Topic 2.1: Text Elements

Words, Words, Words
One of the primary methods of communication with your learners will be through text. Accordingly, it is
important to know how to make text that is visually appealing, promotes contrast with key elements, and
that is well formatted. We will start by talking about the types of text elements that can be added to your
website and will then discuss the options available to you for text editing.

Types of Text Elements

There are two main types of text elements that can be added to your Weebly site. Both are accessed from
the build tab at the top of the editing page.
1) Title: The title element on Weebly is formatted for larger, bolder text. An example of a title used on a
Weebly site is at the top of this page for the text "Topic 2.1: Text Elements". Like with all text elements,
you can change the style of your text (bold, italics, underline, etc.) and can also change the font size and
alignment to match your needs. For the above title, I have placed it over a color block, which is an
installed app. We will talk more about Weebly apps in Topic 3.3
2) Text Box: The text box element on Weebly is exactly like the name suggests. It is a box that you place
text in. As with all elements in a block builder platform like Weebly, you can place this text wherever you
want, whether that is above, below, or beside other elements. The text box offers the same options as the
Title element, but adds the ability to create bullet points and numbered lists.
Editing Your Text
Now that you can place your text on your page and begin typing what you want to communicate to your
learners, the next step of building your pages is to format your text. The formatting options available to
you are very similar to those in any word processing program (Microsoft Word, Google Docs, etc.).
Below, you will see an image with all of the text editing options available to you on Weebly. We will
discuss the function of each in order from left to right.

1. Bold: The Bold function is used to bold face your text, meaning that it is darkened to emphasize a word
or phrase within the text. This can also be used for creating subheadings, as was done with the lighter blue
text throughout this website. example
2. Italics: The Italics function is used to slant your text. This is required in some forms of citation and can
also draw attention from your readers. example
3. Underline: The Underline function is used to under line your text, creating a line underneath all text
within the element or under the text you select with your cursor. example
4. Increase / Decrease Font: The + and - signs are used to Increase your Font Size, making your text
bigger, or Decrease your Font Size, making it smaller. example(increase) example (decrease)
5. Font Color: The font color function is used to change what color your text appears. You are able to
select a color from the palette provided, adjust values for your own custom color, or enter the hex color
code for any HTML compliant color you would like to use.example
6. Link: This link button is used to provide a clickable link within your text. You simply highlight the text
you would like to become a clickable link and then select the link button. From there, you can select a
page within your website to link to or enter an external URL to navigate learners to a resource on the
internet. example
7. Alignment: The alignment options are used to adjust the location of your text. You and create text that
is aligned left, right, center, or full, with this option.
8. Bulleted List: This option is used to create a bulleted list within your text element. This option is only
available in a text box, not within title elements.
9. Numbered List: This option is used to create a numbered list within your text element. This option is
only available in a text box, not within title elements.
10. Remove Formatting: The Remove Formatting option will remove all formatting from your
highlighted text or all text within your text element.
11. Undo / Redo: The Undo and Redo arrows are used to undo the last change you made or to redo
something if you accidentally undo something that you did not want to undo. The undo and redo options
only function while you are within the text box. If you select another element and come back to your text
box, you will have to manually undo or redo.
Video: https://www.youtube.com/watch?v=e8FuEDT1jQ0
Before continuing on to Topic 2.2, make sure to complete the following self-assessment. This will help
ensure that you have mastered this step of the process before you move on.
Assessment: https://quizlet.com/305821065/topic-21-self-assessment-flash-cards/

Topic 2.2: Media Elements

Creating Media Rich Webpages
After you have edited the text on your website, it is time to add your media elements to enhance your
instruction. This will include adding images and adding videos. All of the options we will be discussing
are available under the build tab in the Weebly editor.

Adding & Editing Images

There are multiple ways to add images to your website. For adding single images, use the image element
from the build options. For adding multiple images, you can select the slideshow or gallery elements. This
course will focus primarily on the image element, but if you would like to learn more about the slideshow
and gallery elements, we encourage you to read more in this article from the Weebly Help Center.

As with all elements, start by selecting the image element on the left hand side of your screen and
dragging it into place on your webpage. After doing so, you will be provided with an image selector tool
(shown below) that lets you select which picture you would like to show with that element. You can add a
photo from your computer, search a library of photos, select a photo you have previously favorited, or
even provide the image URL to add a photo from the internet.

After adding your photo, you can also adjust the size of it. Simply mouse over the image and a small blue
box in the lower right corner will appear. If you mouse over this box, it will say resize im age. Click and
drag on this small box to resize your image. You can also click on the picture to open a host of options.
The menu provided when clicking on an image is shown below
Edit Image: This brings up a menu that allows you to crop an image, add filters, adjust the values
(brightness, saturation, contrast), add text to your image, or focus the image with a linear or radial blue
effect.
Replace Image: This allows you to select a different image using the selection options discussed
previously
Lightbox: Enabling the lightbox feature will display the full sized image in an overlay when someone
clicks the image on the page
Link: This option allows you to make the image a clickable link - we touch more on this in Topic 2.3
Align: This allows you to change the alignment of the image
Spacing: This allows you to adjust the amount of white space around the image
Caption: Click here to enter caption text that will display beneath the image
Advanced: This menu includes options to choose a border style and color and enter Alt Text for the image

Adding Videos
When adding videos to your webpage as a free user, there are two options that you can use: the Youtube
element and the Embed element. Regardless of which method you use, the video must be hosted on a third
party site, such as YouTube, Vimeo, or other providers. If you want to add videos that you have created,
you must first add them to one of these providers before continuing with this process.

YouTube Element
The YouTube element allows you to share videos directly from YouTube, as the name would suggest. This
element is found under the media section. To use this element, simply drag it onto your page and then
click on it. This will bring up the menu for this element, which is shown below. You will need to e nter the
direct link to the YouTube video into the YouTube Video URL. You can find this by selecting the Share
button below a YouTube Video and copying the link from there. After doing this you may edit the size of
the video player using the advanced option in the YouTube element's menu.
Embed Element
While the YouTube element is effective and easy to use, it can also be limiting. That is where the Embed
element comes into play. As with all elements, start by dragging the Embed Code element onto your si te.
From there, you must find the embed code for the video you want to include. This is typically found under
the share or embed buttons found on or near the video that you are trying to add to your website. Find that
code and then copy it to your clipboard. Once you have the code, return to your Embed Code element and
select Edit Custom HTML. Paste your embed code into this box and then click outside of the element.
After doing so, your video should show up in that box. This process is demonstrated in the video below.
Video: https://www.youtube.com/watch?v=8tl8dcyJf9c
Before continuing on to Topic 2.3, make sure to complete the following self-assessment. This will help
ensure that you have mastered this step of the process before you move on.
Assessment: https://quizlet.com/305825643/topic-22-self-assessment-flash-cards/

Topic 2.3: Course Navigation

Guiding the Way
Although our Weebly site will have course navigation options on either the side or top or our page
(depending on the theme you selected), it is always beneficial to provide course navigation buttons to
guide our learners through the course. As we do this, there are two main methods that you can employ.
The first is the use of the button element in Weebly and the second is the use of images in Weebly. We
will discuss both.

Using Buttons
The first method used to create course navigation is with the Button Element of Weebly. Start by dragging
the element to your site. From there, click on the button to open the editing menu. For your convenience,
this menu is shown below. The option that is most important to us in course navigation is the link option.
After selecting the link option (shown below, right), you will be able to select an external URL or, for our
purposes, a page within your website. By selecting the page that you want to navigate to, you are able to
create simple course navigation buttons. After selecting which page you would like to navigate to, you can
go back to the button options menu and change the button text to indicate the destination and can also
adjust the style, position, and spacing.
Using Images
The second method of course navigation is using the Image element. This process works very similarly to
the Button method, but provides more options for customization. Start by dragging the image element onto
your page where you want the course navigation option to be. After placing the element, select the image
that you would like to use for your navigation button with the same process detailed in Topic 2.2. After
selecting your image, click on the image and select your destination using the link option from the Image
element menu. After you have your image and it is working as a clickable navigation link, there are two
ways to add a label. The first way to add a label is by using the caption option from the Image menu.
Although this is perfectly functional, it offers no customization options. Due to this, we typically use a
text box placed underneath your image to create a label. This provides a similar view, but offers full
customization of the text used for labeling your navigation button.

Both methods of creating course navigation elements are detailed in the video belo w
Video: https://www.youtube.com/watch?v=qjbsMCxuy2s
Before continuing on to Module 3, make sure to complete the following self-assessment. This will help
ensure that you have mastered this step of the process before you move on.
Assessment: https://quizlet.com/305830706/topic-23-self-assessment-flash-cards/
Module 3: Polish & Publish
Finishing Touches
Now that your pages are full of wonderful text and media elements, it is time to put the finishing touches
on your designs. In Module 3, we will learn about some of the design theories that can guide your overall
alignment (or re-alignment) of your pages, as well as some of the optional apps available through Weebly
that can be used to give your website a professional appearance. After completi ng this module, you should
be ready to hit the publish button with confidence, knowing that your website will be both effective and
visually appealing.

Goals & Outcomes

After completing this module, students will be able to:

 Design pages in accordance to Principles of Web Design

 Design elements and pages in accordance with the C.R.A.P. principles
 Incorporate Weebly apps to provide further refinement to their Weebly sites

Topic 3.1: Principles of Web Design

Simple & Clean
As you are designing your website and putting the finishing touches on your pages, it is important that you
incorporate elements with a sense of purpose and order. We will discuss ten principles of effective web
design that will help you to create effective and visually appealing pages for your learners.

Purpose: Everything on your website should be placed intentionally. This includes the pages of your
website and the elements on each page. As students visit your website, it is for an instructional purpose.
Incorporate pages and elements with this in mind.

Communication: We live in a society of instant gratification. Users will want to access information
quickly, so it is important that your text and media elements communicate clearly and make the
information you are providing easy to digest. This can be as simple as using headings and bullet points to
make your text more succinct. The images below demonstrate the different between a well communicated
website and a poorly communicated website. Can you guess which is which?
Typeface: Some fonts (typefaces) are simply easier to read. Ideally, you should stick with Sans Serif fonts
like Arial or Verdana since Sans Serif fonts lack the decorative finishes of Serif fonts. You should also
limit the number of font sizes on your website to streamline your design.

Colors: A thoughtful color palette can really enhance your web design. They can add visual contrast and
tie together themes. White is an effective color in web design, and white space can create a modern,
uncluttered look on your pages.

Images: A (good) picture is worth a thousand words, so be sure to select images that enhance your
message. Avoid low quality images that are hard to see and make sure that the images used are relevant to
your other elements.

Navigation: Make it easy for people to move around your website. An effective rule within navigation is
the three click rule. Simply put, users should be able to get to any location on your website in three clicks
or less.

Grid Based Layouts: Be thoughtful of the location of your elements. Adding pieces to your page
haphazardly gives a messy, unprofessional appearance. Instead, implement a grid based layout that will
help sort your content into columns, rows, or other sections that feel balanced and are easy to follow. The
video below illustrates some examples of grid based layouts.
Video: https://www.youtube.com/watch?v=Bp-LptBDo5k
"F" Pattern Design: Typically, we like to read from left to right, top to bottom. Design your pages to
follow this pattern. When done correctly, this creates a pattern of eye tracking for your users that
resembles a capital letter "F".

Load Time: Nobody likes waiting forever for a page to load. To combat this, create pages that are
succinct and that are not overladen with high resolution images and multiple files that have to load. This
can be done by breaking your content into smaller chunks or being considerate of the elements you add to
your pages.

Mobile Friendly: We live in a world where much of our web access is done through mobile devices.
Make sure that you select platforms (like Weebly!) that are mobile friendly.
Before continuing on to Topic 3.2, make sure to complete the following self-assessment. This will help
ensure that you have mastered this step of the process before you move on.
Assessment: https://quizlet.com/305835530/topic-31-self-assessment-flash-cards/

Topic 3.2: C.R.A.P. Principles of Graphic Design

C.R.A.P. Principles
Originally proposed by Robin Williams, the C.R.A.P. principles of graphic design help to produce visually
appealing deliverable content. This content can take many forms, ranging from infographics to website s,
and helps govern the design process. These principles are as follows:

Contrast: Contrast focuses our attention to important elements within our design and helps highlight the
most relevant information to our audience. This can be done through the use o f colors, bold or underlined
fonts, or even enhanced size. All of these attributes can make a specific element contrast with the others,
drawing your readers' attention to that element. The image below shows varying level of contrast achieved
by changing the color of your background and typeface.
Repetition: Repetition ties objects or elements together and creates unifying themes. By using the same
fonts, styles, sizes, and coloring elements throughout your design you are able to create a more uniform
and professional website. This principle is highlighted in the video below.
Video: https://www.youtube.com/watch?v=hgO5QwmE0II
Alignment: Alignment is all about the organization and polish of your website. Text is easier to read when
it is aligned properly. This is very similar to the principles of grid based layouts and the "F" pattern design
discussed in Topic 3.1. Aligning your objects with one another and in patterns that mimic our natural eye
tracking makes your website easier to read and more visually appealing for your audience. The image
below provides a succinct example of alignment with your elements.

Proximity: Proximity helps to create visual relationships between the elements on your site. By placing
related objects in locations that are visually connected to one another, you help viewers easily identify
relationships between them. For example, if you were to label an image, you would want that label to be in
close proximity to the image it describes. If that label is placed farther down the page, it would be much
harder for readers to understand the connection.
Before continuing on to Topic 3.3, make sure to complete the following self-assessment. This will help
ensure that you have mastered this step of the process before you move on.
Assessment: https://quizlet.com/305852474/topic-32-self-assessment-flash-cards/

Topic 3.3: Weebly Apps

There's Always Room for Improvement
Although your website is likely ready for publication, it never hurts to continue improving your product.
One great way to do this is through the use of Weebly apps. These are additional elements that can be
added to your website, but which must be linked to your account from a portal outside of the Weebly
builder. You can access this portal by navigating to the URL weebly.com/app-center (1). From there, you
will be able to select one of four categories for Weebly apps: Made by Weebly, Spike Sales, Get Social,
and Boost Traffic (2). There is also a section of recommended apps (3) below the categories. Feel free to
explore these categories or recommendations to find apps that can enhance your website. We will discuss
a few apps that we find to be particularly useful.

Exemplary Weebly Apps

The following Weebly apps are some used by your instructors in the creation of this site and other sites.
We feel that these apps are all very easy to use and offer great benefit in building your own website.

Tabs: This app allows you to create tabs within a page to organize your content further. This c an create
great organization, but can be difficult to format without experience.

Color Block: This allows you to create contrast with elements on your page easily by adding a colored
block. By placing other elements, like a title, over the color block, you can draw attention to those
elements easily. An example of this is shown at the top of each page on this website.

Simple Table: Weebly has no native formatting options for tables. However, with the Simple Table app,
users can quickly and easily format tables for inclusion on their website. This app is demonstrated in the
video below.
Video: https://www.youtube.com/watch?v=yUjoXOp5L5Y
Before continuing to the Wrapping Up page, make sure you complete the self-assessment below. This will
be the final self-assessment for this course. If you have mastered this content,
then CONGRATULATIONS!!! Select the button below to continue on to the Wrapping Up page where
you will publish your final site and provide us with feedback on the course.
Assessment: https://quizlet.com/305854731/topic-33-self-assessment-flash-cards/
Wrapping Up
Congratulations Are In Order!
Congratulations, dear student! You have completed our course on building your own classroom website
with Weebly. We truly hope that you have grown throughout this process and that you are prepared to
build (or update!) your own classroom website as a result of your time in our course. You are now ready
to hit publish and present your finished product to the world. Before you go, we ask that you complete the
survey below to provide us with feedback on our course and your experience with it. We truly hope to
learn as much from you as you have learned from us, and your feedback helps us to continue improving
our course. We wish you all the best as you continue to improve your craft, and if you ever need any
assistance, please do not hesitate to contact any of us through the contact information provided on the
"About Your Instructors" page. Congratulations again!!!
Feedback Link: https://goo.gl/forms/JrWtMOv3kwlEE3Qr1