-Метки

1 сентября вставить фото в рамку в фотошопе. генератор анимированных рамочек генератор календаря и часиков готовим на зиму арбузы и дыню греческий салат делаем надписи на картиночках! делаем плейкасты на лиру для оформления блога для оформления блогов как рисовать стрелки клубничный торт красота курица в вишневом соусе летние рамочки с цветами летний салат-торт мои болезни мои подарки мой отдых моя грусть мышь новые смайлы для вашего блога опросы оригинальные генераторы фона для вашего блога оставаться в живых.. отношения полезные ссылочки постарайтесь забыть почтовые сервера праздники применение таблиц работка размещаем картинки в посте рамочка думаю о тебе рамочка от арины рамочник - рамочки для блогов и интернет дневников рецепт салат русский самоучители на все случаи жизни сделать текст с прокруткой смайлики. смешные малышки-картинки создать фото прикол онлайн сынок творожный торт тортик торты и пирожные: 30 рецептов фотоэффекты на каждый день... частичное анимирование картинки я – как бабочка без крыльев

 -Стена

snake_helen snake_helen написал 29.04.2009 21:09:06:
ДАВАЙТЕ ДРУЖИТЬ)))))))))))

 -Поиск по дневнику

Поиск сообщений в snake_helen

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 05.12.2008
Записей:
Комментариев:
Написано: 3474

Записи с меткой применение таблиц

(и еще 7 записям на сайте сопоставлена такая метка)

Другие метки пользователя ↓

1 сентября генератор календаря и часиков готовим на зиму арбузы и дыню греческий салат делаем надписи на картиночках! делаем плейкасты на лиру для оформления блога для оформления блогов друг мо изучаем html как рисовать стрелки клубничный торт красота курица в вишневом соусе летние рамочки с цветами летний салат-торт мои болезни мои подарки мой отдых моя грусть мышь не ищите новые смайлы для вашего блога опросы оставаться в живых.. отношения полезные ссылочки постарайтесь забыть почтовые сервера праздники применение таблиц работка размещаем картинки в посте рамочка думаю о тебе рамочка от арины рамочник - рамочки для блогов и интернет дневников рецепт салат «лето» салат русский самоучители на все случаи жизни сделать текст с прокруткой смайлики. смешные малышки-картинки сынок творожный торт тортик торты и пирожные: 30 рецептов фотоэффекты на каждый день... частичное анимирование картинки я – как бабочка без крыльев

Применение таблиц

Воскресенье, 12 Июля 2009 г. 14:24 + в цитатник
Это цитата сообщения Великовозрастное_дитя [Прочитать целиком + В свой цитатник или сообщество!]

Применение таблиц



Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взял 6 анимированных смыйликов

 (110x110, 40Kb)  (85x77, 48Kb)  (100x81, 39Kb)  (53x32, 1Kb)  (32x32, 2Kb)  (32x32, 2Kb)

Для того что бы рисунки располагались горизонтально необходимо убрать галочку с "Сохранять переводы строк в тексте.".

Я специально взял смайлы разного размера. Попробуем теперь сделать вывод рисунков более логичным.
Большие смайлы в одной колонке, маленькие - в другой

Для этого построим таблицу из двух колонок и трех строк ( по количеству смайлов одного размера )

Коды рисунков смайлов ( видны при редактировании черновика или поста )

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

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



большой1 Маленький1
большой2 Маленький2
Большой3 Маленький3

Ширина первой и второй колонки не одинаковые что не всегда красиво. Добавим в нашу таблицу еще одну строку Эта строка задаст ширину колонок в 200 пикселей ( можно указать ширину в процентах от общей ширины таблицы )

Что бы не загромождать код я в дальнейшем буду показывать только часть кода где делаем изменения



большой1 Маленький1
большой2 Маленький2
Большой3 Маленький3

Осталась самая малость. Разместить рисунки по центру ячеек. Для этого в добавим valign="middle" и align="center"



большой1 Маленький1
большой2 Маленький2
Большой3 Маленький3

Подпишем колонки. Для этого добавим вначале еще одну строку в которой вместо пропишем



Большие смалы Маленькие смайлы
большой1 Маленький1
большой2 Маленький2
Большой3 Маленький3

Добавим к каждому смайлу название.

Вид таблицы мягко говоря не очень :)

Большие смалы Маленькие смайлы
большой1Большой1 Маленький1Маленький1
большой2Большой2 Маленький2Маленький2
Большой3Большой3 Маленький3Маленький3

Исправим это добавив еще 2 колонки для названий смайлов

Обратите внимание на то что добавилось еще две строки с и . Даже если в ячейках ничего не выводится количество ячеек в каждой строке должно быть одинаковым!!!!!



Название колонок "Большие смайлы и маленькие смайлы" не совсем правильно расположены

Большие смалы Маденькие смайлы
большой1 Большой1 Маленький1 Маленький1
большой2 Большой2 Маленький2 Маленький2
Большой3 Большой3 Маленький3 Маленький3

Объеденим попарно ячейки с названием колонок.



Большие смалы Маденькие смайлы
большой1 Большой1 Маленький1 Маленький1
большой2 Большой2 Маленький2 Маленький2
Большой3 Большой3 Маленький3 Маленький3

Не нравится мне грозный красный смайл :)). Я его выделю каким то фоном что бы он бросался в глаза :). Добавлю в ячеку с этим смайлом фоновый цвет

Заодно и строку с названием колонок выделю фоном



Большие смалы Маденькие смайлы
большой1 Большой1 Маленький1 Маленький1
большой2 Большой2 Маленький2 Маленький2
Большой3 Большой3 Маленький3 Маленький3

Сделаем этот грозный смайл не таким грозным. Разместим его на этом фоновом рисунке :))

 (116x116, 2Kb)

Для этого добавим в ячейку с этим смайлом параметр background



Большие смалы Маденькие смайлы
большой1 Большой1 Маленький1 Маленький1
большой2 Большой2 Маленький2 Маленький2
Большой3 Большой3 Маленький3 Маленький3

Что еще творить с таблицей зависит только от вашей фантазии :)) Можно каждую строку выделить своим цветом добавиви в параметр background. Можно для каждой ячейки или строки задать фоновый рисунок прописав background. Вместо текста в ячейках можно прописать ссылки.

ps: Добавьте в код рисунка title="текст" и при наведении мышки на рисунок будет выскакивать подсказка с текстом



 (116x116, 2Kb)

Метки:  

 Страницы: [1]