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

Здравствуйте дорогие читатели блога ProfKatalog.ru !В этом посте я постараюсь по возможности максимально разъяснить вам- КАК  ПОМЕНЯТЬ ШАБЛОН (дизайн), вашего блога,сайта созданного на конструкторе ucoz!!!.

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

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

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

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

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

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

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

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

 

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>$SITE_NAME$ Ufeng-Shui.ru</title>
<h1><div style="position: absolute; top: 0px; left: -5000px;">скачать бесплатные <a href="http://webuilder.info" title="шаблоны для сайта ucoz" rel="dofollow">шаблоны для ucoz</a><br>отдых <a href="http://allgenichesk.org.ua" title="отдых в геническе" rel="dofollow">геническ</a><br>купить <a href="http://elektronnie-sigareti.com" title="электронные сигареты atlantis" rel="dofollow">электронные сигареты</a></div></h1>
<link media="screen" href="/style/style.css" type="text/css" rel="stylesheet" />
<link media="screen" href="/style/engine.css" type="text/css" rel="stylesheet" />
</head>
<script type='text/javascript' src='/js/jquery.cookie.js'></script>
 <script type='text/javascript' src='/js/jquery.hoverIntent.minified.js'></script>
 <script type='text/javascript' src='/js/jquery.dcjqaccordion.2.7.min.js'></script>
<script type="text/javascript" src="/js/jquery.jmpopups-0.5.1.js"></script>
<script type="text/javascript" src="/js/libs.js"></script>
<script type="text/javascript">
 //<![CDATA[
 $.setupJMPopups({
 screenLockerBackground: "#000",
 screenLockerOpacity: "0.8"
 });

function openStaticPopup() {
 $.openPopupLayer({
 name: "loginPopup",
 width: 500,
 target: "loginform"
 });
 }
 //]]>
</script>
 <script type="text/javascript">
 $(document).ready(function($){
 $('#accordion').dcAccordion({
 eventType: 'click', //Здесь можно поставить hover, если требуется, чтобы меню работало при наведении на блок
 disableLink: true, //Блокируем ссылки на блоки, иначе будет действовать переход по главным пунктам
 speed: 'slow' //Скорость прокрутки вниз, можно выбрать fast для более быстрого скольжения
 });
 });

 //Табы
 $(function () {
 function makeTabs(contId) {
 var tabContainers = $('#'+contId+' .tabs > div');
 tabContainers.hide().filter(':first').show();

 $('#'+contId+' .tabs .tabNavigation a').click(function () {
 tabContainers.hide();
 tabContainers.filter(this.hash).show();
 $('#'+contId+' .tabs .tabNavigation a').removeClass('selected');
 $(this).addClass('selected');
 return false;
 }).filter(':first').click();
 }
 makeTabs('tabs-1');
 });
 </script>
 </script>
<body>
$ADMIN_BAR$
<!-- Основной контейнер -->
 <div id="wrapper">

<!-- <header> -->
 <div id="header">
 <div id="logo">
 <a href="/"><img src="/img/spacer.gif" alt="" />
 </div>
 </div>

<!-- Навигация -->
 <div id="nav">
 <div class="socnet fl">
 <a href="/" id="rss"><img src="/img/spacer.gif" title="RSS" /></a>
 <a href="/" id="twitter"><img src="/img/spacer.gif" title="twitter" /></a>
 </div>

 <div id="nav_cnt" class="fl">
 <ul>
 <li><a href="/"><img src="/img/spacer.gif" id="zavtrak" alt="" />Завтрак</a></li>
 <li><a href="/"><img src="/img/spacer.gif" id="onebludo" alt="" />Первое блюдо</a></li>
 <li><a href="/"><img src="/img/spacer.gif" id="twobludo" alt="" />Второе блюдо</a></li>
 <li><a href="/"><img src="/img/spacer.gif" id="deserts" alt="" />Десерты</a></li>
 <li><a href="/"><img src="/img/spacer.gif" id="drink" alt="" />Напитки</a></li>
 </ul>
 </div>

 <div class="socnet fr">
 <a href="/" id="facebook"><img src="/img/spacer.gif" title="facebook" /></a>
 <a href="/" id="youtube"><img src="/img/spacer.gif" title="youtube" /></a>
 </div>
 </div>
<!-- </header> -->

 <div id="wrap_cont">
 <!-- Левый блок -->
 <div id="sideleft" class="fl">

<!-- <container> -->
<!-- <block> -->
<div id="orange" class="block">
 <div class="head_block">
 <span>TITLE</span>
 </div>
 <div class="in_block" id="tags">
CONTENT
 </div>
 </div>
<!-- </block> -->
<!-- </container> -->
</div>
 <!-- #Левый блок -->

<!-- Контент -->
 <div id="content" class="fl">
 <div id="aboutsite">
 <p class="green">Куллинария.рф - Сайт посвящен Рецептам разных блюд!</p>
 <p>
 У нас вы найдете самые разнообразные рецепты! <br />
 Каждый день мы публикуем десятки новых рецептов! <br />
 Теперь вы можете найти на нашем сайте Поздравления в стихах: <br />
 <span class="green">С Днем Рожденья</span>, <span class="blue">С новым Годом</span>, <span class="orange">С 23 Февраля</span>, <span class="red">С 8 Марта</span>, <br />
 а так же много других стихов на разные праздники. <br />
 </p>
 <p class="red">Мы стараемся, чтобы Вам было вкусно и интересно!</p>
 </div>

<!-- <middle> -->

[BODY]
<!-- </middle> -->
</div>
<!-- #Контент -->

<!-- Правый блок -->
 <div id="sideright" class="fr">
 <div id="lgnform">

<?if($USER_LOGGED_IN$)?>

