X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Сказка о том, как Аленушка создала сайт на CMS Made Simple ;)
Ольга_mw
Ольга_mw
Topic Starter сообщение 28.11.2012, 23:08; Ответить: Ольга_mw
Сообщение #1


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

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

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

Итак, что мы имеем:
  1. Шаблонный дизайн, который был найден на просторах интернета: index.html, style.css, папка images ([sharedmedia=core:attachments:1610]).
  2. Установленный денвер на локальном компьютере.

Поехали...

Этап 1. Подготовка
  1. Скачиваем последнюю версию CMS с официального сайта http://www.cmsmadesi....org/downloads/
  2. Заливаем файлы на хостинг (в моем случае – денвер).
  3. Создаем базу данных.
  4. Запускаем инсталляцию (site.ru/install), которая проходит в несколько этапов. Делается это стандартным способом, как любая cms-ка. На этом пункте останавливаться не будем. Но если возникнут трудности, обращайтесь.
  5. Заходим в админку (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+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Ваш сайт блокирует Роскомнадзор?
23 hollywooduk 5096 27.3.2024, 10:43
автор: hollywooduk
Открытая тема (нет новых ответов) Тысячи ботовых переходов на сайт
18 Suagaring 4538 26.3.2024, 21:42
автор: c4p1t4l15t
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1122 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2291 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3918 25.3.2024, 6:34
автор: Skyworker


 



RSS Текстовая версия Сейчас: 29.3.2024, 5:22
Дизайн