|
|
Пример создания тревожного сообщенияТеперь, когда мы рассмотрели базовый синтаксис, перейдем к построению полного примера тревожного бокса, который продемонстрирует все аспекты фоновых изображений. Дизайн Предположим, что графический дизайнер создал визуальный эскиз тревожного сообщения, которое вы хотите создать для своего Web-сайта. Взглянув на эскиз можно видеть, что фон сигнала имеет светло-оранжевый цвет, выделяя его из окружающих параграфов. Имеется также значок сигнала на расстоянии десяти пикселей от верхнего левого угла.Отметим, что эскиз имеет одну строку текста, но может в будущем содержать больше. Одним из самых важных навыков разработчика Web является предвидение, как будет развиваться дизайн. Часть внимания профессионального видения сайта с самого начала проекта и до этапа перепроектирования должно уделяться единообразию. Поэтому тревожное сообщение может содержать более одной строки текста, или даже несколько параграфов, списков, или других элементов HTML. Необходимо пытаться быть как можно более независимым от элемента. Это повышает возможность повторного использования кода и делает сайт насколько возможно быстрым и эффективным. Эскиз выглядит, как показано на рисунке 31.1.
Дизайнер подготовил также специальную иконку, как показано на рисунке 31.2.
Код На основе того, что вы узнали о фоне CSS в первой части лекции, уже можно подумать о том, как создать это тревожное сообщение. Я бы посоветовала вам попробовать сделать это самостоятельно, а потом сравнить свою работу с показанным примером.Теперь перейдем к пошаговому рассмотрению примера. Поэкспериментируйте с кодом, увеличивая или уменьшая значения, и проверьте другие альтернативы. Можно также при желании последовать дальше, записывая каждую новую строку кода в таком инструменте, как Opera Dragonfly или Firebug, чтобы можно было сразу видеть результаты каждого шага. Создание зацепки CSS, или селектора Прежде всего, необходимо создать класс alert, чтобы цеплять на него CSS. Создайте новые шаблонные файлы CSS и HTML, соедините CSS с файлом HTML, и добавьте в них следующий код: CSS:.alert {... } HTML: <p class="alert"> <strong>Alert!</strong> The text of our alert message goes here.</p>Здесь сигнал (alert) оформляется с помощью class, а не id, так как на странице может встречаться более одного сигнала, например, элемент формы с несколькими ошибками. Вы хотите сделать свой код CSS насколько возможно гибким и ограничиваете вещи в соответствии с дизайном при создании кода HTML. Итак, мы создали надежное основание для сигнала, но он пока выглядит как обычный параграф, так как пока не было добавлено никакого стилевого оформления. Давайте теперь это сделаем.
Добавление цвета фона Вы уже познакомились с использованием цвета фона при обработке текста в "Оформление текста с помощью CSS" об оформлении текста с помощью CSS. Те же самые принципы применимы к любому элементу HTML и могут объединяться с фоновыми изображениями для создания визуальных эффектов. Если цвет фона не был задан и не был унаследован, то по умолчанию он будет прозрачным.Давайте добавим светло-оранжевый цвет фона в бокс сигнала, чтобы сделать его выделяющимся из окружающего текста. Вы не хотите, чтобы он был слишком темным, так как важно сохранить разумный уровень контраста между текстом и цветом фона. Добавьте следующее свойство в правило CSS. .alert{background-color: #FFFFCC;}Бокс сигнала должен теперь выглядеть как на рисунке 31.3.
Рис. 31.3. Бокс сигнала с добавленным цветом фона.   ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры...  ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала...  ЧТО ТАКОЕ УВЕРЕННОЕ ПОВЕДЕНИЕ В МЕЖЛИЧНОСТНЫХ ОТНОШЕНИЯХ? Исторически существует три основных модели различий, существующих между...  ЧТО ПРОИСХОДИТ ВО ВЗРОСЛОЙ ЖИЗНИ? Если вы все еще «неправильно» связаны с матерью, вы избегаете отделения и независимого взрослого существования... Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:
|
Примечание. Я намерено решила не ограничивать класс alert параграфами; боксы сигналов вполне могут содержать также другие элементы. В коде CSS необходимо оставить как можно больше гибкости.