Weebly Wobble

Career Prep Week of November 02-05, 2016
Let’s Weebly!

Click these links for “How-to Create” your Weebly.

1. https://www.youtube.com/watch?v=UJcncH4NQMA
2. https://www.youtube.com/watch?list=PLjd07nSrXHJmXNVJiORKNK8jpDkoElrrs&v

=ONaFTJlZcU4

Objective: COS 13 Utilize an online learning-management system to engage in collaborative learning

projects, discussions, assessments beyond the traditional beyond the traditional classroom that are goal-
oriented, focused, project-based, and inquiry-oriented.

Welcome to Web Design Lessons

You will be making your own website in Weebly for this assignment. You will begin by making a plan for your
website.
In this learning module you will be creating a webpage with 4 different pages. The creation of these pages will
be broken down individually.
Before you begin to build a webpage it is a good idea to have goals and an idea of what you want the page to
look like and how you want it to function.

Keith High students:
Sign up using your
Google Account.
Sign up using the
correct school system
username and
password. See page 2.

------------------------------------------------------------------------

1

Building A Site Has Never Been Easier

“Building a website on Weebly is unlike anything you’ve ever experienced. Our drag & drop website builder
makes it dead simple to create a powerful, professional website without any technical skills required.”
https://www.weebly.com/

Weebly Content elements (like text, photos, maps, and videos) are added to your website by simply dragging &
dropping them into place. Text is edited just like in a word processor. Building your website is done in real time,
right from within your web browser. There's absolutely nothing to install and no upgrades to worry about.

When signing up for Weebly: DO NOT USE YOUR FULL
NAME!

Only First name and Initial
For example Jayne D

When signing up for Weebly

Use your school’s system name and password.
Username: For example, smithjkhs
Password: For example, 12345khs
------------------------------------------------------------------------

CHECKPOINT: Verify your Login. Do Now: Log in and log out of your Weebly. See image on next
page/below.
After you have signed-up for Weebly, click on the link: weebly.com. Once at the site, click the Login button and
type in your login information to make sure you have registered correctly. If you are able to log in successfully,
move on. If you were not successful, try logging in again. If you are unsuccessful, complete the registration
process again. Be sure to make note of your password.
Once you've verified your site, you can click the back arrow to the left of the address bar to bring you back to
the correct page, if necessary.

2

To logout of your Weebly, click the three lines shown on
the top right corner of your Weebly. Next, click “MySites.”
Finally, look for and click “logout.”
NOTE: The T.V. and Cellular icon on the Weebly page will
show you what your Weebly look like on those devices.

------------------------------------------------------------------------

3

Note:
When you logout of your Weebly and log back you’re your
Weebly, you will see this screen. Click Edit.

Whenever you are asked to “Categorize your Website,”
choose Education and School. Next click submit.

4

------------------------------------------------------------------------

5

Now, complete the registration using your school Gmail
and information shown in this document and/or by using a
YouTube video.

Click this link for “How-to Create” your Weebly.
https://www.youtube.com/watch?list=PLjd07nSrXHJmXNVJiORKNK8jpDkoElrrs&v=ONaFTJlZcU4

6

Choose a Theme. Scroll down the Weebly page and look at
the selection of themes. Then, choose a theme.

Here are a few examples.

7

Once you choose a Theme, a box of colors MAY appear at
the bottom of the Theme.

Look at the Theme, Site Title, and “Welcome to Our Site” in the upper left
corner above.

8

Now look at the same Theme below, See the box of colors

A view of Your Website Domain
Domain name means a person or an organization's unique name on the Internet.

Your Domain Name Should Be Your Website Name
Naming a site after its domain name is important, for the simple reason that when people think of your
website, they'll think of it by name.
“On the following page it is getting interesting. Because here you choose what kind of domain you are going to
use. The first option is to register a Weebly subdomain.” It will be something like “smithjkhs.weebly.com.”
“If you want to get rid of the Weebly branding in your domain name you can purchase a professional domain
directly from Weebly. It will be myname.com or myname.net for example. It goes without saying that the
domain name still has to be available. Registering a domain through Weebly will cost you around $30.”

Hold it BIG SPENDERS: You are to CREATE a FREE Domain Name.

9

Choose Your Website Domain name goes.
Now, Choose Your Website Domain – the free Domain
name. See the Green box below.
Be Careful here. Your Domain name must be appropriate and NOT
your full name. Use your school system information. For
example, smithjkhs

Notice, the default, last part of your Domain name will always be
weebly.com.
You do not need to type weebly.com. It is already a part of your Domain

name. See the green box below.

10

Use your Keith High school computer login information

smithjkhs

11

Next choose:
Choose Build my site.
The First Page/Home Page

NOTE: As you are learning about Weebly websites, you will
see the words, “Landing Page.”
The first page/home page of your Weebly is often
referred to as your “Landing Page.”
------------------------------------------------------------------------
To edit text, click Design
To edit Font, click Change Font.

12

Click through each tab on the font page to see what will
happen.
If you change your mind, simply click “Reset font.”

13

To Edit Font continues…

------------------------------------------------------------------------
Here is an example of Weebly’s “Drag and Drop.” Just drag
an item from the left side of the screen/window to the
Theme on the right side of the screen/window.
------------------------------------------------------------------------

14

