Building a website project
AdvancedMulti-page sites: map first (index/about/gallery), folders css/ and images/; every page shares one nav, links and images by relative path. Accessibility checks alt, heading levels, contrast; SEO wants a unique title plus meta description per page.
- Map the site first: which pages, how linked; index.html is the conventional home.
- Sort files into folders: css/ for styles, images/ for pictures — growth never turns messy.
- Every page shares one nav and one CSS — consistency is professionalism.
文體小知識：專案指南課由企劃到評估逐步帶你完成整個製作，適合接著做小組功課和比賽作品。
§Text Passage
1A real site is more than one page. Before building, draw the site map: home index.html, about about.html, gallery gallery.html — index.html is the conventional front door that browsers open automatically. Keep order with folders: css/ for stylesheets, images/ for pictures, so a growing site never turns messy.
2A multi-page site lives on its navigation: every page's ＜nav＞ holds the same set of links so visitors can go anywhere from anywhere. Links use relative paths: on the same level write ＜a href="about.html">, and images write ＜img src="images/p1.jpg"> — one mistyped letter and the image turns into a broken icon. Sharing one css/style.css across pages gives the site a single look.
3Image-plus-text has a ready pairing: ＜figure＞ wraps the ＜img＞ and ＜figcaption＞ gives it a caption — picture and caption never part. Consistent header and footer make the site look professional, and the chief content sitting inside ＜main＞ keeps the structure readable at a glance.
4Before finishing, run two checks. Accessibility: every image has alt, headings step down h1 to h2 without skipping, and text contrasts strongly with its background — only then can screen readers read the page through. Basic SEO: each page gets its own clear ＜title＞, a ＜meta name="description" content="one-line summary">, and headings using the words people search — only then will search engines show your page to someone searching 'campus plants'.
1Summary 重點摘要
Multi-page sites: map first (index/about/gallery), folders css/ and images/; every page shares one nav, links and images by relative path. Accessibility checks alt, heading levels, contrast; SEO wants a unique title plus meta description per page.
2Vocabulary cards Vocabulary
The page list and link plan drawn before building — which pages exist and how they connect.
The site's default front door, loaded automatically when a visitor opens the folder.
The link menu present on every page (usually inside nav), letting visitors reach any page.
A path measured from the current file, e.g. about.html on the same level, images/p1.jpg in a subfolder.
figure wraps the image and figcaption carries its caption, keeping picture and description together.
The shared header, nav, footer and styles across pages, making the site look professional and unified.
Design usable by everyone including blind users: alt text, ordered headings, strong colour contrast.
Practices helping search engines understand and recommend a page: clear titles, meta description, keywords.
A one-line summary in head, often shown directly in search results.
3Step by step Steps
- Draw the site mapA real site spans more than one page, so draw the site map before building: one file per page, one sentence of purpose each. A three-page plan: index.html (home — intro and highlights), about.html (about — the class), gallery.html (photos of events). index.html is the conventional front door, opened automatically when a visitor types the address. Sketching the map on paper takes five minutes yet prevents overlapping pages and tangled links, giving the whole project a clear direction — a low-cost, high-value step.
- Build the folder structureSort files into folders: inside my-site/ keep the three HTML files, with a css/ folder holding style.css and an images/ folder holding every photo — finding files is effortless now and the site stays orderly as it grows. Path rules: a same-level file is written about.html; a subfolder file is images/sports.jpg. One mistyped letter in a path turns the image into a broken box, the beginner's commonest fault; building folders before saving files avoids most path errors.
- One shared navigation barThe soul of a multi-page site is navigation: every page's body opens with the same set of links — ＜nav＞＜a href='index.html'＞Home＜/a＞ | ＜a href='about.html'＞About＜/a＞ | ＜a href='gallery.html'＞Gallery＜/a＞＜/nav＞ — so visitors can reach any page from anywhere. Write one page, copy the nav to the rest word for word, and keep every change in sync across all pages. The current page may add class='active', coloured by CSS, telling visitors where they stand.
- One shared stylesheetEvery page's head carries ＜link rel='stylesheet' href='css/style.css'＞, three pages sharing a single stylesheet. The benefit is immediate: to change the site's theme colour, edit style.css once and all pages follow; fonts, spacing and card styles stay identical site-wide, so the site feels like one site. The counter-example — each page styling itself — means three files per change, and sooner or later one page is forgotten while the site turns into a clash of colours. A shared stylesheet is the technical basis of consistency.
- Image-plus-text layoutThe gallery page pairs images with captions using figure: ＜figure＞＜img src='images/sports.jpg' alt='4x100 relay at sports day'＞＜figcaption＞Photo 1: the relay race＜/figcaption＞＜/figure＞. figure binds picture and caption into one group that never parts; figcaption carries the caption text. Every image needs an alt that describes the picture specifically rather than just 'photo', while the caption adds context such as the event name and date. Several figures in sequence plus uniform CSS widths give a tidy layout.
- The accessibility checkBefore finishing, audit each page for accessibility: does every img have an alt? Do the headings step down h1, h2, h3 without skipping? Is the contrast between text and background strong enough — pale grey on white is too faint for low-vision readers? Do link texts speak for themselves, saying 'view the gallery' instead of 'click here'? Only when all pass can a screen reader read the page through. Accessibility is not a bonus task: it lets the site serve every reader and is a standing item in marking schemes.
- Basic SEO setupBasic search engine optimisation (SEO): every page gets a clear, unique ＜title＞ such as ＜title＞Class 3A site: campus plants project＜/title＞; the head adds ＜meta name='description' content='Class 3A's observation notes and photos of 30 campus plants'＞, the snippet shown inside search results; titles and content use the words visitors actually search, such as 'campus plants'. Search engines rely on these to understand and index the pages — only then can someone searching 'campus plants' discover the project.
4Diagrams Diagrams
5Worked example Example
Example: write the full home-page skeleton for 'Class 3A campus plants' — title, meta description, nav, h1, an intro paragraph and one captioned image.
- Skeleton and SEO: ＜!DOCTYPE html＞ ＜html＞ ＜head＞ with ＜title>Class 3A campus plants＜/title＞ ＜meta name="description" content="Class 3A's observation notes on campus plants"> ＜/head＞.
- Navigation: at the top of body, ＜nav>＜a href="index.html">Home＜/a＞ | ＜a href="gallery.html">Gallery＜/a＞＜/nav＞ — identical on every page.
- Main content: inside ＜main＞ write ＜h1>Welcome to the 3A plants site＜/h1＞ ＜p>We spent a term observing 30 campus plants.＜/p＞.
- Captioned image: ＜figure＞＜img src="images/banyan.jpg" alt="A Chinese banyan on campus">＜figcaption>Photo 1: the banyan by the playground＜/figcaption＞＜/figure＞, closing with ＜/main＞ ＜/body＞ ＜/html＞.
- Answer: The home page = SEO head (title + meta description) + shared nav + an h1 and intro inside main + a figure with caption — saved as index.html, the site's front door.
6Common mistakes Mistakes
7Quick check Quick check
Q1Which file does a browser load automatically at a site's address? A. home.html B. index.html C. main.html
Q2The page sits at the root and images live in images/ — how should src be written?
Q3How should a multi-page site treat its navigation bar?
Q4Name two accessibility checks.
Q5What does the meta description do?
8Recap Recap
- Map the site first: which pages, how linked; index.html is the conventional home.
- Sort files into folders: css/ for styles, images/ for pictures — growth never turns messy.
- Every page shares one nav and one CSS — consistency is professionalism.
- Relative paths include folders: images/p1.jpg; one wrong letter breaks the image.
- Two final checks: accessibility (alt, ordered headings, contrast) plus SEO (unique title, meta description).