Вольный перевод и компиляция своего и зарубежного опыта
Практически в любой статье/книге о создании и редактировании 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 (ведь добавляется он с обеих сторон картинки), а затем вычитать размер самой картинки.