Создавая свой сайт каждый хочет чтобы его сайт отличался от других. Для этого нужен уникальный дизайн (купить в магазине шаблонов). В этой статье мы рассмотрим как создать свой уникальный дизайн из стандартного дизайна 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 шаблонов" и нажмите "резервное копирование шаблонов".
Расскажу на конкретном примере, как я сделал шаблон для uCoz. Это не подробная инструкция и не призыв к действию, это простой рассказ о том, как я сделал шаблон. Напишу о последнем шаблоне, есть даже видео. Хотел заснять весь процесс полностью, но как-то не стал тратить на это время, да и секретов пока не стал раскрывать, снял только создание макета и верстку.
У меня есть список идей для материалов и статей, которые нужно когда-то добавить на сайт, в этом списке сейчас 20 пунктов, мне же из этого списка нравится больше подобные темы, где не нужно давать инструкций, где я свободно говорю о том о сем.
1. Определился с тематикой
Хотел сделать что-то в тоже время нужное и не сложное. Кстати, у меня есть еще один список – это список тематик шаблонов.
2. Сделал макет (2 часа)
По структуре решил сделать простой и понятный шаблон. Заранее определился что вообще будет, а расположение элементов только примерно. Открыл фотошоп, посмотрел несколько аналогов, это интерфейсы на тему образования.
Вот видео, как это было.
Видео изъято.
3. Сверстал (4-5 часов)
Тут все понятно. Сначала просто сверстал как есть, а потом добавил адаптивность под мобильные телефоны. Для этого случая не делал макет, придумывал на ходу. В видео есть момент, когда из-за ошибки у меня получился не такой вид материалов, как в макете, но мне он понравился, я его оставил.
Видео изъято.
4. Натянул шаблон на uCoz
Ну, не просто натянул и все, по плану было дорабатывать тему прямо в панели управления uCoz. Я так всегда делал и буду делать. Тщательно страницы не продумывал, но не считаю, что сделал как попало. Скорее, по простому, но и стандартными оставлять не хотел.
5. Собрал архив шаблона: раскидал код по файлам и написал инструкцию
Где-то 2 дня я писал инструкцию и распределял код по файлам и папкам. Это, думаю, можно было сделать за 2-3 часа.
6. Создал демо-сайт
Да, для шаблона сделал еще один сайт, чтобы проверить установку шаблона, проверить инструкцию. Обнаружил ошибки как в инструкции, так и в самом шаблоне. К тому же в это время проверял тему в разных браузерах, нашел еще больше ошибок. Все исправил.
7. Сделал презентацию шаблона
Описание шаблона я сделал уже печатая инструкцию, а теперь хотелось бы добавить длинную яркую презентацию шаблона.
8. Добавил шаблон на uTemplate
Добавил поздно вечером, ожидал, что мне как всегда укажут на ошибки и шаблон нужно будет исправлять. На этот раз такого не было, шаблон сразу попал в каталог. Поставил среднюю по магазину цену, пока продаж нет. Может быть, еще не сезон.
Обычно я все долго, шаблон делаю в течении месяца, не торопясь. Тут я работал более интенсивно, в течении 10 дней. В этом промежутки есть дни, когда я никак не продвигал работу. Делаю долго не просто по своей лени, а из-за загруженности на учебе. С сайтом, в общем-то такая же ситуация.
В наше время с процедурой создания сайтов знакомы очень многие. Сейчас это достаточно популярно, так как многие зарабатывают этим на жизнь. Что же мы должны знать о том, как создать свой шаблон для сайта 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 проще, так как в саму систему уже встроено множество интересных дизайнов, которые Вы просто можете изменить под свои нужды.
Шаблон сайта - совокупность оформленных и сверстанных в HTML страниц, графических и служебных файлов, которые могут использоваться для создания типового сайта любой направленности. Как правило, шаблоны сайтов состоят из графических файлов дизайна распространенных форматов (PNG, JPEG, GIF), помещенных в отдельную папку; статических html-страниц и файлов таблицы стилей (CSS), а в некоторых случаях ещё и Flash.
Проще говоря, шаблон — это внешний вид (дизайн) Вашего сайта, который одинаковый на однотипных страницах. Благодаря существованию шаблонов, Вам не нужно на каждой странице прописывать один и тот же код: вставлять логотип сайта, делать заглавия одного цвета и т.д.
Шаблон сайта обычно состоит из каркаса и собстенно дизайна. Каркас — это основа, как скелет: блоки, линии, таблицы, куда будет нанизываться дизайн. А дизайн это красота Вашего сайта (цветовая гамма текста, шрифт, фон, картинки и т.д.). На сегодняшний день, чтобы не изобретать велосипед, можно скачать уже множество готовых шаблонов для любого сайта.
Сайты uCoz — Управление дизайном
Прежде всего хочется отметить что после создания сайта , у Вас есть возможность выбрать дизайн из огромного количества предложенных.
Сверху, самым первым расположен Глобальный блок . Это основа Вашего дизайна.Блок этот состоит из контейнеров, и их количество зависит от дизайна Вашего сайта.
Верхняя часть сайта — редактируется шапка сайта, графика, рисунки и т.д.
Нижняя часть сайта — редактируется нижняя часть сайта, сюда можно поставить счетчики.
Первый контейнер (левый) — редактируются блоки, который находятся слева.
Второй контейнер (правый) — редактируются блоки, который находятся справа.
В Первый и Второй контейнеры вмешиваться нет вообще никакого смысла, так как их намного удобнее редактировать с помощью Конструктора в Админ-баре с самого сайта. (В статье «Управление сайтом. Первое редактирование «)
Шаблоны страниц сайта Ucoz
Почти каждый модуль сайта uCoz состоит из следующих шаблонов страниц:
Главная страница модуля — страница, на которой отображаются материалы всех разделов и категорий (общий список материалов)
Страница со списком материала раздела — страница, на которой отображаются материалы одного раздела (сколько разделов — столько страниц, на сайте uCoz может не быть ни одного раздела)
Страница со списком материала категории — страница, на которой отображаются материалы одной категории (на сайте должна быть хотя бы одна категория)
Все перечисленные выше страницы имеют практически одинаковый внешний вид.
Страница материала и комментариев к нему — страница, на которой непосредственно расположен добавленный Вами материал (статья, файл, фотография и т.д.)
Вид материалов — как будут выглядеть материалы в списке материалов на перечисленных первых трех страницах: Главная страница модуля, Страница со списком материала раздела и Страница со списком материала категории.
Страница добавления/редактирования материалов — форма добавления материала.
Этим всем страницам и соответствуют одноименные шаблоны. Вам сразу же понятно, что именно и где Вы хотите изменить. И даже, если до сих пор Вам слабо понятно, что со всем этим делать. Сделайте backup шаблона и смело экспериментируйте.
Очень скоро Вы поймете что и к чему!
Вот простой пример : допустим Вы хотите, чтобы на ВСЕХ страницах Вашего сайта было написано Ваше имя. Для этого Вам всего навсего нужно написать свое имя в шаблоне «Редактора страниц» и на всех страницах автоматически появится Ваше имя.
Или, Вы хотите, чтобы все файлы скачивались путем нажатия определенной кнопки, Вам достаточно один раз прописать это в соответствующем месте (Каталог файлов — Вид материала и комментария к нему) и больше не возвращаться к этому вопросу.
Но это простые примеры, на самом деле возможности эти намного-намного обширнее. Более того в интернете существует уже масса готовых примеров, где Вы просто копируете код и вставляете в свой шаблон, и Ваш сайт может обрести те функции которые Вы хотите.
На самом деле это действительно очень удобно. И как только Вы попробуете что-то менять, и у Вас начнет получатся, думаю, что вскоре Ваш сайт быстро измениться до неузнаваемости, например этот сайт — это переделанный стандартный дизайн uCoz №839.
Если Вы хотите первыми узнавать о новых статьях на сайте!!!