12

11
12 SENIOR HIGH SCHOOL

Empowerment Technologies
Quarter 3
– Module :8
BASIC WEB PAGE CREATION

Il

NegOr_Q3_ETECH11_Module
8_V2
Media and Information Literacy – Senior High School
Alternative Delivery Mode
Quarter 3 – Module 8: Basic Web Page Creation
Second Edition, 2021

Republic Act 8293, section 176 states that: No copyright shall subsist in any work
of the Government of the Philippines. However, prior approval of the government
agency or office wherein the work is created shall be necessary for exploitation of
such work for profit. Such agency or office may, among other things, impose as a
condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names,
trademarks, etc.) included in this module are owned by their respective copyright
holders. Every effort has been exerted to locate and seek permission to use these
materials from their respective copyright owners. The publisher and authors do not
represent nor claim ownership over them.

Published by the Department of Education

Secretary: Leonor Magtolis Briones
Undersecretary: Diosdado M. San Antonio

Development Team of the Module

Writer: Romie G. Benolaria

Editor: Reynald M. Manzano
Reviewers: Louelyn M. Lajot, Ruth Marie B. Eltanal,
Typesetter:
Layout Artist:
Management Team: Senen Priscillo P. Paulin, CESO V Rosela R. Abiera
Marcelo K. Palispis, EdD Maricel S. Rasid
Joelyza M. Arcilla, EdD Elmar L. Cabrera
Nilita L. Ragay, EdD

Printed in the Philippines by ________________________

Department of Education –Region VII Schools Division of Negros Oriental

Office Address: Kagawasan, Ave., Daro, Dumaguete City, Negros Oriental

Tele #: (035) 225 2376 / 541 1117
E-mail Address: [email protected]

Introductory Message

Il
This Self-Learning Module (SLM) is prepared so that you, our dear
learners, can continue your studies and learn while at home.
Activities, questions, directions, exercises, and discussions are
carefully stated for you to understand each lesson.
Each SLM is composed of different parts. Each part shall guide
you step-by-step as you discover and understand the lesson
prepared for you.
Pre-tests are provided to measure your prior knowledge on
lessons in each SLM. This will tell you if you need to proceed on
completing this module or if you need to ask your facilitator or
your teacher’s assistance for better understanding of the lesson.
At the end of each module, you need to answer the post-test to
self-check your learning. Answer keys are provided for each
activity and test. We trust that you will be honest in using these.
In addition to the material in the main text, Notes to the Teacher
are also provided to our facilitators and parents for strategies and
reminders on how they can best help you on your home-based
learning.
Please use this module with care. Do not put unnecessary marks
on any part of this SLM. Use a separate sheet of paper in
answering the exercises and tests. And read the instructions
carefully before performing each task.
If you have any questions in using this SLM or any difficulty in
answering the tasks in this module, do not hesitate to consult
your teacher or facilitator.
Thank you

Il
 What I Need to Know

This module was designed and written with you in mind. It is here to help you
master the context of Empowerment Technologies. It contains varied activities
that can help you as a Senior High School student to succeed in environments
that require the use of computer and the Internet.
The module contains lesson in Basic Web Page Creation
Happy learning!

Content Standard:

 The learners demonstrate an understanding of: apply the principles and

techniques of design using online creation tools, platforms, and
applications to develop ICT content for specific professional tracks.

Performance Standard:

 The learners shall be able to: independently apply the principles and
techniques of design using online creation tools, platforms, and
applications to create original or derivative ICT content for use in specific
professional tracks.

MOST ESSENTIAL LEARNING COMPETENCIES (MELC):

 Apply web design principles and elements using online creation tools,
platforms, and applications to communicate a message for specific
purpose in specific professional tracks. CS_ICT11/12-ICTPT-lg-h-10

After going through this module, you are expected to:

1. Create a web page using Microsoft Word

2. Create your own website using a free host; and
3. Design, edit, and insert elements for their website.

NegOr_Q3_ETECH11_Module8_V2
 What I Know

A. True or False: Write T if the statement is correct otherwise, write F on your

notebook or worksheet.

1. The home page is the first page of your website.

2. You can insert YouTube videos in your weebly website.
3. WYSIWYG stands for What You Sense Is What You Get.
4. Aside from Microsoft Word, you can use Microsoft Excel to produce
webpage.
5. Weebly is the bst builder for small business sites and portfolios.
6. Weebly has a free plan which you can stay on for as you like.
7. If you want to delete a larger section such as a background, simply click on
the area you want to remove.
8. Weebly has a single choice of mobile responsive themes, for industry.
9. Using weebly, you can customize you them even more by changing the
background.
10. Adding elements in weebly is the same process for each page.

B. Matching Type: Match Column A with Column B.

