В некотором царстве, в некотором государстве, жила-была красна девица, которая работала на дядю в студии веб-дизайна. И звали ее Аленушкой. И однажды выросла Аленушка, тесно ей стало у дяди в студии, и решила она идти по своему пути – тернистому, фрилансерскому.
И стала сайты сама ваять, заказчиков уваживать. Один из первых таких сайтов был на чистом html в связке с CSS. Он и до сих пор существует, хоть и прошло уже несколько лет. Но за это время Аленушка сделала не один десяток сайтов и научилась их ставить на движок,
CMS Made Simple называется, а в простонародье –
CMSMS.
И сейчас на примере бесплатного шаблона на html, она покажет вам, как из простого сверстанного сайта на html+css сделать рабочий полноценный динамический сайт.
Итак, что мы имеем:
- Шаблонный дизайн, который был найден на просторах интернета: index.html, style.css, папка images ([sharedmedia=core:attachments:1610]).
- Установленный денвер на локальном компьютере.
Поехали...
Этап 1. Подготовка- Скачиваем последнюю версию CMS с официального сайта http://www.cmsmadesi....org/downloads/
- Заливаем файлы на хостинг (в моем случае – денвер).
- Создаем базу данных.
- Запускаем инсталляцию (site.ru/install), которая проходит в несколько этапов. Делается это стандартным способом, как любая cms-ка. На этом пункте останавливаться не будем. Но если возникнут трудности, обращайтесь.
- Заходим в админку (site.ru/admin)
[img]http://images.vfl.ru/ii/1354117210/1934341d/1288503_m.png[/img]
Так выглядит последняя версия. Дизайн админки в этой версии можно сменить на старый, который использовался в предыдущих версиях. Но мы этого делать не будем, привыкнем к новому ).
А вот так выглядит сам сайт со стандартным шаблоном:
[img]http://images.vfl.ru/ii/1354117210/4b917f82/1288504_m.png[/img]
Не очень примечательно, с английским контентом, но тем не менее рабочим! А это для нас самое важное ). Кстати, если вы с английский на «ты», советую почитать что там написано, много полезной информации найдете для себя по этому движку.
Этап 2. Главные настройкиЗаходим в
Администрирование сайта > Общие настройки. Пишем название сайта, если не указали при установке. И вставляем из нашего html-шаблона
глобальные метаданные. Кодировку сменим на utf-8.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Computer hardware website">
<meta name="keywords" content="computer, hardware, pc">
Этап 3. Натяжка своего шаблонаЗаходим в
Оформление > Шаблоны. Кликаем на «
Добавить новый шаблон». Задаем ему произвольное имя на латинице и вписываем в поле
«Контент» наш html код. Сразу замечу, что по умолчанию оно уже не пустое, а сгенерировано для примера со smarty-тегами, которыми мы и будем разбавлять наш html-код.
В самом начале нашего кода вставим
{process_pagedata}.
Далее, убираем наши метаданные и вставляем вместо них
{metadata}. Так как они уже прописаны были нами ранее здесь:
Администрирование > Общие настройки > поле «Глобальные метаданные».
Также можно убрать тег, который привязывает css-файл, а вместо него написать
{stylesheet}, но при этом к нашему шаблону должен быть привязан соответствующий стиль (см. ниже).
Между
<title></title> заключим
{sitename} – это название сайта, которое мы указали здесь:
Администрирование > Общие настройки > поле «Название сайта».
{title} – это заголовок страницы. Его вставим в начале нашей статьи между тегами
<h1></h1>. Он определяется при добавлении/редактировании контента в поле «Заголовок».
Вместо дефолтного контента вставим тег
{content} – содержимое страницы, которое будет меняться в зависимости от того, в каком разделе мы находимся.
Ну и конечно же
{menu} – вызов навигационного меню. Его вставим пока только в одно место, туда, где отображается правое меню, вместо этого куска кода:
<a href="#">Audio</a>
<a href="#">Auto</a>
<a href="#">Cell Phones</a>
<a href="#">Computers</a>
<a href="#">DVD Players</a>
<a href="#">Home Theater</a>
<a href="#">MP3 Players</a>
<a href="#">TVs</a>
<a href="#">Video Games</a>
Если у вас в шаблоне уже стоит счетчик, например Яндекс.Метрика, то сразу заключите его между тегами
{literal} {/literal}. Дело в том, что в счетчике присутствуют фигурные скобки {}, которые система воспринимает, как Smarty-объект и, соответственно, выдает ошибку. А благодаря
{literal}, он их будет игнорировать, где это необходимо.
Тоже самое делаем со стилями. Заходим в
Оформление > Стили. Жмем на
«Добавить стиль» (внизу страницы). Задаем ему имя (для удобства я его назвала так же как шаблон) и вставляем свой css.
Теперь наш шаблон нужно сделать
по умолчанию,
для всех страниц, а также
привязать его к только что созданному файлу css. Для этого вернемся в
Оформление > Шаблоны:
[img]http://images.vfl.ru/ii/1354117210/d5616365/1288505_m.jpg[/img]
Осталось дело за малым, это добавить наши картинки. Обычно я их загружаю через FTP в отдельную папку. Но можно сделать и так:
Контент > Менеджер файлов > вкладка «Загрузить файлы». В этом случае картинки будут в папке
uploads. А это значит, что нужно откорректировать наши пути к картинкам в html и css. В моем случае это выглядит примерно так:
background: url(/uploads/back.jpg);Ну что ж, теперь можно проверить наши труды:
[img]http://images.vfl.ru/ii/1354117211/086bf58e/1288506_m.png[/img]
Хех, отлично. Стили привязаны, пути к картинкам сделаны правильно, меню справа динамичное и уже работает с дефолтным контентом. Но есть один косяк, появились квадратики, которые нам не нужны. Убрать их можно двумя способами:
- Подкорректировать стиль css
- Подкорректировать Меню в Оформление > Менеджер меню.
Воспользуемся вторым вариантом, чтобы потом сделать еще и горизонтальное меню сверху.
Этап 4. Настройка менюЗаходим в
Оформление > Менеджер меню. По умолчанию у нас стоит шаблон меню, который называется
simple_navigation.tpl. Редактировать предустановленные меню через админ панель мы не можем, поэтому создадим свой шаблон на основе установленного. Жмем
«Импорт»:
[img]http://images.vfl.ru/ii/1354117211/9c579522/1288507_m.jpg[/img]
Задаем произвольное имя на латинице, жмем
«Отправить». Теперь мы ставим только что созданный шаблон по умолчанию и заходим в редактор шаблона. В общем-то нам нужно оттуда вычленить теги списка
<ul> и
<li>. В конце статьи я выложу исходники, чтобы вы могли проверить себя на правильность кода.
После этого все становится на свои места:
[img]http://images.vfl.ru/ii/1354117211/ff2187de/1288509_m.png[/img]
Третьего подуровня у меня не планируется, поэтому все получилось так, как надо (без соблюдения иерархии).
Но у нас еще есть горизонтальное меню сверху и снизу. Для них нужно подготовить свой шаблон. Я взяла за основу шаблон меню
minimal_menu.tpl, импортировала его, дала имя
gorizontal и вместо тега
<ul> вставила
<tr>, а вместо
<li> –
<td>, так как меню сверстано в таблице. Теперь, когда у нас готово горизонтальное меню, нам нужно в шаблоне html заменить меню тегом
{menu template="gorizontal"}.
Изначально я задумала, чтобы в правом меню отражались разделы Каталога, а сверху непосредственно страницы 1 уровня. Для этого воспользуемся дополнительными опциями:
Для верхнего меню:
{menu template="gorizontal" excludeprefix="catalog"} – здесь говорится, что мы показываем меню gorizontal и отображаем в нем все разделы, кроме раздела, алиас которого равен
catalog.
Для правого меню:
{menu childrenof="catalog"} – здесь говорится, что мы показываем меню, шаблон которого стоит по умолчанию и отображаем в нем только подразделы раздела
catalog.
Для наглядности я
грохнула удалила практически весь дефолтный контент и создала несколько своих страниц (
Контент > Страницы):
[img]http://images.vfl.ru/ii/1354117211/8b91a6c7/1288508_m.jpg[/img]
И вот что получилось в итоге на сайте:
[img]http://images.vfl.ru/ii/1354117211/225f4258/1288510_m.png[/img]
Мы видим, что меню выводится как задумано, но слишком узкая зеленая полоска получилась (не так, как в исходном варианте). Это можно исправить, покумекав со стилями и высотой таблицы. Но если позволите, я буду заканчивать. Ведь главное – показать принцип, а дальше уж как-нибудь сами
.
ПодитогУ данной CMS есть много дополнительных модулей, которые можно легко настроить.Это и галерея (мне нравится модуль
Gallery), и новости (модуль
News), и комментарии (
Comments), и форма обратной связи (
FormBuilder), и каталог продукции (
Cataloger или
Products), и даже корзина (
Cart) для создания интернет-магазинов. Весь перечень модулей можно посмотреть через админку:
Расширения > Менеджер Модулей. Оттуда и установить. У каждого модуля есть справка, не всегда правда на русском языке, но в любом случае, вы всегда можете обратиться в русскую ветку на официальный форум
http://forum.cmsmade...wforum.php?f=27 за помощью.
ИтогЭта cms, на мой взгляд, лучшее решение для дизайнеров-верстальщиков, которые не очень или вообще не разбираются в PHP. Со Smarty, конечно, придется подружиться. Но если вам понравится эта система, она станет вашей любимицей!
Вот и сказки конец, а кто дослушал до конца – молодец!Файлы с конечными изменениями для проверки кода ([sharedmedia=core:attachments:1614])
При поддержке:
SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой.
Обсудить на форуме.
[img]http://www.masterwebs.ru/sp/seopult.gif[/img]
Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
|