Текст книги "Интернет. Быстрый старт"

Следующая триада кнопок посвящена точному позиционированию рисунка на странице и изменению его расположения относительно текста. Что касается точного позиционирования рисунка, необходимо отметить, что сам по себе HTML не имеет подобных механизмов. Однако FrontPage позволяет нам сделать это. Для проведения позиционирования рисунка достаточно нажать кнопку Position Absolutely (Абсолютное позиционирование). После того как только курсор мыши попадает на наше графическое изображение, он принимает стандартную форму курсора для перемещения объекта, т. е. стрелки с четырьмя наконечниками. Теперь можно нажать левую кнопку мыши и, не отпуская ее, оттранспортировать рисунок точно в то место, которое вы для него предназначили. Необходимо отметить, что эта кнопка является переключателем. Пока она находится в нажатом состоянии, данный объект будет точно позиционирован на странице. При отключении этого режима он вернется на свое исходное место. Если при нажатой кнопке вы заглянете на страницу HTML, то увидите, что тэг, отображающий рисунок, заключен в тэги <span> и </span>, причем у первого тэга есть еще и параметр. Весь этот тэг обычно выглядит так:

<span style="position: absolute; left: 74; top: 32">

В параметре style задается тип позиционирования (в данном случае по абсолютным координатам страницы) и координаты верхнего левого угла рисунка. Хотелось бы обратить внимание, что этот тэг может не поддерживаться всеми браузерами, поэтому рекомендуется применять его с определенной осторожностью. Если говорить честно, то FrontPage максимальным образом приспособлен именно к Internet Explorer, что, впрочем, вполне объяснимо. Но это накладывает определенные ограничения. Некоторые особо продвинутые возможности могут не распознаваться другими браузерами, и создаваемая страница не будет выглядеть адекватно замыслу дизайнера. Следующие две кнопки Bring Forward (Переместить наверх) и Send Backward (Переместить вниз) позволяют установить положение рисунка поверх или позади текста соответственно. При этом их использование включает режим абсолютного позиционирования, и в тэге <span> у параметра style появляется новая константа с именем z-index, указывающая положение картинки в слоях страницы.

Далее расположены четыре кнопки, которые позволяют вращать рисунок вправо и влево и отражают его относительно вертикальной и горизонтальной осей. При этом нажатие данных кнопок вносит изменения именно в рисунок, а не в HTML-код, отображающий его. Кнопки Rotate Left (Повернуть влево) и Rotate Right (Повернуть вправо) вращают рисунок влево и вправо на 90°. Кнопки Flip Horizontal (Отразить по горизонтали) и Flip Vertical (Отразить по вертикали) отражают рисунок относительно его центральных осей, вертикальной и горизонтальной, соответственно.

Еще одна группа кнопок предназначена для регулировки яркостных и контрастных параметров рисунка. Кнопки More Contrast (Увеличить контрастность) и Less Contrast (Уменьшить контрастность) повышают и понижают степень контрастности рисунка. Следующие две кнопки More Brightness (Увеличить яркость) и Less Brightness (Уменьшить яркость) делают то же самое с яркостью. Все эти изменения происходят именно с рисунком и сохраняются во временном файле. При сохранении страницы все подобные изменения записываются в основной графический файл.

