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

Ну что же, раз по предыдущим постам вопросов не имеется, то перехожу к следующему этапу и для начала сделаю две вещи. Чтобы потом не удивляться удалю из style.css оставшуюся там запись #topPanel .module{padding:25px}, которая когда-то служила временной мерой для более-менее корректного отображения меню пользователя и отключу модуль, находящийся в позиции title, он понадобиться еще не скоро. На этом экспресс подготовка закончена, можно запустить сайт в браузере и первое, что бросается в глаза, это футер, который находится чуть ли не посередине экрана и смотрится совсем не эстетично.

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



Естественно в файл include.js такую колбасу ложить не нужно, поэтому все то же самое, только в более компактном виде:



Все. Осталось обновить окно браузера и убедиться, что мы получили именно то, что хотели....

Следующий вопрос касается используемой для создания шаблона графики. На данный момент в папке img шаблона лежит какое-то количество в общем-то однотипных рисунков, предназначенных для заливки элементов с заданной высотой, которые прямо таки просятся чтобы их объединили в спрайт. Я имею ввиду такие файлы как navBar.png, titleBar.png и т.д. В принципе весь этот процесс я хотел оставить на потом, но решил, что делать двойную работу дело неблагодарное, так что давайте откроем фотошоп или что там у вас установлено и сразу соберем все это дело в кучу. Если быть точнее, то давайте объединим вот эти файлы:



Конечно же расположение их в данном случае не имеет никакого значения, но чтобы не было разногласий лучше все таки это сделать именно в том порядке в котором я их перечислил. Впрочем, для профилактики давайте в этот же спрайт добавим и topPanelBg.png, только в этом случае порядок уже имеет значение, так как нужно учитывать тот факт, что этот рисунок предназначен для заливки блока, не имеющего постоянной высоты. То есть если сейчас заглянуть в style.css, то вы увидите, что он выравнивается по нижнему краю и просто становится видимым при увеличении высоты контейнера #topPanel. Таким образом для того чтобы этот фон, но уже в составе спрайта мы могли каким то образом позиционировать, он должен находиться в самом низу. Ну и естественно иметь соответствующую спрайту ширину 4px, которая задана файлом titleBar.

Итак, не знаю кому как удобнее, но если спрайт состоит из более чем двух составляющих, то я делаю так: Создаю отдельную папку с именем будущего спрайта, в которую ложу все входящие в него файлы, ну например пусть в данном случае будет папка panels. После чего в этой же папке создам обычный текстовый документ, в котором по порядку перечислены входящие в сборку файлы и значения их высот. Буквально вот так:



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

Ну и соответственно раз уж затронуты файлы, которые ранее уже были прописаны в стилях, то чтобы не забыть и не заработать головной боли в дальнейшем было бы неплохо сразу открыть style.css и для селекторов #topPanel, #navBar и #navBar nav исправить имя фонового изображения. Причем если для #topPanel и #navBar достаточно просто изменить имя, то для #navBar nav нужно также скорректировать и такой параметр как «положение по вертикали», заменив 0 на -90px, сдвинув тем самым фоновый рисунок для этого элемента на 90px вверх. Вот как-то так. Все очень быстро и ничего сложного.

И последний вопрос перед окончательным переходом к css – вопрос вывода модулей. Как известно все они выводятся с помощью так называемых «шаблонов вывода модулей», которые по сути являются .tpl файлами, которые лежат в папке modules шаблона и имя которых начинается на module. Если схематически изобразить этот процесс в виде обычных html тегов, то выглядеть это будет примерно вот так:



В стандартной поставке присутствует два таких шаблона — module.tpl и module_simple.tpl, пока что этого более чем достаточно, поэтому ничего нового создавать не будем, давайте лучше по очереди их откроем и посмотрим что там внутри лежит. Естественно комментировать все подряд не имеет никакого смысла, поэтому пояснения оставлю только в тех местах, которые могут вызвать вопросы.



В этом виде содержание файла module.tpl меня не устраивает, поэтому вкратце объясню как я пришел к тому коду, который будет представлен ниже:



Ну и собственно как результат вышеизложенного, теперь код основного шаблона вывода модулей — module.tpl у меня выглядит вот так:



Со вторым шаблоном — module_simple.tpl все значительно проще, так как внутри находится только одна строка — "<div>{$mod.body}</div>". Что она делает смотрите в комментариях выше, а предназначен этот шаблон для тех модулей, которые не нуждаются в заголовках и прочих настройках присущим другим своим собратьям (отступы, цвета, фоны и т.д.). В данном случае через него будут выводиться главное меню и слайдер, которые имеют свои контейнеры, а значит обертывающие {$mod.body} дивы не то чтобы мешают, но и смысла от них тоже никакого нет. Так что в итоге в этом шаблоне можно оставить только одну коротенькую запись — {$mod.body}, что я и сделаю...

Вот и все. Если что непонятно спрашивайте, следующая часть будет посвящена исключительно css, аська по-прежнему 192-562-615.