Как приготовить дизайн сайта? Руководство для новичков!
Руководство по настройке дизайна сайта в системе uCoz

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

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



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


Итак, мы определили самые важные ингредиенты нашего торта. Давайте рассмотрим каждый ингредиент более подробно. Начнем по порядку, от самой основы.


Файловый менеджер


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


Здесь вы можете загружать картинки, которые будете использовать в своем дизайне или просто будете размещать на своем сайте. А так же скрипты, страницы, xml файлы, mp3 и прочие.

Подробнее о возможностях файлового менеджера >>


Таблица стилей CSS


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


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

Кроме того, новичкам очень поможет самоучитель CSS и справочник по кодам CSS: http://htmlbook.ru/samcss.


Управление дизайном


Этот раздел можно сравнить с самой вкусной прослойкой в нашем торте! Управление дизайном — это уже готовый крем, который состоит из отдельных ингредиентов. Попасть в управление дизайном можно с главной страницы панели управления:


Давайте подробнее рассмотрим состав данного раздела, и что тут можно делать:

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

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


Изменяя содержимое глобального блока в одном шаблоне, вы меняете его содержимое на всем сайте, где расположен код этого блока. О том, как это работает, можно прочитать в нашей инструкции “Создание глобального блока”.

Дальше идет шаблон страниц сайта, которые создаются в модуле “Редактор страниц”.

Следующий шаблон — это шаблон CSS таблицы стилей, о котором я упоминал чуть выше.

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

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

Подробнее о конструкторе шаблонов можно узнать из мануала “Краткая справка по конструктору шаблонов”.

3. Backup шаблонов — этот раздел вам очень пригодится, если вы являетесь новичком в системе uCoz и правите в шаблонах что-то “наугад”. Конечно, это не приветствуется, так как если вы что-то сломаете, вам придется искать помощи, которую мы, впрочем, конечно же, вам окажем в блоге, на форуме или в службе поддержки. Но как ни крути — чтобы понять, что что-то не получается, нужно попробовать!

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

Примечание: бекап шаблонов — это бекап кода шаблонов в разделе “Управление дизайном”. В этот бекап не входят материалы и файлы сайта. Для этого нужен полный бекап сайта.

4. Быстрая замена — данный раздел целиком и полностью предназначен для новичков! Если вы нашли какую-то фразу на сайте, и её необходимо менять во многих шаблонах — просто замените её при помощи быстрой замены, и она обновится нажатием одной кнопки во всех шаблонах!


Конструктор блоков


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

Конструктор блоков — это инструмент, который позволит вам в режиме визуального редактирования удалять/добавлять и перемещать блоки по всему сайту — снизу вверх, слева направо и наоборот!

Чтобы воспользоваться конструктором, его необходимо включить в панели управления в разделе “Общие настройки”:



После того, как вы включите данную настройку, на вашем сайте в режиме администратора в админ-баре появится вкладка “Конструктор”.


Подробная инструкция о том, как создавать и управлять блоками, есть у нас в мануалах.


Конструктор шапки сайта


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


О том, как и где работает редактор шапки, можно прочитать в нашей статье “Первое обновление в 2013!”.


Премиум шаблоны uCoz!


Наш торт был готов ещё на предыдущем шаге, но для “ленивых” хозяев или тех, кто не хочет разбираться во всех этих рецептах, кремах и коржах, есть самый просто способ: купить премиум-шаблон uCoz в официальном магазине uTemplate.pro.

Десятки шаблонов различных тематик и структур — от персонального сайта до интернет-магазина и городского портала! Коллекция адаптивных шаблонов и шаблонов для портфолио!

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

Эта статья входит в цикл статей блога "Дизайн".
Ознакомиться с полным циклом можно по ссылке.

83 комментариев
1 2 »
1 Написал igorgorohov 17 Декабря 2013, 16:52
интересная подача материала) Спасибо  prof
5 Написал o_Lisovenko 17 Декабря 2013, 17:31
Спасибо, стараемся разбавить посты в блоге чем-то необычным.
avatar
12 Написал ilya1983 17 Декабря 2013, 18:25
Про ленивых обидели прямо sad может человеку проект под ключ нужен или времени нет...
13 Написал o_Lisovenko 17 Декабря 2013, 18:41
Из всех правил бывают исключения)
38 Написал Ucoz_fan 20 Декабря 2013, 00:04
прикольный тортик))  smile
2 Написал Megan_Fox 17 Декабря 2013, 17:15
Все понятно, хорошо оформлено up
ЗЫ: только сейчас узнал о 
Цитата
Конструктор шапки сайта
4 Написал o_Lisovenko 17 Декабря 2013, 17:30
У нас на эту тему был даже пост в блог smile Плохо следите за новостями)
15 Написал Jekan5833 17 Декабря 2013, 19:25
он не на всех дизайнах есть обновите его до всех дизайнов пожалуйста
16 Написал o_Lisovenko 17 Декабря 2013, 19:32
Технически не на всех дизайнах можно обновить редактор шапки. Это вопрос верстки. Но Вы можете заменить шапку по инструкция на мануалах (ссылка есть в посте если внимательно почитате). К тому же в новых шаблонах вероятно будет больше с поддержкой редактора smile
avatar
45 Написал Raphael 24 Декабря 2013, 18:14

Цитата
Технически не на всех дизайнах можно обновить редактор шапки


А в дизайне № 211 конструктор шапки сайта есть? Будет? Или вообще не стоит ждать? Спрашиваю, потому что мне он нужен.
3 Написал сondor 17 Декабря 2013, 17:29
Вряд ли новичкам, которым лень и нет надобности все это читать, будет эта статья полезна. Многие не удосуживаются даже прочитать то, что им пишешь на форуме в более краткой и понятной форме. Также абсолютно никто из вновь прибывших на форум не пользуются поиском и не читают специально созданные темы, которые и создавались, чтобы упростить нахождение того или иного вопроса и методов его решения.
Тем не менее, автор статьи интересно описал самые важные и основные моменты при приготовлении дизайна сайта на кухне uCoz =)
6 Написал o_Lisovenko 17 Декабря 2013, 17:33
Будем верить что хоть кто-то заинтересуется и прочтет. Если это кому-то поможет, уже плюс!
7 Написал сondor 17 Декабря 2013, 17:36
И то верно   smile
8 Написал AlexZAV 17 Декабря 2013, 17:57
Полезный обзорный пост, со ссылками на все необходимые страницы. Новичкам однозначно будет полезной шпаргалкой, да и более продвинутым неплохое напоминание! Олегу 5+ за полезную статью.
10 Написал o_Lisovenko 17 Декабря 2013, 18:20
Спасибо за отзыв!
avatar
9 Написал Veidnes 17 Декабря 2013, 17:57
А когда же заменят дизайн блога?:) Очень хочется проверить его в деле smile
11 Написал o_Lisovenko 17 Декабря 2013, 18:21
Работа не простая. Как только, так сразу smile
14 Написал admin4001 17 Декабря 2013, 19:20
очень полезно, возьму на заметку.
17 Написал o_Lisovenko 17 Декабря 2013, 19:33
Возникнут вопросы - велкам в комментариях задавать!
18 Написал Mangoz 17 Декабря 2013, 20:22
Статья заинтересует новичков, однозначно, всегда приятно такие материалы читать.

