《制作支持键盘浏览的照片展》是一门实践项目课程，适合已掌握 HTML、CSS 和 JavaScript 基础、希望将这些知识组合成完整浏览体验的学习者。你将制作一个本地照片展，让缩略图、大图、标题和说明在浏览过程中始终正确对应。
引导实验会逐步完成图库布局和详细查看器。独立挑战要求你将相同技术应用到另一场照片展，其中包含标题相同、标题较长和宽高比例不同的照片。每个实验都有独立准备的初始文件。
你将学到什么
完成本课程后，你将能够：
- 通过稳定的照片 ID 关联正确的缩略图、大图、替代文字和图注；
- 使用有意义的 HTML 和可见的键盘焦点构建响应式图库；
- 使用原生
dialog元素展示照片，并在切换时同步更新图片、标题和说明； - 明确呈现第一张和最后一张的导航边界，使用
Esc关闭查看器，并将焦点返回打开它的卡片； - 在图片加载失败时显示易懂的信息，不悄悄替换成另一张照片，并修复错误的文件路径。
本课程适合谁
本课程适合准备将单项 Web 练习组合成可用照片展的学习者。
前置要求： 熟悉 HTML 元素、基本 CSS 布局，以及 JavaScript 对象、函数、DOM 操作和事件。你应能打开和保存项目文件。引导实验会讲解图库所需的语义元素、原生对话框行为和焦点处理。不需要 React 知识。
学习环境： LabEx 提供准备好的 WebIDE、Terminal 和 Gallery 入口及本地图片。你将在 WebIDE 中阅读现有的 HTML、CSS 和 JavaScript，预测其行为，并保存局部修改；在 Gallery 中观察真实网站并测试键盘操作。图库的界面标签保留英文。
常见问题
我需要编写图库代码吗？
需要。你将在准备好的项目中完成布局和浏览器交互，然后使用鼠标和键盘实际浏览制作出的图库。
我需要上传照片或安装框架吗？
不需要。本地图片素材和学习环境均已准备好。项目使用 HTML、CSS 和浏览器 JavaScript，无需 React 或图片上传服务。
完成课程就能取得无障碍认证吗？
不能。你将练习具体的图片、键盘和焦点行为。完整的无障碍评估涉及本课程练习之外的更多内容。
