欢迎来到网页设计的世界！

你有没有想过你最喜欢的网站是如何构建出来的呢？无论是在社交媒体上滑动信息流，还是为专题作业搜寻资料，背后一定有人负责这些页面的设计与开发。在这个章节中，我们将学习如何从使用者（网页的浏览者）转变为创作者（网页的构建者）。

如果你还不是“科技天才”，也别担心！建立网站就像玩乐高积木或画地图一样，我们将一步一步来完成。

1. UI 与 UX：网站的“外观”与“感受”

在接触任何程序代码之前，我们必须先了解网页设计中最重要的两个部分：使用者界面 (User Interface, UI) 与 使用者体验 (User Experience, UX)。

什么是使用者界面 (UI)？

你可以把 UI 想成网站的表层，也就是所有你看得到、触碰得到的东西，包括按钮、颜色、字体和图片。
类比：如果网站是一辆汽车，UI 就是车身的颜色、方向盘的形状以及座椅的皮革质感。

什么是使用者体验 (UX)？

UX 是指使用者在浏览网站时的感受。找“首页”按钮方便吗？页面加载速度快吗？网站是用起来很困惑还是很直观？
类比：如果网站是一辆汽车，UX 就是汽车开起来顺不顺手，以及踩踏板方不方便。

重点复习：

UI = 外观（按钮、颜色、排版）。
UX = 感受（易用性、速度、逻辑）。

核心观念： 一个优秀的网站两者缺一不可！一个设计精美（UI 好）但却难以操作（UX 差）的网站，只会让使用者感到挫折并选择离开。

2. 构建要素：HTML 与 CSS

要打造网站，我们通常会使用两种主要语言。你可以把这些语言想像成网页的骨架与外衣。

HTML (超文本标记语言)

HTML 是网页的结构。它会告诉电脑哪里是标题、哪里是段落、哪里该放图片。没有 HTML，就不会有网站！

常见的 HTML 标签：
- <h1>：主要的大标题。
- <p>：一段文字。
- <img>：显示图片的标签。

CSS (层叠样式表)

CSS 是网页的样式。它会告诉 HTML 该显示什么颜色、文字应该多大、以及东西要放在屏幕的哪个位置。CSS 让“骨架”变得美观。

记忆小撇步：HTML 代表 House（房屋的墙壁与地板）。CSS 代表 Curtains（窗帘，用来装饰）。

你知道吗？ 你可以随时在任何网页上按鼠标右键，选择“查看网页源代码”，就能看到该网站的 HTML。虽然看起来可能很乱，但它其实只是一长串指令清单而已！

3. 网站规划：线框图 (Wireframes)

专业的设计师绝对不会一开始就写程序，他们会先进行规划。我们使用的工具叫做线框图 (Wireframe)。

线框图是一份简单的草图（通常只有黑白线条），用来标示网页各个元素的位置。它就像是房屋的蓝图。

为什么要画线框图？
1. 在浪费时间写程序前，先确定好排版。
2. 方便向他人展示你的想法。
3. 让你专注于易用性（按钮放在哪里），而不是纠结于颜色。

线框图绘制步骤：
1. 画一个矩形（代表屏幕）。
2. 用方框标示图片的位置（通常在方框中画一个“X”）。
3. 用线条代表文字区块。
4. 在需要让使用者点击的地方画上按钮。

核心观念： 先规划，后编码！一份好的线框图可以帮你省下事后修正错误的数小时时间。

4. 网站导览与结构

使用者如何从 A 页面跳转到 B 页面？这就是所谓的导览 (Navigation)。如果你的网站页面很多，就需要一份网站地图 (Site Map)。

网站地图是一个图表，显示页面之间是如何连接的。大多数网站使用阶层式结构：

- 首页（顶层）
- 分类页（关于我们、产品、联络方式）
- 子页面（各分类下的详细内容）

常见错误： 不要把重要信息藏得太深！使用者应该要在三次点击以内找到他们需要的信息，这通常被称为“三次点击法则”。

5. 为所有人设计（无障碍性）

在 MYP 设计课中，我们关心所有的使用者。无障碍性 (Accessibility) 的意思是确保身心障碍人士（例如色彩辨识能力较弱或操作鼠标有困难的人）也能顺利使用你的网站。

简单的无障碍设计小撇步：
- 高对比度： 不要使用浅黄色的文字搭配白色背景，这样会很难阅读！
- 字体放大： 确保字体够大，让每个人都能看清楚。
- 替代文字 (Alt-Text)： 务必为图片加上文字说明，这样屏幕阅读软件才能向视障使用者描述图片内容。

重点复习箱：

1. HTML = 结构。
2. CSS = 样式。
3. 线框图 = 规划蓝图。
4. 导览 = 使用者移动的路径。
5. 无障碍性 = 确保人人皆可使用网站。

6. 总结：网页设计流程

如果觉得信息量太大也别担心！只要记住应用在网站上的设计周期 (Design Cycle)：

1. 探究 (Inquiry)： 我的目标受众是谁？他们需要什么？
2. 发展 (Developing)： 绘制网站地图并画出线框图。
3. 创造 (Creating)： 编写 HTML 与 CSS 来建立网站。
4. 评估 (Evaluating)： 测试网站。链接有效吗？使用起来顺手吗？

最后鼓励： 你的第一个网站不完美是很正常的！即使是世界上最著名的网站，最初也只是简单的想法。只要你持续练习用 HTML 和 CSS 与电脑“沟通”，这件事会变得越来越容易。