Column A Column B
1. Weebly A. stands for Hypertext Markup Language
2. HTML B. an editor that allows you to create and design web
pages without any coding knowledge.
3. WISIWYG C. a free website provider with a WYSIWYG editor.
4. CSS D. the top most label of a website
5. Heading E. stands for Cascading Style Sheets
6. Photo Gallery F. a feature that maximizes the search engine optimization
feature so visitors can easily locate your website.
7. Template G. A page that contains photos
8. Search Engine H. A ready-made design for a website
Optimization (SEO)
9. Adding Element I. The main page of a website
10. Home page J. This is where you add the fun stuff, like text, videos,
content buttons, and more anywhere you like.

III. Rearrange the following steps in chronological order by numbering them from
1 to the last number of the steps. Write X if the step does not belong.

How to Make a Weebly Website

____ a. Add apps to boost your website
____ b. Choose your domain name
____ c. Sign up and start building for free
____ d. Select a theme to suit your needs
____ e. Improve and grow your site
____ f. Publish
____ g. Build your Weebly website using the Elements Bar
2 NegOr_Q3_ETECH11_Module8_V2
 ____ h. Choose a price plan
____ i. Create a Site Map
____ j. Add an online store

Basic Web Page

ICT Creation

What’s In

Planning is important in building a webpage or a website. There are seven (7)

steps in the website development: (1) Identify a Web Project; (2) Developing site
contents; (3) Determining your audience; (4) Designing the site and navigation;
(5) Developing Web-media elements; (6) Constructing a website and webpages;
(7) Deploying a website on the World Wide Web (publishing).

After identifying a web project, you need to create a Site Map of your
website, it will be a great help for both the designer and the audience in many
ways.

What’s New

Activity 1: Navigation. Complete the following Site Map of a Personal Website.

3 NegOr_Q3_ETECH11_Module8_V2
 What is It

BASIC WEB PAGE CREATION

How basic is basic? Imagine of our ancestors do fishing. They used fishing rod or
spear to catch fish. Today, huge companies rule the fishing in the stray with their
huge fishing vessels with huge nets to catch by the truckload. Unfortunately,
those fishing vessels are not affordable so we will still be using our fishing rod or
spear. However, that is not the case in web page creation. First of all, the
Internet is free. Secondly, it is of free courtesy of many website providers that
provide basic functionalities for our website to function. Back in the day, you
actually have to learn HTML (Hypertext Markup Language) and CSS (Cascading
Style Sheets) to be able to create a decent website. Today, we use WYSIWYG
editor.

WYSIWYG
WYSIWYG is the acronym for What We See Is What You Get. This means that
whatever you type, insert, draw, place, rearrange, and everything you do on a
page is what the audience were see. Like using the Microsoft Word, WYSIWYG
shows and prints whatever you type on the screen.

Other Ways to Create a Website

As mentioned earlier, people used HTML codes to create pages and CSS codes
to design them. If you have taken up these coding skills before, it will help you in
creating pages using WYSIWYG. If you have not, WYSIWYG is design for anyone
who has not or does not have prior coding skills.

Creating a Website using Microsoft Word

1. Open Microsoft Word

2. Type anything on the page like “Welcome to my Website”
3. Click on File >Save As >Browse

4 NegOr_Q3_ETECH11_Module8_V2
4. On the Save As dialog box, locate your activities folder and create a new
folder named “Sample Web page”.
5. Specify the file name “Sample Web page”.
6. On the Save As type, select “Web Page (*.htm; *.html)”.

7. Click the Change Title button.

8. Input the title as seen below, then click OK then Save.

9. Check the files on your Sample Web page folder. You will see a new folder
generated including your .htm or .html file.

5 NegOr_Q3_ETECH11_Module8_V2
 10.Open the Sample Web page.htm file and you will see that you just created
a web page using MS Word.

Tip: Any file inside the Sample Web page files folder is generated by MS Word.
These are the files that make HTML files display visual elements correctly.

You have just created a Web page using Microsoft Word – a technique you can
also use using Microsoft Excel. These office applications can be use as WYSIWYG
platform. The next step is uploading these files to a web server. However, we will
skip that step because we are going to use a match easier approach in creating
websites. We are going to use an online application that is actually design to
create websites.

Creating Your Own Website using Weebly

Weebly is the best builder for small business sites and portfolios. It’s easy to use
and comes packed with apps and features to help grow your site, from SEO to
ecommerce. You can build a simple, stylish site with Weebly’s drag-and-drop
editor, and it’s a great choice for portfolios, blogs, online stores, and business
sites.

Weebly powers over 50 million websites worldwide, but what makes it so

popular? Well, it’s an easy to use website builder that’s perfect for small business
and portfolio websites. It’s one of the best website builders of the world.

Who Is Weebly Best For?

Weebly is best for small businesses, because it equips you with all the tools
you need to get a business website off the ground. Its straightforward editor cuts
out the hassle of building your site – meaning you can get online sooner – and its
huge app store means you can customize your site with all the tools you need.
It’s also a good choice for personal portfolios, because of its simple, stylish
themes. If you want a portfolio that looks good without you having to worry over
the design too much, Weebly is perfect.
6 NegOr_Q3_ETECH11_Module8_V2
 We don’t recommend Weebly if you want a lot of customization control over
your website. Wix provides tons more creative freedom, and Squarespace has
much more professional designs than Weebly – chances are you’ll find Weebly
limiting if you’re after anything too advanced.

Is Weebly Easy to Use?

Yes, Weebly is easy to use! It’s a drag-and-drop website builder where you
build your site exactly as you’d see it on-screen – instead of dealing with
abstract lines of code, you drag actual images, text boxes, buttons, and more
around your page until you’re happy.

Weebly scored 3.5 stars out of 5 for ease of use in our testing. It’s not
quite as easy to use as Weebly’s top competitor Wix, due to user frustrations
over limited customization. But for beginners looking for an easy start, Weebly is
a solid choice.

What Kind of Website Can You Make With Weebly?

Weebly has such a wide range of tools that it can be used by bloggers,
businesses, online sellers, and artists. However, it’s best for small business
websites – its scalable tools, SEO support, and simple designs combine to make
it a winner for entrepreneurs, freelancers, and other types of small business
websites looking for online growth.

How Good Are Weebly’s Themes?

Weebly’s themes are pretty good. They’re not the most stunning designs on the
block, but they’re clean and simple, and you can switch themes any time you
like. You won’t get total creative freedom, so if you’re looking for something with
a bit of structure to guide your website design, Weebly is a great choice.

Weebly wowed us with its super scalable features. It has a huge app center,
helpful SEO guides, strong blogging tools, and a solid suite of ecommerce
features. On top of that, you’ve got 24/7 support, marketing and analytics tools,
and built-in site security.

Steps on How to Make a Weebly Website

7 NegOr_Q3_ETECH11_Module8_V2
 Step 1: Sign Up
Firstly, head over to Weebly.com. You can build and publish your site
totally free, so there’s plenty of time to see if you enjoy using it.
To kick things off, click ‘Get Started’ – either in the top right or bottom left
corner. Now type in your name, email, and new password. The Weebly ball is
rolling.

Getting started with Weebly is easy, with two clear action buttons in sight. After
clicking ‘Sign Up’, you’re taken to a page with one question and two options:
‘What kind of website would you like to create?’ Choose from ‘I just need a
website’ or ‘I need a website with an online store,’ depending on your
ecommerce ambitions. Don’t worry – this decision isn’t final, as you can add a
store to your Weebly site any time you like.
.

You can set up an online store anytime with Weebly, showing its flexibility
Weebly has a free plan which you can stay on for as long as you like. This is why
you can create, publish, and edit your site without paying a single cent.
You can upgrade to a paid plan any time, but we’ll help you with that later
– for now, just enjoy building your website!

Before moving on, make sure you have:

• Created a free Weebly account
• Chosen the type of website you want to create for now

Step 2: Select a Theme

Weebly has around 50 themes, all of which are totally free! There are plenty of
categories to choose from: ‘Business,’ ‘Portfolio’, ‘Personal’, ‘Blog’, and more.
From your choice, Weebly then suggests some more specific themes.
8 NegOr_Q3_ETECH11_Module8_V2
 Weebly has a wide choice
of mobile responsive
themes, for almost any
industry
Weebly themes are
modern, sleek, and all
mobile responsive. This
means they look awesome
on any screen. And, unlike
Wix, you can change
templates at any time, so
you’re not restricted by your
choice.
Can’t decide? You can
preview each one by
clicking the thumbnail to
see how it looks on a full
screen. Then, if you like it, hit ‘Start Editing’ in the top right. Make sure you
click around for your favorite theme.

Weebly also offers industry-specific options. It has delicious restaurant

templates, fresh cleaning service designs, strong-looking personal training
themes – you get the idea. These options save you even more design time – you
just need to edit the text boxes and images and you’re good to go.
The template is what your visitors see first, so make sure it says what you want
it to. Do you want a clear CTA (Call To Action) button, like ‘Book Now’? Or would
a series of images work better? Whichever you choose, there’s a Weebly theme
to suit.

Weebly’s
travel industryspecific
templates come
with well-placed
action buttons

Before you move on, make sure you have:

• Browsed Weebly’s themes
9 NegOr_Q3_ETECH11_Module8_V2
 • Previewed your favorite designs
• Picked your perfect theme

Step 3: Choose Your Domain

Before you start editing, you’ll need to name your website. The name of
your website appears in your website address and is called a domain name. For
example, ours is websitebuilderexpert.com! So, how do you go about getting a
domain for your Weebly website?
It’s easy – Weebly will automatically prompt you to type in a domain name!
You can get a free domain by choosing the Weebly subdomain. This means your
website address will contain ‘.weebly.com’ – it’s not very attractive or
professional, but it means you don’t have to pay a cent for your domain.
See the image below for an example of a Weebly subdomain as well as
professional, or custom, domains.
Weebly offers a free subdomain
name, ideal for cost-conscious users.
If you want a custom domain (like
ours), you can simply register one
through Weebly. Just click ‘Choose’
to register your favorite domain. You
will have to pay for this, however,
and upgrade to a paid plan to
actually use your domain.
The upside of using a custom
domain is that it’s more professional,
memorable, and attractive. Your
domain is unique – think of it like
your site’s fingerprint – so it’s worth finding
the perfect one.Just how much is a custom domain, though? Is it worth it?

Domains vary in price, but usually fall between $14 and $20 per year.
Weebly’s domain prices fall into three options:
• 1 Year ($19.95)
• 2 Years ($16.95/yr)
• 5 Years ($14.96/yr)

Weebly offers discounted domain names, saving you dollars down the line.
There are cheaper prices elsewhere (check out Domain.com for great deals – you
can get 25% off using the code WBE25), but registering your domain through
Weebly is the easiest
and quickest option.
Already have a domain? You can easily connect it by clicking ‘connect or
transfer now’ at the bottom of the popup – then just type in your URL and press
‘Search’. No guide on building a website would be complete without some tips on
how to create the best domain! So, here are our top tips – for a great domain, we

10 NegOr_Q3_ETECH11_Module8_V2
recommend that you: 1. Keep the name short, 2. Include popular keywords, 3.
Target your area, 4. Make it memorable

Before you move on, make sure you have:

• Decided if you want a free or custom domain
• Created your ideal domain name
• Registered your domain, either by paying or simply clicking ‘Done’
Step 4: Design Your Weebly Website

After choosing your domain name, you’re taken to the Weebly website builder
screen. This is where you’ll let your creative juices flow. We’ll go through the
menus and features one by one, but here’s what it looks like at first glance:

The Weebly editing homepage is easy to navigate and use

Editing Text Boxes

Weebly is a ‘What You See Is What You Get’ (WYSIWYG) website builder.
This means you can click and edit, as well as drag and drop media, without
needing to know any code. So to update the text, simply click the box and type.

Editing text boxes takes just a couple of clicks with Weebly

Editing the Background

11 NegOr_Q3_ETECH11_Module8_V2
 You can customize your theme even more by changing the background. Simply
click the background image and select ‘Edit Background’. From there you can
change the image, scrolling effect, and page alignments.
Adding Elements
This is where you add the fun stuff. Using the ‘Element
Menu’, on the left hand side, simply drag and drop your chosen
media icon anywhere on the page. You can throw text, videos,
buttons, and more
anywhere you like. Take a look at the Element
Bar below for just some of the elements you can choose from:
The Weebly Elements Bar clearly shows what you can
drag and drop onto your. site

Let’s say you want to add an image. Drag the icon where
you want, then click ‘Upload Image’. A popup will then give you
some ptions:
o you can upload from your computer, or press
‘Search’ and find a free Weebly
image.

Any element with the lightning bolt symbol next to it

can’t be used on the free plan – you’ll need to upgrade to use
these features. However, everything else is free for you to
play with!

12 NegOr_Q3_ETECH11_Module8_V2
 Weebly provides a
wide choice of free images
to keep
your design costs down

To edit other pages on your Weebly website, simply click ‘Pages’ on the top

Navigation Menu and

choose a different
page.

Adding elements is the same process for each page – just drag, drop, and click
your way to a beautiful website.
Switching pages is a breeze with the Weebly navigation menu. From the
Navigation Menu, you can make the most of Weebly’s flexibility. Change your
theme, edit your site settings, move to a different page – it’s all there.

Check out the video link below on how to use Weebly’s basic elements.
https://youtu.be/XdTe6NCVXqw
Adding New Pages
It’s easy to add new pages to your website. Simply
go to the Pages tab in your menu and click the plus
icon in the left-hand sidebar. A drop-down menu will
appear with different types of pages.

13 NegOr_Q3_ETECH11_Module8_V2
 Weebly provides different types of pages you can create. Select the type of
page you want to create – a blog page, for example – and give it a name. As you
do this, Weebly automatically loads the page for you, with prefilled images and
content for you to make your own.

Remember to click ‘Done’ to save your new page’s settings. Once you’ve done
this, return to the ‘Build’ menu tab to edit the page just like you would normally!

Changing the Color Scheme

You can change the color theme of your page
by heading to the Theme section of your dashboard. For some themes you
simply have the options of light or dark, while others give you actual colors to
switch between.

This is fairly basic and you won’t see massive changes to your theme,
but you can add a custom color to the range of choices if you want to.

It's super easy to change your color scheme, although it's not a very
advanced feature Adding New Layouts
To really personalize your website, you’ll want to add new sections to the pages
you’re editing. Apart from adding new elements, there’s also the option to add
new sections.
This element sits at the top of the left-hand sidebar above all the other elements
– simply drag it to where you want it on the page and let go.

The Sections element sits above all the others in the left-hand sidebar

It’ll give you a list of options: Gallery, Contact, Menu, Featured, and Team. Select
the one you want to add.

You can choose the type of section you want to add to your page

14 NegOr_Q3_ETECH11_Module8_V2
 Weebly then gives you a list of different layouts to choose from, so you can pick
the one you like the best. Click on the layout you want, and it’ll appear on your
page. Click save in the popup box, and get editing!

You
can choose the layout of the section you want to add

Deleting Sections
We all make mistakes, we all change our minds, and we all learn
differently – we’re only human after all! That’s why it’s important to know how to
delete elements on your site, as well as adding them.
You might want to try out a gallery on your
homepage, but then decide it doesn’t work.
You’re not stuck with it forever – simply click
on the element, and look for the small blue
cross that appears in the top right corner of
the editing box.

Click on that cross, the box will turn red, and you’ll have the option to delete
that element.

Deleting elements is easy - simply click the cross!

This is how to delete small elements such as galleries, text boxes, images,
buttons, and more.

If you want to delete a larger section such as a background, simply click on the
area you want to remove. You’ll see a few options appear: Edit, Move, and
Delete.
Click the Delete button and you’ll see a popup asking you if you’re sure you want
to delete. At this point you can either cancel or confirm – if you click ‘Delete’
then that section and everything inside it will be deleted.

15 NegOr_Q3_ETECH11_Module8_V2
 You can delete whole sections of your page if you want to - just click Delete and then confirm your
decision!

This ‘are you sure?’ method means you won’t scrap any bits of your
website by accident, which is a relief!

Before you move on, make sure you have:

• Edited text boxes
• Edited the background
• Added new elements
• Added new pages
• Experimented with your color scheme
• Added new layouts
• Checked you can delete unwanted elements  Customized your
Weebly site!

Step 5: Add Apps

Also in the Navigation Bar is ‘Apps’. You guessed it – this takes you to the
Weebly App Center. Whatever your website, Weebly has an application to help

boost your performance. We recommend

adding some popular apps like ‘Site
Booster’, and ‘Content Color Box’.

Not only does it categorize apps for sales, traffic, social and Weebly-
specific, but it even recommends apps just for your website. It’s like having your
own personal shopper – the American Dream, right?

Weebly has over 300 apps to boost your website’s performance and appearance

Weebly has an impressive amount of apps – over 300 apps, to be (sort of)
precise. More than 50 are free, and there are always new apps being added, so
you won’t struggle for choice.

16 NegOr_Q3_ETECH11_Module8_V2
 Don’t feel overwhelmed – you
can sort by ‘Popular’, ‘Highest
Rated’, ‘New’, and ‘Free’. Or just
search for whichever type you
want, whether it’s an FAQ section,
countdown timer, or social feed.

You can even categorize them on the left hand side.

You can search for specific apps to make things even easier. Also, before
making any purchases, you can check the user ratings on each thumbnail. Can’t
find one you like? Scroll to the very bottom and you can submit a new app idea,
or even develop your own (if you can code).
To install apps, click on the one
you want and then find the ‘Add’
button. A popup box will appear –
you need to click ‘Connect’ to
install the app and agree to any
terms.

Anyone can install apps on Weebly - simply click Connect and Weebly does
the rest!

Once the app has installed, you’ll be taken back to your website. The app will
automatically appear at the bottom of the left-hand sidebar, under the ‘Installed
Apps’ section.

17 NegOr_Q3_ETECH11_Module8_V2
 This is where your apps will appear once you've
installed them

Once your app is installed, drag it onto your page as you would any other
element.

Before you move on, make sure you have:

• Explored the app center
• Installed some apps
• Added apps to your website

Want to Explore Weebly's App Center?

You’ll find plenty of extra functionalities that you can use to spice up your
website.

Step 6: Add a Store

Back at Step 1, you had the choice of setting up an online store. If you chose not
to and changed your mind, no worries – you can easily set one up. Close your
editor for now and go to your account dashboard. Open up the menu in the top
left corner, and click ‘Store.’
This takes you to the clear
and simple setup page.

This is your dashboard, and the page where you can start adding a store to your
site.

18 NegOr_Q3_ETECH11_Module8_V2
 Another way of adding a store is by staying in the editor and selecting the
‘Products’ element. If you don’t have a store already, then Weebly will direct you
to the store setup page. Don’t want a store? You can skip this step!

