Керування шаблоном uCoz. Шаблони та Скрипти для ucoz Визначився з тематикою

Сьогодні мені хотілося б поділитись з вами своїм досвідом впровадження на сайті конструктора дизайну. Так як у мене використовується нестандартний дизайн – мені потрібно внести зміни таким чином, щоб можна було працювати із сайтом за допомогою конструктора.

Що це мені дасть?
По перше- Зручний спосіб керувати дизайном сайту та блоками, не заходячи в панель управління.
По-друге- Швидке додавання потрібних мені блоків, які вже будуть оформлені в потрібному дизайні.
По-третє- можливість використовувати в блоках можливості, що надаються системою - наприклад гаджети і віджети.
По-четверте- найважливіша перевага. При створенні каркаса система сама згенерує всі шаблони для всіх модулів - і мені не потрібно буде міняти їх руками, для кожного модуля, що використовується мною. Корисність очевидна - озброїться терпінням і почну вносити зміни.

Для початку потрібно переконатися, що конструктор активований - це можна перевірити, зайшовши в Панель керування. Якщо потрібна опція активована, переходимо до налаштування дизайну. Для цього потрібно зайти в Панель управління, Конструктор шаблонів, і за допомогою підказок оформити майбутній каркас належним чином. Принцип створення каркасів простий - існуюча структура сторінки поділяється на певні зони за змістом та призначенням. Наприклад, мій триколоночний дизайн, розбитий на подібні зони для створення каркаса, схематично виглядатиме так:

Отже, як бачимо малюнку, каркас складається з таких основних частин:
- У цьому блоці я розташую верхню частину (шапку) сайту.
- тут буде вся середня частина сайту, у тому числі ліва та права колонки та середня частина, в якій відображатиметься основний контент. - тут буде нижня частина сайту – лічильники, копірайти та інше. Окремо хотілося б зупинитися на описі коду
У використанні цього коду є певні нюанси, які потрібно знати. Зокрема це пов'язано з використанням модуля "Форум". У моєму випадку, якщо мені знадобиться використовувати цей модуль - моя структура каркаса передбачає, що модуль буде розташовуватися на всю ширину сторінки, тому що блоки container у мене включені до блоку middle. При генерації шаблону для модуля "Форум" система дивиться, як розташований блок middle та всю область, яку він займає, відводить під виведення форуму. Якщо я винесу код container правої колонки за межі блоку middle - то форум буде займати місце лівої та центральної колонки, а права залишиться на місці. Якщо я взагалі не використовую код middle - форум буде розміщений в тому ж місці, де виводиться решта контенту.

Результат: дизайн розбитий на три великі частини, кожна з яких має своє значення. Але - щоб я міг керувати блоками і згенерувати шаблони для всіх модулів мені потрібно розповісти системі про те, як будуть виглядати блоки, і де вони будуть розташовані.
Оскільки основна частина сайту (колонки) розміщена у блоці
- Додамо в нього потрібні коди.
За допомогою коду я визначаю в моєму дизайні область, в якій містяться блоки, наприклад "Опитування", "Календар", "Пошук" та інші. За допомогою цих кодів я точно вказую системі, де можна розміщувати нові блоки. У моєму випадку це ліва та права колонка середньої частини сторінки. Прописуємо коди в дизайн, наприклад:
Тепер мені потрібно якось розповісти системі, як виглядатиме мій майбутній блок. При генерації шаблонів система згенерує шаблони з урахуванням цієї інформації, і всі нові блоки відразу додаватимуться в потрібному мені дизайні. Найпрекрасніше в цьому те, що мені досить описати дизайн блоку лише один раз - все інше система зробить сама. Додаю блок у контейнер:

Окремо хотілося б зупинитись на зарезервованих кодах каркасу. Їх кілька – ось вони:
- : заголовок сторінки
- : шлях до файлу з css-стилями
- : основна частина сторінки
- : копірайт системи uCoz

У мене спливаючі вікна за стилем будуть такими ж, як і блоки – тому додаю такий код:

Нагадаю, у цій статті йшлося про нестандартні дизайни (створені вами). Режим конструктора підтримують усі стандартні

Починається з його ретельного планування. Щоб створити сайт необхідно визначитися з його тематикою, підібрати дизайн, який відображатиме цю тематику. Створити сайт на uCoz простіше, тому що в саму систему вже вбудовано безліч цікавих дизайнів, які Ви можете просто змінити під свої потреби.

Шаблон сайту- сукупність оформлених та зверстаних у HTML сторінок, графічних та службових файлів, які можуть використовуватись для створення типового сайту будь-якої спрямованості. Як правило, шаблони сайтів складаються з графічних файлів дизайну поширених форматів (PNG, JPEG, GIF), розміщених в окремій папці; статичних html-сторінок та файлів таблиці стилів (CSS), а в деяких випадках ще й Flash.

