![]() |
![]() |
![]() |
|||||||||||
|
|||||||||||||
|
Заголовок сайтаВ Роботландии есть замечательный художник Александр Артурович Русс. Вот мы с ним и сели за Фотошоп и придумали титульную картинку для моего сайта:
Готовый рисунок перед записью на диск мы поместили, конечно, на тот же самый фон, что будет на сайте (растянули фоновую картинку по вертикали). Сделали так для того, чтобы анти-алиасинг по контуру картинки был правильным. Вы не знаете что такое анти-алиасинг? Это очень просто! Вы ведь знаете, что экран монитора не гладкий, рисунок на нем собирается из отдельных пикселов, и эти самые точки-пикселы видны невооруженным глазом. Если не принять специальных мер, ступенчатость контура неизбежна. А можно по ступенчатой границе пустить пикселы имеющие переходной (средний) цвет между цветом контура и цветом фона. Ступеньки сглаживаются и визуально становятся незаметными. Это и есть анти-алиасинг. Профессионалы обязательно рисуют экранные картинки с анти-алиасингом. Тем более, что современные графические системы типа Фотошоп поддерживают анти-алиасинг самостоятельно. Кстати, в настройках рабочего стола 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> Посмотрите, что получилось. Я смотрел это, конечно, в разных браузерах, при разных размерах окна и при разных размерах шрифта по умолчанию. |
||||||||||||
|
|||||||||||||
|