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

ГЛАВА 8
ГЛАВА 8. Табличный дизайн Сейчас мы будем изучать принципы табличного дизайна — одного из способов создания сложных Web-страниц с использованием таблиц HTML. И, естественно, рассмотрим все во...
Форматирование таблиц и ячеек разметки
Форматирование таблиц и ячеек разметки Dreamweaver позволяет задать довольно много параметров таблиц и ячеек разметки. Давайте выясним, какие именно....
Параметры ячеек разметки
Параметры ячеек разметки Сначала поговорим, какие параметры ячеек разметки позволяет нам изменить Dreamweaver. Вид редактора свойств при выделенной ячейке разметки показан на Рисунок 8.21....

Рисунок 8 21 Вид редактора свойств
Рисунок 8.21. Вид редактора свойств при выделенной ячейке разметки Группа переключателей Width позволяет вам установить ширину ячейки. Переключатель Fixed и расположенное справа от нее поле в...
Задание ширины ячеек
Задание ширины ячеек Интерактивная справка Dreamweaver рекомендует задавать ширину ячеек только после заполнения их содержимым. По крайней мере, выставлять окончательные значения ширины лучше...
Рисунок 8 22 Диалоговое окно Choose Spacer Image
Рисунок 8.22. Диалоговое окно Choose Spacer Image Вы можете выбрать один из трех переключателей: Create a spacer image file — создать файл изображения-"распорки". Этот переключа...
Рисунок 8 23 Обозначение ячейки
Рисунок 8.23. Обозначение ячейки с фиксированной шириной и помещенной в нее "распоркой" в строке ширин...
Рисунок 8 24 Обозначение "саморастягивающейся"
Рисунок 8.24. Обозначение "саморастягивающейся" ячейки в строке ширин Чтобы вернуть "саморастягивающейся" ячейке таблицы фиксированную ширину, включите переключатель Fixed...

Рисунок 8 25 Меню строки ширин
Рисунок 8.25. Меню строки ширин Меню строки ширин также содержит ряд пунктов, позволяющих вам произвести различные манипуляции с изображениями-"распорками". Это пункты: Add Spacer...
Параметры таблицы разметки
Параметры таблицы разметки Dreamweaver также позволяет нам настроить кое-какие параметры таблицы разметки. Выберите таблицу и обратите внимание на редактор свойств -см. Рисунок 8.26....
Рисунок 8 26 Вид редактора свойств
Рисунок 8.26. Вид редактора свойств при выделенной таблице разметки Здесь все вам уже знакомо. Группа переключателей Width, поля ввода Width и Height выполняют точно такие же функции, что их...
Заполнение начальной страницы
Заполнение начальной страницы Теперь давайте заполним нашу новую начальную страницу содержимым. Для этого нам понадобится старая начальная страница, файлу которой мы дали имя default_old.htm....
Рисунок 8 27 Новая начальная страница
Рисунок 8.27. Новая начальная страница сайта (колонка новостей пока не заполнена) Последнюю ячейку — ссылку на архив новостей — сделайте самой узкой, только-только чтобы поместилась надпись &...

Рисунок 8 28 Готовая колонка новостей
Рисунок 8.28. Готовая колонка новостей...
Рисунок 8 29 Вертикальный просвет
Рисунок 8.29. Вертикальный просвет Выберите ячейку основного содержания. "Ухватите" мышью за ее левый маркер размера и оттащите левую границу немного вправо. Таким образом, мы освоб...
Рисунок 8 30 Горизонтальный просвет
Рисунок 8.30. Горизонтальный просвет И напоследок удалите "распорку" из левой ячейки (полоса навигации), для чего выберите в меню строки ширин пункт Remove Spacer Image. Поскольку...
Тонкая настройка и оптимизация таблицы разметки
Тонкая настройка и оптимизация таблицы разметки Сколько уже раз мы повторяли, что за Dreamweaver, несмотря на его "интеллектуальность", нужен глаз да глаз! А если серьезно, то Dreamw...
Рисунок 8 31 Готовая главная страница
Рисунок 8.31. Готовая главная страница в обычном режиме отображения Ну и, наконец, вы можете выполнить точную подгонку самой таблицы. Например, ради компактности HTML-кода можно объединить не...

Рисунок 8 32 Готовая страница
Рисунок 8.32. Готовая страница после внесения всех исправлений...
Внимание
Внимание При правке таблиц разметки в обычном режиме специальные атрибуты, добавляемые к тегам <TABLE> Dreamweaver, могут потеряться. Это значит, что в дальнейшем с такими таблицами...
Недостатки табличного дизайна
Недостатки табличного дизайна Осталось разбавить дегтем оставшийся мед. Здесь мы поговорим о недостатках табличного дизайна. В основном, они происходят от недостатков самих таблиц; а недоста...
Недостатки таблиц
Недостатки таблиц Как уже говорилось, недостатки таблиц были описаны в главе 5. Если вы их забыли, давайте вспомним: очень медленная загрузка и отображение и громоздкий, запутанный HTML-код....
Таблица разметки должна быть как
Таблица разметки должна быть как можно более простой, по возможности не содержать ячеек и строк с относительными значениями ширины и высоты и минимальным количеством вложенных таблиц. Все эти ре...

Таблица в любом случае получится
Таблица в любом случае получится очень сложной. Слегка упростить вы ее сможете за счет тонкой оптимизации HTML-кода, но именно слегка. Это один из недостатков табличного дизайна, который нельзя...
Таблица разметки как правило занимает
Таблица разметки, как правило, занимает всю ширину Web-страницы, а значит, без относительного значения этой самой ширины не обойтись. Конечно, иногда таблицы разметки имеют фиксированную ширину,...
Таблица 1 заголовок сайта
Таблица 1 : заголовок сайта...
Таблица 2 набор гиперссылок (полоса навигации)
Таблица 2: набор гиперссылок (полоса навигации)  ...
Таблица 2 основное содержание сайта

Таблица 2: основное содержание сайта...
Таблица 3 сведения об авторских правах
Таблица 3: сведения об авторских правах...
Рисунок 8 33 Многотабличный дизайн начальной страницы
Рисунок 8.33. Многотабличный дизайн начальной страницы И так часто делают! Берите пример! Во-вторых, некоторые части страницы вы можете вынести вообще за пределы таблицы разметки. Чаще всег...
Рисунок 8 34 Дизайн главной страницы
Рисунок 8.34. Дизайн главной страницы с заголовком и сведениями об авторских правах, вынесенными за пределы таблицы разметки Давайте поступим так с нашим сайтом: вынесем за пределы таблицы за...
Рисунок 8 35 Главная страница
Рисунок 8.35. Главная страница с заголовком и сведениями об авторских правах, вынесенными за пределы таблицы разметки...
Недостатки табличного дизайна

Недостатки табличного дизайна Всем хорош табличный дизайн. Мы можем точно контролировать, как один фрагмент содержимого страницы расположен относительно другого, а Dreamweaver максимально обле...
Что дальше?
Что дальше? Вот мы и познакомились с таблицами разметки и табличным дизайном. Мы создали третий по счету сайт, основанный на таблицах. Наконец, мы научились работать в режиме разметки страниц...
Основы табличного дизайна
Основы табличного дизайна Прежде чем приступать к практической работе, изучим теорию. Вспомним, зачем нужны таблицы и как их можно использовать. После этого перейдем непосредственно к таблично...
Зачем нужны таблицы
Зачем нужны таблицы В самом деле, зачем нужны таблицы? Казалось бы, у них достаточно узкое назначение: представлять большие объемы числовой и текстовой информации на ограниченном пространстве...
Рисунок 8 1 Создание примечаний к тексту с помощью таблиц
Рисунок 8.1. Создание примечаний к тексту с помощью таблиц Как видите, используя таблицу, мы можем разделить текст на несколько фрагментов и поместить рядом соответствующие примечания. Мы мож...
Рисунок 8 2 Описание товара в

Рисунок 8.2. Описание товара в интернет-магазине, сделанное с помощью таблицы Видите, как компактно и изящно у нас получилось! С помощью специально отформатированной таблицы мы разместили нес...
Рисунок 8 3 Классический табличный дизайн
Рисунок 8.3. Классический табличный дизайн Как видите, это совсем простая таблица с двумя объединенными ячейками. Dreamweaver создаст ее для вас в два счета. А каков результат! А ведь Dream...
Схемы табличного дизайна
Схемы табличного дизайна Классическая схема табличного дизайна, выдержавшая проверку временем, показана на Рисунок 8.3. Ничего лишнего — только то, что действительно нужно. Иногда, правда, пол...
Рисунок 8 4
Рисунок 8.4. Классический дизайн с полосой навигации, расположенной справа Часто на первую страницу в отдельной колонке помещают еще и новости сайта (Рисунок 8.5). Но это стоит делать только...
Рисунок 8 5
Рисунок 8.5. Классический табличный дизайн с колонкой новостей сайта Как правило, на главной странице помещаются только "свежие" новости (за определенный период), а "старости&...
Рисунок 8 6 Дизайн сайтакаталога программ

Рисунок 8.6. Дизайн сайта-каталога программ Новостные сайты имеют самый сложный дизайн (Рисунок 8.7). Состоящие из множества пестрых колонок Web-страницы сразу привлекают внимание посетителей...
Рисунок 8 7 Один из вариантов дизайна новостного сайта
Рисунок 8.7. Один из вариантов дизайна новостного сайта Не менее, а иной раз и более пестрый дизайн имеют музыкальные сайты (Рисунок 8.8). Порядок следования колонок может меняться, но, в цел...
Рисунок 8 8 Один из вариантов дизайна музыкального сайта
Рисунок 8.8. Один из вариантов дизайна музыкального сайта На многих главных страницах, построенных с применением табличного дизайна, помещаются составные изображения. Они играют роль либо кра...
Построение таблиц разметки вручную
Построение таблиц разметки вручную Сейчас мы рассмотрим самый очевидный способ построения таблиц разметки. (Самый очевидный, но не самый простой.) Это создание "скелета" нашей страни...
Таблица эта должна содержать три
Таблица эта должна содержать три строки и два столбца (см. Рисунок 8.3) и не должна иметь границы. Ширина этой таблицы должна быть равна 100%, т. е. таблица должна занимать все окно Web-обозрева...
Рисунок 8 9 Начальная страница

