MODULE OF INSTRUCTION

Web Page Design

By now, you probably have a clear understanding of how the Internet

works. You probably already know that electronic data is stored in
computers and shared with other computers through a massive global
network. Now, think about how this information is presented to you.
As a user, you prefer to view information in a manner that makes sense
to you. Information should be delivered in a way that is organized and
easy to locate and understand. This is achieved through websites. In
this chapter, we will learn what makes up a website and what goes into
building one.

What is a website?
In simple terms, a website is a collection of web pages that can be
accessed through the Internet. A website typically serves a single topic
or function. Technically speaking, a website an online location that
points to a group of web pages.

What is a web page?

A web page is an electronic document that is stored in a server and can
be accessed through the Internet using a web browser. Web pages are
the backbone of websites.

Parts of a website
When designing a website, you have to take into consideration the
people who will use it. One of the main goals of a designer is to make
the website simple and easy to use. This is why even though some
creative liberties can be taken in designing a website, it is still
important to include features that the users are familiar with.

The following are the most common components found in websites:

1. Header
Also known as a masthead, the header is usually located at the
top of each web page and contains the website’s name and
logo. Its purpose is to display the websites name and logo in
order to make it instantly recognizable to users.

2. Navigation
The navigation section is an interactive list that contains the
names of the webpages in a website. It can be located

Online Search 1
X.X Online Search

anywhere in the webpage but it is preferable to place it where it

can be easily seen. Users can go to another web page by
clicking its name in the navigation.

3. Content Section
As you may already know, contents are the main focus of any
website. Contents like texts, images, and videos take up the
largest space in websites.

4. Contact Section
The contact section is usually in a separate web page. It
contains the website’s contact information such as phone
numbers, email address, and office address. It is also a
common practice to add a message box in the contact section
so that the user can leave a direct message for the website
owners.

5. Call to Action
A call to action is a message or instruction that urges the users
to do an action. It is typically in the form of a command like
“Click here”, “Sign our petition” or “Watch the trailer here.”
This is important to websites that are created to gather public
response such as advocacies and commercial enterprises.

6. About us
“About us” can be a section or a page that tells the users about
the persons or organization that owns the website. The purpose
of this page is to establish the credibility of the website owner.
It usually contains a biography or history of the owner, their
achievements and their Mission and Vision.

7. Footer
As the name implies, the footer is always at the bottom of the
web page. Its purpose is to display links to important
information. The most common details that can be accessed
through the footer are Terms of Service, Copyright
information, FAQ’s (frequently asked questions) and personal
information about the creators of the site.

2
MODULE OF INSTRUCTION

Weebly
It is not surprising to learn that most commercial websites are created
and maintained by skilled and experienced developers. Such skills and
experience are required to come up with unique and groundbreaking
designs and features.

However, there are also ways to design a website even if you are not a
programmer or a designer. There are tools called website builders that
can be used to create websites without having to write code. These
tools can either be 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 website:

Step 1. In your web browser, go to www.weebly.com

Step 2. Click Sign Up. In the Sign Up window, enter you name, email
address and your preferred password then click the Sign Up button at
the bottom.

Online Search 3
X.X Online Search

Step 3. Select a theme. The themes are grouped into categories such as
Business, Online Services, Personal, etc.

Step 4. Choose Your Website Domain. Type your preferred domain

name under the “Use a Subdomain of Weebly.com” box. As a free
user, your address will have “.weebly.com”

4
MODULE OF INSTRUCTION

Step 5. Get started. Your website has been created. Now you can start
designing it.

Website Design

Explore the following features to come up with your own designs.

Weebly provides tutorial articles in their help center. Check them out
here: https://hc.weebly.com/hc/en-us

Each design 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.

Online Search 5
X.X Online Search

Elements
On the left side of the Editor page, you will see Weebly Elements.
Weebly elements is a collection of design elements that you can add to
your website.These include text, image, slideshow and map. To add an
element, click, drag then drop it to the spot where you want to place it.

Check out this video to learn more about elements:

https://youtu.be/CXFZ-0HHO1I

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 but its

design and location depends on the theme that you use.

For more details, check out Weebly’s how-to video about pages and
navigation: https://youtu.be/a7_LQq1teyo

6
MODULE OF INSTRUCTION

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 thrugh 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

Page Layout
Weebly layouts are sets of elements that you can add to your website.
By using a layout, you can immediately fill your pages with matching
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 layour or Cancel to go back to
the list.
Video reference: https://youtu.be/Vu4lwfbO6ko

Online Search 7
X.X Online Search

Activity: Designing your own website

In this activity, you will use everything tht you have learned so far in
designing your own website.

Before we start, you have to think of a purpose for your website. It can
be the official website of an organization, a personal website that
features your portfolio, or a marketing site for selling your products.

For this activity, we will be designing a website for our subject;

Empowerment Technologies.

1. Choose your theme.

By now, you should alreay know how to open the Editor page. To start
building your website, first select a theme. You can use the one that
you selected during signup or if you want to, you can change it in the
THEME tab. Each theme comes with a default image but you can
easily change it.

2. Design your home page

By default, your website has one page. We will turn this page into the
Home page. Change the page name to Home. You may notice that the
lower part of the page is blank. Click “Start with a Layout” and select
a layout that will fill this part. Remember that all Elements can be
customized. You can move or delete elements or add new ones in the
BUILD tab.

8
MODULE OF INSTRUCTION

3. Add more pages

You can add and design more pages depending on what your website
needs. For the Empower-Tech website, we will add pages for
Chapters, References, and Activities.

To add a new page, click the + sign in the PAGES tab then click
Standard Page. You can experiment with other types of pages like
Blog and Store but most of the time, Standard is what you’ll need. Add
a name for your page. The name of the page will automatically appear
in the navigation section.

Like what we did in the Home page, you can customize your header
and add elements either by using a layout or by manually adding them
from the BUILD tab.Activities

4. Add an About Us page

As discussed earlier in this chapter, the “About Us” page or section
contains information about the owner of the website. In this case, the
owner is you. Create a new page named “About Us” if you work in a
team or “About the Author” if you work alone. Add some details about
yourself such as your experience in the website’s topic, your career,
and your other projects.

There are Layouts that are designed specially for this purpose. You can
choose one of the “About” layouts and add it to your page.

Online Search 9
X.X Online Search

5. Add a Contact Us page

As you already know, it is important to give your readers a way to
contact you. This is accomplished by adding a Contact Us page. For
this activity, you don’t have to include your real contact details. Just
add dummy phone numbers, email addresses, etc.
Just like the “About” page, you can use a layout designed for the
Contact page. You can also build it from scratch from the BUILD tab.

There you go. That’s pretty much all the components that your website
will need. It may look generic now but imagine what you can
accomplish if you spend more time adding contents and improving the
design.

To see the website that we created, go to

http://empowertechlessons.weebly.com/. Don’t forget to check out the
mobile version in your phone’s browser

10