Навигация

Партнеры

ArtGrafica - АртГрафика - скачай счастье :) » Статьи по дизайну » WEB дизайн » CSS 35. Жизнь дизайнера - радужный путь.

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

CSS 35. Жизнь дизайнера - радкжный путь.


Упругая лужайка
Для решения визуальных проблем иногда приходится потрудиться


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

Бумага или резина?


Проектируя сайт, дизайнер часто должен выбирать между двумя разными принципами верстки: либо задать для области контента фиксированную ширину в пикселях и соблюдать это ограничение для всего сайта, либо позволить странице заполнить все окно браузера, не налагая никаких ограничений по ширине.
Оба подхода имеют названия. Первый часто называют версткой с фиксированной шириной, с ограничениями или застывшей. Второй - версткой с переменной
шириной, полноэкранной или текучей. Но как бы они ни назывались, это два фундаментальных принципа верстки современных веб-сайтов.
У каждого подхода есть достоинства и недостатки.
Один из самых неприятных для графических дизайнеров аспектов Web - это переменная ширина холста. Когда делается дизайн печатных материалов, разме-
ры и пропорции конечного результата заранее известны. Что касается Web, то посетитель сайта может просматривать его как в нераспахнутом окне браузера при
разрешении 640x480 пикселей, так и в распахнутом на весь экран окне при разрешении 2048x1536 пикселей. Все промежуточные варианты тоже не исключаются.
Фиксированная ширина Фиксированная ширина позволяет до некоторой степени контролировать размер холста путем задания точной ширины макета в пикселях. Это идеально в случае, когда нужно сохранить пропорции изображений, которые не могут масштабироваться, и шрифта, который хотя и масштабируется, но непредсказуемо.
Но в таком случае пользователь, просматривающий страницу в окне небольшого размера, увидит полосу горизонтальной прокрутки, так как макет может не
уместиться в отведенной области. С другой стороны, пользователи, работающие с большим окном, увидят по бокам пустое пространство.

Переменная ширина


С другой стороны, страница, сверстанная с переменной шириной, заполняет все окно вне зависимости от разрешающей способности экрана. Теоретически это идеальное решение, учитывающее различия в размерах окна, но не так-то легко найти оптимальный баланс между шириной 600 и 200 пикселей. Часто приходится в качестве компромисса соглашаться на наименьший общий знаменатель, когда для больших окон
разрешается масштабирование, но дополнительно появившееся пространство заполняется неоптимальным образом. Дизайнер Камерон Адаме (Cameron Adams) пробовал решить эту проблему за счет использования javascript, но CSS сам по себе в этом отношении ограничен.
Текучая верстка проблематична с точки зрения сохранения пропорций, они могут непредсказуемо нарушаться при изменении ширины окна. Соотношение
1,6:1 между размерами фотографии и расположенной рядом с ней закрашенной областью может превратиться и в 2:1, и в 3:1, и даже больше по мере раздвигания
окна по горизонтали. Карт - фотоинки не растягиваются, поэтому остается лишь иметь эту проблему в виду и избегать слишком строгих требований к пропорциональности.

Эластичный дизайн


Ну хорошо, мы поговорили о разных методах верстки, но ведь эта глава посвящена специальным эффектам, не так ли? Именно так, в «Упругой лужайке» продемонстрирован эффект «эластичного дизайна», который, не являясь ни версткой с фиксированной, ни версткой с постоянной шириной, представляет собой
некоторую смесь из того и другого. Теория, стоящая за методом Гриффита, выглядит
вполне логично. Шрифт, размеры которого заданы в относительных единицах, скажем, % или em, может становиться больше или меньше в зависимости от
размеров окна браузера. Ну а если размеры различных блочных элементов задавать в тех же единицах, то не должен ли масштабироваться сам дизайн*. Именно в этом и состоит суть эластичного дизайна.
В следующем фрагменте кода показан пример использования относительных единиц в «Упругой лужайке». Ширина элементов, отступов, полей и т.д. выражена в единицах em, а не рх, поэтому все масштабируется вместе со шрифтами. На рис. 3-7 видно, как изменяются пропорции при изменении размера окна браузера.