Очередной блок кнопок тоже применяется для обработки всего рисунка. Так, кнопка Crop (Обрезка) предназначена для изменения размеров рисунка. Точнее, для уменьшения его путем обрезания границ. При нажатой кнопке Crop (Обрезка) курсор мыши меняет свою форму, и вы можете обрезать картинку так, как вы этого хотите. Повторное нажатие данной кнопки возвращает вас в обычный режим. Кнопка Set Transparent Color (Установить прозрачный цвет) применяется для того, чтобы один из цветов рисунка сделать прозрачным. Данную кнопку лучше всего использовать на рисунках, хранимых в GIF-формате. После нажатия на кнопку курсор принимает форму специализированного указателя. Если вы в это время щелкнете мышью на рисунке, то FrontPage определит цвет того пиксела, на который указывал курсор, и все пикселы рисунка этого цвета будут перекрашены в так называемый «прозрачный» цвет. Для чего это нужно, вы узнали выше. Кнопка с именем Black and White (Черно-белый), как нетрудно догадаться, переводит рисунок в черно-белый формат. Или, если быть точным, отображает его при помощи градаций серого цвета. Кнопка Wash Out (Подложка) как бы «выстирывает» рисунок, заставляя все его цвета поблекнуть и стать приглушенными. Подобные рисунки очень хорошо работают в качестве подложек на страницах. Кстати, в рабочих панелях русскоязычного Microsoft Office подобная кнопка так и называется – «подложка». Кнопка Bevel (Рамка) добавляет к вашему рисунку маленькую угловую рамку, как бы приподнимая его над общим уровнем страницы. Хотя, на наш взгляд, эффект несколько сомнительный. А вот последняя кнопка Resample (Пересчитать) чрезвычайно полезна. Дело в том, что при изменении общих размеров рисунка при помощи перетаскивания мышью ограничивающих маркеров пропорции рисунка могут быть несколько искажены. Так вот, эта кнопка позволяет очень хорошо восстановить нарушенные пропорции рисунка в измененных границах. Откровенно говоря, мы настоятельно рекомендуем пользоваться этим инструментом каждый раз, когда размер рисунка был изменен.

Следующий блок кнопок предназначен для реализации технологии сегментированной графики. Первая кнопка Select (Выбор) чаще всего находится в нажатом состоянии. Она переводит FrontPage в обычный режим выбора элементов. Как правило, эту кнопку приходится нажимать для того, чтобы отменить ошибочное нажатие других кнопок этой группы. Следующие три кнопки предназначены для создания на рисунке так называемых «горячих областей» (hotspots). То есть участков рисунка, к которым будут привязаны гиперссылки. Кнопка Rectangular Hotspot (Прямоугольный сегмент) создает горячую область прямоугольной формы. При нажатии на нее курсор мыши, находясь на территории рисунка, приобретает форму карандаша. Нажатие левой кнопки мыши фиксирует один угол прямоугольника. Затем, не отпуская нажатой кнопки, необходимо перемещать мышь, одновременно растягивая «горячую область» до необходимых размеров. Для фиксации размера достаточно отпустить кнопку. После определения размера «горячей области» активизируется уже знакомое вам диалоговое окно для создания гиперссылки. После этого «горячая область» становится стандартным объектом со своими свойствами. Так же, как и все остальные объекты, «горячие области» могут перемещаться проектировщиком, их границы могут быть изменены, сами они могут быть удалены. Точно таким же образом действуют и две следующие кнопки – Circular Hotspot (Круглый сегмент) и Polygonal Hotspot (Полигональный сегмент). Они создают «горячие области» в форме круга и многоугольника. А последняя кнопка в этой группе с названием Highlight Hotspots (Подсветка сегментов) предназначена для того, чтобы проектировщик Web-страницы мог увидеть все «горячие области», размещенные им на рисунке. При нажатии на кнопку само изображение рисунка исчезает, остаются лишь его контуры и границы всех «горячих областей». Таким образом, вы получаете очень удобный режим работы, в котором можно посмотреть, как размещены «горячие области», не перекрываются ли они и т. д.

Установите на свой рисунок три "горячие области" различных форм. Одна область будет прямоугольной, вторая – круглой, а границы третьей будут очерчены многоугольником. Рассмотрим реализацию технологии "сегментированной графики" с точки зрения HTML. При просмотре HTML-кода вы обнаружите следующий набор тэгов:

<map name="FPMap0">

<area href="2.htm" shape="rect" coords="6, 4, 46, 20">

<area href="3.htm" shape="circle" coords="54, 44, 18">

<area href="4.htm" shape="polygon" coords="100, 17, 134, 27, 128, 53, 98, 53, 82, 29"></map>

<img border="0" src="images/Hlplogo.gif" usemap="#FPMap0" width="178" height="73">

