Цей сайт призначений, в першу чергу тим, хто хоче зайнятися web-розробкою. Ви зможете ознайомитися з матеріалами по сайтобудування, починаючи від проектування дизайну, структури, і закінчуючи просуванням уже готових сайтів. Незабаром сайт повинен стати великою колекцією корисних матеріалів, рад, уроків, сервісів і посилань на допомогу як досвідченому web-розробнику, так і початківцям майстрам.
Почитати докладно про що цей блог
Незабаром в моєму блозі з'являться цикли статей «Створення сайту з нуля», «Робимо гнучкий, функціональний блог», «Інтернет-магазин на СMS / CMF MODx» і багато-багато іншого. Не перемикайтеся.
Стежити за появою нових статей на сайті. RSS стрічка.
Ну що ж, тепер ми поступово переходимо до більш цікавим речам, а саме до інтеграції дизайну в MODx CMS. У вас встановлена і налаштована система управління сайтом, і тепер саме час підшукати відповідний дизайн для майбутнього сайту. Для того, щоб полегшити вам цю задачу, я зробив добірку ресурсів з безкоштовними шаблонами. де ви обов'язково зможете вибрати що-небудь для себе.
Щоб ви не витрачали час на пошуки готових шаблонів для модекс, я написав замітку 100 000 шаблонів для MODx. з якої ви теж можете ознайомитися, якщо ще цього не зробили.
Як ми домовлялися, починати нашу роботу в MODx ми будемо з створення сайту візитки. Я підібрав відповідний шаблон, який підійде нам для виконання нашого завдання. Це буде шаблон від OS-templates.com. Досить симпатичний, свіжий шаблон в західному стилі. У ньому вже організовані сторінки різного виду:
- головна сторінка з jQuery галереєю
- внутрішня сторінка з двох колонок з додатковою навігацією
- сторінка з однієї колонки на всю ширину шаблону
У викачаному архіві лежить 3 папки і 3 HTML-файлу.
У папці «images» зберігаються зображення, використані для дизайну сайту, в папці «scripts» -скріпти, що підключаються для роботи jQuery галереї на головній сторінці, а в папці «styles» зберігаються CSS-файли які визначають зовнішній вигляд нашого шаблону.
HTML-файли, які лежать в архіві це ні що інше, як HTML розмітка для кожної з трьох видів сторінок: index.html - головна сторінка, style-demo.html - внутрішня сторінка з двох колонок з додатковою навігацією, full-width.html - сторінка з однією колонкою на всю ширину шаблону. Хто забув подивитися, як ці сторінки виглядають, той швидко йде на демонстраційну сторінку шаблону і в верхньому меню спочатку натискає на пункт «Style-demo», потім клацає на пункт «Full-width».
Всі файли шаблонів, які використовуються системою управління, зберігаються в папці: assets / templates. На локальному хостингу повний шлях до цієї папки у мене такий: z: \ home \ site \ www \ assets \ templates. Там уже є три папки, вам не потрібно чіпати тільки папку «manager», в якій зберігаються системні шаблони. Решта можете видаляти. І створіть папку для нашого майбутнього шаблону, наприклад - «site», в яку розпакуйте вміст завантаженого архіву з шаблоном.
В адміністративній панелі слідуємо по вкладках: Елементи → Управління елементами → Шаблони. Ось тут ми і будемо створювати нові або настроювати вже створені шаблони. Ви побачите, що два шаблони вже створено. Демонстраційний шаблон «MODxhost» можете видалити, щоб не муляв очі, а ми займемося зміною шаблону «Minimal Template», який, як ви пам'ятаєте з уроку з налаштування системи, у нас встановлений шаблоном за замовчуванням.
Для видалення або редагування необхідно натиснути на посилання з назвою шаблону. Після видалення демонстраційного шаблону приступаємо до редагування «Minimal Template».
Давайте спершу будемо створювати шаблон для головної сторінки нашого сайту з jQuery галереєю. Для цього при редагуванні шаблону в полі «Ім'я шаблону» впишіть назву шаблону, а в полі «Опис» - короткий опис, щоб не заплутатися, якщо шаблонів буде багато. В область «Код шаблону (HTML)» потрібно вставити HTML-розмітку нашої головної сторінки, у нас ця розмітка вказана в файлі index.html, який ми зовсім недавно поклали в папку assets / templates / site. Тому ми просто копіюємо в цю область весь вміст файлу index.html попередньо видаливши всі, що там було до цього. На малюнку нижче ви можете подивитися, як я заповнив ці поля, ви можете зробити точно так же. Після заповнення натисніть на кнопку «Зберегти» у верхній частині сторінки.
Поки вона виглядає не дуже вражаюче, адже у нас порушилися всі шляхи до підключається файлів стилів, зображень і скриптів, тому ми зараз займаємося їх виправленням. Зверніть увагу, що при підведенні курсору миші до самого верху сторінки, вже з'являється панель управління сторінкою, я зупинюся на ній пізніше, зараз же головне зробити правильне відображення шаблону, для чого ми знову йдемо на сторінку редагування шаблону: Елементи → Управління елементами → Шаблони → Головна сторінка .
Починаємо змінювати шляху до файлів і зображень в шаблоні.
Спочатку пропишемо базовий URL для нашого сайту, щоб застерегтися від неправильного розпізнавання відносних шляхів. Для цього всередині тега
прописуємо наступне:Так як вкладеність папок змінилася при інтеграції дизайну в систему управління, то для всіх шляхів нам необхідно додати наступну конструкцію.
Додавайте акуратно, нічого не пропустіть, щоб не повертатися до цього знову і знову, потрібно змінити все шляху в яких зустрічаються styles, scripts і images.
Для прикладу, ось як виглядає шлях підключення CSS стилів в оригіналі:
А ось так вже після зміни:
Відмінно, з завданням ми впоралися чудово. Якщо у вас щось не вийшло, можете завантажити змінений мною файл і скопіювати його вміст в область «Код шаблону (HTML)» при редагуванні шаблону головної сторінки.
На цьому інтеграція дизайну головної сторінки закінчена, залишилася тільки додаткова настройка. Скажіть, чи знаєте ви якусь систему управління, в яку дизайн вбудовується так швидко? Я такі CMS ще не зустрічав.
У наступному уроці ми навчимося створювати динамічні меню і познайомимося з основними принципами роботи з дизайном в MODx. Ви дізнаєтеся, що таке чанкі і як з ними працювати. А поки я пропоную вам подивитися скрінкасти по сьогоднішнього уроку.
Розмір: 3.3 мб. Тривалість: 2 хвилини.