Посетите наш новый сайт AXMAJS.RU

Пишем интерактивную историю вместе. Часть 25-я

Борис Семёнов (Morych), 06.09.14 | Практика ASM

Использование изображений в стилях оформления

Как уже упоминалось в прошлой части учебника, для использования картинок в стилях оформления нам понадобится конструкция вида «url(...)». Как её использовать рассмотрим на примере. И для начала вместо сплошного цвета установим изображение на заднем фоне нашей истории. Ищем в параграфе стилей правило «body», которое отвечает за фон, и которое мы дополним следующим образом:

body
    {
    ...

    background-image: url(http://lh6.googleusercontent.com/-OCcf71bWl3o/U_ix7-1n1ZI/AAAAAAAACWc/Cdsz081es3Y/s300-no/wood2.jpg);
    background-attachment: fixed;
    }

Свойство «background-image» как раз и устанавливает указанную картинку в качестве заднего фона элемента. Значением свойства будет являться упомянутая выше конструкция «url(...)», где в скобках содержится ссылка на файл нужной картинки. Картинка, которую мы используем для оформления, приведена на рисунке 21.

Интересно, как же такое маленькое изображение, всего 300 на 300 пикселей, может занять весь задний фон даже на развёрнутом во весь экран окне браузера? Дело в том, что это не совсем обычное изображение, а так называемая текстура. Если рядом с изображением-текстурой поставить ещё одно такое же, будет очень непросто определить, где кончается первое изображение, и начинается второе. Использование свойства «background-image» по умолчанию заполняет весь задний фон элемента одинаковыми картинками по горизонтали и по вертикали. Причём загружается изображение только один раз.

Нужное изображение-текстуру можно легко найти в Интернете. В сети существует большое количество сайтов с бесплатными наборами текстур на все случаи жизни. После того, как изображение найдено, нужно закачать его на любой фотохостинг (веб-сайт, позволяющий размещать картинки в Интернете). При этом нужно убедиться, что время хранения закачанных картинок не ограничено, а также в том, что доступ на просмотр изображений может получить любой пользователь.

Мы для хранения картинок воспользуемся, например, фотохостингом от «Google+». На сайте нажимаем ссылку «Добавить фото» и выбираем нужную картинку. Когда картинка будет залита на сервис, открываем её в отдельном окне, вызываем контекстное меню (кликнув по картинке правой кнопкой мыши) и выбираем пункт «Копировать ссылку на изображение». В зависимости от используемого браузера этот пункт может называться иначе. Например, «Копировать URL картинки» или «Копировать адрес изображения». Полученную ссылку мы и вставляем в скобках в конструкцию «url()».

Свойство «background-attachment» определяет, будет ли фоновое изображение прокручиваться вместе с содержимым элемента. Значением свойства может быть: «fixed» — фон будет неподвижен, или «scroll» — фон будет прокручиваться. Значением по умолчанию является «scroll», поэтому, если нам нужно, чтобы фон двигался вместе с содержимым, свойство «background-attachment» можно просто не указывать. Так мы и поступим при установке фона страниц истории:

.main
    {
    ...

    background-image: url(http://lh3.googleusercontent.com/-VtcAoT5Xrfk/U_ix7JWcSSI/AAAAAAAACWY/C_RupOZc6xM/s255-no/paper_sketch.jpg);
    }

Аналогично установим фон для окна меню.

.wind
    {
    ...

    background-image: url(http://lh6.googleusercontent.com/-GD8wZ7AaNHE/U_ix6LtXknI/AAAAAAAACWg/GRdjwqL_fKc/s255-no/paper_buff.jpg);
    }

Дополним оформление страниц истории затейливым вензелем в нижней части страницы, для чего подправим правило «#footer»:

#footer
    {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 20px;
    width: 100%;
    background-image: url(http://lh4.googleusercontent.com/-6uEAVkiIJbk/U_ix3suyb7I/AAAAAAAACWE/1vlgJ2M7dVI/w371-h16-no/line.png);
    background-repeat: no-repeat;
    background-position: center;
    }

Свойство «background-repeat» управляет повторением фоновых изображений. По умолчанию значением свойства является ключевое слово «repeat», при этом изображение повторяется по горизонтали и по вертикали. Другими значениями могут быть: «repeat-x» — изображение повторяется только по горизонтали, «repeat-y» — только вертикальное повторение. Мы использовали значение «no-repeat», при котором изображение вообще не повторяется, а выводится только один раз.

Свойство «background-position» отвечает за позиционирование фоновой картинки. Позицию можно задавать в любых единицах измерения (например, в пикселях или процентах). Сначала задаётся горизонтальная позиция, а затем через пробел вертикальная. Позицией по умолчанию считается «0% 0%» — левый верхний угол элемента. Кроме того, можно задавать позицию при помощи комбинации ключевых слов. Для горизонтали это: «left» — левая граница элемента, «center» — середина, «right» — правая граница. Для вертикали: «top» — верхняя граница, «center» — опять же середина и «bottom» — нижняя граница элемента. При этом порядок следования ключевых слов не имеет значения, и, если указано только одно ключевое слово, вторым будет считаться «center».

Задав соответствующие значения двух последних свойств, мы разместили в центре нижней части страницы одну фигурную линию.

Создание собственных правил

До этого момента мы с вами лишь изменяли уже существующие в параграфе стилей правила. Однако чтобы не ограничивать полёт оформительской фантазии, ASM дополнительно позволяет создавать собственные правила. Т.е. мы можем описать в параграфе стилей необходимые классы и использовать их при оформлении текста истории. Начнём с простейшего примера. Возьмём и дополнительно выделим заголовок сцены другим цветом и более крупным шрифтом. Нам нужно новое правило, которое будет отвечать за оформление заголовка. Дополняем параграф стилей следующим текстом:

.title
    {
    color: #CC3333;
    font-weight: bold;
    font-size: 1.2em;
    }

Название правила «.title» мы придумали сами. Наличие точки перед названием является обязательным, а в остальном в качестве названия может выступать любая комбинация английских букв и цифр. А вот пробелы и знаки препинания использовать нельзя.

Новое правило у нас есть, теперь нужно применить его в тексте истории. Для этого служат макросы «class» и «endclass». Открываем параграф «Заголовок» и изменяем его следующим образом:

Заголовок

===<<class 'title'>><<print $сцена>><<endclass>>===

В макросе «class» в кавычках мы должны указать название нашего правила. Обратите внимание, что здесь название уже указывается без точки. Сразу после замыкающих угловых скобок макроса «class» начинается действие правила. Т.е. весь последующий текст до макроса «endclass» или до переноса строки будет выводиться шрифтом, который мы настроили в правиле «.title» в параграфе стилей.

Теперь опишем другое правило посложнее. Как известно, отличительным признаком старинных рукописей является использование буквиц — больших первых букв для каждой главы. Попробуем оформить похожим образом первые буквы каждой страницы и в нашей истории. Назовём новое правило в параграфе стилей «.letter»:

.letter
    {
    display: block;
    float: left;
    margin: 0 10px 20px 0;
    width: 88px;
    height: 88px;
    text-align: center;
    background-color: #CC3333;
    background-image: url(http://lh3.googleusercontent.com/-8tarXN1Jz0U/U_ix3ZODYNI/AAAAAAAACVc/Twx-Pig0iH4/s88-no/letter88.png);
    color: #FFFFFF;
    font-size: 72px;
    font-weight: bold;
    text-shadow: 2px 0px 0px #CC3333, 0px 2px 0px #CC3333, -2px 0px 0px #CC3333, 0px -2px 0px #CC3333, -2px -2px 0px #CC3333, 2px -2px 0px #CC3333, -2px 2px 0px #CC3333, 2px 2px 0px #CC3333;
    }

Все свойства в этом правиле нам уже знакомы, кроме свойства «float», которое задаёт выравнивание элемента и обтекание его текстом. Если в качестве значения свойства задать «left», элемент будет выровнен по левому краю, а текст будет обтекать его справа. Значение «right» выравнивает элемент по правому краю, а текст обтекает его слева. Ещё одно значение «none» отключает обтекание. Последнее значение используется по умолчанию.

В свойстве «text-shadow» мы установили через запятую восемь теней для текста. Каждая тень смещена в своём направлении, и таким образом мы создаём контур буквы. Контур необходим для того, чтобы буква не сливалась с картинкой, которую мы установили в качестве заднего фона буквицы. Теперь применяем наше правило в тексте истории:

Сгоревший дом

...
<<class 'letter'>>К<<endclass>>акой же это был хороший дом! Крепкий, добротный, срубленный из душистых сосновых брёвен!
...

Собственные правила можно использовать не только для оформления текста, но и просто, чтобы расположить на странице какое-нибудь изображение. Например, справа и слева от заголовка разместим по картинке. Картинки будут отличаться лишь изображением, остальные же свойства у них будут иметь одинаковые значения. В такой ситуации одинаковые свойства мы можем разместить в одном правиле, где названия классов будут перечислены в селекторе через запятую:

.titleleft, .titleright
    {
    display: inline-block;
    width: 46px;
    height: 28px;
    margin: 0px 16px;
    }

Изображения у картинок различные, поэтому каждое мы указываем в отдельном правиле:

.titleleft
    {
    background-image: url(http://lh6.googleusercontent.com/-bPfMtyDc9zs/U_ixw5rF-RI/AAAAAAAACUw/oHNVKEtQYkg/w46-h28-no/flower-l.png);
    }

.titleright
    {
    background-image: url(http://lh4.googleusercontent.com/-9NKqEORbGU0/U_ixx2NXW1I/AAAAAAAACU4/H9px-N0irqU/w46-h28-no/flower-r.png);
    }

Параграф «Заголовок» теперь примет следующий вид:

Заголовок

===<<class 'titleleft'>><<endclass>><<class 'title'>><<print $сцена>><<endclass>><<class 'titleright'>><<endclass>>===

Похожим образом добавим на страницы последний штрих оформления — два орнамента, которые будут отделять текст истории от заголовка и списка доступных действий. Описание стиля будет выглядеть следующим образом:

.ornament
    {
    display: block;
    width: 100%;
    height: 60px;
    margin: 0.5em 0;
    clear: both;
    background-image: url(http://lh4.googleusercontent.com/-MsZfAlzXMTY/U_ix5g3xoHI/AAAAAAAACVw/dOJxYrbTywQ/w676-h60-no/ornament_t.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    }

В тексте же истории, чтобы вывести орнамент, достаточно будет написать:

<<class 'ornament'>><<endclass>>

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

На этом мы, пожалуй, завершим рассмотрение вопросов оформления истории. Конечно, многое осталось за кадром, ведь язык CSS обладает широчайшими возможностями, и его полное описание уместится разве что в толстенной книге. А здесь мы получили лишь базовые, начальные сведения об оформлении html-документа при помощи таблиц стилей. Для более глубокого понимания CSS необходимо обратиться к специализированным учебникам.

Продолжение следует...

Комментарии: 11.

Показать все комментарии

Для того, чтобы оставлять комментарии, необходимо зарегистрироваться и подтвердить в профиле указанный e-mail адрес.