Создание и редактирование дизайна в КМС (CMS)

Posted by: Rumba
Date: Sun, 18 Nov 1979 09:29:49
Tags: бесплатно настройка сайт шаблон темы html cms php блог портал

А ну-ка, сделайте мне фото, месье Жан,
Меня заделайте, чтоб было как в Париже.
А ну-ка, сделайте мне фото, месье Жан,
Сейчас я Ваш, мон шер, и я иду поближе.

А.Розенбаум

Любой скрипт КМС должен поддерживать настройку дизайна, по традиции, это реализуется посредством шаблонов. Это требование игнорируется только служебными программами, теми, что служат для администрации и настройки ресурса. Они более утилитарны, менее эффектны. Это задний двор программы, скрытый от посторонних глаз.

Однако для комфортного посещения посетителем страничек настройка дизайна сверхобязательна. Согласимся с мнением тысячи специалистов, и попробуем стать 1001-м, как и в сказке Шахерезады. Ибо, как и всегда, в общих чертах всё понятно, и не вызывает никаких сомнений, но... дьявол прячется в мелочах.

Мнение команды разработчиков КМС Rumba (некоторые называют его блоговым движком), как всегда, стоит особняком. Ведь мы помним, что Rumba предназначена не для всех. Она для тех, кто солидарен с пропагандируемыми ей ценностями - быстротой, компактностью, гибкостью.

При чём тут дизайн? Он прямо влияет на размер загружаемых страничек и как следствие - на скорость загрузки. А как итог, получаем большой или маленький трафик, пиковую нагрузку и вопрошающее недовольство техподдержки хостера. О самом худшем даже поминать не будем.

Проведя анабазис к теме сегодняшнего разговора, подытожу: дизайн должен быть красивым, но компактным. Об его эстетической ценности я не буду распространяться: вкусов, стилей и мнений в этом мире ровно столько же, сколько и людей (за минусом не имеющих зрение). Посему перейдём к эргономике дизайна.

На страницах должно быть всего две вещи: легко читаемый контент и удобная навигация. ВСЁ! Имея эти две составляющие, вы определили будущее сайта как перспективное. Будем портить результат? Поневоле хочется сказать, что нет, но и красоты добавить тоже охота. Такова человеческая природа. Смиримся с ней, и постараемся не навредить, и даже принести некоторую пользу. Как это возможно? Заставим дизайн работать на SEO-оптимизацию.

Инструкция по эксплуатации кмс Rumba гласит (инструкции нет, но в каждой шутке...) - есть три уровня регулирования (настройки) дизайна.

1 уровень (для начинающих)



В файле config.php меняем цвет через переменную COLORSITE. Она может принимать значение red, green или blue, что соответственно устанавливает красную, зелёную или синюю цветовую гамму сайта. В зависимости от этой опции к странице динамически подключается соответствующий файл каскадных таблиц стилей. Другая интересная опция - TRSTYLE. Она определяет, двух, или трёхколоночным будет дизайн сайта. Поэкспериментируйте с этими переменными. Думаю, сравнив результаты, вы уже выбрали для себя подходящий вариант.

Чтобы лучше настроить сайт под свои нужды, вам придётся ознакомиться ещё с 4 переменными:
qq - число анонсов в списке статей
q99q - число анонсов в ленте новостей на главной странице
dlinaanonsa - длина анонса в списке статей (количество слов)
dlinaanonst - длина анонса в в ленте новостей на главной странице
По умолчанию они имеют оптимальное значение, но в зависимости от надобности позволяют значительно видоизменить дизайн сайта. Т.е. регулируя эти переменные, вы можете сделать сайт новостным ресурсом или блогом. Допустим, для информационного портала, ежедневно публикующего большое количество новостей, желательно количество выводимых анонсов увеличить, оставив величину в словах небольшой. В то время как блогу лучше сделать большие анонсы при малом их количестве на одну страницу.

Теперь глянем переменную widthdesign. Меняя значение с table на full, мы меняем дизайн с табличного на резиновый. Если табличный вам скорее всего понятен, то что такое резиновый, может быть и нет. Резиновым на жаргоне специалистов называется такой дизайн, при котором сайт заполняет всё пространство браузера, независимо от его положения и размера. Каждый вариант имеет право на жизнь и каждый востребован. Для больших статей более удобен резиновый дизайн, для новостного ресурса может быть лучше установить табличный.

Подытоживая указанные возможности считаю, что для нормальной полноценной работы сетевого ресурса их достаточно. Отредактировав файл config.php в соответствии с инструкцией по установке и вышеперечисленными рекомендациями вы можете забыть про дизайн и посвятить время его продвижению и наполнению.

2 уровень (для опытных)



Конечно, без знания и понимания HTML здесь не обойтись. Ну скажем так - почти не обойтись. Поскольку помимо настройки теперь придётся и активно поработать с кодом разных файлов. Начнём с каскадных таблиц стилей. Допустим, имеющиеся цветовые гаммы вас никоим образом не устраивают. Ваш новый сайт будет посвящён шоколаду, и посему вам нужны кофейные цвета. В каталоге CSS берёте файл red.css, и копируете сюда же, переименовывая в cofee.css в config.php заменяем значение COLORSITE на cofee. Теперь при редактировании файла cofee.css все изменения будут отражаться в дизайне.

Здесь пара пояснений: переменная navr относится к правой колонке, а navl к левой колонке (её может и не быть при двухколоночном дизайне). При необходимости ознакомьтесь с теорией создания CSS файлов на любом из сайтов, им посвящённом. Меняя шестнадцатиричные коды цветов в редактируемом файле, вы измените цветовую составляющую страничек. Переменная ramabot отвечает за цвет верхней и нижних рамок. Если у вас получилась хорошая палитра, вы можете прислать css-файл мне, и я добавлю его в дистрибутив.

