Lab9-Web-01-2010

-1Веб- технологии
Лабораторная работа 9-01
Лабораторная работа 9-01
Использование табличной верстки для создания
Web-страниц
1. ЦЕЛЬ РАБОТЫ
Целью работы является овладение навыками использования табличной верстки при
создании Web-страниц.
2. СОСТАВ РАБОЧЕГО МЕСТА
2.1. Оборудование: IBM-совместимый персональный компьютер (ПК).
2.2. Программное обеспечение: операционная система Windows, Web-браузер
Internet Explorer версии 4.0 и выше, редактор FrontPage.
3. КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
3.1. Технология проектирования Web-страниц
Язык HTML, с помощью которого формируются Web-страницы, является не
языком программирования, а языком разметки документов. Поэтому процесс создания
Web-страниц часто называют проектированием (или дизайном) Web-страниц.
Проектирование Web-страниц можно производить как в текстовом, так и в
графическом режиме. В первом случае операции по редактированию производятся над
документом HTML, во втором случае – непосредственно над Web-страницей, т.е. образом
документа HTML, выводимым в окне Web-браузера. Второй режим называют также
графическим режимом или режимом WYSIWIG (What You See Is What You Get – что вы
видите, то и получите). В режиме WYSIWIG (используемом обычно в текстовых
процессорах) документ выводится на экран дисплея в том виде, в котором он будет
напечатан на принтере.
Документ HTML сохраняется как файл с расширением .htm или .html (в Windows и
Unix).
Вставляемые в документ HTML объекты: изображения, звуковые файлы, листы
стилей, апплеты обычно располагаются в том же каталоге, что и сами документы или в
подкаталогах этих каталогов.
Тестирование и просмотр созданного документа выполняется с помощью любого
Web-браузера.
3.2. Редакторы HTML
При проектировании Web-страниц можно использовать как обычные текстовые
редакторы, так и специализированные редакторы Web-страниц.
Поскольку документ HTML представляет собой обычный текстовый файл, его
можно создавать и редактировать с помощью обычного текстового редактора,
например, редактора Блокнот (Notepad) в Windows. Создание документа с помощью
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
-2Веб- технологии
Лабораторная работа 9-01
обычных текстовых редакторов требует хорошего знания языка HTML, его версий и
расширений.
Специализированные текстовые редакторы HTML, наряду с функциями
обычных текстовых редакторов, предоставляют следующие возможности:
 автоматическая вставка и выделение дескрипторов в тексте документа HTML
(обычно другим цветом);
 синтаксический контроль дескрипторов HTML и других компонент Webстраниц (языков сценариев, дескрипторов динамического HTML и др.);
 импорт документов из других текстовых редакторов;
 встроенные справочные средства и средства обучения.
Тестирование и просмотр созданных или отредактированных Web-страниц
выполняется с помощью встроенных в программу или внешних Web-браузеров.
Примером специализированного текстового редактора является редактор
CuteHTML для Windows. Для проектирования Web-страниц в этом редакторе
используются раскрывающиеся меню и панели инструментов, обеспечивающие
поддержку всех общепринятых дескрипторов HTML, включая формы и таблицы. В
составе этого редактора имеются довольно подробные справочные системы с элементами
обучения.
Наряду с несомненными преимуществами специализированных текстовых
редакторов по сравнению с текстовыми редакторами общего назначения, данный тип
редакторов имеет один существенный недостаток (присущий также графическим
редакторам HTML) – отсутствие поддержки новых элементов языка HTML, в частности,
некоторых дескрипторов версии HTML 4.0, расширений HTML, элементов XML и
интерактивных средств технологии WWW.
Разработка больших и сложных Web-страниц с помощью текстовых редакторов
(как обычных, так и специализированных) является очень трудоемким. Поэтому при
проектировании Web-страниц графические редакторы практически вытеснили
текстовые редакторы, в том числе и в среде профессиональных дизайнеров Web-страниц.
Работать с графическими редакторами значительно удобнее, чем с текстовыми
редакторами, поскольку содержимое страницы выглядит так же или практически так же,
как оно выглядело бы при просмотре Web-браузером, а операции над Web-страницей
выполняются с использованием графического интерфейса. В настоящее время существует
множество графических редакторов Web-страниц, но, как правило, Web-дизайнер
выбирает себе один из них, в соответствии со своими потребностями и вкусами.
Основными рекомендуемыми критериями при выборе графического редактора
являются:
 способ реализации;
 поддержка версий и расширений HTML, доступные средства HTML;
 режимы работы;
 работа с объектами и ссылками;
 работа с интерактивными средствами;
 импорт данных;
 средства автоматизации проектирования;
 требования к операционной среде и аппаратным средствам;
 цена.
Графические редакторы Web-страниц могут быть реализованы либо как отдельные
программные продукты (например, Microsoft FrontPage), либо как составные компоненты
других программных продуктов. Так, редактор Microsoft Script editor является составной
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
-3Веб- технологии
Лабораторная работа 9-01
частью пакета Microsoft Office, а редактор Netscape Composer, наряду с Web-браузером
Netscape Navigator, является одной из компонент пакета Netscape Communicator.
Каждый из этих способов реализации имеет свои преимущества и недостатки. Так,
использование редактора Web-страниц в составе Microsoft Office позволяет с помощью
единого инструмента работать с документами самых разнообразных форматов. Кроме
того, в этом случае становятся доступными мощные средства редактирования Microsoft
Office, в частности, проверка орфографии и синтаксиса, автоматическое исправление
грамматических ошибок и сложное форматирование. В то же время реализуемые отдельно
редакторы Web-страниц являются, как правило, более мощными по своим возможностям
инструментами, чем встроенные редакторы. Кроме того, для программ редакторов Webстраниц, встроенных в системы обработки документов, все элементы документа должны
подвергаться процедуре преобразования (поскольку HTML – не "родной" язык текстовых
процессоров), и при этом такие детали как рамки таблиц и некоторые текстовые
расширения, не удается преобразовать должным образом.
Поскольку графические редакторы Web-страниц, как и Web-браузеры, должны
анализировать и интерпретировать дескрипторы HTML, для
них так же имеет
существенное значение поддержка тех или иных версий и расширений языка HTML, а
также доступные средства HTML, например, таблицы и фреймы.
Помимо графического режима, многие редакторы обеспечивают также режим
редактирования исходного документа HTML, т.е. текстовый режим. Эта возможность
используется, в основном, для внесения в документ HTML таких элементов, которые
данный редактор не поддерживает (например, сценариев или дескрипторов
динамического HTML). Кроме того, часть редакторов реализует (с помощью встроенных
или внешних Web-браузеров) режим тестирования созданной или модифицированной с
помощью данного редактора Web-страницы.
В большинстве графических редакторов, при включении в Web-страницу какоголибо объекта или ссылки, как правило, имеется возможность сразу же увидеть результат
вставки объекта (например, рисунка) на экране. Средства для организации ссылок на
текущую страницу или другие Web-страницы имеются во всех редакторах, однако лишь в
немногих редакторах предусмотрена проверка того, действительно ли существует
страница, на которую направлена связь, а также возможность ссылки на документы
других форматов (например, Microsoft Word) и ее проверки. Некоторые редакторы Webстраниц позволяют при вставке рисунка изменить его формат или размеры с помощью
специальных модулей-конверторов. Существенно облегчает создание Web-страниц также
наличие в редакторе библиотеки стандартных графических элементов (кнопок, стрелок,
различных пиктограмм и др.).
Многие графические редакторы позволяют работать не только с дескрипторами
HTML, но и с одними или несколькими языками сценариев, средствами объектной
модели документа и даже программами на Java или Visual Basic. При этом некоторые из
этих редакторов не только обеспечивают синтаксический контроль вставляемых в
документ HTML фрагментов программного кода, но также отладку и тестирование
документа HTML непосредственно в окне редактора.
Существенной характеристикой редактора Web-страниц является возможность
импорта данных из других документов, причем не только фрагментов других документов
HTML и текстовых документов, но и документов в других форматах. Для этого
графический редактор должен содержать программные модули - конверторы для
преобразования форматов данных (например, таблиц в формате Microsoft Excel или
Microsoft Word в таблицы HTML).
Некоторые графические редакторы Web-страниц, помимо функций редактирования
Web-страниц включают в себя дополнительные компоненты, позволяющие
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
-4Веб- технологии
Лабораторная работа 9-01
автоматизировать
весь
процесс
проектирования
Web-страниц.
Наиболее
распространенными компонентами автоматизации являются:
 средства работы с шаблонами Web-страниц;
 средства публикации Web-страниц;
 «мастера» (wizards).
