Im letzten Screencast haben wir dieses Foto von iStockPhoto mit der verschneiten Hütte und dem Wald besorgt. Wir haben es in den Hintergrund gelegt, hinter den Hauptinhaltsbereich und die Seitenleiste unseres Photoshop-Dokuments, und es passte dort gut hin, im Stil der Header der anderen Bereiche der Website. Zwischen den Screencasts habe ich auch einige Texte für die Seite aufgeschrieben. Ich hätte das gerne als Screencast gemacht, aber das Schreiben von Texten ist eine dieser Dinge, die einfach lange dauern und noch kniffliger sind als Design-Tweaking. Wir sprechen aber ein wenig darüber.
In Photoshop habe ich den Text „The Lodge“ mit einer leicht vergrößerten Bildmaskierung hinter den Bäumen „versteckt“. Ich habe es nicht super detailliert gemacht, aber das muss man auch nicht wirklich, wenn man vergrößert **und** das Bild im Web sowieso verkleinert wird.
Wir erstellen eine einzigartige Seitenvorlage nur für diese Seite (page-lodge.php). Wenn wir die PHP-Kommentarkonvention /* Template Name: The Lodge */ verwenden, dann erscheint diese Vorlage in unserem Dropdown-Menü für Seitenvorlagen beim Erstellen einer neuen Seite in WordPress. Das gibt uns die volle Kontrolle, die wir brauchen. Wir können den HTML-Code in dieser Vorlage bearbeiten, und wenn wir einzigartiges CSS für diese Seite benötigen, können wir bedingte Logik verwenden und es in der Datei header.php verlinken. Rückblickend macht es mehr Sinn, die Datei functions.php zu verwenden, um einzigartiges CSS zu verlinken und die „Ansicht“ (header.php) sauberer zu halten, aber das ist etwas für das nächste Mal.
Die Hintergrundgrafik für diesen Header würde als „Hero Graphic“ bezeichnet werden – d. h. eine große (sowohl in Bezug auf die Größe als auch auf die Bedeutung) Grafik, die für das Aussehen/Gefühl/den Inhalt der Seite wichtig ist. Da wir auf die Leistung achten wollen (wir möchten, dass die Website schnell lädt), sollten wir diese riesige Grafik eigentlich nicht an kleine Bildschirme ausliefern. Dies ist in CSS viel einfacher als in HTML. Wir verwenden unsere „reversen“ Media Queries (min-width anstelle von max-width), um zu sagen: „Wenn der Bildschirm diese Breite oder breiter ist, verwende diese Grafik ... wenn er noch breiter ist, verwende diese Grafik“ und so weiter. Auf diese Weise wird standardmäßig nur das kleinste Bild verwendet, aber dies wird überschrieben, wenn ein breiterer Browser die Seite anfordert. Ein wenig Mobile-First-Denken dort.
Am Ende haben wir eine schöne Leinwand (wenn man so will) für alle Lodge-Seiten.