Заголовок сайта

В Роботландии есть замечательный художник — Александр Артурович Русс. Вот мы с ним и сели за Фотошоп и придумали титульную картинку для моего сайта:

Готовый рисунок перед записью на диск мы поместили, конечно, на тот же самый фон, что будет на сайте (растянули фоновую картинку по вертикали). Сделали так для того, чтобы анти-алиасинг по контуру картинки был правильным.

Вы не знаете что такое анти-алиасинг? Это очень просто! Вы ведь знаете, что экран монитора не гладкий, рисунок на нем собирается из отдельных пикселов, и эти самые точки-пикселы видны невооруженным глазом. Если не принять специальных мер, ступенчатость контура неизбежна. А можно по ступенчатой границе пустить пикселы имеющие переходной (средний) цвет между цветом контура и цветом фона. Ступеньки сглаживаются и визуально становятся незаметными. Это и есть анти-алиасинг. Профессионалы обязательно рисуют экранные картинки с анти-алиасингом. Тем более, что современные графические системы типа Фотошоп поддерживают анти-алиасинг самостоятельно.

Кстати, в настройках рабочего стола Windows 95/98 есть флажок “сглаживать экранные шрифты” (правый щелчок на рабочем столе — Рабочий стол — Настроить рабочий стол — Эффекты). Этот флажок включает анти-алиасинг для шрифтов. Если у вас он не установлен, обязательно поставьте: шрифты станут красивыми и их пиксельная сущность станет незаметной. Как видите, теперь анти-алиассинг является стандартной услугой графической операционной системы.

Результат своей работы мы записали как два прозрачных gif-файла:

Для точного (по пикселам) размещения картинок на странице браузера мне понадобилась таблица и картинка-распорка empty.gif. В картинке empty.gif всего одна точка, и та сделана прозрачной, но такую картинку удобно использовать в дизайне, растягивая ее до нужного размера при помощи атрибута witdh тега IMG. Я написал такой код:

<TABLE border=1 cellspacing=0 cellpadding=0 width=591>
  <TR align=left valign=top>
    <TD>
      <IMG src=./pic/title1.gif
           width=93 height=64 border=0 alt="">
    </TD>
    <TD>
      <IMG src=./pic/empty.gif
           width=20 height=90 border=0 alt="">
    </TD>
    <TD>
      <IMG src=./pic/title2.gif
           width=478 height=64 border=0
           alt="Кухня Сидорова">
    </TD>
  </TR>
</TABLE>

Иными словами, таблица выглядит так:

Работая с таблицей, я сначала включил ее границы (border=1), чтобы визуально наблюдать на экране, как она строится. Посмотрите ее здесь.

Ширина распорки взята в 20 пикселов, а высота в 90:

<IMG src=./pic/empty.gif
      width=20 height=90 border=0 alt="">

Высота распорки регулирует величину отступа заголовка от других элементов страницы.

Ширина всей таблицы задана в 591 пиксел для того, чтобы таблица не растягивалась при увеличении разрешения экрана:

<TABLE border=1 cellspacing=0 cellpadding=0 width=591>

Число 591 получилось так: 93+20+478=591 (ширина первой картинки + ширина распорки + ширина второй картинки).

Можно было бы указать и меньший размер. В этом случае браузер указанное число игнорирует и рисует таблицу в минимально-необходимых размерах.

Когда размер распорки был подобран, границы таблицы были выключены:

<TABLE border=0 cellspacing=0 cellpadding=0 width=591>

Посмотрите, что получилось. Я смотрел это, конечно, в разных браузерах, при разных размерах окна и при разных размерах шрифта по умолчанию.

  Иван Сидоров kurs@robotland.pereslavl.ru