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

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

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

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

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

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

Вертикальный ряд кнопок слева от схемы позволяет за один клик:
- выделить все подрамочки;
- выделить внешнюю подрамочку;
- выделить все внутренние подрамочки;
- сбросить выделение всех подрамочек.

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

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

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

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

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

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

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

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

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

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

Используются следующие кнопки:
- открывает палитру для выбора цвета границы или фона;
- открывает окно для выбора статичных фоновых картинок;
- открывает окно для выбора блестящих фоновых картинок;
- открывает окно для вставки картинки из интернета с использованием её URL-адреса;
- очищает настройки всей строки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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://интернет.адрес.картинки&quot; /> с URL-адресом картинки. Вы можете сделать это вручную или использовать кнопку , открывающую окно добавления картинки, в котором нужно будет указать URL адрес картинки и дополнительно можно будет указать ее высоту и ширину. При использовании кнопки, HTML-тег для картинки будет создан автоматически. Вы можете вставлять несколько картинок в одну подрамочку.

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

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


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

Под кнопкой "Отправить в Рамочник" находится блок настроек кода.

Выберите в настройках кода свой сайт и скопируйте код рамочки из текстового поля себе в интернет-дневник (подробнее см. пункт Настройки кода

).

Ниже настроек кода находятся следующие текстовые поля:

Это адрес постоянной страницы данной рамочки в галерее Рамочника и HTML-тег ссылки на эту страницу для использования в блогах.

2. Зачем добавлять рамочку в галерею?