网页专题制作
进阶多页网站：先画地图（index/about/gallery），资料夹分 css/ images/；每页同一组 nav 连结，相对路径连页和图。无障碍检查 alt、标题级数、对比；SEO 每页独有 title 加 meta description。
- 动工先画网站地图：有哪几页、怎样互连；index.html 是惯例主页。
- 资料夹分家：css/ 放样式、images/ 放图，网站大了都不乱。
- 每页同一组 nav 连结、同一份 CSS — 一致就是专业。
文体小知识：专案指南课由企划到评估逐步带你完成整个制作，适合接著做小组功课和比赛作品。
§课文原文 Passage
1真正的网站不止一页。动工前先画网站地图：主页 index.html、关于 about.html、相簿 gallery.html — index.html 是惯例的门面，访客输入网址时浏览器自动开它。档案用资料夹管理：css/ 放样式档、images/ 放图片，网站一大也不会乱。
2多页网站的灵魂是导览列（Navigation）：每一页的 ＜nav＞ 都放同一组连结，访客任何位置都可以去任何页。连结用相对路径：同一层写 ＜a href="about.html">，图片写 ＜img src="images/p1.jpg"> — 路径写错一个字母，图片就变交叉。每页共用同一份 css/style.css，网站才有统一外观。
3图文排版有现成的搭配：＜figure＞ 包住 ＜img＞，再用 ＜figcaption＞ 给图片一个说明 — 图和说明永远在一起。版面一致的 header 和 footer 令网站看起来专业；主要内容放在 ＜main＞ 内，结构一目了然。
4完成前做两项检查。无障碍（Accessibility）：所有图有 alt、标题由 h1 顺级落 h2 不跳级、文字与底色对比够强 — 视障用户的萤幕阅读器才能读得通。搜寻引擎最佳化（SEO）初步：每页 ＜title＞ 写清楚而且各页不同，加 ＜meta name="description" content="一句话简介">，标题用回应内容的关键字 — 搜寻引擎才会把你的网页推给搜「校园植物」的人。
1重点摘要 Summary
多页网站：先画地图（index/about/gallery），资料夹分 css/ images/；每页同一组 nav 连结，相对路径连页和图。无障碍检查 alt、标题级数、对比；SEO 每页独有 title 加 meta description。
2生字卡 Vocabulary
动工前画好的页面清单和连接关系，决定网站有哪几页、怎样互连。
网站的预设门面：访客打开目录时浏览器自动载入的档案。
每页都有的连结选单（通常在 nav 标签内），令访客可以到达任何一页。
以目前档案位置为基准的路径，例如同层的 about.html、子资料夹的 images/p1.jpg。
figure 包住图片，figcaption 写说明文字，令图和说明绑在一起。
各页共用的 header、nav、footer 和样式，令网站看起来专业统一。
令视障等不同需要的用户都能使用的设计：alt 说明、标题顺级、足够色彩对比。
令网页更容易被搜寻引擎理解和推荐的做法：清楚标题、meta description、关键字。
head 内的一句网页简介，搜寻结果列表常常直接显示它。
3逐步讲解 Steps
- 画网站地图真正的网站不止一页，动工之前先画网站地图：每页一个档案、一句话写明内容。例如三页方案：index.html（主页：简介与重点推介）、about.html（关于：班别介绍）、gallery.html（相簿：活动照片）。index.html 是惯例的网站门面，访客输入网址时浏览器自动开启它。地图画在纸上只需五分钟，却能防止日后页面职能重叠、连结混乱，令整个专案方向清晰，是低成本高效益的一步。
- 建立资料夹结构档案用资料夹分门别类：my-site/ 之内放三个 HTML 档，再开 css/ 资料夹放 style.css，images/ 资料夹放所有照片。日后找档案一目了然，网站扩充也不会混乱。路径书写规则：同一层直接写档名 about.html；入子资料夹写 images/sports.jpg。路径错一个字母，图片便显示为交叉方框，这是新手最常见的问题；养成「先建资料夹、再存档案」的顺序，可避免大半路径错误。
- 统一导览列多页网站的灵魂是导览列：每一页的 body 顶部都放同一组连结 ＜nav＞＜a href='index.html'＞主页＜/a＞｜＜a href='about.html'＞关于＜/a＞｜＜a href='gallery.html'＞相簿＜/a＞＜/nav＞，访客在任何一页都能去任何地方。制作时写好一页之后复制到其余各页，确保一字不差；任何一页改了连结，其余各页也要同步修改。当前页可加 class='active' 再以 CSS 标色，提示访客身在何处。
- 共用样式表每页的 head 内写 ＜link rel='stylesheet' href='css/style.css'＞，三页共用同一份 CSS。好处立现：想全站更换主色，只改 style.css 一处，三页同步更新；字体、行距、卡片样式全站一致，网站才有「同一个网站」的观感。反例是每页各写各的样式，改一次主色要改三个档案，日后必有一页被遗漏，网站渐渐变得五颜六色。共用样式表是网站一致性的技术基础。
- 图文排版相簿页的图文排版用 figure 组合：＜figure＞＜img src='images/sports.jpg' alt='陆运会4x100接力'＞＜figcaption＞图一：陆运会接力赛＜/figcaption＞＜/figure＞。figure 把图片与说明绑成一组，两者永不分离；figcaption 是图片的说明文字。每张图必须有 alt，内容具体描述图片而非只写「照片」二字；说明文字则补充背景，例如活动名称与日期。多张图逐一排列，配合 CSS 统一阔度，版面即显整齐。
- 无障碍检查完工之前逐页做无障碍检查：每个 img 是否都有 alt？标题是否由 h1 到 h2、h3 顺级而下，没有跳级？文字与背景色的对比是否足够，例如白底上的浅灰字对视障读者太浅？连结文字是否自明其义，避免「按这里」而应写「查看相簿」？全部达标，萤幕阅读器才能把整页读通。无障碍不是附加题：它令网站服务所有读者，亦是评分标准的常设项目。
- SEO 初步设定搜寻引擎最佳化（SEO）的初步设定：每页的 ＜title＞ 写清楚而且各页不同，例如 ＜title＞3A班网站：校园植物专题＜/title＞；head 内加 ＜meta name='description' content='3A班记录校园30种植物的观察笔记与照片'＞，这句简介会显示在搜寻结果之中；标题与内容使用访客会搜寻的关键字，例如「校园植物」。搜寻引擎据此理解并收录网页，别人搜寻「校园植物」时才有机会找到你的专题。
4图解 Diagrams
5例题示范 Example
例题：为「3A班校园植物网」写出主页 index.html 的完整骨架，包含 title、meta description、导览列、h1、一段简介和一张有说明的图。
- 骨架与 SEO：＜!DOCTYPE html＞ ＜html＞ ＜head＞ 之内 ＜title>3A班校园植物网＜/title＞ ＜meta name="description" content="3A班记录校园植物的观察笔记"> ＜/head＞。
- 导览列：body 开头 ＜nav>＜a href="index.html">主页＜/a＞｜＜a href="gallery.html">相簿＜/a＞＜/nav＞ — 与其他页完全一致。
- 主内容：＜main＞ 之内 ＜h1>欢迎来到3A班植物网＜/h1＞ ＜p>我们用一个学期观察了校园30种植物。＜/p＞。
- 有说明的图：＜figure＞＜img src="images/banyan.jpg" alt="校园细叶榕">＜figcaption>图一：操场旁的细叶榕＜/figcaption＞＜/figure＞，最后补 ＜/main＞ ＜/body＞ ＜/html＞。
- 答案：主页骨架 = SEO 头（title + meta description）＋ 一致导览列 ＋ main 内 h1、简介段 ＋ figure 图文 — 存为 index.html 即成网站门面。
6常见错误 Mistakes
75 题快测 Quick check
Q1访客输入网站网址时，浏览器自动载入哪个档案？A. home.html B. index.html C. main.html
Q2网页在根目录，图片放在 images/ 资料夹，img 的 src 应该怎样写？
Q3多页网站的导览列应该怎样处理？
Q4写出两项无障碍检查。
Q5meta description 的作用是什么？
8重点回顾 Recap
- 动工先画网站地图：有哪几页、怎样互连；index.html 是惯例主页。
- 资料夹分家：css/ 放样式、images/ 放图，网站大了都不乱。
- 每页同一组 nav 连结、同一份 CSS — 一致就是专业。
- 相对路径要写齐资料夹：images/p1.jpg；错一个字母图片就裂。
- 完工两查：无障碍（alt、标题顺级、对比）加 SEO（独特 title、meta description）。