Setting up an online store is explained clearly, with simple action buttons

From here, you can see all the steps you need to create an online store, including
everything from adding products to setting up taxes.

You can then integrate each feature with just a few clicks. Just use the
action buttons on the right hand side.
The options follow a natural order for setting up an online store. So,
starting from the top, setting up a Weebly online store looks like this:
1. Add Store Information
2. Add a Product
3. Start Accepting Payments
4. Set up Shipping
5. Set up Taxes
6. Publish and Start Accepting Orders

However, you’ll need to upgrade to the Professional plan to access

premium tools like a shipping calculator, or the Performance plan to send
abandoned cart emails and access advanced analytics. Check out the table
below to see what sales features you get with each Weebly plan.

Free plan Personal plan Professional plan Performance plan

Shopping Cart ✔️ ✔️ ✔️ ✔️
Items ✔️ ✔️ ✔️ ✔️
Item badges ✔️ ✔️ ✔️ ✔️
Item options ✔️ ✔️ ✔️ ✔️
Quick shop ✔️ ✔️ ✔️ ✔️
Inventory management ✔️ ✔️ ✔️ ✔️
Free plan Personal plan Professional plan Performance plan
In-store pickup ✔️ ✔️ ✔️ ✔️
Automatic tax calculator ✔️ ✔️ ✔️ ✔️
Coupons ✔️ ✔️ ✔️ ✔️
Square gift cards ✔️ ✔️ ✔️ ✔️
Shipping Calculator ❌ ❌ ✔️ ✔️
Shipping labels ❌ ❌ ❌ ✔️
Shipping discount ❌ ❌ ❌ ✔️
Abandoned cart emails ❌ ❌ ❌ ✔️

19 NegOr_Q3_ETECH11_Module8_V2
 Item reviews ❌ ❌ ❌ ✔️
Accept payments through PayPal ❌ ❌ ❌ ✔️
Advanced ecommerce insights ❌ ❌ ❌ ✔️

Remember that the Professional plan also

removes adverts, and unlocks a free
domain, unlimited storage, and password
protected pages. As you can see, the
Performance plan is the most robust plan
for selling online.

Changing your Weebly price plan is easy with the ‘Upgrade’ prompts

Before you move on, make sure you have:

• Added a store to your site
• Followed Weebly’s steps to set up your store
• Added products
• Upgraded your plan if necessary

Step 7: Choose a Price Plan

Up until now we’ve assumed you’re happily building on the free plan. However,
as we’ve seen there are cases where you might want to upgrade – for example,
to unlock advanced features or start selling online!

Let’s take a quick look at

Weebly’s prices and how
you can upgrade if you

want to.

Click to see Weebly's

pricing plans in detail

You already know about Weebly’s free plan. There’s no time limit on it, and
you can actually publish
your site without paying a dime. However, it has its drawbacks – no custom
domain, limited features, and Weebly adverts displayed on your site.

The free plan is perfect for cost-conscious website creators, but luckily its paid
plans are pretty budget-friendly too! There are three price plans to
choose from:
20 NegOr_Q3_ETECH11_Module8_V2
 • Personal: $6 per month (billed annually)
• Professional plan: $12 per month (billed annually)
• Performance: $26 per month (billed annually)

Here’s who we recommend each plan for:

• Personal: Best for hobby sites and personal blogs or portfolios, the
Personal plan is for having fun on. The only difference between this and
the free plan is that you can connect a custom domain – it won’t remove
adverts from your site, so we don’t recommend it for professional
websites!
• Professional: Best for business sites, professional portfolios, or any
website you want taken seriously online. This is the cheapest plan to
remove adverts – you also get a free domain, unlimited storage, password
protection, and a shipping calculator. This is the plan we recommend to
most Weebly users!
• Performance: Best for online stores and large businesses, especially if
you’re aiming for growth. You unlock premium selling features such as
abandoned cart emails and shipping discounts, as well as advanced
ecommerce analytics.

We recommend upgrading to the $12 per month Professional plan,

as it offers much better value for money than the Personal plan. Considering how
many more features you get compared to the Personal plan, paying $12 per
month for the Professional plan seems like a total steal! It’s the cheapest plan for
creating a truly professional website.

Before you move on, make sure you have:

• Explored and compared Weebly’s prices
• Decided if you want to upgrade
• Chosen a price plan
• Signed up

Step 8: Publish Your Weebly Website

If you’re happy with what you’ve created, you can now publish. Great! If you’re
not completely happy, don’t worry – you can revisit the Weebly website editor to
make some changes after you publish.

21 NegOr_Q3_ETECH11_Module8_V2
 To publish your site, hit the blue ‘Publish’ button in the top right corner. You
will then receive a popup telling you it’s published, and how to integrate a ‘Pro
Tip’. Weebly really wants your site to succeed.