Есть вопрос. Когда выйдет недавно продемонстрированный шаблон http://newtemplate.ucoz.ru/ ?  smile
Так лень его вытаскивать из демо, хочется просто редизайн заделать в "резиновом" формате в к-ве подарка на НГ клиентам, да и сотрудникам своим)) Хотя бы скажите, ждать, или лучше самому?)
19 Написал o_Lisovenko 17 Декабря 2013, 20:28
Скоро, пока мы все тщательно тестируем.
20 Написал Mangoz 17 Декабря 2013, 20:33
Я бы с удовольствием присоединился к тесту) Спасибо wink
21 Написал o_Lisovenko 17 Декабря 2013, 20:34
Нам достаточно команды тестировщиков пока и официального тестировщика в штате. Но спасибо, если что будем иметь Вас ввиду.
22 Написал hristianin-usad 17 Декабря 2013, 21:35
Спасибо Олег пишите побольше таких вещей , просто от таких как вы много полезного узнаешь , ведь некоторые пишут про то что сами не понимают.
Например хочется от вас что-то услышать про СЕО , а то сайты есть а как их продвигать не все знаешь
24 Написал o_Lisovenko 17 Декабря 2013, 21:38
Хорошо, возьму на заметку, может напишем что-то такое smile
23 Написал borschaga 17 Декабря 2013, 21:36
Полезно smile
25 Написал alex-g 18 Декабря 2013, 12:05
Напишите статью, в которой были бы изложены основные отличия или главные плюсы системы. Чтоб было легче объясняться с клиентами или доказывать почему лучше выбрать uCoz, а не WordPress, "как у моей подруги" или "мне знакомы сказал, что Joomla круче всех".
28 Написал o_Lisovenko 18 Декабря 2013, 12:46
Тут для каждого свое. Все зависит от потребностей. Не будем же мы в блоге писать чем хуже другие или чем лучше мы. Да и подобные статьи есть в интернете и не мало, например далеко не ходить: http://uguide.ru/news....9-09-77
30 Написал alex-g 18 Декабря 2013, 13:17
В статьях обычно обозревают конструкторы. У меня вот часто стает вопрос хостинга, особенно когда у людей по несколько сайтов (визиток, не требующий весь функционал). Очень трудно убедить такого клиента в пользу ucoz, а не других cms, которые можно грузить на хостинг, который за те же деньги дает больше пространства и больше загружаемых сайтов. Я не пытаюсь камней в ваш огород накидать, а просто озвучиваю частые проблемы в этом плане.
37 Написал borschaga 19 Декабря 2013, 23:26
Извините могу попробовать Вам помочь в этом немного  smile
А убедить просто.Первое, сравните гуглем защищенность ucoz и тех что вы писали выше.
Второе, простота добавление и редактирования информации самим заказчиком без особых знаний.Вы можете сами их научить.Третье все модули системы родные а не сторонние и мало того они еще гибкие.А самое главное суметь переубедить от мнения "других советчиков" что юкоз это плохо.По больше части эти мнения тех кто владеет "типа хостингами" или привык делать сайты на других системах.Также мнения детей которые совсем не разобрались в системе а п...т больше чем надо. Единственный временный минус системы (например для меня) в том,что все таки шаблонов даже с платными маловато.Но это дает хороший повод самому больше вникать в дизайн.
И последний совет, если не читали почитать типа Дейл Карнеги  для умения убеждать  wink
avatar
26 Написал Sint-Kharkov 18 Декабря 2013, 12:12
Добрый день! 
Как поменять картинку в шапке, у меня дизайн 971, мой сайт http://www.sint.kharkov.ua/, хочу вместо компьютерного блока заменить другую картинку. И в шапке слева и справа у нее пустые места, куда я тоже ничего не могу вставить, а хотелось бы, как мне это сделать в визуальном редакторе? Помогите, пожалуйста.
avatar
27 Написал Sint-Kharkov 18 Декабря 2013, 12:29
Ой, извините, дизайн 221.
29 Написал o_Lisovenko 18 Декабря 2013, 12:47
читать внимательно пост в блоге. Там все написано и есть ссылки. Конкретно по Вашему дизайну как менять: http://manual.ucoz.net/publ/18-1-0-346
avatar
31 Написал Sint-Kharkov 18 Декабря 2013, 14:06
Спасибо, меняла как написано в этом блоге, но получается не совсем то, что нужно.
34 Написал sergeymitrichev 19 Декабря 2013, 15:17
это целое искусство, делать как написано, а получать то, что нужно :)))
32 Написал Dyatlov 18 Декабря 2013, 20:49
Здравствуйте! Возника проблема, на платформе юкоз создали сайт по творчеству и рукоделию воскресной школы, который посещают дети и их родители, очень настораживает то, что иногда проскакивает в рекламных банерах либо ссылки на порнографический контент либо новости или реклама с голыми частями тел и неприличными заголовками! Хотя в настройках указывался запрет на данного рода рекламы и целевое назначения сайта указывался как сайт с детским контентом. На мой взгляд на нашем сайте подошла бы реклама товаров для домохозяек, рукоделия, детских магазинов. и т.д. скрины хотел отослать с этим безобразием да вот не нашел куда. А в последний раз (сам не видел) мать заходила на сайт так там вообще была реклама порнографии с сылками на сайт даже не эротического а порнографического содержания! Нам стало стыдно, нас смотрят дети и их родители не только нашего маленького городка но и дети и родители иногородних церковных приходов да и батюшки иногда поглядывают! Что делать? Наш сайт http://suvenir.ucoz.com заранее спасибо.
33 Написал $Vladimir$ 18 Декабря 2013, 23:56
На данное время тематика рекламного баннера изменена. Ознакомьтесь с информацией по ссылке http://faq.ucoz.ru/faq/27-1#33
avatar
35 Написал cccccc 19 Декабря 2013, 21:23
Здравствуйте, я поменяла заголовок сайта ("мой сайт") на свой текст лаконичный текст (пробелов перед текстом нет, размер шрифта небольшой поставила), но когда выхожу - с сохранением - из конструктора в обычный режим, мой текст не просто оказывается на ненужной мне черной плашке, но эта плашка занимает пол экрана и перекрывает меню. Такое ощущение, что перед текстом вставлены пробелы.. Подскажите, пожалуйста, 
1) как решить эту проблему (чтобы плашка соответствовала объему текста)
2) как изменить цвет (или вообще убрать цвет) подложки для текста заголовка сайта
3) где впредь можно найти лаконичных хелп по этому поводу.
да, еще.. как удалить созданные мною сайты, где не решалась данная проблема?
Заранее спасибо...
avatar
36 Написал cccccc 19 Декабря 2013, 21:29
да, дизайн 798
39 Написал Дарья888 20 Декабря 2013, 10:21
Подскажите, при выборе шаблона возможно как то увидеть в каких шаблонах можно менять шапку? значек какой то рядом с шаблоном или еще что? И где можно прослеживать информацию о добавлении шаблонов в категорию редактировании шапки. К римеру сегодня это 5 дизайнов(шаблонов), а завтра вы добавили еще один шаблон в этот списак, как я могу об этом узнать не перечитывая тут форум?
40 Написал o_Lisovenko 20 Декабря 2013, 13:17
Нет, никакого значка рядом с такими шаблонами нет. 