И вот здесь уже придется внимательно разбираться с кодом. Прежде всего надо отметить, что этот блок состоит из двух частей. Первая часть, заключенная между тэгами <тар> и </тар>, задает карту сегментов гиперссылок, тех самых «горячих областей». Вторая содержит тэг, реализующий вставку изображения и привязку карты к нему. У объявляющего тэга первой части есть параметр name, который задает имя карты. Потом это имя будет использовано во второй части конструкции. Между тэгами <тар> и </тар> располагаются тэги <агеа>, каждый из которых объявляет одну область. Параметр href, как нетрудно догадаться, задает адрес гиперссылки. Параметр shape предназначен для определения формы «горячей области», а параметр coords задает ее координаты в рисунке относительно верхнего левого угла. Из кода видно, что у этого параметра есть три значения. Значение rect говорит о том, что сегмент гиперссылки имеет форму прямоугольника, а в качестве значения параметра coords записывается строка, состоящая из четырех чисел, разделенных запятыми. Это координаты верхнего левого и нижнего правого угла прямоугольника. В том случае, если горячая область имеет вид окружности, значение параметра shape будет «circle». Впрочем, браузер сможет правильно понять и значение «circ». При этом в параметре coords передается три числа: параметры центра окружности и ее радиус. И наконец, значения «polygon» или просто «poly» задают сегмент гиперссылки в виде многоугольника. В этом случае в параметре coords записывается строка, состоящая из пар значений координат вершин многоугольника.

С первой частью, определяющей саму карту гиперссылок, мы разобрались. Вторая намного проще. На самом деле это обычный тэг вставки изображения, только теперь там есть еще один параметр – usemap. В качестве значения этому параметру передается строка с именем подключаемой карты гиперссылок. Как вы помните, это имя задается в начальном тэге <тар>.

В заключение рассмотрим лишь одну-единственную кнопку, расположенную в самом конце инструментальной панели Pictures (Рисунки). Она носит название Restore (Восстановить) и позволяет сразу отменить все изменения рисунка, которые произошли с момента последнего сохранения. Конечно, для этой же цели можно воспользоваться стандартными средствами отмены действий, но это не всегда удобно. Например, когда объем изменений был слишком велик или после работы с изображением вы успели сделать что-то еще, не относящееся к самой картинке. Именно в таких случаях и стоит обращаться к этой кнопке.

Мультимедийные возможности

Под мультимедийными возможностями мы будем понимать размещение аудио– и видеоклипов на Web-страницах. К сожалению, простых способов вставки звука в страницу таким образом, чтобы удаленный пользователь мог самостоятельно решать, когда ему запустить воспроизведение аудиофрагмента, не существует. Чаще всего используется фоновая музыка, которая начинает воспроизводиться в момент загрузки страницы удаленным пользователем. Это удовольствие считается свойством страницы, поэтому установку фонового аудиоклипа необходимо осуществлять при помощи команды меню File/Properties (Файл/Свойства). При этом активизируется диалоговое окно Page Properties (Свойства страницы). Интересующие нас органы управления размещаются на вкладке General (Общие), которая показана на рис. 8.10, в группе Background sound (Фоновый звук).

Рис. 8.10. Вкладка General диалогового окна Page Properties

В поле Location (Местонахождение) вводится местонахождение искомого музыкального файла (поддерживается немало форматов). Если трудно ввести местонахождение файла по памяти, можно воспользоваться кнопкой Browse (Обзор), которая предоставляет стандартный диалог для поиска файла. Помимо этого, есть и еще некоторые свойства у подключаемого видеофрагмента. Вы можете определить, сколько раз он будет проигрываться при загрузке страницы или вообще зациклить воспроизведение, и этот фрагмент будет начинаться снова и снова. Для указания количества повторов есть поле ввода Loop (Цикл), а для того чтобы поставить клип на постоянное воспроизведение, достаточно установить флажок в переключателе Forever (Постоянно). Если вы укажете все необходимые данные и нажмете кнопку ОК для подтверждения изменений, то, перейдя на страницу HTML, вы увидите, что перед тэгом </head>, закрывающим область заголовка, вставлен тэг cbgsound sгс="Canyon.mid" ioop="-l">. Объявление фонового аудиофрагмента делается при помощи тэга <bgsound>. При этом у него присутствует уже знакомый вам параметр src, в качестве значения которого передается местонахождение подключаемого звукового файла. А при помощи параметра loop указывается количество повторов аудиоклипа. Если его значение установлено в -1, то фрагмент будет воспроизводиться постоянно, в ином случае браузер распознает число, подставленное в качестве значения этого параметра, и проиграет клип положенное число раз.

