Как переделать стандартный шаблон на uCoz - Учебники - Веб-мастеру - Форум | ForDiz™- скачать бесплатно софт и шаблоны для сайта

Как переделать стандартный шаблон на uCoz

ecl1pse™

Дата: Суббота, 24.10.2009, 08:01 | Сообщение # 1

Сообщений: 1017

Подарки: 112

Репутация: 200

Многие люди хотят узнать "Как переделать стандартный шаблон на uCoz"... В етой статье я расскажу вам как переделать стандартный шаблон системы uCoz под свои нужды.

Поехали:

Глава 1 «Создание и настройка сайта»

Шаг 1:

Для начала создадим сайт в системе uCoz и подтверждаем E-Mail.

Далее заходим в «Панель управления» Далее заходим в модуль «Редактор страниц»

Шаг 2:

Далее заходим в пункт «Общие Настройки»

Шаг 3:

Теперь нам нужно настроить наш сайт для дальнейшего им управления:

Шаг 4:

После того как мы настроили свой сайт нам нужно выбрать стандартный шаблон, которые позже мы будем изменять, допустим ето будет шаблон #928:

Далее в окошке в правом верхнем углу выбираем нужный дизайн (#928) и жмем кнопку "Ok":

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

Готово. Теперь на странице "Общие настройки" жмём кнопку "Сохранить":

Глава 2 «Замена картинок нашего шаблона»

Шаг 1:

Заходим на сайт и видим чтото вроде етого:

Далее в панель управления заходим "Управление дизайном" и выбераем пункт "Таблица стилей (CSS)":

Потом:

А теперь ищем там ссылку на картинку шапки:

Code

div#contanier {background:url('/.s/t/928/3.gif') repeat-x;}

Вот что нам интересно, а теперь откроем ету ссылку, в адресной строке пишем: http://ВАШ_САЙТ/.s/t/928/3.gif

И видим вот такое чудо:

Сохраняем картинку на комьютер и открываем в фотошопе, ну а дальше редактируйте только синюю область (т.е. белое и черное не трогайте)

У меня получилось чтото типо такого:

Далее загружаем нажу картинку в "Файловый менеджер"

После загрузки она появится в списке, нажмите на картинку чтобы получить ссылку на неё:

Копируем ссылку возвращаемся в "Управление дизайном" "Таблица стилей CSS"

И меняем

Code

div#contanier {background:url('/.s/t/928/3.gif') repeat-x;}

на:

Code

div#contanier {background:url('http://ucozweb.ru/publless/temp4ucoz/3.gif') repeat-x;}

Теперь нас получилось чтото типо такого:

Теперь "резинка" шапки готова, осталось сделать свой логотип под общий вид шапки.

А именно, в CSS ищем

Code

div#hBar {background:url('/.s/t/928/4.jpg') left no-repeat;text-align:right;color:#FFFFFF;font-size:8pt;padding-right:10px;height:17px;padding-top:13px;}

Code

div#logo {background:url('/.s/t/928/5.jpg') no-repeat;color:#FFFFFF;font-size:8pt;padding-left:460px;height:70px;padding-top:20px;}

Code

div#navBar {background:url('/.s/t/928/6.jpg') no-repeat;text-align:right;color:#FFFFFF;font-size:8pt;padding-right:10px;height:17px;padding-top:13px;}

А теперь снова откроем ссылку, в адресной строке пишем: http://ВАШ_САЙТ/.s/t/928/5.jpg и http://ВАШ_САЙТ/.s/t/928/4.jpg и http://ВАШ_САЙТ/.s/t/928/6.jpg

И видим следующее:

и

и

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

У меня получилось чтото типо такого:

и

и

Теперь загружаем их в "Файловый менеджер" и копируем ссылки. Далее меняем:

Code

div#hBar {background:url('/.s/t/928/4.jpg') left no-repeat;text-align:right;color:#FFFFFF;font-size:8pt;padding-right:10px;height:17px;padding-top:13px;}

на:

Code

div#hBar {background:url('http://ucozweb.ru/publless/temp4ucoz/4.gif') left no-repeat;text-align:right;color:#FFFFFF;font-size:8pt;padding-right:10px;height:17px;padding-top:13px;}

Меняем:

Code

div#logo {background:url('/.s/t/928/5.jpg') no-repeat;color:#FFFFFF;font-size:8pt;padding-left:460px;height:70px;padding-top:20px;}

на:

Code

div#logo {background:url('http://ucozweb.ru/publless/temp4ucoz/5.gif') no-repeat;color:#FFFFFF;font-size:8pt;padding-left:460px;height:70px;padding-top:20px;}

Меняем:

Code

div#navBar {background:url('/.s/t/928/6.jpg') no-repeat;text-align:right;color:#FFFFFF;font-size:8pt;padding-right:10px;height:17px;padding-top:13px;}

на:

Code

div#navBar {background:url('http://ucozweb.ru/publless/temp4ucoz/6.gif') no-repeat;text-align:right;color:#FFFFFF;font-size:8pt;padding-right:10px;height:17px;padding-top:13px;}

Теперь открываем сайт и видим подобное:

Ищем:

Code

.boxTitle {height:30px;background:url('/.s/t/928/7.gif') no-repeat;text-align:center;color:#FFFFFF;font-weight:bold;padding-bottom:3px;}

Code

.boxContent {background:url('/.s/t/928/8.gif') bottom repeat-y;padding:5px 5px 10px 5px;}

Открываем: http://ВАШ_САЙТ/.s/t/928/7.gif и http://ВАШ_САЙТ/.s/t/928/8.gif

Видим:

Сохраняем. Изменяем в Photoshop'e:

Заливаем, копируем ссылку и меняем:

Code

.boxTitle {height:30px;background:url('/.s/t/928/7.gif') no-repeat;text-align:center;color:#FFFFFF;font-weight:bold;padding-bottom:3px;}

на

Code

.boxTitle {height:30px;background:url('http://ucozweb.ru/publless/temp4ucoz/7.gif') no-repeat;text-align:center;color:#FFFFFF;font-weight:bold;padding-bottom:3px;}

Меняем:

Code

.boxContent {background:url('/.s/t/928/8.gif') bottom repeat-y;padding:5px 5px 10px 5px;}

на:

.boxContent {background:url('http://ucozweb.ru/publless/temp4ucoz/7.gif') bottom repeat-y;padding:5px 5px 10px 5px;}

Готово. Обновляем страницу, и видим результат:

Неплохо. Теперь сайт смотрится гораздо лучше не правда ли?

Перейдем к следующему этапу. Редактирование "подвала":

В CSS ищем:

Code

#footTable {background:url('/.s/t/928/1.gif') repeat-x;height:57px;}

Открываем, сохраняем на комп, редактируем в фотошопе:

Было: Стало:

Далее меняем:

Code

#footTable {background:url('/.s/t/928/1.gif') repeat-x;height:57px;}

на:

Code

#footTable {background:url('http://ucozweb.ru/publless/temp4ucoz/1.gif') repeat-x;height:57px;}

Обновляем и видим:

Теперь ищем в CSS:

Code

.eTitle {font-family:Arial,Sans-Serif;font-size:11pt;font-weight:bold;color:#FFFFFF;padding: 15px 5px 5px 10px;background:url('/.s/t/928/1.gif') repeat-x;}

меняем на:

Code

.eTitle {font-family:Arial,Sans-Serif;font-size:11pt;font-weight:bold;color:#FFFFFF;padding: 15px 5px 5px 10px;background:url('http://ucozweb.ru/publless/temp4ucoz/1.gif') repeat-x;}

Готово!

Глава 3 «Настройка шаблона»

Шаг 1:

Меняем "копирайты" в "подвале" на свои, для етого на нжно зайти "Управление дизайном" и выбрать пункт "Нижняя часть сайта"

Далее ищем:

Code

меняем на:

Code

Шаг 2:

Заходим на сайт, в админ баре нажимаем "Конструктор" и выбираем пункт "Включить конструктор"

И редактируем боковые блоки под свои нужды.

Конец. Желаю делать красивые шаблоны! Спасибо за внимание!

Автор статьи: Drake