Создание графического логотипа Web‑сайта
Вооружившись необходимыми знаниями о канве HTML 5, контексте рисования и его свойствах и методах, давайте попрактикуемся в 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‑форма поиска (см. главу 21 ). (Контейнер csearch хранится в переменной elCSearch.) Получается значение ширины, которую может занять канва, без учета внутренних отступов.
2. Из полученной ширины вычитается 20 – размер внутреннего отступа слева в пикселах, заданного в именованном стиле, привязанном к контейнеру cheader.
3. Из полученной разности вычитается еще 20 (итого получается 40) – размер отступа между правым краем канвы и левым краем контейнера csearch с Web‑ формой поиска. Это нужно, чтобы канва не примыкала к Web‑форме поиска вплотную.
Полученное значение ширины присваивается атрибуту WIDTH тега <CANVAS> с помощью метода set объекта Ext Core Element (см. главу 15 ).
Второе выражение вызывает функцию drawHeader, которая и выполнит рисование логотипа. Листинг 22.17 содержит код, который объявляет эту функцию; мы можем поместить его в любое место файла main.js.
Дата добавления: 2015-05-19; просмотров: 705;