Средства работы с шаблонами предполагает наличие библиотеки образцов
(шаблонов) Web-страниц по разной тематике, а также средств создания и редактирования
собственных шаблонов
(например, шаблонов документов по дистанционному
обучению). В этом случае формирование новой Web-страницы сводится к заполнению тех
полей шаблона, значения которых являются уникальными для создаваемой Webстраницы.
Под публикацией в технологии WWW понимается процесс организации установки
всех компонентов Web-документа: документов HTML, рисунков и других объектов, а
также связанных с этим документом приложений, на свой компьютер или Web-сервер.
При переносе документа на Web-сервер часто возникает проблема сохранения
корректности перекрестных ссылок в Web-документе, особенно в случае использования
относительных ссылок. Для решения этой проблемы в редакторы включаются средства
сборки Web-документов, а также автоматической или ручной корректировки
перекрестных ссылок.
Встроенные в графический редактор «мастера» разбивают весь процесс
проектирования Web-документа на этапы, начиная с выбора структуры и стиля каждой
Web-страницы и кончая загрузкой созданного или отредактированного Web-документа по
сети на удаленные Web-серверы. Количество, последовательность и содержание этапов
могут динамически меняться пользователем в интерактивном режиме, в зависимости от
решаемой задачи, а также структуры и содержания Web-документа. Программы«мастера» являются самым мощным средством проектирования Web-страниц.
Требования к аппаратным средствам графических редакторов Web-страниц,
реализованных в виде отдельных программ или пакетов программ, а также их стоимость,
как правило, существенно зависят от предоставляемых ими возможностей. В отличие от
Web-браузеров, подавляющее большинство редакторов является коммерческими
продуктами, стоимость которых лежит в диапазоне от нескольких десятков до нескольких
сотен долларов США. Стоимость встроенных редакторов (если они не поставляются
отдельно в виде расширений) включена в стоимость того программного продукта, в
который они входят. Следует отметить, что разработчики обычно выпускают несколько
версий графических Web-браузеров для разных операционных систем.
По проводимым рейтингам самыми мощными, удобными и обладающими
наибольшими возможностями редакторами Web-страниц являются:
 FrontPage фирмы Microsoft (последняя версия FrontPage EXP включена в
состав пакета Microsoft Office EXP);
 DreamWeaver фирмы Macromedia (последняя версия 4.0);
 PageMill фирмы Adobe (последняя версия 4).
В настоящей дисциплине в качестве графического редактора будет использоваться
FrontPage 2000 или FrontPage EXP (в дальнейшем называемый просто FrontPage).
3.3. Работа в среде FrontPage
Как и другие приложения, использующие графический интерфейс Windows, окно
FrontPage содержит сроку заголовка, строку меню, панели инструментов, рабочее окно и
строку состояния. Панели инструментов (по умолчанию в окне выводятся панели Standard
– стандартная и Formatting – форматирование) можно добавить или убрать, используя
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
-5Веб- технологии
Лабораторная работа 9-01
пункт Toolbars (Панели инструментов) меню View (Вид), либо щелкнув правой кнопкой
мыши на свободном участке панелей инструментов, т.е. вызвав контекстное меню. Состав
кнопок, областей ввода и списков на панелях инструментов можно изменить в пункте
Customize (Настройка) меню Tools (Сервис).
Рабочее окно может выводить редактируемую Web-страницу в одном из трех
режимов, выбор которых производится с помощью вкладок
в левом нижнем углу рабочего окна. Вкладка Normal (Нормальный) и HTML позволяют
выбрать режим графического или текстового редактирования, а вкладка Preview
(Предварительный просмотр) просмотреть Web-страницу в том виде, в котором она будет
представлена в Web-браузере. На самом деле, вид Web-странице в этом режиме не всегда
соответствует ее представлению в конкретном Web-браузере. Поэтому рекомендуется
тестирование Web-странице производить в непосредственно в Web-браузере (или
нескольких Web-браузерах), например, в Internet Explorer и/или Netscape Navigator.
В режиме Normal при включении опции Reveal Tags (Показывать дескрипторы)
можно просматривать вид текста с дескрипторами HTML и в графическом режиме.
Справка по FrontPage, как и в других программах Windows, вызывается либо в
пункте Microsoft FrontPage Help меню Help (Справка), либо при нажатии клавиши F1.
Необходимую справочную информацию можно получить тремя способами:
 с помощью оглавления – вкладка Contents (Содержание);
 с использованием «мастера» ответов – вкладка Answer Wizard;
 при помощи поиска нужного термина – вкладка Index (Предметный указатель).
3.4. Форматирование страниц в FrontPage
Форматирование Web-страниц в FrontPage выполняется практически так же, как и
в Word, с использованием меню Insert, Format и Table. Часть операций форматирования
можно выполнить используя кнопки и списки панелей инструментов Standard, Formatting,
Pictures, Tables и Style.
Форматирование на уровне отдельных символов и слов выполняется с помощью
пункта Font (Шрифт) меню Format (Формат).
В диалоговом окне этого пункта меню на вкладке Font можно задать вид шрифта,
размер шрифта, цвет шрифта, а также физические и логические стили шрифта. На вкладке
Character Spacing (Интервал) задаются интервал между символами и величина позиции
смещения вверх или вниз относительно базовой линии.
Форматирование абзаца выполняется с помощью пункта Paragraph (Абзац) меню
Format. В диалоговом окне этого пункта меню задаются следующие параметры:
 выравнивание текста (Alignment);
 отступ абзаца (в пикселях) от правой и/или левой границы текста Webстраницы (Indentation);
 отступ (в пикселях) для первой строки абзаца (Indent first line);
 промежуток перед абзацем, после абзаца и между словами (в пикселях)
(Spacing);
 промежуток между строками в абзаце (Line spacing).
При вызове контекстного меню для Web-страницы можно задать цвет или рисунок
фона (на вкладке Background – Фон), а также верхнюю и левую границы страницы (на
вкладке Margins – Границы) диалогового окна пункта Page Properties.
Разделение абзаца на два абзаца, а также очистка значений заданных в поле
Indentation выполняется в пункте Break (Разрыв) меню Insert.
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
-6Веб- технологии
Лабораторная работа 9-01
Вставка в Web-страницу горизонтальной линии выполняется в этом же меню в
пункте Horizontal Line (Горизонтальная линия). Параметры горизонтальной линии можно
изменить, в пункте Horizontal Line Properties вызванного для нее контекстного меню.
Вставить один символ из таблицы символов можно с помощью пункта Symbol
меню Insert.
Форматирование выделенных фрагментов текста как заголовков или списков
производится выбором соответствующего стиля в раскрывающемся списке Style (Стиль)
меню Formatting.
Дополнительные возможности по оформлению списков (в частности выбор
рисунка в качестве маркера и способа нумерации списков) обеспечиваются в пункте
Bullets and Numbering (Список) меню Format.
Заключить выделенный абзац в прямоугольную рамку с установкой стиля, цвета,
ширины рамки и отступа рамки от текста можно, используя пункт Borders and Shading
(Обрамление и заливка) меню Format. Во вкладке Shading (Заливка) диалогового окна
этого пункта можно указать цвета фона и переднего плана для выделенный области, либо
задать узор или рисунок для фона.
Создание и редактирование таблице в FrontPage производится либо с помощью
меню Table (Таблица), либо с помощью панели инструментов Tables (Таблицы).
Создать таблицу можно, нарисовав ее карандашом (кнопка
), либо задав
параметры таблицы в диалоговом окне подпункта Table пункта Insert (Вставить). В других
подпунктах этого пункта можно вставить в созданную таблицу новые строки, колонки или
ячейки, а также заголовок (подпункт Caption). С помощью ластика (кнопка
на панели
инструментов Tables) или пунктов Delete Cells (Удалить ячейки), Merge Cells (Объединить
ячейки) и Split Cells (Разбить ячейки) можно модифицировать таблицу. Выделенные
ячейки можно залить заданным цветом, используя кнопку
на панели инструментов
Tables.
Форматирование таблицы, ее отдельных ячеек и заголовка выполняется при
выборе соответственно подпункта Table, Cell или Caption в пункте Properties (Свойства),
либо с помощью кнопок
на панели инструментов Tables.
Вставить изображение на страницу можно с помощью пункта Picture (Рисунок)
меню Insert, либо с помощью кнопки
. Можно вставить изображение из локальной
файловой системы, из Web-сайта или из WWW в одном из следующих графических
форматов: GIF, JPEG, BMP, TIFF, TGA, RAS, EPS, PCX, PNG, PCD и WMF. При
сохранении страницы FrontPage выводит подсказку о сохранении изображения на Webсайте. Если изображение не в формате GIF или JPEG, то изображения, использующие до
256 различных цветов, автоматически преобразуются в формат GIF, а остальные рисунки
– в формат JPEG.
Некоторые характеристики изображения: масштабирование, горизонтальное и
вертикальное выравнивание, определение альтернативного текста и/или альтернативного
изображения с низким разрешением, преобразование изображения в формат GIF, JPEG
или PNG, а также установка параметров для изображения в форматах GIF и JPEG
выполняется при вызове пункта Picture Properties контекстного меню для изображения.
Помимо этого, в FrontPage встроены средства редактирования вставленного в Webстраницу изображения. Это редактирование выполняется после щелчка мышью по
рисунку с помощью панели инструментов Pictures (Рисунки). Кнопки этой панели
позволяют выполнить следующие операции над изображением:

