Гостевая
Форум
Разделы
Главная страница
Js скрипты
Php скрипты
Html шаблоны
Книги по Web дизайну
Статьи


Главная страница статей --> Хитрости при программировании php, заметки по базам данных

Все в своих рамках

Источник: realcoding.net

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

1. Таблицы как таковые.


Для начала, напомню самое простое: как создается каркас таблицы. Все начинается с пары тегов table: <table></table>. Они имеют свои стандартные параметры align, border, cellspacing, cellpadding, width, которые отвечают за выравнивание таблицы относительно окна браузера, за наличие рамки у таблицы, за расстояние между ячейками таблицы и отступы внутри ячеек, за ширину таблицы (как в процентах, так и в пикселях). Далее следует пара тегов, определяющих строку таблицы: <tr></tr> Стандартными параметрами для строки являются align и valign, отвечающие за выравнивание ячеек внутри строки по горизонтали и по вертикали. Последняя пара тегов - это теги самих ячеек: <td></td>. С теми же параметрами, что и у строки. Кроме того, существуют еще и теги, позволяющие в самом коде делить таблицу на соответствующие разделы: thead, th, tbody и tfoot. При этом, ТН уже содержит в себе форматирование, позволяющее выделять жирным и выравнивать по центру текст заголовка таблицы. Правда, всё это имеет смысл, если таблица создается с целью именно показать таблицу в html-документе. В самом простом варианте (с учётом всех вышеуказанных тегов) табличный код выглядит вот так:

<table align=left border=1 cellspacing=0 cellpadding=4 width=100%>
<
thead>
<
tr align=center valign=top>
<
th valign=top colspan=3>Заголовок</th>
</
tr>
</
thead>
<
tbody>
<
tr align=center valign=top>
<
td align=center valign=top>Ячейка 1</td>
<
td align=center valign=top>Ячейка 2</td>
<
td align=center valign=top>Ячейка 3</td>
</
tr>
</
tbody>
<
tfo ot>
<
tr align=center valign=top>
<
td align=center valign=top colspan=3>Заключение</td>
</
tr >
</
tfoot>
</
table>.

Всё это проще простого, скажете Вы. И что здесь сложного и опасного?
Во-первых, опасность в параметрах. Не все параметры стоит применять, так же, как и не все параметры из тех, что следовало бы, мы применяем. Так, например, для тега tr не обязательно применение параметров выравнивания. Однако они обязательны (!) для применения с тегом td. Также типичная ошибка, с тегами tr, td и th может не применяться параметр width, однако он очень важен, так влияет на соответствие расположения ячеек в таблице относительно друг друга и таблицы в целом.
Таким образом, создавая таблицу, необходимо указать ширину самой таблицы (а иногда и её высоту - для "благозвучности" дизайна), ширину строки и ячейки/ячеек, горизонтальное выравнивание таблицы и ячейки, а также расстояние между ячейками и внутри-ячеечные отступы. При этом ширина каждой ячейки в строке, если их несколько, должна соответственно быть указанна так, чтобы их сумма соответствовала ширине строки. Однако если указать ширину ячеек, но опустить ширину строки, то может появиться неприятный эффект - "съедание" объектов (например, кнопок html), расположенных в ячейках.
Прошу обратить внимание на параметр colspan, присутствующий в ячейках заголовка и заключения таблицы. Он применяется, когда ячеек в строках больше одной и указывает, на ширину скольких колонок растянется данная ячейка. Параметр, аналогичный ему и касающийся количества "перекрываемых" строк, называется rowspan. Пропуск этих параметров, там, где они необходимы, является очень частой ошибкой и приводит к искажению получаемого в браузере изображения.
Кроме основных параметров, в табличных тегах могут применяться дополнительные, которые особенно не влияют на правильное форматирование таблицы. Это стандартные html-параметры фонового цвета, цвета рамки (основной, "светлой" и "темной"), параметры style и class каскадных таблиц стилей. Здесь важно не ошибиться с использованием цветов и стилей, чтобы ваша таблица выглядела гармонично и не колола глаза пестротой и неопрятностью дизайна. Также, нужно учитывать, что netscape navigator по умолчанию использует для оформления рамки таблицы объемную линию. Он может частично "покрасить" её в указанный вами цвет, но не признает "светло-темного" варианта.
Во-вторых, опасность скрывается в самих таблицах. Нередко, создавая дизайн страницы с помощью таблицы, мы забываем, что ячейки намертво связаны друг с другом. Даже colspan/rowspan не позволяют нам освободиться полностью от тех рамок, в которые нас загоняют столбцы и строки таблицы. А ведь дизайн требует, чаще всего, "вольного" расположения элементов на странице.
В этом случае необходимо прибегнуть к "методу Матрёшки", при котором основная таблица является всего лишь носителем других, функционально значимых таблиц, в которых и располагаются элементы дизайна. На примере это выглядит следующим образом:

