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

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

1. Заголовки модулей должны находиться на полупрозрачной панели, которая растянута на всю ширину экрана.
2. Текст этих заголовков должен быть залит градиентом.
3. У каждой позиции, кроме первой должна быть разделительная полоса слева.
4. Этот разделитель должен растягиваться по высоте в зависимости от заполнения модуля.
5. Согласно дизайну эта полоса должна состоять из четырех частей.
6. Все позиции независимо от наполнения должны иметь одинаковую высоту.

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

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

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

Но это только на первый взгляд. На самом деле за всем этим скрывается куча неприятностей.

Во первых все позиции выводятся по условию, а поскольку строки неразрывны, то для каждой позиции это условие пришлось бы повторить 4 раза. Итого 16 раз для 4 позиций.

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

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

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

Если ход мыслей понятен, то вопросов "а почему именно так" по идее возникнуть не должно. Давайте писать html часть:

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


Вот и все. Футер, а вместе с ним и вся основная логика шаблона закончены. По template.php осталось разобраться только с поиском и системными сообщениями. Что же касается подключенного, но незадействованного класса cmsUser, то расскажу прямо сейчас.

Грубо говоря этот класс отвечает за пользователей. Он достаточно большой и очень хорошо прокомментирован, но поскольку никаких компонентов мы не пишем, то все его методы изучать совсем не обязательно. Вполне достаточно знать, что использование cmsUser для нас означает возможность выполнять какие либо действия в зависимости от статуса пользователя. Какие это будут действия и по какому условию они будут выполняться зависит от фантазии и конкретных задач. Например в шаблоне _default_ он используется для вывода администратору сообщения, что сайт отключен, а так же для вывода неавторизованным пользователям ссылок на авторизацию/регистрацию. Что касается данного шаблона, то моей фантазии на что нибудь путное не хватило, поэтому это дело вообщем-то нигде не используется, но для более полного понимания давайте все таки что нибудь в качестве примера сделаем.

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

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


Можно пойти еще дальше и полность запретить гостям просматривать сайт. Для этого условие нужно написать уже в теле страницы. Примерно вот так:

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


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

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

На этом пока что все. Поскольку мы почти вплотную подошли к оформлению, загрузите и положите в папку img необходимые картинки и не забудьте дописать в style.css правила для появившегося класса .abcd
Шаблон своими руками. Часть 6... | Шаблон своими руками. Часть 8...
Комментарии (8)
VopisUVD 23 ноября 2012 в 18:55 0
Круто +1
А про табы что то расскажете?
Pasha 23 ноября 2012 в 21:10 +8
Да запросто. Понять бы только что собственно про них рассказывать? Табы они и в Африке табы...
picaboo 23 ноября 2012 в 21:49 0
в одном из первых уроков было вычисление количества выводимых блоков, почему бы не использовать определение количества блоков и автоматическое присваивание стиля?

например имеем некий результат подсчета количества блоков ввиде числовой переменной $block_num
оборачиваем типовой блок в <div class=bloknum_<?php $block_num ;?>
и делаем несколько классов
bloknum_1, bloknum_2 и тд в которых ставим жестко размер блока для ситуации когда у нас вывод 1 блока в позиции, двух и тд.

сумбурно описал. но надеюсь мысль понятна
Pasha 23 ноября 2012 в 21:59 +2
Ну так все именно так и происходит. Только вместо bloknum_1, bloknum_2 и т.д. я назвал классы a, ab, abc и abcd.
picaboo 23 ноября 2012 в 22:03 0
чорт. не обратил внимания на первые 10 строчек кода в примере smile

может кинете туда коммент и может классы чуть интуитивнее назвать. это важный момент, я бы акцентировал на нем основное внимание. во многих шаблонах этот момент просто упускается из виду :(
Олег 24 ноября 2012 в 11:51 0
Подскажите как можно сделать переключение блоков.
Если их 1-2-3-4. потом 1-2-3 и 3 занял место4.
Если нет 1, 2 занял место первого блока и получилось2-3 по всей ширине.
Для дефолтного шаблона
Pasha 24 ноября 2012 в 18:49 +4
Прикольно... А о чем же тогда я все это время рассказываю?
Олег 24 ноября 2012 в 20:08 0
Я извиняюсь но можно на примере показать если не трудно, я только учусь.
Спасибо.