Суббота, 21.09.2024, 10:48
Приветствую Вас Гость | RSS
Скрипты и шаблоны
Главная
Регистрация
Вход
Меню сайта

Категории раздела
Скрипт [2048]
Шаблон [18]
Другое [6]
Шапки [1]

Наш опрос
Вы тут из-за
Всего ответов: 62

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Форма входа

Главная » 2009 » Январь » 28 » Как самому создать шаблон для uCoz (урок)
07:29
Как самому создать шаблон для uCoz (урок)
Хотите создать свой шаблон, но вообще даже не знаете с чего начать? Постепенно я буду выкладывать свои уроки по созданию шаблонов.

Урок: Изготовление произвольного глобального блока для uCoz.

Что нужно для работы:
1. Adobe Photoshop
2. Свой сайт на uCoz`е
3. Этот урок smile

Начнем. Сначало надо будет нарисовать блок в фотошопе.
Открываем фотошоп и создаем новый документ. Размеры: ширина - 210px, высота - 200px. Цвет фона: белый.
Выбираем инструмент выделенный на скриншоте и рисуем фигуру, похожую как на скриншоте.

Заходим в стили слоя.
Далее выполняем действия по скриншотам.

Получится что-то вроде этого:

Затем создаем новый слой (Ctrl+Shift+N) и ставим его между слоем с фигурой и фоном. Затем кликаем по слою с фигурой и нажимаем Ctrl+E. Слои соединятся.

Нажимаем M и делаем такое выделение:

Нажимаем Delete, а потом Ctrl+D. Теперь удаляем наш слой под названием "Фон"(перетаскиваем в корзину). Далее можете украсить свой будущий карказ, но главное не теряйте прозрачность по бокам и в центре. Вот что получилось у меня:

Теперь сливаем все слои в один и нажимаем C. Кадрируем на три части: (верх, центр и низ) и сохраняем все три части в формете PNG. Вот как разделил я:

Переименовываем части:
Верхнюю в title
Среднюю в table
Нижнюю в content.

Далее заливаем ваши части на сайт, в папку images.
Это добавляем в CSS

Code
.boxTable {width:210px;background:url('/images/table.png') repeat-y;margin-bottom:5px;}
.boxTitle {height:45px;background:url('/images/title.png') no-repeat;padding-left:50px;color:#1F5714;font-weight:bold;fontsize:199;padding-top:0px;}
.boxContent {background:url('/images/content.png') bottom no-repeat;padding:5px 13px 17px 13px;}

Теперь ваши блоки будут выглядеть так (в коде):

Code
<table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b>Меню сайта</b></td></tr><tr><td class="boxContent">$SITE_MENU$</td></tr></table>
  <table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b>Разделы новостей</b></td></tr><tr><td class="boxContent">$CATEGORIES$</td></tr></table>
  <table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b>Наш опрос</b></td></tr><tr><td class="boxContent">$POLL$</td></tr></table>
  <table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b>Друзья сайта</b></td></tr><tr><td class="boxContent">$GLOBAL_FRIENDS$</td></tr></table>  
  <table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b>Форма входа</b></td></tr><tr><td class="boxContent" align="center">$LOGIN_FORM$</td></tr></table>
  <table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b>Календарь новостей</b></td></tr><tr><td class="boxContent" align="center">$NEWS_CALENDAR$</td></tr></table>
  <table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b>Поиск</b></td></tr><tr><td class="boxContent" align="center">$SEARCH_FORM$</td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b>Мини-чат</b></td></tr><tr><td class="boxContent">$CHAT_BOX$</td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b>Статистика</b></td></tr><tr><td class="boxContent" align="center">$COUNTER$</td></tr></table>

Если все делали правильно (по уроку), то должно получиться!

Глобальные блоки - это 50% от всего шаблона! В следущих уроках я научу вас еще чему-нибудь!



Примечания: Урок расчитан не на чайников. На вопросы типа "а как создать папку images" и т.д. отвечать не буду! Нормальные вопросы по уроку пишите мне в асю 5224568.
При копировании материала ссылка на источник обязательна!

Источник: http://forucoz.com/
Категория: Другое | Просмотров: 6051 | Добавил: Cr@ze | Рейтинг: 4.0/4
Всего комментариев: 9
9 Tribal  
0
своего рода просто скачать шабло и все так же будет как тут, ток не надо рисовать ничего

8 Tribal  
0
ды хуйня ето все, ето не с нуля, я хочу сделать свой сайт, без css свободно настряпую таблици и все такое, но ето прошлый век, мне нужно выучить css , дане не представляю как ето работает

7 Vitalijs  
0
не видно скринов =(

6 zolton  
0
СКриНОв НЕ ВИдно! сделай что небудь!

5 realina skrinov ne vidno  
0
ti voshe komenti 4itaesh?

4 Скрины не Видно  
0
Сделай чтоб скрины были видны,а то не х не видно...

3 Kent  
0
Зделай чтобы скрин шоты было видно!!

2 temo  
0
spasiba balshoe.a kagda budut sleduiushie uroki?

1 ghosther  
0
опа спасибо

Имя *:
Email *:
Код *:
Поиск

Календарь
«  Январь 2009  »
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
262728293031

Архив записей


Copyright MyCorp © 2024