Вернуться   Форум ChatPlanet.ru > Дизайн > Разное > Уроки

Важная информация

Ответ
 
Опции темы Опции просмотра
Старый 10.09.2011, 12:04   #1
 
Регистрация: 14.10.2007
Сообщений: 473
Вы сказали Спасибо: 641
Поблагодарили 3,615 раз
Репутация: 3587
Мальвинка вне форума
По умолчанию "Растягивающийся" блок информации для страницы или топика.

Урок "Блок".
В этом уроке я расскажу как нарисовать и прописать на хтмл (установить) *растягивающийся* блок информации на целую страничку или отдельный блок (несколько блоков) на странице или в топик чата.

Часть 1. Рисуем блок.

Шаг 1. Создаём новый файл на прозрачной основе с размерами под ваш блок по ширине (высоту можно взять произвольно). Выбираем инструмент в палитре *прямоугольник с скруглёнными углами*, в панели инструмента устанавливаем значение скругления углов, выбираем нужный цвет и рисуем основу под блок, начиная с верхнего левого угла,удерживая левую кнопку мыши. ВАЖНО - не забудьте кликнуть резинкой по нарисованому прямоугольнику, чтобы превратить фигуру в простой слой.



Шаг 2. Дублируем слой ( из него будем делать рамочку для блока). Кликаем по верхнему слою, удерживая Ctrl - нарисованный прямоугольник
выделится пунктиром. Далее, следуем рисунку (Выделить - Модификация - Сжатие) и выставляем толщину будущей рамочки (например 3рх -сжать на 3 рх). Нажимаем Delete. На этом слое останется только рамочка, внутри будет пусто (этого пока не видно потому,что ниже находится слой такого же цвета как и рамочка )))


Шаг 3. Переходим на слой ниже (основа прямоугольника). Выставляем прозрачность.


ЗАМЕЧАНИЕ: Рамочку можно дополнительно разукрасить, например, применить к рамочке стиль-узор.
Слой - Стиль слоя - Залить узором - выставите процент заливки.


Шаг 4. Соединяем слои. Наш блок готов. Теперь будем его разрезать на части.
Выделяем *верхушку* блока - эта часть будет неподвижна в блоке как и нижняя часть.
ВАЖНО: обратите внимание, где проходит нижний край разреза - закруглённость углов должна полностью находиться в шапке блока!

Правка - Копировать - Новый файл - Вставить и сохраняем изображение "Сохранить как Web" и выбираем формат PNG-24

В итоге,всё лишнее (прозрачка) уберётся останется чистый файлик шапочки блока.


Шаг 5. Возвращаемся к прямоугольнику и удаляем вершинку блока. Выделяем низ блока, закругления углов должны полностью входить в картинку.

Повторяем процеруру выше,сохраняем как веб в формате png.



Шаг 6. Возвращаемся к прямоугольнику, удаляем выделенный низ. Осталось сохранить серединку блока - она будет *растягиваться* т.е. эта картинка будет повторяться в зависимости от наполнения блока инфой. Середина блока в примере - равномерная картинка, поэтому можно выделить небольшой кусочек и сохранить в формате png.



Таким образом, создали картинки для каждой части блока.
На страничке этот блок будет выглядеть вот так ( на заднем плане блока - фоновая кратинка всей страницы)


ЗАМЕЧАНИЕ: Вы можете разукрасить ваш блок как вам захочется (добавить тень, стили,картинки), единственное - учитывайте, что серединка блока будет повторяться - осторожно с картинкой для этой части.
Пример более сложных картинок для блока:


На этом первая часть урока закончена. Во второй части я расскажу как прописать блок на вашу страничку при помощи css стилей.
Report Post
Ответить с цитированием
Эти 6 пользователя(ей) сказали Спасибо Мальвинка за это полезное сообщение:
Annet (08.09.2013), Dozer1 (10.09.2011), miss (10.09.2011), Банши (10.09.2011), Ночная Волчица (13.09.2011), плюха (12.09.2011)
Старый 10.09.2011, 12:17   #2
 
Регистрация: 03.06.2010
Сообщений: 602
Вы сказали Спасибо: 2,898
Поблагодарили 2,872 раз
Репутация: 2882
miss вне форума
По умолчанию

