I den sidste screencast fik vi det foto fra iStockPhoto af den snedækkede hytte og skoven. Vi faldt det i baggrunden bag hovedindholdsområdet og sidepanelet i vores Photoshop-dokument, og det passede pænt deroppe, i form af stilen med overskrifterne på de andre områder af webstedet. Mellem screencasts skrev jeg også en kopi op til siden. Jeg ville gerne have screencastet det, men at skrive kopi er en af de ting, der bare tager lang tid og er endnu mere finicky end design tweaking er. Vi taler dog lidt om det.
I Photoshop "skjulte" jeg teksten "The Lodge" bag træerne med lidt zoomet ind i billedmaskering. Jeg gjorde ikke et super detaljeret job med det, men det behøver du ikke rigtig, når du zoomer ind, og billedet skal også nedskaleres på nettet.
Vi laver en unik sideskabelon kun til denne side (page-lodge.php). Ved hjælp af PHP-kommentarkonventionen /* Template Name: The Lodge */vises denne skabelon på rullemenuen Sideskabelon, når du opretter en ny side i WordPress. Dette giver os al den kontrol, vi har brug for. Vi kan redigere HTML i denne skabelon, og hvis vi har brug for unik CSS til denne side, kan vi bruge betinget logik og linke den i header.php-filen. Set i bakspejlet giver det mere mening at bruge functions.php-filen til at linke unik CSS for at holde “view” (header.php) renere, men det er noget til næste gang.
Baggrundsgrafikken til denne overskrift kaldes en “Hero Graphic” - det vil sige en stor (bogstaveligt og størrelsesmæssig) grafik, der er vigtig for sidens udseende / følelse / indhold. Da vi forsøger at være ansvarlige for ydeevnen (vi ønsker, at webstedet skal indlæses hurtigt), bør vi virkelig ikke betjene denne gigantiske grafik til små skærme. Dette er meget lettere i CSS end i HTML. Vi bruger vores "reverso" medieforespørgsler (i min-widthstedet for max-width) for at sige "når skærmen er så bred eller bredere, brug denne grafik ... når den er endnu bredere, brug denne grafik" og så videre. På den måde bruges som standard kun det mindste billede, men det tilsidesættes, når en bredere browser anmoder om siden. Lidt mobil-første tænkning der.
I slutningen har vi et dejligt lærred (hvis du vil) til at arbejde på for alle The Lodge-sider.