WebClub - Всероссийский Клуб Веб-разработчиков
WebClub.RU » Архив » ВАСЯ "9 на 12" (Параметры WIDTH и HEIGHT)

ВАСЯ "9 на 12" (Параметры WIDTH и HEIGHT)


Дата публикации: 16-03-2013

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

Практически в любой статье/книге о создании и редактировании HTML упоминается о том, что при размещении в документе графики, в рамках тэга IMG полезно использовать параметры ширины и высоты (WIDTH и HEIGHT). Реже указано, почему. И практически никогда не упоминается о тех возможностях управления расположением элементов на странице, которые скрыты в этих скромных установках.
1. ШИРИНА МОЕЙ КАРТИНКИ.

Для полноты раскрытия материала, начну с много раз повторенного. Вы наверняка давно это знаете и можете сразу переходить на п.2. Для начинающих же, или тех кто забыл объясняю:

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

В принципе, картинка будет видна и без них, и даже - в правильном размере (за редким исключением). Но в этом случае браузер сначала разместит текст, а потом, когда картинка начнет подгружаться, раздвинет и переформатирует его, освобождая нужное место. Часто это выглядит достаточно неаккуратно.

Стоит также упомянуть (а то я смотрю, вы потянулись проверять свой код), что умные HTML-редакторы автоматически вставляют нужные значения WIDTH и HEIGHT при импорте картинки. Правда, знаю об этом по слухам: сам не пробовал, не пользовался.
2. А КАКОЙ У ВАС РАЗМЕР ГОРЧИЧНИКА?

Не вызывает сомнения, что если для изображения вашего логотипа, имеющего размеры 200х50 точек, задать значения WIDTH и HEIGHT равными, например 100 и 60, лого изменится до неузнаваемости. Начальник может лишить вас премии, а посетитель страницы - перепутать с фирмой-конкурентом.

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

Представьте, что вам надо изобразить на странице красную черту. Можно создать изображение размером 400х2 точки и поместить его в IMG. Выглядеть оно будет следующим образом:



В коде это выглядит так:

<IMG SRC="line-red.gif" WIDTH=400 HEIGHT=2 BORDER=0>

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



Код абсолютно такой же:

<IMG SRC="pix--red.gif" WIDTH=400 HEIGHT=2 BORDER=0>

Различие состоит лишь в том, что файл pix--red.gif представляет собой 1 пиксель (41 байт), а line-red.gif - настоящую полоску (65 байт).

Казалось бы, мы выиграли только 24 байта, ан не скажите... В данном случае полоса окозалась лишь немногим больше точки из за того, что умный GIF формат крайне эффективно работает с массивами одного цвета. Пользуясь подобным приемом для многоцветных изображений, можно добиться гораздо большей "выгоды".

Например:

(564 байта)
и

(90 байтов)

Но главное даже не в этом. Главное в том, что если вы используете на своей странице подобные полоски, бордюрчики, рамочки и даже цветные плашки отличающиеся не содержанием, а размером, вы вполне можете использовать только один файл-изображение, варьируя его WIDTH и HEIGHT. А это уже экономия на количестве соединений с сервером и довольно ощутимый выигрыш по времени. Понятно, что на следующей странице этот элемент уже не будет "вытягиваться из сетки", а будет взят браузером из "кэша".

В качестве примера могу привести свой собственный сайт novik.mdl.ru: все белые полоски на всех страницах - суть один единственный файл/пиксель "pixwhite.gif".
3. ПОДВИНЬСЯ - НЕ ПРОЗРАЧНЫЙ!

Простая казалось бы задачка. Клиент любит (стиль требует, дизайнер просит) начинать каждай параграф текста с "красной строки", т.е. с абзацного отступа, а не отделять параграфы пустой строкой, как это делают интуристы. Но браузеры игнорируют пробелы в начале строки, а CSS поддерживают далеко не все.

Что делать?

Начинать абзац с отступа! Причем попиксельно контролируя его величину.
Достаточно лишь поставить в начало каждого параграфа по ма-а-аленькой прозрачной точечке. У меня она называется "zero-pix.gif". Это GIF файл из одного пикселя, которому задан прозрачный "цвет". Можете скачать его прям отсюда (и сделать FILE > SAVE AS), чтоб не тратить время на изготовление такой пустяковины.

Указывая в его IMG тэге "WIDTH=20 HEIGHT=1" я точно задаю величину отступа равную 20 точкам.

Немножко потрудившись, можно соорудить и подобный изыск:

Один-единственный
прозрачный пиксель
в начале
строчки
дает нам
столь давно искомое
средство
управления
пробелами
и отступами
в тексте
в рамках
HTML

И не говорите мне ни про какие каскады стильных листов, панимаешь!

Аналогичным приемом можно, например, устанавливать фиксированную (вернее "не меньше, чем") высоту строки/ячейки в таблице.
4. ЕСТЬ МНЕНИЕ...

Дейвид Сигел (David Siegel), на странице которого, называющейся "Создание убийственных сайтов" (Creating Killer Web Sites) я впервые узнал об этом крайне простом и эффектном приеме, пишет о том, что, возможно, более "чистым" способом контроля отступов и пробелов является использование параметров HSPACE и VSPACE. В частности, потому, что сама картинка при этом не масштабируется.

Однако у меня, признаюсь, существуют сомнения на предмет универсальности этих параметров. И потом, так лениво делить величину нужного отступа на 2 (ведь добавляется он с обеих сторон картинки), а затем вычитать размер самой картинки.

Популярное

Не так давно в сети появился новый сервис, под названием Dead Man Zero. Этот сервис сделал...
Рынок социальных площадок уже давно стал стабильным. Несмотря на то, что время от времени...
Artisteer 4 – единственный в своем роде продукт, позволяющий автоматизировать работу над созданием...
Февраль 2017 (3)
Январь 2017 (1)
Август 2016 (1)
Май 2016 (2)
Ноябрь 2015 (1)
Октябрь 2015 (1)

Карта сайта: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41

Друзья сайта

Хотите продать свой сайт?
- Мы быстро и удобно для Вас сможем его купить:
  • Заявка на продажу сайта
  • Раcсматриваем цены на каждый сайт в индивидуальном порядке.

    Случайная цитата

    Olav Mjelde:

    "Они больше не делают баги, как Банни (Bugs Bunny)."

    Опрос

    Как Вам новый дизайн сайта?

    Отлично
    Неплохо
    Нормальный
    Ужасно