Конструктор сайтов uCoz

uCoz (читается "юкóз") — это один из старейших в Рунете бесплатных конструкторов сайтов различного направления. Он позволяет создавать и вести сайты-визитки, блоги и даже полноценные веб-порталы.

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

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

Как создать свой сайт при помощи uCozЗолотая медаль BestFREE.ru

Конструктор сайтов uCoz Как создать свой сайт при помощи uCoz
Язык:Русский
Платформа:
Обновлено:2015-04-05





Как создать свой сайт при помощи uCoz

Если Вам нужно бесплатно создать сайт, но при этом Вы не являетесь специалистом в области веб-разработки, то можете попробовать сделать его при помощи конструктора uCoz. С Юкозом Вам не потребуется даже знание HTML – достаточно только уметь регистрироваться в Интернете и работать в текстовом редакторе.

Как создать сайт на uCozВсего еще лет 10 – 15 назад Интернет был прерогативой избранных. Открытие собственного сайта было либо показателем продвинутости пользователя, который самостоятельно освоил науку сайтостроения, либо намекало на его состоятельность, поскольку заказать тогда разработку сайта было весьма недешево...

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

Другой вопрос в том, что стоимость услуг веб-разработчиков хоть и снизилась, но для некоторых (особенно бюджетных организаций) все еще остается довольно высокой. Поэтому, в условиях современного кризиса, многие ищут, как можно создать сайт бесплатно или, хотя бы, с минимальными вложениями. И такие возможности имеются! Достаточно воспользоваться одним из многочисленных конструкторов сайтов.

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

Достоинства и недостатки uCoz

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

Достоинства ЮкозДостоинства:

  • полностью бесплатная регистрация и создание сайта;
  • удобочитаемые бесплатные домены третьего уровня;
  • наличие большого количества бесплатных шаблонов на любую тематику;
  • предоставление бесплатно от 400 МБ дискового пространства (с каждой секундой существования ресурса оно увеличивается на 3 байта!);
  • удобный визуальный и HTML-редактор материалов;
  • бесплатный модуль форума, комментариев и интеграции с соцсетями;
  • возможность самостоятельно изменять и уникализировать внешний вид шаблона при помощи CSS;
  • удобная статистика;
  • невысокие цены на премиум-функции.

Недостатки ЮкозНедостатки:

  • вставка рекламы на сайт в виде баннера (для образовательных ресурсов отключается бесплатно по заявке);
  • штатные возможности уникализации внешнего вида шаблона (без вмешательства в CSS) довольно скудны;
  • несколько запутанная структура Панели управления сайтом;
  • возможна медленная работа сайта при его высокой посещаемости;
  • затруднены некоторые аспекты поисковой оптимизации сайта в его бесплатной версии.

Самым "страшным" недостатком Юкоза является то, что он по умолчанию внедряет на Ваш сайт всплывающий рекламный баннер, который порой очень надоедает, а иной раз, даже скрывает часть информации на странице. С остальным же на первых порах вполне можно смириться. В принципе, вряд ли Вы рассчитываете на то, что кто-то бесплатно будет выделять Вам огромные вычислительные мощности и исчерпывающий функционал. Или рассчитываете? :)

Если нет, тогда, прошу пристегнуть ремни покрепче – начинаем наш экспресс-экскурс по системе uCoz.

Домашняя страница Юкоза

Регистрация нового сайта

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

Регистрация на Юкозе

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

Следующим же шагом будет непосредственно создание самого сайта (точнее, домена под него):

Создание сайта на Юкоз

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

Выбор дизайна и модулей сайта

После того, как имя сайта успешно подобрано Вам покажут следующее окошко:

Первичные настройки

Здесь будет всего три параметра, первые два из которых нужно настроить. Первый – "Название сайта". Заполнять его нужно для того, чтобы введенная Вами информация попала в META-теги, нужные для поисковой оптимизации Вашего сайта. Вторая настройка – выбор дизайна:

Тематический список шаблонов

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

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

  • двухколоночные (колонка текста и колонка меню справа или слева от нее);
  • трехколоночные (колонка текста по центру и две колонки меню по бокам);
  • нестандартные (например, трехколоночный сайт с обеими колонками меню с одной стороны от контентной или шаблон с горизонтальным меню).

Последним шагом на этапе первичной настройки сайта будет выбор нужных Вам модулей:

Выбор модулей сайта на Юкозе

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

В принципе, для базового редактирования текстов, вставки картинок, видео и аудиоматериалов Вам будет достаточно и редактора страниц. Если же Вы нуждаетесь в более удобных инструментах для управления заметками, советую активировать модуль "Блог" или "Каталог статей", а для вывода красивых галерей с картинками, соответственно, "Фотоальбомы". То есть, главный принцип – выбирайте, желательно, только самое необходимое, а остальное отключайте впоследствии или не включайте вообще (как, например, модуль Интернет-магазин, который является платным).


Первое знакомство с сайтом

После того, как все приготовления окончены, мы входим в систему при помощи своего логина и пароля, и попадаем в основную панель управления сайтом:

Панель управления

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

  1. В самом верху мы видим так называемый "админ-бар" – полоску с выпадающими менюшками слева и некоторыми индикаторами в правой части. Именно в недрах меню этой панели и спрятаны все возможные настройки Вашего сайта, но сюда мы влезем немного позже.
  2. Боковое левое меню. Здесь мы можем видеть список активных и неактивных (вкладка снизу) модулей сайта. При выборе одного из активных модулей нас перенаправит на страницу с его настройками, а для неактивных – на страницу активации.
  3. Центральная часть панели управления – изменяемая и отображает информацию в зависимости от активного в данный момент раздела. По умолчанию включается раздел "Главная страница" (на админ-баре первый пункт в меню "Общее"). Она состоит из двух больших блоков. В верхнем отображаются основные данные о Вас и Вашем сайте, а также даются различные полезные рекомендации. В нижнем блоке находится небольшой список ссылок на самые востребованные разделы настроек (по сути, они дублируют одноименные пункты меню в админ-баре).

