Интеграция дизайна в CMS

Данный текст находится в процессе написания, поэтому:
  • Заранее порошу прощение за ошибки. Текст еще будет вычитываться.
     
  • Чуть ниже размещен блок, где будет отмечаться что изменилось/ добавилось. Чтобы зайдя через какое-то время, Вы знали о том, что нового добавилось в нашей интерактивной книге. 

Дизайн

Процесс разработки дизайна довольно индивидуален. Рассказывать о нем я сейчас не буду. На данном этапе у меня уже есть готовый, утвержденный дизайн. Мне он нравится, поэтому начнем с того, что ознакомимся с дизайном будущего сайта.
 
А дизайнер нарисовал его вот таким:
 

Примечание: здесь и далее, щелкнув по любой картинке, вы сможете увидеть ее в натуральную величину.
 
Как видите, дизайнер нарисовал два шаблона. Дизайн главной страницы  хотя и очень похож на дизайн внутренних страниц, но все же отличается большим количеством информации (информационных блоков) на странице. Каждый из этих блоков несет в себе различную информацию:
  • Новости
  • Тексты
  • Логотипы клиентов
  • Отзывы
  • Навигацию по сайту
  • и т.д.
Еще хочется обратить Ваше внимание на то, что на втором макете дизайна у нас раскрывающееся и выпадающее меню. Его нам еще предстоит реализовать на JavaScript, а также множество различных модулей.
 
Приступим к интеграции данного дизайна в систему управления сайта.

Верстка

Первое, что нам нужно сделать, это сверстать данную картинку, переведя ее в HTML-код. Честно говоря, мне очень хочется рассказать вам, как этот процесс происходит. Но у меня нет достаточной квалификации для этого. Давно прошли времена, когда я сам мог качественно сверстать дизайн и получить хороший код. С того времени многое изменилось и, если со сверстанным кодом я еще худо-бедно могу работать, то самому сверстать дизайн, тем более на DIV'ах, я не в состоянии.
 
Но у меня есть большая мечта! Если мне удастся уговорить нашего верстальщика (зовут его Артур), то может быть он подробно расскажет нам о всем процессе верстки данного дизайна, как я сейчас пишу про интеграцию. Тогда его текст  станет частью моей статьи, а для Артура будет хорошей рекламой его студии. Это намек! ;)
 
А пока мы будем пользоваться уже сверстанным Артуром кодом.
 
Код вы можете посмотреть здесь:

В процессе верстки мы получили:

  1. Два HTML-файла с кодом страницы;
  2. Директорию с картинками (мы назвали ее images);
  3. Файлы с каскадными таблицами стилей, которые мы разместили в папке css;
  4. JavaScript приложения, которые нужны для создания динамического меню и других красивых фенечек на сайте.
В дальнейшем я буду публиковать лишь части из кода, ибо он не маленький! ;)
Поэтому  обязательно скачайте весь код, чтобы на всякий случай иметь его под рукой.
 
Дизайн сверстан таким образом, что он будет автоматически расширяться на компьютере с любым разрешением экрана. Такая верстка называется "резиновой" (названий много, может быть Вы называете по-другому, я не претендую здесь на стандарт).
 
Код у нас есть, система установлена, но интегрировать код в систему пока рано. Нужно подготовить полученный код к интеграции.
 
Как это делается, я расскажу в следующем разделе данной статьи.

Подготовка кода к интеграции в CMS
 


 

Сейчас мне нужно указать CMS места, в которых от страницы к странице будет изменяться информация (новости, тексты, заголовки, баннеры и т.д.).  Делается это путем установки в нужные места HTML-кода специального вида тегов. В новой версии системы я называю их редактируемыми блоками. Эти блоки должны начинаться с символа "{", состоять из заглавных букв латинского или любого другого алфавита, поддерживаемого системой, и заканчиваться символом "}". Вместо пробела нужно ставить символ "_".

Делается это так:

Находим в HTML-коде нужный блок кода. Например:

<h1>Стать партнёром</h1>

