WDD2 - Multi-Level Site Structure

James Gillespie's High School · Higher Computing Science 2026-27

Completed:

File in OneNote: Higher Computing Science > Web Design & Development > WDD2

Web Design & Development · Lesson 2 of 17
Web Design & Development · Design

WDD2 - Multi-level site structure

Thu 12 Nov 2026 · P3+P4 (double)
Core lesson ~50-60 minutes · extra practice time available
Learning intentions
Success criteria
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.
 

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
Visit
Animals
Schools
Support Us
each section links to detail pages
Opening Times
Mammals
Workshop Enquiry
Volunteer Roles
Prices
Birds
Visit Preparation
Fundraising
Home page + four level 1 pages + level 2 detail pages. 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
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

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

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.

File in OneNote: Higher Computing Science > Web Design & Development > WDD2 · James Gillespie's High School · Higher Computing Science 2026-27