欢迎来到网站创作：网页开发的三个层面！
各位 IGCSE 的同学们好！网站创作听起来可能很复杂，但其实构建网站就像做任何事情一样——你需要一个计划、一个框架，还需要精美的装饰！
本章将网站拆解为三个简单的部分，即层面 (layers)。理解这些层面是掌握现代专业网页如何构建与维护的关键。
如果一开始觉得这些概念有些棘手也不用担心；我们将用一个绝妙的类比让一切变得清晰易懂！
理解层面：蛋糕类比法
想象一下你正在制作一个宏大的生日蛋糕。网页开发的三个层面就像你制作蛋糕的三个步骤：
- 第一层（蛋糕本体）：这是基础的蛋糕胚和内馅。它提供了结构。没有它，一切都无从谈起。
- 第二层（糖霜与装饰）：这决定了外观——颜色、花朵的形状以及精致的文字装饰。
- 第三层（小机关）：想象这是一个当你切开时会播放音乐的“惊喜”蛋糕。这就是交互性，即蛋糕执行的*动作*。
网站也是以同样的方式构建的：内容 (Content)、表现 (Presentation) 和 行为 (Behaviour)。
第一层：内容层（结构决定一切）
内容层是任何网页的基础。它负责承载原始信息并定义这些信息的逻辑结构。
目的与功能
内容层的主要职责是：
1. 录入内容（文本、图像、链接），即用户最终看到的信息。
2. 构建网页结构，告知浏览器哪些部分是标题，哪些是段落，以及表格或列表应该放在哪里。
内容层主要使用的语言是 HTML (超文本标记语言)。
HTML 如何构建结构
HTML 使用*标签 (tags)* 来标记内容，赋予其含义。可以把它想象成给盒子贴标签：
- *<h1>*：这个标签告诉浏览器，“这是最重要的标题。”
- *<p>*：这个标签告诉浏览器，“这是一个标准的文本段落。”
- *<table>*：这个标签定义了结构化数据（行和列）的放置位置。
你知道吗？HTML 本身非常朴素。如果你只用内容层查看网页，它只会是白底黑字，顺着屏幕垂直排列！
快速复习：内容层
- 核心角色：结构与原始数据。
- 核心工具：HTML。
- 类比：蛋糕的配料与形状。
第二层：表现层（让网页更美观）
如果说内容层提供了结构，那么表现层就提供了风格。这一层处理所有与内容在用户眼中*看起来如何*相关的事宜。
目的与功能
表现层的主要职责是：
1. 展示和格式化网页中的元素。
2. 控制布局、颜色、字体、间距和位置。
表现层主要使用的语言是 CSS (层叠样式表)。
关注点分离
现代网页开发的一个核心理念是将内容 (HTML) 与表现 (CSS) 分离开来。
为什么这很重要？
- 一致性：你可以使用一个 CSS 文件来格式化*数百个* HTML 页面，确保整个网站拥有统一的观感（类似于企业标准风格 (corporate house style)）。
- 易于维护：如果你的老板决定将企业品牌色从蓝色改为绿色，你只需编辑*一个* CSS 文件，而无需修改每一个单独的 HTML 页面。
- 可访问性：它允许内容轻松地为不同设备（如智能手机）进行重构或缩放，而无需改变底层的 HTML 结构。
记忆小贴士：把 CSS 中的 C 理解为 Colour（颜色）和 Cool（酷炫的）设计！
快速复习：表现层
- 核心角色：格式化、外观和布局。
- 核心工具：CSS。
- 类比：蛋糕上的糖霜、颜色和装饰。
第三层：行为层（添加动作与控制）
前两个层面为你提供了一个结构合理、外观精美的静态页面。而行为层通过添加交互性，让页面“活”了起来。
目的与功能
行为层的主要职责是：
1. 使用脚本语言控制网页中的元素。
2. 处理事件并使页面具备动态效果（意味着页面可以在不重新加载的情况下发生变化）。
行为层最常用的语言是 *JavaScript*（尽管教学大纲通常将其泛指为“脚本语言”）。
“控制元素”意味着什么？
控制元素涉及根据用户输入或时间执行动作。例如：
- 在提交表单前检查用户是否填写正确（表单验证）。
- 当鼠标悬停在图像上时，使图像发生变化。
- 显示弹出消息或提醒。
- 在添加商品时，动态计算在线购物篮的价格。
- 显示轮播横幅或幻灯片。
如果一个网站需要*做*些什么——在加载*之后*进行反应、计算、验证或更改内容，这就是行为层的任务。
IGCSE 重要提示：虽然我们知道 JavaScript 是常用的脚本语言，但你只需要理解该层面的*功能*即可：它使用脚本语言来控制元素并提供动态的行为。在考试中，你不需要编写复杂的脚本。
快速复习：行为层
- 核心角色：交互性、动态内容与控制。
- 核心工具：脚本语言（如 JavaScript）。
- 类比：让蛋糕播放音乐或吹灭蜡烛的机械装置。
总结：整合各层面
网页开发的三个层面和谐协作，共同构成了一个完整的网站。它们虽然各自独立，但又完全互为依存。
快速检查表
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
层面 | 主要角色 | 使用的语言
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
内容 (Content) | 结构与原始信息 | HTML
表现 (Presentation) | 展示、格式化与风格 | CSS
行为 (Behaviour) | 控制与交互性 | 脚本语言 (例如 JavaScript)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
通过分离这些关注点，我们确保了网站在当今人们使用的各种不同设备上都具备高效、易维护和灵活的特性。
做得好！你现在已经掌握了构成你所访问的每一个网站的基本组件了。