По поводу добавления новых шаблонов: все новости мы публикуем в данном блоге. Следите за новостями.
41 Написал Дарья888 20 Декабря 2013, 15:23
это же очень неудобно. вы можите сейчас написать список обнавленных шаблонов. какие на данный момент можно редактировать? очень нужно, прошу вас.
42 Написал Дарья888 21 Декабря 2013, 08:53
Я просмотрела весь раздел новости вплоть до 2009 года и ни где не нашла даже подобия списка уже сделанных шаблонов в которых можно менять шапку. А вы говорите следите за новостями в блоге. К примеру на начало э
того года это было 4 шаблона это я шашла, потом никто нигде не пишет какие добавились шаблоны в этот список, однако из собственных тыканей и мыканей по шаблонам, я встретила еще 2 шаблона в которых можно менять шапку. В конце то концов не проверять же каждый шаблон самостоятельно чтобы вычеслить весь список!!! Кто то же этим занимается и имеет весь список уже сделанных шаблонов. Озвучте его или дайте конктетную ссылку на тот материал где этот список озвучен.
43 Написал Alexxandrio 24 Декабря 2013, 00:15
Простите за вопрос не по теме. Просто очень интересно, новую админ панель в этом году мы увидим?
44 Написал Kurt 24 Декабря 2013, 00:53
Нет, ее релиз абсолютно не близок
avatar
54 Написал Nicka 11 Января 2014, 21:02
Доброго времени суток! Я создала сайт. Но у меня только профиль и всё. Больше ничего нет . Читаю тут как изменить  дизайн и думаю, Господи, да хоть бы найти вообще какие-нибудь кнопки. Приложила бы скин , да не вижу тут возможности....Если ответите мне, буду весьма благодарна Вам.))
55 Написал PetrKiryshkin 11 Января 2014, 21:55
Уточните, пожалуйста, Вы хотите поменять дизайн Вашего сайта на какой-то другой, который предлагает веб-сервис uCoz или хотите установить персональный (Ваш собственный) или доработать текущий?
avatar
46 Написал Raphael 24 Декабря 2013, 18:28
А в дизайне № 211 конструктор шапки сайта есть? Как это определить? Если нет, то будет ли? Спрашиваю, потому что мне он нужен.
47 Написал OlkaZ 24 Декабря 2013, 23:54
Для шаблона дизайна №211редактирование шапки сайта в режиме Конструктора пока не доступно. Вы можете воспользоваться инструкцией для дизайна №211 http://manual.ucoz.net/publ/22-1-0-130 .
48 Написал Excerpta 26 Декабря 2013, 08:43
3 года вожусь с граблями юкоз, простые вещи приходится вырезать сложными скриптами.

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

