Professional Documents
Culture Documents
Project Part 2 Heltonw 1
Project Part 2 Heltonw 1
Project Part 2 Heltonw 1
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.
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.
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/
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/
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:
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/
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/
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.
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/
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/
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