Рисунок 8.9. Начальная страница нового сайта, созданная вручную с использованием таблицы разметки...
Построение таблиц разметки автоматически
Построение таблиц разметки автоматически Мы только что создали новую Web-страницу, где для размещения содержимого использовалась таблица разметки. И мы создали эту таблицу вручную. Для этого м...
Недостатки способа создания таблиц разметки вручную
Недостатки способа создания таблиц разметки вручную Нам помогло то, что схема дизайна нашего сайта очень проста. (Конечно, это не значит, что она плоха, примитивна, убога; очень и очень многие...
Режим разметки страницы Dreamweaver
Режим разметки страницы Dreamweaver Да, можем! Dreamweaver предоставляет нам замечательную возможность. Мы можем точно так же, как наши коллеги-полиграфисты, просто рисовать на странице &quo...
Рисунок 8 10 Кнопки Standard View
Рисунок 8.10. Кнопки Standard View и Layout View панели объектов В любом случае после этого Dreamweaver выдаст объемистое предупреждение, описывающее, что вы можете делать в режиме разметки....
Рисунок 8 11 Точка начала отсчета

Рисунок 8.11. Точка начала отсчета в месте пересечения измерительных линеек Еще одно средство помочь вам разместить фрагменты содержимого в нужном месте — координатная сетка. Чтобы отобразить...
Рисунок 8 12 Диалоговое окно Grid Settings
Рисунок 8.12. Диалоговое окно Grid Settings С помощью селектора цвета Color задается цвет линий сетки. Флажок Show Grid включает или отключает показ сетки. Он аналогичен пункту Show Grid по...
Рисунок 8 13 Окно документа в
Рисунок 8.13. Окно документа в режиме разметки с включенными линейками и сеткой...
Таблицы и ячейки разметки
Таблицы и ячейки разметки Ну, вот и все! Все подготовительные действия закончились. Можно приступать к собственно разметке. Как уже говорилось, в режиме разметки вы можете просто мышью на ст...
Рисунок 8 14 Кнопки Draw Layout
Рисунок 8.14. Кнопки Draw Layout Table (слева) и Draw Layout Cell (справа) панели объектов Нажмите кнопку Draw Layout Cell и переместите курсор мыши в окно документа. Он примет форму крестик...
Рисунок 8 15 Готовая ячейка основного

Рисунок 8.15. Готовая ячейка основного содержания и таблица разметки Получившаяся таблица будет отображена в виде большого серого прямоугольника с зеленой рамкой, а ячейка — в виде меньшего б...
Рисунок 8 16 Выделенная ячейка разметки
Рисунок 8.16. Выделенная ячейка разметки Если ячейка, размеры которой вы изменяете, содержит в себе что-то, и это "что-то" занимает ее целиком, вы не сможете уменьшить ее размеры. Л...
Рисунок 8 17 Четыре ячейки разметки
Рисунок 8.17. Четыре ячейки разметки (сетка временно отключена) Нарисуйте теперь еще три ячейки: заголовка, полосы навигации и сведений об авторских правах. Измените размеры уже созданной яче...
Рисуется таблица так же как ячейка
Рисуется таблица так же, как ячейка. Существуют, правда, несколько правил, которым нужно следовать при размещении на странице новой таблицы разметки. Ниже они все перечислены. Если нарисованна...
Таблица разметки обязательно должна
Таблица разметки обязательно должна содержать ячейки, в которых будет находиться содержимое страницы. Поместить содержимое прямо в таблице невозможно — это запрещают стандарты HTML; создайте...
Рисунок 8 18 Заголовок таблицы

Рисунок 8.18. Заголовок таблицы Вы можете отключить показ заголовков таблиц, если они вам мешают. Для этого достаточно отключить пункт-выключатель Show Layout Table Tabs подменю Table View м...
Рисунок 8 19 Строка ширин
Рисунок 8.19. Строка ширин Может получиться так, что в строке ширин для какой-то ячейки будут отображаться два значения ширины: одно в кавычках и другое в скобках. Обычно это случается, когда...
Рисунок 8 20 Готовая разметка
Рисунок 8.20. Готовая разметка страницы (сетка временно отключена) Примечание 2Примечание 2 Dreamweaver добавляет к тегам <TABLE>, определяющим таблицы разметки, специальные атрибу...