Introducing the Web site structure

In this section, we'll throw away the Umbraco to see what sites have been created. Before we introduce Umbraco, we need to understand how the site works and how to use the browser tool.

What we see at the top of the label is called the page title. The title of each page changes the theme that represents the page.

The other part is the address bar,

When we go to Umbraco backstage we can see our content tree. We can see the structure of the page, similar to the navigation bar on our website.

You will find that there is nothing behind the home page URL, which means that all other pages are in this root directory. This root page is what we call a level one page.

On the Getting Started page, all subsequent pages are created under the root directory page. For example: if we want to go to the news section and click on one of the articles, then we will add a level three directory to the address bar.

This will help us find news articles in the background, and if you want to expand all the news pages, you will see all the news articles and show them here.

The following diagram can help us understand the site directory structure well:

Whenever you add a layer, this is similar to the root of a plant or tree, when the site starts from the root directory, and then moves from the first level directory to the next layer.

Now that we understand why URLs are important, when we manage or edit site content, the first thing you need to find in Umbraco is the attributes and data types. In the Getting Started page, this is a picture. If we want to change a picture, I need to find it in the content tree.

If we just look at the URL, we can use it as our roadmap.

The rest of the page is simple, and now we can split the page into three parts. The header contains a navigation bar, a body content area, and a footer that usually contains information such as social media links.

Introducing the Web site structure