Навигация

Партнеры


Комментариев: 0
 (голосов: 2)

Css дизайн. Часть 12.


Ночная поездка


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

Визуализация кода


Когда Ши готовил дизайн «Ночной поездки» в Adobe Photoshop, он мало задумывался о том, как будет писать код. Сначала надо подготовить графику, а реализацию можно отложить на потом. Но как превратить статическую модель в интерактивный сайт? Когда дизайн разбивается на куски, приходится сохранять разные изображения, которые позже предстоит собрать воедино с помощью CSS. Не существует четких правил, описывающих эту процедуру, ключом к успеху является гибкость. Если заранее иметь в виду альтернативы, то принять решение будет проще.

Альтернативные варианты


Рассмотрим заголовок «Ночной поездки» - набор состыкованных прямоугольников, на которые наложена яркая желтая эмблема. Здесь есть две проблемы: заполнить область фотографиями и линиями, а затем наложить поверх эмблему, задав для нее про
зрачный фон. Поразмыслив, Ши остановился на двух возможных подходах:
4- подготовить одну большую карт - фотоинку, сохранив ее в формате JPG с очень малым коэффициентом сжатия, чтобы избежать искажения линий. В результате получился бы файл большого размера;
4- разрезать карт - фотоинку на куски, а затем собрать их воедино, привязав к различным элементам внутри #pageHeader и # e x t r a D i v s в конце страницы (куски, привязанные к последним элементам, можно поместить наверх с помощью абсолютного позиционирования).
Ши выбрал второй способ, но только не стал превращать все прямоугольники в отдельные картинки, а поместил каждую из двух фотографий в JPG-файлы
(рис. 3). Текст «ess Zen Garden» был сохранен в формате GIF, а все остальное стало одним GIF-файлом с высоким коэффициентом сжатия. И вместо запутанного кода для сборки заголовка получилась ясное сочетание различных методов верстки с одновременным использованием GIF и JPG-файлов.
После того как файлы были сохранены, настало время подумать о том, как их собрать: какие картинки к каким элементам присоединить? Разумное использование
атрибута background-image и техники подстановки изображений сделало ответ очевидным: поскольку внутри раздела ttpageHeader элементов для этой цели
недостаточно, следовало прибегнуть к элементам #extraDiv, находящимся в конце документа. В результате основная фоновая карт - фотоинка была присоединена к эле-
менту h i , а заголовок «ess Zen Garden» - к элементу h2. Ниже код, относящийся к этим изображениям, выделен цветом:
{
width: 770px;
height: 166px;
margin: 0;
background: #000 url(
repeat;
h2 {
width: 244px;
height: 42px;
background: #000 u r l ( h i . g i f ) top l e f t norepeat;
position: absolute;
top: 120px;
margin: 0;
margin-left: 495px;
2.gif) top left nohi
span, h2 span {
display:none;

Дополнительные стили для span скрывают текст, вместо которого подставляются изображения, хотя этот метод сейчас считается устаревшим.

Магия абсолютного позиционирования


Итак, для размещения фотографий все готово, но при попытке включить их в заголовок возникает новая проблема: абсолютное позиционирование плохо со-
четается с центрированием. Чтобы обойти эту трудность, Ши применил полезный трюк: он позиционировал родительские элементы вдоль левого края экрана, задав для них атрибут w i d t h равный 100%, чтобы растянуть на всю ширину окна браузера,
а дочерние элементы - в данном случае span - центрировал в пределах родительских.
С учетом компенсации различных ошибок в браузерах получился такой код:
#extraDivl {
position: absolute;
top: 41px;
left: 0;
text-align: center;
width: 100%;
#extraDivl span {
background: transparent url(granville.jpg)
top left no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
height: 123px;
width: 770px;


Так как элемент центрирован, а добавление padding увеличивает ширину элемента, то отступ равномерно распределяется по обе стороны. Это сработает, если дочерний элемент должен оказаться точно в центре, но если это не так? Задание
для дочернего элемента свойства padding увеличивает его общую ширину, отодвигая тем самым от центра. Трюк здесь такой: отступ расширяет элемент и влево, и вправо, значит для достижения желаемого результата значение необходимо удвоить. Кро-
ме того, отступ сдвигает элемент в направлении, противоположном тому, к которому он применен, следовательно, чтобы сдвинуть карт - фотоинку влево от центра, надо задать свойство p a d d i n g - r i g h t , и наоборот.

Ловкость рук


Разобравшись с заголовком, Ши столкнулся с новой проблемой при попытке увязать его с остальным контентом. Он хотел разделить колонки двойной вертикальной линией, но попытка применить к каждой колонке фоновое изображение, повторяющееся по вертикали, оказалась неудачной. Левая колонка (#linkList) не расширялась по вертикали на нужную величину, а правая в действительности состоя-
ла из трех разных элементов div (#quickSummary, #preamble и #supportingText).
Не имея единственного элемента, к которому можно было бы присоединить фоновую карт - фотоинку, он присоединил ее ко всем трем, предположив, что они будут
иметь одинаковую ширину и, значит, выровняются по горизонтали:
#quickSummary, #preamble, #supportingText {
background: transparent urltbg4.gif) top left
repeat-y;
margin: 0 0 0 4 00px;
width: 342px;

Они и выравниваются, только возникает неожиданная сложность: между d i v образуется вертикальный разрыв. Но ведь поля ни для одного d i v явно не заданы, откуда же он берется?

Схлопывающиеся поля


В модели прямоугольных областей, принятой в CSS, есть одна странность, получившая название схлопывающихся полей. Это означает, что если два элемента располагаются один над другим, причем для обоих заданы ненулевые поля и при этом нет ни отступов,
ни границ, ни еще каких-либо явных условий, то полная высота поля будет меньше суммы двух полей. Так, поля шириной 20 пикселей не дадут в сумме промежуток шириной 40 пикселей, вместо этого поля схлопнутся, и вы получите все те же 20 пикселей.
Но какое отношение это имеет к вышеупомянутой проблеме разрыва? Эффект схлопывания распространяется как на родительские, так и на дочерние элемен-
ты; поскольку для d i v не заданы вертикальные поля, то нижнее поле d i v схлопывается с нижним полем последнего дочернего абзаца. А так как полная вели-
чина поля отлична от нуля, то необходимо оставить заданное для абзаца поле шириной 10 рх. Вот его-то и видно в нижней части объемлющего d i v (рис. 5).
Коль скоро диагноз поставлен, проблему легко исправить. Если добавить к d i v небольшой вертикальный отступ в 1 рх, то условия, необходимые для схлопы-
вания полей, перестают удовлетворяться и разрыв исчезает:
#quickSummary, #preamble, #supportingText {
background: transparent url(bg4.gif) top left
repeat-y;
margin: 0 0 0 400px;
padding: Ipx 0;
width: 342px;


Фокусы с графикой


Определившись с заголовком и телом страницы, можно обратить внимание на эмблему в верхнем правом углу. Размещение картинки с прозрачными областями (в данном случае с тенью) поверх другой графики обычно означает, что при сохранении картинки надо учитывать, что же именно она перекрывает. Ши мог бы объединить слои в модели Photoshop и сохранить окончательное изображение эмблемы в формате GIF
или JPEG вместе с нижележащими фрагментами фотографии и линий, чтобы сберечь эффект прозрачности. А мог бы вместо этого удалить фоновые области и сохранить только прозрачный GIF, пожертвовав большей частью теней. Но поскольку эмблема считается не столь важным графическим образом, Ши решил воспользоваться
форматом PNG и избавить себя от некоторых сложностей. В формате PNG с 256 уровнями альфа-прозрачности эффект тени не пропадает, на каком бы
фоне ни выводить изображение. На рис. 8 и 9 показано, как выглядит эмблема на двух разных фонах.
Ниже мы обсудим формат PNG более подробно, а пока отметим лишь, что браузер Microsoft Internet Explorer для Windows не понимает, что такое альфапрозрачность, поэтому PNG-файл необходимо от него скрыть. Проще всего воспользоваться для этой
цели селектором дочернего элемента, который этот браузер не поддерживает, и таким образом предлагать PNG-файл лишь тем браузерам, которые способны его нарисовать.
html>body #extradiv4 span {
background: transparent url(seal.gif) top
right no-repeat;
)

Очевидно, в более формальном веб-проекте поддержка со стороны Internet Explorer даже для графики не первостепенной важности необходима. Хотя функциональность одноуровневой (да/нет) прозрачности в формате GIF более ограничена, но все же ее достаточно при надлежащем планировании. На сайте Zen Garden эксперименты поощряются, но у ваших клиентов может быть другое отношение.

Один маленький шажок


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





Добавить статью в:
0



Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.



Поиск

***

Онлайн
Всего на сайте: 30
Гостей: 16
Пользователи: msvuser
Роботы: Google Bot, robot Bot, MSN Bot, robot Bot, robot Bot, Google Bot, robot Bot, robot Bot, crawl Bot, Yahoo Bot, Google Bot, MSN Bot, robot Bot

20-ка посетителей: bobbydl2, msvuser, vanessajk69, KrskgruzStoda, Nasibmak, Stasbor, franciscohf3, Jamesvum, RafaelNew, joeqe11, ZarkosKt, DaroNem, Lantana, fredakq18, Miltengew, Samueljaf, AgnesAccony, IngvarGecy, emilyey1, EinarOn


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги