|
Создадим таблицу 4 строки 2 колонки
В первой строке текст размещен слева, в последней строке - справа, а в централной строке - посредине
| Первая строка. Текст1 | Первая строка. Текст2 |
| Последняя строка. Текст1 | Последняя строка. Текст2 |
| Текст1 | Текст2 |
Добавим заголовок к нашей таблице. Для этого используем тег . Для этого тега есть два параметра align - задает выравнивание заголовка и valign - определяет вверху таблицы или внизу будет выводится заголовок.
допустим только внутри тега сразу после открывающего тега.
Вид заголовка в зависимости от align будет отличаться в разных браузерах.
Построим простейшую таблицу, состоящую из одной строки и двух столбцов.
| Текст1 | Текст2 |
Добавим рамку к нашей таблице. Для этого нужно в тег добавить border="1" ( Этот параметр определяет ширину рамки таблицы ), если нужна рамка толщиной 1 пиксель то можно написать border без параметров
| Текст1 | Текст2 |
Рамка появилась, но она какая то мрачная :) Попробуем разукрасить рамку, добавив еще один параметр bordercolor который определяет цвет рамки. Сделаем нашу рамку ядовито-красного цвета :).
Вот наша таблица с красной рамкой
Сделаем открытку со стихами. Ввиду того что я ленивый и мне лень искать для примера фоны и текст стихов, я позаимствовал все это у
inmira с её поста http://www.liveinternet.ru/users/inmira/post99542587/.
[показать] - Фон для рамки
[показать] - Фон для текста и картинки
[показать] - Картинка.
Коды картинок ( видны при редактировании черновика или поста )
Размеры картинок уменьшены что бы они не занимали много места в посте
Сделаем рамку для открытки. Для этого построим таблицу 1х1 - одна строка, один столбец. Для таблицы пропишем background.
В background укажем ссылку на фоновую картинку для рамки
Что бы получилась рамка нужно "лишнее" пространство залить фоном для текста и рисунка.
Что бы это сделать нужно указать background для ячейки тяблицы
Получилось не совсем то что мы хотели. Это потому что мы "забыли" указать отступ от границы таблицы до ячейки таблицы.
Исправим это дописав в тег <table> параметр cellspacing
И все равно ничего не получилось. Все это потому что в дневнике, для таблицы в глобальных стилях указано border-collapse: collape и из-за этого cellspacing игнорируется
Что бы это исправить нужно к <table> добавить стиль style="border-collapse: separate;"
Разместим изображение в дневнике. Для этого просто прикрепим файл изображения к сообщению
[680x680]
Код солнышка:
Сделаем всплывающую подсказку к рисунку. Для этого допишем в код рисунка title.
Теперь при наведении мышки на рисунок будет появляться подсказка с нашим текстом
[680x680]
Есть еще один параметр рисунка который можно использовать для удобства при редактирования постов с рисунками. Это alt. Alt - Это текст который будет виден вместо картинки, если невозможно её показать.
Изначально в нем прописан размер рисунка, но этот текст можно изменить на любой другой. Например можно подписать рисунок.
width и height это ширины и высота рисунка. Можно показать рисунок другого размера просто указав в коде width и height
Мы получили рисунок уменьшеного размера, но реальный размер рисунка не изменился! Вы можете в этом убедиться если сохраните рисунок у себя на компьютере и посмотрите его
Рисунки можно использовать и в ссылках. Для примера загружу уменьшиную копию солнышка
Код маленького солнышка:
Для того что бы картинка была ссылкой сделаем вот такой код ( код я показал в сокращенном виде для простоты чтения)
Сделаем код что бы видно было маленькое солнышко, а при клике на нем в новом окне выводилось солнышко в полном размере.
Для этого веред кодом маленького солнышка вставим код <a href="сслыка на большое солнце">, а после кода маленького солнышка - </a>
| Лесное озеро Автор плэйкаста: Olga_146 Создан: 23 мая 2009 4:10 |
Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взял 6 анимированных смыйликов
Для того что бы рисунки располагались горизонтально необходимо убрать галочку с "Сохранять переводы строк в тексте.".
Я специально взял смайлы разного размера. Попробуем теперь сделать вывод рисунков более логичным.
Большие смайлы в одной колонке, маленькие - в другой
Для этого построим таблицу из двух колонок и трех строк ( по количеству смайлов одного размера )
Коды рисунков смайлов ( видны при редактировании черновика или поста )
Что бы не гадать где какой рисунок я в кодах рисунков, в alt подписал рисунки. alt - это альтернативный текст который виден в том случае если рисунок по какой то причине не может быть показан
Все что теперь осталось это разместить рисунки каждый в своей ячейке таблицы
| Ваш текст | ||
| Ваш текст | ||
| Ваш текст | ||
| Ваш текст | ||
| Ваш текст | ||
| Ваш текст | ||
| Ваш текст | ||
| Ваш текст | ||
| Ваш текст | ||
| Ваш текст | ||
| Ваш текст | ||
| Ваш текст | ||
| Ваш текст | ||
| Ваш текст |
|
ПЕРЕВОДЧИК ЦЕЛЫХ СТРАНИЦ ТЕКСТА
ПРОСТО ВСТАВЬТЕ АДРЕС СТРАНИЦЫ И ВЫБИРИТЕ ЯЗЫК!
|
|
|
|
|
|
|
|