Навигация

Партнеры


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

CSS - часть 17


Обработать переполнение


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

Переполнение при абсолютном позиционировании

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

Переполнение по вертикали


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

Пользуйтесь плавающими объектами


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

Попробуйте изменить дизайн


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

Обработка переполнения


Чем пытаться управлять длиной контента, гораздо удобнее воспользоваться механизмом автоматической обработки переполнения, встроенным в CSS. Свойство
overflow было специально придумано для этой цели, но назвать его «серебряной пулей» все же нельзя. Если ограничить высоту элемента 150 пикселями и указать
для свойства o v e r f l ow значение a u t o , то область будет обрезана точно по указанной высоте, а для просмотра не поместившегося контента пользователь
получит полосу прокрутки. Однако слишком большое число полос прокрутки на
одной странице раздражает пользователей. Можно вместо a u t o задать значение hidden, тогда непоместившийся контент вообще не будет показан. Но, как правило, скрывать контент таким образом не стоит, поскольку невидимый контент бесполезен для читателя. Впрочем, бывают ситуации, когда такой метод - как раз то, что нужно.

Воспользуйтесь сценарием


Если вы допускаете минимальное применение javascript в дополнение к таблицам стилей, то решить проблему можно с помощью сценария. Один из авторов Zen
Garden, Шон Инман (Shaun Inman), предложил полезный метод расчистки места за абсолютно позиционированными элементами, аналогичный свойству c l e a r
для плавающих объектов.

Задавайте размеры в em, а не в рх

Этот совет применим только в случае, когда перекрытие возникает лишь из-за увеличения размера шрифта; перекрытия вследствие динамического роста длины контента он не излечит. Абсолютное позиционирование с точностью до пикселя обеспечивает максимальный контроль, но страдает от отсутствия гибкости - раз уж элемент позиционирован, то останется точно там, куда его поместили. Задание же для свойств t o p и l e f t значений, выраженных в единицах em, дает чуть больше свободы, поскольку позиция будет зависеть от размера шрифта. Если размеры элементов, расположенных один под другим, заданы в em, то при сдвиге нижнего края
верхнего элемента сдвигается и верхний край нижнего.
Этому методу недостает точности, но во многих ситуациях он работает.

Дизайн, учитывающий возможность переполнения


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

Графика


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

Японский сад
Форматы и оптимизация изображений


«Ва» - японское слово, означающее гармонию. Иногда здесь подходит смелый, яркий
дизайн, Но вариант «Японский сад» Масанори Кавачи взывает к более утонченной, универсальной эстетике. Он попытался уловить суть «ва» и показать работу, которая понравилась бы представителям самых разных национальностей.
Бросающиеся в глаза японские мотивы в выбранной Кавачи теме указывают на его происхождение, но мягкость визуальных эффектов и обаятельность графики произведут впечатление на любого зрителя, откуда бы он ни был родом.

Графические форматы


Достичь изысканной прозрачности «Японского сада» можно, только хорошо разбираясь в имеющихся графических форматах. Из тысяч разных форматов, применяемых в компьютерной графике, лишь три имеют непосредственное отношение к Web: GIF, JPEG
и PNG. Все три позволяют сжимать изображение, чтобы уменьшить его размер и тем самым ускорить загрузку.

Почему так важна оптимизация


Зачем нужно оптимизировать изображение? Ведь широкополосные каналы связи доступны повсеместно, к чему уж так-то скаредничать? Конечно, высокоскоростной доступ в Интернет получает все более широкое распространение, но пока еще не стал общедоступным. Многие пользователи по-прежнему работают с модемами, дающими скорость не более 56 Кбит/с, а в некоторых странах за пользование телефонными линиями взимают плату. Каждый лишний килобайт увеличивает время загрузки, а каждая минута стоит реальных денег.
Не будем забывать и о сервере. На сайты с высоким трафиком заходит много пользователей; чем большую долю полосы пропускания потребляет каждый посетитель, тем шире должна быть общая полоса пропускания, доступная веб-серверу, а значит, увеличивается плата за хостинг. Каждый килобайт, сэкономленный на
графическом файле, оборачивается экономией денег как пользователей, так и владельцев сайта. 2 Кб тут, 2 Кб там - вроде немного, но в итоге выливается в солидную сумму. К примеру, если урезать на 2 Кб карт - фотоинку, которую каждый день просматривают 100000 посетителей, то общая экономия составит 6 Гб в месяц.

Какой формат выбрать

В разных графических форматах применяются разные цветовые модели, разные виды сжатия и разные формы достижения прозрачности. Чтобы выбрать подходящий формат, нужно знать сильные и слабые стороны каждого.
В случае сжатия без потери информации сохраняются все детали изображения, при сжатии же с потерей информации часть деталей утрачивается ради уменьшения размера файла. У каждого метода есть свои области применения.
Глубиной цвета характеризуют максимальное число цветов в изображении. Глубина цвета измеряется в битах, чем больше бит используется для представления цвета, тем больше общее число доступных цветов. Если глубина цвета равна 8 бит, то всего может
быть 256 цветов, при глубине цвета 24 бит общее число цветов превышает 64 миллиона.

Формат GIF


Дедушка всех графических форматов - GIF - существует в той или иной форме уже почти 20 лет. В нем применяется метод сжатия без потери информации, называемый LZW, лучше всего он подходит для сохранения изображений, в которых есть обширные
области, закрашенные одним цветом. Хотя в формате GIF информация сохраняется без
потерь, но в нем используется так называемый индекс цвета, а это палка о двух концах. В одном изображении может быть не больше 256 цветов, поэтому применение этого метода ограничено лишь изображениями, содержащими мало цветов. Зато
для изображений, содержащих меньше 256 цветов, можно использовать меньший индекс цвета, что уменьшает окончательный размер файла.
Изображения с большим числом цветов можно сохранить в формате GIF, но ценой утраты информации о цвете, в результате чего мы приходим к сжатию с потерей информации. Формат GIF поддерживает 1-битовую прозрачность. Это означает, что пиксель может быть либо полностью прозрачным, либо полностью непрозрачным.
Если вы привыкли к графическому редактору, работающему со слоями и обеспечивающему многоуровневую альфа-прозрачность, то подобное ограничение
раздражает. Но даже такой режим полезен, если заранее известно, на каком фоне будет отображаться GIF-файл. Кроме того, формат GIF поддерживает
простую покадровую анимацию и постепенную загрузку (эта техника называется черезстрочной разверткой). Правда, и то и другое приводит к увеличению
размера файла.



css
css

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



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



Поиск

***

Онлайн
Всего на сайте: 22
Гостей: 10
Пользователи: - отсутствуют
Роботы: robot Bot, robot Bot, Yandex Bot, robot Bot, Yahoo Bot, robot Bot, Google Bot, robot Bot, robot Bot, Google Bot, crawl Bot, Yandex Bot

20-ка посетителей: William34Fed, ThomasNeT, LeonSa, kyleur3, malloryof2, Jamesvum, GioresKa, Hallej, queenwr69, Marionhot, Ernestloro, dalerr4, Haroldmuby, juliepp1, fluellusy, lynnzm11, casandrari18, mariettavl18, ArdaDig, Aunundneigh


Партнеры

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

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

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

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