GUI - Adding Pages and Navigation Bars to a Website [LESSON]
Adding Pages and Navigation Bars to a Website
Adding Pages to a Site
Most websites are several pages, not just one. To add pages to a site you just create new pages, but you also must add navigation so you can get from one page to another. First, we will learn about adding pages, then we will learn how to link them together.
Adding Pages using HTML
When creating pages using HTML, in a text editor, you just create a new HTML page in the same site folder. The home page should always be named "index", as the search engines look for the index page. The remaining pages should be named appropriately for the content of the page. If I was doing a website on the solar system, I may have the index page and then I’d have a page for each of the planets, so I’d have "index.html", "mercury.html", "venus.html", "earth.html", etc. Each of these pages and the supporting documents such as the CSS page, images, videos, sound, etc. would be contained in the site folder, which I may name "solar_system".
Adding Pages Using a GUI Editor
To create pages with a GUI editor you just click on the pages menu and click on "+Add Page". You will need to go to the page and add the text, colors, images, and all other page information. See the image below to see how to add pages in a GUI editor.
As you can see from the image, there are currently 3 pages in this site and there are 2 places to add pages, at the top you can click on "+ Add" or at the bottom you can click on the "+ Add Page" button.
Site Navigation
Adding Navigation Using HTML
To add navigation to your pages using HTML you create a list. You can place your navigation at the top or in a side bar on the left side of the page. If there is a lot to the site, you may also want to put navigation at the bottom of the page in the footer as well. You may also use the "Hamburger Menu", which is the 3 lines in the corner with a dropdown list of the pages of the site.
Hamburger Menu Example
Hamburger_Menu.png. CC 4.0 Attribution – Akveo – IconScout
When creating a navigation bar, you typically will want to remove the bullets from the list. You can add a lot of CSS to the navigation list to make it more interesting and interactive. When creating the list, you will put the link to the page such as below:
<ul>
<li><a href="index.html" target="_blank"> Home </a></li>
<li><a href="mercury.html" target="_blank"> Mercury </a></li>
<li><a href="venus.html" target="_blank"> Venus </a></li>
<li><a href="earth.html" target="_blank"> Earth </a></li>
….
</ul>
This will give the following:
- Home
- Mercury
- Venus
- Earth
You don’t want your navigation bar to have bullets or to have underlines. You can fix that with your CSS. In CSS you can indicate the following to remove the bullets and the underlines:
li {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none:
}
That will take the bullets off and the underline off.
You can make the navigation bar in a box using the "display: block" property. This will put the list into a block:
The CSS for the above would be:
li a {
display: block;
width: 80px;
background-color: blue;
color: white;
padding: 5px 20px;
}
To make your Navigation Bar horizontal, you use the "display: inline" property or the "float: left" property.
For example:
li {
display: inline;
}
This will give the following response:
Home Mercury Venus Earth
To use the "float" property with the "block" property, you could do the following:
li {
float: left;
}
li a {
display: block;
width: 80px;
background-color: blue;
color: white;
padding: 5px;
text-decoration: none;
}
Adding Navigation Using a GUI Editor
When you create pages in a GUI editor, the program will automatically create a navigation bar with the page names, in the style of the template you chose.
[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION