Таблицы
Если бы кто-нибудь из Web-дизайнеров перенесся на машине времени в начало 90-х годов прошлого века, он бы наверняка удивил создателей и первопроходцев Web тем, как сегодня используются HTML-таблицы. Напомню, что язык HTML задумывался как средство гибкой, логической разметки страниц. Таблицы предназначались для представления табличных данных, не более. Кто бы мог подумать, что в таблицы начнут упаковывать целые страницы. И более того, именно таблицы позволили использовать HTML как средство для жесткой, фиксированной разметки страниц.
В данной главе мы будем обсуждать различные аспекты применения таблиц. Сегодня HTML-таблицы используются в двух областях. Первая из них, как можно догадаться, это оформление табличных данных — классический способ для форматирования различных статистических выкладок, сравнений, обзоров и так далее.
Вторая и самая распространенная на данный момент сфера применения таблиц — это построение макета всей страницы. Таблица используется как каркас, как сетка из ячеек, которые заполняются отдельными элементами (рис. 12.1). При этом сохраняется взаимное расположение объектов, дизайн страницы не "плавает" в зависимости от размеров окна браузера посетителя. А Web-дизайнер может гарантировать заказчику, что его фирменная страница будет одинаково выглядеть на самых разных мониторах. Более того, благодаря жесткой сетке, дизайнер может фактически копировать уже сложившийся фирменный стиль дизайна, если таковой имеется, с бумажных изданий (брошюр, годовых отчетов) и других твердых копий.
В этой главе мы рассмотрим следующие вопросы:
□ построение таблиц классическим методом;
□ построение таблиц в режим макетирования, который доступен в Dreamweaver MX благодаря наличию специального режима Layout для работы с таблицами;
□ редактирование таблиц и их оформление;
□ наполнение таблиц содержанием и редактирование этого содержания.
|
Рис. 12.1. Дизайн этой страницы выполнен на основе нескольких таблиц (пунктирные линии — границы таблиц в Dreamweaver MX). Это позволило создать жесткую схему расположения всех элементов — текста и рисунков |
Для работы с таблицами в Dreamweaver нам понадобится, в основном, всего
несколько инструментов (рис. 12.2).
□ Панель Properties (Свойства) — пожалуй, это будет самый часто используемый инструмент в этой главе, как, впрочем, и вообще при работе в Dreamweaver.
□ Панель Insert (Вставка), вкладка Layout — для переключения между режимами работы с таблицами, а также для визуального проектирования таблицы в режиме макетирования.
□ Панель Insert, вкладка Table — для запуска диалогового окна создания таблицы, а также для добавления некоторых тегов при работе с исходным HTML-кодом.
□ Группы меню Insert (Вставка) и View (Вид) — для тех же задач, что и предыдущие два инструмента.
□ Панель Tag Inspector (Инспектор тегов) — весьма полезный инструмент для изучения структуры кода таблиц, который можно использовать, не выходя из визуального режима.
|
Рис. 12.2. Инструменты для работы с таблицами: 1 — панель Insert, вкладка Layout, 2 — панель Properties (при выделенной таблице), 3 — панель Tag Inspector |