body {
padding: 0 0 бет 0;
((container {
width: 48em;
}
tpreamble, #supportingText {
width: 32em;
margin-left: 16em;
}


Так просто? Всего-то и надо задавать ширину и высоту в единицах em и можно ни о чем больше не беспокоиться? Не совсем. Поскольку размеры картинок
фиксированы, масштабировать их вместе с текстом и сохранить пропорции не удастся. Переход к эластичному дизайну требует пересмотра некоторых подходов к проектированию сайтов.
Есть два способа приспособить картинки фиксированной ширины к эластичному контексту. В первом применяется повторение фоновых изображений, во втором - усечение.

Повторение

По умолчанию в CSS фоновое изображение повторяется по горизонтали и вертикали и заполняет всю область элемента. Обычно бывает полезно отключить
повтор в обоих или хотя бы в одном направлении, но эластичный дизайн будет выглядеть лучше, если изображение повторяется: тогда, как бы велики ни оказались размеры элемента, фон заполнит его целиком, не оставляя пустот вне области изображения.
В «Упругой лужайке» весь элемент body замощен повторяющимся изображением зеленой травки. Элементы # l i n k L i s t 2 , #preamble и # s u p p o r t i n g T e x t
заполнены вариантами той же картинки, но других цветов. В сочетании они создают эффект зеленого фона, поверх которого расположены прозрачные
колонки других оттенков, содержащие текст и ссылки.
Можно было бы успокоиться, придав каждой колонке стандарт - фотоную прямоугольную форму, но Гриффит решил расширить концепцию эластичного дизайна,
добавив закругленные уголки.
Однако не каждое изображение можно повторить. Если только все четыре края картинки не окрашены в один и тот же цвет, то нужно обращать особое внимание на стыки. На небольшом фрагменте необработанного изображения травы, отчетливо видны горизонтальные и вертикальные линии на стыках повторяющихся квадратиков.
Избежать этого можно с помощью небольшой корректировки изображения в Adobe Photoshop. Фильтр Offset (Filter —> Other —> Offset) позволяет имитировать выдвижение картинки за границы холста и появление с другой его стороны, так что сразу становится видно, что произойдет на стыке.
Конкретный способ выбирайте сами - можете взять инструмент Clone Stamp или Healing Brush, чтобы клонировать участки нестыкующихся областей для закрашивания швов,
или воспользоваться рассмотренным в главе 4 методом растушевки или какой-либо другой техникой, наиболее подходящей для имеющегося изображения.

Усечение

Приводя в своей статье Elastic Design цитату из онлайнового дневника Хайко Хебига (Haiko Hebig), Гриффит отмечает, что другой подход к эластичности связан с использованием изображений, допускающих переменное усечение. По мере увеличения или уменьшения доступной области становится видна большая или меньшая
часть изображения.
Есть два простых способа организовать такого рода эластичность: применить свойство overflow: hidden к контейнеру изображения, для которого задана ширина в процентах, или же связать с элементом переменной ширины фоновое изображение. Карт - фотоинку шириной 600 пикселей можно вложить в div:

<div class="wrapper">
<img src="skyline.jpg" width="600"
height="200" alt="Skyline" />


Далее, если для этого d i v указать ширину, выраженную в процентах, то часть изображения можно скрыть, задав свойство overflow: hidden:
#wrapper {
width: lOem;
overflow: hidden;


Вместо этого можно связать изображение непосредственно с div, указав его в качестве фонового:

ttwrapper {
width: 10em;
background: url(skyline.jpg) no-repeat;
}

Если изображение повторяемо, то можно опустить атрибут n o - r e p e a t и вымостить им элемент в случае, когда размер #wrapper начинает превышать исходный размер изображения.

Оттолкнулись - и вперед

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

max-width:
#container {
max-width: 7 00рх;
}


Однако Microsoft Internet Explorer 6 для Windows не поддерживает свойство max-width. Имеются способы обойти это ограничение, но все они несовершенны. Причуды браузеров могут побудить к отказу от экспериментов, но что же поделать - освоение нового всегда проходит с переменным успехом, само по себе это не так уж плохо.
Придумывание новых способов работы в Web может окончиться как успехом, так и неудачей, важен конечный итог. «Упругая лужайка» - это блестящий пример того, как эксперименты одного дизайнера могут принести пользу всем.




c Css



600


css

css
css

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



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



Поиск

***

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

20-ка посетителей: AgnesAccony, Jamesvum, jodiezw60, noemiep4, tinatz60, Fedorelorb, Haukeoi, elsapb3, nikGyncpayonee, Jamesameda, qqodwohuch, lanajw18, fluellusy, ArtOfBeautyexory, curtisiy3, joshuaor4, jeremylj4, lunar.elf, Melvinvor, sherriqr69


Партнеры

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

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

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

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