Grade 7

Lesson 2 Grade
- Website
7 Navigation
Lesson 3(2nd
- Q.)
Website
Navigation
(2nd Q.)

Prepared by: Ms. Ali Damian

Prepared by: Ms. Ali Damian
Website Navigation
What is a website?
A website is a collection
of web pages and related
content that is identified
by a common domain name
and published on at least
one web server. Websites
are typically dedicated to
a particular topic or
purpose, such as news,
education, commerce,
entertainment or social
networking. Wikipedia
What is website navigation?
A website navigation
is an organized list of
links to other web pages,
usually internal site pages.
Navigation menus appear in
page headers or sidebars
across a website, allowing
visitors to access the most
useful pages quickly.
What is website navigation?
Website navigation is the act of moving from
the landing page of a website and clicking
through to another webpage. Essentially,
it's a user roadmap with signs that
communicate where the user can find the
information they're looking for. Good
website navigation design aids the user in
their search for information, a product, or
a service that's offered by the website.
Additionally, a good website navigation
structure lets the user find what they're
looking for quickly and without difficulty.
What is website navigation?
Some website navigation examples include major
websites like Shopee, Lazada, Ebay and Amazon.
These sites have similar layout with a header
and a footer menu, dropdown menus, and major
categories laid out in the header. It's worth
taking the time to look at how their site
navigation works, as it will give you insight
into everything from the website color scheme
to deciding on a font for your website. These
and other major websites frequently change
their navigation menus to highlight a new
service or product, but they always follow
website navigation best practices by retaining
the same layout.
Why is website navigation important?
Website navigation is important because it's a core feature of how people use
your website. A major part of good website design is keeping pages visually
clean while containing a sufficient amount of information to keep the viewer
interested and wanting more. When you engage in good site navigation best
practices, your visitor stays around longer, seeks out more information, and
enjoys their experience because it's easy to find what they're looking for.

User experience
Users find great satisfaction when they navigate a website that's intuitive
and easy to use. They get a feeling of connection to the site because all of
their needs, whether it be a question or a search for something specific, are
met with a few clicks of the mouse. A user is also more likely to trust the
information on the site because they get results quickly. In turn, they're
not spending extra time trying to navigate through endless pages that don't
offer a solution to their problem.
What are the most common types of navigation tools?
There are least five different types of navigation tools
used by many websites:

1. Navigation Bar: Many websites have a bar of links to the

main areas of the website located at the top of every
webpage. This bar includes links to primary pages like
“Home”, “Shop”, “About”, “Contact Us”, and product and
service feature pages. One current trend in web design
is for the navigation bar to remain at the top of the
webpage even as a visitor scrolls down to view content
further down the page, ensuring the visitor always has
easy access to the main navigation links. The primary
navigation menu is often mirrored and expanded in the
footer of a webpage.
What are the most common types of navigation tools?
There are least five different types of navigation tools
used by many websites:

2. Text Links: As you read content on a webpage you will

sometimes see embedded links. These links are hyperlinked text
used to recommend additional resources that might be useful,
or to provide a link to the source materials used to develop
the content.

3. Breadcrumbs: On some websites, you may see a series of

words in a row that show the hierarchy of pages that were used
to reach the page you are currently on. This heirarchy is
called the page breadcrumbs. In the case of this page, the
breadcrumbs look like this: Learn the Net > The Interactive
Glossary > Navigation Tools.
What are the most common types of navigation
tools?There are least five different types of
navigation tools used by many websites:
4. Sitemap: A sitemap is a hierarchical list of all of the web
pages on a website. Some sitemaps are designed purely for use by
search engine spiders and are not very easy for a human visitor to
make sense of, while others are designed to be usable by both
spiders and website visitors.

5. Pop-up Menus: Many websites cannot be adequately navigated by a

single layer of menus. In these cases, secondary menus remain
hidden until a visitor performs an action, such as allowing the
mouse pointer to hover over an element in the primary menu, or
selecting an element in the primary menu on a mobile device. Once
this happens, the secondary menu, sometimes called a drop-down,
pop-up, or flyout menu, will appear and provide additional
options.
 6 Essential Features of a Website

❏ A Simple, Easy to Remember URL

❏ A Clear Description of Your
❏ Business Call to Actions
❏ Contact Information
❏ Mobile Friendly or Responsive Design
❏ Staff Photos and Biographies
● Header
Consistent
area at the
top of the
site that
includes the
logo and
navigation
menu.
● Navigation
Menu
Part of the
header and
includes the
links that take
visitors to
other parts of
the websites.
● Website
Content
Website content is
any written, audio,
or visual content
element on a website.
It can include blog
posts, marketing
copy, photos, logos,
embedded videos,
podcasts, and any
other creative
elements on a site.
● Primary/
Secondary
Navigation
Two separate
navigation menus
are used when
there may be a lot
of navigation
needed, and you
want to be clear
which links are
most important.
● Sidebar
An area of the
website used to
display
information that’s
not part of the
main page’s
content.
● A Call to
Actions or
CTA
Part of a website
that incites
visitors to take
action. It can be
a button or
opt-in-box.
Exam:
❖ join now!
❖ Buy now!
❖ Add to cart
● Footer
❖ Consistent area
at the bottom of
every page of
your website.
❖ It might include
contact
information, a
map, links,
opt-links, social
icons, a search
box and a lot
more.
Definition
of a Website
● What is a website?
A website is a collection
of web pages and related
content that is identified
by a common domain name
and published on at least
one web server.
● What is website
navigation?
Website navigation is the
act of moving from the
landing page of a website
and clicking through to
another webpage.
Essentially, it's a user
roadmap with signs that
communicate where the user
can find the information
they're looking for.
6 Essential Features Parts of a Website
● A Simple, Easy to ● Header
Remember URL Consistent area at the top of the site that
● A Clear Description includes the logo and navigation menu.
● Navigation Menu
of Your Part of the header and includes the links that take
● Business Call to visitors to other parts of the websites.
● Website Content
Actions
Website content is any written, audio, or visual
● Contact Information content element on a website. It can include blog
● Mobile Friendly or posts, marketing copy, photos, logos, embedded
videos, podcasts, and any other creative elements
Responsive Design
on a site.
● Staff Photos and ● Primary/Secondary Navigation
Biographies Two separate navigation menus are used when there
may be a lot of navigation needed, and you want to
be clear which links are most important.
● A Call to Actions or CTA
Part of a website that incites visitors to take
action. It can be a button or opt-in-box.
Exam: join now!, Buy now!, Add to cart
● Footer
Consistent area at the bottom of every page
of your website. It might include contact
information, a map, links, opt-links, social
icons, a search box and a lot more
 Grade
Grade77
Lesson
Lesson 2 -3Website
- Website
Navigation
Navigation
(2nd Q.)
(2nd Q.)

Prepared by: Ms. Ali Damian

Prepared by: Ms. Ali Damian