На этой странице рассматриваются создание с помощью HTML таблицы-заголовка
и работа с изображением (рисунок как часть заголовка).
При создании заголовка WEB-страницы, когда требуется разнообразить фон различ-
ных частей текста, включить рисунок и т.п., используется построение таблицы. При
этом может возникнуть трудность при написании HTML-кода, если нужно объединить
несколько ячеек. Пусть заголовок страницы включает три ячейки посередине
(для текста) и две ячейки (для рисунка или фото) по краям. Нам потребуется таблица
из трех ячеек в центре (одна под другой) и по одной ячейке с каждого края.
Код такой таблицы (код 1):
Код 1:
<TABLE BORDER=4 BORDERCOLOR="#0000ff" WIDTH=100%">
<TD ROWSPAN=3 WIDTH=20%><FONT FACE="Courier New" SIZE="6" COLOR="#ff00ff">
<P ALIGN="CENTER">Ячейка 1<BR><FONT SIZE="4" COLOR="#b22222">(для рисунка)</TD>
<TD BGCOLOR="#ff6371" WIDTH=60%>
<FONT FACE="Courier New" SIZE="6" COLOR="#0000ff"><P ALIGN="CENTER">ячейка 2<FONT SIZE="4"> (для текста)
</FONT></TD>
<TD ROWSPAN=3><FONT FACE="Courier New" SIZE="6" COLOR="#ff00ff">
<P ALIGN="CENTER">Ячейка 3<BR><FONT SIZE="4" COLOR="#b22222">(для рисунка)</TD>
<TR><TD BGCOLOR="#00ff00"><FONT SIZE="6"COLOR="#ff0000">
<P ALIGN="CENTER">ячейка 4<FONT SIZE="4"> (для текста)</FONT></P></TD></TR><
<TR><TD BGCOLOR="#bc8f8f" BORDER=4><P ALIGN="CENTER">
<FONT FACE="Courier New" SIZE="6" COLOR="#00ff00">
ячейка 5<FONT SIZE="4"> (для текста)</FONT></P></TD></TR></TABLE>
Этот код содержит описание таблицы, содержащей пять ячеек, и создает следующую
таблицу (Таблица 1). Посмотрим на нее.
Обратим внимание на строки 2 и 7 (описание шрифтов опускаем):
<TD ROWSPAN=3 WIDTH=20%></TD>
<TD ROWSPAN=3></TD>
Поскольку средняя часть таблицы содержит три ячейки (2, 4 и 5), а края таблицы
должны состоять из ячеек по высоте, равным трем средним,то под ячейками 1 и 3 нужно
было бы создать еще по две, а потом их объединить. Такая операция производится с
помощью параметра rowspan. Число 3 (rowspan=3) и показывает, сколько ячеек
объединяется по высоте.
Если из 7 строки удалить rowspan=3, то правый край таблицы имел бы вид,
показанный на табл. 1а.
Ширина ячеек задана в процентах. Т.к. ширина таблицы 100%, то ширину
крайней правой ячейки указывать не надо.
Обратим также внимание на то, что строки кода 1, создающие нижние
ячейки посередине (ячейки 4 и 5), не содержат параметра ширины ячейки. Эта ширина
определяется шириной ячейки 2.
Для создания цветной рамки (напрмер, ячейки 2) с определенной толщиной
(BORDER=4)и цветом (BORDERCOLOR="#ffff00" - желтый), а также с
определенным цветом фона (bgcolor="#ff6371") в коде, создающим ячейку 2,
следует следует сделать следующие дополнения:
<TD WIDTH=60% ><TABLE BORDER=4 BORDERCOLOR="#ffff00" BGCOLOR="#ff6371" WIDTH=100%>
<TD><FONT FACE="Courier New" SIZE="6" COLOR="#0000ff"><P ALIGN="CENTER">ячейка 2
</FONT></TABLE></TD>
Посмотрим на табл. 2
Переходим к созданию изображения. Для простоты пока поместим его только в
одну ячейку с правой стороны (ячейка 3). Для этого с помощью уже
рассмотренного кода создаем рамку (на этот раз фиолетового цвета
BORDERCOLOR="#800080"):
<TD ROWSPAN=3><TABLE BORDER=4 BORDERCOLOR="#800080"
height=170 WIDTH=250><TD><FONT FACE="Courier New" SIZE="6" COLOR="#ff00ff">
<P ALIGN="CENTER">ячейка 3<BR>для рисунка</TD></TABLE>
Посмотрим на табл. 3
Теперь поместим в рамку рисунок. Используем код:
<TD ROWSPAN=3 WIDTH=20%><TABLE BORDER=4 BORDERCOLOR="#800080"
height=170 WIDTH=250><TD align="center"><IMG HEGHT=120 WIDT=180 SRC="12.jpg">
</TD></TABLE>
В этом коде задаются высота и ширина изображения, а также его расположение в
центре ячейки. При этом файл рисунка 12.jpg должен находиться в той же папке,
что и файлы HTML. В противном случае необходимо указать путь.
Посмотрим на табл. 4
Если нужно, чтобы изображение занимало все пространство ячейки, используем код:
<TD ROWSPAN=3><TABLE BORDER=4 BORDERCOLOR="#800080">
<TD"><IMG HEIGHT=170 WIDTH=250 SRC="12.jpg">
</TD></TABLE>
Как видно, указывать размеры таблицы, создающей рамку ячейки не надо,
ибо они дублируются размером самого рисунка.
Посмотрим на табл. 5
Точно так же создаем рисунок в левой крайней ячейке. Код заголовка
принимает вид:
<TD ROWSPAN=3><TABLE BORDER=4 BORDERCOLOR="#800080" bgcolor="#ccffcc">
<TD><IMG HEIGHT=170 WIDTH=250 SRC="18.jpg">
</TD></TABLE>
<TD bgcolor="#ff6371" WIDTH=60%>
<FONT FACE="Courier New" SIZE="6" COLOR="#0000ff"><P ALIGN="CENTER">текст 1
</FONT></TD>
<TD ROWSPAN=3><TABLE BORDER=4 BORDERCOLOR="#800080" bgcolor="#ccffcc">
<TD><IMG HEIGHT=170 WIDTH=250 SRC="12.jpg">
</TD></TABLE>
<TR><TD><FONT SIZE="6" COLOR="#ff0000"><P ALIGN="CENTER">текст 2
</FONT></P></TD></TR></TABLE>
Посмотрим на табл. 6
Теперь в средние ячейки впишем конкретный текст и получим окончательный
код заголовка (код 2):
<TABLE BORDER=4 bgcolor="#ccffcc" BORDER=4 BORDERCOLOR="#0000ff" WIDTH=100%">
<TD><TABLE BORDER=4 bgcolor="#ccffcc" BORDER=4 BORDERCOLOR="#ff0000" WIDTH=100%">
<TD ROWSPAN=3><TABLE BORDER=4 BORDERCOLOR="#800080"><TD>
<IMG HEGHT=170 WIDT=250 SRC="18.jpg">
</TD></TABLE>
<TD BGCOLOR="#ff0000"BORDER=4 BORDERCOLOR="#0000ff" WIDTH=60%><P ALIGN="CENTER">
<FONT FACE="Courier New" SIZE="5" COLOR="#00ff00"><B>
JavaScript для начинающих</FONT></TD>
<TD ROWSPAN=3><TABLE BORDER=4 BORDERCOLOR="#800080"><TD>
<IMG HEGHT=170 WIDT=250 SRC="12.jpg">
</TD></TABLE>
<TR><TD BGCOLOR="#00ff00" BORDER=4 BORDERCOLOR="#0000ff"><P ALIGN="CENTER">
<FONT FACE="Arial"
SIZE="6" COLOR="#0000ff"><B>JavaScript</FONT><BR><FONT FACE="Times New Roman"
SIZE="5" COLOR="#800080">(в примерах)</FONT></B></P>
<TR><TD BGCOLOR="#ff0000" BORDER=4 BORDERCOLOR="#0000ff"><P ALIGN="CENTER">
<FONT FACE="Courier New" SIZE="5" COLOR="#00ff00"><B>
Первые шаги в JavaScript</FONT></B></P>
</TD></TR></TABLE>
</TABLE>
Посмотрим на получившийся заголовок (табл. 7).
Обратим внимание на следующее обстоятельство.Когда в таблицу вписаны оба рисунка,
указание ширины крайних ячеек (1 и 3) теряет смысл. Поэтому параметр WIDTH = 20%,
который раньше присутствовал в строках, содержащих параметр ячейки rowspan=3,
в этом коде отсутствует.
Подобного рода таблица может быть создана и с помощью
свойства innerHTML. СМОТРИ ЗДЕСЬ.
Работа с изображением
Рассмотрим, как можно маленький рисунок превратить в большой - просмотр рисунка
в увеличенном размере (в его натуральную величину) (таблица 8).
Для этого достаточно ТЭГ, создающий изображение, превратить в
автогиперссылку, т.е. в ссылку на само изображение. С этой
целью строку, создающую левый рисунок (4-ая строка в коде 2):
<IMG HEGHT=170 WIDT=250 SRC="18.jpg">
дополняем атрибутами ссылки:
<A HREF="18.jpg"><IMG HEGHT=170 WIDT=250 SRC="18.jpg"></A>
При наведении курсора на ЛЕВЫЙ рисунок он принимает форму кисти руки, а при нажатии
на мышь изображение появляется в новом окне в увеличенном размере.
Посмотрим на табл. 8
|
