RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Шаблоны для CMS MODx


После установки CMS MODx, первым что нужно сделать: это создать тему. Конечно, можно воспользоваться демонстрационным шаблоном, добавив его при установке CMS,

но у нас ставится другая задача: сделать уникальный шаблон для MODx самим.

Для этого перейдем в Админ панель/элементы/управление элементами/шаблоны. Здесь, имеется ссылка: Новый шаблон. Переходим по этой ссылке:

В этой вкладке, мы и будем создавать новый уникальный шаблон для сайта на CMS MODx.

Итак, мы имеем четыре поля для введения описания шаблона MODx:

  • Поле имени шаблона. Так как мы создаем главную страницу назовите шаблон index_1.
  • Описание шаблона. Напишите краткое название Вашего сайта, у меня это будет: Лучшие бесплатные CMS интернета.
  • Существующие категории. Здесь можно выбрать категории: Content, Demo Content, Login, Forms… Выбираем категорию Content.
  • Поле новая категория. Оставляем это поле пустым.

Как, Вы уже успели заметить, в этой вкладке все поля пустые, и самое главное поле: Код шаблона (HTML) MODx, тоже пустое, его нам и предстоит заполнить HTML -кодом. Не переживайте, знания языка гипертекстовой разметки нам не пригодится, писать в ручную HTML — код мы не будем. Для создания шаблона MODx мы воспользуемся специальной программой.

Создание страницы при помощи программы FrontPage 2003.

Для написания HTML шаблона мы воспользуемся визуальным html-редактором для быстрого создания сайта и Web-страниц: FrontPage 2003.

Итак, приступим к созданию страницы при помощи программы: FrontPage 2003.
После установки и запуска программы, откройте вкладку: Файл/создать, у Вас появляется меню следующего вида:

Нажмите ссылку: Создать пустую страницу. Появляется HTML-код пустой страницы — это необходимые теги без которых страница даже пустая отображаться не будет.
В нижнем левом углу, Вы можете переключить режим отображения страницы, доступны следующие режимы:

  • Конструктор — режим создания страницы режиме визуального конструктра.
  • С разделением — режим создания страницы с разделением в одной половине экрана режим конструктора в другой половине режим кода HTML.
  • Код — режим создания страницы, при помощи языка HTML.
  • Просмотр — режим отображения страницы в браузере.

Для того, чтобы создать Веб-страницу, разложим создаваемую нами страницу на составные части:

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

Перейдем в режим: Конструктор и создаем в этом режиме, таблицы в соответствии с нарисованной нами структурой:

Отредактировать: размеры таблицы, фон, ширину границы, обтекание текстом и многое другое, можно при помощи вкладки: Таблица/Свойства таблицы/таблица:

После создания таблиц, заполним их соответствующим содержимым:

  • Шапку страницы — изображением для шапки.
  • Горизонтальное меню — ссылками на другие страницы сайта.
  • Контент — статьями и изображениями.
  • Вертикальное меню — ссылками на другие страницы сайта.
  • Подвал страницы — счетчиками посещений и баннерами.

Выделим таблицу шапки, и при помощи вкладки: Вставка/Рисунок/Из файла… загрузим в таблицу заранее подготовленное изображение для шапки:

Теперь, создадим горизонтальное меню. В каждой ячейке таблицы пишем название пунктов меню, и после этого изменяем фон всех ячеек таблицы. У меня в данном примере он черный:

Прикрепим к каждому из пунктов меню гиперссылку. Делается это при помощи выделения пункта меню и клика правой клавишей мыши:

В появившемся меню добавления гиперссылок вводим адрес гиперссылки:

И так добавляем гиперссылки к каждому из пунктов меню.

Вертикальное меню, делается точно также, как и горизонтальное меню. В поле контент пишем статью иллюстрированную изображениями. Кстати, при помощи программы Flash Menu Labs Pro Rus v2, очень легко создать флеш меню.

Для отображения в таблице «подвала», счетчика просмотров страницы, добавляем в таблицу Java — Script, с сервиса предоставляемого Яндексом.

После заполнения всех таблиц перейдите в режим просмотра страницы: Код. Копируем созданный в визуальном редакторе HTML — код и вставляем данный код в поле: Код шаблона (HTML).

И не забудьте все изображения (картинки, шапки), нужно перенести на хостинг и заново в шаблоне прописать путь к изображениям. Обычно на сервере под графические файлы создают каталог под названием images. В таком случае путь к изображению у нас будет иметь http://ваш сайт/images/изображение.png — это только показательный пример, у Вас может быть по другому.

В поле: Имя шаблона вводим — Мой шаблон, а в поле: Описание — Лучшие бесплатные CMS интернета. Нажимаем клавишу: Сохранить. Вот мы и создали уникальный шаблон для CMS MODx.

вверх