Нажмите для просмотра
Цитата:
Сообщение от Мальвинка Посмотреть сообщение
Урок "Блок".
В этом уроке я расскажу как нарисовать и прописать на хтмл (установить) *растягивающийся* блок информации на целую страничку или отдельный блок (несколько блоков) на странице или в топик чата.

Часть 1. Рисуем блок.

Шаг 1. Создаём новый файл на прозрачной основе с размерами под ваш блок по ширине (высоту можно взять произвольно). Выбираем инструмент в палитре *прямоугольник с скруглёнными углами*, в панели инструмента устанавливаем значение скругления углов, выбираем нужный цвет и рисуем основу под блок, начиная с верхнего левого угла,удерживая левую кнопку мыши. ВАЖНО - не забудьте кликнуть резинкой по нарисованому прямоугольнику, чтобы превратить фигуру в простой слой.



Шаг 2. Дублируем слой ( из него будем делать рамочку для блока). Кликаем по верхнему слою, удерживая Ctrl - нарисованный прямоугольник
выделится пунктиром. Далее, следуем рисунку (Выделить - Модификация - Сжатие) и выставляем толщину будущей рамочки (например 3рх -сжать на 3 рх). Нажимаем Delete. На этом слое останется только рамочка, внутри будет пусто (этого пока не видно потому,что ниже находится слой такого же цвета как и рамочка )))


Шаг 3. Переходим на слой ниже (основа прямоугольника). Выставляем прозрачность.


ЗАМЕЧАНИЕ: Рамочку можно дополнительно разукрасить, например, применить к рамочке стиль-узор.
Слой - Стиль слоя - Залить узором - выставите процент заливки.


Шаг 4. Соединяем слои. Наш блок готов. Теперь будем его разрезать на части.
Выделяем *верхушку* блока - эта часть будет неподвижна в блоке как и нижняя часть.
ВАЖНО: обратите внимание, где проходит нижний край разреза - закруглённость углов должна полностью находиться в шапке блока!

Правка - Копировать - Новый файл - Вставить и сохраняем изображение "Сохранить как Web" и выбираем формат PNG-24

В итоге,всё лишнее (прозрачка) уберётся останется чистый файлик шапочки блока.


Шаг 5. Возвращаемся к прямоугольнику и удаляем вершинку блока. Выделяем низ блока, закругления углов должны полностью входить в картинку.

Повторяем процеруру выше,сохраняем как веб в формате png.



Шаг 6. Возвращаемся к прямоугольнику, удаляем выделенный низ. Осталось сохранить серединку блока - она будет *растягиваться* т.е. эта картинка будет повторяться в зависимости от наполнения блока инфой. Середина блока в примере - равномерная картинка, поэтому можно выделить небольшой кусочек и сохранить в формате png.



Таким образом, создали картинки для каждой части блока.
На страничке этот блок будет выглядеть вот так ( на заднем плане блока - фоновая кратинка всей страницы)


ЗАМЕЧАНИЕ: Вы можете разукрасить ваш блок как вам захочется (добавить тень, стили,картинки), единственное - учитывайте, что серединка блока будет повторяться - осторожно с картинкой для этой части.
Пример более сложных картинок для блока:


На этом первая часть урока закончена. Во второй части я расскажу как прописать блок на вашу страничку при помощи css стилей.


Вау ты супер зай,спасибо за урок!!!
__________________
фраз про любовь до гроба: Здесь только боль, обида, нефильтрованная злоба...]©
Report Post
Ответить с цитированием
Ответ

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сервисы "Последние просмотры анкеты" и "Редактор меню" eXandr Новости и объявления 58 13.10.2011 20:59
Проблема с "Люди в чате "(страницы раздела) Yonica Вопросы по чатам сервиса «Мой чат» 5 12.02.2011 14:43
Кодировка страницы "Забыли пароль" Мальвинка Вопросы по чатам сервиса «Мой чат» 10 26.01.2011 01:03
Игра "Викторина" в чатах августа. Возможно ли? forspam12 Вопросы по чатам сервиса «Мой чат» 4 15.01.2010 00:18


Текущее время: 20:15. Часовой пояс GMT +4.


Рейтинг Chat Planet Top
Посетителей всего
Просмотров сегодня
Посетителей сегодня
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. Перевод: zCarot
При перепечатке материалов форума обязательна активная ссылка на тему — источник информации.