ADDING IMAGES/PICTURES as you “Build” your website:
Students: Here is a quick/shortcut to find any word on a
document, or Internet page, you can click “CTRL F” unless
you are using an iMac.
If using an iMac, click the “Apple key and F.”
------------------------------------------------------------------------
As teachers, our main concerns are:
1. That you DO NOT PUBLISH YOUR WEEBLY until we tell
you to do so.
2. Your possible illegal use of copyrighted pictures.
A Weebly is shown and accessed by students and others
on the Internet. People, organizations, their lawyers, etc.
are constantly searching for illegal use of their copyrighted
pictures.
------------------------------------------------------------------------

STOP THIEF!!!

DO NOT UPLOAD ILLEGAL IMAGES/PICTURES. Just
because the pictures are “ON GOOGLE,” does not mean
you have the right to use them.
Again, DO NOT STEAL PICTURES.
Instead, use these sites/links:

1.GOOGLE ADVANCED IMAGE SEARCH OR
2.“Royalty Free” images such as
3.CREATIVE COMMONS FREE IMAGES
4.USE FLICKR IMAGES…that allow use.

15

Choose Build my site, continues

16

If you don’t like the design you chose, click the word
Design at the top of the Weebly page.

There are lots of ways to make changes on your Weebly
Theme page. Practice by clicking the different Change
Arrows. For example, Click Change Theme. See the
example below. If you want to, you can choose another Theme. If

you need to, just click the word BUILD to return to your Theme.

17

To change the words on your Weebly page, just click them
and start typing your words. Students, if you see a text box
on the page, click it.
To change the size of the words you type, highlight the
words, and then press the –minus sign on the text box
shown on the page.
If you want to change the image/Theme on your Weebly
page by using your own image, click the Edit image tab.

. You can upload your APPROPRIATE image.

18

In this Weebly tutorial, the page has been changed from
Sneakers to this example. Notice the Save box. Choose a
Save function. You can change the Save to function
whenever you like.

To add pages to your Weebly site click the Pages tab. Give
your page(s) a page. Name your page.

19

Notice everything on the picture below for example,
Add; Page name; free plan; page layout; Landing page is
highlighted in blue; hide page in navigation – see back
pages for more on navigation.
You can change the Page Layout if you want to. Just
click the layout tab. Practice.

20

To add a video to your Weebly
https://www.youtube.com/watch?v=tnU0x8sLyUs

Click Save and Edit after naming your page.

21

-----------------------------------------------------------------------------------------------------------------------------

Hide Pages from the Navigation Menu: See back pages
of this document for an explanation.

-----------------------------------------------------------------------------------------------------------------------------

To add a YouTube video:
1. Simply copy and paste the URL into your text box on
your Weebly page.
2. Just drag the ‘T” text box icon over and type in the
URL or Click the chain Link and add the URL to your
page.

22

3. Next, drag and drop the YouTube icon onto your
Weebly page. Click the YouTube picture that shows
up on the page.

4. Now you will see a place to add the URL you typed
or copied and pasted into the text box. See the
picture below.

5. After placing the URL into the YouTube box, the
correct YouTube video will now show on your
Weebly.

6. Here is a video link showing how to add a YouTube
to your Weebly. Watch the video.

https://www.youtube.com/watch?v=tnU0x8sLyUs

23

The Button Element
Notice the Edit Image words and wheel/gear on the
picture below. To see those words and the wheel, just
move your mouse any place into your Theme/picture.

The Button Text

If you see The Button Text Element on your Theme page: The button element enables you to create call-to-
action buttons that link to other pages on your own site, pages on other sites, or files like PDFs and
documents. This button is also known as a “Call to Action” Button.
See last pages for Button information. We will not work on the BUTTON TEXT element right now.
----------
The button element enables you to create call-to-action buttons that link to other pages on your own site, pages
on other sites, or files like PDFs and documents.

24

As with any other element, you can add a button to your site by dragging it to a page.

The button is essentially nothing more than a link that stands out because of its size and how it looks. You can
edit the text of a button so that it says whatever you like. Though buttons ideally should contain no more than
five or six words.

25

You can link the button to a page, another website, a file or an email address vie the rather appropriately named
Link option. This will open up a dialog box that function in exactly the same way as a standard text or image
link.

The style of the button can be altered via four preset options. Each button has two colors and two sizes
specifically designed for the specific theme you're using.

When should you use a button instead of a regular link? When a very strong call to action is needed (like leading

visitors to a page where they can purchase a product) and you want to make the link stand out more than usual.
------------------------------------------------------------------------------------------------------------------------------

Hide Pages from the Navigation Menu

26

Sometimes you may not want pages to appear in your navigation menu at all.
To a hide a page from the navigation menu, go to the Pages tab, select the page and check the Hide page in
navigation menu option shown there.

Taking this action with a page means it won't show up in the navigation menu. As seen in this example, the
hidden page named "Thank You" is nowhere to be seen.

How would a visitor find a page if you hide it from the navigation? Our system allows you to create links to pages
using text, images and buttons within the content area of your site. So you can create a link to a hidden page
from elsewhere on the site instead of from than the navigation menu.
But why hide a page at all? If you have dozens and dozens of pages, showing all those pages in the navigation

27

could be overwhelming for your visitors. Hiding some of the less important pages and linking to them from the
content area of your site is a way to keep the navigation area clean and easy to, well, navigate.

28