Что такое шаблон? Для чего он нужен?
Просмотр модульных позиций шаблона
Как загрузить и вставить изображение?
Пришло время установить на сайт шаблон. Но сначала несколько слов о том, что это такое и для чего нужно.
Что такое шаблон? Для чего он нужен?
Шаблон – это основа, "каркас" сайта. Шаблон определяет позиции для всех элементов сайта, а так же их внешний вид (оформление) и размеры. Давайте рассмотрим несколько наиболее часто встречающихся вариантов расположения элементов на сайте.
Вверху сайта находится HEADER, или, как ещё называют, "шапка" сайта, в которой распологаются, как правило, название и логотип, но так же "шапка" сайта может включать и другие элементы, например, меню, поиск и так далее; для каждого такого элемента создаётся своя модульная позиция.
Под шапкой сайта находится MAIN MUNU – главное меню сайта. Стоить иметь в виду, что так как главное меню это тоже модуль, то его можно расположить не только в виде горизонтальной полосы, как это сделано в нашем варианте, но и в одной из модульных колонок, но тогда пункты главного меню будут распологаться вертикально.
Под главным меню располагается Основной контент; в данном варианте он расположен посередине, а по бокам – LEFT COLUMN и RIGHT COLUMN (левая и правая колонка) для различных модулей.
Внизу сайта находится FOOTER – "подвал" сайта, в котором обычно распологается дополнительная информация о сайте, кнопки обратной связи, контактов и прочее.
Такой вариант не слишком удобен, так как колонка основного контента получается довольно узкой, либо приходится делать узкими левую и правую колонку, а значит, в модулях будет очень мелкий шрифт. Поэтому есть смысл воспользоваться только одной колонкой для модулей, расположенной либо слева (рис.74),
либо справа (рис.75):
Любой шаблон при создании сайта или даже после его создания можно подкорректировать так как вам необходимо, но в этой главе мы не будем рассматривать как создаётся и корректируется шаблон, об этом будет рассказано во второй части; пока нам важно просто установить шаблон на сайт.
Где взять шаблон для сайта? В настоящее время в интернете есть достаточное количество ресурсов, предлагающие различные шаблоны, как платно, так и бесплатно, но намного лучше научится создавать шаблоны самостоятельно, ведь это намного приятнее, чем пользоваться чужими разработками! А пока воспользуемся шаблоном, общий вид которого был представлен выше на рисунке 73.
41 Скачать шаблон вы можете 
3
* Загрузка возможна только для зарегистрированных пользователей!
Стоит иметь в виду, что у этого шаблона есть важное свойство: если в какой либо модульной колонке нет ни одного модуля, то эта колонка автоматически выключается; это позволяет создавать на одном сайте страницы во всех трёх вариантах (рис.73, 74, 75). Например, большинство страниц вашего сайта содержит модули в обоих колонках, но есть одна страница (или больше), где модули одной из колонок вам не нужны, или просто нужно расширить площадь для основного контента. В этом случае мы настраиваем модули одной из колонок так, что бы они не отображались на этой странице, в результате чего при заходе на данную страницу расположение элементов будет выглядеть как в вариантах 2 или 3. Так же этот шаблон хорош тем, что для создания варианта 2 или 3 нам не нужно создавать для них дополнительные шаблоны: достаточно просто в одну из модульных колонок не устанавливать модули.
Вы можете выбрать любой из этих вариантов для создания своего сайта, это не суть как важно, а мы в дальнейшем будем рассматривать вариант 2 и именно в таком варианте будем создавать сайт, т.е. все модули у нас будут находится в позиции RIGHT. Модульные позиции в указанном варианте будут выглядеть вот так (рис.76):
Вверху, как обычно, расположена "шапка" сайта (позиция header), под ней – главное меню (позиция main_menu).
Под главным меню находится позиция breadcrumbs ("хлебные крошки"); в этой позиции будет располагаться полоса, показывающая полный путь к открытой странице (кроме главной); соответственно, эта позиция будет включена на всех страницах кроме главной.
Справа находится позиция right для правой колонки, слева – позиция left для левой (на рисунке она не показана), в которых будут располагаться модули. Левая модульная колонка не показана на рисунке в связи с тем, что такой вариант будет основным для создаваемого сайта; однако вы можете использовать любой из представленных вариантов. Если вы захотите использовать шаблон для построения сайта в варианте 1 или 3, то у вас, соответственно, добавится позиция left.
Внизу сайта находится "подвал" сайта в стандартной позиции footer.
Теперь об основном контенте. Обратите внимание, что для основного контента создан специальный контейнер (красная пунктирная линия), а в нём имеются дополнительные модульные позиции top-content ("над контентом") и bottom-content ("под контентом"), в которых можно разместить модули, например, модуль с рекламой, расположенный над контентом и всё, что угодно ещё. А между этими модульными позициями находится место для основного контента сайта. Так же стоит иметь в виду, что если в данных модульных позициях ничего нет, то они автоматически скрываются и в контейнере выводится только основной контент.
При необходимости в данном шаблоне, как и в любом другом, можно создать ещё любые другие позиции, причём даже после публикации сайта, но об этом мы поговорим во второй части, а пока имеющегося шаблона нам вполне достаточно.
Установка шаблона
Запускаем сервер, открываем сайт, и видим вот такую картинку:
Вот такой вид имеет шаблон Protostar, уже установленный в Joomla и запускающийся при первом открытии по умолчанию.
А сейчас мы поставим свой шаблон. Для этого войдём в административную панель (как мы это уже делали раньше) и выберем вверху пункты Расширения > Менеджер расширений > Установка:
В открывшемся окне нажимаем кнопку Или выберите файл :
В открывшемся диалоговом окне находим файл с ZIP-архивом шаблона и кликаем на него; при этом файл будет загружен, архив распакован и шаблон установлен, о чём наверху появится соответствующее сообщение.
Теперь откроем Расширения > Шаблоны > Стили:
В открывшейся таблице в строке с нашим установленным шаблоном кликнем на звёздочку; страница презагрузится, звёздочка станет золотой и вверху появится сообщение о том, что наш шаблон (стиль) установлен по умолчанию:
Всё! Шаблон установлен. Давайте посмотрим, как стал выглядеть наш сайт; для этого нажмём на "Просмотр сайта" в левом нижнем углу. Вот что при этом откроется на экране:
Ничего интересного!!! Но так выглядит пустая страница без установленных на ней элементов.
Давайте просмотрим имеющиеся модульные позиции.
Просмотр позиций шаблона
Для просмотра модульных позиций сначала нужно включить данную функцию, для чего на странице стилей жмём кнопку "Настройки" (кнопка в правом верхнем углу) и включаем Просмотр модульных позиций:
Далее жмём кнопку "Сохранить и закрыть", при этом мы возвращаемся к таблице стилей; теперь мы можем просмотреть модульные позиции. Для этого кликаем по соответствующему значку (см.рис. 84):
В отдельной вкладке загрузится страница сайта, на которой будут указаны имеющиеся модульные позиции:
Как видим, здесь присутствуют все оговорённые выше позиции (рис.73, 76) и ещё одна позиция f-menu, которая находится в "подвале" сайта в левой части.
Так же мы можем просмотреть скриншот шаблона. Для этого кликаем по пункту меню "Шаблоны" (рис.86):
На открывшейся странице просто кликаем на маленький скриншот для его увеличения (рис.87):
На экране появится большой скриншот шаблона.
Теперь нам нужно внести некоторые первоначальные настройки в наш шаблон: установить изображение для HEADER – "шапки" сайта, а так же ввести название сайта, но прежде, чем это сделать, нужно загрузить на сайт само изображение.
Если на данный момент у вас нет готового изображения для "шапки" сайта, то его можно временно заменить простой "болванкой", которую можно сделать за пару минут в редакторе изображений.
Обратите внимание, что в этом шаблоне данное изображение по умолчанию имеет размер в ширину 1000 px, что является предустановленной шириной самого сайта, и в высоту min 90 px; параметр "min" означает, что под это изображение зарезервировано место, имеющее минимальную определённую высоту, т.е. изображение по высоте вы можете сделать и больше. Однако стоит иметь в виду, что все эти параметры являются лишь установленными по умолчанию, поэтому в любой момент их можно изменить, отменить или добавить новые.
Как загрузить и вставить изображение?
Способы, описанные ниже, позволяют вставлять изображения в соответствующие места на сайте, размещать эти изображения в соответствующих папках, поэтому мы их разберём очень подробно.
Большинство изображений на сайте хранятся в папке images в корневой директории. Эта папка может содержать в себе другие папки, что позволяет удобно разложить все имеющиеся изображения; эти внутренние папки вы можете создавать сами. Доступ к папке images осуществляется при помощи медиа-менеджера, зайти в который можно при помощи главного меню: Материалы > Медиа-менеджер (рис.88):
В открывшемся окне медиа-менеджера вы увидете уже созданные по умолчанию несколько папок и изображений. Вы можете:
- создать новый каталог (папку), нажав на соответствующую кнопку;
- просмотреть любое изображение или содержимое папки, кликнув за них;
- удалить любое изображение или папку, кликнув на соответствующий крестик (будьте внимательны, удаление происходит сразу!);
- загрузить новые изображения.
Для загрузки изображение нажимаем зелёную кнопку Загрузить , после чего нажимаем открывшуюся кнопку "Выбрать файлы":
В появившемся диалоговом окне находим файл вставляемого изображения, кликаем на него; при этом диалоговое окно закрывается, а название файла появится рядом с кнопкой "Выбрать файлы". Осталось только подтвердить загрузку синей кнопкой Загрузить и после перезагрузки страницы ваш файл будет отображаться в медиа-менеджере.
Стоит иметь в виду, что использовать медиа-менеджер удобно в случае загрузки сразу нескольких изображений одновременно, а вот загрузить и вставить одно изображение на сайт можно и без открытия медиа-менеджера.
Разберём этот вариант на примере вставки изображения (логотипа) в "шапку" сайта.
Итак, как было сказано выше, нам нужно вставить изображение и вписать название сайта. Название нужно для того, что если по какой-то причине браузер не смог вывести изображение, то вместо него будет выведено это название.
Открываем страницу стилей и начинаем настройку; для этого кликаем по названию настраиваемого шаблона:
На открывшейся странице выбираем вкладку Дополнительные параметры; именно здесь вводится изображение и название. Для этого кликаем на кнопку "Выбрать":
Открывшееся окно для работы с изображениями прокручиваем вниз до появления раздела Загрузить файл:
Далее:
- жмём "Выбрать файлы";
- в диалоговом окне находим нужный файл и кликаем на него;
- подтверждаем загрузку кнопкой " Загрузить ".
После загрузки наверху появится надпись "Загрузка завершена". Теперь осталось кликнуть на загруженное изображение и нажать " Вставить " (рис.93):
Всё! Изображение загружено и уже вставлено в нужное место, в нашем случае – в "шапку" сайта.
Таким вариантом загрузки изображений можно пользоваться везде, где есть возможность это сделать, в том числе и в текстовых редакторах. Этот вариант намного более удобен, так как нет необходимости предварительной загрузки через медиа-менеджер. Если же изображения уже загружены, то можно просто их отметить (рис.93, 1) и вставить (рис.93, 2).
Теперь введём название сайта, нажмём Сохранить и посмотрим, на результат (кнопка "Просмотр сайта" в левом нижнем углу):
Временная "шапка" сайта установлена; можно переходить к созданию пунктов главного меню и материалов.
