Создание шаблона WordPress. Урок 2. Header.php — создание шапки и навигационного меню

Меню с красивой анимацией при раскрытии и ховером для ссылок

Скачать / Посмотреть на CodePen

(далее…)

Вёрстка таблицами. Часть-2.

Прежде чем мы продолжим наш урок, хотелось бы немного определится с целью того что мы созидаем. Понятно, что мы, учимся создавать сайт, познавая языки гипертекстовых разметок, в данном случае «HTML».  Но нам нужна некая, предопределённая цель. Для примера мы будем создавать, небольшой сайт визитку, который должен быть простым и понятным. Что должно быть именно в таком сайте, что бы легче понять я создал картинку, определяющую структуру будущего проекта.

Рисунок №1

 

 И так на рисунке №1, мы видим следующую схему, а точнее каркас нашего сайта визитки. Первым делом это идёт «Шапка сайта» (header), далее следует «Горизонтальное меню», в центре планируется две части, это «Боковая колонка» и контент (content). Завершающим, этапом станет так называемый «Подвал» (footer), или «Нижняя часть сайта». Обратите внимание, что при некоторых пояснениях, я вставляю в скобки,  название этих частей сайта, на английском языке. Это не просто фарс, это необходимо для того, что бы вы сразу запоминали, как они называются. Поскольку все языки программирования  написаны на английском, то это не просто слова, это и часть тегов, и стилевых оформлений, о которых вам предстоит ещё узнать.

Шапка страницы

Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.

Рис. 6.3. Ширина шапки

В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.

Читайте также:  Как подключить телеграмм на телефон

Рис. 6.4. Совмещение изображения по горизонтали

На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).

На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).

Рис. 6.5. Фоновая картинка для шапки

В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.

Телеграм канал с бесплатными курсами по верстке сайтов и программированию

Bez-imeni-1.jpgПЕРЕЙТИ В ТЕЛЕГРАМ =>

Скачать / Посмотреть на CodePen

(далее…)

Красивый эластичный эффект для выдвигающегося бокового меню

Скачать / Посмотреть на CodePen

(далее…)

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий