HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
2. Из полученной ширины вычитается 20 — размер внутреннего отступа слева в пикселах, заданного в именованном стиле, привязанном к контейнеру cheader.
3. Из полученной разности вычитается еще 20 (итого получается 40) — размер отступа между правым краем канвы и левым краем контейнера csearch с Web- формой поиска. Это нужно, чтобы канва не примыкала к Web-форме поиска вплотную.
Полученное значение ширины присваивается атрибуту WIDTH тега <CANVAS> с помощью метода set объекта Ext Core Element (см. главу 15).
Второе выражение вызывает функцию drawHeader,
Листинг 22.17
function drawHeader {
var elCanvas = Ext.get("cnv");
var cnvWidth = elCanvas.getAttribute("width");
var ctx = elCanvas.dom.getContext("2d"); ctx.beginPath;
ctx.strokeStyle = "#B1BEC6";
ctx.moveTo(0, 60);
ctx.lineTo(cnvWidth, 60);
ctx.stroke;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "#CDD9DB";
ctx.font = "normal 20pt Arial";
ctx.textAlign = "right";
ctx.textBaseline = "bottom";
ctx.fillStyle = "#3B4043";
ctx.scale(2, 1.3);
ctx.fillText("Справочник по HTML и CSS", cnvWidth / 2, 60 / 1.3,
cnvWidth / 2);
}
Рассмотрим листинг 22.17 по частям.
Сначала получаем канву cnv:
var elCanvas = Ext.get("cnv");
Затем получаем текущую ширину канвы:
var cnvWidth = elCanvas.getAttribute("width");
Рисуем горизонтальную линию, которая "вытянется" на всю ширину канвы и подчеркнет текст заголовка, который мы выведем потом:
ctx.beginPath;
ctx.strokeStyle = "#B1BEC6";
ctx.moveTo(0, 60);
ctx.lineTo(cnvWidth, 60);
ctx.stroke;
Задаем параметры тени для текста:
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "#CDD9DB";
Задаем шрифт текста. Берем его параметры из стиля переопределения тега <H1>,
созданного нами в таблице стилей main.css:
ctx.font = "normal 20pt Arial";
Задаем для текста горизонтальное выравнивание по правому краю и вертикальное выравнивание по нижнему краю символов:
ctx.textAlign = "right";
ctx.textBaseline = "bottom";
Так нам будет проще вычислять координаты для вывода текста. Задаем цвет заливки — он станет цветом выводимого текста: ctx.fillStyle = "#3B4043";
Увеличиваем масштаб системы координат канвы:
ctx.scale(2, 1.3);
Отметим, что масштаб у горизонтальной оси координат больше, чем у вертикальной, — значит, текст будет растянут по горизонтали.
Выводим текст "Справочник по HTML и CSS" в виде заливки без контура:
ctx.fillText("Справочник по HTML и CSS", cnvWidth / 2, 60 / 1.3, cnvWidth / 2);
Отметим несколько моментов.
— В качестве горизонтальной координаты вывода текста мы указали ширину канвы. Если учесть, что ранее мы задали горизонтальное выравнивание по правому краю, текст будет выровнен по правому краю канвы.
— В качестве вертикальной координаты вывода текста мы указали позицию, на которой находится уже нарисованная нами горизонтальная линия.
— Мы указали максимальную ширину выводимого текста, равной ширине канвы. Благодаря этому текст при любом изменении ширины окна Web-обозревателя не вылезет за края канвы (подробнее см. в разделе, посвященном выводу текста).
— Вероятно, это самый важный момент. Текст мы вывели после изменения масштаба системы координат, но значения координат, которые указали при выводе, принадлежат старой системе координат. Чтобы преобразовать их в новой системе координат, мы разделим их на соответствующие величины масштабов (2 и 1,3).
Выполнение функции drawHeader закончено.
Откроем Web-страницу в Web-обозревателе. Посмотрим на новый логотип. Конечно, если постараться, можно сделать и лучше. Пусть это будет вашим домашним заданием.
На этом автор прощается с вами. Счастливо вам доделать Web-сайт — справочник по HTML и CSS! И успехов на поприще современного Web-дизайна!
Заключение
Вот и закончилась эта книга…
Программное ядро (или, на жаргоне программистов, "движок") нашего Web- сайта — справочника по HTML и CSS — готово и отлажено. Осталось только создать остальные Web-страницы, описывающие многочисленные теги HTML, атрибуты стиля CSS и примеры их использования. Мы ведь их так и не написали, увлекшись Web-дизайном и Web-программированием…
Мы познакомились с азами Web-дизайна, языками HTML, CSS и JavaScript, принципами Web-программирования и библиотекой Ext Core. И не только познакомились, но и применили полученные знания на практике, создав Web-сайт. Наш проект, хоть и невелик по объему, но зато использует самые "горячие" новинки Web- дизайна и Web-программирования. Подгружаемое и генерируемое содержимое, базы данных, семантическая разметка, интерактивные элементы — такое не везде встретишь.
А еще мы активно применяли новинки, которые несут нам HTML 5 и CSS 3. Многие Web-обозреватели уже сейчас поддерживают некоторые нововведения этих версий, а вскоре станут поддерживать и остальные их возможности. Ведь время идет, "черновые" стандарты становятся окончательными, а разработчики создают новые программы, которые будут поддерживать эти стандарты.
Конечно, не все было описано в этой книге. Многое осталось нерассмотренным. Но ведь окончательные редакции стандартов HTML 5 и CSS 3 еще далеки от завершения, да и Web-обозревателей, полностью соответствующих даже их "черновым" редакциям, также пока нет. Автор просто описал то, что, по его скромному мнению, понадобится даже неопытным Web-дизайнерам, и пригодится уже сейчас. А все прочее…
А все прочее описано в других материалах, которых хватает в Интернете. В табл. З.1 приведены интернет-адреса некоторых Web-сайтов, которые будут очень полезны Web-дизайнеру любого уровня подготовки и которыми пользовался сам автор при написании этой книги. Правда, все они на английском языке, но этот язык должен знать любой грамотный компьютерщик — вопрос даже не обсуждается!