Как поменять шаблон (дизайн) на сайте ucoz

Вы здесь: Блог Владимира Зуева » UCOZ » Как поменять шаблон (дизайн) на сайте ucoz

Автор: Владимир Зуев

Дата: 29.03.2014

Рубрика: UCOZ

Здравствуйте дорогие читатели блога ProfKatalog.ru !В этом посте я постараюсь по возможности максимально разъяснить вам-

КАК  ПОМЕНЯТЬ ШАБЛОН (дизайн), вашего блога,сайта созданного на конструкторе ucoz!!!.

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

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

Итак давайте приступим:

 ШАГ №1 Выбор и подбор дизайна для вашего сайта ucoz

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

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

Но сейчас речь идет не об этом,так что продолжим:-

Для того чтобы вы скачали шаблон (дизайн) нужной вам тематики,просто наберите в поисковике google,yandex:-

Шаблон (далее ключевое слово подходящее тематики вашего будущего сайта ucoz),например:-кулинария,строительство,ремонт,бизнес,после ключевого слова:- ucoz скачать бесплатно.

В итоге я выбрал и набрал в поисковике:- шаблон кулинария ucoz скачать бесплатно.

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

ШАГ №2 Изучение и подготовка шаблона к установке на ucoz

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

Теперь давайте немного разберемся с его содержимым.Обязательно,внимательно изучите все содержимое скаченного вами шаблона (если даже практически ничего не понимаете)!

Я скачал кулинарный шаблон и вот какое содержимое находилось после распаковки шаблона:

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

Код сайта

<html>
<head>
<title>[TITLE]</title>
<link type=»text/css» rel=»StyleSheet» href=»[CSS_URL]» />
</head>

<body>
$ADMIN_BAR$
<div id=»container»>
<!— <header> —>
<script src=»/img/cufon.js» type=»text/javascript»></script>
<script src=»/img/studioscriptcct_400.font.js» type=»text/javascript»></script>
<script type=»text/javascript»>
Cufon.replace(‘.sitelogo’, { fontFamily: ‘StudioScriptCTT’ });
</script>

<div class=»top»>
<div class=»desc»>
<?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><!—<s5200>—>Вы вошли как<!—</s>—> <a href=»$PERSONAL_PAGE_LINK$»><b>$USERNAME$</b></a> | <!—<s3167>—>Группа<!—</s>—> «<u>$USER_GROUP$</u>»<?else?><!—<s5212>—>Приветствую Вас<!—</s>—> <b>$USERNAME$</b><?endif?><?endif?> <?if($RSS_LINK$)?>| <a href=»$RSS_LINK$»>RSS</a><?endif?>
<br />
<?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><a href=»$PERSONAL_PAGE_LINK$»><!—<s5214>—>Мой профиль<!—</s>—></a><?else?><a href=»$REGISTER_LINK$»><!—<s3089>—>Регистрация<!—</s>—></a><?endif?><?endif?> <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href=»$LOGOUT_LINK$»><!—<s5164>—>Выход<!—</s>—></a><?else?> | <a href=»$LOGIN_LINK$»><!—<s3087>—>Вход<!—</s>—></a><?endif?><?endif?>
</div>
<div class=»sitelogo»>$SITE_NAME$</div>
<span class=»snab»><a href=»http://yraaa.ru/publ/7″ title=»Шаблоны для uCoz»><h1>Темы для Юкоз</h1></a></span>
</div>
<div class=»tp»>$SMENU_1$</div>
<!— </header> —>
<table class=»index_part» border=»0″ cellpadding=»0″ cellspacing=»0″ width=»100%» align=»center»><tr><td>
<!— <middle> —>
<table border=»0″ cellpadding=»0″ cellspacing=»0″ width=»100%» align=»center»>
<tr>
<td valign=»top»>
<table border=»0″ cellpadding=»0″ cellspacing=»0″ width=»194″ class=»block1″>
<tr><td align=»center» valign=»top» class=»block2″><b>Поделиться</b></td></tr>
<tr><td class=»block3″>
<div class=»social»><script type=»text/javascript» src=»http://yraaa.ru/share/share_24x24.d3sn»></script></div>
<style type=»text/css»>.social {margin-left:12px;margin-bottom:4px} #fb_24x24, #gp_24x24, #ya_24x24 {display:none}</style>
</td></tr>
<tr><td><img src=»/img/3.gif» alt=»» /></td></tr>
</table><br />
<!— <container> —>
<!— <block> —>
<table border=»0″ cellpadding=»0″ cellspacing=»0″ width=»194″ class=»block1″>
<tr><td align=»center» valign=»top» class=»block2″><b>TITLE</b></td></tr>
<tr><td class=»block3″>CONTENT</td></tr>
<tr><td><img src=»/img/3.gif» alt=»» /></td></tr>
</table><br />
<!— </block> —>
<!— </container> —>
</td>
<td valign=»top» style=»width:80%;»>
<div id=»onms» class=»on_body»>[BODY]</div>
</td>
</tr>
</table>
<!— </middle> —>
</td></tr></table>
<!— <footer> —>
<div class=»footer»>
<div class=»pd»><div class=»pby»>$POWERED_BY$</div>[COPYRIGHT]</div><div class=»shab»>Если Вы тоже хотите создать сайт на uCoz, то посмотрите шаблоны <a href=»http://yraaa.ru/publ/7″ title=»Шаблоны для uCoz» target=»_blank»>здесь</a>. На этом проекте можно скачать и <a href=»http://yraaa.ru/publ/22″ title=»Скрипты для uCoz» target=»_blank»>скрипты</a>, которые улучшат ваш сайт.</div>
</div>
<!— </footer> —>
</td></tr></table>
</div>
</body>
</html>