Следующая важная составляющая второго уровня - редактирование шаблона, т.е. файла design2.php или design3.php (в зависимости от того, двух- или трёхколоночный дизайн вы взяли за основу. По сути дела, это обыкновенный HTML-файл, только кавычки заменены на обратный слэш с кавычками. Вы можете (и я рекомендую), для начала не создавать свой файл, а вносить изменения в уже существующий. Так вы сможете избежать многих ошибок.

Теперь перечислю все переменные, которые необходимо размещать в шаблоне. Согласно
правилам языка РНР все переменные начинаются со знака доллара. При этом все они
пишутся маленькими буквами. Расположение переменных в шаблоне указано на
рисунке. Будьте очень внимательны!

Итак - список переменных: topfiksdiz, searchmenu, zaprosmenu, telo,komm, paga, categorymenu, glossarymenu, titel, godik, botfiksdiz. Обращаю ваше внимание на то, что служебное основное меню даёт ссылки в стандартном для HTML виде на страницы Главная, Все статьи, Гостевая книга, Карта сайта, Контакт, Форум, Ссылки. Это сделано для большей гибкости - навигация основного меню в зависимости от дизайна располагается на странице весьма замысловато. Располагайте каждую из строк, отвечающую за соответствующее меню по своему разумению.

Теперь, оперируя с известными вам переменными возможно значительно изменить дизайн, перемещая их по шаблону. Практически, свобода теперь ничем не ограничена. Осталось узнать целевое назначение представленных переменных.

3 уровень (для специалистов)



Можно не знать программирование, в том числе и на языке РНР, но иметь о нём понятие, а уж тем более знать вёрстку на HTML - строго обязательно. Не имея нужных знаний, остановитесь на другом, более простом уровне работы над сайтом, благо, этого будет более, чем достаточно.

  • topfiksdiz - отвечает за переключение дизайна из табличного в резиновый. Обязательно должна располагаться сразу за тегом BODY. Работает в паре с botfiksdiz, место которой прямо перед закрывающим тегом BODY. Обязательно наличие обоих, т.е. отсутствие одного из них будет вести к ошибке на странице.
  • searchmenu - меню поискового движка сайтового двигателя, минимальная и максимальная длина поискового запроса регулируется в файле config.php переменными searchlena и searchlenb соответственно.
  • zaprosmenu - список последних десяти поисковых запросов к базе данных сайта отражается с двумя целями: показать горячие темы и оптимизировать под эти запросы тематику сайта в видении поисковых систем. Т.е. та тема, которая больше всего будет интересовать посетителей, будет важна и для робота Гугла и Яндекса.
  • telo - здесь будет отражаться собственно сам контент сайта - статьи, иллюстрации и результаты поиска.
  • komm - к каждой из статей можно разрешить-запретить комментарии через переменную comment в административном интерфейсе при создании или редактировании статьи, расположение этой переменной определяет их расположение на странице.
  • paga - эта переменная показывает номер страницы в полном списке статей, или по категориям. Обязателен под переменной telo, чтобы не нарушить навигацию по категориям.
    - статьи в категориях, которые вы помимо наличия в категории, хотите вывести на основное меню. Простой и наглядный пример - статьи Описание, Скачать, Установка, F.A.Q., Особенности, Администрирование, которые входят в категорию Rumba. Категорию необходимо указывать при создании статьи.
  • glossarymenu - меню с перечислением разделов сайта и входом на страницы Добавить статью, Статистика, Вход, RSS.
  • titel - развание сайта. Не рекомендуем делать его длинным (с точки зрения SEO).
  • godik - год (текущий) календарный
  • botfiksdiz - см.topfiksdiz


    Подводя итог перечисленным выше приемам редактирования дизайна страниц, лишний раз напомню, что всё хорошо в меру. Скачивая какой-либо шаблон с Сети, обращайте внимание на его размер. Если он измеряется мегабайтами, команда Rumba не рекомендует его использовать. На сегодняшний день размер дистрибутива CMS Rumba составляет порядка 70 кб. В эту маленькую, и тем гордую цифру уже входит весь код, дизайн и некоторые служебные файлы. Наше золотое правило - дизайн не может превышать код.

    Надеемся, что страницы вашего сайта на нашем бесплатном наборе скриптов с лёгкостью станцуют румбу.


  • Смотри также:


    Скачать движок  Новое в КМС (CMS) версии 1.8 - Rumba продолжает развиваться  Простая cms система в стиле cmsimple  Импорт WordPress базы данных для Rumba XML  Администрирование в движке Easy 1.1 





    Комментарии


    Маэстро

    Fri, 18 Dec 2009 05:18:15

    Возьму на заметку, хотя на самом деле всё очень просто (как и всё в Rumba).


    Прохор

    Thu, 17 Dec 2009 11:19:54

    Я вижу, у Rumba News дизайн - это не только файл pattern.html Если не сложно, Маэстро, черкните пару строк на эту тему.


    Кузнецов.Денис.Алексеевичи.

    Thu, 17 Dec 2009 14:35:22

    hety


    chikot27

    Fri, 18 Dec 2009 07:34:37

    Ясно. Не, не затерялось. Я его отправил на _admin@rumba_net_ru. :-))Отправлено повторно на твой алрес.Да я вообще про капчу этого сайта говорил. Ну нет так нет.


    Маэстро

    Fri, 18 Dec 2009 05:27:25

    Что-то никакого письма с дизайном мне не приходило (видно затерялось на просторах Рунета). На всякий случай напомню, что моё мыло - claygod@yandex.ru О капче - в XML она теперь графическая. Переделывать в другую не буду, поскольку главный метод защиты от спамеров всё-таки добавление стоп-слов в файл data/def.php (самый действенный метод). У XML уже есть простая админка, которая реализует базовые функции - добавление, удаление, редактирование статей и добавление и удаление картинок.


    Chikot27

    Thu, 17 Dec 2009 19:17:00

    Отослал.Кстати, походу, баг нашел. когда указываешь получать рассылку комментов, то присылает не полный адрес, а только последнюю часть-название хтмл-файла. Очень неудобно(все время вспоминать оставшуюся часть адреса). Может, можно исправить, чтобы присылало полный линк страницы вместе с http://rumba.net.ru/ ? Спасибо.И еще. Можно более прикольную капчу: закрашенный прямоугольник, с вопросом перед ним: Вы человек?И для подтверждения надо кликнуть мышом, тогда прямоугольник "откроется", и в нем появится: "Да, конечно", или "Естественно"? Под ВП есть готовый плагин. Если найду, реально его под Румбу переделать? Спасибо.У ХМЛ есть админка? Странно, вроде же написано, что нету, но вскоре будет.


    Маэстро

    Thu, 17 Dec 2009 18:27:31

    Пришли мне на почту html файл с css, посмотрю. Админка у XML есть, так что лучше использовать этот движок.


    Chikot27

    Thu, 17 Dec 2009 14:03:23

    Better late than never-говорят англичане. Разве нет?Та насчет ЦССки я понял. С этим разберусь-не так сложно. Трудности начинаются, когда касается шаблонизаторов - ну нету опыта ни со смарти, никак. Просто глючит меня, как пытаюсь разобраться, как натянуть готовый шаблон. Пытался уже с Румба-блог(он мне больше нравится чем XML, все-же админка вещь нужная...). Но видимо туп как пробка - перечел статью про свой дизайн раз 6, но так и не вкурил... Мне-бы на примерчике...


    Маэстро

    Thu, 17 Dec 2009 20:45:58

    Chikot27, однако, не прошло и полгода... )))По поводу округлости - ну это просто, либо осваиваете CSS, либо берете готовый шаблон, и его интегрируете с движком (поскольку движков Румба много, то рассматриваете каждый из них индивидуально).


    Chikot27

    Thu, 17 Dec 2009 07:45:28

    Маэстро, докладаю-создал группу. http://groups.google.com.by/group/rumbaassist?hl=ruПосмотрел сайт по визиткам. Так там же вроде просто изменена цветовая гамма, и немного компоновка. А хочется вот такого к примеру: want2australia.blogspot.com - даже на блогспоте так уже делают. Плавности, округлости хочется.Как же готовый шаблон ЦСС+ХТМЛ натянуть, а?


    Маэстро

    Thu, 17 Dec 2009 10:26:45

    Chikot27, очень хорошая инициатива по поводу Гугловской группы поддержки. Вот вам и поручим это организовать :)По поводу дизайна: Для начала главное правило (оно действует только для Rumba Blog - другие движки Румба этого не требуют) - все кавычки заменяются на кавычки со слешем (смотрите стандартный шаблон Румбы). А так - ЛЮБОЙ дизайн можно натянуть. Можете сделать статичную страничку html (какую угодно), и сделать её шаблоном. Для примера гляньте сайт http://kreditka.net


    Chikot27

    Thu, 17 Dec 2009 07:00:24

    <<Наше золотое правило - дизайн не может превышать код.>> Ну а если очень-очень хоцца зализанный, классный шаблон под блог, дабы не выглядеть полным оборванцем среди WP блогов друзей и собеседников, и скачанный из интернета весит не мегабайты, а где-то 300-800 К, то как тогда?Готов поработать на благо сообщества танцующих, и поделиться затем плодами. Но по описанию очень много вопросов, а аз не программер. Ну, в хтмл вроде ориентируюсь, но делаю все в Фронтпейдже, как его ни чмырят(а между тем на мое имхо, он единственный адекватен к некоторым вещам. к примеру, натянул на блогспот шикарную шкурку, потом думаю, надо еще ее куда-либо натянуть. ясное дело, первая мысль: файл-сохранить как... Так вот, после этого сохранения[правда не в ишаке, а в макстоне]только ФП проглотил тот блогспотовский хтмл, все остальные-всякие дримвиверы, намо веб-едиторы, даже коффикапы - подавились, вот и делайте выводы.). Так вот, можно ли уточнить некоторые детали: -если втыкать указанные в статье переменные в готовый шаблон, ессно не вслепую, а примерно подгоняя структуру шаблона под структуру design2/3, может что-то получиться? Ведь там, в тех шаблонах везде понавтыкано графики, а в родных вариантах ее вроде нету?Спасибо.Кстати, хорошо-бы создать группу поддержки в гугле, как кто мыслит? Чем больше продвинутого народа заинтересуется танцующей КМС, тем больше появится вкусностей и полезностей, разве нет?И про мастертолк-тот же вопрос.


    Маэстро

    Thu, 17 Dec 2009 14:31:00

    Флэш на Румба отсутствует, а вот для упорядочивания html-страничек Rumba Tree в самый раз


    Alena

    Thu, 17 Dec 2009 12:20:44

    Скажите, пожалуйста, поддерживает ли румба флэш?И еще, достаточно большой сайт, написан на html, в связи с частым обновлением возникла необходимость перевести на систему управления. Может ли Rumba Tree помочь в обновлении сайта в реальном времени? Спасибо


    Маэстро

    Thu, 17 Dec 2009 08:46:52

    Для этого пользователям Румбы надо кинуть мне на мыло свои шаблоны, и я их выложу. Однако большинство предпочитает стандартные, даже я.


    1000-1000

    Fri, 18 Dec 2009 01:11:07

    А нет такого, чтобы можно было скачать готовые шаблоны?


    MarriedAbroad

    Thu, 23 Sep 2010 17:43:50

    Что же, с Румбой не сталкивался, попробую обязательно))


        Сгенерировано
        Rumba News v.1.0a
        за 0.648595 сек.