Батмангхелидж Ферейдон - ЗАПОМНИТЕ ЭТО ИМЯ Доктор Ферейдон Батм...
Европу ждет ледниковый период? - (0)Гольфстрима больше нет, поэтому Европу ждут якутские морозы. Следствием катастрофы в Мексиканском за...
Яблочный уксус - (0)Скорее всего, Вы наслышаны о пользе яблочного уксуса: возможно, Вы пользовались им для ополаскиван...
Очищение сосудов головного мозга - (0)Способ первый: Ядра пяти грецких орехов измельчить в ступке. Одну столовую ложку светлого мёда...
Как очистить кишечник от каловых камней - (1)Несколько полезных рецептов: Как очистить кишечник от каловых камней?Проверенный рецепт: В...
Применение таблиц |
Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взяла 6 анимированных смыйликов
Для того что бы рисунки располагались горизонтально необходимо убрать галочку с "Сохранять переводы строк в тексте.".
Я специально взяла смайлы разного размера. Попробуем теперь сделать вывод рисунков более логичным.
Большие смайлы в одной колонке, маленькие - в другой
Для этого построим таблицу из двух колонок и трех строк ( по количеству смайлов одного размера )
Коды рисунков смайлов ( видны при редактировании черновика или поста )
Что бы не гадать где какой рисунок я в кодах рисунков, в alt подписала рисунки. alt - это альтернативный текст который виден в том случае если рисунок по какой то причине не может быть показан
Все что теперь осталось это разместить рисунки каждый в своей ячейке таблицы
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
Ширина первой и второй колонки не одинаковые что не всегда красиво. Добавим в нашу таблицу еще одну строку Эта строка задаст ширину колонок в 200 пикселей ( можно указать ширину в процентах от общей ширины таблицы )
Что бы не загромождать код я в дальнейшем буду показывать только часть кода где делаем изменения
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
Осталась самая малость. Разместить рисунки по центру ячеек. Для этого в добавим valign="middle" и align="center"
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
Подпишем колонки. Для этого добавим вначале еще одну строку в которой вместо пропишем
Большие смалы | Маленькие смайлы |
---|---|
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
Добавим к каждому смайлу название.
Вид таблицы мягко говоря не очень :)
Большие смалы | Маленькие смайлы |
---|---|
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
Исправим это добавив еще 2 колонки для названий смайлов
Обратите внимание на то что добавилось еще две строки с и . Даже если в ячейках ничего не выводится количество ячеек в каждой строке должно быть одинаковым!!!!!
Название колонок "Большие смайлы и маленькие смайлы" не совсем правильно расположены
Большие смалы | Маденькие смайлы | ||
---|---|---|---|
![]() | Большой1 | ![]() | Маленький1 |
![]() | Большой2 | ![]() | Маленький2 |
![]() | Большой3 | ![]() | Маленький3 |
Объеденим попарно ячейки с названием колонок.
Большие смалы | Маденькие смайлы | ||
---|---|---|---|
![]() | Большой1 | ![]() | Маленький1 |
![]() | Большой2 | ![]() | Маленький2 |
![]() | Большой3 | ![]() | Маленький3 |
Не нравится мне грозный красный смайл :)). Я его выделю каким то фоном что бы он бросался в глаза :). Добавлю в ячеку с этим смайлом фоновый цвет
Заодно и строку с названием колонок выделю фоном
Большие смалы | Маденькие смайлы | ||
---|---|---|---|
![]() | Большой1 | ![]() | Маленький1 |
![]() | Большой2 | ![]() | Маленький2 |
![]() | Большой3 | ![]() | Маленький3 |
Сделаем этот грозный смайл не таким грозным. Разместим его на этом фоновом рисунке :))
Для этого добавим в ячейку с этим смайлом параметр background
Большие смалы | Маденькие смайлы | ||
---|---|---|---|
![]() | Большой1 | ![]() | Маленький1 |
![]() | Большой2 | ![]() | Маленький2 |
![]() | Большой3 | ![]() | Маленький3 |
Что еще творить с таблицей зависит только от вашей фантазии :)) Можно каждую строку выделить своим цветом добавиви в параметр background. Можно для каждой ячейки или строки задать фоновый рисунок прописав background. Вместо текста в ячейках можно прописать ссылки.
ps: Добавьте в код рисунка title="текст" и при наведении мышки на рисунок будет выскакивать подсказка с текстом
Серия сообщений "ОФОРМЛЕНИЕ дневника":
Часть 1 - Изучаем HTML. Теги. Оформление постов
Часть 2 - Как вставить в блог флэш-анимацию
Часть 3 - Очень полезное для оформления и ведения блога (дневника)
Часть 4 - Как вставить сразу большое количество картинок - в дневник...
Часть 5 - Применение таблиц
Часть 6 - Настройки дизайна. Управление схемами оформления
Часть 7 - Самый полный FAQ по ЛиРу
...
Часть 38 - Список уроков. Как ОФОРМИТЬ ДНЕВНИК
Часть 39 - Хитрoсти Youtube
Часть 40 - Энциклопедия ЛиРУ
Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |