Расскажу на конкретном примере, как я сделал шаблон для uCoz. Это не подробная инструкция и не призыв к действию, это простой рассказ о том, как я сделал шаблон. Напишу о последнем шаблоне, есть даже видео. Хотел заснять весь процесс полностью, но как-то не стал тратить на это время, да и секретов пока не стал раскрывать, снял только создание макета и верстку.

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

1. Определился с тематикой

Хотел сделать что-то в тоже время нужное и не сложное. Кстати, у меня есть еще один список – это список тематик шаблонов.

2. Сделал макет (2 часа)

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

Вот видео, как это было.

Видео изъято.

3. Сверстал (4-5 часов)

Тут все понятно. Сначала просто сверстал как есть, а потом добавил адаптивность под мобильные телефоны. Для этого случая не делал макет, придумывал на ходу. В видео есть момент, когда из-за ошибки у меня получился не такой вид материалов, как в макете, но мне он понравился, я его оставил.

Видео изъято.

4. Натянул шаблон на uCoz

Ну, не просто натянул и все, по плану было дорабатывать тему прямо в панели управления uCoz. Я так всегда делал и буду делать. Тщательно страницы не продумывал, но не считаю, что сделал как попало. Скорее, по простому, но и стандартными оставлять не хотел.

5. Собрал архив шаблона: раскидал код по файлам и написал инструкцию

Где-то 2 дня я писал инструкцию и распределял код по файлам и папкам. Это, думаю, можно было сделать за 2-3 часа.

6. Создал демо-сайт

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

7. Сделал презентацию шаблона

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

8. Добавил шаблон на uTemplate

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

Обычно я все долго, шаблон делаю в течении месяца, не торопясь. Тут я работал более интенсивно, в течении 10 дней. В этом промежутки есть дни, когда я никак не продвигал работу. Делаю долго не просто по своей лени, а из-за загруженности на учебе. С сайтом, в общем-то такая же ситуация.

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

В этом случае вы можете быть уверены в качестве шаблона и его работоспособности. Безусловно, можно нагуглить или использовать различные варезники - но очень часто на них попадаются рипы, нерабочие дизайны или еще хуже файлы с вирусами. Поэтому подойдите к вопросу выбора источника со всей серьезностью, так как от этого зависит не только успех проводимой операции, но и безопасность вашего сайта. В рамках этой статьи я буду устанавливать бесплатный шаблон DesktopChaos с uTemplate.pro.

Загрузка файла с шаблоном

Итак, загружаем архив с шаблоном:

Внутри архива находятся несколько вложенных папок:

• папка с изображениями (images, img);
• папка со скриптами (js);
• папка со стилями (css);
• папки с кодами Глобальных блоков, Информеров и т.д.

Также в архиве, как правило, присутствуют:

• инструкция.txt (ReadMe.txt) - настоятельно рекомендую обязательно прочитать;
• конструктор шаблонов.txt (tmpl.txt) - общий код каркаса;
• таблица стилей.txt (css.txt, style.txt) - файл с набором стилей;
• вид материалов.txt - содержит код вида материалов;
• и др. текстовые файлы с кодами, которые нужны для полной установки шаблона.

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

Делаем резервную копию текущего шаблона

Прежде чем приступить к установке нового шаблона рекомендую сделать бэкап текущего шаблона (на всякий случай)

Для этого - заходим в "Панель управления" своего сайта - "Дизайн" - "Резервное копирование шаблонов":

Нажимаем в правом верхнем углу кнопку "Создать резервную копию", после чего вы увидите появившийся резервный архив с вашим текущим шаблоном вида "1372338464.zip" с датой создания в скобках:

И, еще один момент: перед установкой нового шаблона рекомендую активировать все необходимые модули : те, которые вы в данный момент хотите использовать и те, которые возможно вы захотите использовать в будущем. Это делается для того, что бы ваш новый шаблон корректно установился и отображался во всех модулях.

Пошаговая инструкция по установке шаблона на uCoz:

Установка шаблона делается согласно той инструкции, которая находится внутри вашего архива с шаблоном . Как я уже говорил в рамках этой статьи я буду показывать установку шаблона DesktopChaos .

Шаг-1.

Загружаем папку с изображениями images к себе на сервер. Это можно сделать двумя способами.

Первый способ - через FTP-клиент, например, FileZilla. Скачиваем и устанавливаем программу: http://filezilla.ru/get/ .

После этого, на главной странице Панели Управления жмем и задаем новый пароль:

После этого открываем ftp-менеджер FileZilla, в самом верху вводим Хост, Имя пользователя и Пароль, нажимаем "Быстрое соединение":

В левой части менеджера находим папку с картинками своего шаблона, жмем на ней правой кнопкой мышки, в появившемся меню нажимаем "Закачать на сервер". Готово. Теперь картинки находятся на нашем сервере.

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

Второй способ - загрузка изображений через Файловый менеджер . Переходим на главную страницу ПУ и нажимаем на "Файловый менеджер":

В право верхнем углу жмем Создать папку, вводим название images и нажимаем Enter:

Заходим в эту папку. Что бы закачать в нее картинки нажимаем "Выберите файл", выбираем картинку и жмем Загрузить файл. Зеленым плюсиком можно добавлять поля для нескольких файлов.

Таким образом закачиваем на сервер все картинки из папки images.

Шаг-2.

Устанавливаем (если нужно) значение тега . Заходим в "ПУ (Панель Управления)" - "Настройки" - "Общие настройки" и в соответствующее поле вставляем код:

Шаг-3.

Устанавливаем Таблицу стилей. Для этого, находим в архиве файл "Таблица стилей.txt", открываем и копируем из него весь код (Ctrl+A, Ctrl+C) и вставляем его вместо старого кода в "ПУ" - "Дизайн" - "Управление дизайном (CSS)" - "Таблица стилей (CSS)":

Шаг-4.

Устанавливаем код из файла "Конструктор шаблонов". Открываем файл из архива "Конструктор шаблонов.txt", копируем все содержимое и вставляем его в "ПУ" - "Дизайн" - "Конструктор шаблонов", нажимаем кнопку "Создать шаблоны":

Шаг-5.

Теперь, аналогичным образом переносим содержимое файла "Вид материалов.txt" в вид материалов модулей: "Новости сайта", "Блог", "Каталог файлов", "Каталог статей". Идем в "ПУ" - "Дизайн" - "Управление дизайном (шаблоны)":

Код из файла "Вид комментраиев.txt” аналогично копируем в "Комментарии" - "Вид комментариев".

Шаг-6.

Создаем Глобальный блок. Переходим в "ПУ" - "Дизайн" - "Управление дизайном (шаблоны)" - "Глобальные блоки":

В правом верхнем углу жмем "Добавить блок", в появившемся поле пишем названия блока INFO и нажимаем "Добавить":

Находим в архиве папку "Глобальные блоки" и открываем файл "INFO.txt", копируем содержимое файла и вставляем в только что созданный глобальный блок INFO, сохраняем:

Шаг-7.

Устанавливаем необходимые значения:

• Название информера: Последние новости;
• Раздел: Новости сайта (либо "Блог", либо "Каталог файлов", либо "Каталог статей");
• Тип данных: Материалы;
• Способ сортировки: Дата добавления материала D;
• Количество материалов: 5;
• Количество колонок: 1.

Жмем "Создать".

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

Код данного информера $MYINF_1$ вставляем в созданный нами ранее глобальный блок INFO .

Информер для форума создается похожим образом.

На этом установка шаблона DesktopChaos завершена.

К стати, если вы так и не разобрались с установкой нового шаблона на свой сайт, то в официальном магазине uTemplate.pro можно заказать услугу по установке шаблона.

Вы создали собственный сайт на хостинге 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.

Расскажу на конкретном примере, как я сделал шаблон для uCoz. Это не подробная инструкция и не призыв к действию, это простой рассказ о том, как я сделал шаблон. Напишу о последнем шаблоне, есть даже видео. Хотел заснять весь процесс полностью, но как-то не стал тратить на это время, да и секретов пока не стал раскрывать, снял только создание макета и верстку.
У меня есть список идей для материалов и статей, которые нужно когда-то добавить на сайт, в этом списке сейчас 20 пунктов, мне же из этого списка нравится больше подобные темы, где не нужно давать инструкций, где я свободно говорю о том о сем.

1. Определился с тематикой
Хотел сделать что-то в тоже время нужное и не сложное. Кстати, у меня есть еще один список – это список тематик шаблонов.

