Bato Institute of Science And Technology, Inc.

Dolho, Bato, Letyte

EMPOWERMENT TECHNOLOGIES
Name: ______________________________________________

where it can be easily seen. Users can go to

MODULE 9: Web Page Design another web page by clicking its name in
the navigation.
3. Content Section
Introduction As you may already know, contents are the
By now, you probably have a clear understanding main focus of any website. Contents like
of how the Internet works. You probably already texts, images, and videos take up the
know that electronic data is stored in computers largest space in websites.
and shared with other computers through a 4. Contact Section
massive global network. Now, think about how this The contact section is usually in a separate
information is presented to you. As a user, you web page. It contains the website’s
prefer to view information in a manner that makes contact information such as phone
sense to you. Information should be delivered in a numbers, email address, and office
way that is organized and easy to locate and address. It is also a common practice to
understand. This is achieved through websites. In add a message box in the contact section
this chapter, we will learn what makes up a website so that the user can leave a direct message
and what goes into building one for the website owners.
5. Call to Action
Abstract A call to action is a message or instruction
What is a website? that urges the users to do an action. It is
In simple terms, a website is a collection of web typically in the form of a command like
pages that can be accessed through the Internet. “Click here”, “Sign our petition” or “Watch
A website typically serves a single topic or function. the trailer here.” This is important to websites
Technically speaking, a website an online location that are created to gather public response
that points to a group of web pages. such as advocacies and commercial
enterprises.
6. About us
What is a web page?
“About us” can be a section or a page that
A web page is an electronic document that is
tells the users about the persons or
stored in a server and can be accessed through
organization that owns the website. The
the Internet using a web browser. Web pages are
purpose of this page is to establish the
the backbone of websites.
credibility of the website owner. It usually
contains a biography or history of the
Parts of a website owner, their achievements and their Mission
When designing a website, you have to take and Vision.
into consideration the people who will use it. 7. Footer
One of the main goals of a designer is to make As the name implies, the footer is always at
the website simple and easy to use. This is why the bottom of the web page. Its purpose is
even though some creative liberties can be to display links to important information. The
taken in designing a website, it is still important most common details that can be
to include features that the users are familiar accessed through the footer are Terms of
with. Service, Copyright information, FAQs
(frequently asked questions) and personal
The following are the most common information about the creators of the site.
components found in websites:
1. Header
Weebly
Also known as a masthead, the header is
usually located at the top of each web
It is not surprising to learn that most commercial
page and contains the website’s name and
websites are created and maintained by skilled
logo. Its purpose is to display the websites
and experienced developers. Such skills and
name and logo in order to make it instantly
experience are required to come up with unique
recognizable to users.
and groundbreaking designs and features.
2. Navigation
The navigation section is an interactive list
However, there are also ways to design a
that contains the names of the webpages
website even if you are not a programmer or a
in a website. It can be located anywhere in
designer. There are tools called website builders
the webpage but it is preferable to place it
Page | 1
 that can be used to create websites without Subdomain of Weebly.com” box. As a free user,
having to write code. These tools can either be your address will have “.weebly.com”
native or web-based. For this lesson, we will learn
how to build a website using one of these tools.

We will be creating a website using Weebly.

Weebly is a web hosting service and a website
building tool. Weebly relies primarily on its drag-
and-drop feature to place and manipulate
design elements.

You can use weebly for free but you can also
sign up for a paid membership to gain access to
exclusive features

Follow these steps to sign up and create your Step 5. Get started. Your website has been created.
website: Now you can start designing it.

Step 1. In your web browser, go to

www.weebly.com

Website Design
Explore the following features to come up with your
Step 2. Click Sign Up. In the Sign Up window, enter
own designs. Weebly provides tutorial articles in
you name, email address and your preferred
their help center. Check them out here:
password then click the Sign Up button at the
https://hc.weebly.com/hc/en-us. Each design
bottom.
element that we will discuss will include a Youtube
video.
These videos were created by Weebly as quick
reference materials for first-time users like you.

Dashboard
The dashboard or home page is the first page that
you will see after you log in. From here, you can
access the other features like the page editor.
Here, you can also see statistics related to your
website.
Step 3. Select a theme. The themes are grouped
into categories such as Business, Online Services,
Personal, etc.

Elements
Step 4. Choose Your Website Domain. Type your
On the left side of the Editor page, you will see
preferred domain name under the “Use a
Weebly Elements. Weebly elements is a collection
Page | 2
of design elements that you can add to your
website. These include text, image, slideshow and Page Layout
map. To add an element, click, drag then drop it to Weebly layouts are sets of elements that you can
the spot where you want to place it. add to your website. By using a layout, you can
Check out this video to learn more about elements: immediately fill your pages with matching
https://youtu.be/CXFZ0HHO1I elements. You can then edit these elements to add
your own details.
To do this click “Choose a Layout” in the middle of
a blank page. This will open the list of layouts
grouped by category. Click a layout to see a
preview of it. Click Keep to use this layout or Cancel
to go back to the list.
Video reference: https://youtu.be/Vu4lwfbO6ko

Pages and Navigation

You can add multiple pages in your website
through the Pages tab. Here you can also edit,
copy and delete existing web pages. A navigation
feature is automatically included in your website Project 3
but its design and location depends on the theme
Designing your own website
that you use.
In this activity, you will use everything that you have
For more details, check out Weebly’s how-to video
learned so far in designing your own website. You
about pages and navigation:
will be designing a website for our subject;
https://youtu.be/a7_LQq1tey
Empowerment Technologies.

1. Choose your theme.

2. Design your home page.
3. Add more pages.
4. Add an About Us page.
5. Add a Contact Us page.

To see the website example of this lesson, go to

http://empowertechlessons.weebly.com/. Don’t
forget to check out the mobile version in your
phone’s browser
Themes
You can change the look of your website in the
Theme tab. Here you can select a different color
scheme or change your website’s theme and fonts
To select a new theme, click Change Theme, which
will bring you to the Theme Gallery. Browse through
the categories to find a theme that you like.
Weebly themes work with computers and mobile
devices.
To learn more, follow the instructions on this video:
https://youtu.be/4TZqFc5bDhA
Note: Go to assignment and check the instructions
with complete explanation in it.

Prepared by:
Mary Jane G. Pagay
Instructor

Page | 3