На этом шаге мы рассмотрим размещение текста поверх изображения.
Если необходимо совместить в одной зоне Web-страницы текст и графическое изображение, удобно воспользоваться средствами создания таблиц.
Чтобы расположить текст поверх графического изображения, можно воспользоваться следующим алгоритмом:
- построить таблицу с единственной строкой, содержащей одну ячейку. Параметрам BORDER, CELLPADDING и CELLSPACING необходимо присвоить значения 0, чтобы удалить обрамление и участки свободного пространства снаружи и внутри ячейки. В этом случае вам удастся добиться более точного совмещения текста и графики;
- необходимо обеспечить равенство размеров ячейки и графического изображения, подлежащего размещению в этой ячейке. Для этого следует воспользоваться параметрами WIDTH и HEIGHT, которые дают возможность определения значений ширины и высоты ячейки, выраженных в пикселях;
- параметром BACKGROUND задать в качестве графического фона ячейки выбранное изображение.
- в промежутке между тэгами
и следует набрать нужный текст. Используя параметр VALIGN можно разместить этот текст в нужной части ячейки.
Замечание. Если изображение необходимо заключить в рамку, в тэге <TABLE> следует присвоить ненулевое значение ширины рамки, выраженное в экранных пикселях.
Приведем пример использования данного алгоритма:
<HTML>
<HEAD>
<TITLE> Совмещение текста и рисунка. </TITLE>
</HEAD>
<BODY TEXT=Red>
<TABLE BORDER=10 CELLSPACING=0 CELLPADDING=0>
<TD WIDTH=350 HEIGHT=263 BACKGROUND=IMG126.JPG VALIGN=BOTTOM ALIGN=CENTER>
<FONT SIZE=7>Привет!</FONT>
</TD>
</TABLE>
</BODY>
</HTML>
Рис.1. Результат просмотра HTML-документа в браузере
Текст этого HTML-документа вместе с графическим файлом можно взять здесь.
Вместо простого текста на рисунке можно отобразить гиперссылку.
Со следующего шага мы начнем рассматривать создание динамических HTML-страниц.
