 |
|
 |
r8-project.xyz - створи сайт безкоштовно! |
|
||||
|
|
|||
|
|
|
8.2. Управління розташуванням елементів веб-сторінки за допомогою таблиць
У World Wide Web досить часто зустрічаються сторінки, на яких довільне розташування елементів досягається за допомогою таблиць. Зокрема, такий підхід часто застосовують, якщо необхідно залишити на сторінці відносно великі “порожнечі”.
Як можна цього досягти? Напевно, найбільш витонченим і ефективні? рішенням було б застосування абсолютного позиціонування елемен тов, проте багато хто звик вирішувати подібного роду завдання за допомогою звичайних таблиць. Оскільки межі між елементами таблиці можуть не відображатися, а осередки можуть бути як би порожніми, такий спосіб когось рої час (до появи CSS) представлявся кращим рішенням подоб них завдань. Давайте розглянемо, як це робиться.
Спочатку визначимо стилі майбутньої сторінки - колір фону і центрування тексту:
<STYLE> BODY { background-color: #FOE7F1;
} H2 { text-align: center;
} TD { font-family: MS Comic Sans, sans-serif;
text-align: center; } </STYLE>
Тепер можна задати параметри самої таблиці. При цьому відступ від внутраннего краю осередку (CELLPADDING=) і відстань між осередками (CELLSPACING=) краще задати рівними нулю, щоб ніщо не відволікало нас від завдання мінімальних розмірів осередків:
<TABLE WIDTH="99%" CELLSPACING="0" CELLPADDING="0">
Створення елементів таблиці
Тепер потрібно визначити самі осередки. Якщо подивитися на мал. 8.4, то може здатися, що їх менше, ніж насправді. В процесі опреде-ленія осередків буває зручно тимчасово встановити в теге <TABLE> атрибут BORDER=. В цьому випадку всі межі між осередками будуть видимі.
Кичок видно з малюнка, четвертий рядок цієї таблиці - єдина, де визначено всі п'ять стовпців, але це вже достатньо. Проте, для вірності краще помістити прозорий малюнок у всіх “порожніх” елементах таблиці. У третьому і п'ятому рядках таблиці об'єднані в стовпців. Ці рядки використовуються як вертикальний відступи між графічними гіперпосиланнями. Тут поміщений прозорий рису нок, “розтягнутий” у висоту:
<TR><TD COLSPAN="5">
<IMG SRC="Images/diafanol. gif" WIDTH="4" HEIGHT="20" BORDER="0" ALT=""></TD></TR>
Як бачите, висота цього рядка рівна 20 пікселам. Порожні осередки в осталь них рядках використовуються для завдання ширини стовпців, наприклад, так.
<TD><IMG SRC="Images/diafanol.gif" WIDTH="20" HEIGHT="3"
BORDER="0" ALT=""></TD>
Тут поміщений прозорий малюнок, “розтягнутий” по горизонталі. Решта “порожніх” осередків також заповнена прозорими малюнками. розміри яких проставлені, виходячи з того, що ширина кожного малюнка гіперпосилання рівна 120 пікселам, а ширина всіх відступів - 20 пікселе і
Давайте окинемо поглядом важ текст цієї сторінки.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.О Transitional//EN">
<HTML>
<HEAD>
<ТITLЕ>Электронная библиотека</ТIТLЕ>
<STYLE> BODY { background-color: #FOE7F1;
} H2 { text-align: center;
} TD { font-family: MS Comic Sans, sans-serif;
text-align: center; }
</STYLE>
</HEAD>
<BODY>
<TABLE WIDTH="99%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR><TD СOLSPAN="5">
<Н2>Электронная библиотека</Н1>
</ТD>
</ТR>
<TR>
<TD><IMG SRC="Images/hudlit.gif" WIDTH="120" HEIGHT="120" BORDER="0" ALT="Xyдoжecтвeннaя">
<BR>Xyдoжecтвeннaя литература </TD>
<TD COLSPAN="4"><IMG SRC="Images/diafanol.gif" WIDTH="280" HEIGHT="3" BORDER="0" ALT=""></TD>
</TR>
<TR><TD COLSPAN="5">
<IMG SRC="Images/diafanol.gif" WIDTH="4" HEIGHT="20" BORDER="0" ALT=""></TD></TR>
<TR><TD>
<IMG SRC="Images/diafanol.gif" WIDTH="120" HEIGHT="3"
BORDER="0" ALT=""></TD><TD>
<IMG SRC="Images/diafanol.gif" WIDTH="20" HEIGHT="3" BORDER="0" ALT=""></TD><TD>
<IMG SRC="Images/naulit.gif" WIDTH="120" HEIGHT="120" BORDER="0" ALT="Hayчнaя"><BR>Hayчнaя литература</ТD><ТD>
<IМG SRC="Images/diafanol.gif" WIDTH="20" HEIGHT="3"BORDER="0" ALT=""></TD><TD>
<IMG SRC="Images/diafanol.gif" WIDTH="120" HEIGHT="3" BORDER="0" ALT=""></TD></TR>
<TR><TD COLSPAN="5">
<IMG SRC="Images/diafanol.gif" WIDTH="4" HEIGHT="20" BORDER="0" ALT=""></TD></TR>
<TR><TD COLSPAN="4">
<IMG SRC="Images/diafanol.gif" WIDTH="280" HEIGHT="3" BORDER="0" ALT=""></TD><TD>
<IMG SRC="Images/detlit.gif" WIDTH="120" HEIGHT="120" BORDER="0" ALT=""><BR>Детская литература</ТD></ТR>
</TABLE>
</HTML>
В даному прикладі не поставлені самі гіперпосилання, тобто теги <А>, оскільки ні самої бібліотеки, ні її розділів поки що не існує. Додати їх не складе труднощів.
Якщо ви застосовуватимете таку технологію при створенні сторіночок, то перед написанням коду таблиці накидайте її схему (з межами) хоч би просто олівцем на папері. Після цього написати код стає дуже просто, оскільки в голові виникає ясна і наочна картина майбутньої таблиці.
Проте, на наш погляд, для вирішення подібних завдань зручніше використовувати абсолютне (і відносне) позиціонування елементів. При такому підході, до речі, легко організувати і внутрішньосторінкову навігацію. Про це піде мова в наступному розділі.
|
|
|
|
|||
|
|
|
|||
|
|
|||
|
|
|||
|
|
|
Copyright © r8-project.xyz, 2008 - 2021 |