<table align=center border=1 cellspacing=0 cellpadding=0 width=100%>
<
tr align=center valign=top width=100%>
<
td valign=top colspan=3>
<!--
Заголовок -- >
<
table align=center border=1 bordercolor=red cellspacing=0 cellpadding=0 width=90%>
<
tr align=center valign=top width=100%>
<
td align=center valign=top width=100%>Таблица в заголовке</td></tr>
</
table>
<!--
Конец Заголовка -- >
</
td>
</
tr>
<
tr align=center valign=top width=100%>
<
td align=center valign=top width=33%>
<! --
Ячейка 1 -- >
<
table align=center border=1 bordercolor=blue cellspacing=0 cellpadding=0 width=90%>
<
tr align=center valign=top width=100%>
<
td align=center valign=top width=100%> Таблица в средней части</td></tr>
</
table>
<! --
Конец Ячейки 1 -->
</
td>
<
td align=center valign=top width=34%>Ячейка 2</td>
<
td align=center valign=top width=33%>Ячейка 3</td>
</
tr>
<
tr align=center valign=top>
<
td align=center valign=top colspan=3>
<!--
Заключение -- >
<
table align=center border=1 bordercolor=green cellspacing=0 cellpadding=0 width=90%>
<
tr align=center valign=top width=100%>
<
td align=center valign=top width=100%>Таблица в конце</td></tr>
</
table>
<!--
Конец Заключения -- >
</
td>
</
tr>
</
table>

Такой способ позиционирования элементов на web-странице позволяет размещать объекты относительно произвольно, так как функциональные таблицы "привязаны" только к размеру и формату ячеек, в которых они находятся, но не зависят от размера и формата основной таблицы в целом. Поэтому, при таком позиционировании, не появляется эффекта растягивания, к примеру, колонки с кнопками и ссылками вслед за удлинением центральной колонки web-страницы при вставке в последнюю огромного размера текста.
Кроме того, такой способ влияет, как ни странно, на форматирование абзацев текстовых блоков на странице. Дело в том, что опыт показывает - netscape не понимает выравнивание justify в ячейке таблицы. Для этого в ячейке ему необходим тег <p align=justify>. Но он также отказывается понимать <p align=justify>, если тег находится в ячейке, которая оперирует параметром colspan. "Матрёшка" спасает положение. netscape не переносит формат ячейки на таблицу, расположенную в ней, а рассматривает последнюю как целиком самостоятельный элемент.
В "методе Матрёшки" необходимо быть внимательным к тому, в каких единицах вы задаёте размер таблиц - в процентах или в пикселях - и какое выравнивание вы при этом задали. Опять таки, по причине своенравного характера netscapeа. Иногда, размер внешней таблицы необходимо указывать в пикселях, если вы хотите в последующем указать размеры внутренних таблиц в процентах, а выравнивание обязательно должно быть центральным. Иначе, может случиться так, что внутренняя таблица растянется на огромное расстояние, безобразно исказив внешнюю таблицу и весь дизайн страницы в целом. Вот простой пример:

1) <table align=center width=100%>
2) <table align=center width=600>
3) <table align=left width=600>
4) <table align=left width=100%>

В первых трёх вариантах, при указанных условиях, ничего страшного не произойдет. Однако в четвёртом, таблицу растянет так, что её правый край вы не сможете увидеть вовсе!

2. Таблицы и графика.


