Техника Web-дизайна для студента
Создание таблицы в режиме компоновки страницы
Как уже отмечалось, кроме традиционного использования таблиц для вывода регулярных данных, они широко применяются для размещения на странице различных объектов (фрагментов текста, рисунков) в произвольном порядке, предусмотренном дизайном страницы, что было бы невозможно сделать другими средствами языка HTML. Программа Dreamweaver предоставляет для этой цели большие возможности. Для перехода в режим компоновки страницы необходимо нажать кнопку Layout (Компоновка) в группе инструментов Layout (Компоновка) панели Insert (Вставка), после чего становятся активными кнопки Layout Table (Компоновка таблицы) и Draw Layout Cell (Рисование ячейки) справа от кнопки Layout (Компоновка) (рис. 4.11).
|
Рис. 4.11. Группа инструментов Layout панели Insert |
Нажав на кнопку Q — Layout Table (Компоновка таблицы), можно растянуть прямоугольную рамку контура, внутри которого будут размещаться элементы таблицы. Если не выполнить данные действия, то для размещения объектов станет доступно все рабочее поле программы.
|
Рис. 4.12. Размещение объектов на странице в произвольных местах с помощью таблицы |
Draw Layout Cell (Рисование ячей -
После нажатия кнопки ки) нужно растянуть прямоугольную рамку вокруг области, в которую мы хотим поместить какой-либо объект. Внутри созданной области активизируется мерцающий курсор, предлагающий приступить к набору текста или вставке рисунка. Подведя указатель мыши к границе созданной области, нажав и удерживая кнопку мыши, ее можно переместить в другое место. Использование появившихся маркеров позволяет изменить размер выбранной области.
Рассмотрим компоновку страницы на следующем примере. Предположим, что размер страницы 500 х 350 пикселей. На странице предполагается разместить 5 рисунков размером 150 х 100 пикселей и текстовый заголовок. В окне браузера страница должна выглядеть как на рис. 4.12.
Начнем с построения рамки, ограничивающей размер страницы. Нажмем на кнопку Layout Table (Компоновка таблицы) и в рабочем поле растянем рамку нужного размера. При построении размер рамки указывается в строке состояния. Если после построения требуется изменить размер, то это легко сделать с помощью панели Properties (Свойства), которая в этом случае приобретает вид, приведенный на рис. 4.13.
|
Рис. 4.13. Панель Properties в режиме изменения свойств таблицы, используемой для компоновки |
Кроме изменения размеров, с помощью панели можно задать цвет фона (палитра Bg), изменить расстояние между границами ячейки и ее содержимым (CellPad) и расстояние между ячейками (CellSpace). В режиме компоновки поля CellPad и CellSpace обычно имеют нулевые значения.
Нажав кнопку Draw Layout Cell (Рисование ячейки), растянем шесть прямоугольных рамок (одну для текста и пять для рисунков). На этом этапе расположение рамок большого значения не имеет. Однако следует обратить внимание, чтобы размеры рамок для рисунков были немного меньше размеров рисунка. В дальнейшем, после вставки рисунков и перемещении их на заданные места, размеры рамок ячеек таблицы установятся в соответствии с размерами рисунков. Панель Properties (Свойства) в случае выделения одной из ячеек приобретает вид как на рис. 4.14.
|
Рис. 4.14. Панель Properties в режиме изменения свойств ячеек таблицы, используемой для компоновки |
Поля Width и Height позволяют изменить размеры ячейки, поле Bg с кнопкой палитры — цвет фона ячейки, списки Horz и Vert — выбрать способ выравнивания содержимого ячейки по горизонтали и вертикали. Установка флажка No wrap запрещает разбиение текста на строки.
Результат размещения ячеек таблицы показан на рис. 4.15.
|
Рис. 4.15. Результат создания таблицы с ячейками для размещения объектов страницы |
|
Рис. 4.16. Результат компоновки страницы с использованием группы инструментов Layout |
Теперь можно приступать к заполнению ячеек. В любые 5 ячеек вставим рисунки, предварительно устанавливая курсор в соответствующую ячейку и используя команду меню Insert | Image (Вставка | Рисунок). В последнюю ячейку введем текст. Выделим текст и на панели Properties (Свойства) зададим гарнитуру шрифта Monotype Corsiva (список Font), формат шрифта Heading 1 (список Format). Выделим рамку вокруг ячейки, изменим ее размеры таким образом, чтобы текст располагался в две строки и размеры ячейки не были бы слишком велики. При необходимости можно осуществить центрирование текста по горизонтали и вертикали, выбрав при выделенной рамке из списков Hors и Vert панели Properties (Свойства) значения Center и Middle. После заполнения ячеек общий размер таблицы может измениться, поэтому перед началом перемещения ячеек необходимо выделить рамку вокруг таблицы и на панели Properties (Свойства) изменить размеры, если в этом есть необходимость. Для перемещения ячеек можно использовать не только мышь, но и клавиши управления курсором (если ячейка выделена).
Результат компоновки показан на рис. 4.16. Как видим, программа Dreamweaver создала множество пустых ячеек, назначение которых расположить заполненные ячейки в нужных местах страницы. Для создания такой таблицы вручную потребовалось бы много времени.
|
|
