Свежее на сайте:

Вопросы (FAQ)

СТАТЬИ Administrator 17098 Hits
Популярные вопросы от новичков

О графическом редакторе Adobe Photoshop CS6

СТАТЬИ Administrator 27376 Hits 1 Comments
ВСЯ ПРАВДА О ADOBE PHOTOSHOP CS6 Краткое описаниеПрежде, чем мы начнем описание, хотелось бы отметить, что…
показать все

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

E-mail

Close

 

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

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


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

HTML код:




wede@euro.ru  | http://wede.euro.ru

 

Комментарии:

У Вас недостаточно прав для добавления комментариев.
Возможно, Вам необходимо зарегистрироваться на сайте или пройти авторизацию.

КОММЕНТАРИИ

You are here СТАТЬИ - Три способа применения таблиц в HTML
заказать флаера