<div class="loginbox">
 <a class="vote_rez fl" href="javascript:;" onclick="openStaticPopup()"><b>Управление</b></a>
 <div class="hlinks">

 </div>
 </div>
<div id="loginform" class="window">
 <div class="popup loginenter">
 <div class="popup-head">
 <span class="lcol thide"></span>

 </div>
 <div class="popup-body">

<div class="fl">
<img class="ava" src="$USER_AVATAR_URL$" border="0" alt="" />

</div>
 <div class="fl">
 <ul class="prfl">
 <li><a href="/panel/" target="_blank">Админцентр</a></li>
 <li><a href="$PERSONAL_PAGE_LINK$">Мой профиль</a></li>
 <li><a href="/">Закладки</a></li>
 <li><a href="/">Опубликовать</a></li>
 <li><a href="/">Непрочитанное</a></li>
 <li><a href="/">Статистика</a></li>
 </ul>
 <br /><div><a href="$LOGOUT_LINK$"><b>Выйти</b></a></div>
 </div>
 <div class="clr"></div>
 </div>
</div>
 </div>
<?else?>
<div class="loginbox">
 <a href="$REGISTER_LINK$" class="vote_rez fl">Регистрация</a>
 <a class="fbutton fl" href="javascript:;" onclick="openStaticPopup()">Вход</a>
</div>
<div id="loginform" class="window">
 <div class="popup">
 <span class="fl thide"></span>
 $LOGIN_FORM$
 </div>
</div>
<?endif?>
<br class="cl" />
</div>

<!-- <container> -->
<!-- <block> -->
<div id="adv">
<span>TITLE</span>
<div id="adv_list">
CONTENT
</div>
</div>
<!-- </block> -->
<!-- </container> -->

</div>

<!-- #Правый блок -->

<br class="cl" />
 </div>
<!-- <footer> -->
 <div id="foot_one" class="cl">
 <div class="foot_nav fl">
 <span>Рецепты</span>
 <ul>
 <li>» <a href="/">Завтрак</a></li>
 <li>» <a href="/">Первые блюда</a></li>
 <li>» <a href="/">Вторые блюда</a></li>
 <li>» <a href="/">Гарниры и соусы</a></li>
 <li>» <a href="/">Десерты</a></li>
 <li>» <a href="/">Выпечка</a></li>
 <li>» <a href="/">Напитки и коктейли</a></li>
 </ul>
 </div>

<div class="foot_nav fl">
 <span>Питание</span>
 <ul>
 <li>» <a href="/">Продукты</a></li>
 <li>» <a href="/">Диеты</a></li>
 <li>» <a href="/">Витамины</a></li>
 <li>» <a href="/">Калорийность</a></li>
 <li>» <a href="/">Счетчик калорийности</a></li>
 </ul>
 </div>

 <div class="foot_nav fl">
 <span>Секреты</span>
 <ul>
 <li>» <a href="/">Кулинарные секреты</a></li>
 <li>» <a href="/">Этикет</a></li>
 <li>» <a href="/">Кухни мира</a></li>
 <li>» <a href="/">Таблица мер и весов</a></li>
 </ul>
 </div>

 <div class="foot_nav fl">
 <span>Кухня</span>
 <ul>
 <li>» <a href="/">Рецепты</a></li>
 <li>» <a href="/">Продукты</a></li>
 <li>» <a href="/">Салаты</a></li>
 </ul>
 </div>

 <div class="foot_nav fl">
 <span>Видео рецепты</span>
 <ul>
 <li>» <a href="/">Блюдо за 5 минут</a></li>
 <li>» <a href="/">Салаты</a></li>
 <li>» <a href="/">Закуски</a></li>
 <li>» <a href="/">Супы</a></li>
 <li>» <a href="/">Горячие блюда</a></li>
 <li>» <a href="/">Готовим в духовке</a></li>
 </ul>
 </div>
 </div>

 <div id="foot_two" class="cl">
 <div id="ft_left" class="fl">
 <p>$POWERED_BY$</p>
 <p>Экспорт новостей <a href="/">RSS 2.0</a></p>
 </div>
 <div id="ft_cnt" class="fl">
 <ul>
 <li><img src="/img/spacer.gif" title="О нас" id="about" /> <a href="/">О нас</a></li>
 <li><img src="/img/spacer.gif" title="Реклама" id="rek" /> <a href="/">Реклама</a></li>
 <li><img src="/img/spacer.gif" title="Контакты" id="contact" /> <a href="/">Контакты</a></li>
 <li><img src="/img/spacer.gif" title="Карта сайта" id="sitemap" /> <a href="/">Карта сайта</a></li>
 </ul>
 </div>
 <div id="ft_right" class="fl">
 <p class="fl">В закладки:</p>
 <ul class="fr">
 <li><a href="/" id="fb"><img src="/img/spacer.gif" alt="" /></a></li>
 <li><a href="/" id="vk"><img src="/img/spacer.gif" alt="" /></a></li>
 <li><a href="/" id="mail"><img src="/img/spacer.gif" alt="" /></a></li>
 <li><a href="/" id="rss"><img src="/img/spacer.gif" alt="" /></a></li>
 <li><a href="/" id="yandex"><img src="/img/spacer.gif" alt="" /></a></li>
 </ul>
 </div>
 </div>
<!-- </footer> -->
</div>
</body>
<!-- <popup> --><div class="popup-title"><div class="t">[TITLE]</div></div>
<div class="popup-body"><div class="b">[BODY]</div></div><!-- </popup> -->
</html>

Т.е в этом файле должна находится блочная верстка вашего макета.Каждый блок разделяется не видимым визуально тегом- <!—Разделение между блоками ——>,Как поменять шаблон (дизайн) на сайте 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

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

:) :D :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen:

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-)
больше...