GAC011 计算机 II：网页开发

A website should help its intended reader

一份学校交通报告可能包含详细的方法和表格。其网站可为同学提供简短概览。该页面应帮助他们找到主要结果、检查方法并获取经批准的完整报告。

这些单独的笔记增加了实用的GAC011工作。将其旁边的原始讲义保留在原处。遵循当前中心的简报要求，包括所需工具、深度和提交证据。

原始实践简报。 使用虚构的交通数据为同学构建一个可读的页面。添加导航、表格和类别筛选器。规划该页面如何支持报告和简短演讲。不收集真实反馈。本地预览仅为练习，并非公开发布。

绘制一个包含标题、引言、章节链接、发现、方法和页脚的线框图。为每个区域赋予明确的目的。访问者不应猜测按钮是改变当前页面还是打开另一份文档。使用有意义的文本（如“方法和局限性”），而不是“点击此处”。

Build a complete HTML page

字符编码 字符编码告诉浏览器如何读取文件的文本。UTF-8支持多种书写系统。视口设置有助于移动浏览器使用设备宽度。描述性标题有助于人们在标签中识别该页面。

将以下完整示例保存为transport.html。在浏览器中打开该文件。它无需库、账户或网络请求即可运行。内置样式块使此第一个练习保持在一个文件中。后续项目可将这些样式移至单独的CSS文件并在head中链接它。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>School transport: practice report</title>
<style>
:root { --page: #ffffff; --text: #172033; --line: #637083; --link: #164db2; }
body.dark { --page: #080d17; --text: #e9eef7; --line: #8392a8; --link: #a8d2ff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--text); font: 1.1rem/1.6 sans-serif; }
header, main, footer { max-width: 48rem; margin: auto; padding: 1rem; }
a { color: var(--link); }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
section { margin-block: 2rem; padding-block: 1rem; border-top: 1px solid var(--line); }
button, select { font: inherit; padding: .4rem; background: var(--page); color: var(--text); border: 1px solid var(--line); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; margin-block: .5rem; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--line); }
[hidden] { display: none !important; }
</style>
</head>
<body>
<header>
<h1>School transport</h1>
<p>An original practice example. All counts are invented.</p>
<nav aria-label="Report sections">
<a href="#findings">Findings</a>
<a href="#method">Method and limits</a>
</nav>
<div id="controls" hidden>
<button id="theme" type="button">Use dark theme</button>
<label for="mode">Show transport category</label>
<select id="mode">
<option value="all">All categories</option>
<option value="walk">Walking</option>
<option value="bus">Bus</option>
<option value="cycle">Cycling</option>
</select>
</div>
</header>
<main>
<section id="findings" aria-labelledby="findings-title">
<h2 id="findings-title">Findings</h2>
<p>In this invented group of 36 responses, bus travel has the largest count.</p>
<table>
<caption>Practice counts, not research findings</caption>
<thead><tr><th scope="col">Main mode</th><th scope="col">Responses</th></tr></thead>
<tbody>
<tr data-mode="walk"><th scope="row">Walking</th><td>12</td></tr>
<tr data-mode="bus"><th scope="row">Bus</th><td>18</td></tr>
<tr data-mode="cycle"><th scope="row">Cycling</th><td>6</td></tr>
</tbody>
</table>
<p id="status" role="status">3 transport categories shown.</p>
</section>
<section id="method" aria-labelledby="method-title">
<h2 id="method-title">Method and limits</h2>
<p>Each invented response has one main mode. The counts sum to 36.</p>
<p>The table does not explain choices, travel distance or the whole school's habits.</p>
<p>This page is a short companion to a report and oral presentation. An actual project should link its approved report and sources here.</p>
</section>
</main>
<footer><p>GAC011 practice: no responses are collected or sent.</p></footer>
<script>
const controls = document.querySelector("#controls");
const mode = document.querySelector("#mode");
const rows = [...document.querySelectorAll("tbody tr")];
const status = document.querySelector("#status");
const theme = document.querySelector("#theme");
mode.addEventListener("change", () => {
  let shown = 0;
  rows.forEach(row => {
    row.hidden = mode.value !== "all" && row.dataset.mode !== mode.value;
    if (!row.hidden) shown += 1;
  });
  status.textContent = `${shown} transport ${shown === 1 ? "category" : "categories"} shown.`;
});
theme.addEventListener("click", () => {
  const dark = document.body.classList.toggle("dark");
  theme.textContent = dark ? "Use light theme" : "Use dark theme";
});
controls.hidden = false;
</script>
</body>
</html>

HTML提供了JavaScript运行前的可读内容。href="#method"链接指向具有id="method"的元素。ID在页面上必须唯一。错误的ID会破坏该链接，即使标签看起来正确。

表格的标题说明了数字的含义。列和行标题描述了单元格。虚构的值为12、18和6，给出了36个响应。公交车的数量最大。这些数量并不能告诉我们人们选择某种交通方式的原因。

Explain and adapt the CSS

一个CSS自定义属性 自定义属性存储可重用的值，例如颜色。示例使用了共享的页面、文本、边框和链接颜色。深色类同时更改这些值。在深色模式下，文本区域和控制使用相同的页面颜色。边框和间距用于分隔各部分。

通用box-sizing规则使指定尺寸包含内边距和边框。阅读区域随窗口增大，但在48rem处停止。当空间受限时，导航可以换行。灵活的宽度通常可以在不使用媒体查询的情况下解决第一个布局问题。

:focus-visible轮廓帮助键盘用户找到当前控件。不要因为可见就移除它。链接保留下划线。表格标题和足够的对比度有助于读者理解数据。实际图像需要与其用途相适应的文本：有意义的信息需要有用的描述；纯装饰性图像可以使用空的alt文本。

适配。 更改页面标题和引言以适用于另一个经批准的学术主题。保持清晰的标题顺序。尝试窄窗口和放大文本。如果稍后添加两列，决定它们应该在哪里堆叠并测试合适的媒体查询。不要添加固定宽度导致手机横向滚动。

Trace the JavaScript interaction

一个事件监听器 事件监听器在其事件发生时运行代码。示例监听选中的更改。mode.value给出选中值。每一行的data-mode属性在JavaScript中变为row.dataset.mode。

当选择了特定类别且该行不匹配时，该行被隐藏。选择all会使所有行可见。计数器在每个更改开始时从零开始。它每显示一个类别增加一次，而不是每个响应增加一次。因此选择公交车显示一个类别，而不是十八个类别。

追踪。 选择公交车。步行和骑行变得隐藏。公交车保持可见，状态显示“显示1个交通类别”。选择所有类别。隐藏条件对所有行为假，因此状态恢复到三个类别。

主题按钮添加或删除深色类。其标签描述下一个操作。更新textContent会更改文本；不会将该文本视为HTML。状态区域可以向辅助软件宣布更改后的计数。使用中心提供的工具检查实际行为。

渐进增强 渐进增强意味着在有额外功能之前，有用的基本内容即可工作。示例直到附加了它们的监听器才显示交互控件。没有JavaScript，完整的表格、方法和章节链接仍然有效。筛选器更改视图，而不改变底层计数或研究限制。

Check, publish and maintain the site

在任何授权发布之前，记录实用检查的结果。打开每个链接，使用键盘，放大文本并尝试手机大小的布局。检查两种主题以及第二个浏览器或设备。验证如果可选脚本不可用，完整内容是否仍然有效。阅读错误而不是隐藏它们。

相对路径 相对路径指从另一个位置描述的文件位置。对于作为report.pdf保存在你页面旁边的一份经批准报告，HTML链接可以使用href="report.pdf"。使用有意义的标签并标识PDF。仅在拥有实际报告时才添加它；不要留下损坏的示例链接。检查主机上的文件名及大小写。

一个静态网站 静态网站可以托管已存储的HTML、CSS、脚本和图片。浏览器仍可以运行交互式JavaScript。域名 域名是人们使用的地址；托管服务提供传输文件的服务。仅有一个域名并不会上传你的网站。

使用您所在中心的批准发布流程。检查媒体许可，并删除私人草稿或参与者信息。一起上传所需文件。打开实际的公共URL，并在该处验证路径、显示效果和控件。本地预览成功并不代表正式发布成功。

保留可编辑的源文件和已知可用的副本。修订时，请检查更改及其受影响的链接。记录版本和日期。仅修正本地文件并不会更新托管副本，直到经批准的发布流程将其交付为止。

Connect the website to academic work and promotion

网站应补充您的报告和演讲。其概览应提供明确的问题、一个有用的结果以及研究的局限性。完整报告包含详细的证据和参考文献。演讲中的幻灯片可以展示页面地址或已批准的二维码。请检查链接是否指向预期的版本。不要声称实践计数是真实的研究发现。

对于推广，首先定义受众和目标。例如：在项目周期间帮助同学找到已批准的报告。规划一条符合规定的帖子，包含简短准确的描述、有意义的链接文本和指定负责人。遵守中心规则和平台要求。规划帖子并不等同于实际进行了推广。

展示次数 展示次数 count 在平台定义下显示。曝光量通常指平台定义下的独立账户数。两者均不代表阅读报告的实际人数。点击率 点击率 needs a stated numerator and denominator。

虚构示例。 帖子A获得400次展示和20次链接点击。帖子B获得250次展示和25次链接点击。使用链接点击除以展示次数计算，A的值为$20/400=5\%$，B的值为$25/250=10\%$。尽管B的展示次数较少，但其链接点击数更多。

这些数字不能证明B的文案导致了差异。发布时间、受众和重复点击可能不同。链接点击也不能证明报告已加载或被阅读。请选择一项更改，记录其上下文，并比较与目标相符的指标。将不必要的个人追踪排除在任务之外。

Practice and explained answers

问题。 1。方法（Method）链接指向哪个元素？2。筛选器对“骑行”（Cycling）应显示什么内容？3。筛选是否改变了原始总数36？4。不使用JavaScript时，哪些内容仍然可用？5。为什么仅购买域名不足以启动项目？6。帖子C有600次展示和24次链接点击。求其比率。7。B较高的比率是否证明其文案更好？8。列举完成网站任务的证据。

解释答案。 1。ID为method的元素；片段和ID必须匹配。2。仅显示“骑行”的行，包含六条响应和一个类别。3。否；它改变可见行，而非原始数据集。4。文本、完整表格、方法和章节链接；可选控件保持隐藏。5。文件仍需经批准的托管和交付，然后在实际URL处进行检查。6。$24/600=4\%$。7。否；其他差异和测量限制仍然存在。8。展示您的计划、来源、工作页面、检查及所需的发布、学术和推广证据。