УЧИМСЯ ДЕЛАТЬ РАМОЧКУ ПО ШАГАМ В РАМОЧНИКЕ...ДЛЯ НОВИЧКОВ

Воскресенье, 05 Июня 2011 г. 12:20 + в цитатник

Создание рамочки для текста по шагам.

Главная Текстокрас Рамочник Текстофот Буквомиксер Анаграмма Шифровщик Молодой Текстокрас Гостевая Книга Помощь

Рамочник


	Рамочник позволяет создавать красивые рамочки для оформления постов в блогах и сетевых дневниках. С помощью Рамочника рамочкам можно задать цветной фон или фон в виде картинок (в том числе и блестящих), задать вид и расположение содержимого внутри рамочек. Рамочник выдает полностью готовый HTML-код, который затем может быть вставлен на страницу Вашего блога. На сайте имеется галерея рамочек, где Вы можете посмотреть и выбрать понравившиеся Вам рамочки или добавить туда свою.

Создание рамочки по шагам
1. Выбираем тип рамочки
2. Выбираем нужную подрамочку
3. Задаем размеры рамочек
4. Редактируем внешний вид рамочек
5. Редактируем содержимое рамочек
6. Редактируем подпись рамочки

Настройки кода

Галерея Рамочника
1. Как получить рамочку из галереи?
2. Зачем добавлять рамочку в галерею?
3. Как добавить рамочку в галерею?
4. Ограничения на содержимое рамочек.
5. Правила публикации рамочек в галерее.

Создание рамочки по шагам

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

Рамочник позволяет выполнять все эти действия в произвольном порядке.
Получаемая рамочка отображается в самом низу страницы.

1. Выбираем тип рамочки

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

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

2. Выбираем нужную подрамочку

С помощью мыши Вы можете выбирать на этой схеме одну или несколько подрамочек. (При двойном клике выбирается только та подрамочка, на которой кликнули.)
Выбранные подрамочки будут выделены красным цветом на схеме и в списке справа от нее.
(На рисунке выбрана подрамочка "внешняя".)

Вертикальный ряд кнопок слева от схемы позволяет за один клик:

- выделить все подрамочки;

- выделить внешнюю подрамочку;

- выделить все внутренние подрамочки;

- сбросить выделение всех подрамочек.

Далее, для выбранных подрамочек Вы можете менять внешний вид и содержимое (см. ниже).

3. Задаем размеры рамочек

Размеры соответствующих подрамочек задаются в полях справа

Справа от названия каждой подрамочки находятся два поля, в которых можно указать ширину и высоту этой подрамочки.
Размеры могут быть указаны в пикселах или в процентах (для этого поставьте в конце числа знак "%").
Если оставить размер равным нулю, то рамочка растянется по своему внутреннему содержанию.

Отдельное поле регулирует расстояние между внутренними рамками. Значение задается в пикселах.

4. Редактируем внешний вид рамочек

Редактировать внешний вид можно для одной или сразу нескольких подрамочек, выбранных на схеме (см. пункт 2).
Возможность одновременного редактирования нескольких подрамочек сделана для того, чтобы можно было удобно задавать одинаковый внешний вид группе подрамочек (например, всем внутренним).

На рисунке изображен блок настроек, который управляет внешним видом подрамочек.

Настройки, определяющие внешний вид выбранных подрамочек.

В самом верху блока перечислены выбранные подрамочки, для которых будет редактироваться внешний вид (на картинке это "внешняя" и "верхняя-правая").

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

В каждой строке можно задать ширину, цвет и вид границы, а также заполнить следующий за границей фон цветом или картинкой и задать его ширину.

Используются следующие кнопки:

- открывает палитру для выбора цвета границы или фона;

- открывает окно для выбора статичных фоновых картинок;

- открывает окно для выбора блестящих фоновых картинок;

- открывает окно для вставки картинки из интернета с использованием её URL-адреса;

- очищает настройки всей строки.

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

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

5. Редактируем содержимое рамочек

Для того, чтобы редактировать содержимое рамочки, выберите на схеме (см. пункт 2) ровно одну из внутренних подрамочек.

Следующий блок настроек позволяет управлять содержимым этой выбранной подрамочки.

Настройки, определяющие содержимое рамочки

В самом верху блока отражено название подрамочки, для которой будет редактироваться содержимое (на картинке это "верхняя-левая").

Итак, что же может содержаться в подрамочках?