увеличение или уменьшение яркости (кнопки
и
);
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
-7Веб- технологии
Лабораторная работа 9-01

увеличение или уменьшение контрастности (кнопки
и
);
 преобразование цветного изображения в черно-белый (кнопка
);
 обрезка изображения (кнопка );
 поворот изображения на 90º против часовой стрелки или по часовой стрелки
(кнопки
и
);
 поворот вокруг горизонтальной или вертикальной оси (кнопки
и
);
 выделение на изображении одного цвета как прозрачного (в этом случае через
этот цвет в любом месте изображения будет просматриваться фон) (кнопка
);
 вставка текста в изображение (в этом случае, если рисунок представлен в
формате JPEG он будет преобразован в GIF, поскольку формат JPEG не поддерживает
текст) (кнопка
);
 изменение ширины и высоты изображения (в этом случае, в отличие от
изменения атрибутов WIDTH и HEIGHT дескриптора IMG, когда происходит только
масштабирование рисунка, происходит изменение размера файла с рисунком; перед
изменением размера рисунок должен быть предварительно масштабирован) (кнопка
);
 придание изображению трехмерности (кнопка
);
 удаление всех произведенных изменений изображения (до его последнего
сохранения на диске) (кнопка
);
 создание графической ссылки на изображение (в этом случае в качестве
графической ссылки выступает уменьшенная копия изображения – thumbnail) (кнопка
).
На панели инструментов Pictures (Рисунки) с помощью кнопок
можно
выбрать область для карты-изображения (прямоугольник, эллипс или многоугольник, а
также выполнить подсветку выбранной области.
Для создания метки, на которую будет происходить переход в Web-странице,
используется пункт Bookmark (Закладка) меню Insert.
Для создания ссылки необходимо выделить текст или изображение для ссылки и
нажать кнопку
на панели инструментов Standard, либо выбрать пункт Hyperlink
(Гиперссылка) меню Insert. В качестве ссылки можно задать метку, определенную в
пункте Bookmark меню Insert, URL или имя файла. С помощью кнопки
выполняется
также модификация существующей ссылки.
Гиперссылки для выделенной Web-страницы можно просмотреть в режиме
Hyperlinks панели инструментов Views или при выборе пункта Hyperlinks в меню View.
Каждый из трех типов ссылок: невыбранная ссылка – hyperlink, выбранная ссылка
– active hyperlink и уже посещенная ссылка – visited hyperlink, имеет свой цвет, обычно
задаваемый Web-браузером по умолчанию. Можно изменить цвета для каждого типа
ссылок, выбрав пункт Page Properties меню контекстного меню Web-страницы и задав в
поле Hyperlink вкладки Background (Фон) диалогового окна этого пункта меню свои
собственные цвета для непосещенных, посещенных и активных ссылок.
3.4 Табличная верстка
Табличная верстка нынче совсем не в почете. Буквально на каждом углу кричат,
что надо переходить к верстке с помощью слоев, потому что это соответствует
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
-8Веб- технологии
Лабораторная работа 9-01
стандартам, правильнее и вообще «прикольно». Почему слои лучше таблиц обычно не
сообщают, так что приходится либо верить на слово, либо решать дилемму
самостоятельно. Поэтому попытаемся объективно решить, что же представляют собой
таблицы, где их следует применять, а где не стоит.
Сразу следует оговорить, что спор вокруг таблиц происходит только в том случае, когда
они используются для верстки. Если дело касается хранения табличных данных, то не
возникает сомнений, что таблицы именно для этой цели и предназначены.
Применение таблиц для верстки
Разумеется, и плюсы и минусы таблиц не равнозначны между собой. То, что для
одного сайта может быть простительно, для другого является грубейшей ошибкой.
Поэтому опишем, в каком случае таблицы использовать для верстки логичнее, чем другие
средства, в частности, слои. Итак, таблицы хорошо подходят в некоторых
обстоятельствах, которые описаны далее.
Таблицы помогают установить колонки одинаковой высоты при разном объеме
содержимого колонок. Разумеется, подобный эффект можно наблюдать только в том
случае, если для колонок применяется фоновая заливка или добавляется рамка.
С помощью таблицы можно добиться эффекта, что нижняя часть страницы
(«подвал») выравнивается по нижнему краю окна браузера. Это имеет смысл в том случае,
если объема данных не хватает для увеличения высоты документа. В противном случае
часть страницы будет «висеть» в середине окна. Естественно, для документа достаточного
объема его отображение происходит как обычно.
Стоит признать, что табличная верстка если не легче, то гораздо привычнее, чем
верстка с помощью слоев. Таблицы используют уже несколько лет и естественно, что
приемы верстки с их помощью стали каноническими. Поэтому, в условиях лимита
времени на создание сайта применение таблиц более чем оправдано. Кстати, многие
дизайн-студии, занимающиеся разработкой сайтов, именно по этой причине отдают
предпочтение табличной верстке. Результат получается планируемым и ожидаемым, а
ошибок с отображением сайта в разных браузерах практически не возникает.
Если подходить критично к способам использования таблиц, то действительной
причиной их популярности является консерватизм разработчиков, привычность и
быстрота верстки сайтов с их помощью. Ясно одно — таблицы постепенно сдают свои
позиции в пользу верстки слоями. Но пройдет еще несколько лет, прежде чем
«табличные» сайты станут раритетом и исчезнут с простора Рунета.
Особенности таблиц
При верстке с помощью таблиц необходимо знать некоторые особенности, которые
присущи таблицам. Это нужно для того, чтобы понимать, как построить макет в том или
ином случае, создать эффективный код и не допустить откровенных ляпов в работе.
Считается, что табличная верстка проще, чем другими методами, например, с помощью
слоев. Однако таблицы тоже таят в себе множество хитростей, которые, так или иначе,
влияют на отображение страницы.
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
-9Веб- технологии
Лабораторная работа 9-01
Ширина таблицы
Ширина таблицы, если она явно не указана, устанавливается браузером автоматически
исходя из содержимого ячеек. Когда таблица применяется для создания опорной сетки на
странице, такой подход нежелателен, поскольку зависит от переменных данных. Поэтому
ширину таблицы указывают всегда — в процентах, если используется «резиновый» макет
или в пикселах для макета фиксированной ширины.
Ширина ячеек
Ширина ячеек определяется параметром width тега <TD>, причем устанавливать это
значение требуется в том случае, если ширина ячейки должна быть задана.
Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что
нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200
пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для
левой ячейки задаем параметр width="200" (пример 1). Единицы измерения ставить не
нужно, браузер сам понимает, что если задано число, значит, используются пикселы.
Пример 1. Ширина ячеек
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tr>
<td width="200">Левая колонка</td>
<td>Правая колонка</td>
</tr>
</table>
</body>
</html>
Поскольку в данном примере ширина таблицы указана как 100%, таблица будет занимать
всю свободную ширину окна браузера. При этом левая колонка берет под себя 200
пикселов, а правая — оставшееся свободное место.
Ширина ячейки иной раз может меняться, несмотря на то, что указана жестко. Это
происходит, например, в том случае, если в ячейку добавили рисунок, размер которого
превышает ширину ячейки. Чтобы вместить изображение, ячейка будет вынуждена
раздаться. Также может повлиять на размер ячейки ее текстовое содержимое, которое
содержит очень длинное слово.
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 10 Веб- технологии
Лабораторная работа 9-01
Чтобы избежать указанной ситуации применяют несколько средств.


Не добавляют в ячейку фиксированной ширины те изображения, размер которых
превышает ширину ячейки. Способ, конечно, звучит банально, тем не менее, зная
особенности ячеек, можно избежать неприятностей с их отображением.
Для тега <TABLE> используют стилевое свойство table-layout со значением fixed.
Применение этого параметра позволяет обрезать рисунок, если он не помещается
целиком в ячейку (пример 2).
Пример 2. Параметр table-layout
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
<style type="text/css">
TABLE {
table-layout: fixed; /* Ячейки фиксированной ширины */
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tr>
<td width="200"><img src="dino.gif" width="289" height="120" alt="Динозаврик"></td>
<td>...</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан на рис. 1.
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 11 Веб- технологии
Лабораторная работа 9-01
Рис. 1. Отображение рисунка при использовании параметра table-layout

Воспользоваться стилевым свойством overflow со значением scroll. Этот параметр
добавляет полосы прокрутки к содержимому, но из-за того, что он применяется к
блочным элементам им нельзя воспользоваться для тега <TD>. Поэтому
приходится вкладывать внутрь ячейки тег <DIV> и устанавливать стилевое
свойство для него (пример 3). Это конечно не совсем правильно и удобно, но зато
может дать требуемый результат.
Пример 3. Полосы прокрутки в ячейках
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
<style type="text/css">
TD DIV {
overflow: scroll; /* Добавляем полосы прокрутки */
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tr>
<td width="200"><div><img src="dino.gif" width="289" height="120"
alt="Динозаврик"></div></td>
<td>...</td>
</tr>
</table>
</body>
</html>
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 12 Веб- технологии
Лабораторная работа 9-01
Результат данного примера показан на рис. 1.
Рис. 2. Отображение рисунка при использовании параметра oveflow
Содержимое ячеек
Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в
данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причем
пробел в расчет не принимается. Естественно, вид ячеек различается только в том случае,
если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек,
независимо от того, есть в них что-нибудь или нет, совпадает.
Старые браузеры не отображали цвет фона пустых ячеек вида
<td bgcolor="#ffcc00"></td>, поэтому в том случае, когда требовалось оставить ячейку без
содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел
( ). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1-2
пиксела, из-за чего широкое распространение получил прозрачный рисунок размером в
один пиксел. Действительно, такой рисунок можно масштабировать на свое усмотрение,
но он на веб-странице никак не отображается.
К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла.
Браузеры достаточно корректно работают с таблицами и без присутствия содержимого
ячеек.
Объединение ячеек
Предположим, что нам потребовалось использовать объединение некоторых ячеек в
таблице, как, например, показано ниже. Причем высота оранжевой и серой ячейки жестко
задана и равна 30 пикселам.
Ячейк
Ячейка 2
а1
Ячейк
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 13 Веб- технологии
Лабораторная работа 9-01
а3
Ячейка 4
Для наглядности код этой таблицы приведен в примере 4.
Пример 4. Таблица с объединенными ячейками
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
</head>
<body>
<table width="300" border="1" align="center" cellpadding="4" cellspacing="0">
<tr>
<td width="94" height="30" bgcolor="#ffcc33">Ячейка 1</td>
<td width="184" rowspan="2" valign="top">Ячейка 2</td>
</tr>
<tr>
<td valign="top">Ячейка 3<br><br>
</td>
</tr>
<tr bgcolor="#cccccc">
<td colspan="2" height="30">Ячейка 4</td>
</tr>
</table>
</body>
</html>
Хотя высота оранжевой ячейки вроде как указана фиксированной, она может
произвольно меняться в зависимости от объема информации в других ячейках. Подобная
неприятность замечена в некоторых браузерах, например, Internet Explorer 6.
При повышении сложности таблицы за счет увеличения числа ячеек и их
объединений, растет вероятность и повышения ошибок при отображении документа. За
счет этого объединение ячеек по вертикали применяют достаточно редко и в том случае,
когда высота ячеек не оказывает существенного влияния на макет страницы.
Чтобы все-таки получить нужный результат, одну таблицу разбивают не несколько
мелких таблиц или вкладывают таблицу внутрь ячейки другой таблицы. Вложенные
таблицы получили свое распространение именно по той причине, что дают устойчивый и
однообразный результат.
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 14 Веб- технологии
Лабораторная работа 9-01
Скорость загрузки таблицы
Пока таблица не загрузится полностью, ее содержимое не начнет отображаться.
Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить
необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в
этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в
ячейках, и только потом отображает таблицу.
Исходя из этого факта, таблицы не используют для хранения большой информации
(от 100 кБ). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные
таблицы или используют свойство table-layout, применение которого позволяет несколько
повысить скорость отображения содержимого таблицы.
3.5 Макет из двух колонок
Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом,
как правило, в одной колонке располагается основной материал (текст статьи, например),
а во второй — ссылки на разделы сайта и другая информация. Для создания подобного
макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной
колонки, что позволяет легко регулировать различные параметры отображения документа.
Ширина колонок
Для начала рассмотрим самый простой вариант, когда ширина левой колонки
жестко задана в пикселах, а ширина правой колонки варьируется в зависимости от
размеров окна браузера. Для этого требуется задать общую ширину всей таблицы в
процентах через параметр width тега <TABLE> и для первой ячейки установить ее
ширину в пикселах или процентах также с помощью параметра width, но уже для тега
<TD> (пример 1).
Пример 1. Ширина колонки в пикселах
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="5">
<tr>
<td width="200" valign="top">Левая колонка</td>
<td valign="top">Правая колонка</td>
</tr>
</table>
</body>
</html>
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 15 Веб- технологии
Лабораторная работа 9-01
В данном примере граница у таблицы не отображается, а вертикальное выравнивание
содержимого ячеек по верхнему краю определяется параметром valign со значением top.
Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались
бы относительно друг друга, а начинались одинаково от верхнего края.
Поля внутри колонок
Расстояние между колонками регулируется параметром cellpadding тега <TABLE>.
Поскольку cellpadding определяет расстояние от границы ячейки до края ее содержимого,
то пространство между содержимым разных колонок будет равно удвоенному значению
этого параметра. Используя стили, в частности, атрибут padding, можно легко
регулировать значение отступа для каждой колонки (пример 3).
Пример 3. Использование полей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/css">
#leftcol {
padding-right: 10px; /* Поле справа от текста */
vertical-align: top; /* Выравнивание по верхнему краю ячеек */
width: 200px; /* Ширина колонки */
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td id="leftcol">Левая колонка</td>
<td>Правая колонка</td>
</tr>
</table>
</body>
</html>
В данном примере значения параметров cellspacing и cellpadding равны нулю, а расстояние
между содержимым колонок определяется аргументом padding-right, который добавляется
к левой ячейке через идентификатор с именем leftcol.
Цвет фона колонок
Чтобы визуально отделить одну колонку от другой используют разные приемы,
самым распространенным из них, пожалуй, является использование фонового цвета.
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 16 Веб- технологии
Лабораторная работа 9-01
Лучше указывать цвет через стили, это позволяет вынести оформление страницы в
отдельный файл. Для этого создаем новый стилевой класс, устанавливаем для него
параметр background и применяем его к требуемой ячейке (пример 5).
Пример 5. Цвет фона
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/css">
#maket {
width: 100%; /* Ширина всей таблицы */
}
TD {
vertical-align: top; /* Вертикальное выравнивание в ячейках */
padding: 5px; /* Поля вокруг ячеек */
}
TD#leftcol {
width: 200px; /* Ширина левой колонки */
background: #ccc; /* Цвет фона левой колонки */
}
TD#rightcol {
background: #fc3; /* Цвет фона правой колонки */
}
</style>
</head>
<body>
<table cellspacing="0" id="maket">
<tr>
<td id="leftcol">Левая колонка</td>
<td id="rightcol">Правая колонка</td>
</tr>
</table>
</body>
</html>
В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 1).
Рис. 1. Колонки разного цвета
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 17 Веб- технологии
Лабораторная работа 9-01
Разделитель колонок
Использование полей не всегда подходит для установки нужного расстояния между
колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных
соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве
разделителя между колонками (пример 6).
Пример 6. Использование трех ячеек
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/css">
#maket {
width: 100%; /* Ширина всей таблицы */
}
TD {
vertical-align: top; /* Вертикальное выравнивание в ячейках */
padding: 5px; /* Поля вокруг ячеек */
}
TD#leftcol {
width: 200px; /* Ширина левой колонки */
background: #ccc; /* Цвет фона левой колонки */
border: 1px solid #000; /* Параметры рамки */
}
TD#rightcol {
background: #fc3; /* Цвет фона правой колонки */
border: 1px solid #000; /* Параметры рамки */
}
#spacer {
width: 10px; /* Расстояние между колонками */
}
</style>
</head>
<body>
<table cellspacing="0" id="maket">
<tr>
<td id="leftcol">Левая колонка</td>
<td id="spacer"></td>
<td id="rightcol">Правая колонка</td>
</tr>
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 18 Веб- технологии
Лабораторная работа 9-01
</table>
</body>
</html>
В данном примере вводится еще одна колонка со стилевым идентификатором
spacer, это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно
ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками.
На рис. 2 показан результат примера. Для наглядности и «красоты» вокруг колонок
добавлена граница.
Рис. 2. Расстояние между колонками
Линия между колонками
Разделять колонки можно не только с помощью цвета фона и пустого
пространства, но и добавлением линии между колонок. Опять же, здесь пригодятся стили,
с помощью которых создание линий значительно упрощается. Следует только установить
атрибут border-left для правой колонки или border-right для левой (пример 7).
Пример 7. Добавление линии
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/css">
#maket {
width: 100%; /* Ширина всей таблицы */
}
TD {
vertical-align: top; /* Вертикальное выравнивание в ячейках */
padding: 5px; /* Поля вокруг ячеек */
}
TD#leftcol {
width: 100px; /* Ширина левой колонки */
background: #ccc; /* Цвет фона левой колонки */
border-right: 1px dashed #000; /* Параметры линии */
}
TD#rightcol {
background: #fc3; /* Цвет фона правой колонки */
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 19 Веб- технологии
Лабораторная работа 9-01
}
</style>
</head>
<body>
<table cellspacing="0" id="maket">
<tr>
<td id="leftcol">Левая колонка</td>
<td id="rightcol">Правая колонка</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан ниже.
Рис. 3. Линия между колонок
3.6 Макет из трех колонок
Использование трех колонок на страницах сайта обусловлено широтой
информации, которую требуется показать посетителю. Обычно одна колонка, самая
широкая, отдается под текст основного материала, статьи, например, а остальные колонки
применяются для ссылок, рекламы, анонсов и т.д.
Принцип создания трехколонной модульной сетки с помощью таблицы аналогичен
созданию двухколонной сетки, поэтому остановимся лишь на некоторых моментах.
Ширина колонок в пикселах
Ширина разных колонок зависит от используемого макета — фиксированного или
«резинового». При макете фиксированной ширины общая ширина таблицы задается в
пикселах и остается постоянной независимо от разрешения монитора и размера окна
браузера. При этом ширину отдельных колонок также имеет смысл установить в
пикселах. В примере 1 ширина макета задана как 750 пикселов, а колонки соответственно
150, 400 и 200 пикселов.
Пример 1. Фиксированная ширина колонок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Три колонки</title>
<style type="text/css">
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 20 Веб- технологии
Лабораторная работа 9-01
TD {
vertical-align: top; /* Выравнивание по верхнему краю ячейки */
}
</style>
</head>
<body>
<table width="750" cellpadding="5" cellspacing="0">
<tr>
<td width="150">Колонка 1</td>
<td width="400">Колонка 2</td>
<td width="200">Колонка 3</td>
</tr>
</table>
</body>
</html>
При определении ширины колонок следует принимать во внимание значение
параметра cellpadding. На ширину ячеек этот аргумент не влияет, но зато уменьшает
область, которая отводится под содержимое ячеек.
Ширину всех ячеек в подобном случае задавать не обязательно. Так, если не
указать ширину одной ячейки, то она будет вычислена автоматически исходя из общей
ширины таблицы и ширины остальных ячеек. В других случаях, например, когда не
установлена ширина двух ячеек, их размер определяется по содержимому. Поскольку
содержимое ячеек варьируется от страницы к странице, то ширина также будет «плавать».
Это, по-английски говоря, not good (для тех, кто не понял, нехорошо), поскольку вид
документов должен оставаться единым. Так что ширину колонок лучше все-таки задавать.
Ширина колонок в процентах
При «резиновом» макете ширина таблицы устанавливается в процентах от ширины окна
браузера и, таким образом, напрямую зависит от нее. Здесь возможны два варианта:
1. ширина всех ячеек задана в процентах;
2. сочетание процентов и пикселов, когда ширина одних ячеек устанавливается в
процентах, а других — в пикселах.
В первом случае вначале устанавливается ширина всей таблицы в процентах, а затем
ширина отдельных ячеек (пример 2). Причем в сумме ширина ячеек должна получиться
100%, несмотря на то, что размер таблицы может быть иным. Дело в том, что ширина
таблицы вычисляется относительно доступного пространства веб-страницы, а размер
ячеек устанавливается относительно всей таблицы в целом.
Пример 2. Ширина колонок в процентах
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 21 Веб- технологии
Лабораторная работа 9-01
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Три колонки</title>
<style type="text/css">
TD {
vertical-align: top; /* Выравнивание по верхнему краю ячейки */
}
#col1 {
width: 20%; /* Ширина первой колонки */
background: #fc0; /* Цвет фона первой колонки */
}
#col2 {
width: 40%; /* Ширина второй колонки */
background: #f0f0f0; /* Цвет фона второй колонки */
}
#col3 {
width: 40%; /* Ширина третьей колонки */
background: #fc0; /* Цвет фона третьей колонки */
}
</style>
</head>
<body>
<table width="90%" cellpadding="5" cellspacing="0">
<tr>
<td id="col1">Колонка 1</td>
<td id="col2">Колонка 2</td>
<td id="col3">Колонка 3</td>
</tr>
</table>
</body>
</html>
Для удобства изменения вида колонок параметры в данном примере перенесены в стили.
Процентная запись для таблиц имеет ряд преимуществ — используется все
свободное пространство веб-страницы, а сам макет подстраивается под ширину окна
браузера. Вместе с тем каждая таблица имеет некоторый минимальный размер, при
достижении которого таблица уже не уменьшается и начинает отображаться
горизонтальная полоса прокрутки. Такой минимальный размер зависит от содержимого
таблицы. Если, например, в каждую из трех ячеек поместить по рисунку шириной 200
пикселов, то общая ширина таблицы не может быть меньше 600 пикселов плюс значения
полей вокруг изображений.
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 22 Веб- технологии
Лабораторная работа 9-01
Сочетание процентов и пикселов
Рассмотрим два основных варианта, когда для задания ширины колонок
одновременно применяются проценты и пикселы. Первый вариант состоит в том, что
размер крайних колонок устанавливается в пикселах, а ширина средней колонки
вычисляется автоматически, исходя из заданной ширины таблицы (рис. 1).
Рис. 1. Ширина средней колонки определяется браузером
Для создания подобного макета понадобится таблица с тремя ячейками. Ширину первой и
третьей ячейки устанавливаем в пикселах, а ширину средней ячейки намеренно не задаем
(пример 3). При этом обязательно следует определить общую ширину всей таблицы.
Пример 3. Ширина колонок в процентах и пикселах
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Три колонки</title>
<style type="text/css">
TABLE {
width: 100%; /* Ширина таблицы */
}
TD {
vertical-align: top; /* Выравнивание по верхнему краю ячейки */
}
#col1 {
width: 150px; /* Ширина первой колонки */
background: #fc0; /* Цвет фона первой колонки */
}
#col2 {
background: #afccdb; /* Цвет фона второй колонки */
}
#col3 {
width: 200px; /* Ширина третьей колонки */
background: #fc0; /* Цвет фона третьей колонки */
}
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 23 Веб- технологии
Лабораторная работа 9-01
</style>
</head>
<body>
<table cellpadding="5" cellspacing="0">
<tr>
<td id="col1">Колонка 1</td>
<td id="col2">Колонка 2</td>
<td id="col3">Колонка 3</td>
</tr>
</table>
</body>
</html>
Во втором варианте ширина двух колонок устанавливается в процентах, а
третьей — в пикселах. В подобном случае обойтись одной таблицей не удастся. Сами
посудите, если ширина всей таблицы равна 100%, первой колонки — 200 пикселов, а
оставшихся колонок по 20%, то простое вычисление показывает, что размер первой
колонки получается равным 60%. Поэтому заданное значение в пикселах браузером будет
проигнорировано, а размер установлен в процентах.
На рис. 2 показана схема расположения вложенных таблиц относительно друг друга.
Рис. 2. Применение вложенных таблиц
Вначале создаем таблицу заданного размера и с двумя ячейками. Левая ячейка будет
выступать в роли первой колонки, и для нее устанавливаем требуемую ширину в
пикселах. Ширину для правой ячейки не определяем, поэтому она будет занимать
оставшееся пространство, а также служить каркасом для других колонок. Внутрь этой
ячейки добавляем вторую таблицу, тоже состоящую из двух ячеек. И уже для них
определяем ширину в процентах (пример 4).
Пример 4. Вложенные таблицы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Три колонки</title>
<style type="text/css">
TABLE {
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 24 Веб- технологии
Лабораторная работа 9-01
width: 100%; /* Ширина таблиц */
}
TD {
vertical-align: top; /* Выравнивание по верхнему краю ячейки */
}
#col1 {
width: 150px; /* Ширина первой колонки */
background: #fc0; /* Цвет фона первой колонки */
}
#col2 {
width: 60%;
background: #afccdb; /* Цвет фона второй колонки */
}
#col3 {
width: 40%; /* Ширина третьей колонки */
background: #fc0; /* Цвет фона третьей колонки */
}
#col1, #col2, #col3 {
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td id="col1">Колонка 1</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td id="col2">Колонка 2</td>
<td id="col3">Колонка 3</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
При создании подобного макета следует принимать во внимание следующие моменты.

