Macromedia Dreamweaver MX

Форматирование таблиц и ячеек разметки

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

Параметры ячеек разметки

Сначала поговорим, какие параметры ячеек разметки позволяет нам изме­нить Dreamweaver. Вид редактора свойств при выделенной ячейке разметки показан на рис. 8.21.

Группа переключателей Width позволяет вам установить ширину ячейки. Переключатель Fixed и расположенное справа от нее поле ввода Width за­дают фиксированную ширину ячейки. Прежде чем задавать ширину ячейки, не забудьте включить вышеупомянутый переключатель. Другой переключа­тель в этой группе — Autostretch — задает режим "саморастягивания" ячей­ки, т. е. ячейка будет занимать все пространство таблицы, оставшееся от других ячеек. В таблице может быть только одна такая ячейка.

В поле ввода Height задается высота ячейки.

Селектор цвета Bg задает цвет фона ячейки.

Раскрывающийся список Horz позволяет задать горизонтальное выравнива­ние содержимого ячейки. Здесь доступны четыре пункта:

□ Default — выравнивание по умолчанию, обычно, по левому краю. В ячей­ках строки заголовка текст по умолчанию выравнивается по центру (о строке заголовка см, ниже):

□ Left — выравнивание по левому краю;

□ Center — по центру;

□ Right — по правому краю.

Аналогично, раскрывающийся список Vert задает вертикальное выравнива­ние текста в ячейке. Здесь доступно пять пунктов:

□ Default — выравнивание по умолчанию, обычно посередине;

□ Тор — выравнивание по верху;

□ Middle — посередине;

□ Bottom — по низу;

□ BaseLinE — по базовой линии.

Флажок No Wrap запрещает перенос строк внутри ячейки.

С этими элементами управления и задаваемыми ими параметрами все по­нятно. За исключением переключателей группы Width и поля ввода Width.

Вообще, задание ширины ячейки — тема отдельного разговора. Конечно, вы уже знаете, что ячейки могут иметь фиксированную ширину или "растя­гиваться" автоматически, заполняя все свободное место в таблице. Но на самом деле здесь есть очень много нюансов, вызванных особенностями ра­боты программ Web-обозревателей и взаимовлияниями ячеек таблиц и са­мих таблиц друг на друга. Давайте поговорим об этом подробнее.

Задание ширины ячеек

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

Итак, ячейки могут иметь фиксированную или неограниченную ширину ("саморастягивающиеся" по горизонтали ячейки). (К сожалению, не предос­тавляются такие же средства для управления высотой ячеек.) Только одна ячейка в таблице может быть "саморастягивающейся"; значения ширины остальных ячеек должны быть фиксированы. И это логично.

Изменить значение ширины ячейки можно простым перетаскиванием мар­керов размеров на ее границе, когда ячейка выделена. Также можно ввести нужное значение прямо в поле ввода Width редактора свойств. Это справед­ливо для всех ячеек с фиксированной шириной.

Давайте превратим ячейку с основным содержанием страницы в "саморастя- гивающуюся". Но как это сделать?

Просто включите переключатель Autostretch в редакторе свойств. При этом Dreamweaver сам добавит в остальные (с фиксированной шириной) ячейки изображения-"распорки", представляющие собой уже известный вам "одно­пиксельный GIF". Это нужно для того, чтобы выдерживать точные размеры ячеек, не заполненных или не полностью заполненных содержимым. А вы­бранная вами ячейка станет "саморастягивающейся".

Однако сначала Dreamweaver задаст вам один вопрос. На экране появится диалоговое окно Choose Spacer Image, показанное на рис. 8.22. В нем вы должны выбрать, откуда будет браться изображение-"распорка".

'■* [Create a spacer image file. j

C Use an existing spacer image file.

C Don't use spacer images for autostretch tables.

You can change these options later in Preferences > Layout View.

Cancel

Рис. 8.22. Диалоговое окно Choose Spacer Image

Вы можете выбрать один из трех переключателей:

□ Create a spacer image file — создать файл изображения-"распорки". Этот переключатель следует выбирать, если у вас еще нет изображения-"рас-

Порки";

□ Use an existing spacer image file — использовать уже имеющийся файл изображения-"распорки";

□ Don't use spacer images for autostretch tables — не использовать изображе - ния-"распорки" вообще. Этот переключатель следует выбирать, если вы сами собираетесь принять меры против самовольного изменения шири­ны ячеек Web-обозревателем, например, поместить туда содержимое, за­полняющее ячейки целиком. Выбирайте этот переключатель и в том слу­чае, если вы сами собираетесь поместить в ячейки с фиксированной ши­риной изображение-"распорку". Если же вы не предпримете никаких мер, таблица может быть искажена Web-обозревателем до неузнаваемо­сти, о чем Dreamweaver вас и предупредит.

Сделав свой выбор, нажмите кнопку ОК для создания "саморастягивающей - ся" ячейки или Cancel — для отказа от этого.

Поскольку у нас нет файла изображения-"распорки", давайте прикажем Dreamweaver создать его. Выберите первый переключатель и нажмите кноп­ку ОК. После этого на экране появится диалоговое окно Save Spacer Image File As, напоминающее стандартное диалоговое окно сохранения файла Windows. Проверьте, выбран ли в раскрывающемся списке Relative То пункт Document (задание пути и имени файла относительно страницы, а не сайта), и сохраните файл изображения-"распорки" в папке Pics. По умолчанию он будет называться spacer. gif; если хотите, измените его имя, но можно этого и не делать.

После того как вы задали файл изображения-"распорки" (создали, выбрали уже существующий или отказались от него), Dreamweaver станет его ис­пользовать, не спрашивая вас. Если вы хотите изменить имя файла изобра­
жения-"распорки" или создать его заново, закройте Dreamweaver, выбрав пункт Exit в меню File, запустите его снова и повторите все шаги по созда­нию "саморастягивающейся" ячейки.

