Помощь блогеру |
Учимся делать рамки.
Урок 1
Чтобы научиться делать рамочки, нужно вникнуть в суть их создания.
Html-код рамки состоит из тегов. Используя многообразие тегов, можно составлять разные рамки.
Тег HTML состоит из следующих друг за другом в определенном порядке элементов:
⦁ левой угловой скобки < (такого же, как знак "меньше")
⦁ имени тега, например TABLE или PRE
⦁ сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER. Или может быть без атрибутов вообще.
⦁ правой угловой скобки > (такой же, как знак "больше").
например: <table border="2">
ВАЖНО!
Закрывать все теги нужно обязательно. Только тег <br />(break line) не требует парного закрывающего тега.
Писать можно любые буквы - большие или маленькие - TABLE или table
Хочу, чтобы все понимали, что все теги имеют свою пару,
например, <TABLE></TABLE> или <tbody></tbody>
<TABLE> и <tbody>< - открывающие теги, а </TABLE> и </tbody> - закрывающие. Закрывающий тег имеет слэш (от англ. slash, косая черта).
И в html-коде писать нужно обязательно оба тега.
Но закрывающие теги пишутся в противоположном порядке.
Думаю, так будет понятнее
1<TABLE>2<tbody>3<TR>4<TD>5<center>СОДЕРЖИМОЕ РАМКИ</center>5</TD>4</TR>3</tbody>2</TABLE>1
Об этом нельзя забывать!
Чтобы лучше усвоить урок, советую нажать на эту ссылку http://htmledit.squarefree.com/ и открыть редактор, в котором можно легко повторять мои действия.
Вставляем код в открывшемся окне в верхней половине редактора. В нижней половине видим результаты наших действий.
Редактируем запись. Введенные данные обновляются. И вы видите это обновление.
Итак, начинаем.
Тег TABLE создает таблицу.
Можно составлять таблицы с разным количеством ячеек.
Сейчас нам понадобится таблица с одной ячейкой, которую мы и назовём впоследствии рамочкой.
<TABLE> СОДЕРЖИМОЕ РАМКИ </TABLE>
Вставим этот элемент кода в редактор и будем его наполнять, дописывая атрибуты к тегу TABLE .
Ставим курсор в тег TABLE
делаем отступ, нажав на клавиатуре "Пробел" и дописываем (или копируем отсюда и вставляем) атрибут border - ширина обводки рамки в пикселах (px). Если атрибут border не указан, то рамка будет без обводки. Но сейчас мы его поставим и установим значение 2.
<TABLE border "2"> СОДЕРЖИМОЕ РАМКИ </TABLE>
Нам нужен фон в рамку и для этого дописываем атрибут background, отвечающий за фоновый рисунок. И чтобы браузер знал, где взять этот фон, укажем его адрес. Т.е. записывать будем background="АДРЕС ФОНА"
<TABLE border "2" background="АДРЕС ФОНА"> СОДЕРЖИМОЕ РАМКИ </TABLE>
Теперь нужно вставить ещё 3 тега: <tbody><tr><td> Они у нас всегда идут рядышком.
Тег tbody - (От Англ. table body - "тело" таблицы), служит для указания нескольких независимых больших столбцов в таблице - а любую простую таблицу можно представить как таблицу с одним большим столбцом - можно сделать таблицу с несколькими tbody и увидеть, что они отвечают за большие независимые столбцы, каждый из которых представляет собой обычную простую таблицу состоящую из набора tr-строк.
Тег TR определяет строку и переход на следующую
Тег TD поддерживает ширину рамки и создание новой ячейки.
Не забываем про закрывающие парные теги.
Дописываем после угловой скобки.
<TABLE border "2" background="АДРЕС ФОНА"><tbody><TR><TD>СОДЕРЖИМОЕ РАМКИ </TD></TR></tbody></TABLE>
Смотрим в окне просмотра. Вот, уже что-то похожее на рамку... но ещё не рамка. Возвращаемся.
Адрес фона - это адрес (url) картинки, которую мы будем ставить фоном рамки. Его можно получить через хостинги картинок или загрузив на Лиру. Адрес всегда начинается с http:// и заканчивается точкой и расширением картинок jpg, png, bmp или gif.
Я загрузила через редактор Лиру.
Вставляем на место слов АДРЕС ФОНА
<TABLE border "2" background="АДРЕС ФОНА"><tbody><TR><TD>СОДЕРЖИМОЕ РАМКИ </TD></TR></tbody></TABLE>
Смотрим.
У нас получилась рамочка с одним фоном, которая будет растягиваться в высоту по содержанию рамки и во всю ширину поста.
У нас получилась рамочка с одним фоном, которая будет растягиваться во всю ширину поста.
|
А хотелось бы, чтобы она выглядела более компактной.
Для этого установим её ширину, используя атрибут width. Можно указывать в процентах (width="60%") или пикселах (width="700"). Значение может быть любое. Сделаем небольшую рамочку в 350px.
Если нужна рамка определенной высоты, можно так же вставить атрибут height="значение высоты".
Возвращаемся и дописываем width="350"
<TABLE border "2" background="АДРЕС ФОНА" width="350"><tbody><TR><TD>СОДЕРЖИМОЕ РАМКИ</TD></TR></tbody></TABLE>
Смотрим.
Теперь установим рамку по центру, подставив атрибут выравнивания align. Возможные значения этого атрибута: center, left, right
Установим значение center и допишем align="center"
<TABLE border "2" background="АДРЕС ФОНА" width="350" align="center"><tbody><TR><TD>СОДЕРЖИМОЕ РАМКИ</TD></TR></tbody></TABLE>
Смотрим, что ещё нас не устраивает.
Текст расположен слишком близко к краям рамки. Нужно сделать отступ. На Лиру отвечает за это стилевое свойство padding, которое должно добавляться к тегу TD - style="padding: ЗНАЧЕНИЕpx;"
Установим значение, к примеру, 20 пикселов и допишем.
<TABLE border "2" background="АДРЕС ФОНА" width="350" align="center"><tbody><TR><TD style="padding: 20px;">СОДЕРЖИМОЕ РАМКИ</TD></TR></tbody></TABLE>
Смотрим
А чтобы текст встал по центру, заключим его в тег center. Не забывайте о закрывающем теге. Вставляем.
<TABLE border "2" background="АДРЕС ФОНА" width="350" align="center"><tbody><TR><TD style="padding: 20px;"><center>СОДЕРЖИМОЕ РАМКИ</center></TD></TR></tbody></TABLE>
Смотрим.
У нас готова рамочка с фоном.
Это основной html-код всех рамок.
Допускается вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. Т.е. рамка в рамке. Таким образом мы и делаем все рамочки.
Как бы разделим наш готовый код рамки на 3 части
1 часть
<TABLE border "2" background="АДРЕС ФОНА" width="350" align="center"><tbody><TR><TD style="padding: 20px;">
2 часть
<center>СОДЕРЖИМОЕ РАМКИ</center>
3 часть
</TD></TR></tbody></TABLE>
Теперь выделяем и копируем 1-ую часть кода
устанавливаем курсор в конец первой части и вставляем её в основной код
Снова ставим курсор (в принципе, он уже там стоит) в конец только что вставленной части и вставляем ещё раз эту же часть (копировать снова не надо, она находится в буфере обмена). И ещё раз, и ещё... сколько хотите. Но не переусердствуйте.
Теперь нужно скопировать закрывающие теги и вставить столько же, сколько первых.
Я добавила 3 первых части и 3 закрывающих.
Можно скопировать и пользоваться, подставляя свои значения.
<TABLE border "0" background="АДРЕС ФОНА" align="center"><tbody><TR><TD style="padding: ОТСТУП ОТ КРАЯ РАМКИpx;"><TABLE border "0" background="АДРЕС ФОНА" align="center"><tbody><TR><TD style="padding: ОТСТУП ОТ КРАЯ РАМКИpx;"><TABLE border "0" background="АДРЕС ФОНА" align="center"><tbody><TR><TD style="padding: ОТСТУП ОТ КРАЯ РАМКИpx;"><TABLE border "0" background="АДРЕС ФОНА" width="ШИРИНА ФОНА ДЛЯ ЗАПИСИ" align="center"><tbody><TR><TD style="padding: ОТСТУП ОТ КРАЯ РАМКИpx;"><center><font size="3" color="8b4513" face="verdana">СОДЕРЖИМОЕ РАМКИ</font></center></TD></TR></tbody></TABLE></TD></TR></tbody></TABLE></TD></TR></tbody></TABLE></TD></TR></tbody></TABLE>
А теперь можно в ней поменять отступы, установить свои фоны, убрать совсем или увеличить ширину обводки, изменить ширину самой рамки, отформатировать текст и т.д.
Ширина такой рамки меняется от значения ширины внутреннего фона, т.е. фона для текста. А в остальных фонах тег можно либо совсем убрать, либо указать такую же, как у внутреннего.
Чтобы отформатировать текст, нужно слова СОДЕРЖИМОЕ РАМКИ заключить в теги <font size="3" color="8b4513" face="verdana">СОДЕРЖИМОЕ РАМКИ</font>
Я уберу бордюр (поставлю значение "0"), поставлю 4 фона и установлю отступы. Получилась такая рамка.
Урок 2
Урок 3
bloginja
|
|
