Lesson video

Hi, my name is Jordan Bickel, and this is lesson five of six of Web Page Creation.

In this lesson, you'll be learning about breadcrumb trails and how they help the user experience in your website creation.

In this lesson, you're going to need permission from a parent or carer to access the San Diego Zoo Kids website, and to access your Google Site that you created in lesson four.

You're also going to need a pencil or pen and a piece of paper.

Now, find a quiet place with few distractions where you can get your best work done.

Pause the video here, and when you're ready to continue, press play.

In this lesson, you will outline the need for a navigation path.

To do this, we'll first have to explain what a navigation path is, and then we'll also need to describe why navigation paths are useful.

Then you'll be able to make multiple webpages and link them using hyperlinks.

You'll need to use your navigation path to do this.

Do you know what a navigation path or breadcrumb trail is? These are important when designing websites.

Let's think about the term breadcrumb trail.

You may have heard this term before in the story, "Hansel and Gretel".

Just to refresh your memory, Hansel and Gretel over their father and stepmother talking about a famine.

The stepmother tells the father that they should lose the children in the woods so that they can have more food for themselves.

Hansel hatches a clever plan to leave a trail of breadcrumbs to lead him and his sister back to their father's house.

Breadcrumb trails or navigation paths, as they're sometimes known, are very important when navigating a site.

Similar to the story, "Hansel and Gretel", Hansel use the breadcrumb trail to find his way back home.

So when you use a website, it's helpful to be able to get back to where you came from.

This is why breadcrumb trails are so important.

They allow users to keep track of where they've been on the website.

So when you're planning your website, you need to think carefully about which web pages link together to help the user move around the site easily.

Website design example.

In the example below, you'll see a homepage called Our School.

From that homepage, I might link to a second subpage called Our Curriculum, and then from Our Curriculum page, I could have additional subpages.

For example, I might have Maths, Art, and D.

T.

I can even create additional subpages from there.

For example, from the Maths subpage, I might have an additional page called Maths Games.

Then going back to our homepage called Our School, you might have additional subpages that can be directed from there.

For example, I might have a page about the Uniform, and then from there, I would have another sub that links to Uniform Shops.

Going back to the homepage, Our School, one more time, I can have a third subpage called Staff.

And from there, I might have a page that links to different teachers, so Mr. Smith, Mr. Jones, and Mrs. Morris, for example.

This is an example of a navigation path for a website called Our School Task One: Where will you go? Task One: Where will you go? In this task, we're going to take a look at the San Diego Zoo website and track where you go using a navigation path.

So go to the San Diego Zoo homepage.

And for example, the first link you might click on is the Animals which we've looked at in previous lessons.

From Animals, I might then click on African Cheetah, and then by pressing the back button, I'll navigate to the page Animals again.

Then I can click on Arctic Fox, and then press the back button to navigate to Animals again, and then, finally, I might visit the Bald's Eagle Page, and then press the back arrow to go back to the Animals page.

Then I can press back once more to be navigated back to the homepage.

From there, I might click on a different subpage, for example, Stories, which we've also looked at in previous lessons.

From Stories, I might look at the story of Flamingo Leg Up, which we've already read, and then by pressing back, go back to the Stories page.

There, I might look at Tiger Tiger, and press back to go to Stories.

And then, finally, I might look at the story, Fuzzy Friends, and press back to navigate to Stories.

Then my pressing back once more, I can navigate to the San Diego Zoo homepage.

From there, it's up to you.

You can choose your own navigation path to follow.

There are other subpages that you may want to explore.

Let's take a closer look at just this section of the navigation path on the San Diego Zoo website.

Here's an example of what it would look like if I were to follow that navigation path.

So I'll start at San Diego Zoo homepage.

And then from there, the first subpage I'll visit is Animals.

Looking at the navigation path, the first subpage from there that I visit is called African Cheetah.

So from the Animal page, I'll go down, and could see right there, I'll click on African Cheetah.

Then by pressing back, I'll navigate to the Animals page again.

The next page from the navigation path that was visited is Arctic Fox.

So again, I'll continue going down until I find the Arctic Fox page, and there I'll click, and I'll be directed to the next subpage that has information about the Arctic Fox.

Then by pressing back, I'm navigated once more to the Animals subpage.

And the third page that I visited from there is the Bald Eagle.

So when I click on Bald's Eagle, I'll be navigated to a subpage that has information of the Bald Eagle.

Then by clicking back, I'll be navigated to the Animal subpage once more.

And by pressing back once more, I should be directed back to the San Diego Zoo homepage.

And there we go.

In this task, you'll use the worksheet provided to track your activity on the San Diego Zoo website.

Use the example provided in the worksheet if you need help getting started.

Pause the video here to complete Task One.

Press play when you're ready to continue.

Here's an example of what your completed navigation path may look like.

Remember, they'll all be slightly different because we'll visit different webpages.

Task Two: Planning your website.

Planning your website.

When you plan your website, you're going to have to think carefully on how your pages will link together.

Let's use my website, Animals Unleashed, as an example below.

My homepage is called Animals Unleashed.

And from there, in my navigation path, I'm going to plan to have three subpages from my homepage.

The first will be called Animals A to Z, the second will be called Habitats, and the third is going to be FAQs, Frequently Asked Questions.

Now that I have my three subpages, I want to start thinking about what additional information I can provide on each of those pages.

So if we look to Animals A to Z first, I'll think about which animals I want to give the user more information about.

So in my navigation path, I've planned to include information on Fox, Rabbit, and Sharks.

And I'll think to Habitats, and I'll do the same exact thing.

I'm going to think about which habitats do I want to give more information on.

In my case, I've planned to include information about Arctic, Desert and Tundra Habitats.

And then finally, if I look at my third subpage, FAQs, I've planned to include two more pages, one that will have a page with questions and another one that will have contact information if I'm not able to answer those questions.

Pause the video here to complete your task.

Press play when you're ready to continue.

Here's an example of what a completed navigation path might look like.

I've done mine for my website, Animals Unleashed.

So you can see my homepage is at the very top, and then from my homepage I've linked to three different subpages, Animals A to Z, Habitats, and FAQs.

And then from each of my subpages, I've also included in my plan, additional subpages to each of those, for additional information for the user.

Task Three: Adding subpages and creating hyperlinks on Google Sites.

In this task, you'll be adding subpages and creating hyperlinks in your Google Sites.

You'll need to use your paper plan to determine which subpages to create and where hyperlinks need to be placed.

Looking at my example below, you can see my homepage is called Animals Unleashed.

And in my navigation path, I've planned to have three different subpages from my homepage.

The first subpage is Animals A to Z, the second is Habitats, and the third is FAQs.

First we'll look at how to add these subpages to my Google Site.

Here's a demonstration on how to add subpages to your Google Site.

Here I'm on the homepage of my Google Site.

You'll be familiar with this right-hand toolbar here, when you've added different layouts to your homepage.

Now, to add a subpage, we need to click to this tab here called Pages.

And you can see, I've already have my first webpage, which is called Home.

Now, if I go down to the plus button here, I'll be able to add my first subpage by clicking new page.

And now looking at my navigation path, the first subpage I want to create is called Animals A to Z, and then I'll click Done when I've typed that in.

So here you can see I've created my first subpage.

to create my second subpage, I need to click on Home, and I'll repeat the same exact process I just did, and click new page, and looking at my navigation path, my second subpage is called Habitats.

And then, once again, I'll click Done when I'm ready to continue.

So now you can see, I have two subpages beneath my homepage.

Now, to create the third, I need to click on homepage one more time, and then I'll go to the plus button here at the bottom to create my new page.

And the third page is called FAQs, and then I'll click Done.

And there you go.

I've created my first three subpages of my website.

To add information to each of your subpages, you follow the same process in our previous lessons when you created our homepage.

So if I want to add information to my subpage Animals A to Z, I'll click on it here in my right hand navigation bar, and then I can go back to Insert.

And here you'll see all the same options you had when creating your homepage.

So I can any of the layouts here, I can choose this one with two pictures and text, and then just drag it underneath the header of my page.

Now that I've added subpages, I need to create hyperlinks to connect to these pages.

So looking at my plan below, you can see from my home page here that I plan to include a hyperlink to my subpage, Animals A to Z.

So on your navigation path, the arrow indicates where a hyperlink needs to be included.