А не так:
Слово, которое будет вызывать смайл ( например, :wink: или wink ). Допускаются только латинские буквы и цифры.
Кому нужно переключать на англ или клацать по кнопке смайлов особенно на телефоне?

Неужели сложно прописать id кнопкам редактора страниц?

<div style="float:right;border:1px solid #B4BDC3;background:#F0F3F5;padding:2px;"> <a href="http://" target="_blank">

<img alt="" border="0" align="absmiddle" onmouseover="this.src='http://s68.ucoz.net/img/fr/mnV_.gif'" onmouseout="this.src='http://s68.ucoz.net/img/fr/mnV.gif'" src="http://s68.ucoz.net/img/fr/mnV.gif" width="16" height="16" title="Редактировать в визуальном редакторе"></a> <a href="http://trenning.ucoz.ru/index/31-1-0-1-2" target="_blank"><img alt="" border="0" align="absmiddle" onmouseover="this.src='http://s68.ucoz.net/img/fr/mnH_.gif'" onmouseout="this.src='http://s68.ucoz.net/img/fr/mnH.gif'" src="http://s68.ucoz.net/img/fr/mnH.gif" width="16" height="16" title="Редактировать HTML код"></a> </div>

 И таких проблем повсеместно очень очень много, они не решаются годами!

Приходится  Искать сложные решения для простых вопросов!Почему?

За 3 года одно разочарование, зла на вас не хватает.И оплачивал, и обращался в службу поддержки по-началу, а толку как не было так и нет.

P.s И не надо говорить, что это мои проблемы не знание сss и js. Вы заявляете о простоте так сделайте просто!
avatar
49 Написал Рыжезвездка-Рыжезвездка 05 Января 2014, 13:29
Мне немного не ясно, не могли бы вы мне помочь? я все ясно объясьню чего хочу, фон найден..Все готово.. angel ???
59 Написал o_Lisovenko 13 Января 2014, 11:22
Вы бы сразу писали что хотите.
avatar
50 Написал akula-z 08 Января 2014, 21:19
Здравствуйте!
Вы могли бы перечислить те номера шаблонов, в которых реализован конструктор шапки сайта? Я так понимаю, что эта тема была создано давно и с тех пор количество шаблонов с данным изменением могло увеличиться.
avatar
51 Написал ШТОРЫ 11 Января 2014, 12:48
Добрый день! Есть ли какой-нибудь дизайн типа этого http://salondevore.ru/, или только вручную можно добиться подобного? Заранее спасибо.
avatar
56 Написал yanastetsenko 12 Января 2014, 01:03
Здравствуйте! Со всеми стандартными шаблонами Вы можете ознакомиться зайдя в Панель управления сайтом - Настройки  - Общие настройки  - ссылка "Выбрать дизайн" в пункте "Дизайн сайта". Также в сервисе http://utemplate.pro/ Вы самостоятельно можете выбрать подходящий под Ваши требования дизайн.
1-20 21-34
Ваш комментарий