Убираем из него текст и вставляем редактируемый блок:

<h1></h1>

Еще раз обращаю Ваше внимание на то, что название редактируемого блока может быть ЛЮБОЕ, т.к. я часто получаю вопросы типа "Где мне взять список имен всех возможных редактируемых блоков?". Все они в Вашей голове! В макетах дизайнов страниц название блоков Вы придумываете сами.

Следите за тем, чтобы в макете не встречались два редактируемых блока с одинаковыми названиями. Могут возникнуть проблемы.

Заменяем все изменяемые блоки у страницы и получаем страницу вида:

Много блоков? Я же говорил, что на более простом сайте было бы проще.
Но мы не ищем легких путей! ;)

Прошу обратить внимание еще на один момент. В заголовок страницы и ее метатеги я тоже могу поставить редактируемые блоки:

<title></title>
<meta name='KeyWords' content='' />
<meta name='Description' content='' />

Делается это для того, чтобы эту информацию можно было менять не только вручную (как я покажу дальше), но и брать информацию из модулей. Например, вставлять в <title> заголовки статей или тексты их со специальных полей.

Аналогичную замену блоков делаем и для главной страницы.

Результат можно посмотреть здесь:

Обратите внимание на то, что у макета главной страницы я не стал отдельно заменять на блоки закладки "Владельцу сайта", "Разработчику сайта", "Фрилансеру", заголовок текста, сам текст. А вырезал весь код целиком, заменив его всего на один редактируемый блок. Дело в том, что по нашей задумке, текст в этом блоке должен меняться в зависимости от того, какую из вкладок нажал пользователь. Вот для того, чтобы сам текст, название и количество вкладок можно было менять, сделаю этот блок не на обычных текстах, а на одном из модулей CMS. На каком точно я еще не решил, но, скорее всего, на модуле меню.

И последний, но очень важный совет:
Обязательно! Все пути к картинкам, файлам, каскадным таблицам стилей и т.д. заменяйте с относительных на абсолютные. Т.е. если у Вас в коде написано: <img src="images/a.gif">, то перед вставкой кода в систему замените код на: <img src="/images/a.gif">. Просто ставьте / в начале любого относительного адреса. Причем, как в HTML-коде, так и в файлах css. Это поможет Вам избежать многих проблем в дальнейшем!

Все! HTML-код готов к интеграции в систему.
Переходим к следующему шагу!

Вход в систему управления сайтом

Теперь  приступаем к работе непосредственно с самой системой управления сайтом.

Для начала нужно войти в нее. Делается это очень просто:

  1. Открываем браузер
  2. В адресной строке набираем: http://www.[имя_домена].ru/cms/admin/
  3. В открывшемся окне вводим логин и пароль

Попадаем в систему.

Создание макетов дизайна сайта

Приступаем непосредственно к интеграции дизайна в CMS.

Заходим в систему (тут ссылка должна быть на соответствующую статью).

Переходим в "Меню разработчика" -> "Макеты дизайна сайта":

С помощью контекстного меню создаем новый макет дизайна.

Делается это щелчком правой кнопки мыши в любом месте рабочей области модуля. Затем, в открывшемся контекстном меню выбираем "Добавить новый макет дизайна":

В появившемся окне вписываем название макета и копируем полученный ранее HTML-код с редактируемыми блоками:

Нажимаем кнопку "Сохранить" и получаем первый макет дизайна. На его основе будут создаваться почти все страницы нового сайта.

Точно таким же образом создаем макет дизайна для главной страницы.

Получаем:

Макеты дизайна готовы. Теперь копируем в корневую директорию сайта папки со стилями, картинками и скриптами.

Можно переходить к созданию страниц.

 
31.10.2008 г.

Комментариев нет.


Добавить комментарий
Ваше имя:
Ваш e-mail:
Текст комментария:
 
Введите код:
 
Создание сайтов - веб-студия BinN
Система управления сайтом - CMS S.Builder v.4.0
При перепечатке ссылка на сайт webincubator.ru обязательна.