Как делать шаблоны для ucoz. Как установить шаблон на uCoz. Пошаговая инструкция. Добавил шаблон на uTemplate

Ucoz предлагает 246 оригинальных дизайнов на выбор, но обычно выбирают из 10-20 особенно удачных, соответственно уже приглядевшихся и надоевших. А давно известно, что для того, чтобы осуществить успешное продвижение своего сайта, следует создать свой оригинальный и привлекательный дизайн сайта, к которым, разумеется, нельзя отнести шаблонный дизайн. Ну так меняем дизайн Ucoz Юкоз на свой или выбираем шаблоны для uCoz . Если сперва сложно сделать дизайн с нуля, предлагаю изменить уже существующий.

Заходите в редактор страниц, выбираете пункт "общие настройки”. Нажимаете напротив строки "Дизайн сайта:” – "выбрать дизайн” , открывается окно выбора дизайна. Выбираете тот дизайн Ucoz Юкоз , который вам наиболее приглянулся, устанавливаете на сайт и начинаете редактировать.

Для примера расскажу, как изменить картинку шапки сайта. Все графические изображение, используемые в дизайне, описаны в файле стилей style.css , либо в html-шаблоне страниц. Рассмотрим два варианта:

1. Картинки прописаны в CSS. В верхней панели выбираете "Дизайн” – "Управление дизайном (CSS)”. В окне ниже откроется собственно сам файл стилей. Находим в нем строчку вида: #header {background:url(‘/ee.jpg’) no-repeat;height:182px; ……} – это адрес вашей шапки сайта. (в разных шаблонах по разному, вам придется найти, какая картинка к чему относится)

2. Картинки прописаны в Html-шаблоне. Там же в верхней панели выбираете "Дизайн” – "Управление дизайном (шаблоны)”. В окне ниже выбираете "верхняя часть сайта”, ищете строчку вида: Опять же придется определить, какую именно картинку вы хотите поменять.

Чтобы узнать, какая именно картинка вам нужна, перейдите по адресу вида: "адрес вашего сайта/адрес картинки из шаблона” – откроется картинка, найдете нужную вам.

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

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

Замечание: если после этого вы смените шаблон сайта, выберете новый шаблон, то все ваши изменение в html и css кода, разумеется, пропадут.

Начинается с его тщательного планирования. Чтобы создать сайт необходимо определиться с его тематикой, подобрать дизайн, который будет эту тематику отражать. Создать сайт на uCoz проще, так как в саму систему уже встроено множество интересных дизайнов, которые Вы просто можете изменить под свои нужды.

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

Проще говоря, шаблон — это внешний вид (дизайн) Вашего сайта, который одинаковый на однотипных страницах. Благодаря существованию шаблонов, Вам не нужно на каждой странице прописывать один и тот же код: вставлять логотип сайта, делать заглавия одного цвета и т.д.

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

Сайты uCoz — Управление дизайном

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

Сверху, самым первым расположен Глобальный блок . Это основа Вашего дизайна.Блок этот состоит из контейнеров, и их количество зависит от дизайна Вашего сайта.

Верхняя часть сайта — редактируется шапка сайта, графика, рисунки и т.д.

Нижняя часть сайта — редактируется нижняя часть сайта, сюда можно поставить счетчики.

Первый контейнер (левый) — редактируются блоки, который находятся слева.

Второй контейнер (правый) — редактируются блоки, который находятся справа.

В Первый и Второй контейнеры вмешиваться нет вообще никакого смысла, так как их намного удобнее редактировать с помощью Конструктора в Админ-баре с самого сайта. (В статье «Управление сайтом. Первое редактирование «)

Шаблоны страниц сайта Ucoz

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

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

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

Страница со списком материала категории — страница, на которой отображаются материалы одной категории (на сайте должна быть хотя бы одна категория)

Все перечисленные выше страницы имеют практически одинаковый внешний вид.

Страница материала и комментариев к нему — страница, на которой непосредственно расположен добавленный Вами материал (статья, файл, фотография и т.д.)

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

Страница добавления/редактирования материалов — форма добавления материала.

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

Очень скоро Вы поймете что и к чему!

Вот простой пример : допустим Вы хотите, чтобы на ВСЕХ страницах Вашего сайта было написано Ваше имя. Для этого Вам всего навсего нужно написать свое имя в шаблоне «Редактора страниц» и на всех страницах автоматически появится Ваше имя.

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

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

На самом деле это действительно очень удобно. И как только Вы попробуете что-то менять, и у Вас начнет получатся, думаю, что вскоре Ваш сайт быстро измениться до неузнаваемости, например этот сайт — это переделанный стандартный дизайн uCoz №839.

Если Вы хотите первыми узнавать о новых статьях на сайте!!!

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

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

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

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

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

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

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

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

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

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

Эта запись написана мною в 2011 году. В те времена деревья были высокими, а доллар стоил меньше 40 рублей. С тех пор прошло много времени и многое изменилось. Учитывайте это, читая.

Я решил написать некий гайд по созданию собственного дизайна на uCoz . Он будет состоять из 2-х частей. Во второй части рассказывается о самой вёрстке шаблона.

Обязательно прочтите о проблемах , которые вы можете встретить при создании 1-ого шаблона.

С чего начать при создании шаблона для uCoz?

Что такое шаблон для uCoz? Это лишь описание расположения элементов сайта и графический вид сайта.

Каким должен быть шаблон сайта ? Шаблон должен быть устроен так, что бы он «обрамлял» контент сайта, ни в коем случае не мешал пользователям. Пытайтесь создать шаблон, уникальный по своей идее, чтобы пользователи запоминали ваш сайт. К примеру, существует огромное кол-во вроде разных, но внешне очень похожих игровых шаблонов (все тёмные, в полоску). Когда пользователь будет открывать такой сайт, ему будет казаться, что здесь он уже был. Придумайте некую изюминку.

Шаблоны бывают резиновыми и фиксированными . Резиновый — шаблон растягивается по ширине экрана. Фиксированный — ширина шаблона задана и остаётся постоянна при любой ширине экрана пользователя. Шаблон моего блога, на котором вы сейчас находитесь, является фиксированным.

Советую первый свой шаблон делать фиксированным т.к. при вёрстке вам будет гораздо легче.

Сначала представьте, как будет выглядеть ваш будущий шаблон в общих чертах. Затем возьмите лист А4 и карандашом нарисуйте эскиз будущего дизайна. Так вам будет намного проще, к тому же нередко во время рисование приходят замечательные идеи. Именно на своём эскизе вы должны продумать устройство шаблона.

После чего вы можете смело включать Photoshop . Размер файла выберите равный разрешению вашего экрана (у меня 1280 на 1024 пикселей). Грамотно подойдите к выбору цветовой гаммы вашего будущего шаблона. В основу нужно брать 2-3 цвета, они должны гармонировать между собой. Цвета желательно должны быть естественными. Для выбора естественных цветов отлично подойдёт какая-нибудь фотография. Открываете её в фотошопе и через пипетку смотрите коды цветов.

В подборе цвета вам может помочь специальный сервис Color Wizard . Вводите в спец. поле код цвета и нажимаете «set».

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

Не забудьте хорошо продумать навигацию. Она должна быть удобной и интуитивно понятной

P.S. наткнулся на интересный блог об оптимизации/раскрутке. Нравится тем, что автор ставит опыты над поисковиками.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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