Вставка видеофрагмента осуществляется при помощи команды меню Insert/Picture/Video (Вставка/Рисунок/Видео). При этом активизируется стандартный диалог поиска и вставки файла с объектом. FrontPage поддерживает файлы формата Video for Windows (расширение avi), Windows Media (asf). Real Video (ram и га). Отрабатывается вставка видеофрагмента при помощи тэга <img dynsrc="DelpCool.avi">. То есть, по сути, вставка видеоклипа является вариантом вставки обычного изображения, но имеются и свои отличия. Так, если вы попробуете установить свойства для вставленного видеоклипа при помощи команды контекстного меню Picture Properties (Параметры рисунка) или при помощи команды Format/Properties (Формат/Свойства) в тот момент, когда вставленный видеоклип выделен, активизируется диалоговое окно Picture Properties (Параметры рисунка), но при этом на первый план выйдет вкладка Video (Видео), чей внешний вид показан на рис. 8.11.

Рис. 8.11. Вкладка Video диалогового окна Picture Properties

В поле ввода Video source (Источник видео) указывается расположение файла с видеофрагментом. Естественно, эта информация поддается редактированию как путем прямого ввода информации в поле, так и при помощи кнопки Browse (Обзор). А вот сразу под полем ввода находится переключатель Show controls in Browser (Показывать органы управления в браузере). В том случае, если он будет включен, при просмотре страницы удаленным пользователем под видеоклипом будут находиться органы управления воспроизведением, т. е. кнопка запуска/паузы и индикатор положения. Количество повторов видеоклипа устанавливается в поле с названием Loop (Цикл). Пауза между циклами воспроизведения устанавливается в поле Loop delay (Задержка цикла). Время паузы измеряется в миллисекундах. Ну а в том случае, если вы хотите, чтобы клип воспроизводился постоянно, необходимо установить флажок в переключателе Forever (Постоянно). И что самое интересное, вы можете указать, когда должен начать воспроизводиться видеоклип. В группе Start (Начало) находятся два независимых переключателя, с помощью которых можно установить правила воспроизведения. Так, если флажок по умолчанию стоит в переключателе On file open (При открытии файла), то воспроизведение начнется сразу после загрузки страницы в браузер удаленного пользователя. Если же выбран вариант On mouse over (При прохождении мыши), то запуск видеоклипа происходит в тот момент, когда на нем появляется курсор мыши. Причем, необходимо отметить, что это независимые переключатели, т. е. вы можете выбрать любую комбинацию. Правда, в том случае, если ни один переключатель не выбран, стоит добавить органы управления видеоклипом, потому что иначе запустить его не будет возможности.

Теперь давайте узнаем, как эти свойства указываются при помощи HTML. Если вы установите данные свойства и посмотрите на страницу HTML, то увидите следующий HTML-код:

<img border="0" dynsrc="images/Cool.avi" start="fileopen,mouseover" controls width="123" height="133" loop="2" loopdelay="5">

Разберемся со всеми этими параметрами. Параметр border, как и прежде, показывает толщину рамки, ограничивающей вставленный клип. Параметр start предназначен для указания события, после которого начнется воспроизведение видеофрагмента. В данном случае, мы указали сразу два варианта: по загрузке файла и в момент наведения курсора мыши на территорию клипа. Параметр controls указывает на то, что под видеофрагментом будут расположены органы управления им. Параметры width и height, как обычно, указывают ширину и высоту области воспроизведения клипа. Параметр loop содержит в качестве значения количество повторений фрагмента, а его сосед loopdelay – паузу между отдельными циклами воспроизведения. Необходимо отметить, что в том случае, если вы хотите добиться постоянного воспроизведения видеоклипа, в параметре loop следует указать значение infinite.

Исходя из того, что видеоклип считается подобием графического изображения, к нему можно присоединить гиперссылку, реализация которой не будет отличаться от варианта создания гиперссылки на обычном рисунке. Помимо этого, можно указать выравнивание видеоклипа и текста, расположенного рядом с ним, при помощи органов управления вкладки Appearance (Расположение) окна Picture Properties (Параметры рисунка). Параметры, указывающие тип выравнивания, ничем не будут отличаться от параметров обычных графических изображений.

Таблицы

