Pada screencast terakhir, kami mengambil foto itu dari iStockPhoto kabin dan hutan bersalji. Kami menjatuhkannya di latar belakang, di belakang kawasan kandungan utama dan bar sisi dokumen Photoshop kami dan ia sesuai dengan baik di sana, seperti gaya tajuk dari kawasan lain di laman web ini. Di antara screencast, saya juga menulis beberapa salinan untuk halaman tersebut. Saya ingin menayangkannya, tetapi menulis salinan adalah salah satu perkara yang memerlukan masa yang lama dan bahkan lebih rumit daripada reka bentuk. Kami sedikit membincangkannya.
Di Photoshop, saya "menyembunyikan" teks "The Lodge" di belakang pokok dengan sedikit pembayang gambar yang diperbesar. Saya tidak melakukan tugas yang sangat terperinci, tetapi anda tidak perlu melakukannya ketika anda diperbesar dan gambar akan dikecilkan di web juga.
Kami membuat templat halaman yang unik hanya untuk halaman ini (page-lodge.php). Dengan menggunakan konvensyen komen PHP /* Template Name: The Lodge */maka templat itu muncul di halaman lungsur Templat Halaman kami ketika membuat Halaman baru di WordPress. Ini memberi kita semua kawalan yang kita perlukan. Kita boleh mengedit HTML dalam templat ini, dan jika kita memerlukan CSS yang unik untuk halaman ini, kita dapat menggunakan logik bersyarat dan menghubungkannya dalam file header.php. Dalam retrospeksi, lebih masuk akal untuk menggunakan fail functions.php untuk menghubungkan CSS unik untuk memastikan "view" (header.php) lebih bersih, tetapi itu adalah sesuatu untuk lain kali.
Grafik latar untuk tajuk ini akan disebut "Hero Graphic" - iaitu, grafik besar (secara harfiah dan sesuai ukuran) yang penting untuk rupa / nuansa / kandungan halaman. Oleh kerana kami berusaha untuk bertanggungjawab dengan prestasi (kami mahu laman web memuat dengan cepat), kami semestinya tidak akan menayangkan grafik raksasa ini ke layar kecil. Ini lebih mudah dalam CSS daripada dalam HTML. Kami menggunakan pertanyaan "reverso" media kami ( min-widthbukan max-width) untuk mengatakan "ketika layar seluas ini atau lebih luas, gunakan grafik ini ... apabila lebih luas, gunakan grafik ini" dan sebagainya. Dengan cara itu secara lalai hanya gambar terkecil yang digunakan, tetapi itu akan diganti apabila penyemak imbas yang lebih luas meminta halaman. Sedikit pemikiran pertama yang mudah alih di sana.
Pada akhirnya kami mempunyai kanvas yang bagus (jika anda mahu) untuk mengusahakan semua halaman The Lodge.