Перейти к содержимому

Реферальная программа Мегаплана


Сказка о том, как Аленушка создала сайт на CMS Made Simple ;)

#1 Ольга

Ольга
  • Пользователь
  • 7 сообщений
  • Репутация: 2
0

Отправлено 28 Ноябрь 2012 - 22:08

В некотором царстве, в некотором государстве, жила-была красна девица, которая работала на дядю в студии веб-дизайна. И звали ее Аленушкой. И однажды выросла Аленушка, тесно ей стало у дяди в студии, и решила она идти по своему пути – тернистому, фрилансерскому.

И стала сайты сама ваять, заказчиков уваживать. Один из первых таких сайтов был на чистом html в связке с CSS. Он и до сих пор существует, хоть и прошло уже несколько лет. Но за это время Аленушка сделала не один десяток сайтов и научилась их ставить на движок, CMS Made Simple называется, а в простонародье – CMSMS.

И сейчас на примере бесплатного шаблона на html, она покажет вам, как из простого сверстанного сайта на html+css сделать рабочий полноценный динамический сайт.

Итак, что мы имеем:
  • Шаблонный дизайн, который был найден на просторах интернета: index.html, style.css, папка images ().
  • Установленный денвер на локальном компьютере.
Поехали...

Этап 1. Подготовка
  • Скачиваем последнюю версию CMS с официального сайта http://www.cmsmadesi....org/downloads/
  • Заливаем файлы на хостинг (в моем случае – денвер).
  • Создаем базу данных.
  • Запускаем инсталляцию (site.ru/install), которая проходит в несколько этапов. Делается это стандартным способом, как любая cms-ка. На этом пункте останавливаться не будем. Но если возникнут трудности, обращайтесь.
  • Заходим в админку (site.ru/admin)
Изображение
Так выглядит последняя версия. Дизайн админки в этой версии можно сменить на старый, который использовался в предыдущих версиях. Но мы этого делать не будем, привыкнем к новому ).

А вот так выглядит сам сайт со стандартным шаблоном:

Изображение
Не очень примечательно, с английским контентом, но тем не менее рабочим! А это для нас самое важное ). Кстати, если вы с английский на «ты», советую почитать что там написано, много полезной информации найдете для себя по этому движку.

Этап 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. Для этого вернемся в Оформление > Шаблоны:

Изображение

Осталось дело за малым, это добавить наши картинки. Обычно я их загружаю через FTP в отдельную папку. Но можно сделать и так: Контент > Менеджер файлов > вкладка «Загрузить файлы». В этом случае картинки будут в папке uploads. А это значит, что нужно откорректировать наши пути к картинкам в html и css. В моем случае это выглядит примерно так: background: url(/uploads/back.jpg);

Ну что ж, теперь можно проверить наши труды:

Изображение

Хех, отлично. Стили привязаны, пути к картинкам сделаны правильно, меню справа динамичное и уже работает с дефолтным контентом. Но есть один косяк, появились квадратики, которые нам не нужны. Убрать их можно двумя способами:
  • Подкорректировать стиль css
  • Подкорректировать Меню в Оформление > Менеджер меню.
Воспользуемся вторым вариантом, чтобы потом сделать еще и горизонтальное меню сверху.

Этап 4. Настройка меню

Заходим в Оформление > Менеджер меню. По умолчанию у нас стоит шаблон меню, который называется simple_navigation.tpl. Редактировать предустановленные меню через админ панель мы не можем, поэтому создадим свой шаблон на основе установленного. Жмем «Импорт»:

Изображение

Задаем произвольное имя на латинице, жмем «Отправить». Теперь мы ставим только что созданный шаблон по умолчанию и заходим в редактор шаблона. В общем-то нам нужно оттуда вычленить теги списка <ul> и <li>. В конце статьи я выложу исходники, чтобы вы могли проверить себя на правильность кода.

После этого все становится на свои места:

Изображение
Третьего подуровня у меня не планируется, поэтому все получилось так, как надо (без соблюдения иерархии).

Но у нас еще есть горизонтальное меню сверху и снизу. Для них нужно подготовить свой шаблон. Я взяла за основу шаблон меню minimal_menu.tpl, импортировала его, дала имя gorizontal и вместо тега <ul> вставила <tr>, а вместо <li><td>, так как меню сверстано в таблице. Теперь, когда у нас готово горизонтальное меню, нам нужно в шаблоне html заменить меню тегом {menu template="gorizontal"}.

Изначально я задумала, чтобы в правом меню отражались разделы Каталога, а сверху непосредственно страницы 1 уровня. Для этого воспользуемся дополнительными опциями:

Для верхнего меню: {menu template="gorizontal" excludeprefix="catalog"} – здесь говорится, что мы показываем меню gorizontal и отображаем в нем все разделы, кроме раздела, алиас которого равен catalog.

Для правого меню: {menu childrenof="catalog"} – здесь говорится, что мы показываем меню, шаблон которого стоит по умолчанию и отображаем в нем только подразделы раздела catalog.

Для наглядности я грохнула удалила практически весь дефолтный контент и создала несколько своих страниц (Контент > Страницы):

Изображение

И вот что получилось в итоге на сайте:

Изображение

Мы видим, что меню выводится как задумано, но слишком узкая зеленая полоска получилась (не так, как в исходном варианте). Это можно исправить, покумекав со стилями и высотой таблицы. Но если позволите, я буду заканчивать. Ведь главное – показать принцип, а дальше уж как-нибудь сами ;).

Подитог

У данной CMS есть много дополнительных модулей, которые можно легко настроить.Это и галерея (мне нравится модуль Gallery), и новости (модуль News), и комментарии (Comments), и форма обратной связи (FormBuilder), и каталог продукции (Cataloger или Products), и даже корзина (Cart) для создания интернет-магазинов. Весь перечень модулей можно посмотреть через админку: Расширения > Менеджер Модулей. Оттуда и установить. У каждого модуля есть справка, не всегда правда на русском языке, но в любом случае, вы всегда можете обратиться в русскую ветку на официальный форум http://forum.cmsmade...wforum.php?f=27 за помощью.

Итог

Эта cms, на мой взгляд, лучшее решение для дизайнеров-верстальщиков, которые не очень или вообще не разбираются в PHP. Со Smarty, конечно, придется подружиться. Но если вам понравится эта система, она станет вашей любимицей!

Вот и сказки конец, а кто дослушал до конца – молодец!

Файлы с конечными изменениями для проверки кода ()

При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

Изображение

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Ваше мнение о CMS SIMPLE
  2. Cms Made Simple разметка шаблона. Подскажите.
  3. 9000 рублей за тему на форуме. Конкурс "Статейник 2" с призовым фондом 30000 руб
  4. Участники конкурса "Статейник 2"
  5. Как изменить шаблон в CMS Made Simple?


Оформление форума – IPBSkins.ru