Простіше кажучи, шаблон - це зовнішній вигляд (дизайн) Вашого сайту, однаковий на однотипних сторінках. Завдяки існуванню шаблонів, Вам не потрібно на кожній сторінці прописувати той самий код: вставляти логотип сайту, робити заголовки одного кольору і т.д.

Шаблон сайту зазвичай складається з каркасу та власного дизайну. Каркас - це основа, як скелет: блоки, лінії, таблиці, куди нанизуватиметься дизайн. А дизайн – це краса Вашого сайту (колірна гама тексту, шрифт, фон, картинки тощо). На сьогоднішній день, щоб не винаходити велосипед, можна завантажити безліч готових шаблонів для будь-якого сайту.

Сайти uCoz - Управління дизайном

Перш за все хочеться відзначити, що після створення сайту, у Вас є можливість вибрати дизайн з величезної кількості запропонованих.

Зверху, найпершим розташований Глобальний блок. Це основа Вашого дизайну. Цей блок складається з контейнерів, і їх кількість залежить від дизайну Вашого сайту.

Верхня частина сайту- Редагується шапка сайту, графіка, малюнки і т.д.

Нижня частина сайту- Редагується нижня частина сайту, сюди можна поставити лічильники.

Перший контейнер (лівий)- Редагуються блоки, які знаходяться зліва.

Другий контейнер (правий)— редагуються блоки праворуч.

У Перший та Другий контейнери втручатися немає взагалі жодного сенсу, тому що їх набагато зручніше редагувати за допомогою Конструктора в Адмін-барі із самого сайту. (У статті "Управління сайтом. Перше редагування")

Шаблони сторінок сайту Ucoz

Майже кожен модуль сайту uCozскладається з наступних шаблонів сторінок:

Головна сторінка модуля— сторінка, на якій відображаються матеріали всіх розділів та категорій (загальний список матеріалів)

Сторінка зі списком матеріалу розділу— сторінка, на якій відображаються матеріали одного розділу (скільки розділів — стільки сторінок, на сайті uCoz може не бути жодного розділу)

Сторінка зі списком матеріалу категорії— сторінка, на якій відображаються матеріали однієї категорії (на сайті має бути хоча б одна категорія)

Усі перелічені вище сторінки мають майже однаковий зовнішній вигляд.

Сторінка матеріалу та коментарів до нього- сторінка, на якій безпосередньо розташований доданий Вами матеріал (стаття, файл, фотографія тощо)

Вигляд матеріалів — як будуть виглядати матеріали у списку матеріалів на перших трьох сторінках: Головна сторінка модуля, Сторінка зі списком матеріалу розділу та Сторінка зі списком матеріалу категорії.

Сторінка додавання/редагування матеріалів- Форма додавання матеріалу.

Цим усім сторінкам відповідають однойменні шаблони. Вам відразу зрозуміло, що саме і де Ви хочете змінити. І навіть якщо досі Вам слабо зрозуміло, що з усім цим робити. Зробіть візерунок шаблон і сміливо експериментувати.

Незабаром Ви зрозумієте що і до чого!

Ось простий приклад: припустимо Ви хочете, щоб на ВСІХ сторінках Вашого сайту було написано Ваше ім'я. Для цього Вам лише потрібно написати своє ім'я в шаблоні «Редактора сторінок» і на всіх сторінках автоматично з'явиться Ваше ім'я.

Або, Ви хочете, щоб усі файли завантажувалися шляхом натискання певної кнопки, Вам достатньо один раз прописати це у відповідному місці (Каталог файлів - Вигляд матеріалу та коментаря до нього) і більше не повертатися до цього питання.

Але це прості приклади, насправді можливості ці набагато ширші. Більше того в інтернеті існує вже безліч готових прикладів, де Ви просто копіюєте код і вставляєте у свій шаблон, і Ваш сайт може знайти ті функції, які Ви хочете.

Насправді, це дійсно дуже зручно. І як тільки Ви спробуєте щось змінювати, і у Вас почне вийде, думаю, що незабаром Ваш сайт швидко зміниться до невпізнання, наприклад, цей сайт — це перероблений стандартний дизайн uCoz №839.

Якщо Ви хочете першими дізнаватися про нові статті на сайті!

У наш час із процедурою створення сайтів знайомі дуже багато хто. Зараз це досить популярно, оскільки багато хто заробляє цим на життя. Що ми повинні знати про те, як створити свій шаблон для сайту ucoz, перш ніж починати це робити? Найголовніше - це те, що контентидля створення шаблонів сайтів існую платніі безкоштовні.

