Три применения таблиц
Вот решил написать о таблицах. Я просто не знаю, что бы 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". Заметили различия? Вот что у нас получилось:
|
И так варьируя атрибутами таблицы, вы сможете создать очень даже симпатичную страничку практически без графики и безошибочно отображаемую любыми браузерами.
Применение№3
Соединение графики Суть этого приёма доваольно проста. Если на вашей странице есть большие картинки, то их можно разрезать. Резать можно в Фотошопе (разделяешь линейками, копируешь, вставляешь, сохраняешь), я делаю это проще в Ulead PhotoImpact 5 там есть такая фишка как Image Slicar всё сама режет и сохраняет. Самое главное в этой технологии правильно подогнать размеры ячеек к размерам кусочков рисунка. Вот пример:
 |
 |
 |
 |
 |
 |
 |
 |
 |
Для наглядности я сделал border="1", а вообще надо ставить нулевое значение. :)
wede@euro.ru | http://wede.euro.ru
| ← Краткий обзор бесплатных "движков" CMS для сайта | Секреты Adobe Photoshop → |
|---|
Комментарии:
Комментарии сайта
ВКонтакте
Facebook