After publishing, Weebly

provides a helpful Pro Tip

You’ve now published your

Weebly website. Like we said, it’s easy to update and edit at any time. You can
also upgrade your plan if you
want to. Just head back to Step 1 to view the plans and their benefits.

If you publish your site, but then change your mind, you can head to your
Settings and scroll down to the very bottom. There, you’ll find an option to
unpublish your site with a single click. Easy!

Before you move on, make sure you have:

 Published your site!

Step 9: Improve and Grow Your Website

Once your site is live, there are a few things you can do to encourage its growth
and success. Don’t just leave it to languish all alone – instead, make regular
tweaks, edits, and changes to keep your site fresh and relevant.

Edit Content
Go back and edit content – update old information, write new articles, and add
extra sections to old pages. Fresh content will not only keep your visitors happy,
it’ll show Google that your site is relevant and active.

Optimize for Google

You want your site to rank in Google’s search results, right? Right. It’s the best
way of getting more traffic and boosting your online presence. The way to climb
up through the ranks is by mastering SEO (Search Engine Optimization).

SEO is the process of boosting your site’s chances of ranking highly in the
search results, and involves lots of factors. Some are super simple, like using
headings to structure your content, while others are a little more advanced.

Weebly has a great range of SEO tools to help your site rank, as well as
beginner-friendly guides to walk you through each step. Start off with its
Ultimate SEO Guide and you’ll be a pro in no time!
Promote via Social Media
Everyone is on social media these days – and you want everyone to see your
site! Pick a couple of social channels that suit your site – for example, Instagram
is perfect for photographers, and Pinterest is ideal for selling handmade items.
Then start sharing snippets of content, blog posts, images, and more to engage
your visitors and gain followers.

Get Marketing

22 NegOr_Q3_ETECH11_Module8_V2
 Email marketing can be your best friend. It’s a great way of releasing new
product information, letting your visitors know about news and events, or
enticing them back with sales and discounts.
Weebly has its own email marketing system called Weebly Promote, which
helps you build your mailing list, easily create customized emails, and track your
emails’ performance. This is free to use for your first two campaigns; after that it
costs $8 per month.
Weebly also has fantastic blogging tools, so you can combine blog posts
with email campaigns and newsletters to keep your visitors informed and
engaged.

Before moving on, make sure you

have:  Updated your site
• Familiarized yourself with SEO
• Shared your site on social media
• Set up blogging and email campaigns

Now you’re ready to create a Weebly website. Feels good, doesn’t it? We’re sure
you’ve nailed the steps already, but let’s go through the stages one more time:

How to Make a Weebly Website

1. Sign up and start building for free
2. Select a theme to suit your needs
3. Choose your domain name
4. Build your Weebly website using the Elements Bar
5. Add apps to boost your website
6. Add an online store
7. Choose a price plan
8. Publish
9. Improve and grow your site

So, from Sign Up to Publish, these are the nine steps for creating a Weebly
website.

Weebly offers you the option to fine-tune your site using HTML and CSS, and even
export it for editing elsewhere, meaning it isn’t only for beginners. It also offers numerous
subscription levels, including ecommerce plans.

To get the best out of Weebly, we recommend that you start with a free website. This
is your chance to get to know the editing interface, and judge for yourself how easy (and
difficult) its various features are.

Once you’re ready to upgrade, we recommend skipping the Personal plan – you get
more for your money on the Professional plan!

Advantages Disadvantages
1. Best website builder for small
businesses, with all the basic tools you 1. Drag-and-drop customization is
need to build a great business site – or limited – unless you’re confident with
even an online store code (and feel comfortable using the
2. Cool customizable templates – all Weebly Code Editor), you might find

23 NegOr_Q3_ETECH11_Module8_V2
 Weebly’s themes are simple, stylish, Weebly frustrating in its lack of creative and
mobile responsive, and you can freedom.
even switch between them 2. No personal restore option, so if your
3. Really helpful SEO guides in Weebly’s site goes down you’re totally reliant on help
and support center, for advice on the Weebly support team to restore your
coding, keyword optimization, and tips site for you.
on boosting your site’s ranking. 3. No ADI option – Artificial Design
Intelligence (ADI) is where a website
builder uses information you provide to
automatically create a site for you, saving

What’s More
Activity 1:
1. What are the advantages and disadvantages of a WYSIWYG editor?

____________________________________________________________________
___________________________________________________________________________
______________________________.

1. What is the difference between your WordPress blog and your Jimdo
website?

_______________________________________________________________
_____________________________________________________________________
___________________________.

2. List down the three more WYSIWYG web hosting services and their URL.
_______________________________________________________________
_____________________________________________________________________
__________________________.

What I Can Do

Activity 3: Personal Website

Following the nine (9) steps on how to make website using weebly.com:

A. Prepare a Site Map of your personal website (1 bondpaper)

24 NegOr_Q3_ETECH11_Module8_V2
 B. Go to weebly’s homepage by typing www.weebly.com on the
address bar of the browser and use Sign Up Free Form. If
registered already click “Log-in”

Activity 4:
Create a blog post on your WordPress blog advertising your newly created
website. Make sure you insert details about your website that will entice your
readers to visit it.

Assessment

A. Multiple Choice: Select the letter of the best answer from the given choices.

1. What tab gives you access to the pages in your website and at the same time
add or remove pages.
A. Reference B. Add-Ins C. Mailings D. Pages

2. What is the most basic Weebly element?

A. Titles B. Sentences C. Words D. Paragraphs

3. Which element in weebly.com allows you to add videos and games to the
created website.
A. Add B. Multimedia C. Insert D. Uploader

4. What button will be clicked so that you can open your weebly.com account?
A. Open B. Log In C. Log Off D. Restore

5. What should be the first move in order to avail a weebly.com account? A. Log
In B. Sign Out C. Sign Up D. Shut Down

B. True or False: Write T if the statement is correct otherwise, write F on your

notebook or worksheet.

1. The home page is the first page of your website.

2. You can insert YouTube videos in your weebly website.
3. WYSIWYG stands for What You Sense Is What You Get.
4. Aside from Microsoft Word, you can use Microsoft Excel to produce
webpage.
5. Weebly is the best builder for small business sites and portfolios.
6. Weebly has a free plan which you can stay on for as you like.
7. If you want to delete a larger section such as a background, simply click
on the area you want to remove.
8. Weebly has a single choice of mobile responsive themes, for industry.
9. Using weebly, you can customize you them even more by changing the
background.
25 NegOr_Q3_ETECH11_Module8_V2
 10. Adding elements in weebly is the same process for each page.

B. Matching Type: Match Column A with Column B.

Column A Column B
1. Weebly A. stands for Hypertext Markup Language
2. HTML B. an editor that allows you to create and design web
pages without any coding knowledge.
3. WISIWYG C. a free website builder with a WYSIWYG editor.
4. CSS D. the top most label of a website
5. Heading E. stands for Cascading Style Sheets
6. Photo Gallery F. a feature that maximizes the search engine optimization
feature so visitors can easily locate your website.
7. Template G. A page that contains photos
8. Search Engine H. A ready-made design for a website
Optimization (SEO)
9. Adding Element I. The main page of a website
10. Home page J. This is where you add the fun stuff, like text, videos,
content buttons, and more anywhere you like.

III. Rearrange the following steps in chronological order by numbering them from
1 to the last number of the steps. Write X if the step does not belong.

How to Make a Weebly Website

____ a. Add apps to boost your website
____ b. Choose your domain name
____ c. Sign up and start building for free
____ d. Select a theme to suit your needs
____ e. Improve and grow your site
____ f. Publish
____ g. Build your Weebly website using the Elements Bar
____ h. Choose a price plan
____ i. Create a Site Map
____ j. Add an online store

Additional Activity

Activity 5: Answer the following questions briefly.

1. For social change activity, which platform do you prefer: WordPress or Weebly?
26 NegOr_Q3_ETECH11_Module8_V2
 ___________________________________________________________________________
_______________________________.

2. What are the advantages of using Weebly?

_____________________________________________________________________
_____________________________.

3. What are the disadvantages of using Weebly?

_____________________________________________________________________
_____________________________.

4. Using search engine, research on the features of other online free host website?
_____________________________________________________________________
_____________________________.

27 NegOr_Q3_ETECH11_Module8_V2
References

Books

Empowerment Technologies. Rex Book Store Inc. and Innovative Training

Works, Inc., First Edition 2016

Web Sites

Barraclough, Dan, “How to Use Weebly: A Simple Step-by-Step Guide”, accessed

January 20, 2021,
https://www.websitebuilderexpert.com/websitebuilders/how-to-use-
weebly/

Build a professional website that grows with your business, accessed January 20,
2021, https://www.weebly.com/

Building Your Own Portfolio Website, accessed January 20,

2021, https://www.portfoliobox.net/?
s=googleph&gclid=Cj0KCQjwyN-
DBhCDARIsAFOELTkJqWD4c8_Quy3kQYjtj7RaEQhZB_xYATGcaXjtRE
ZjHIuiG8E7aVoaAizgEALw_wcB
Weebly Review 2021, accessed January 20, 2021,
https://www.websitebuilderexpert.com/website-builders/weeblyreview/
For inquiries or feedback, please write or call:

Department of Education
– Schools Division of Negros Oriental
Kagawasan, Avenue, Daro, Dumaguete City, Negros Oriental

Tel #: (035) 225 2376/ 541 1117

Email Address:[email protected]
Website: lrmds.depednodis.net