Мобильный LiveInternet Учимся делать рамки

LiveInternet мобильная версия

Авторизация

Дневник bloginja Лента друзей - Дневник - Полная версия

Учимся делать рамки 24-03-2016 19:07 к комментариям - к полной версии - понравилось!

Помощь блогеру

Учимся делать рамки.
Урок 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-коде писать нужно обязательно оба тега.
Но закрывающие теги пишутся в противоположном порядке.

Думаю, так будет понятнее

¹<TABLE>²<tbody>³<TR>⁴<TD>⁵<center>СОДЕРЖИМОЕ РАМКИ</center>⁵</TD>⁴</TR>³</tbody>²</TABLE>¹

Об этом нельзя забывать!

Чтобы лучше усвоить урок, советую нажать на эту ссылку http://htmledit.squarefree.com/ и открыть редактор, в котором можно легко повторять мои действия.
редактор 1 (596x280, 9Kb)

Вставляем код в открывшемся окне в верхней половине редактора. В нижней половине видим результаты наших действий.
редактор 2 (600x280, 38Kb)

Редактируем запись. Введенные данные обновляются. И вы видите это обновление.

Итак, начинаем.

Тег 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-ую часть кода
РєР°СЂС‚РёРЅРєР° 1 (510x141, 85Kb)

устанавливаем курсор в конец первой части и вставляем её в основной код
РљРђР РўР

Снова ставим курсор (в принципе, он уже там стоит) в конец только что вставленной части и вставляем ещё раз эту же часть (копировать снова не надо, она находится в буфере обмена). И ещё раз, и ещё... сколько хотите. Но не переусердствуйте.

Теперь нужно скопировать закрывающие теги и вставить столько же, сколько первых.
5 (580x122, 66Kb)

Я добавила 3 первых части и 3 закрывающих.
6 (560x220, 168Kb)

Можно скопировать и пользоваться, подставляя свои значения.

<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

вверх^ к полной версии понравилось! в evernote

Комментарии (57): вперёд»

Лариса_Виноградова 24-03-2016-19:24 удалить

Юленька,спасибо за урок!!!!!любовь!

Html-код рамки состоит из тегов.

1<TABLE>2<tbody>3<TR>4<TD>5<center>СОДЕРЖИМОЕ РАМКИ</center>5</TD>4</TR>3</tbody>2</TABLE>1

<TABLE> СОДЕРЖИМОЕ РАМКИ </TABLE>

border

<TABLE border "2"> СОДЕРЖИМОЕ РАМКИ </TABLE>

background

background="АДРЕС ФОНА"

<TABLE border "2" background="АДРЕС ФОНА"> СОДЕРЖИМОЕ РАМКИ </TABLE>

<tbody><tr><td>

<TABLE border "2" background="АДРЕС ФОНА"><tbody><TR><TD>СОДЕРЖИМОЕ РАМКИ </TD></TR></tbody></TABLE>

<TABLE border "2" background="АДРЕС ФОНА"><tbody><TR><TD>СОДЕРЖИМОЕ РАМКИ </TD></TR></tbody></TABLE>

width="350"

<TABLE border "2" background="АДРЕС ФОНА" width="350"><tbody><TR><TD>СОДЕРЖИМОЕ РАМКИ</TD></TR></tbody></TABLE>

align="center"

<TABLE border "2" background="АДРЕС ФОНА" width="350" align="center"><tbody><TR><TD>СОДЕРЖИМОЕ РАМКИ</TD></TR></tbody></TABLE>

style="padding: ЗНАЧЕНИЕpx;"

<TABLE border "2" background="АДРЕС ФОНА" width="350" align="center"><tbody><TR><TD style="padding: 20px;">СОДЕРЖИМОЕ РАМКИ</TD></TR></tbody></TABLE>

<TABLE border "2" background="АДРЕС ФОНА" width="350" align="center"><tbody><TR><TD style="padding: 20px;"><center>СОДЕРЖИМОЕ РАМКИ</center></TD></TR></tbody></TABLE>

<TABLE border "2" background="АДРЕС ФОНА" width="350" align="center"><tbody><TR><TD style="padding: 20px;">

<center>СОДЕРЖИМОЕ РАМКИ</center>

</TD></TR></tbody></TABLE>

<font size="3" color="8b4513" face="verdana">СОДЕРЖИМОЕ РАМКИ</font>

Вы сейчас не можете прокомментировать это сообщение.

¹<TABLE>²<tbody>³<TR>⁴<TD>⁵<center>СОДЕРЖИМОЕ РАМКИ</center>⁵</TD>⁴</TR>³</tbody>²</TABLE>¹