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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Минималистские и навороченные, цветные и однотонные, темные и светлые - шаблоны для 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 миллиона сайтов!

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

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

Для начала нужно убедится, что конструктор активирован - это можно проверить, зайдя в Панель управления, Главная » Общие настройки. Если нужна опция активирована, переходим к настройке дизайна. Для этого нужно зайти в Панель управления, Управление дизайном » Конструктор шаблонов, и в при помощи подсказок оформить будущий каркас должным образом. Принцип создания каркасов прост - существующая структура страницы делится на определенные зоны по смыслу и назначению. Например, мой трехколоночный дизайн, разбитый на подобные зоны для создания каркаса, схематически будет выглядеть так:

Итак, как можно видеть на рисунке, каркас состоит из таких основных частей:
- в этом блоке я размещу верхнюю часть (шапку) сайта.
- здесь будет вся средняя часть сайта, в том числе левая и правая колонки и средняя часть, в которой будет отображаться основной контент. - здесь будет нижняя часть сайта - счетчики, копирайты и прочее. Отдельно бы хотелось остановится на описании кода
В использовании этого кода есть определенные ньюансы, которые необходимо знать. В частности, это связано с использованием модуля "Форум". В моем случае, если мне понадобится использовать этот модуль - моя структура каркаса предполагает, что модуль будет располагаться на всю ширину страницы, так как блоки container у меня включены в блок middle. При генерации шаблона для модуля "Форум" система смотрит, как расположен блок middle и всю область, которую он занимает, отводит под вывод форума. В случае если я вынесу код container правой колонки за границы блока middle - то форум будет занимать место левой и центральной колонки, а правая останется на месте. Если я вообще не использую код middle - то форум будет размещен в том же месте, где выводится остальной контент.

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

TITLE

CONTENT

Если дизайн блоков во всех контейнерах будет одинаковый, то достаточно сформировать лишь один блок, а второй контейнер создать пустым. Блок имеет два зарезервированных кода "TITLE " и "CONTENT ", которые соответственно означают "Заголовок" и "Содержимое" блока.

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

У меня всплывающие окна по стилю будут такими же, как и блоки - поэтому добавляю такой код:

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

Напомню, в данной статье речь шла о нестандартных дизайнах (созданных вами). Режим конструктора поддерживают все стандартные

Установка нестандартного шаблона

Лучший способ установить нестандартный шаблон, это воспользоваться инструкцией по установке, которая поставляется вместе с шаблоном. Если ее нет, то воспользуйтесь нашей универсальной инструкцией.

Установка шаблона состоит из нескольких шагов:

Загрузка файлов на сайт

Первым делом нужно загрузить на сайт файлы, которые поставляются с шаблоном. При этом важно соблюдать вложенность файлов в папки. Так, все изображения могут находиться в папке img , а скрипты - в js .

Чтобы создать папку, воспользуйтесь , кнопка «Добавить папку»:

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

Установка каркаса сайта

Позволяет сгенерировать однородную структуру для всех разделов сайта. Обычно он поставляется в.txt файлах и может иметь произвольное название ("Каркас.txt", "Конструктор шаблонов.txt" и т.д.).

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

Каркас сайта имеет свои уникальные переменные, которые помогут отличить его среди других файлов шаблона:

Попробуйте выполнить поиск строки или . Если они найдены в тексте, то скорее всего это файл каркаса.

Чтобы установить каркас, перейдите в раздел «Дизайн», в меню слева выберите пункт «Каркас», вставьте код из текстового файла, нажмите на кнопку «Установить» и подтвердите действие:

Вы увидите сообщение об успешном выполнении операции. Значит можно переходить к следующему шагу.

Установка шаблонов сайта

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

Шаблоны поставляются в текстовых файлах и для их размещения на сайте, нужно просто скопировать содержимое файла в редактор шаблона соответствующего модуля. Перейдите в раздел «Дизайн», в меню слева выберите пункт «Редактор». Найдите шаблон, код которого хотите добавить и скопируйте его в редактор. Сохраните изменения.

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

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

Настройка модулей и расширений

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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