Автор статьи:
Оформление блока информации на сайте в созвучные вашему вкусу рамки средствами HTML и GIF.
Нам понадобится табличка размером 3 на 3. В серых ячейках будут хитрости так называемой верстки, а в белой — содержание.
>
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Теперь позаботимся об эстетике. Для рамки понадобятся четыре угла и четыре стороны. Вот они в 10-кратном увеличении:
Попробуем скрестить картинки с таблицей. Делать это нужно осторожно. Углы ставить картинками, а стороны — фоновыми рисунками. Фоновые рисунки называются «background», но для экономии места пусть будут просто «bg». Неплохо также указать одной из средних ячеек ширину 100%, чтобы подпереть крайние столбики.
|
bg |
img |
| bg |
Содержание | bg |
| img |
bg |
img |
Убираем img, bg и «строительные леса» (границу таблицы). Получаем готовую рамку.
|
|
|
|
Да, оно самое | |
|
|
|
В Netscape выглядит не очень (если у вас Netscape, смотрите предыдущий пример). Измена! Измена! Netscape унес зайчат! Как ни бьешься, сделать столбики шириной скажем 1 пиксель или 3 не получается. Ширину крайних столбцов в Netscape можно охарактеризовать как 1%. Для передачи всего ужаса, предстающего глазам пользователя, в примере ниже в столбики всунуты распорки.
|
|
|
|
Контент, прости Господи! | |
|
|
|
А делать что-то надо. Потому как ждать пока Netscape вымрет времени нет. расширяем фоновые рисунки в крайних столбиках (ячейки 4 и 6), чтобы не размножались так активно в появляющихся пустотах. Кстати, как их не расширяй, найдется разрешение, при котором вертикальная линия повторится. Выбирайте такую ширину, чтобы этот досадный глюк не проявился при жизни (сайта, конечно). В левом крайнем столбике сверху и снизу (ячейки 1 и 7) ставим фоновые рисунки, чтобы не обрывались горизонтальные линии.
| img + bg |
bg |
img |
| bg |
Содержание | bg |
| img + bg |
bg |
img |
Получаем рамку, которая хорошо выглядит в Explorer:
|
|
|
|
информация | |
|
|
|
…и не так плохо выглядит в Netscape — становится чуть уже 100%. Где-то на тот неубиенный 1%. Если считать такой результат приемлимым, то красная армия победила!
Добавим для нашей рамки функцию суперзагрузки. Оговорюсь, что не для каждой рамки это подойдет и неизвестно, насколько суперзагрузка понравится поклонникам Netscape. Но если есть желание поразить пользователя рамкой, появляющейся одновременно со своим содержанием, то стоит попробовать.
Раскрасим ячейки 2, 4, 6 и 8 цветом рамки с помощью «скоростного» атрибута bgcolor.
| 1 | 2 | 3 |
| 4 | Шум | 6 |
| 7 | 8 | 9 |
Как бы и все. Теперь надо найти самое медленное подключение и пообновлять страницу. Смотрите, как замечательно проявляется рамка:
|
|
|
|
Неважно что | |
|
|
|
И напоследок два слова об интуиции. Чувствую, что, возможно, надо делать фоновые картинки границ подлиннее. Места занимать они слишком много не будут. Но не исключено, что браузер станет меньше тормозить, прорисовывая фон. Если верите в такое, то поправьте фоновые изображения для сторон рамки, насколько позволяет совесть.
|
|
|
|
|
|
|
|
|
|
|
Спасибо за внимание.