So I also need to include a hyperlink between my homepage and my subpage Habitats, and then I also need to create a hyperlink between my homepage and my subpage FAQs.

Here's a demonstration on how to create hyperlinks on Google Sites.

Now that I've added subpages, I can create hyperlinks to connect to each of these pages.

To do this, I first need to navigate back to my homepage.

Following the plan I created for my homepage, I included three images that correspond to the three subpages that I've created.

Now I need to add a link, so when the user clicks on this picture, there'll be linked to the appropriate subpage.

So the first one I'll link is Animals A to Z.

So this is the image I want the user to click on to go to the page Animals A to Z.

So I'll click on this image, and then if I move to the top of the image, I should get a menu that pops up.

Oh, there we go.

So you just need to make sure you click on the image.

And then here you could see different icons that each have a different function.

So if you hover over each one and just place your mouse on top without clicking, it will remind you what each of those images stand for.

So here, Insert Link, that's exactly what I want to do.

So when I click on this, I'll get an option of all the subpages I've already created.

And when the user clicks on this picture, I want them to go to the subpage, Animals A to Z, and then I'll press apply.

Now, if you want to check if this work, remember you can always use the Preview feature to see what it's like for the user experience.

So when I click on Preview, not only can I see the different layouts, but I can test if my hyperlinks are linking to the correct subpages.

So here's my homepage, and then if I go down, what I want to happen, is when I click on this image here, I want to be taken to the subpage, Animals A to Z.

And there you can see it's worked.

So I know that I've linked the two pages correctly.

So now I can exit the Preview.

Now that you've learned how to add subpages and create hyperlinks, we're going to look at the bottom level of your navigation path.

In my example below, you can see here, I have three more subpages that I want to add to subpage, Animals A to Z.

So we're going to have a quick look now on how you could add a subpage to a subpage and create hyperlinks.

Using the paper navigation path, I can see that from my page, Animals A to Z, I had planned to include a further three subpages.

To do this, I need to navigate to my Animals A to Z page, and then from here, I can add those three additional subpages.

To do this, I can click on the menu buttons here, and you can see I have the option to add a subpage.

So the first subpage I had planned was Foxes.

And then looking at my navigation plan again, the next subpage I had planned for it was called Rabbits.

So I'll click on this menu once more.

I need to make sure that I click on the menu next to the subpage I want that subpage to go beneath.

So I want this one to be on Animals A to Z.

So click on this menu, click add subpage.

And then the second one was Rabbits.

And then the third subpage I wanted to add, so going to Animals A to Z again, because this third subpage is going to be connected to Animals A to Z, and then I'll click add subpage, and the last one I'd my plan for was Sharks.

Now that I've added subpages to one of my subpages, I need to create hyperlinks to connect to these pages.

So I'll go back to my page, Animals A to Z.

And here I had already chosen to use the layout that had two images, but since I've decided to have three subpages, I'm going to change this layout to have three images.

So click on the whole layout.

So I have a blue box around the entire section, and I'll press Bin to delete it, and then I can go back to Insert to choose a different layout.

So this time I want to have three images, each to link to one of the three subpages, then I can drop the layout there.

Now that I've finished designing this page, I can add the hyperlinks.

So first I'll click on my image, and I'll have the link button appear here at the top.

So I'll click insert new link, and here I should have a list of all of the subpages I've created.

So I want this image to link to the page called Foxes.

Then I'll click on my next image, Rabbit, where I want this image to link to the sub page, Rabbits.

And finally, I'll click on Sharks, and I want this image to link to my subpage called Sharks, just there at the bottom and apply.

And remember, if you want to check if your hyperlinks work correctly, you can always use the preview feature to test out what your website looks like for the user.

Now it's your turn to use your paper navigation path from Task Two to add subpages and create hyperlinks on your Google Site.

Pause the video here to complete your task.

Press play when you're ready to continue.

Fantastic work.

You've accomplished a lot in this lesson! Well done! Remember, all websites are created for a specific purpose with an audience in mind.

Be sure to share your website with somebody in your intended audience.

Can they follow the navigation path that you set out? You should be really proud of all that you've accomplished.

You've reached the end of lesson five.

If you'd like to, please ask your parents or carer to share your work on Instagram, Facebook, or Twitter, tagging OakNational and #LearnwithOak.