Ширина внутренней таблицы должна быть задана как 100%, чтобы эта таблица
занимала все свободное пространство.
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 25 Веб- технологии
Лабораторная работа 9-01


Для того чтобы ячейки плотно прилегали друг к другу, для внешней таблицы
необходимо обнулить значение параметров cellpadding и cellspacing. Поля можно
устанавливать через атрибут padding, как показано в данном примере.
Ширина второй и третьей колонки вычисляется относительно ширины ячейки, а не
внешней таблицы в целом. Поэтому значение 60% в примере следует расценивать
не как ширину колонки относительно всего макета, а лишь как ширину
относительно внутренней таблицы.
Выравнивание элементов
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по
горизонтали и вертикали, расширяются возможности по управлению положением
элементов относительно друг друга. Таблицы позволяют задавать выравнивание
изображений, текста, полей формы и других элементов относительно друг друга и вебстраницы в целом. Вообще, выравнивание в основном необходимо для установки
зрительной связи между разными элементами, а также их группирования.
Центрирование по вертикали
Одним из способов показать посетителю направленность и название сайта является
использование сплэш-страницы. Это первая страница, на которой, как правило,
расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение
также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок
по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно
воспользоваться таблицей с шириной и высотой равной 100% (пример 1).
Пример 1. Центрирование рисунка
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание</title>
<style type="text/css">
TABLE {
width: 100%; /* Ширина таблицы */
height: 100%; /* Высота таблицы */
}
</style>
</head>
<body>
<table>
<tr>
<td align="center">
<img src="title.gif" width="414" height="100" alt="Рецепты HTML">
</td>
</tr>
</table>
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 26 Веб- технологии
Лабораторная работа 9-01
</html>
</body>
В данном примере выравнивание по горизонтали устанавливается с помощью параметра
align="center" тега <TD>, а по вертикали содержимое ячейки можно не центрировать,
поскольку это положение задано по умолчанию.
Замечание
Чтобы высота таблицы устанавливалась как 100%, необходимо убрать !DOCTYPE, код
при этом перестает быть валидным.
Использование ширины и высоты на всю доступную область веб-страницы
гарантирует, что содержимое таблицы будет выравниваться строго по центру окна
браузера, независимо от его размеров.
Выравнивание по горизонтали
За счет сочетания параметров align (горизонтальное выравнивание) и valign
(вертикальное выравнивание) тега <TD>, допустимо устанавливать несколько видов
положений элементов относительно друг друга. На рис. 1 показаны способы
выравнивания элементов по горизонтали.
Рис. 1. Выравнивание элементов по горизонтали
Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.
Выравнивание по верхнему краю
Для указания выравнивания содержимого ячеек по верхнему краю, для тега <TD>
требуется установить параметр valign со значением top (пример 2).
Пример 2. Использование параметра valign
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание</title>
</head>
<body>
<table width="100%" cellpadding="5">
<tr>
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 27 Веб- технологии
Лабораторная работа 9-01
<td valign="top" width="75%" bgcolor="#f0f0f0">Колонка 1</td>
<td valign="top" width="25%" bgcolor="#ffcc00">Колонка 2</td>
</tr>
</table>
</body>
</html>
В данном примере характеристики ячеек управляются с помощью параметров тега <TD>,
но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается
атрибутами vertical-align и text-align (пример 3).
Пример 3. Применение стилей для выравнивания
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание</title>
<style type="text/css">
TABLE {
width: 100%; /* Ширина таблицы */
}
#col1 {
width: 75%; /* Ширина первой колонки */
background: #f0f0f0; /* Цвет фона первой колонки */
}
#col2 {
width: 25%; /* Ширина второй колонки */
background: #fc5; /* Цвет фона второй колонки */
text-align: right; /* Выравнивание по правому краю */
}
#col1, #col2 {
vertical-align: top; /* Выравнивание по верхнему краю */
padding: 5px; /* Поля вокруг содержимого ячеек */
}
</style>
</head>
<body>
<table>
<tr>
<td id="col1">Колонка 1</td>
<td id="col2">Колонка 2</td>
</tr>
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 28 Веб- технологии
Лабораторная работа 9-01
</table>
</body>
</html>
Для сокращения кода в данном примере используется группирование селекторов,
поскольку параметры vertical-align и padding применяются одновременно к двум ячейкам.
Выравнивание по нижнему краю делается аналогично, только вместо аргумента top
используется значение bottom.
3.7 Разрезание и склейка изображений
Разрезание изображения на фрагменты с последующим их объединением в одну
целую картинку — давний прием, вошедший в арсенал верстки веб-страниц.
Предварительно подготовленный рисунок разрезают на части в графическом редакторе,
сохраняют их как отдельные графические изображения, а затем соединяют их вместе с
помощью таблицы.
Рассмотрим вначале, зачем применяется разрезание изображений, и какие
преимущества это в итоге дает, а затем, как использовать таблицу на практике.
Особенности верстки
Изображения на веб-странице по своей природе прямоугольны, но, разрезав один
рисунок на составляющие элементы, получим конструктор, из которого можно сложить
другую фигуру. Это напоминает детские кубики, на одну из сторон которых наклеена
картинка. Складывать подобные фигуры на веб-странице требуется в силу разных причин,
например, вместо фрагмента изображения требуется добавить текст. Кроме того,
некоторые рисунки можно заменить их фоновым аналогом и тогда конечное изображения,
сохраняя свою целостность, будет занимать всю доступную область документа.
Подготовка изображения
В качестве примера изображения, где требуется разрезание, возьмем рис. 1. Каждая
из пяти иконок является ссылкой на соответствующий раздел, кроме того, ссылкой на
главную страницу служит рисунок с названием сайта.
Рис. 1. Исходное изображение
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 29 Веб- технологии
Лабораторная работа 9-01
Теоретически, в данном случае можно обойтись и без разрезания, если
использовать изображение-карту (теги <MAP> и <AREA>). Однако этот вариант
неприемлем в силу следующих соображений. По задумке разработчиков при открытии
любого раздела, иконка ему соответствующая, трансформируется, что в целом меняет
изображение целиком (рис. 2). Если применять изображение-карту, то придется
заготовить шесть различных изображений (одну для главной страницы и еще пять для
каждого раздела), а это скажется в итоге на объеме пересылаемых данных, скорости
отображения сайта и качестве рисунков. Следует еще учесть, что представленное на рис. 1
изображение дано в уменьшенном масштабе, чем оно используется в действительности,
поэтому объем одного файла получится достаточно большим.
Рис. 2. Вид изображения при открытии раздела «Байки»
Теперь требуется решить, как разрезать изображение. Вариантов здесь может быть
несколько — в конечном итоге это зависит от воли автора, предназначения рисунка и его
содержимого.
Разрезание изображения
Разрезание и «сборку» рисунка лучше доверить специализированной программе, в
частности, это умеет делать Adobe Photoshop, Adobe ImageReady, Macromedia FireWorks и
др. В дальнейшем для этой будем цели использовать Photoshop, так что все упоминания об
инструментах и меню относится именно к этой программе.
Для удобства разрезания изображения вначале следует добавить направляющие линии, по
которым затем и будет происходить разделение на фрагменты (рис. 3).
Рис. 3. Добавляем в изображение направляющие
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 30 Веб- технологии
Лабораторная работа 9-01
Теперь используем инструмент Slice ( , активация клавишей <K>) и по
направляющим обводим требуемую прямоугольную область. Обозначенная область
отмечается синей рамкой с номером фрагмента в левом верхнем углу. Размер областей
можно изменять через специальный инструмент Slice Select —
. Щелкаем мышью с
этим инструментом по желаемому фрагменту — цвет рамки вокруг области становится
желтым, а также изменяется тональность рисунка. После чего курсором мыши можно
перемещать границы фрагмента за специальные маркеры по бокам и в углах области
(рис. 4).
Рис. 4. Изменение области фрагмента
Во время изменения размеров фрагментов, следите за тем, чтобы области не
пересекались друг с другом, и между ними не возникало промежутков. Хотя Photoshop
сам отмечает подобные недочеты и принимает меры к их устранению, лучше держать все
под своим контролем.
После предварительного анализа и применения инструмента Slice, получим 18
фрагментов (рис. 5).
Рис. 5. Разрезанное на фрагменты изображение
Опасаться того, что получилось много рисунков, не стоит из-за того, что часть
фрагментов содержит пустое изображение (14, 16 и 15), а часть фрагментов, за
исключением ширины, идентичны (3, 5, 7 и 9). Таким образом, число картинок
сокращается, поскольку часть из них можно заменить одним прозрачным
однопиксельным рисунком, устанавливая у него такие же размеры, как у исходного
фрагмента.
Использование однопиксельного прозрачного рисунка в формате GIF достаточно
распространенный прием при верстке веб-страниц. Действительно, объем файла
минимален (всего 43 байта), картинку при этом можно масштабировать до любого
размера, и сквозь нее виден фон.
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 31 Веб- технологии
Лабораторная работа 9-01
Использование таблицы для склейки фрагментов
После того, как фрагменты обозначены, требуется сохранить все изображения на
диск. Для этого выбираем пункт меню File > Save for Web... (<Alt>+<Shift>+<Ctrl>+<S>)
чтобы открыть панель оптимизации графики (рис. 6).
Рис. 6. Панель оптимизации изображений
С помощью инструмента Slice Select можно выбирать требуемый фрагмент и
устанавливать для него персональные параметры вроде количества цветов, значение
потерь качества, прозрачность и т.д. Допускается выделять сразу несколько фрагментов,
удерживая клавишу <Shift>, что позволяет устанавливать для них одинаковые параметры.
По окончанию работы с фрагментами нажимаем кнопку Save и указываем место на
диске, куда будет сохранен HTML-документ. Рисунки сохраняются автоматически в папку
images, а их имя образуется от имени HTML-файла с добавлением номера фрагмента.
Например, сохраняемое имя будет splash.html, тогда первый фрагмент называется
splash_01.gif, а последний — splash_18.gif. Кроме того, создается файл spacer.gif, который
представляет собой уже упоминаемый прозрачный рисунок размером 1х1 пиксел. Он
используется для правильного формирования изображений в таблице.
Настройки, по которым строится HTML-код и формируются имена изображений
можно изменить, если при сохранении файла в разделе Settings выбрать пункт Other...
(рис. 7).
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 32 Веб- технологии
Лабораторная работа 9-01
Рис. 7. Выбор параметров для конечных файлов
В окне параметров можно выбирать папку, куда сохранять рисунки, способ формирования
имен файлов, а также HTML-кода (рис. 8).
Рис. 8. Панель для выбора выходных настроек
Полученный в результате сохранения файлов HTML-код, после небольшого
редактирования представлен в примере 1.
Пример 1. Таблица для склейки изображений
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Нортландские байки</title>
</head>
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 33 Веб- технологии
Лабораторная работа 9-01
<body>
<table width="670" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="9"><img src="images/splash_01.gif" width="670" height="85" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="85" alt=""></td>
</tr>
<tr>
<td rowspan="3"><img src="images/splash_02.gif" width="111" height="104" alt=""></td>
<td rowspan="5"><img src="images/splash_03.gif" width="45" height="150" alt=""></td>
<td><img src="images/splash_04.gif" width="84" height="28" alt=""></td>
<td rowspan="5"><img src="images/splash_05.gif" width="47" height="150" alt=""></td>
<td><img src="images/splash_06.gif" width="87" height="28" alt=""></td>
<td rowspan="5"><img src="images/splash_07.gif" width="45" height="150" alt=""></td>
<td rowspan="2"><img src="images/splash_08.gif" width="135" height="41" alt=""></td>
<td rowspan="5"><img src="images/splash_09.gif" width="25" height="150" alt=""></td>
<td rowspan="3"><img src="images/splash_10.gif" width="91" height="104" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="28" alt=""></td>
</tr>
<tr>
<td rowspan="4"><img src="images/splash_11.gif" width="84" height="122" alt=""></td>
<td rowspan="3"><img src="images/splash_12.gif" width="87" height="93" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td rowspan="3"><img src="images/splash_13.gif" width="135" height="109" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="63" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="images/splash_14.gif" width="111" height="46" alt=""></td>
<td rowspan="2"><img src="images/splash_15.gif" width="91" height="46" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td><img src="images/splash_16.gif" width="87" height="29" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="29" alt=""></td>
</tr>
<tr>
<td colspan="9"><img src="images/splash_17.gif" width="670" height="2" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="9"><img src="images/splash_18.gif" width="670" height="32" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="32" alt=""></td>
</tr>
</table>
</body>
</html>
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 34 Веб- технологии
Лабораторная работа 9-01
Данный код еще требует доработки, поскольку требуется, чтобы горизонтальная
серая и белая полоса занимали всю доступную ширину веб-страницы. Кроме того, часть
фрагментов повторяется и от них можно избавиться.
Чтобы получить требуемый результат, введем слой с фоновым рисунком и нашу таблицу
наложим поверх него. Такое изображение представлено на рис. 9.
Рис. 9. Фоновый рисунок, рамка вокруг приведена для наглядности
Теперь создаем нужный слой, назовем его toplayer, и в стилях указываем его параметры
(пример 2).
Пример 2. Слой для формирования полос
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Нортландские байки</title>
<style type="text/css">
#toplayer {
background:
#aeae9b /* Цвет фона */
url("images/bgtop.gif") /* Фоновый рисунок */
repeat-x; /* Повторять фон только по горизонтали */
height: 235px; /* Высота слоя */
border-bottom: 2px solid #8f8f8f; /* Линия внизу */
}
</style>
</head>
<body>
<div id="toplayer">
...
</div>
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 35 Веб- технологии
Лабораторная работа 9-01
</body>
</html>
В данном примере параметры фона устанавливаются через универсальное свойство
background, которое определяет путь к графическому файлу, цвет заливки и
повторяемость рисунка. Хотя цвет фона в таких случаях можно не указывать раз есть
фоновый рисунок, но на случай того, что пользователь отключил загрузку изображений,
лучше это сделать. Высота слоя также не является обязательным параметром из-за того,
что таблица внутри слоя имеет заданную высоту.
Остается заменить фрагменты с номерами 3, 4, 5, 6, 7, 8, 9 14, 15 и 16 на рисунок
spacer.gif, сохранив исходные размеры изображений и удалить нижнюю строку таблицы,
которая для главной страницы является лишней (пример 3). Использование файла
spacer.gif позволяет сократить конечный код и уменьшить требуемое число графических
файлов.
Пример 3. Окончательный код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Нортландские байки</title>
<style type="text/css">
#toplayer {
background: #aeae9b url("images/bgtop.gif") repeat-x;
height: 235px;
border-bottom: 2px solid #8f8f8f;
}
</style>
</head>
<body>
<div id="toplayer">
<table width="670" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="9"><img src="images/splash_01.gif" width="670" height="85" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="85" alt=""></td>
</tr>
<tr>
<td rowspan="3"><img src="images/splash_02.gif" width="111" height="104"
alt="Нортландия"></td>
<td rowspan="5"><img src="images/spacer.gif" width="45" height="150" alt=""></td>
<td><img src="images/spacer.gif" width="84" height="28" alt=""></td>
<td rowspan="5"><img src="images/spacer.gif" width="47" height="150" alt=""></td>
<td><img src="images/spacer.gif" width="87" height="28" alt=""></td>
<td rowspan="5"><img src="images/spacer.gif" width="45" height="150" alt=""></td>
<td rowspan="2"><img src="images/spacer.gif" width="135" height="41" alt=""></td>
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 36 Веб- технологии
Лабораторная работа 9-01
<td rowspan="5"><img src="images/spacer.gif" width="25" height="150" alt=""></td>
<td rowspan="3"><img src="images/splash_10.gif" width="91" height="104"
alt="Форум"></td>
<td><img src="images/spacer.gif" width="1" height="28" alt=""></td>
</tr>
<tr>
<td rowspan="4"><img src="images/splash_11.gif" width="84" height="122"
alt="Байки"></td>
<td rowspan="3"><img src="images/splash_12.gif" width="87" height="93"
alt="Люди"></td>
<td><img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td rowspan="3"><img src="images/splash_13.gif" width="135" height="109" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="63" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="images/spacer.gif" width="111" height="46" alt=""></td>
<td rowspan="2"><img src="images/spacer.gif" width="91" height="46" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="87" height="29" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="29" alt=""></td>
</tr>
</table>
</div>
</body>
</html>
3.8 Создание декоративной рамки
Для создания желаемой рамки ее вначале следует нарисовать в каком-нибудь
графическом редакторе. Хотя конечная ширина рамки на веб-странице может
варьироваться в больших пределах, например, в случае использования резинового макета,
размер уголков остается постоянным. Поэтому при создании изображения следует в
первую очередь ориентироваться именно на уголки. Так, на рис. 1 показана рамка со
скругленными углами.
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 37 Веб- технологии
Лабораторная работа 9-01
Рис. 1. Прямоугольная рамка с закругленными углами
Теперь изображение рамки разрезаем на девять фрагментов, которые помечены на
рис. 2 оранжевыми линиями и номерами. Для разрезания рисунка существуют
специализированные программы вроде Adobe ImageReady или Photoshop. Ширину и
высоту фрагментов надо брать с тем прицелом, чтобы учесть отступы от нарисованной
границы до содержимого рамки. Представьте на месте пятого фрагмента любой текст и
решите для себя, насколько близко располагается он к границе.
Рис. 2. Изображение, разрезанное на элементы
После разрезания рисунка на части получим девять фрагментов, но в итоге нам
понадобится из них только восемь из-за того, что средняя часть с номером 5 не нужна,
поскольку ее заменит содержимое рамки, текст, например.
Фрагменты 2 и 8 имеют слишком большую ширину, поэтому их можно несколько
обрезать. Аналогично дело обстоит и с фрагментами 4 и 6, только их сокращаем по
высоте. В результате получим восемь графических изображений представленных в
табл. 1.
Табл. 1. Рисунки, необходимые для создания рамки
Р
Имя
Положение
исунок
файла
Левый верний угол
01.gif
Верхняя горизонтальная
02.gif
линия
Правый верхний угол
03.gif
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 38 Веб- технологии
Лабораторная работа 9-01
Левая вертикальная линия
Правая
вертикальная
линия
04.gif
06.gif
Левый нижний угол
Нижняя горизонтальная
07.gif
Правый нижний угол
09.gif
линия
08.gif
После создания нужных фрагментов формируем таблицу размером 3х3 ячейки, как
показано на рис. 3.
Рис. 3. Таблица для создания рамки
Ширина самой таблицы может задаваться как в пикселах, так и процентах, от этого
в итоге зависит размер рамки. А вот ширина и высота крайних ячеек должна совпадать с
размерами соответствующих рисунков — уголков, вертикальных и горизонтальных линий
и устанавливаться в пикселах. Также в этой таблице параметры border, cellspacing и
cellpadding должны быть равны нулю, иначе линии не будут состыковываться между
собой (пример 1).
Пример 1. Создание декоративной рамки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Рамка</title>
<style type="text/css">
#content {
padding: 5px; /* Поля вокруг содержимого */
}
</style>
</head>
<body>
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="13" width="12"><img src="01.gif" width="12" height="13" alt=""></td>
<td style="background: url(02.gif)" height="13"></td>
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 39 Веб- технологии
Лабораторная работа 9-01
<td height="13" width="14"><img src="03.gif" width="14" height="13" alt=""></td>
</tr>
<tr>
<td style="background: url(04.gif)"></td>
<td id="content">Содержимое</td>
<td style="background: url(06.gif)"></td>
</tr>
<tr>
<td height="13"><img src="07.gif" height="13" alt=""></td>
<td style="background: url(08.gif)"></td>
<td height="13"><img src="09.gif" height="13" alt=""></td>
</tr>
</table>
</body>
</html>
В данном примере ширина всей таблицы составляет 400 пикселов, а ширина и
высота отдельных ячеек равна высоте расположенных в них рисунков. Уголки
вставляются как обычные рисунки с помощью тега <IMG>, а вот горизонтальные и
вертикальные линии задаются с помощью фона (стилевой параметр background). Это
позволяет делать нашу рамку масштабируемой, тогда ее размер будет меняться в
зависимости от содержимого. Иными словами, при замене width="400" на width="100%",
рамка будет отображаться по-прежнему корректно.
Добавление тени
Добавление тени к изображению или блоку текста происходит практически
аналогично созданию декоративной рамки. Вначале готовим исходную картинку с тенью
(рис. 4), а затем посредством разрезания превращаем ее в набор фрагментов, которые
необходимо распределить по ячейкам таблицы.
Рис. 4. Исходное изображение тени
В конечном итоге понадобится пять изображений, которые представлены в табл. 2.
Табл. 2. Рисунки, необходимые для создания тени
Ри
Имя
Положение
сунок
файла
Вертикальная тень
01.gif
Горизонтальная тень
02.gif
Правый нижний уголок
03.gif
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 40 Веб- технологии
Лабораторная работа 9-01
тени
Правая верхняя заглушка
Левая нижняя заглушка
04.gif
05.gif
Заглушки необходимы для того, чтобы тень имела сглаженные края и выглядела
законченной.
Теперь создаем таблицу размером 2х2 ячейки (рис. 5), общая ширина у нее
устанавливается по желанию, а ширина правой колонки должна равняться ширине
рисунка с тенью (01.gif). Высота нижних ячеек таблицы также должна совпадать с
высотой рисунка тени (02.gif).
Рис. 5. Таблица для создания тени
Чтобы легко масштабировать блок с тенью, рисунки устанавливаются в виде фона с
помощью параметра background тега <TD> (пример 2).
Пример 2. Создание тени
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тень</title>
<style type="text/css">
#content {
padding: 5px; /* Поля вокруг текста */
background: #dd9; /* Цвет фона */
}
</style>
</head>
<body>
<table width="200" cellspacing="0" cellpadding="0">
<tr>
<td id="content">Великаны должны быть или большие, или их должно быть много, если
они маленькие.</td>
<td width="9" valign="top" style="background: url(01.gif)"><img src="04.gif" width="9"
height="10" alt=""></td>
</tr>
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.
- 41 Веб- технологии
Лабораторная работа 9-01
<tr>
<td height="9" style="background: url(02.gif)"><img src="05.gif" width="10" height="9"
alt=""></td>
<td><img src="03.gif" width="9" height="9" alt=""></td>
</tr>
</table>
</body>
</html>
Обратите внимание, что в данном примере выравнивание в правой верхней ячейке
задается по верхнему краю через атрибут valign. Без этого действия соответствующая
заглушка для тени не будет располагаться в нужном месте.
Файл: 681455263 Создан: 15.08.2010 Модифицирован: 15.08.2010 Автор: Свистунов С.Я.