Шаблон своими руками. Часть 5...

2358
Несмотря на то, что с самого начала я пытался действовать по правилам и перед переходом к оформлению заниматься исключительно логикой, у меня это не совсем получилось. Продолжать дальше без виденья всей картины целиком не представляется никакой возможности. Причина этому очень проста - у каждого отдельно взятого шаблона могут быть какие-то свои особенности и совершенно очевидно, что для того, чтоб избежать двойной работы по добавлению необходимых элементов, классов и т.д. было бы весьма неплохо эти особенности учитывать с самого начала, поэтому дальше я пойду несколько иным путем.

Как я уже писал в самой первой части, верстать цветные квадратики не интересно, поэтому специально для данного блога я понадергал из сети исходников и нарисовал вот такую незамысловатую картинку, на основе которой собственно и происходит все, что мы делаем:

""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

Полноценным дизайном это, конечно же, назвать трудно, поэтому если найдется человек, умеющий рисовать и желающий что-то дополнить или исправить, то я буду только за. А пока что имеем то, что имеем и поскольку я не в состоянии описывать все и сразу, то чтобы облегчить себе задачу давайте я просто буду идти сверху вниз, разбирая все тонкости уже по ходу дела.

Итак, первой у нас идет шапка, в которой судя по схеме, расположено всего три блока:

""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

Причем logo и mainMenu должны находиться внутри панели, которая растягивается на всю доступную ширину, а меню при необходимости частично наползает на логотип:

""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

Что касается позиции header, то в нее в качестве примера мы впоследствии вставим какой-нибудь слайдер. Сейчас же с точки зрения верстальщика ничего особенного в ней нет и соответственно описывать тут пока что нечего, поэтому открываем файл template.php и все о чем сказано выше прописываем уже в виде html:

Скрытый текст виден только зарегистрированным пользователям


На этом html часть завершена, но поскольку мы добавили какой-то участок кода, то не помешало бы открыть сайт в браузере и проверить, не допустили ли мы каких-нибудь ошибок и все ли работает правильно. А заодно хороший повод, чтобы вспомнить про валидаторы, о которых я писал во второй части... Надеюсь с этим вы справитесь самостоятельно.

Теперь, например с помощью Firebug, давайте посмотрим, как отрабатывает условие. Зайдите в админку и попробуйте отключить модуль, выводящийся в позицию header. Если все правильно, то эта позиция (включая контейнер для нее) не выведется вообще:

""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

Ну и раз уж так получилось, то следующим шагом пропишем нашей шапке стили. Только сначала давайте определимся хотя бы с парочкой базовых параметров.

Вспоминаем, что изначально весь шаблон условно был разбит на 4 части:


Судя по дизайну, светлый фон имеет только mainBody, остальные части практически черные, а значит логичнее при выборе базового цвета для шрифтов и фона отталкиваться именно от них, не придется писать одно и то же три раза. Это понятно? Тогда открываем style.css и первым делом удалим уже не нужную строку, которую в прошлый раз мы писали в качестве временной меры:

Код CSS:
  1. #topPanel,#topPanel a{color:#fff}
Вторая строка, где задается внутренний отступ, пусть пока остается, а нам нужно переместиться к разделу Typography, где для тэга body укажем соответствующий макету цвет фона и определим шрифт:

Скрытый текст виден только зарегистрированным пользователям


Тут же определим стили для ссылок:

Скрытый текст виден только зарегистрированным пользователям


И корректируем цвета для всего, что находится в сегменте mainBody:

Скрытый текст виден только зарегистрированным пользователям


Все то же самое, только в более компактном виде выглядит вот так:

Скрытый текст виден только зарегистрированным пользователям


Выбирайте тот вид записи, который вам удобнее и понятней, главное не забывайте удалять лишние комментарии. Иначе к концу создания шаблона размер вашего style.css будет соизмерим с энциклопедией по выращиванию енотов :).

Как бы там ни было, а базовых стилей для начала достаточно, переходим непосредственно к стилям шапки. Сейчас главное не увлекаться и не забывать, что в данном случае мы всего лишь расставляем все составные части на свои места. Все, что касается непосредственно стилей модулей будет располагаться в соответствующем разделе.

Итак, к вопросу оптимизации, в частности к спрайтам я еще вернусь, а пока что забираем картинки, относящиеся к шапке и кидаем их в папку img шаблона. После чего в разделе Layout, после стилей для topPanel добавляем правила для шапки:

Скрытый текст виден только зарегистрированным пользователям


Соответственно в стиле, в котором привык писать я, это выглядит вот так:

Скрытый текст виден только зарегистрированным пользователям


На этом шапка в первом приближении закончена. Кое-какие мелочи доделаем в следующий раз. Если вы окончательно запутались в форматировании кода, обращайтесь. Я вышлю вам свои файлы для синхронизации.
Шаблон своими руками. Часть 4... | Шаблон своими руками. Часть 6...
Комментарии (8)
AlLar 15 ноября 2012 в 16:38 +3
Я пошёл эксперементировать...+
Роман 15 ноября 2012 в 21:16 +5
Pasha, молодец. Большую работу проделали!
Не забываем ставить + в карму!
Andrey37 15 ноября 2012 в 22:01 +3
Я тоже исходников наковырял :). Попробую, чтобы лучше понять, а не просто копировать, что то параллельно для себя делать.
Andrey37 15 ноября 2012 в 22:15 +4
Pasha,я даже готов для стимуляции Вашей работы небольшую лепту внести. Вот только куда? :)
Pasha 16 ноября 2012 в 02:45 +4
Я все это делаю не для наживы, а от чистого сердца. Если ваше желание так же бескорыстно, то вот:
R165866979435
Z360916051050
Andrey37 16 ноября 2012 в 08:20 +3
А для наживы я бы и не дал :). Просто в самом деле очень помогает. Я кучу всего пересмотрел, но всего чего я добился это минимальные изменения стандартного шаблона. А это просто ощутимое спасибо :)
Atid 16 ноября 2012 в 01:33 0
Pasha:
/* согласно макету, фон главного меню должен доходить до конца экрана, то есть выйти за пределы враппера. Чтобы этого добиться, внешний отступ устанавливаем в -ххх, а внутренним возвращаем на ххх назад. */
Я чуть ка не понял этот момент, объясните пожалуйста
Pasha 16 ноября 2012 в 02:48 0
Надеюсь вот так будет понятней:

""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.


Если нет, то попробую еще как-нибудь обьяснить...........