Контент ucoz- є однією з найпоширеніших безкоштовних системдля створення веб-сайтів. Протягом 9 років ця компанія створила понад мільйон активних сайтів і з кожним днем ​​ця цифра все вище та вище. Чимало користувачів працюють саме системою, тому що знаю, що вона їх не підведе.

Основні способи створення шаблонів

Необхідною основою для того, щоб знати, як створити свій шаблон для сайту ucoz, є знання та розуміння основ роботи сайту. Для початку ми повинні ознайомитися з принципами побудови каркаса шаблону uCoz. Інструкцію цього каркасу можна знайти в Панелі керування » Керування дизайном » Конструктор шаблонів » Приклад каркасу.

Розрізняють шаблони гумові та фіксовані. Гумовиминазивають шаблони, які розтягуються по ширині екрану, а фіксовані— це ті, у яких ширина шаблону встановлено і не залежить від ширини екрана комп'ютера користувача. Творці сайтів рекомендують створювати фіксованим, оскільки робота з ним набагато легша.

1. Першим та найпоширенішим є створення шаблону з нуля. Шаблон зазвичай малюють у програмі Photoshop, потім його необхідно підлягати та адаптуватися під систему сайту uCoz.

2. Також можна створити шаблон з HTML-шаблону. Один із найпростіших способів створення шаблону, так вже є готовий шаблон і нам необхідно його лише розмітити згідно з правилами створення каркасного шаблону uCoz.

3. Ще один спосіб створення - це шаблон з PSD-макету. Досить нелегкий спосіб, який потребує додаткових знань. У Вас є шаблон у вигляді PSD-файлу. Його потрібно відкрити у програмі Photoshop, розрізати та адаптувати, зберігаючи файлами jpg,png, gif. Після цього верстати як звичайну html-сторінку.

4. Адаптація шаблону з іншого CMS. Найскладніший з усіх можливих способів створення шаблонів для uCoz. Для цього Вам необхідно завантажити з будь-якого сайту, що пропонує такі види шаблонів, файл CMS та адаптувати його структуру до структури шаблону uCoz.

Мінімалістські та наворочені, кольорові та однотонні, темні та світлі - шаблони для uCozширокий вибір оформлення сайтів. Конструктор сайтів uCoz став популярним через свою простоту, доступність та універсальність. Як правило, користувачі цього движка - новачки, які не хочуть вивчати будь-які мови програмування, а просто хочуть створити якийсь простенький портал. Сайти створювані в системі uCoz це як правило - ігрові портали, онлайн кінотеатри та варези. Саме їхній тематиці і присвячена більшість шаблонів на сайті. Щоправда останнім часом, з розвитком смартфонів, багато хто став приділяти серйозну увагу і мобільним версіям сайтів, тому PDA-шаблони- так само не залишаться поза увагою.

Шаблони для uCoz можна розділити не тільки за "жанри" - ігрові, кіно, програми, магазини і т.д. Але й за глобальнішими розділами, а саме: Безкоштовні, Платні, Унікальні, Адаптації. Адаптації хочеться окремо виділити, тому що це дуже популярна тематика, оскільки шаблони зроблені для одних движків - багато хто хотів би бачити і на uCoz, або навіть шаблони деяких сайтів. Я зокрема займаюся адаптацією шаблонів, окремих елементів і скриптів зі сторонніх движків і сайтів - під uCoz.

Не всі (крім моїх) шаблони для uCoz оснащуються інструкцією по встановленню, тому тут я розповім коротко і як це робиться. Деякі шаблони немає також конструктора, тобто встановлюються за допомогою установки основного шаблону - задає дизайн сторінкам відразу всіх модулів, а за допомогою установки шаблону кожної конкретної сторінки окремо. Для всіх інших - ця інструкція буде актуальна.

Як встановити шаблони на uCoz?

1. Завантажте архів із шаблоном та вийміть із нього всі файли. Зайдіть в панель керування і залийте необхідні файли в корінь сайту через файловий менеджер або FTP.

2. Встановлення каркасу. Скопіюйте код каркаса та вставте в Конструктор шаблонів.

3. Налаштування стилів. Якщо файли стилів CSS знаходяться у файловому менеджері, то шаблон CSS - нічого вставляти не треба. Так наприклад роблю я, оскільки при використанні спеціального шаблону стилів - є ймовірність що uCoz "зламає" що-небудь у каркасі, наприклад, такий косяк системи. Втім якщо в завантаженому шаблоні все ж таки використовується шаблон "таблиця стилів CSS", то знаходите у вашому архіві відповідний документ, копіюєте його вміст - і вставляєте в цей шаблон стилів.

Хоча я б все ж таки в цьому випадку порекомендував створити наприклад файл style.cssі вставити всі стилі в нього, а сам файл залити у файловий менеджер у папку css, а потім цей файл зі стилями прописати в шаблоні або шаблонах між тегами таким чином .

Про систему uCoz