Таблицы являются одним из самых важных инструментов при построении Web-страниц. Помимо размещения информации в табличной форме, они активно применяются для правильного позиционирования текста и графики. То есть, необходимые блоки текста и графики размещаются в ячейках таблицы, а сама таблица делается невидимой. Основная часть инструментов для работы с таблицами сосредоточена на инструментальной панели Tables (Таблицы), которая визуализируется при помощи команды меню View/Toolbars (Вид/Панели инструментов). Большая часть средств для работы с таблицами, размещенная на этой инструментальной панели, дублируется командами меню Table (Таблица). Для размещения таблицы на создаваемой Web-странице необходимо выполнить команду меню Table/Insert Table (Таблица/Добавить таблицу). При этом активизируется диалоговое окно Insert Table (Добавление таблицы), показанное на рис. 8.12.

Рис. 8.12. Диалоговое окно Insert Table

Перед созданием таблицы необходимо установить количество ее строк и столбцов при помощи полей редактирования Rows (Строки) и Columns (Столбцы), соответственно. Остальные органы управления опциональны. Выпадающий список Alignment (Выравнивание) предназначен для установки выравнивания таблицы на странице. Поле Border size (Размер границы) позволяет установить толщину линий, ограничивающих каждую ячейку. По умолчанию она составляет один пиксел. Кстати, если вы установите нулевое значение толщины, то границы будут не видны, а табличная структура останется. Поле Cell padding (Отбивка ячейки) позволяет задавать расстояние между краями ячейки таблицы и содержимым этой ячейки. Данная величина не может быть индивидуальной для каждой ячейки отдельно. Это, скорее, свойство всей таблицы. Значение в поле Cell spacing (Отступ ячейки) указывает расстояние между рамкой таблицы и ячейками самой таблицы. Переключатель Specify width (Установить ширину) позволяет использовать возможность принудительного указания ширины таблицы относительно ширины страницы. Причем, ширина таблицы может указываться как в пикселах, так и в процентах от ширины окна просмотра браузера удаленного пользователя. Если вы зададите при помощи органов управления диалогового окна Insert Table (Добавление таблицы) некоторые значения, отличные от установленных по умолчанию, и нажмете кнопку ОК, то соответствующая таблица появится на странице. Вид страницы с встроенной в нее таблицей показан на рис. 8.13.

Рис. 8.13. Внешний вид Web-страницы со встроенной таблицей

Подобная таблица реализуется при помощи следующего HTML-кода:

<div align="center">

<center>

<table border="2" width="80%" cellpadding="3" cellspacing="3">

<tr>

<td width="33 %">1</td>

<td width="33 %">2</td>

<td width="34 %">3</td>

</tr>

<tr>

<td width="33 %">4</td>

<td width="33 %">5</td>

<td width="34 %">6</td>

</tr>

</table>

</center>

</div>

Тэги <div> и <center> с их закрывающими близнецами предназначены для указания выравнивания таблицы относительно Web-страницы. В том случае, если в списке Alignment (Выравнивание) при создании таблицы было бы выбрано значение Default (По умолчанию), они бы вообще не появились. Сама таблица объявляется тэгом <table>, а закрывается его парой </table>. Внутри этого блока поочередно объявляется каждая строка при помощи тэгов <tr> и </tr>. И уже внутри каждой строки при помощи тэгов <td> и </td> объявляются ячейки, составляющие столбцы. У каждого объекта, будь то таблица целиком, строка или ячейка, есть свои свойства, а значит, и параметры для их указания, входящие в состав тэгов. Воспользуемся стандартной схемой работы и узнаем, как объявить эти свойства, пользуясь возможностями FrontPage 2000, а затем посмотрим, как эти свойства реализуются при помощи HTML.

В тэге <table> есть параметр border, который указывает толщину рамки в пикселах. Следующий параметр width говорит о том, что таблица будет занимать 80 % от ширины окна просмотра браузера. Параметр ceiipadding повторяет имя одного из полей ввода диалогового окна Insert Table (Добавление таблицы). Следовательно, именно в нем указывается расстояние в пикселах между краями ячейки и ее содержимым. Значение параметра cellspacing задает расстояние между внешней рамкой таблицы и ячейками таблицы. Так как все столбцы и строки объявляются внутри табличного HTML-блока, нет необходимости указывать их количество в тэге <table>, однако знать параметры, позволяющие это делать, – необходимо. Для количества столбцов используется параметр cols.

