在上次的视频中，我们从 iStockPhoto 上获取了雪屋和森林的照片。我们将它放在背景中，位于我们 Photoshop 文档的主要内容区域和侧边栏的后面，它很适合放在那里，与网站其他区域的标题风格类似。在视频之间，我还为页面编写了一些文字内容。我本来想录制这段内容，但写作是那些需要很长时间才能完成的事情，而且比设计调整还要更麻烦。我们确实会稍微聊聊它。
在 Photoshop 中，我通过稍微放大的图像蒙版将“小屋”文字隐藏在树木后面。我没有做得非常详细，但是当你放大 **并且** 图像在网页上也会缩小时，你实际上并不需要做得那么详细。
我们为这个页面专门创建了一个唯一的页面模板 (page-lodge.php)。使用 PHP 注释约定 /* Template Name: The Lodge */ 那么这个模板就会在 WordPress 创建新页面时出现在我们的页面模板下拉列表中。这让我们拥有了所有必要的控制权。我们可以编辑此模板中的 HTML，如果我们需要为这个页面提供唯一的 CSS，我们可以在 header.php 文件中使用条件逻辑并将其链接起来。回想起来，使用 functions.php 文件来链接唯一的 CSS 更合理，可以使“视图” (header.php) 更简洁，但那是下次要做的内容。
这个标题的背景图形将被称为“英雄图形”——也就是说，一个对页面的外观/感觉/内容很重要的图形（无论是字面意义还是大小）。由于我们正在努力提高性能（我们希望网站加载速度很快），所以我们不应该将这个巨大的图形提供给小型屏幕。这在 CSS 中比在 HTML 中容易得多。我们使用“反向”媒体查询 (min-width 而不是 max-width) 来指定“当屏幕宽度为或大于此宽度时，使用此图形…当它更宽时，使用此图形”，以此类推。这样一来，默认情况下只会使用最小的图像，但当更宽的浏览器请求页面时，它就会被覆盖。这是一种移动优先的思路。
最终，我们拥有了一个很好的画布（如果可以这么说）来处理所有小屋页面。