Теперь обратите внимание на строку ширин в верхней части внешней таб­лицы разметки. Ее части, относящиеся к крайним ячейкам (фиксированные значения ширины), имеют такой вид, как на рис. 8.23; это значит, что внутрь такой ячейки помещено изображение-"распорка". А часть, относя­щаяся к "саморастягивающейся" ячейке, имеет вид, показанный на рис. 8.24.

Рис. 8.23. Обозначение ячейки с фиксированной шириной и помещенной в нее "распоркой" в строке ширин

Чтобы вернуть "саморастягивающейся" ячейке таблицы фиксированную ширину, включите переключатель Fixed редактора свойств и, если нужно, задайте ширину в поле ввода Width.

Есть еще один способ преобразования ячейки из фиксированной в "само- растягивающуюся" и наоборот — воспользоваться меню строки ширин. По­лучить доступ к этому меню можно, щелкнув мышью точно по значению ширины ячейки (рис. 8.25). Чтобы преобразовать фиксированную ячейку в "саморастягивающуюся", выберите пункт Make Column Autostretch. Чтобы вернуть "саморастягивающейся" ячейке фиксированную ширину, выберите пункт Make Column Fixed Width.

Make Column Fixed Width

Make Cell Widths Consistent Remove All Spacer Images

Рис. 8.25. Меню строки ширин

Меню строки ширин также содержит ряд пунктов, позволяющих вам произ­вести различные манипуляции с изображениями-"распорками". Это пункты:

□ Add Spacer Image — добавление изображения-"распорки" к данной ячейке;

□ Remove All Spacer Images — удаление всех изображений-"распорок" во всех ячейках данной таблицы разметки. Это может понадобиться, если

Вы вручную помещаете в ячейку содержимое, полностью ее занимающее; таким образом, нужда в искусственной "распорке" отпадает. Например, мы со временем поместим в левую ячейку полосу навигации, и "распор­ка" станет ненужной;

Нужно ли добавлять изображения-"распорки" в ячейки вручную? На этот вопрос есть только один ответ. Посмотрите, что сделают с вашей таблицей разметки Netscape Navigator и Microsoft Internet Explorer, и решите сами. Старые версии Navigator славятся своим умением уродовать таблицы, так что уделите ему особое внимание. Если таблица выглядит хорошо и без "распорок", лучше без них обойтись. В противном случае, добавьте их. Од­нако имейте в виду: проверять в Web-обозревателе страницу нужно только после заполнения ее содержимым.

Сделайте центральную ячейку внешней таблицы разметки, где будет ото­бражаться основное содержимое, "саморастягивающейся". Dreamweaver до­бавит в остальные ячейки изображения-"распорки".

Параметры таблицы разметки

Dreamweaver также позволяет нам настроить кое-какие параметры таблицы разметки. Выберите таблицу и обратите внимание на редактор свойств — см. рис. 8.26.

Здесь все вам уже знакомо. Группа переключателей Width, поля ввода Width и Height выполняют точно такие же функции, что их "коллеги", относящие­ся к ячейкам разметки. Как видите, таблицы разметки тоже могут быть "са- морастягивающимися" (по умолчанию) или иметь фиксированную ширину. Учтите, что таблицы с фиксированной шириной не могут иметь "саморастя- гивающиеся" ячейки.

Селектор цвета Bg задает цвет фона таблицы.

Поля ввода CellPad и CellSpace задают расстояния соответственно между границей ячейки и ее содержимым и между границами соседних ячеек. По умолчанию они равны нулю.

В правой части редактора свойств расположены четыре кнопки, позволяю­щие выполнить некоторые манипуляции с таблицей разметки.

1. Левая верхняя кнопка — Clear Row Heights — позволяет удалить атрибу­ты и величины высот строк таблицы height. (Вы также можете выбрать пункт Clear Cell Heights меню строки ширин.) После этого каждая строка примет такую высоту, чтобы полностью вместить содержимое всех ячеек; таким образом, таблица разметки будет иметь в окне Web-обозревателя минимальную высоту. Однако это подходит не для всех страниц, а толь­ко для тех, что созданы на основе простейших схем табличных разметок. Если же ваша разметка включает в себя строки фиксированной высоты, лучше не трогайте эту кнопку.

2. Правая верхняя кнопка — Make Widths Consistent — задает такие значе­ния ширины ячеек таблицы, чтобы они вместили все свое содержимое. (Вы также можете выбрать пункт Make Cell Widths Consistent меню стро­ки ширин.) Скажем, если вы жестко задали величины ширины ячеек, но Dreamweaver был вынужден увеличить или уменьшить их из-за того, что содержимое не помещалось в ячейки, в строке ширин для этой ячейки будут отображаться два значения ширины: одно в кавычках, другое в скобках. Значение в кавычках обозначает реальную ширину ячейки, а значение в скобках — заданное вами. В этом случае вы можете скор­ректировать ширину нажатием этой кнопки.

3. Левая нижняя кнопка — Remove All Spacers — удаляет все изображения - "распорки" во всех ячейках таблицы. Вы также можете выбрать пункт Remove All Spacer Images меню строки ширин.

4. Правая нижняя кнопка — Remove Nesting — доступна только во вложен­ных таблицах. (Вы также можете выбрать пункт Remove Nesting меню строки ширин.) Она позволяет преобразовать вложенную таблицу в на­бор ячеек внешней таблицы; при этом содержимое ячеек не теряется. Это позволит уменьшить сложность таблицы разметки и, следовательно, HTML-кода, который ее формирует.