В последнем скринкасте мы позаимствовали это фото заснеженной хижины и леса с iStockPhoto. Мы разместили его на заднем плане, за областью основного содержимого и боковой панелью нашего документа Photoshop, и он отлично вписался в него, как стиль заголовков других областей сайта. Между скринкастами я также написал копию для страницы. Я бы хотел сделать скринкаст, но написание текста - это одна из тех вещей, которые требуют много времени и даже более привередливы, чем настройка дизайна. Хотя мы немного поговорим об этом.
В Photoshop я «спрятал» текст «The Lodge» за деревьями с немного увеличенной маской изображения. Я не делал сверхдетальной работы над этим, но вам действительно не нужно, когда вы увеличены, и изображение также будет уменьшено в Интернете.
Мы делаем уникальный шаблон страницы именно для этой страницы (page-lodge.php). Используя соглашение о комментариях PHP, /* Template Name: The Lodge */этот шаблон отображается на нашей раскрывающейся странице шаблона страницы при создании новой страницы в WordPress. Это дает нам весь необходимый контроль. Мы можем редактировать HTML в этом шаблоне, и если нам нужен уникальный CSS для этой страницы, мы можем использовать условную логику и связать ее в файле header.php. Оглядываясь назад, можно сказать, что имеет смысл использовать файл functions.php для связывания уникального CSS, чтобы сохранить «представление» (header.php) более чистым, но об этом в следующий раз.
Фоновый рисунок для этого заголовка будет называться «Рисунок героя», то есть большой (буквально и по размеру) рисунок, который важен для внешнего вида / ощущения / содержания страницы. Поскольку мы стараемся нести ответственность за производительность (мы хотим, чтобы сайт загружался быстро), нам действительно не следует выводить эту гигантскую графику на крошечные экраны. В CSS это намного проще, чем в HTML. Мы используем наши медиа-запросы «reverso» ( min-widthвместо max-width), чтобы сказать «когда экран такой широкий или шире, используйте эту графику… когда он еще шире, используйте эту графику» и так далее. Таким образом, по умолчанию используется только самое маленькое изображение, но оно отменяется, когда более широкий браузер запрашивает страницу. Немного мышления, ориентированного на мобильные устройства.
К концу у нас есть хороший холст (если хотите) для работы над всеми страницами The Lodge.