2. Сделал макет (2 часа)
По структуре решил сделать простой и понятный шаблон. Заранее определился что вообще будет, а расположение элементов только примерно. Открыл фотошоп, посмотрел несколько аналогов, это интерфейсы на тему образования.

3. Сверстал (4-5 часов)
Тут все понятно. Сначала просто сверстал как есть, а потом добавил адаптивность под мобильные телефоны. Для этого случая не делал макет, придумывал на ходу. В видео есть момент, когда из-за ошибки у меня получился не такой вид материалов, как в макете, но мне он понравился, я его оставил.

4. Натянул шаблон на uCoz
Ну, не просто натянул и все, по плану было дорабатывать тему прямо в панели управления uCoz. Я так всегда делал и буду делать. Тщательно страницы не продумывал, но не считаю, что сделал как попало. Скорее, по простому, но и стандартными оставлять не хотел.

5. Собрал архив шаблона: раскидал код по файлам и написал инструкцию
Где-то 2 дня я писал инструкцию и распределял код по файлам и папкам. Это, думаю, можно было сделать за 2-3 часа.

6. Создал демо-сайт
Да, для шаблона сделал еще один сайт, чтобы проверить установку шаблона, проверить инструкцию. Обнаружил ошибки как в инструкции, так и в самом шаблоне. К тому же в это время проверял тему в разных браузерах, нашел еще больше ошибок. Все исправил.

7. Сделал презентацию шаблона
Описание шаблона я сделал уже печатая инструкцию, а теперь хотелось бы добавить длинную яркую презентацию шаблона.

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

Обычно я все долго, шаблон делаю в течении месяца, не торопясь. Тут я работал более интенсивно, в течении 10 дней. В этом промежутки есть дни, когда я никак не продвигал работу. Делаю долго не просто по своей лени, а из-за загруженности на учебе. С сайтом, в общем-то такая же ситуация.

Создавая свой сайт каждый хочет чтобы его сайт отличался от других. Для этого нужен уникальный дизайн (купить в магазине шаблонов). В этой статье мы рассмотрим как создать свой уникальный дизайн из стандартного дизайна ucoz. Для того чтобы изменить дизайн под себя нужно зайти в раздел «Управление дизайном» в панели управления. Для этого авторизуйтесь в вебтобе системы ucoz и перейдите в раздел Дизайн> Управление дизайном(шаблоны) в панели управления. Откроется соответствующая страница.

В этом окне вы увидите из чего состоит дизайн сайта. Это отдельные компоненты, которые вместе составляют общий рисунок. Чтобы их изменять ucoz предоставил несколько инструментов которые мы сейчас разберём. В верхней части окна есть кнопка «Конструктор» с помощью которого вы сможете редактировать ваш сайт в окне браузера прямо на странице сайта. Пока давайте рассмотрим инструменты которые находятся в панели управления сайтом. Нажмите на кнопку «Верхняя часть сайта» и откроется окошко редактирования данного шаблона дизайна сайта.

Но многие не знают языка html поэтому мы выберем другой путь. Мы воспользуемся визуальным редактором. Нажмите кнопку визуальный редактор в нижней части окна. Откроется визуальный редактор верхней части шаблона.

Сверху вы увидите строку $WDAYS$ $DATE$ $TIME$ мы изменим их порядок так $DATE$ $WDAYS$ $TIME$. Под ней находится строка $USERNAME$, |Группа "$USER_GROUP$" | RSS которая означает что вы зарегистрировались под именем $USERNAME$ и входите в группу "$USER_GROUP$" изменим её на $USERNAME$, |Группа "$USER_GROUP$" | IP: $IP_ADDRESS$

IP: $IP_ADDRESS$ показывает ip зарегистрированного пользователя. Далее идёт запись МОЙ Сайт вы можете изменить её на что угодно в зависимости от того как называется ваш сайт. Далее нажмите кнопку сохранить для сохранения изменений. Таким образом вы можете изменять другие шаблоны входящие в дизайн сайта.
Чтобы без проблем пользоваться отредактированным шаблоном надо создать резервную копию. Она поможет в том случае если вы нечаянно испортите шаблон при редактирование. Чтобы создать резервную копию пройдите в раздел "редактирование шаблонов" и нажмите на кнопку "Backup шаблонов" и нажмите "резервное копирование шаблонов".