Core lesson ~50-60 minutes · extra practice time available
Learning intentions
I can describe the structure of a multi-level website.
I can design a site structure with a home page and two additional levels.
I can choose appropriate pages for a navigation bar.
Success criteria
I can identify level 0, level 1 and level 2 pages in a site map.
I can apply the rule: home page plus two additional levels, with no more than four pages per level.
I can explain why the main navigation bar usually links to level 1 pages, not every page on the site.
Warm up - requirements into pages
WDD1 identified what the wildlife centre website must provide. WDD2 starts organising that content into pages.
WU1
Which WDD1 functional requirement most clearly suggests a separate "Visit" or "Plan your visit" page?
That points more strongly to an education or enquiry page.
That points to an animal pages section.
Correct. These are all visit-planning details.
That is implementation, not a page-planning requirement.
WU2
Fill the gap: the first page users normally see is the ___ page.
WU3
In WDD1's requirement "The website must display current volunteer roles and provide application information for each role", which page grouping makes most sense?
Correct. Both parts belong under a single volunteering section.
This would likely break the four-pages-per-level rule and scatter closely related content.
CSS controls appearance, not page structure.
Grouping by topic matters - volunteering is not an animal topic.
Key vocabulary
Site structure
A plan showing how the pages of a website are organised and linked.
Home page
The top-level page of a website. It introduces the site and provides routes to main sections.
Level 1 page
A main section page linked directly from the home page, such as Visit, Animals or Schools.
Level 2 page
A more detailed sub-page that sits below a level 1 section.
Navigation bar
A consistent set of links that helps users move around the website.
Orphan page
A page with no clear link to it from the rest of the site, making it hard for users to find.
Designing a multi-level website
The Higher rule
For Higher Web Design & Development, a multi-level website must use a home page and two additional levels. It should also use no more than four pages per level. This rule keeps the site structure big enough to show hierarchy, but small enough for users to understand.
0
Home page
The top of the hierarchy. It introduces the site and links to main sections.
1
Main section pages
Up to four pages linked directly from the home page.
2
Detail pages
Up to four pages below each section, used for more specific content.
Why not put every page in the navigation bar?
A navigation bar should help users choose between the main sections of a site. If every detail page is squeezed into the top navigation, the site becomes harder to scan. A good design usually puts the level 1 pages in the main navigation bar, then lets each section page link to its own level 2 pages.
Worked scenario: Meadows Wildlife Centre
From WDD1, the centre needs visit information, animal profiles, school workshop enquiries, volunteering information and fundraising campaigns. These requirements can be grouped into a site structure before any wireframes or HTML are made.
Home
links to main sections - each dashed box below is one section and its own detail pages
Visit
↓
Opening Times
Prices
Animals
↓
Mammals
Birds
Schools
↓
Workshop Enquiry
Visit Preparation
Support Us
↓
Volunteer Roles
Fundraising
Home page + four level 1 pages, each with its own two level 2 detail pages directly underneath it. No level has more than four pages.
Worked examples
Example 1 - Checking the number of levels
1
The site starts with Home. This is level 0.
2
The main sections Visit, Animals, Schools and Support Us are level 1.
3
Pages such as Opening Times, Mammals and Workshop Enquiry are level 2.
OK
The structure has a home page and two additional levels, so it meets the Higher multi-level requirement.
Example 2 - Choosing navigation bar links
Question: Which pages should appear in the main navigation bar?
1
The home page should usually be reachable from the site logo or a Home link.
2
The level 1 pages are the best main navigation choices: Visit, Animals, Schools and Support Us.
3
Level 2 pages can be linked from inside their section. For example, Visit can link to Opening Times and Prices.
OK
Main nav: Home | Visit | Animals | Schools | Support Us
Example 3 - Spotting a broken structure
A pupil adds a Donate page but does not link to it from Home, Support Us, or any other page.
1
The page may exist as a file, but users have no obvious route to reach it.
2
That makes it an orphan page.
Fix
Place Donate under Support Us, and link to it from the Support Us page or from the fundraising content.
Now you try
A local music school needs pages for lessons, tutors, concerts, prices, piano lessons, guitar lessons, tutor profiles and booking an enquiry.
Sketch a three-level site structure: Home, up to four level 1 pages, and suitable level 2 pages.
Home
Lessons: Piano Lessons, Guitar Lessons, Prices
Tutors: Tutor Profiles
Concerts: Upcoming Concerts
Contact: Booking Enquiry
This uses four level 1 pages and places the detail pages underneath a sensible section.
Common mistakes
Making the site too flat. A home page with ten direct links does not show the required two additional levels.
Making the site too deep. Higher needs two additional levels, not a maze of level 3 and level 4 pages.
Putting too many pages at one level. The rule is no more than four pages per level.
Creating orphan pages. Every page in the structure needs a clear route from another page.
Confusing site structure with visual layout. Page hierarchy is not the same thing as wireframe layout. Wireframes start in WDD3.
Exam tip
If asked to describe or exemplify a multi-level website, name the levels clearly: home page, level 1 section pages, and level 2 detail pages. If asked about navigation, choose links that help users reach the main sections rather than listing every single page.
Task Set A - Core questions
Task Set A - Core questions
Complete all questions. Written answers reveal a model answer for self-assessment.
A1
What page sits at the top of a website hierarchy?
A2
Which structure meets the Higher multi-level rule?
This has no additional levels.
Correct. This is home plus two additional levels.
This breaks the no-more-than-four-pages-per-level rule.
This is deeper than the structure required here.
A3
What is the maximum number of pages allowed per level in the Higher WDD structure rule?
A4
Which set of links is the best choice for the wildlife centre's main navigation bar?
This includes too many detail pages for the main navigation.
These are scattered detail pages, not the main sections.
Correct. These are the main sections of the site.
Those are development topics, not pages for this website.
A5
What is the term for a page that exists but has no clear link to it from the rest of the site?
A6
Describe the three levels in the Meadows Wildlife Centre site structure.
Model answer
A7
Explain why the main navigation bar should link to the level 1 pages rather than every page in the website.
Model answer
A8
Fill the gap: the Higher rule for site structure is a home page plus ___ additional levels.
A9
A bakery site has Home, then Menu, About and Contact as level 1 pages. The "Wedding Cakes" page is only reachable by typing its exact web address - no page on the site links to it. What is the problem?
Every page still needs a clear route from the rest of the site.
Correct. A page with no link to it is an orphan page.
There are still only three level 1 pages listed.
Depth is not the issue here - reachability is.
Task Set B - Extension
Task Set B - Extension
Use the extra time in this double period for design practice.
B1
Design a multi-level site structure for a small restaurant website. It needs pages for menu sections, table bookings, private events, location and opening times.
One possible answer
B2
A large visitor attraction wants individual pages for 15 different animal species. Explain how "Animals" could stay as one level 1 page, with four level 2 category pages, while still giving each species its own page without breaking the four-pages-per-level rule.
One possible answer
B3
Two designers structure the same site differently. Designer A groups pages by user type (Visitors, Teachers, Volunteers). Designer B groups pages by content type (Information, Events, Forms). Explain one advantage of each approach for the wildlife centre scenario.
One possible answer
File this in OneNote under: Higher Computing Science > Web Design & Development > WDD2
Teacher notes - Shift+T to toggle
Suggested timing: 6 min warm up, 12 min notes, 15 min worked examples, 10 min now-you-try, 15 min Task Set A. Use the remaining double-period time for Task Set B or pupils redrawing site maps by hand.
Scope control: this lesson is site hierarchy only. Do not teach wireframe layout yet; that is WDD3.
Key misconception: pupils often put every page into the main navigation bar. Keep returning to the idea that the nav bar should expose the main sections, not every detail page.