UCoz – безкоштовний хостинг та конструктор сайтів, створений ще у 2005 році. На даний момент у системі є понад 20 модулів, які дозволяють створити повноцінний сайт різної спрямованості. uCoz швидко набув популярності за рахунок своєї простоти і доступності, хоча багато хто за це і недолюблює, втім недоліки - не відкидають переваг. Трохи статистики: uCoz входить до 20 найпопулярніших інтернет ресурсів у Росії, а також на ньому створено вже більше 1 мільйона сайтів!

Ви створили свій сайт на хостингу Ucoz.ru? Тоді ви повинні ознайомитися з параметрами ведення сайту – з налаштуваннями. Усі ми знаємо, що оригінальність порталу насамперед вирішує його зовнішній вигляд. Для зміни вигляду сайту вам знадобляться готові схеми. Можна скористатися стандартними, але шаблон сайту Ucoz не стане вашою фішкою. А якщо ви хочете наголосити на унікальності свого вузла, то необхідно створити власний дизайн схеми. Але й для недосвідчених розробкою стилю користувачів Ucoz є шаблони, надані аматорами чи веб-майстрами. Розташовуються вони на сайтах або форумах, які ви з легкістю знайдете у пошукових системах всесвітньої мережі.

Розкажу необізнаним про те, як встановити шаблон на Ucoz. Ви знайшли відповідну схему, завантажили та витягли з архіву потрібний нам файл. Слідом виникає питання про те, що ж робити далі. Потрібно зрозуміти, як встановити шаблон на Ucoz. Розглянемо це докладніше.

Не завжди їх творці передбачають той факт, що користувач не знає, як поміняти шаблон на Ucoz, і не турбують себе вкладенням в архів інструкції, тому відкриваю вам цю таємницю. Отже, ми встановлюємо шаблони на вашому сайті. Для початку натиснемо на кнопку «файловий менеджер». Файли, які були завантажені раніше, знадобляться для заповнення кореня сайту. Тобто файл, а точніше - папка, що містить зображення для вашого веб-сайту, має бути у файловому менеджері. Подивіться зміст архіву. Там повинні бути присутніми 2 блокноти з кодами та папка для файлового менеджера. "Конструктор шаблонів" - це те місце, в яке потрібно ввести один із кодів у блокноті. Інший містить CSS-код сайту (він зазвичай буває розширення.css), яким слід замінити весь вміст з «Таблиці стилів CSS», що знаходиться в Адмін. Панелі.

Папка у файловому менеджері, у яку ви «заллєте» папку із шаблоном, потрібно назвати аналогічно другий. Зручніше встановити схему за допомогою FTP, а головне – це заощадить ваш час. Завдяки FTP можна розмістити велику кількість файлів. Якщо ж жоден з представлених варіантів дизайнерських схем вас не влаштує, завжди можна створити індивідуальний шаблон. Крім схем звичайного типу, існують також види DLE і PSD, які ви можете встановити в тому випадку, якщо вам сподобається саме такий дизайн. Встановити його буде трохи складніше.

У Ucoz PSD-формату? Спочатку його потрібно перетворити та скидати в HTML-схему. Для цього вам знадобляться дві програми: PhotoShop та Dremweaver. Змінюємо PhotoShop Document (PSD) у PhotoShop. Зверстати файл потрібно буде в Dremweaver, щоб отримати схему HTML. Подробиці про ці операції можна знайти на сайтах, що спеціалізуються на цих темах. Далі потрібно змінити текст вашого сайту за допомогою Ви можете просто змінювати текст, який надано в шаблоні, на свій, так буде легше зорієнтуватися і трохи вникнути в позначення, а також дізнатися, що деякі коди містять ще один. Для більш глибокого вивчення можна звернутися до форуму технічної підтримки. Заповнюємо таблицю CSS, вводимо код каркасу сайту та заповнюємо ним файловий менеджер. І дизайн вашого сайту готовий.

Тепер можна розглянути інсталяцію DLE-шаблону. Також вантажимо папку з картинками та CSS-кодом, та інші. Після цього відкриваємо mailn.tpl за допомогою блокнота. Копіюємо все, що вийшло в блокноті, після чого вставляємо у відділ редагування сторінок, що знаходиться у пункті «Сторінки сайту». Потім заходимо у швидку заміну ділянок шаблону. Там прибираємо (THEME) і залишаємо порожнє нижнє поле, а верхнє заповнюємо - (THEME). Ну і, нарешті, редагуєте схему завдяки кодам.

Потрібно заздалегідь підготуватися до роботи зі схемами, наприклад вам дуже допоможуть знання в області HTML. Загалом кожен зможе створити свій унікальний сайт, використовуючи цю нескладну інструкцію, яка підкаже новачкові про те, як встановити шаблон на Ucoz.