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

Как поменять шаблон (дизайн) на сайте 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"

У этой статьи пока нет комментариев

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

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

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