Обычный текст.
Если Вы хотите создать рамку для текста, просто впечатайте свой текст в текстовое поле. Настройки над текстовым полем позволяют задать цвет, размер, тип шрифта, сделать текст жирным, наклонным, подчеркнутым, зачеркнутым или моноширным (все буквы одной ширины).

Картинка.
В рамочку можно добавлять картинки, доступные через интернет по URL-адресу, то есть адресу вида: http://интернет.адрес.картинки.
Картинки НЕ доступные по интернет вставить в рамочку нельзя!

Чтобы проверить, доступна ли картинка через интернет, наберите в строке браузера ее адрес (например, http://4maf.ru/style/4maf.png). Если в браузере появится картинка, то все нормально, и ее можно использовать в рамочках.

Картинки, которые просто лежат на Вашем компьютере, не доступны через интернет, поэтому их нельзя использовать в рамочках.
Чтобы сделать картинку, хранящуюся на Вашем компьютере, доступной через интернет, Вы можете воспользоваться одним из интернет-сервисов хранения изображений (например, radikal.ru).

Добавить картинку доступную через интернет в рамочку можно несколькими способами.

1. Просто впечатать в текстовое поле (туда же, куда можно добавлять обычный текст) HTML-тег рисунка: <img src="http://интернет.адрес.картинки" />. Дополнительно Вы можете использовать любые HTML-атрибуты этого тега. Например указать высоту и ширину изображения таким образом: <img src="http://интернет.адрес.картинки" width="ширина" height="высота" />.

2. Использовать кнопку

, открывающую окно добавления картинки.

Окно добавления картинки в содержимое рамки.

В этом окне вы можете указать следующие параметры.

адрес - единственный обязательный параметр, URL-адрес картинки. Сюда нужно ввести интернет адрес картинки, начинающийся на http:// и заканчивающийся одним из расширений .png, .jpg или .gif.
высота и ширина - соответственно высота и ширина картинки в пикселах при отображении. Если не задавать эти параметры, то высота и ширина картинки при отображении будут соответствовать ее реальной ширине и высоте.
подсказка - текст подсказки, который высветится при наведении мыши на картинку. Если оставить не заполненным, то никакой текст высвечиваться не будет.

горизонтально - горизонтальное выравнивание картинки внутри подрамки. Если не задано, то будет совпадать с выравниванием всего остального содержимого. Однако, если Вы хотите, например, выровнять текст в подрамке по её левому краю и вставить в эту же подрамку картинки-разделители, выровненные по центру, то Вам необходимо использовать эту опцию.

Если горизонтальное выравнивание задано, то вертикальное выравнивание становится недоступным. То есть нельзя задать вертикальное и горизонтальное выравнивания одновременно.

Примеры горизонтального выравнивания картинки:

Горизонтальное выравнивание "по центру":

весь текст выравнивается так, это как задано в настройках содержимого подрамки (в этом примере по левому краю), а картинка выравнивается по центру подрамки.

Горизонтальное выравнивание "по левому краю":

весь текст выравнивается так, как это задано в настройках содержимого подрамки (в этом примере по правому краю), а картинка выравнивается по левому краю.

Горизонтальное выравнивание "по правому краю":

весь текст выравнивается так, как это задано в настройках содержимого подрамки (в этом примере по центру), а картинка выравнивается по правому краю.

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

так выглядит вертикальное выравнивание "верх по строке";
так выглядит вертикальное выравнивание "центр по строке";
так выглядит вертикальное выравнивание "низ по строке";

обтекание текста - эта опция становится доступной, только если выбрано горизонтальное выравнивание по левому или правому краю. При включении этой опции текст содержимого подрамки, введенный после тега изображения <img src="..." />, будет пытаться расположиться в свободном пространстве слева или справа от изображения.

Примеры обтекания текстом картинки:

Картинка выровнена с помощью опции "горизонтально" по левому краю, и включено обтекание текстом.
Последующий текст располагается справа рядом с ней. Причем для текста сохраняется выравнивание, выбранное для содержимого подрамки (в данном примере - по правому краю).

Картинка выровнена с помощью опции "горизонтально" по правому краю, и включено обтекание текстом.
Последующий текст располагается слева рядом с ней. Причем для текста сохраняется выравнивание, выбранное для содержимого подрамки (в данном примере - по центру).

адрес (в разделе "ссылка при нажатии на изображение") - заполнение этого поля превращает картинку в ссылку. Введите здесь URL-адрес страницы, на которую должен перейти пользователь при клике на картинке.

Внимание! При добавлении рамки в галерею, все ссылки кроме допустимых автоматически удаляются из содержимого. Список допустимых ссылок см. тут.
открыть - эта опция доступна только тогда, когда поле "адрес" (в разделе "ссылка при нажатии на изображение") заполнено. Она позволяет выбрать, в каком окне будет открыта новая страница при клике на картинке: том же самом или новом.
бордюр - эта опция доступна только тогда, когда поле "адрес" (в разделе "ссылка при нажатии на изображение") заполнено. Если указать число, отличное от нуля, то вокруг изображения будет нарисован бордюр заданной ширины. Бордюр рисуется тем же цветом, так же меняется при нажатии на картинке и помещении указателя мыши над ней, как это делают обычные ссылки на странице блога, где планируется разместить рамку. Имеет смысл использовать толщину бордюра, отличную от нуля, только в том случае, когда Вы планируете подчеркнуть тот факт, что данная картинка является ссылкой.

Пример картинки-ссылки с шириной бордюра равной "3":

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

Раскрашенный текст.
Вы можете использовать для раскраски HTML-теги или даже доверить эту работу Текстокрасу, вставляя в текстовое поле созданный им код (только следите за тем, чтобы в настройках кода Текстокраса указать тот же сайт, на котором Вы планируете использовать рамочку).

Код рамочника.
Вы можете использовать в качестве содержимого другие рамочки, в том числе созданные Рамочником, создавая сложные сочетания рамок.

Любой HTML-код.
Просто вставьте его в текстовое поле. Существуют определенные ограничения на использование HTML-тегов при добавлении рамки в галерею, но при создании рамки для себя Вы можете использовать любые теги (убедитесь только, что их поддерживает сайт, на котором Вы планируете использовать рамочку).

Следующие кнопки

выравнивают содержимое подрамочки соответственно по левому краю, по центру, по правому краю, по ширине.

Кнопка

вставляет в текстовое поле HTML-тег <br /> для переноса строки.

Верхняя кнопка

сбрасывает настройки содержимого рамки.

Нижняя кнопка

полностью очищает текстовое поле.

6. Редактируем подпись рамочки

С помощью Рамочника Вы можете создавать рамочки:
  - без подписи;
  - с подписью Рамочника;
  - со своей личной подписью.
Для этого нужно выбрать одну из следующих опций.

Подпись всегда находится внизу рамки внутри внешней подрамочки.
Вы также можете выбрать расположение подписи: слева, справа или по центру.
Для этого используйте следующие опции строки "Подпись".

Редактирование Вашей подписи происходит в том же самом текстовом поле и с использованием тех же самых настроек, что и редактирование внутреннего содержимого рамочек (см. пункт 5).

Для перехода в режим редактирования подписи используйте кнопку

в строке "Подпись".


	Настройки кода Рамочка готова! Осталось только скопировать код и вставить его на страницу Вашего интернет-дневника. Код рамочки находится в большом текстовом поле на следующем рисунке. Поскольку для разных сайтов дневников код может сильно отличаться, необходимо использовать правильные настройки кода. Для этого выберите в выпадающем списке Ваш сайт. Внимание! Если в списке настроек кода нет сайта интернет-дневников, для которого Вы бы хотели бы использовать Рамочника, обязательно напишите нам в гостевую. Вы также можете попробовать использовать один из стандартных кодов: "таблицы + стандартные атрибуты" или "таблицы + атрибут style". Для тех, кто привык делать рамочки вручную и любит править HTML-код мы сделали опцию "разметить код". При включении этой опции в код будут добавлены комментарии и переносы строк, помогающие визуально отделить одни части кода от других для более удобного редактирования. (Не используйте эту опцию, если не собираетесь править код рамочника вручную.) Однако, будьте осторожны - некоторые сайты воспринимают переносы строк в HTML-коде как реальные и добавляют их к публикуемому посту (в результате чего рамки могут быть искажены). Перед публикацией поста с размеченным кодом на такой сайт, возможно, следует удалить из HTML-кода переносы строк.


	Галерея Рамочника


	1. Как получить рамочку из галереи? Вы можете получить код любой рамочки, хранящейся в галерее. Для этого выберите понравившуюся Вам рамочку и нажмите расположенную под ней кнопку . После этого Вы попадете на страницу этой рамочки. Следующий блок настроек на странице рамочки позволяет редактировать её содержимое (например, вставить свой текст или картинку). Для изменения содержимого конкретной подрамочки данной рамочки выделите ее на схеме с помощью мыши красным цветом - в текстовом поле появится содержимое выбранной подрамочки, которое можно править. Для того, чтобы добавить в подрамочку свою картинку из интернета, вставьте в текстовое поле HTML-тег <img src="http://интернет.адрес.картинки" /> с URL-адресом картинки. Вы можете сделать это вручную или использовать кнопку , открывающую окно добавления картинки, в котором нужно будет указать URL адрес картинки и дополнительно можно будет указать ее высоту и ширину. При использовании кнопки, HTML-тег для картинки будет создан автоматически. Вы можете вставлять несколько картинок в одну подрамочку. Кнопка вставляет в текстовое поле HTML-тег <br /> для переноса строки. Кнопка полностью очищает текстовое поле. Сразу под рамочкой находится кнопка (она же есть и под каждой рамочкой на страницах галереи). Используйте эту кнопку, если Вы хотите серьезно изменить данную рамочку: например изменить количество или расположение подрамочек, оформление подрамочек или параметры текста содержимого (цвет, размер, шрифт). Рамочка будет отправлена в Рамочник и Вы сможете отредактировать ее и получить код непосредственно из Рамочника. Под кнопкой "Отправить в Рамочник" находится блок настроек кода. Выберите в настройках кода свой сайт и скопируйте код рамочки из текстового поля себе в интернет-дневник (подробнее см. пункт Настройки кода). Ниже настроек кода находятся следующие текстовые поля: Это адрес постоянной страницы данной рамочки в галерее Рамочника и HTML-тег ссылки на эту страницу для использования в блогах.


	2. Зачем добавлять рамочку в галерею? Добавление рамочки в галерею Рамочника дает Вам следующие преимущества: 1. Легко и быстро получить код. Каждая рамочка в галерее имеет свою личную страницу, на которой можно получить ее код. Если Вы Мастер рамочек и делаете их для других пользователей Вы можете оставить ссылку в своем блоге на эту страницу. 2. Размеченный код. Для каждой рамочки в галерее всегда можно получить как обычный, так и размеченный код (куда добавлены комментарии и переносы строк, разбивающие код на структурные части), что удобно для тех, кто любит править HTML вручную. 3. Код для разных интернет-дневников. На разных сайтах интернет-дневников код для отображения одной и той же рамочки может серьезно различаться. Для каждой рамочки в галерее можно получить код, адаптированный специально для конкретного сайта интернет-дневников. Таким образом, Ваша рамочка будет корректно отображаться сразу на многих интернет-порталах (на данный момент поддерживается 13 сайтов). 4. Не нужно копаться в HTML. Можно менять содержимое рамочки прямо на ее личной странице в галерее. Это очень удобно для тех, кто любит оформлять сразу несколько постов в одной и той же рамочке. Если же Вы Мастер рамочек и делаете их для других пользователей, то им также будет удобно вставлять свой текст в Ваши рамочки прямо на личной странице рамочки в галерее, не копаясь в HTML-коде. 5. Можно снова редактировать рамочку. Каждую рамочку в галерее можно отправить в Рамочник для редактирования. Часто для того, чтобы сделать новую рамку, нужно лишь слегка изменить прежнюю, что гораздо проще, чем собирать новую с нуля. Таким образом, например, можно легко создавать различные рамки, сделанные в общем стиле. 6. Наконец, о Вас узнают! При публикации рамочки в галерее можно указать свое имя или ник и адрес Вашего блога или сообщества. О Вашем блоге узнают даже те пользователи рамочек, кто ведет свой дневник на других интернет-порталах.


	3. Как добавить рамочку в галерею? После того, как Вы создали с помощью Рамочника готовую рамочку, нажмите кнопку - откроется окно добавления в галерею. В этом окне Вы можете добавить свое имя или ник, краткий комментарий к рамочке и ссылку на свой блог или сообщества из списка допустимых. Допустимыми являются ссылки на следующие сайты: блоги blogspot.com открытки playcast.ru дневники и клубы ya.ru блоги и сообщества blog.ru блоги и сообщества mail.ru блоги и сообщества privet.ru дневники и клубы journals.ru дневники и сообщества diary.ru дневники и сообщества liveinternet.ru журналы и сообщества livejournal.com дневники и сообщества planeta.rambler.ru Внимание! Если Вы хотите использовать ссылку на сайт интернет-дневников, которого нет в этом списке, напишите нам в гостевую. Также в окне добавления в галерею Вы можете указать, нужно или нет использовать опцию "код рамки". Эта опция добавляет в конец подписи рамки маленькую картинку (, или - на выбор) со ссылкой на личную страницу этой рамки в галерее. Таким образом, Ваша рамочка будет дополнительно содержать ссылку на свой код. Поэтому попасть на страницу и получить код Вашей рамочки смогут не только те пользователи, кто нашел ссылку на эту страницу в Вашем блоге или саму рамочку в галерее Рамочника, но и все те, кто увидел Вашу рамку где угодно у других пользователей. Это позволит Вашей рамке распространиться по блогам гораздо быстрее и дальше! (Конечно, если она достаточно красивая.)


	4. Ограничения на содержимое рамочек. Существуют ограничения на использование HTML-кода в качестве содержимого добавляемых в галерею рамочек (эти ограничения не распространяются на рамочки, которые Вы не собираетесь добавлять в галерею - в них можно использовать произвольный HTML). Ниже приводится список допустимых HTML-тегов. <IMG> <BR> <HR> <SPAN> <DIV> <P> <TABLE> <TR> <TD> <TH> <FONT> <B> <I> <U> <S> <STRIKE> <TT> <PRE> а также <A href="адрес">, если в качестве адреса указан адрес одного из допустимых сайтов (см. выше). Внимание! На самом деле мы советуем как можно реже пользоваться HTML-тегами внутри содержимого рамочек, поскольку содержимое рамочек сохраняется и выдается "как есть", без изменений, и на различных сайтах интернет-дневников даже этот небольшой набор тегов может отображаться по-разному.


	5. Правила публикации рамочек в галерее. Галерея Рамочника модерируется администрацией сайта Чмаф.ру Галерея предназначена для хранения и выдачи пользователям кода рамочек. А также для поиска и выбора рамочек для украшения своих дневников. Галерея НЕ предназначена для упражнений в создании рамочек. В связи с этим в галерее не хранятся и будут удалены модератором следующие рамки: 1. С ошибками в HTML-коде содержимого. Если Ваша рамочка НЕ отображается так, как Вам хочется в Рамочнике, то она не станет лучше после добавления в галерею. Это касается в том числе и вставленных в нее картинок. Если вставленная картинка не загрузилась (не появляется в превью) в Рамочнике, то в галерею рамочка добавится тоже БЕЗ картинки. Такие рамки будут удалены модератором. Если же у Вас что-то не получается, внимательно прочтите инструкцию, а если вопросы останутся смело пишите в гостевую или на почту "mikle0@mail.ru" - всем постараемся помочь. 2. Несколько почти одинаковых подряд. Не добавляйте рамку, пока не убедитесь, что она такая, как Вам хотелось: все картинки загружаются, в тексте нет опечаток и прочее. Именно для этого и сделан предварительный просмотр (превью) в Рамочнике. При добавлении мало различающихся рамок в галерею ВСЕ, кроме последней, будут удалены модератором. 3. Публиковавшиеся в галерее ранее. Не добавляйте в галерею рамки, которые Вы из нее же берете, если Вы при этом не внесли в них существенных изменений (даже если это Ваши же рамки). Существенность изменений определяется на взгляд модератора и не противоречит здравому смыслу. Все повторные рамки будут удалены. 4. С маленьким количеством элементов оформления. Рамки, состоящие всего из одного или нескольких бордюров или фонов, при этом не содержащие картинок или осмысленного текста, будут удалены. Вы МОЖЕТЕ добавлять рамочки и без внутреннего содержимого, если сами рамочки действительно качественные и потребовали определенных затрат труда. 5. Очень большие. Особенно это касается ширины. Ничего страшного, если рамка окажется большой по высоте из-за длинного стихотворения, например. 6. Явно некачественные. Качественность определяется модератором. 7. Содержащие рекламу или попытки ее подсунуть. 8. Содержимое которых нарушает законы Российской Федерации. PS. Уважаемые пользователи Рамочника! Пожалуйста, не пугайтесь такого количества ограничений. Администрация сайта рада всем добросовестным создателям рамочек. Мы можем только приветствовать появление в галерее действительно новой и красивой рамочки.