Теперь начнем устанавливать свойства таблицы. Для этого можно воспользоваться командой меню Table/Properties/Table (Таблица/Параметры/Таблица) или Format/ Properties (Формат/Параметры). Впрочем, того же самого результата можно добиться, используя команду Table Properties (Параметры таблицы) из контекстного меню. Для изменения и установки свойств таблицы предназначено одноименное диалоговое окно Table Properties (Параметры таблицы), показанное на рис. 8.14.

Рис. 8.14. Диалоговое окно Table Properties

Список Alignment (Выравнивание) и переключатель Specify width (Указать ширину) вам уже знакомы, поэтому второй раз они здесь не рассматриваются. Список Float (Позиционирование) предназначен для указания позиции таблицы относительно другого текста, расположенного на странице, но не входящего в таблицу. Если вы выберете значение Left (Слева), то таблица будет прижата к левому краю, а текст будет расположен справа. Для этого в тэг <table> вставляется параметр align. В принципе, этот параметр предназначен для указания выравнивания самой таблицы. В данном случае для нее было указано выравнивание по центру, которое осуществлялось тэгами <center> и </center>. Но параметр align берет управление на себя и напрямую влияет на расположение таблицы, т. к. он находится в тэге <table>.

Группа Specify height (Указать высоту) позволяет указать высоту каждой строки таблицы. Как обычно, этот выбор влияет на все строки сразу. В HTML для указания высоты строк применяется параметр height, входящий в тэг <table>.

Блок Borders (Границы) содержит органы управления, осуществляющие правильное указание свойств внешней границы таблицы. Поле Size (Размер), как вы уже знаете, позволяет указывать толщину внешней рамки. Остальные три списка этой группы ответственны за цветовое оформление рамки. Если для всей границы планируется использовать один и тот же цвет, то приметается список Color (Цвет). В HTML используется параметр bordercolor. В том случае, если вы, к примеру, хотите сделать границу розового цвета, вам необходимо воспользоваться параметром bordercolor="#FF00FF". Однако у нас есть возможность несколько более изощренного цветового оформления границы. В случае трехмерных органов управления рамка для них делается двух цветов: левая и верхняя граница – более светлые, а правый нижний угол – более темный. Для подобного оформления используют два списка: Light border (Светлая граница) и Dark border (Темная граница), для указания светлого и темного цвета рамки, соответственно (параметры bordercolorlight и bordercolordark). При этом необходимо учитывать, что если какой-либо из этих цветов или оба сразу не указаны, то для их замены используется основной цвет границы, выбранный в списке Color (Цвет) и указанный в параметре bordercolor. Но если они оба явно указаны, основной цвет вообще не будет применяться.

Теперь перейдем к оформлению фона таблицы. Для этого используется группа органов управления Background (Фон). В списке Color (Цвет) можно установить цвет фона таблицы. В HTML этот цвет устанавливается при помощи параметра bgcolor. Так, если вы захотите установить для таблицы фон светло-зеленого цвета, который FrontPage называет лаймовым (lime), то этот параметр тэга <table> примет вид bgcolor="#00FF00". В том случае, если вместо однотонного фона вы хотите установить какой-либо рисунок в виде подложки таблицы, необходимо установить флажок галочку в переключателе Use background picture (Использовать рисунок фона) и в поле ввода указать местонахождение графического файла. Для этого можно воспользоваться кнопкой Browse (Обзор). Вставка графического файла в качестве фона производится при помощи параметра background, в качестве значения которого указывается местонахождение файла.

На этом перечень свойств таблицы в целом, которые предлагаются нам FrontPage 2000, заканчивается, но на самом деле их немного больше, а значит, есть и другие параметры тэга <table>, которые здесь не рассматривались. Но в нашу задачу входит не рассмотрение языка HTML как такового, а изучение средств проектирования Web-страниц. Поэтому если в ходе повествования мы встретимся с новыми возможностями, то тогда их и рассмотрим. А пока перейдем к свойствам отдельных ячеек.

Свойства ячеек, как отдельной ячейки, так и группы, редактируются при помощи команды меню Table/Properties/Cell (Таблица/Параметры/Ячейка) или команды контекстного меню Cell Properties (Параметры ячейки). При этом активизируется диалоговое окно Cell Properties (Параметры ячейки), показанное на рис. 8.15.

Рис. 8.15. Диалоговое окно Cell Properties

Как вы уже знаете, ячейки таблицы объявляются при помощи тэгов <td>. Следовательно, для указания свойств ячеек будут использоваться параметры именно этого тэга. Блок Layout (Раскладка) содержит органы управления, отвечающие за внешний вид расположения ячейки и отображение ее содержимого. Выпадающие списки Horizontal alignment (Горизонтальное выравнивание) и Vertical alignment (Вертикальное выравнивание) позволяют указывать выравнивание содержимого ячейки (это не обязательно должен быть текст) по горизонтали и вертикали, соответственно. Так, если вместо значений по умолчанию (Default) вы укажете горизонтальное выравнивание содержимого по ширине ячейки – Justify, а по вертикали содержимое ячейки прижмете к ее нижнему краю – Bottom, то при просмотре HTML-кода, реализующего эту ячейку, вы увидите тэг <td valign="bottom" align="justify">. Здесь ячейка объявляется при помощи тэга <td>, а уже в этот тэг вписываются параметры valign и align, которые и указывают вертикальное и горизонтальное выравнивание содержимого ячейки. Варианты горизонтального выравнивания вы знаете и так. Это прижатие к левому и правому краю, центрирование и растяжка по ширине. Для вертикального выравнивания применяются варианты смещения содержимого вверх (значение параметра valign – top), выравнивание по центру ячейки (middle), по нижней границе ячейки (знакомый вам bottom) и выравнивание по базовой линии текста (baseline). Помимо выравнивания содержимого ячейки, вы можете принудительно установить ее размеры. Для этого необходимо установить флажки Specify width (Установить ширину) и Specify height (Установить высоту), которые ответственны за указание размеров ячейки по горизонтали и по вертикали, соответственно. Останется только указать размеры в полях ввода и единицы измерения. В качестве единиц измерения традиционно предлагаются пикселы и проценты. В данном случае, естественно, используются проценты от размеров таблицы. В том случае, если размеры ячейки принудительно установлены, тэг, объявляющий ячейку, принимает вид <td width="3i ^c e" height="30">. В этом примере видно, что ширина ячейки устанавливается при помощи параметра width и составляет 31 % от общей ширины таблицы. Высота ячейки задается значением параметра height, которое в данном случае равно 30 пикселам.

Теперь перейдем к полям ввода Rows spanned (Объединить строки) и Columns spanned (Объединить столбцы). С помощью этих значений можно указать, что одна ячейка будет объединять несколько соседних ячеек. Подобные ячейки часто применяются как заголовки для нескольких колонок или строк сразу. Значение в поле Rows spanned (Объединить строки) показывает, сколько соседних ячеек по вертикали будет занимать данная ячейка. Если вы растянете левую верхнюю ячейку по вертикали на две, поставив двойку в поле Rows spanned (Объединить строки), то полученная таблица будет выглядеть, как на рис. 8.16.

Рис. 8.16. Внешний вид таблицы с объединенными ячейками

Такую таблицу вы можете создать при помощи следующего HTML-кода:

<table border="3" width="43 %" cellpadding="3" cellspacing="3" bordercolor="#FF00FF" height="72" align="left" bordercolorlight="#C0C0C0" bordercolordark="#808080">

<tr>

<td width="31 %" height="24" valign="bottom" align="justify" rowspan="2">1</td>

<td width="34 %" height="24">2</td>

<td width="35 %" height="24">3</td>

</tr>

<tr>

<td width="31 %" height="30">4</td>

<td width="34 %" height="30">5</td>

<td width="35 %" height="30">6</td>

</tr>

</table>

Как видите, первая ячейка заняла весь крайний левый столбец, что было обеспечено за счет параметра rowspan="2". При этом ячейки нижней строки были смещены вправо. Так как размер таблицы был ограничен параметром width="43 %" тэга <table>, то последняя ячейка нижней строки заняла очень мало места, несмотря на то, что ей отводилось 35 % от ширины всей таблицы, что видно из тэга, объявляющего ее <td width="35 %" height="30">6</td>. Из этого следует, что те конструкции языка HTML, которые браузер не может правильно выполнить или интерпретировать, просто игнорируются.

В том случае, если вы хотите растянуть ячейку по горизонтали, следует выставить необходимое значение в поле ввода Columns spanned (Объединить колонки). При этом у тэга <td> возникнет параметр coispan.