Navigation and Navigation Bar

Loading...

En provenance du cours de The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1313 notes

Explore Related Videos

At Coursera, you will find the best lectures in the world. Here are some of our personalized recommendations for you

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1313 notes

Cours 1 sur 4 dans Specialization Full-Stack Web Development with React

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

À partir de la leçon

Bootstrap CSS Components

This module concentrates on Bootstrap's components that are designed using pure CSS classes. You will learn about Navigation and Navigation bar. Then, you will learn about buttons, forms, tables, cards, images and media, tags, alerts and progress bars. At the end of this module you need to complete your second assignment.

Navigation and Navigation Bar9:16

Exercise (Video): Navbar and Breadcrumbs30:47

Exercise (Video): Icon Fonts12:21

Rencontrer les enseignants

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

[MUSIC]

Let's now talk about navigation.

What is navigation, why is navigation important for your website?

And how do you we provide navigation information on your website?

So, these are the question that we will try to answer In this particular lecture.

The first obvious question that comes to your mind is,

why do we need to have website navigation?

As you realize, most websites are no longer single pages.

Of course, there do exist those single page websites

like your professor's webpage In your computer science department.

But most websites usually contain more than one page.

As we have seen with our confusion website that we are building,

we already have added a second page called aboutus.html page.

Now the way we navigated to the aboutus.html page was to

explicitly type that into the address bar of our browser.

But that is a very inconvenient way of navigating to your website.

It would make a lot more sense to provide an intuitive means for

the users to navigate to your website.

This intuitive means could be provided by many different approaches, the navigation

bar being one of the most common methods of indicating this information.

So, we'll look at several common ways of providing navigation

patterns on typical websites.

In this context, you often hear people talking about information architecture.

The information architecture begins with the structure of the system,

with respect to the way the information is organized, labelled.

And navigation is provided through the content or through this information.

Now information architecture, by itself, is a whole big field.

It is beyond the scope of this course to cover information architect.

But, in case you are interested in organizing and

providing information to users through, for example,

websites, then I have provided you with some links in the additional resources

that you can go and read for further knowledge.

But in any case, when you're designing a website,

it is important to understand the need to

design the information navigation structures within your website.

And this organization of information within your website also dictates

what kind of navigational aids you provide on your website, and

based on how that information is organized.

Typically, a website would be organized in some kind of a tree structured or

a hierarchical fashion.

And that automatically dictates to you

how you would design navigational support within your website.

The use of a navigation bar, breadcrumbs, and

other means of navigation are very, very essential for

enabling users to be able to see various parts of your website.

When you visit most websites you will often look for the navigation bar.

This is some kind of a bar that is typically attached at the top of

the website, or sometimes at the bottom of the website, or sometimes on the side,

that provides you with sufficient pointers towards the kind

of information that you can access on this site.

So your navigation bar will typically contain links to various pages that

form part of your website.

So a typical navigation bar, how do you go about designing this?

When you design a typical navigation bar, you should obviously

keep in mind some dos and don'ts about how you design navigation bars.

First is that you use user-friendly and

simple terms within your navigation bar to indicate the various links

that the users can follow within your website to reach information..

You should provide a standardized navigation, so

that wherever the user is within your website hierarchy,

they'll always know how to go back to the homepage, how to go to the next,

previous, or up and down the hierarchy of some sort.

So indicating the location of the user

within the hierarchy of your website is very, very useful

to provide a user-friendly way of navigating your websites.

Also, there are some standard conventions that people follow

when these navigation bars are designed.

Typically, when you have the logo of your website or

your company included in your navigation bar, a click on these logos or

a home button should take you back to the topmost level of the hierarchy or

the home page of your website, typically the index.html page.

Some of the don'ts that you should keep in mind is that you should not have too many

choices in your navigation bar.

How many is too many?

If you find that navigating using your navigation bars is too cumbersome,

then that means that there are too many options on your navigation bar.

Provide a reasonable set of choices within your navigation bar so that you can

indicate the directions that the user can follow in navigating through your website.

And when you use these navigation elements in your navigation bar,

don’t use generic labels, use meaningful labels.

For example, if you put a label named product in your

navigation bar, people will be confused about what you mean by product.

Or say, if you put a service in your navigation bar, they may be confused.

What kind of service are you providing?

It will be more meaningful to give a more descriptive term

In your headers in your navigation bar.

Yet another means of providing navigation for

users is to provide what is called as breadcrumbs.

These are typically provided somewhere in that page,

typical towards the top edge of the webpage,

closer to the heading of that webpage.

The breadcrumbs sort of indicate some kind of a navigational

hierarchy within which you're currently In your website.

So this provides a secondary navigation option for your website.

So this could be placed somewhere below the primary navigation.

It may indicate the hierarchy of pages through which you have gone.

And the current location may be highlighted specifically in

the breadcrumb there.

So various ways that people can use breadcrumbs

include providing a path based navigation.

Say, for example, if you have a user going through a set of steps in order to

complete a task on your website, say for example, reserving a airline ticket.

Then you could use a breadcrumb approach for indicating to them

what step the user is currently on in the sequence of steps.

Similarly, if you are providing your location based navigation for

hierarchical approach within your website.

So, what level of hierarchy you are in and what is the upper part towards

the root of your hierarchy, so that could be indicated by your breadcrumbs.

Your breadcrumb could also be attribute based, meaning that you provide a set

of choices indicated in your breadcrumb for the user at the current point of time.

A typical front-end UI framework provides many

other ways of providing navigation on your webpages.

These include tabs, pills, pagination, dropdowns,

accordions, tags, and SchrollSpy, and Affix.

We'll look at some of these in a bit more detail as we go through

the various lessons in the modules that follow this particular lesson.

[MUSIC]

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play