<!— <popup> —>
<table border=»0″ cellpadding=»0″ cellspacing=»0″ width=»100%»>
<tr>
<td style=»background:#FFF5AE;padding:10px» align=»center»><b>[TITLE]</b></td>
</tr>
</table>
<table border=»0″ cellpadding=»0″ cellspacing=»0″ width=»100%»>
<tr>
<td style=»background-color:#FFFFFF;border-top:1px solid #E0D799;border-bottom:1px solid #646464;padding:10px»>[BODY]</td>
</tr>
</table>

<!— </popup> —>

Т.е в этом файле должна находится блочная верстка вашего макета.

Каждый блок разделяется не видимым визуально тегом- <!—Разделение между блоками ——>,Как поменять шаблон (дизайн) на сайте ucoz

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

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

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

Помимо вышеперечисленного могу приблизительно предположить как зачастую называют нужный нам файл:- tmpl.txtКострукторmain.tpl  и это только часть названий которые зачастую применяются к этому файлу,в моем случае название этого файла — Конструктор.

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

infa

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

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

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

  • Папки js — содержат все нужные скрипты,которые непосредственно нужны для повышения функциональности вашего будущего сайта или какие либо наполнения,без которых ваш шаблон будет некорректно работать,здесь уже все зависит от вашей выбранной темы.
  • style — эта папка занимает второе место по важности из всех перечисленных!Файлы находящееся в ней имеют расширение .css и отвечают за размеры,расположение ваших блоков — шапки (header),контента (body),левой и правой колонки (sidebar), подвала (footer),а также за различные цветовые гаммы находящиеся в вашем дизайне,кроме самих картинок.Изменяя любой цвет,фон вашего сайта через файлы style.css — цвет картинок не меняется!
  • глобальные блоки— это непосредственное дополнение к нашему шаблону,они бывают в составе шаблона очень редко,но все же стоит о них молвить пару слов.Файлы находящиеся в папке <<Глобальные блоки>>,практически всегда называются непосредственно Контейнерами,т.е : Первый контейнер,Второй контейнер,Верхний контейнер,Нижний контейнер.

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

Шаблон ucoz

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

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

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

Остальные файлы и папкиinfa2

Предназначены для полного видоизменения модулей ucoz — под дизайн вашего шаблона и его функциональность.

ШАГ №3 Установка и заливка вашего дизайна на конструктор ucoz

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

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

Скачать его очень легко и не составит вам большого труда найти русскую версию в интернете.После скачки и установки Total Commander вам нужно будет зайти в админ панель вашего сайта ucoz,после чего найти на верхней части панели кнопочку [ FTP детали | нажать на нее и выскочит окошко с вашими данными для подключения и загрузки большого количества файлов через Total Commander на ваш сервер(сайт).

infa3

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

Пароль которым вы будете пользоваться для подключения по FTP (файловый менеджер) к своему серверу (сайту) обязательно запомните и сохраните к себе на компьютер.

После чего открываем нашу программу Total Commander  и находим там вкладку:- 1) Новое FTP соединение ,нажимаем на нее и выскакивает окошко 2) ftp

infa4

куда нам нужно будет ввести IP адрес нашего сервера (сайта),после чего переходим в админку ucoz и нажимаем на кнопку:- 1) Общее ,которая находится в левом верхнем углу вашей админки

Заработок в интернете.Блог Владимира Кравченко

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

Скопированный IP адрес вставляем в свободное поле в выпавшем у нас окошке в Total Commander 

infa4

обозначенное на скрине под номером  и сразу снимаем галочку с:-  Анонимное соединение под номером 3 на скрине,после чего нажимаем кнопку Ок ,далее следует еще два окошка в которые нам нужно ввести логин и полученный ранее пароль

Заработок в интернете.Блог Владимира Кравченко.

Логином здесь является:- FTP login: 2prokulinaria.Красный текст,это и есть ваш логин,который вам нужно будет скопировать и вставить.

Итак вы подключились по FTP к своему серверу!После подключения у вас будет два окна

pomenat-shablon-ucoz1

В первом окне находится все содержимое (файлы,картинки) которые находятся у вас на сервере (сайте),стрелочка на скрине показывает к какому IP адресу вы подключились.2-е окно содержит все содержимое которое находится у вас на компьютере.

Теперь вам нужно открыть файл с помощью блокнота со скелетом вашего шаблона,который мы с вами нашли в начале предыдущего:-

ШАГа №2 Изучение и подготовка шаблона к установке на ucoz,в моем случае,это файл Конструктор,все содержимое этого файла вам нужно выделить и скопировать,затем перейти в админ панель вашего сайта ucoz и найти там :-  Управление дизайном

Заработок в интернете.Блог Владимира Кравченко.

Переходим в Управление дизайном,после в [ Конструктор шаблонов |

Заработок в интернете.Блог Владимира Кравченко.

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

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

pomenat-shablon-ucoz2

Находим там все нужные нам папки (содержащие):-

images и img (картинки)

Папки js (скрипты)

style (файлы с расширением .css)

Выделяем их все- удерживая кнопку Сtrl

и нажимая на каждую папку левой кнопкой мыши,после чего нажимаем на клавиатуре F5,выскочит окошко с названием:- Загрузка,там нажимаем Ок,затем пойдет загрузка всех ваших выделенных файлов из шаблона на сервер.

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

Т.е предположим у вас есть папка:- Коментарии ,открываем папку и видим там вот такие файлы:-

Как поменять шаблон (дизайн) на сайте ucoz

Открываем один из них в блокноте,выделяем все содержимое,копируем.Переходим в админку ucoz  ==>> Управление дизайном,находим точно такое же название как у файла с которого мы недавно скопировали все его содержимое:-

Как поменять шаблон (дизайн) на сайте ucoz

Открываем нужную по названию вкладку и попадаем на страницу с ее содержимым.

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

Такую процедуру повторяем с каждым файлом,который находится у нас в папке с нашим шаблоном.

Если в админ панели ==>> Управление дизайном вашего сайта вы не найдете модуля который у вас есть в шаблоне,просто добавьте нужный вам модуль нажав на вкладку:-  Неактивные

Как поменять шаблон (дизайн) на сайте ucoz

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

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

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

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

Поделись этой статьей с друзьями

Читайте другие мои статьи

Поменять верхушку сайта

Как поменять шапку сайта ucoz.

Подпишись на новости блога

Комментарии читателей к статье "Как поменять шаблон (дизайн) на сайте ucoz"

У этой статьи 3 комментария

  • viagra cialis #1 20/02/2019 - 21:51
    Прохожий 1 Сообщение

    This is really fascinating, You’re an overly skilled blogger.

    I’ve joined your rss feed and sit up for searching for more of your magnificent post.

    Also, I’ve shared your web site in my social networks

  • minecraft #2 11/04/2019 - 17:29
    Прохожий 1 Сообщение

    This is a topic that’s near to my heart… Best wishes!
    Exactly where are your contact details though?

  • minecraft #3 16/04/2019 - 10:13
    Прохожий 1 Сообщение

    This blog was… how do you say it? Relevant!!
    Finally I’ve found something that helped me. Thank
    you!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

https://profkatalog.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif
 
:bye:
https://profkatalog.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif
 
:good:
https://profkatalog.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif
 
:negative:
https://profkatalog.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif
 
:scratch:
https://profkatalog.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif
 
:wacko:
https://profkatalog.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif
 
:yahoo:
https://profkatalog.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif
 
B-)
больше...