Dreamweaver MX. Таблицы
Dreamweaver MX. Таблицы
Начало в КГ №№ 4, 5, 6
Сегодня речь пойдет о таблицах — одном из мощных инструментов структурирования информации. Применение таблиц в ходе разработки web-страниц не ограничивается простым отображением данных, таблицы часто используются для дизайна, поэтому данная тема заслуживает внимательного рассмотрения.
Давайте вспомним некоторые специфические моменты языка HTML, напрямую касающиеся таблиц. Как известно, для создания таблицы используется тег <table> </table> . Дальнейшее разделение таблицы на ячейки производится с помощью тегов <tr> </tr> и <td> </td> . На каждом уровне к этим тегам могут добавляться свои собственные параметры форматирования: цвет фона, выравнивание текста и тому подобное. Это иногда создает условия для возникновения ситуаций, когда один и тот же параметр имеет на разных уровнях разные значения. Поэтому необходимо помнить, что параметры ячейки перекрывают параметры строки, в то время как опции строки в свою очередь "сильнее" настроек таблицы в целом.
Первым делом следует добавить на страницу саму таблицу. Для этого в Dreamweaver MX существует ряд вариантов. Во-первых, можно воспользоваться соответствующей кнопкой на панели Common группы Insert или одноименным пунктом меню Insert. Во-вторых, на группе панелей Insert присутствует вкладка Tables, где также можно отыскать кнопку создания таблицы. Такая же кнопка находится и на вкладке Layout. Есть для этого действия и hot key — Ctrl+Alt+T. Какой бы путь мы ни избрали, в полном соответствии с крылатой фразой "все дороги ведут в Рим" следующей остановкой будет диалог определения свойств таблицы под названием Insert Table.
Здесь определяется количество строк и столбцов в таблице, ее ширина, которая может задаваться как в пикселях (абсолютное значение), так и в процентах от ширины окна браузера (относительное значение). При использовании таблиц для дизайна страницы подумайте, какой вариант лучше подойдет вашему замыслу. Если были избраны значения в процентах, следите за тем, чтобы дизайн не разваливался во время просмотра при различных разрешениях монитора и размерах окна браузера. Давать здесь какие-либо детальные советы я поостерегусь — многое зависит от конкретных задач.
Определяем значения остальных параметров: толщину рамки таблицы (если Border установлено на "0", то рамка не видна), расстояние между ячейками (Cell Spacing) и отступ в них (Cell Padding), измеряемый пикселями. Если вы еще не знакомы с действием соответствующих тегов HTML, просто поэкспериментируйте со значениями параметров, и все довольно скоро станет понятно.
При наличии желания в Dreamweaver MX можно заранее настроить некоторые часто используемые параметры добавляемых таблиц — в этом случае вам не надо будет определять их каждый раз заново. Для этого нам потребуется открыть окно настроек пакета: меню Edit — Preferences (Ctrl+U). Нас пока будет интересовать вкладка General. Расположенный там пункт Show Dialog When Inserting Objects отвечает за включение (и отключение) диалогов определения свойств, добавляемых на страницу объектов, в том числе и таблиц.
Итак, таблица у нас имеется, давайте посмотрим, что с ней можно сделать. Обратите внимание на панель Properties. Если выделить таблицу целиком, то на ней становится активным ряд новых инструментов, относящихся к таблице в целом. Это идентификатор таблицы, уже знакомые нам параметры ширины и количества колонок и столбцов. Добавились опции выравнивания таблицы на странице (Align), цвет рамки и фона таблицы, путь к фоновому рисунку, а также группа полезных кнопок, позволяющих произвести дополнительные манипуляции над свойствами таблицы. Кнопки Clear Column Widths и Clear Row Heights удаляют все заданные ранее точные значения ширины и высоты элементов таблицы. Оставшиеся кнопки отвечают за конвертирование значений размеров таблицы в пиксели или проценты.
Если выделить не всю таблицу, а только несколько ячеек, состав инструментов панели Properties изменится. Существует и альтернативный способ: правый щелчок по таблице — пункт Table. Появятся уже знакомые нам параметры форматирования, которые теперь относятся к тексту, помещаемому в эти ячейки. Появились две новые кнопки, предназначенные для объединения нескольких ячеек или разделения ячейки на несколько новых. Назовем еще несколько новых параметров: No Wrap запрещает перенос текста в ячейке на новую строку, а Header помечает ячейку как содержащую заголовок таблицы. При этом текст автоматически приобретает выравнивание от центра и отображается жирным шрифтом.
Выделить ячейку или комбинацию ячеек достаточно просто. Для повышения удобства работы стоит запомнить несколько несложных правил. Для того, чтобы выделить одну ячейку, по ней надо щелкнуть мышью, для выделения нескольких соседних ячеек надо либо протянуть мышью выделение на нужные ячейки, либо воспользоваться Shift+щелчок. Если ячейки не находятся рядом, используем Ctrl+щелчок. Всю таблицу выделяем кликом по ее границе или делаем правый щелчок в любой ячейке, где выбираем Table — Select Table. Наконец, можно использовать Tag Editor, выбирая в нем теги всей таблицы либо ее составных частей.
В таблице можно добавлять или удалять столбцы и строки, ячейки можно разделять на несколько новых. В свою очередь, несколько ячеек можно объединить в одну. Для этих операций используется контекстное меню, вызываемое правым кликом по ячейкам или нажатием кнопки панели Properties. Повлиять на количество строк или столбцов, объединяемых новой ячейкой, можно при помощи команд Increase/Decrease Row/Column Span в меню Modify — Table или в контекстном меню свойств ячейки. Аналогичные инструменты есть и на панели Properties.
К простой новой таблице можно применить одну из заложенных в Dreamweaver MX готовых схем оформления. После вызова окна Format Table (меню Commands — Format Table) выбирается понравившаяся схема, отдельные параметры которой можно тут же поправить.
Изменять размеры элементов таблицы можно как визуально, с помощью мышки, так и задавая точные численные значения соответствующих параметров. В результате можно создавать весьма сложные таблицы, необходимые для дизайна web-страницы.
Когда таблицы используются в такой ипостаси структурной основы дизайна, имеет смысл вспомнить о так называемых вложенных таблицах (Nested Tables). Это означает, что на web-странице создается простая таблица, которая задает общую структуру будущих разделов, в ячейки которой помещаются другие таблицы, форматирующие эти разделы. Самый простой случай — родительская таблица из трех строк, в которых размещаются "шапка" страницы, основной текст и "подвал" со вспомогательными элементами, при этом названные разделы могут иметь свою структуру, также построенную на таблицах. Процесс создания вложенных таблиц не имеет принципиальных отличий от рассмотренных способов создания обычных таблиц, разница только в том, что такая таблица размещается в ячейке другой таблицы.
В любой таблице, созданной средствами Dreamweaver MX, можно произвести простейшую сортировку данных. Помните: сортировать таблицы, в которых до этого объединялись ячейки, нельзя. Для проведения их сортировки предназначен пункт меню Commands — Sort Table. Параметры сортировки определяются в диалоговом окне. Кроме основных опций, доступны и дополнительные, определяющие, будут ли сортироваться данные в первой строке таблицы, где вы могли добавить ранее заголовок, обработку THEAD- и TFOOT-элементов таблицы, а также опция сохранения оформления ячейки при ее перемещении в ходе сортировки.
Как и в случае с простым текстом, таблицу в Dreamweaver можно создать на основе определенным образом отформатированных данных, импортированных из других приложений. Файл-источник должен быть сохранен как простой текст с форматированием. Для импорта данных надо воспользоваться пунктом меню File — Import — Tabular Data. Дальнейший диалог призван определить местоположение файла, разделитель, использованный для форматирования данных, ширину формируемой таблицы (по данным или конкретное значение в процентах/пикселях), уже известные нам Cell Padding, Cell Spacing и Border, а также особое форматирование первой строки таблицы как заголовка. Кроме текстовых файлов, данные для таблицы можно получить и установив соединение с базой данных, но это отдельная тема, которая будет затронута в будущем.
Возможно, вам пригодится инструмент экспорта таблиц в текстовый файл. Диалог Export Table вызывается через меню File — Export — Table. Там определяются только две настройки: разделитель и знак конца строки.
В завершение статьи подведем итог достигнутому. Мы познакомились с добавлением и настройкой таблиц в программе Macromedia Dreamweaver MX, научились пользоваться готовыми стилями оформления, использовали возможности сортировки значений в таблицах, затронули вопросы импорта и экспорта табличных данных. Теперь у нас есть не просто средство размещения таблиц в тексте, но и весьма мощный инструмент построения дизайна web-страницы. Однако это еще не все доступные в Dreamweaver инструменты для редактирования таблиц. В следующий раз мы остановимся на работе в режиме Layout View.
Алексей Кутовенко
Начало в КГ №№ 4, 5, 6
Сегодня речь пойдет о таблицах — одном из мощных инструментов структурирования информации. Применение таблиц в ходе разработки web-страниц не ограничивается простым отображением данных, таблицы часто используются для дизайна, поэтому данная тема заслуживает внимательного рассмотрения.
Давайте вспомним некоторые специфические моменты языка HTML, напрямую касающиеся таблиц. Как известно, для создания таблицы используется тег <table> </table> . Дальнейшее разделение таблицы на ячейки производится с помощью тегов <tr> </tr> и <td> </td> . На каждом уровне к этим тегам могут добавляться свои собственные параметры форматирования: цвет фона, выравнивание текста и тому подобное. Это иногда создает условия для возникновения ситуаций, когда один и тот же параметр имеет на разных уровнях разные значения. Поэтому необходимо помнить, что параметры ячейки перекрывают параметры строки, в то время как опции строки в свою очередь "сильнее" настроек таблицы в целом.
Первым делом следует добавить на страницу саму таблицу. Для этого в Dreamweaver MX существует ряд вариантов. Во-первых, можно воспользоваться соответствующей кнопкой на панели Common группы Insert или одноименным пунктом меню Insert. Во-вторых, на группе панелей Insert присутствует вкладка Tables, где также можно отыскать кнопку создания таблицы. Такая же кнопка находится и на вкладке Layout. Есть для этого действия и hot key — Ctrl+Alt+T. Какой бы путь мы ни избрали, в полном соответствии с крылатой фразой "все дороги ведут в Рим" следующей остановкой будет диалог определения свойств таблицы под названием Insert Table.
Здесь определяется количество строк и столбцов в таблице, ее ширина, которая может задаваться как в пикселях (абсолютное значение), так и в процентах от ширины окна браузера (относительное значение). При использовании таблиц для дизайна страницы подумайте, какой вариант лучше подойдет вашему замыслу. Если были избраны значения в процентах, следите за тем, чтобы дизайн не разваливался во время просмотра при различных разрешениях монитора и размерах окна браузера. Давать здесь какие-либо детальные советы я поостерегусь — многое зависит от конкретных задач.
Определяем значения остальных параметров: толщину рамки таблицы (если Border установлено на "0", то рамка не видна), расстояние между ячейками (Cell Spacing) и отступ в них (Cell Padding), измеряемый пикселями. Если вы еще не знакомы с действием соответствующих тегов HTML, просто поэкспериментируйте со значениями параметров, и все довольно скоро станет понятно.
При наличии желания в Dreamweaver MX можно заранее настроить некоторые часто используемые параметры добавляемых таблиц — в этом случае вам не надо будет определять их каждый раз заново. Для этого нам потребуется открыть окно настроек пакета: меню Edit — Preferences (Ctrl+U). Нас пока будет интересовать вкладка General. Расположенный там пункт Show Dialog When Inserting Objects отвечает за включение (и отключение) диалогов определения свойств, добавляемых на страницу объектов, в том числе и таблиц.
Если выделить не всю таблицу, а только несколько ячеек, состав инструментов панели Properties изменится. Существует и альтернативный способ: правый щелчок по таблице — пункт Table. Появятся уже знакомые нам параметры форматирования, которые теперь относятся к тексту, помещаемому в эти ячейки. Появились две новые кнопки, предназначенные для объединения нескольких ячеек или разделения ячейки на несколько новых. Назовем еще несколько новых параметров: No Wrap запрещает перенос текста в ячейке на новую строку, а Header помечает ячейку как содержащую заголовок таблицы. При этом текст автоматически приобретает выравнивание от центра и отображается жирным шрифтом.
Выделить ячейку или комбинацию ячеек достаточно просто. Для повышения удобства работы стоит запомнить несколько несложных правил. Для того, чтобы выделить одну ячейку, по ней надо щелкнуть мышью, для выделения нескольких соседних ячеек надо либо протянуть мышью выделение на нужные ячейки, либо воспользоваться Shift+щелчок. Если ячейки не находятся рядом, используем Ctrl+щелчок. Всю таблицу выделяем кликом по ее границе или делаем правый щелчок в любой ячейке, где выбираем Table — Select Table. Наконец, можно использовать Tag Editor, выбирая в нем теги всей таблицы либо ее составных частей.
В таблице можно добавлять или удалять столбцы и строки, ячейки можно разделять на несколько новых. В свою очередь, несколько ячеек можно объединить в одну. Для этих операций используется контекстное меню, вызываемое правым кликом по ячейкам или нажатием кнопки панели Properties. Повлиять на количество строк или столбцов, объединяемых новой ячейкой, можно при помощи команд Increase/Decrease Row/Column Span в меню Modify — Table или в контекстном меню свойств ячейки. Аналогичные инструменты есть и на панели Properties.
К простой новой таблице можно применить одну из заложенных в Dreamweaver MX готовых схем оформления. После вызова окна Format Table (меню Commands — Format Table) выбирается понравившаяся схема, отдельные параметры которой можно тут же поправить.
Изменять размеры элементов таблицы можно как визуально, с помощью мышки, так и задавая точные численные значения соответствующих параметров. В результате можно создавать весьма сложные таблицы, необходимые для дизайна web-страницы.
Когда таблицы используются в такой ипостаси структурной основы дизайна, имеет смысл вспомнить о так называемых вложенных таблицах (Nested Tables). Это означает, что на web-странице создается простая таблица, которая задает общую структуру будущих разделов, в ячейки которой помещаются другие таблицы, форматирующие эти разделы. Самый простой случай — родительская таблица из трех строк, в которых размещаются "шапка" страницы, основной текст и "подвал" со вспомогательными элементами, при этом названные разделы могут иметь свою структуру, также построенную на таблицах. Процесс создания вложенных таблиц не имеет принципиальных отличий от рассмотренных способов создания обычных таблиц, разница только в том, что такая таблица размещается в ячейке другой таблицы.
В любой таблице, созданной средствами Dreamweaver MX, можно произвести простейшую сортировку данных. Помните: сортировать таблицы, в которых до этого объединялись ячейки, нельзя. Для проведения их сортировки предназначен пункт меню Commands — Sort Table. Параметры сортировки определяются в диалоговом окне. Кроме основных опций, доступны и дополнительные, определяющие, будут ли сортироваться данные в первой строке таблицы, где вы могли добавить ранее заголовок, обработку THEAD- и TFOOT-элементов таблицы, а также опция сохранения оформления ячейки при ее перемещении в ходе сортировки.
Как и в случае с простым текстом, таблицу в Dreamweaver можно создать на основе определенным образом отформатированных данных, импортированных из других приложений. Файл-источник должен быть сохранен как простой текст с форматированием. Для импорта данных надо воспользоваться пунктом меню File — Import — Tabular Data. Дальнейший диалог призван определить местоположение файла, разделитель, использованный для форматирования данных, ширину формируемой таблицы (по данным или конкретное значение в процентах/пикселях), уже известные нам Cell Padding, Cell Spacing и Border, а также особое форматирование первой строки таблицы как заголовка. Кроме текстовых файлов, данные для таблицы можно получить и установив соединение с базой данных, но это отдельная тема, которая будет затронута в будущем.
Возможно, вам пригодится инструмент экспорта таблиц в текстовый файл. Диалог Export Table вызывается через меню File — Export — Table. Там определяются только две настройки: разделитель и знак конца строки.
В завершение статьи подведем итог достигнутому. Мы познакомились с добавлением и настройкой таблиц в программе Macromedia Dreamweaver MX, научились пользоваться готовыми стилями оформления, использовали возможности сортировки значений в таблицах, затронули вопросы импорта и экспорта табличных данных. Теперь у нас есть не просто средство размещения таблиц в тексте, но и весьма мощный инструмент построения дизайна web-страницы. Однако это еще не все доступные в Dreamweaver инструменты для редактирования таблиц. В следующий раз мы остановимся на работе в режиме Layout View.
Алексей Кутовенко
Компьютерная газета. Статья была опубликована в номере 07 за 2004 год в рубрике soft :: интернет
