Создание графического логотипа Web-сайта

Задание: Создадим графический логотип для нашего Web-сайта, который поместим в контейнер cheader вместо маловыразительного текстового заголовка.

Сначала сформулируем требования:

ü Логотип нашего Web-сайта будет представлять собой подчеркнутую надпись "Справочник по HTML и CSS" с тенью.

ü Ширина логотипа будет такой, чтобы занимать все пространство между левым краем контейнера cheader и левым краем Web-формы поиска.

ü Ширина логотипа будет меняться при изменении размеров окна Web-обозревателя.

Откройте Web-страницу index.htm в Блокноте, удалите все содержимое контейнера cheader и вставьте в него такой HTML-код:

<CANVAS ID="cnv" WIDTH="600" HEIGHT="80"></CANVAS>

Он создает канву cnv, в которой и будет рисоваться логотип.

Теперь необходимо написать Web-сценарий, который будет получать размеры канвы и рисовать в ней логотип таким образом, чтобы он занял канву целиком.

Откройте файл Web-сценария main.js в Блокноте.

Где поместить код, выполняющий рисование логотипа? Может быть, в теле функции, передаваемой параметром методу onReady объекта Ext? Но тогда логотип будет нарисован всего однажды — после загрузки Web-страницы.

Мы же хотим сделать так, чтобы ширина логотипа менялась при изменении ширины окна Web-обозревателя. Для этого нам следует сделать две вещи. Во-первых, придется в ответ на изменение ширины окна менять размеры канвы cnv — это очевидно. Во-вторых, понадобится после каждого изменения размеров канвы перерисовывать логотип — с учетом изменившихся размеров канвы.

Вывод: поместим код, выполняющий рисование логотипа, в тело функции adjustContainers. Эта функция, как мы помним, устанавливает размеры контейнеров, составляющих дизайн нашей Web-страницы, и выполняется при каждом изменении размеров окна Web-обозревателя — как раз то, что нам нужно.

Поместите в конец тела функции adjustContainers два выражения:

Ext.get("cnv").set({ width: elCSearch.getX() — 40 });

drawHeader();

Первое выражение устанавливает ширину канвы cnv, чтобы она заняла все пространство между левым краем контейнера cheader и левым краем Web-формы поиска. Нужное значение ширины получается следующим образом.

1. Берется значение горизонтальной координаты свободного контейнера csearch, в котором находится Web-форма поиска. (Контейнер csearch хранится в переменной elCSearch.) Получается значение ширины, которую может занять канва, без учета внутренних отступов.

2. Из полученной ширины вычитается 20 — размер внутреннего отступа слева в пикселах, заданного в именованном стиле, привязанном к контейнеру cheader.

3. Из полученной разности вычитается еще 20 (итого получается 40) — размер отступа между правым краем канвы и левым краем контейнера csearch с Web-формой поиска. Это нужно, чтобы канва не примыкала к Web-форме поиска вплотную.

Полученное значение ширины присваивается атрибуту WIDTH тега <CANVAS> с помощью метода set объекта Ext Core Element.

Второе выражение вызывает функцию drawHeader, которая и выполнит рисование логотипа. Листинг 17.17 содержит код, который объявляет эту функцию; поместите его в любое место файла main.js.