1  2  3  4  5  6  7  8  9  10

Предопределенные форматы таблиц
Ко всему вышесказанному можно добавить, что Dreamweaver предлагает на выбор множество предопределенных форматов таблиц и возможность быстро "подогнать" ту или иную схему под свои нужды. Концепция форматов таблиц схожа с концепцией предопределенных цветовых схем, рассмотрен­ных нами в главе 3 — они тоже созданы профессиональными дизайнерами с целью помочь начинающим пользователям.
Формат таблиц выбирается с помощью диалогового окна Format Table . Вызвать его можно, выбрав пункт Format Table в меню Command . Этот пункт меню доступен только тогда, когда вы выделите таблицу или хотя бы поставите текстовый курсор в ее ячейку. В левом верхнем углу находится список, в котором представлены все доступные предопределенные форматы таблиц. Вы просто выбираете нужную строку и просматриваете получившийся результат в панели предварительно­го просмотра, находящемся правее списка. Расположенные ниже группы ; элементов управления помогут вам немного изменить предопределенный формат, если он вас не вполне устраивает.
Группа Row Colors позволяет задать цвета строк. Dreamweaver в этом случае предлагает вам задать цвета групп строк с чередованием (нечетная группа строк — одного цвета, четная — другого и т. п.) для лучшей читаемости больших таблиц с множеством строк. Селектор цвета First задает цвет нечетных групп строк, a Second — четных. Раскрывающийся список Alternate задает, сколько строк будет содержаться в каждой группе. Здесь доступно пять пунктов:
< do not alternate > — все строки имеют один цвет, заданный селектором цвета First ;
Every Other Row — группы по одной строке;
Every Two Rows — по две строки;
Every Three Rows — по три строки;
Every Four Rows — по четыре строки.
Группа Top Row позволяет установить параметры первой строки таблицы, ее "шапки". Раскрывающийся список Align задает выравнивание текста: по левому краю (пункт Left ), по центру ( Center ), по правому краю ( Right ) или по умолчанию ( None ). Раскрывающийся список Text Style задает стиль текста заголовка: обычный (пункт Regular ), жирный ( Bold ), курсив
( Italic ) или жирный курсив ( Bold Italic ). Селекторы цвета Bg Color и Text Color служат для задания цветов, соответственно, фона и текста первой строки.
С помощью группы Left Col устанавливаются параметры левого столбца таблицы. Раскрывающиеся списки Align и Text Style вам уже знакомы.
Поле ввода Border задает толщину границы таблицы в пикселах.
Обычно Dreamweaver применяет все заданные здесь настройки к строкам и ячейкам таблицы. Но если вы включите флажок Apply All Attributes to TD Tags Instead of TR Tags , он будет применять их только к ячейкам.
Закончив подбор формата таблицы, нажмите кнопку ОК, чтобы закрыть окно и применить заданные параметры. Если вы нажмете кнопку Apply , то заданные вами параметры будут применены к таблице без закрытия окна.
Сортировка таблицы
Очень часто бывает необходимо отсортировать таблицу по значению одного или двух столбцов (более сложные сортировки по множеству столбцов встречаются значительно реже). Это случается, когда пользователь создает таблицу и вводит в цее данные из какогото небрежно составленного документа или даже множества таких документов. А делопроизводство в боль шинстве наших государственных учреждений поставлено так, что навести порядок в бумажках бывает очень трудно. Если вообще возможно...
Разработчики Dreamweaver значительно облегчили операцию сортировки таблиц. Все, что вам нужно сделать, — это выделить таблицу (или просто поставить в любую ячейку текстовый курсор) и выбрать пункт Sort Table в меню Commands . На экране появится диалоговое окно Sort Table.
Номер первого столбца, по значениям которого будет производиться сортировка, задается в раскрывающемся списке Sort By . Все имеющиеся в нем пункты имеют вид Column
<номер столбца>, так что просто выберите столбец с нужным номером.
А вот группу элементов Order , состоящую из двух раскрывающихся списков, стоит рассмотреть подробнее. Давайте предположим, что в столбце, по которому должна производиться сортировка, находятся одни цифры, например номера строк:
4
2
6
. . .
1
12
. . .
34
27
Как видите, они расположены в беспорядке, т. е. таблица не отсортирована. Попробуем отсортировать ее. У нас получится следующее:
1
10
11
. . .
2
20
21
. . .
3
Порядок сортировки более чем странный и, уж конечно, неправильный. Но почему?
Дело в том, что сортировка велась по буквенному значению символов. В таком случае каждое число Dreamweaver рассматривает как набор символов. Внимательнее присмотритесь к отсортированной последовательности ведь с этой точки зрения она правильная.
Но мыто ожидали, что Dreamweaver отсортирует числа по их чисаовому значению. Однако прежде ему нужно дать соответствующие указания, для чего и предназначена группа элементов Order . Пункт Alphabetically левого раскрывающегося списка задает сортировку по буквенному значению символов, а пункт Numerically — по числовому значению. И если мы выберем второй пункт, наша гипотетическая таблица будет отсортирована, как и требовалось:
1
2
3
. . .
10
11
. . .
20
21
Однако помните, что порядок сортировки по числовому значению следует задавать только тогда, когда в соответствующем столбце вашей таблицы находятся одни числа.
Второй раскрывающийся список группы элементов Order задает порядок сортировки. Пункт Ascending позволяет отсортировать столбец по возрастанию его значений, пункт Descending — по убыванию.
Раскрывающийся список Then By задает номер второго столбца, по которому будет производиться сортировка, если первый столбец содержит одинаковые значения. Ниже этого списка находится уже знакомая вам группа элементов Order .
По умолчанию Dreamweaver при сортировке таблицы не затрагивает первую строку, где обычно находится ее заголовок, иначе говоря, "шапка". Но если вы включите флажок Sort Includes First Row , сортировка затронет и первую строку. Включите этот флажок, если ваша таблица не имеет "шапки", а полезные данные начинаются сразу с первой строки.
Флажки Sort THEAD Rows ( If Any ) и Sort TFOOT Rows ( If Any ) позволяют отсортировать заодно и строки, находящиеся з секции заголовка и "поддона" таблицы. Эти секции создаются с помощью парных тегов < thead > и < tfoot > соответственно и могут, в принципе, обрабатываться Web -обозревателем особым образом. К сожалению, Dreamweaver не поддерживает создание этих секций — вам придется вставить нужные теги вручную.
Примечание
Теги < thead > и < tfoot > объединяют строки ( теги < TR >), которые должны находиться в нужной секции . Для создания секции " тела " таблицы , объединяющей строки , содержащие полезную информацию , служит аналогичный тег < tbody >.
Выше мы рассмотрели предопределенные форматы, позволяющие быстро форматировать таблицы. Практически во всех этих форматах нечетные группы строк окрашиваются в один цвет, четные — в другой. Это достигается заданием соответствующих параметров для строк таблицы (соответствующих атрибутов тега < TR >). При сортировке таких таблиц параметры форматирования строк (в частности, цвет фона и текста) не будут переноситься вместе с данными строк, т. е. вся их расцветка останется на месте. Это очень удобно, т. к. пользователю не нужно будет переформатировать таблицу после каждой сортировки.
Однако может случиться так, что пользователь захочет переместить вместе сданными строк их параметры форматирования. Это может "быть полезно,например, если пользователь выделяет какието данные в таблице отдель­ным цветом. Для такого случая предусмотрен флажок Keep TR Attributes I With Sorted Row . Достаточно его включить, чтобы Dreamweaver начал переносить данные строк вместе с их форматированием.
Чтобы выполнить сортировку, нажмите кнопку ОК. Также вы можете нажать кнопку Apply , чтобы выполнить сортировку, не закрывая окно Sort Table .
Вставка табличных данных
Да, конечно, создавать "с нуля" таблицы в Dreamweaver проще простого. Но что делать, если нужно поместить на Web -страницу таблицу, созданную в другой программе? Как Dreamweaver поможет нам в данном случае?
Поможет, и еще как Ведь он содержит довольно мощные средства помещения на страницы табличных данных, сохраненных в текстовом формате. Правда, при этом он коверкает русский текст, преобразуя его в нечитаемую абракадабру. Но все равно, его возможности помогут вам при помещении на Web -страницу числовых данных.Сейчас мы их рассмотрим. Но сначала поговорим о текстовых форматах таблиц.
Текстовые форматы записи табличных данных — это довольно старая идея. Заключается она в том, что данные записываются в виде строк, а значения отделяются друг от друга какимлибо разделителем: запятой, знаком табуляции и т. п. Скажем, если мы переведем небольшую табличку, приведенную! в начале этой главы, в текстовый формат, она будет иметь такой вид:
№№,Проект, Закончен?
1,Свой домашний сайт, Да
2,Сайт своей любимой кошки, "Нет, кошка убежала"
Здесь мы выбрали в качестве разделителя запятую. Но т. к. последнее значение в последней строке имеет внутри себя запятую, нам пришлось взять это значение в кавычки.
Файлы такого формата используются довольно часто и даже имеют свое название —
CSV ( Comma Separated Values — значения, разделенные запятыми). Они сохраняются с расширением csv и могут порождаться многими программами процессоров электронных таблиц и СУБД (систем управления базами данных), в частности Microsoft Excel и Microsoft Access .
Сохраним и мы нашу маленькую табличку в таком формате. Файл назовем 5.1.csv . Теперь создадим новую Web -страницу и попытаемся поместить сюда данные, только что сохраненные в CSV -файле.
Нажмите кнопку Tabular Data , находящуюся на закладке Common панели объектов. Вы также можете выбрать пункт Import Tabular Data подменю Table Objects меню Insert . При этом на экране появится диалоговое окно Import Tabular Data .
В поле ввода Data File вводится имя файла данных. Вы также можете нажать кнопку Browse , расположенную справа от этого поля ввода, и выбрать нужный файл в стандартном диалоговом окне открытия файла Windows .
Раскрывающийся список Delimiter позволит вам выбрать разделитель значений. В нем доступны следующие пункты: Tab — знак табуляции, Comma — запятая, Semicolon — точка с запятой, Colon — двоеточие и Other — другой знак. Если вы выберете последний пункт, справа от списка появится небольшое поле ввода, где вы сможете ввести символ — разделитель значений.
Группа переключателей Table Width позволит вам задать ширину результирующей таблицы. Установив переключатель Fit to Data , вы предоставляете Web -обозревателю право самому задать ширину таблицы. Переключатель Set позволяет вам жестко задать ширину таблицы. При этом в поле ввода, расположенном справа от этого переключателя, вы сможете ввести значение ширины. А в раскрывающемся списке, находящемся правее, задается единица измерения ширины: пикселы (пункт Pixels ) или проценты ( Percent ).
Назначение полей ввода Cell Padding , Cell Spacing и Border уже вам известно. Мы рассматривали их ранее.
Раскрывающийся список Format Top Row позволяет вам задать, как будет форматироваться первая строка результирующей таблицы (обычно там находится заголовок таблицы).
Здесь доступны четыре пункта: [ No For ­ matting ] — никак не форматируется, Bold — выводится жирным шрифтом, Italic — курсивом, Bold Italic — жирным курсивом.
Закончив установку параметров, нажмите кнопку ОК. И посмотрите, что получится. Как видите, Dreamweaver вполне сносно справился со своей задачей. Правда, как говорилось ранее, он изуродовал русский текст и вдобавок некорректно обработал значение в кавычках - воспринял запятую внутри него как разделитель и создал еще один столбец в таблице. Но всетаки, это лучше, чем ничего. И если вам нужно быстренько "перегнать" множество таблиц с числами в формат HTML , воспользуйтесь данной функцией.

1  2  3  4  5  6  7  8  9  10

Вверх