TML, CSS, СКРИПТЫ: практика создании сайтов

Ибо в первом случае мы

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

втором — с точностью до наоборот. Если изображение нужно уменьшить,

сделать это лучше всего при помощи графического редактора. При этом,

сократив линейные размеры, удастся в той или иной степени «урезать» и

объем файла.

Но и растягивать картинки нужно с умом. Во многих случаях эта процедура

лишена смысла, ибо дополнительной информации в изображении так или

иначе не появится. Искусственная растяжка хороша, к примеру, для

изображений, не изменяющихся в каком-то одном направлении, к примеру, для

линейных градиентов.

188 Часть II. Применение веб-технологий стороны клиента для создания сайтов

Предположим, на странице требуется горизонтальная полоска оттенения

высотой 20 пикселов и шириной 600. Для этого подготавливаем градиент с

фактическими размерами 1*20, после чего растягиваем его при помощи CSS-

свойства width до требуемых 600 пикселов. В значении свойства height

указываем, разумеется, фактическую высоту.

Другой возможный вариант — демонстрация того или иного изображения в

увеличенном масштабе с подчеркиванием растра (чаще всего— в

оформительских целях). Но хорошие результаты это дает только в том случае, когда

в значениях свойств width и height указаны величины, кратные реальным

ширине и высоте растягиваемого изображения в пикселах. Ресэмплированная

картинка, увеличенная в нецелое число раз, выглядит крайне неряшливо.

I Листинг 4.7» Демонстрация использования свойств width и height

I для указания линейных размеров графических изображений

S…W. .^„..^,.X?.U.;U4,..w ….w.»v. ..„„.„„…„„\w w…w v..„w…v

^> «http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd»>

Реальные размеры картинки:р>

style=»width: 15брх; height: 114px; border: solid lpx #ccc»

Увеличение линейных размеров втрое:р>

style=»width: 468px; height: 342px; border: solid lpx #ccc»

Paстяжение линейного градиента в одном направлении:р>

style=»width: бООрх; height: 20px; border: none» />

Результат отображения страницы, код которой описан в листинге 4.7,

приведен на рис. 4.10.

/>р>

/>р>

Глава 4. Использование блочной модели С8Э2дпя верстки сложных веб-страниц 189

^штттт^ш^тшт

Qtw Оряек* $ц& Я@?$#ш g&tiwim инструменту С$кж*

Ф * Ф5 ‘ St ^3 чД* !J f’le7//Z:/example5/04/07/1ndex.html 3 ® ^*^ [ИГ

^щ

0» %&вт$шШ iy UtesfcHearilrwes

Реапьные размеры карпшкн:

р Увеличение ЛЕшейныхразмфов втрое:

Растяжение линейного градиента в одном направлении:

Готово

^w^.^^^

Рис. 4.10. Пример использования CSS для определения линейных размеров изображений

Переполнения и предельные размеры

Порой случается, что значения свойств, определяющих линейные размеры

элемента, не позволяют содержимому целиком уместиться в «прокрустовом

ложе» отведенных ему границ.

По умолчанию браузеры могут выводить содержимое элемента согласно

своим собственным установкам, но должны предоставлять пользователю

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

для него контейнере.

190 Часть II. Применение веб-технологий стороны клиента для создания сайтов

Отображением содержимого можно управлять при помощи свойства

overflow. Значением этого свойства по умолчанию является ключевое слово

auto. Помимо него, возможны также следующие значения:

? visible — содержимое отображается за пределами элемента;

? hidden — содержимое обрезается по границе элемента;

? scroll— содержимое отображается в пределах элемента, но при этом

обеспечивается возможность его прокрутки.

Internet Explorer, начиная с версии 4.0, а также ряд других браузеров,

поддерживает нестандартные свойства overfiow-x и overfiow-y, которые

позволяют определять алгоритм отображения содержимого раздельно по

вертикали и горизонтали. Эти свойства «официально» войдут в спецификацию CSS3.

Несмотря на то, что компания Microsoft явилась родоначальником этих,

безусловно, полезных свойств, ее браузер пока что с трудом управляется со

стандартным свойством overflow.