Как видим, все довольно просто, если знать, с какой стороны подойти :) Хотелось бы немного остановиться на верхнем блоке "Главной страницы". Здесь есть ряд полезностей. Первая из них – отображение доступного пространства. Как видим, оно работает, подобно таймеру, где каждая секунда существования Вашего сайта превращается в дополнительные 3 байта места. Мелочь, а все-таки хорошо. Ведь, за минуту у нас добавится 180 байт, за час примерно 10,5 килобайт, за сутки около 250 килобайт, за месяц – 7,5 МЕГАбайт, а за год почти 91 МЕГАБАЙТ! Вот такая арифметика :)

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

С системой управления сайтом немного прояснили. Теперь предлагаю перейти и посмотреть на сам сайт...

Настройка и добавление текста

Быстро перейти на свой сайт из панели управления Вы можете, нажав на ссылку в верхнем блоке "Главной страницы" или вызвав соответствующий пункт меню "Общее" из админ-бара:

Чистый шаблон сайта

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

Предлагаю начать заполнять сайт именно с текста. Для этого кликаем кнопку с иконкой глаза (визуальный редактор) и получаем возможность печатать в окошке, отдаленно напоминающем традиционный Microsoft Office Word:

Визуальный редактор текста

Для тех, кто хоть раз работал в текстовых редакторах, думаю, особых пояснений по визуальному редактору Юкоза не потребуется. Здесь в верхней части идет небольшая панель инструментов, на которой размещены кнопки для форматирования текста, а внизу находится поле для загрузки изображений (рекомендую загружать не через него, а по кнопке на панели инструментов) и несколько опций.

Обратить внимание стоит на несколько деталей. Во-первых, возможность перейти к прямой правке кода при помощи кнопки-ссылки "Панель HTML-кодов" в правой верхней части. Во-вторых, на первый взгляд непонятная надпись ($LAST_NEWS$), которую мы не вводили... А это одна из внутренних приятных особенностей движка uCoz – переменная. Конкретно переменная $LAST_NEWS$ в данном шаблоне отвечает за вывод на главной странице списка последних опубликованных на сайте новостей в виде небольших анонсов.

Можно ли удалить данную переменную? В принципе, да, но тогда вы получите статическую главную страницу с одним лишь Вашим текстом, который Вы введете в редакторе. Если Вы так и хотели (например, у Вас сайт-визитка и новости на главной не нужны), то можете смело удалять переменную и вставить ее на специально созданную страницу "Новости" (если Вы вообще ее планируете создавать).

Полный список переменных для каждого отдельного шаблона uCoz может отличаться, поэтому я его здесь не привожу. Найти его Вы можете на страницах правки шаблона, например, в меню "Дизайн" – "Управление дизайном (шаблоны)" в подразделах разделов "Глобальные блоки" и "Редактор страниц".

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

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

Режим конструктора

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

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

Больше мы в визуальном режиме, увы, ничего настроить не сможем. Поэтому предлагаю посмотреть на код нашего сайта. Благо, в uCoz, в отличие от некоторых других бесплатных движков и конструкторов, доступ к нему у нас практически никак не ограничен!

Правка кода шаблона

Что мне всегда нравилось в Юкозе, с тех пор, как я первый раз с ним столкнулся, так это практически полная доступность кода сайта! Это позволяет производить тонкую подгонку и настройку всего дизайна с целью его уникализации.

Вернемся в панель управления и вызовем меню "Дизайн". Первые два раздела "Управление дизайном (шаблоны)" и Управление дизайном (CSS)", как раз и являются тем, что нам нужно. Однако, не стоит туда лезть, если Вы не уверены в том, как повлияют Ваши манипуляции на работу сайта!

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

Чтобы реализовать первую задачу перейдем в управление шаблонами и найдем подраздел "Верхняя часть сайта" в разделе "Глобальные блоки":

Код верхнего блока

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

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

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

Стили сайта

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

Замена фона сайта

Теперь осталось получить ссылку на новый фон, который мы загрузили, и вставить ее вместо оригинальной в стилях. Для этого, находясь в окне файлового менеджера, нажмем кнопку с пиктограммой буквы "i" и скопируем адрес картинки из появившегося окошка. Вставить его можно, как в полном виде, так и в относительном (убрав из ссылки адрес сайта). Сохраняем изменения и вуаля :) Новый фон для сайта готов!

Поправленный шаблон

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

Добавление страниц и файлов

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

Управление страницами

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

Что касается добавления новых страниц, то сделать это можно двумя способами. Первый – нажатие кнопки "Добавить страницу" в правом верхнем углу. Второй – нажатие на плюсик рядом с названием одной из уже существующих страниц. Разница будет только в иерархии. Если добавлять по кнопке вверху, то страница появится как новый и независимый раздел. Если же добавлять плюсиком, то она будет создана, как подраздел выбранной Вами страницы.

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

Добавление файлов

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

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

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

Выводы

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

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

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

Желаю всем, кто ступил на тропу освоения сайтостроения, удачной "охоты" :)

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.







Полезный совет:



Система проверки ошибок от Mistakes.ru