Изучи свои таблицы! ...Или "Грамотное управление содержанием"

Недавно мы обсудили важность четкого изложения основной идеи сайта нашим посетителям на первых 180000 (600х300) пикселей их монитора.

Это легко сказать – но мы можем испытать значительные трудности в достижении столь аккуратного форматирования и компоновки на HTML (версии 3.2)

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

Если мы не осторожны, то текст и графика просто вливаются в браузеры наших посетителей как патока. Данные должны управляться, а не просто втекать – они просто распределяются заполняя пространство и форму, установленные в браузере.

Неприятный вид!

Мы также видели, что наши посетители могут иметь установленное разрешение монитора от 640х480 до 1280х960 или возможно даже выше. Мы не можем этим управлять – они устанавливают разрешение как больше подходит им.

Но в этом и проблема – между наименьшим и наибольшим разрешениями разница 400%. Будет ли ваш контент выглядеть также хорошо в виде вертикального шеста или длинной колбасы?

Увы! Здесь нам необходимо управление компоновкой.

Если бы мы использовали только простейший HTML, мы возможно могли бы прибегнуть к использованию тэга <pre> (preformatted text – преформатированный текст). Но это вызывает отображение текста моноширинным шрифтом таким как Courier – что может быть совсем не тем, чего мы хотим. Нет, должно быть более мощное средство выполнения наших задач форматирования и компоновки – и есть – обычные HTML таблицы.

… таблицы великолепны!

Таблицы состоят из трех основных компонентов:

- рядов (горизонтальная разбивка)

-колонок (вертикальная разбивка)

-ячеек (контейнер, образованный на пересечении ряда и колонки).

Эти простые компоненты это существенные строительные блоки и они чрезвычайно гибкие и мощные. Первоначально таблицы применялись просто для аккуратного размещения табличных данных. Они не показывали своей действительной полезности до тех пор пока они не стали использоваться для создания колонок на странице или для компоновки текста и графики.

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

… невидимый пиксел.

Если бы мы могли вместить все содержимое нашей страницы в одну таблицу – отдельными ячейками которой мы можем управлять как отдельными пикселами – тогда мы могли бы получить полный контроль над компоновкой страницы, помещая текст и графику в ячейки точно куда нам нужно. Более того, если бы мы использовали фиксированные размеры ячеек (в противоположность процентным) наши данные оставались бы точно в том же месте страницы, независимо от разрешения монитора.

Но у нас есть еще одна проблема – как насчет областей где нам не нужен ни текст ни графика – так называемых "белых" областей – как должны они быть заполнены для предотвращения сжатия ячеек таблицы?

Введем невидимого помощника – однопиксельный прозрачный GIF. Возможно создание GIF-изображения, которое прозрачно, имеет ширину и глубину в один пиксел.

Почему такой маленький? Этот крошечный размер делает загрузку настолько быстрой, что практически незначительной и он и не нужен больше. Используя тэги height и width применительно к графике, можно растянуть наш GIF до любого нужного нам размера.

… цветная демонстрация.

Принимая во внимание, что визуальная польза от того, что вам не видно может быть достаточно неочевидной, у нас есть цветной пример.

GC
		GoCritique.com

Все прямоугольники в примере собраны из яркого и темного одноточечных GIF-изображений.

Эта простая таблица не только демонстрирует свойсво “заполнения” одноточечного изображения, но также дает несколько идей использования их для горизонтальных или вертикальных полос.

Для получения полос очень просто создать таблицу из одной ячейки необходимого размера и формы и, затем, просто заполнить ее соответственно увеличенным GIF изображением.

Размер ярко синих ячеек в таблице может полностью регулироваться при помощи тэгов height и width одноточечного GIF изображения. То же самое верно для более тонких вертикальных и горизонтальных темно синих прямоугольников, которые выглядят как полосы.

Простым изменением тэга height светло синего одноточечного GIF изображения мы изменяем всю компоновку как показано во втором примере ниже.

GC
		GoCritique.com

Здесь используются цветные одноточечные GIF изображения, поэтому их можно увидеть, но более полезно использование прозрачных одноточечных GIF изображений как “заполнителей” в таблицах. Используя различные величины в тэгах height и width вы можете растягивать одно и то же изображение до размеров и формы необходимого прямоугольника.

Возможности компоновки с использованием GIF изображений как “заполнителей” в таблицах почти безграничны. Комбинация свойств таблицы и “растягиваемости” крошечного GIF изображения – вот что делает эту концепцию такой мощной и эффективной.

Без светлых цветных ячеек наш первый пример (простейший логотип?) выглядел бы на странице как показано ниже. Так как используемое GIF изображение было бы прозрачным, то любой фон был бы корректно показан сквозь “белое пространство”. Такое управление компоновкой без метода таблиц было бы невозможно и наша крошечная графика (здесь всего лишь несколько точек) будет выглядеть одинаково на том же самом месте при любом разрешении. Рай!

GC
		GoCritique.com

… умение + время или деньги?

Трюк с таблицами и прозрачными изображениями выражается во времени на манипулирование ими – для получения нужной вам компоновки. Это может потребовать значительной практики и времени. Есть простой ответ. К сожалению это потребует запустить руку в ваш карман или кошелек – конечно – не всегда.

Лучшие HTML редакторы используют новый тэг - 'layer'. В подготовку к новому стандарту HTML 4.0 (который еще не принят всеми браузерами), в котором мы увидим намного лучшие возможности форматирования и компоновки.

Возможно лучшим из таких редакторов является Dreamweaver, который дает возможность создавать и манипулировать слоями с восхитительной простотой. Слои могут содержать текст и/или графику как существующие независимые перемещаемые объекты на вашей странице – каждый на своем месте с точностью до точки.

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

Все страницы GoCritique были созданы с использованием Dreamweaver 3, и, если вы посмотрите на исходный код, вы увидите насколько сложны могут быть таблицы. С соответствующим программным обеспечением компоновка – просто щелчек, работа становиться намного проще.

Итак, если вы не хотите чтобы ваш HTML “разливался” по пространству, на которое сконфигурирован браузер посетителя вашего веб сайта (а поверьте мне, вы не хотите!), тогда привыкайте к использованию таблиц и невидимых помошников – крошечных прозрачных GIF изображений.

Если вы хотите завершить работу по компоновке за десять минут взамен десятка часов - приготовьте наличные и наслаждайтесь Dreamweaver. Как серьезный веб дизайнер вы не пожалеете об издержках. Он восхитителен для компоновки и еще по сотне других причин – без преувеличения!

Перевод выполнен на основе права эсклюзивного использования статьи Александром Климовым. Перепечатка в любой форме запрещена.

Peter de Pradines is owner and webmaster of the HiperNet Group. An honours degree graduate in Computer Science with 30 years hands-on experience, Peter lectures in Europe and holds winter workshops in the beautiful Mediterranean island of Mallorca. Specializing in web design and promotion he may be contacted at: mailto:hipernet@apdo.com or http://www.protiques.com

Peter de Pradines владелец и веб-мастер компании HiperNet Group. Peter обладая ученой степенью и имея за плечами 30-ти летний опыт, читает лекции в Европе и проводит зимние занятия на прекрасных островах Мальорки. По поводу вопросов веб-дизайна и раскрутки сайтов можно обращаться: mailto:hipernet@apdo.com или http://www.protiques.com