Табличная верстка

Основные виды верстки: табличная, фреймовая, свободно позиционируемые элементы

План

Тема: Верстка сайта

1. Понятия: верстка, модульная сетка

2. Основные виды верстки сайта

3. Табличный дизайн

Основная литература: [3, 4, 7, 18, 21, 29, 34, 41]

Дополнительная литература: [9, 10, 14, 15, 20, 27, 28, 31, 33, 37, 38, 40, 42]

Версткой веб-страниц будем называть создание такого HTML-кода, который позволяет размещать элементы веб-страницы (изображения, текст, линии и т.д.) в нужных местах документа и отображать их в окне браузера согласно разработанному макету. При этом следует принимать во внимание ограничения присущие HTML и CSS, учитывать особенности браузеров и знать приемы верстки, которые дают желаемый результат.

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

Вначале дизайнер готовит макеты веб-страниц в графическом редакторе (например, Adobe Illustrator, Adobe Photoshop), утверждает их у заказчика и передает верстальщику на формирование HTML-кода.

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

Веб-страница фактически рассматривается как набор прямоугольных блоков, которые выкладываются в определенном порядке. При этом, как правило, данные располагаются по колонкам, поэтому при верстке применяют термин одно-, двух-, трехколонный макет и т.д.

Мощнейшее средство HTML, а также простейший механизм размещения мате­риала, доступный в обоих визуальных браузерах (в Netscape начиная с версии 2 и в MSIE с версии 3), — это ис­пользование таблиц, чаще всего не имеющих разлиновки и фоновой заливки ячеек и потому невидимых (видимо только их содержание, единственно ради позиционирова­ния которого и вводится таблица). Прием этот позволяет регулировать расстояния между элементами с точностью до пикселя, что является важнейшим — хотя и практически единственным — достоинством этой технологии.

Таблицы позволяют создавать достаточно сложный дизайн web-страницы. Если абстрагироваться от семантики, таблица для дизай­нера — не более чем инструмент, позволяющий размерам одних элементов влиять на размеры и положение дру­гих.

Изменяя высоту или ширину некоей ячейки, мы тем самым меняем высоту соответствующей строки и шири­ну соответствующей колонки, влияя на размеры текстовых блоков и выравнивание изображений по всей таблице. Ины­ми словами, таблица служит своеобразной «средой передачи информации» о размерах и расположении элементов.

Для текстовой части документа таблицы — единственный (если не считать CSS) инструмент, позволяющий устана­вливать произвольную величину полей, ширину колонки текста, а также верстать текст в несколько колонок. С гра­фическими вставками таблицы используются чаще всего для составления сложных композиций из многих изображений, перемежаемых текстом и ссылками, с гарантированным взаимным расположением. Такой подход, в сравнении с «целиковой отливкой» больших графических блоков, вы­годен и с точки зрения доступности информации, и с точки зрения экономии объема файлов.

В некоторых случаях при размещении графики можно вообще обойтись без таблиц или, по крайней мере, упростить их, уменьшив в них количество ячеек. Горизонтальный ряд вплотную прилегающих друг к другу графи­ческих вставок, выровненных по нижнему краю, можно получить, просто поставив подряд соответствующие теги "IMG". Прервав этот ряд тегом "BR", начинаем следующую «строку», прилегающую верхним краем самой высокой из картинок к нижнему краю предыдущей «строки». Собственно говоря, поведение графических вставок при этом ничем не отличается от поведения букв в абзаце за тем исключением, что браузер может сам перенести такую «строку» после любой «буквы» (если она грозит вылезти по ширине за край окна или за границу отведенной для нее ячейки); предотвратить перенос можно, заключив строку картинок внутрь <NOBR>... </NOBR>.

Сейчас, однако, тег TABLE гораздо чаще используется для визуального форматирова­ния страницы, чем для представления табличного по своей природе материала. Алгоритм верстки таблиц, которому приходится учитывать множество подчас противоречащих друг другу сведений (например, натуральную ширину со­держимого ячейки и ту ширину, которая «рекомендована» атрибутом width соответствующего тега "TD"), достаточ­но сложен и, к сожалению, плохо задокументирован, а из-за этого в некоторых своих деталях несовместим у разных браузеров.

Лекция №6 (2 часа)

Дата добавления: 2013-12-12