Web Creation - еженедельный сетевой журнал для вебмастеров

   
Таблицы

Автор: Alan
Информация взята с сайта: http://spider.vov.ru

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

- Применение №1
- Применение №2
- Применение №3


Применение№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 всё сама режет и сохраняет. Самое главное в этой технологии правильно подогнать размеры ячеек к размерам кусочков рисунка. Вот пример:

1Row1xCol1.jpg 1Row1xCol2.jpg 1Row1xCol3.jpg
1Row2xCol1.jpg 1Row2xCol2.jpg 1Row2xCol3.jpg
1Row3xCol1.jpg 1Row3xCol2.jpg 1Row3xCol3.jpg

 Для наглядности я сделал border="1" , а вообще надо ставить нулевое значение. :)

HTML текст:

 


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

Copyright © 2001 Alan |  wede@euro.ru  | http://wede.euro.ru | All rights reserved.
Мой проект http://spider.vov.ru

 

© журнал принадлежит Web Creation
по всем вопросам обращаться А. Кузьмин