Таблицы являются незаменимым инструментом любого web-дизайнера для размещения графики на странице. Это уже аксиома. Так, используя таблицу, можно сгруппировать отдельные графические файлы, выполняющие самостоятельные функции, в законченное изображение, например заголовок.
Однако, размещение графики в ячейках таблицы тоже может сопровождаться совершением целого ряда ошибок.
Одной из самых распространенных ошибок является вставка рисунка в ячейку таблицы без употребления параметра выравнивания тега <img>. Собственно, когда рисунок расположен в ячейке один и не сопровождается ни текстом, ни какими-либо иными объектами, это не важно. В противном случае, отсутствие выравнивания становится заметным и может испортить весь дизайн.
Дело в том, что тег рисунка (изображения) не наследует параметров выравнивания ячейки, он только подчиняется им, как любой другой объект в ячейке. Поэтому, например, при любом выравнивании в ячейке, текст обязательно "уйдет" под изображение. Но вы же хотите, чтобы текст его "обтекал"? В данном случае, необходимо указать в теге img параметр выравнивания align равный left или right. Тогда изображение будет мягко "окружено" текстом.
Также имеет смысл указать параметры вертикального и горизонтального отступов от изображения vspace и hspace, так как отступы, заданные для ячейки также не наследуются.
В некоторых случаях, необходимо, чтобы часть текста выводилась сбоку от изображения, а остальная уходила под него. При этом, "водораздел" должен быть очень хорошо заметен.
В этом случае, используются два варианта. Либо в теге <br> используется параметр clear=left или clear=right соответственно, и в этом случае часть текста после тега <br> будет уходить под изображение, а в выравнивании последнего можно использовать свойство middle, либо, используя, опять таки, табличные ячейки, поместить изображение в одну, "боковой" текст в соседнюю, а "нижний" - соответственно, в ячейку, расположенную в нижестоящей строке и развернутую на всю эту строку (colspan=2). Разумеется, последний способ громоздок, зато гарантировано, что подобное размещение правильно интерпретирует любой браузер, понимающий таблицы.
Второй распространенной ошибкой является несоответствие размеров ячеек с размерами вставляемого изображения. Это опасно, когда размеры изображения превышают размеры ячейки. В этом случае ячейка безжалостно растягивается, что, безусловно, влияет на расположение соседних элементов на странице. Например, использование графической линии в качестве разделительной черты, вместо <br>, без согласования с размерами ячейки-«носителя», может привести к искажению размеров всей таблицы. Избежать этого, конечно же, можно только согласованием размеров.
Кроме ошибок, часто допускается невнимание к стандартным возможностям табличных тегов. Например, кто из вас серьезно задумывался над возможностями параметров фона, которые, кстати, поддерживаются и строками, и ячейками? Конечно, с помощью bgcolor можно задать цвет таблицы, строки и ячейки, как вместе, так и по отдельности. С помощью background можно вставить изображение в качестве фона. В этом случае оно будет заполнять всю площадь ячейки, строки, таблицы. Тут-то и начинается самое интересное.
Мы можем вставить в одну ячейку два различных самостоятельных изображения, одно поверх другого, создав иллюзию их послойного размещения. Одно будет задано параметром background тега <td>, а другое тегом <img>. Надо только не забыть, что размеры ячейки должны совпадать с размерами изображения (тогда не появится эффект "размножения" картинки или её "обрезания"), размещенного в фон, а самостоятельное изображение должно быть значительно меньше фонового, иначе теряется весь смысл подобного дизайна.
Таким же образом можно группировать изображение и текст, что небесполезно при дизайне, например, ссылок (только в этом случае шрифт должен быть фиксированной величины). Не бесполезно это и просто при использовании относительно больших законченных изображений (например, групповых фотографий) в качестве фона...
Конечно же, возможности таблиц не безграничны, но и не до конца раскрыты. Я попробовал описать лишь малую их часть в данной статье и, надеюсь, она принесет вам пользу.
Удачи!



Похожие статьи:
- Современные технологии продвижения сайтов
- Изменение внешнего вида счетчика в CNStats
- Программная выписка счета в системе WebMoney
- Графический счетчик на Perl
- Работа с хэшами в Perl
- Создание wap-страниц (в формате *.wml)
- За что можно схлопотать бан от поисковых систем!
- Освоение Ajax: Использование XML в запросах и ответах
- Некоторые аспекты использования пользовательских функций в предложениях SQL.
- ADO и XML
- Динамические формы - проверка ввода на JavaScript
- SQL Server в вопросах и ответах
- Схемы блокировок в Базах Данных


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |
[0.001]