Три способа применения таблиц в HTML - DesignJunkie.ru - Видеоуроки, Шаблоны, Photoshop, КНИГИ / УЧЕБНИКИ, Фотографии, Креатив, Графика

Популярное

Три способа применения таблиц в HTML

Автор Administrator

26.03.2008 г.

Три применения таблиц
Вот решил написать о таблицах. Я просто не знаю, что бы web-дизайнеры делали без таблиц. В них очень удобно размещать элементы дизайна, в некоторых случаях ими можно даже заменить графику. Далее я рассмотрю несколько вариантов применения таблиц при вёрстке страницы.

Применение№1

Компоновка элементов таблицы.
Рано или поздно, но каждый дизайнер web-страниц сталкивается с проблемой> эффективного размещения элементов дизайна на странице (графика, текст и др.). На помощь приходят таблицы. Рассмотрим пример: на странице предполагается наличие меню, эмблемы сайта, текста, места под баннеры и пока всё. Как же нам это реализовать…? Создаём примерно такую таблицу (способ построения таблиц в HTML описан почти на каждом сайте для web-мастеров) :

Меню	Логотип
	Основной текст
	Баннеры

Видите как всё просто. Посетителю всегда должно быть ясно где находится мены, основной текст… он не должен тратить и доли секунды на поиск нужной ему части страницы. Этот метод был признан всеми web-дизайнерами (те, которые не хотели признавать всё равно признали, так как HTML – это язык описания текта, а не графики или чего-то ещё :)

Применение№2

Графическое представление таблиц.
У таблиц достаточно много настроек. С их помощью мы можем сделать довольно много полезного для нашей страницы. Например: мне нужно сделать рамку для своего элемента. Если вы ламер, то вы просто её делать не будете, но если вы слегка разбираетесь в HTML, то вы заключите содержание страницы (T1) в рамку и присвойте таблице параметр border="0" и (если захотите) зададите цвет bordercolor="#FF0000". В прочем вы можете подучить HTML и почитать про различия в представлении информации в разных браузерах, и сделать во что. (проблема заключается в том, что NN не поддерживает атрибут цвета рамки и отображает её как ему захочется (чаще всего это конкретно портит дизайн))

Секрет состоит в том, что мы создаём одну таблицу(T2) с нулевыми рамками, но с фоном того цвета, которого должна быть рамка у нашей основной таблицы. После вставим в таблицу (Т1) ещё одну таблицу (Т3) тоже без рамок и с цветом фона как у вашего документа. Теперь приступим к самому интересному. Зададим размеры таблиц. У таблицы (Т2) размеры будут такие width="246" height="95", а у таблицы (Т3) такие width="244" height="93". Заметили различия? Вот что у нас получилось:

Содержание

HTML код:

И так варьируя атрибутами таблицы, вы сможете создать очень даже симпатичную страничку практически без графики и безошибочно отображаемую любыми браузерами.

Применение№3

Соединение графики Суть этого приёма доваольно проста. Если на вашей странице есть большие картинки, то их можно разрезать. Резать можно в Фотошопе (разделяешь линейками, копируешь, вставляешь, сохраняешь), я делаю это проще в Ulead PhotoImpact 5 там есть такая фишка как Image Slicar всё сама режет и сохраняет. Самое главное в этой технологии правильно подогнать размеры ячеек к размерам кусочков рисунка. Вот пример: