Как объединить ячейки таблицы в dreamweaver
Обновлено: 06.07.2024
Начало в КГ №№ 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, выбирая в нем теги всей таблицы либо ее составных частей.
В любой таблице, созданной средствами 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 :: интернет
Мы научились работать с таблицами и их составными частями. Вы можете подумать, что это все. Отнюдь! Мы еще не рассмотрели такое мощное средство, как слияние ячеек.
Что это такое, проще всего объяснить на примере.
Предположим, у нас есть следующая таблица (рис. 5.22). Ничего особенного, обычная таблица, какие вы уже умеете создавать в Dreamweaver, Простейший набор строк и ячеек, даже без форматирования. Мы пронумеровали ячейки таблицы, чтобы они не пустовали и чтобы нам самим в дальнейшем было легче.
Рис. 5.22. Простая таблица
Все это очень просто и прекрасно вам знакомо. Теперь давайте рассмотрим более сложную таблицу (рис. 5.23).
Здесь вы видите, что некоторые ячейки объединены, слиты в одну (об этом говорит знак "плюс" между их номерами). Такой прием называется слиянием ячеек. Как видите, ячейки могут быть слиты по горизонтали и по вертикали. И количество ячеек, соединяемых в одну, не ограничено.
Рис. 5.23. Более сложная таблица
Но как это сделать на Web-странице? Поддерживает ли HTML слияние ячеек? Конечно, поддерживает, иначе мы не стали бы вам об этом рассказывать.
Давайте откроем новое окно Dreamweaver и поместим в него простую таблицу в пять столбцов и четыре строки, аналогичную рис. 5.22. Не будем мудрить с форматированием и просто пронумеруем ячейки таблицы, чтобы было легче в ней ориентироваться (как в вышеприведенном примере). Сохраним полученную таблицу под именем 5.4.htm (рис. 5.24).
Рис. 5.24. Изначальная таблица, готовая к слиянию ячеек
Теперь давайте скажем Dreamweaver, какие ячейки мы хотим соединить. Пусть, например, это будут ячейки 2 и 3, как на рис. 5.23. Выделите их. И обратите внимание на редактор свойств. В его левом нижнем углу находится кнопка, изображенная на рис. 5.25.
Рис.5.25. Кнопка слияния ячеек редактора свойств
С помощью данной кнопки и производится слияние ячеек. Нажмите ее. На рис. 5.26 показано, что получится в этом случае.
В приведенной ниже иллюстрации ячейки выделены в форме прямоугольника, значит, их можно объединить.
В приведенной ниже иллюстрации ячейки выделены не в форме прямоугольника, поэтому их объединить нельзя.
Выберите меню «Изменение» > «Таблица» > «Объединить ячейки».
В развернутом инспекторе свойств HTML («Окно» > «Свойства») щелкните «Объединить ячейки» .
Примечание. Если кнопку не видно, щелкните стрелку раскрытия в правом нижнем углу инспектора свойств для отображения всех параметров.В новую ячейку помещается содержимое всех объединенных ячеек. К объединенной ячейке применяются свойства первой выделенной ячейки.
Разбиение ячейки
-
Щелкните в ячейке и выполните одно из следующих действий.
Выберите меню «Изменение» > «Таблица» > «Разбить ячейку».
В развернутом инспекторе свойств HTML («Окно»> «Свойства») щелкните «Разбить ячейку» .
Примечание. Если кнопку не видно, щелкните стрелку раскрытия в правом нижнем углу инспектора свойств для отображения всех параметров.Увеличение или уменьшение числа строк или столбцов в диапазоне одной ячейки
Выберите меню «Изменение» > «Таблица» > «Увеличить диапазон строк» или «Изменение» > «Таблица» > «Увеличить диапазон столбцов».
Выберите меню «Изменение» > «Таблица» > «Уменьшить диапазон строк» или «Изменение» > «Таблица» > «Уменьшить диапазон столбцов».
Рекомендуемые ссылки
- Saturday, 29 January 2011
- Категория:Представление содержимого в таблицах
Комментарии (0)
Оставить комментарий
Уроки и статьи по оптимизации и продвижению сайтов
 Идеи  Вопросы  Желания Проблемы  Обсуждения  Отзывы Черный список заказчиков |
Стажировка на создании сайтов —лучший способ научиться делать сайты самому
SEO технологии
Энциклопедия оптимизации
- Терминология SEO
- Начало продвижения
- Контент для сайта
- Реклама и Маркетинг
- Сайты для бизнеса
- Веб-Дизайн и Графика
- Поисковые технологии
- Алгоритмы поисковых систем
- Поисковые системы
- Источники Трафика, или Где Взять Посетителей
- ТЗ и стратегии продвижения сайта
- Методы Оценки Продвижения
- Начало продвижения сайта в поисковых системах
- Ошибки оптимизации —как спорные SEO-методы вредят Сайту
- Интернет- Бизнес
- Управление
- Истории успеха
- Стратегии Бизнеса
- Идеи Бизнеса
- Интернет-маркетинг
Активные группы сообщества
Обучение Dreamweaver CS5
- Использование Dreamweaver CS5
- Рабочее пространство
- Работа с сайтами Dreamweaver
- Создание файлов и управление ими
- Управление ресурсами и библиотеками
- Создание страниц c помощью CSS
- Разметка страниц с помощью HTML
- Добавление содержимого на страницы
- Создание ссылок и навигация
- Просмотр страниц
- Работа с кодом страницы
- Добавление вариантов поведения JavaScript
- Работа с другими приложениями
- Создание шаблонов и управление ими
- Визуальное построение страниц Spry
- Использование сетевых служб Adobe
- Отображение XML-данных с помощью XSLT
- Подготовка к построению динамических сайтов
- Создание динамических страниц
- Визуальное построение приложений
- Создание форм
- Специальные возможности
Документация и уроки
Хостинг — для Joomla
Для того, чтобы Ваш сайт был виден в Интернет 24 часа в сутки, нужно очень серьезно отнестись к выбору хостинга для сайта на Joomla. Хостинг для Joomla может быть ПЛАТНЫЙ и БЕСПЛАТНЫЙ. Бесплатный хостинг имеет очень ограниченные возможности и подойдет только для тестирования сайта. Хотя на зарубежных хостингах часто встречаются "заманчивые предложения", и вроде бы все есть, но как показывает практика, возможности бесплатных хостингов всегда ограничены.
Сегодня мы с вами познакомимся с программой для создания дизайна сайта, так же его редактирования Adobe Dreamweaver.
В прошлой статье « Photoshop вставка молнии на картинку » мы с вами научились создавать молнию и вставлять её в любое изображение.
Кроме этого в конце статьи я обещал показать, как можно в Photoshop создать солнце и шар, но друзья в последнее время я увлекся программой Adobe Dreamweaver и поэтому сегодня я расскажу вам о своем первом знакомстве со столь полезной программой.
Мне она интересна именно как средства для создания дизайна сайта.
В своих тренировках я использую версию CS6.
Для начала давайте в двух словах опишу программу и ее назначение:
Dreamweaver, является визуальным HTML-редактором, позволяет переключаться в режим ручного редактирования кода, осуществляя взаимосвязь между визуальным представлением страницы и ее исходным кодом.
Конечно, как и в любой другой программе изучение необходимо начинать с настроек и внешнего вида.
Настройка программы для создания сайта
Запустите редактор Adobe Dreamweaver:
Нажмите Пуск - Программы - Adobe - Adobe Dreamweaver. После запуска Dreamweaver откроется окно стартовой страницы. С его помощью можно открывать используемые файлы, создавать новые файлы, а также получить доступ к различным ресурсам программы .
В открывшемся окне с возможностью выбора дальнейших действий пользователя в разделе Создать выберите HTML
В окне программы для переключения между режимами отображения и редактирования HTML -документа предназначены три первые кнопки на панели инструментов.
Дизайн, отобразится поле документа. Все основные действия при создании и редактировании HTML-страницы производятся в поле документа.
Вот примерно так выглядит основное рабочее окно программы.
Чтобы Dreamweaver понимал русскую кириллицу необходимо сделать следующие действия:
Чтобы вызвать настройку некоторых параметров, в главном меню откройте пункт Правка , а в нем выберите пункт Настройки .
После этого на экране отобразится окно редактирования параметров. В левой части окна отображаются категории возможных настроек, а в правой – параметры выбранной категории.
Для корректного отображения HTML -документов необходимо указывать кодировку.
Теперь все вновь создаваемые HTML -документы будут поддерживать русские буквы.
Теперь давайте подготовим нашу программу для создания нового сайта:
Выполните команду Веб-сайт èНовый сайт . На экране появится диалоговое окно Настройка сайтов (менеджер сайтов) в нем содержится список созданных сайтов. Пока этот список пуст.
На вкладке Веб-сайт в поле Имя Веб-сайта введите имя сайта.
В поле Локальная папка сайта укажите путь к папке, в которой будут храниться все файлы этого сайта.
Введите название новой папки на английском языке .
При назначении имен файлам необходимо ограничиться цифрами и буквами латинского алфавита и использовать символы только нижнего регистра.
Два раза щёлкните левой кнопкой мыши на созданной папке.
Откроется окно редактора.
В верхней правой части редактора Дизайнер выберите из выпадающего списка вариант настройки рабочего окна Классический.
А теперь давайте приступим к тестовому заданию:
В поле Название введите название страницы для браузера, например, Авторское право
Сделайте разметку главной страницы сайта с помощью таблицы :
Выполните команду Вставка - Таблица. В окне Таблица введите:
В поле Строки количество строк таблицы = 3
В поле Столбцы – количество столбцов таблицы = 2
В поле Ширина таблицы – ширина таблицы = 100 %
Остальные параметры оставьте без изменений.
Объедините ячейки первой строки таблицы, режим HTML выделите всю строку и нажмите на кнопку Объединить выбранные ячейки в диапазон на панели свойств; (или выбрать одноименную команду из контекстного меню).
Или выберите команду меню Изменить - Таблица - Объединить ячейки . То же выбрать из контекстного меню.
Или нажать сочетание клавиш Ctrl+Alt+M.
Оформите строку в Панели свойств: (режим CSS )
В поле Высота – введите высоту строки таблицы = 40.
Выравнивание По горизонтали – По центру
Отметьте галочкой пункт Без переноса .
Введите текст заголовка в ячейку и отформатируйте его: Здравствуйте !
Оформите текст стилем Заголовок 1 . Выделите его или просто установите курсор в любое место
Выберите команду меню Формат - Формат абзаца - Заголовок 1 .
Эти действия можно выполнить из контекстного меню Форматирование абзаца. Или в Панели свойств перейти в режим HTML и выбрать из выпадающего меню Формат è Заголовок 1.
Чтобы выбрать цвет текста, откройте Свойства страницы внизу рабочего окна редактора, выберите категорию Внешний вид (HTML) и в строке Текст выберите желтый цвет для текста.
Заполните ячейку таблицы черным или темно-серым цветом:
На Панели Свойств в окне Фон для определения цвета фона ячейки таблицы, выберите черный цвет из палитры.
Сохраните страницу под именем index.
Посмотрите страницу в браузере.
Для этого в панели Документ щелкните на кнопке Просмотр и отладка в браузере . Можно также выбрать клавишу на клавиатуре F12
Заполните нижние ячейки таблицы ( сведения об авторских правах ):
По аналогии с верхними ячейками, оформите нижние ячейки таблицы, также объединив их в одну ( черный цвет – для фона и желтый цвет – для текста).
Введите текст : Иванов И И.
Цитирование опубликованных материалов на сайте без разрешения автора не допускается.
В поле Высота (на Панели свойств) – введите высоту строки таблицы = 40 (пикс).
Выравнивание По горизонтали - По правому краю.
Выделите фрагмент Иванов И И. Подчеркните текст, для этого выберите команду меню ФорматèСтильèПодчеркивание. Или воспользуйтесь одноименной командой контекстного меню.
Перед фамилией вставьте Специальный символ для обозначения авторских прав. Для этого:
- выберите команду меню Вставка - HTML - Специальные символыèАвторское право.
- на вкладке Текст панели Инструментария объектов кнопка Знакиè Авторское право.
Заполните левую ячейку таблицы (ссылки)
В поле Ширина введите ширину ячейки = 100 (пикс) . или отметьте ширину ячейки с помощью линейки, переместив ее на границу равную 100 пикс.
Выравнивание По горизонтали - По центру
По вертикали – По верхнему краю.
Вставьте в левый столбец ссылки Увлечения, Проекты, Ссылки, Обо мне
Для того, чтобы гиперссылки открывали соответствующие Web-страницы в нужном вам фрейме, надо правильно установить параметры Цель (цели гиперссылок).
В выпадающем списке Цель есть разные значения параметра:
Blank – загружает страницу в новом окне Web-обозревателя;
Parent и top - загружает страницу в само окно обозревателя, т.е. страница заменит собой весь набор фреймов.
Self - загружает страницу в текущий фрейм (в котором находится гиперссылка)
Заполните основное содержимое – средняя ячейка таблицы.
Выравнивание По горизонтали - По левому краю
По вертикали – По верхнему краю.
Меня зовут Иванов Иван Иванович. Я вольный Web-дизайнер. А это мой личный Web-сайт, который я сделал сам в программе Dreamweaver.
Оформите стилем Заголовок 2 , в Панели свойств перейти в режим HTML и выбрать из выпадающего меню Формат è Заголовок 2.
Введите приведённые ниже строки маркированного списка и оформите стилем Заголовок 3.
Сделайте выравнивание по левому краю
Создайте маркированный список (перечисления), предварительно выделив текст и нажав на кнопку Неупорядоченный список на Панели свойств :
На этом сайте вы можете прочитать:
§ о моих увлечениях
§ о выполненных мной проектах
§ подробнее обо мне, любимом
Чтобы изменить вид маркеров, выделите маркированный список и выберите команду меню Формат - Список - Свойства.
В окне Свойства списка в строке Стиль из выпадающего списка выберите один из вариантов маркера.
То же можно выбрать из контекстного меню маркированного списка.
Перед текстом: На этом сайте вы можете прочитать: вставьте горизонтальную разделяющую линию.
- выберите команду меню Вставка - HTML - Горизонтальная линия.
Или вставьте линию с помощью тега HR , выделите ее и на Панели с войства можно отредактировать ширину горизонтальной линии. (Цвет для линии можно задать с помощью опции тега HR – color).
Выровняйте линию по Центру , щелкнув по кнопке Align Center на панели Properties .
По аналогии с предыдущими ячейками, оформите среднюю ячейку таблицы (черный цвет – для фона и желтый цвет – для текста).
В итоге должно получится вот такое чудо:
Для тех кому мало текстовой части, и он хотел бы видеть больше скриншотов процесса обучения пишите в комментариях и если желающих наберется много, то я подготовлю статью с картинками.
Если Вам, как и мне интересно постоянно изучать новое подписывайтесь на мой канал и давайте учится вместе!
Читайте также: