Создание меню и контрольных материалов
В предыдущей главе было подробно рассказано о главном файле шаблона – index.php , который отвечает за построение кода страницы. Но этот файл только создаёт модульные позиции и некоторые элементы, но не указывает на их точное расположение, не определяет размеры и внешний вид; все эти данные берутся из подключаемых файлов каскадных таблиц стилей CSS.
Будем исходить из того, что вы уже продумали и создали нужные вам модульные позиции, прописали их в файле index.php , продумали, как будет выглядеть тот или иной элемент вашей страницы. Теперь можно приступать к оформлению и настройке, т.е. к работе с файлами CSS, но прежде чем это сделать, необходимо создать хотя бы один пункт меню, один материал, модуль, а так же изображение для "шапки" сайта; это нужно для того, что бы вы могли видеть получаемый результат и производить соответствующие действия.
Начнём с изображения для "шапки" сайта. Совершенно не обязательно рисовать какую-то специальную композицию, можно просто создать любой фоновой рисунок, главное, что бы он существовал как отдельный файл и имел необходимые размеры. А можете просто "вырезать" его из файла template_preview.png , находящегося в шаблоне! Для этого:
- откройте файл с помощью редактора Paint.NET;
- выделите нужную область и скопируйте в буфер обмена клавишами Ctrl + C;
- выберите в меню редактора пункт Файл > Создать, в открывшемся окошке нажмите "ОК";
- отредактируйте (если нужно) изображение и сохраните под любым именем (без кириллицы!).
Стоит иметь в виду, что изначально в шаблоне установлены настройки для изображения размером не более 1000px в ширину, т.е. такое изображение может быть меньше или равно этому значению, а так же зарезервировано место не менее 90px в высоту. Это означает, что изображение в "шапке" сайта может иметь в принципе любую высоту, но если оно будет меньше 90px, то ниже этого изображения останется пустое пространство. Эти две величины можно легко изменить в CSS (см. следующую главу).
Теперь открываем административную панель и вводим полученное изображение в шаблон, как это было описано в главе 8 первой части:
Жмём "Сохранить", затем "Просмотр сайта" и видим результат: изображение установлено.
Теперь создадим 2-3 материала, 2-3 пункта главного меню, привяжем их к материалам и выведем главное меню на страницу. Всё это было подробно описано в первой части в главах 9-11, однако для ускорения процесса можно воспользоваться более коротким путём.
В панели управления открываем Меню > Main Menu > Создать пункт меню:
В открывшемся окне нажимаем Выбрать :
В открывшейся таблице выбираем Материалы > Материал:
и жмём Создать материал :
При этом откроется окно создания материала. Так как создаваемый материал нужен исключительно для настройки внешнего вида страницы, то здесь можно напечатать всё, что угодно; главное, не забыть ввести заголовок и небольшой текст. Далее жмём Сохранить и закрыть :
Теперь вводим заголовок меню, например, "Пункт меню", и жмём Сохранить и закрыть .
В открывшейся таблице устанавливаем созданный пункт как главный, а имеющийся пункт Home отключаем:
И последнее, что нам осталось сделать с меню – указать правильную модульную позицию для главного меню в соответствии со своим шаблоном. Для этого открываем Расширения > Модули (любое меню это тоже модуль):
В открывшейся таблице мы видим, что модульная позиция указана не для нашего шаблона, поэтому её надо изменить:
Кликаем на Main Menu, в открывшемся окне в блоке "Позиция" устанавливаем соответствующую модульную позицию и жмём Сохранить и закрыть . Теперь для нашего главного меню в таблице должна быть указана правильная позиция.
Жмём на "Просмотр сайта" и видим уже установленное меню и материал:
Обратите внимание: в данном случае у нас для секции основного контента (см. часть2,глава 3) используется вариант content-mid, т.е. "контент посередине", а так как ни слева, ни справа нет модулей, модульные колонки LEFT и RIGHT скрыты и основной контент занимает всю ширину страницы.
Это следует учитывать, так как при создании шаблона необходимо проверять и настраивать все возможные варианты, а их не три, а четыре:
- модули слева от контента,
- модули справа от контента,
- модули слева и справа от контента;
- нет модулей (рис.16).
Для того, что бы настраивать и проверять все возможные варианты с модулями, надо просто создать два любых модуля и поместить их на соответствующие позиции: один на LEFT, другой на RIGHT.
Создаём два модуля: например, это могут быть модуль авторизации и модуль типа "HTML-код", в который нужно вставить любое изображение определённой (заранее продуманной) ширины. Так как процесс создания модулей был подробно описан в части 1, повторять всё это заново нет смысла; напомню только что модуль авторизации Login Form уже подключен по умолчанию и нужно просто выставить для него правильную модульную позицию, например, LEFT, а модуль типа "HTML-код" нужно создать: кнопка Создать > HTML-код; далее вставить картинку, указать название, выставить позицию RIGHT и сохранить. В результате при просмотре сайта мы получим следующее:
Теперь нужно создать ещё два модуля для вставки в позиции TOP-CONTENT и BOTTOM-CONTENT. Для этого:
- в разделе Расширения > Модули жмём Создать ;
- вводим название (например, "Модуль №3);
- устанавливаем позицию TOP-CONTENT;
- отключаем показ заголовка (обычно в этих модулях он не используется);
- устанавливаем изображение (размер приблизительно 468 х 60 px – это размер рекламного блока в Google);
- открываем вкладку Дополнительные параметры и в строке "Суффикс CSS-класса модуля" прописываем " topcontent" с обязательным пробелом впереди.
Тоже самое делаем для нижнего модуля, но вводим другое название (например, "Модуль №4), выставляем позицию BOTTOM-CONTENT, а в качестве CSS-суффикса указываем " bottomcontent" с обязательным пробелом впереди. Не забываем всё сохранять.
И последнее, что нужно сделать – установить правильную позицию для модуля навигации ("Хлебные крошки"). Это вы сможете сделать уже самостоятельно, без всяких инструкций.
Теперь обновим страницу сайта и посмотрим, что получилось:
Как видим, все модули на месте: слева, справа, внизу, вверху, "хлебные крошки" и меню.
В данной статье все модули были вставлены на позиции, соответствующие создаваемому шаблону. В своём же шаблоне вы должны создавать модули, которые вы решили использовать для своего сайта и вставлять их на соответствующие, задуманные вами позиции!
Всё! Можно переходить к настройке сайта: работе с CSS.
