Вторник, 03.03.2026, 12:31
Меню сайта
    Форма входа
    Категории раздела
    скрипты для ucoz сайта [3099]
    шаблоны для ucoz скачать [2660]
    Иконки групп для форума [25]
    Графика для сайта [1953]
    шаблоны psd для фотошопа [27]
    кисти для фотошопа [39]
    уроки фотошопа на русском языке [4]
    стили для фотошопа [3]
    шрифты для фотошопа cs4 [12]
    Web-master [3058]
    Поиск
    Календарь
    «  Июль 2009  »
    Пн Вт Ср Чт Пт Сб Вс
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031
    Архив записей
    Наш опрос
    Умеете ли вы писать скрипты для ucoz?
    Всего ответов: 73
    Мини-чат
    200
    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Главная » 2009 » Июль » 2 » Как самому создать шаблон для uCoz (урок)
    16:12
    Как самому создать шаблон для uCoz (урок)
    специально по заявки Web-Master_Bolt

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

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

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

    Начнем. Сначало надо будет нарисовать блок в фотошопе.
    Открываем фотошоп и создаем новый документ. Размеры: ширина - 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% от всего шаблона! В следущих уроках я научу вас еще чему-нибудь!

    Взято с: all-forucoz.ucoz.ru

    ОЦЕНИВАЙТЕ КОМУ ПОМОГ!

    Категория: Web-master | Просмотров: 360 | Добавил: XaLePa | Рейтинг: 0.0/0
    Всего комментариев: 5
    5 XaLePa  
    0
    ссыль на новость кинь! если было angry

    4 AlexV  
    0
    Ну например я не понял что за предмет на 1 рисунке выбран, и где стили слоя.

    3 XaLePa  
    0
    А чё там наподабе все!
    в CS4!

    2 AlexV  
    0
    Блин, а для CS4 можете зделать? А то там всё по другому(

    1 xrenagubka  
    0
    СПС БОЛЬШОЕ.+

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]