Как окружить фото текстом и задать отступы текста от картинки
26.12.09 Секреты верстки сайтов
Сайт месяца: французкие духи в Киеве
Ничего сложного в том, чтобы сделать обтекание картинки текстом, нет. В то же время, вопрос какой код нужен для задания отступов текста от картинки или фотографии достаточно распространенный у новичков, которые только начали вести блог или постигать основы html+css. В этой статье я приведу пару типичных решений для создания отступа картинки от текста в виде кода html и css.
Способ 1: Вписываем код отступа текста для отдельной картинки или фотки
Простой способ задания обтекания картинки текстом, не требующий знаний html и css.
Чаще всего встречается задача, когда нужно расположить картинку слева и чтоб при этом ее сверху, справа и снизу окружал текст. Еще желательно, чтобы текст располагался не вплотную к вставленной в статью фотографии или схеме, а немного отступал от картинки. Как правило, большинство админок генерируют код для вставки изображения, при котором картинка располагается слева, а текст начинается не справа вверху от картинки, в справа внизу, что удобно для крохотных иконок, но не подходит для больших картинок. Чтобы сделать обтекание текстом для изображения, как в этом способе, при вставке картинки в статью нужно написать такой код:
1 2 3 4 5 | <img src="здесь_веб-адрес_картинки" alt="Здесь_подсказка_если_картинка_не_загрузлась" title="Здесь_встплывающая_над_картинкой_подсказка" width="ширина_ картинки_в_точках_числом" height="высота_ картинки_в_точках_числом" align=”left” style="margin: 3px 12px 0px 0px;" /> |
Например, для вставки картинки, которую вы видите в этой статье чуть выше, код html и css выглядит так:
1 2 3 4 5 6 | <img src="http://www.web-article.com.ua/wp-content/uploads/2009/12/otstup-kartinka-tekst.jpg" alt="Задаем отступ текста для фото" title="Задаем отступ текста для фото" width="300" height="350" align="left" style="margin: 3px 12px 0px 0px;" /> |
В раскрутке блога сегодня помогают:
Если вас, как и меня, интересует продвижение сайта, но вам лично заниматься этим лень – стучитесь к профессионалам и готовьтесь отбиваться от клиентов.
Если вас, как и меня, интересует продвижение сайта, но вам лично заниматься этим лень – стучитесь к профессионалам и готовьтесь отбиваться от клиентов.
Метки: css, html, верстка, картинка, обтекание, отступ, текст, фото
Чем отличается GIF от JPG. Разница между популярными графическими форматами
29.07.09 Секреты верстки сайтов
Для графики в интернете есть 2 основных требования: картинка должна быть максимально возможного качества и в тоже время она должна быстро загружаться. Когда интернет был дорогим и медленным, важнее была скорость загрузки фотографии, сейчас же более важно качество и отсутствие искажений на ней. Но, как и прежде, основными графическими форматами в интернете остаются GIF и JPG (JPEG).
Оба эти формата обеспечивают максимальное качество хранимой информации при ее минимально возможном объеме, т.е. скорости загрузки на компьютер пользователя сети. Разница между форматами GIF и JPG состоит в том, что они ужимают и хорошо показывают информацию разных типов.
Формат JPG (JPEG) лучше всего подходит для того, чтобы хранить фотографии, картины, яркие рисунки с плавным переходом одного цвета в другой (градиенты). Сохраняя информацию в формате JPEG, вы сами определяете, что вам важнее – четкость и достоверность графики или скорость, с которой ваши фотографии смогут отправляться по почте или загружаться с online-фотоальбомов и блогов.
Пример графики, которую нужно сохранять в JPG:
Формат GIF предназначен для хранения одноцветных или черно-белых рисунков, схем, иконок, логотипов, флажков и т.п. Если цветов и оттенков на рисунке меньше, чем 256 и при этом важна четкость линий и равномерность цвета, картинку следуют сохранять в формате GIF.
В раскрутке блога сегодня помогают:
Для того, чтобы продать кондиционеры panasonic, вам не обойтись без хорошей рекламы. Эффективную оригинальную рекламу обеспечит киевское креативное агентство InnHouse. С хорошей рекламой продать можно не только кондиционеры.
Для того, чтобы продать кондиционеры panasonic, вам не обойтись без хорошей рекламы. Эффективную оригинальную рекламу обеспечит киевское креативное агентство InnHouse. С хорошей рекламой продать можно не только кондиционеры.
Простая анимация для сайта средствами CSS
22.07.09 Секреты верстки сайтов
Самые красивые и яркие анимационные ролики для веб-сайтов создаются, конечно же, с помощью технологий Adobe Flash и Microsoft Silverlight. Но далеко не всем веб-сайтам нужны дорогостоящие и трудоемкие анимационные шапки, а меню на flash еще и очень плохо индексируются. Уже никого не удивляют акционные баннеры, иконки или графические меню, которые могут слегка меняться при наведении на них указателя мыши.
Интерактивная анимация, которая состоит всего из двух кадров (активно/неактивно), имеет ряд преимуществ: она недорогая, легко создается, быстро загружается и при этом заметно оживляет сайт, делая его более дружественным для посетителя. Чаще всего такая двухкадровая анимация, реагирующая на действия пользователя, создается с помощью JavaScript или CSS. В этом уроке мы рассмотрим второй способ, т.к. анимация с помощью каскадных стилей имеет ряд преимуществ перед скриптовой анимацией.
Ярким примером использования возможностей CSS для реализации интерактивной двухкадровой анимации является сайт украинской художницы Елены Миросединой:
Многие графические элементы на этом сайте, включая меню, меняют цвет или форму при наведении на них указателя мышки. Получается достаточно весело, оригинально и в то же время не утомительно. Рассмотрим подробнее, как это сделано, на примере пункта меню «english».
Бесплатно скачать коды урока интерактивной CSS-анимации
В раскрутке блога сегодня помогают:
Для того, чтобы правильно оценить стоимость и значимость ссылки, нужно правильно посчитать количество внешних ссылок на этой странице. Это позволит сэкономить немного денег на покупке ссылок или продать статью на бирже контента подороже.
Для того, чтобы правильно оценить стоимость и значимость ссылки, нужно правильно посчитать количество внешних ссылок на этой странице. Это позволит сэкономить немного денег на покупке ссылок или продать статью на бирже контента подороже.
Метки: css, flash, html, JavaScript, Silverlight, анимация, браузер, верстка, иконка, класс, код, создание, стиль
Код CSS, который понимает только Internet Explorer
12.06.09 Секреты верстки сайтов
Браузер Internet Explorer не всегда утруждает себя соблюдением всех стандартов верстки W3C. В свое время это было «фишкой» Microsoft, которая пользовалась своим монопольным положением на рынке ПО, чтобы еще больше его упрочить. А до этого «вольное трактование» языка разметки помогло победить Netscape. Впрочем, речь в этой статье пойдет не о погибшем браузере и даже не о его победителях.
В результате отступления Майкрософта от некоторых стандартов HTML и CSS код может трактоваться по-разному браузером Internet Explorer и другими, «честными» браузерами (Firefox Mozilla, Opera, Safari и др.). Опытные веб-мастера и html-кодеры знают о нюансах создания качественного кроссбраузерного кода, но новички, у которых еще нет хорошего практического опыта верстки сайтов, часто набивают шишки и вспоминают родителей бывшего главы Microsoft. К сожалению, злость и обвинения – дело неконструктивное. Проблемы лучше решать, опираясь на опыт и шишки, желательно, чужие.
В этой статье я хотел бы рассказать об одной уловке при описании стилей CSS, позволяющей решить распространенную проблему: как сделать так, чтобы код верстки понимался только браузером Internet Explorer, но игнорировался всеми остальными «нормальными» браузерами. При этом JavaScript нам не понадобится, достаточно правок общего стиля CSS.
Растровые графические форматы для веб
31.01.09 Веб-дизайн, Секреты верстки сайтов
Графического формата, который был бы наилучшим для хранения и передачи по сети графической информации, не существует. Каждый формат является компромиссом между качеством картинки и скоростью ее загрузки. Понимание того, какой тип изображений в каком формате сохранять, поможет сделать графику на сайте более качественной и в тоже время сделает ваш сайт максимально легким. Это одна из основных характеристик качественного профессионального веб-дизайна.
1. JPEG: фотографии и красочные рисунки
JPEG – очень популярный формат представления графики в интернет. Фотографии, картины, рисунки высокого качества с большим количеством цветов – все это сохраняется с расширением .jpg. Формат способен отображать 16,7 миллионов оттенков. Прозрачность и анимация не поддерживаются.
Качество изображения зависит от степени сжатия файла: чем больше ужат файл, тем хуже картинка, но зато меньше размер самого файла. Потому хранение фотографий в JPEG – это компромисс между качеством изображения и его размером. На сильно ужатом файле этого формата появляются размытые области, теряется контрастность. Качество картинки теряется с каждым новым сохранением файла в JPEG, потому хранить промежуточные результаты работы нужно в формате, который не влияет на качество изображения. Например, в PSD.
Изображения в формате JPEG, как и все остальные форматы для интернета, бесполезно архивировать – их размер не уменьшится, поскольку они уже являются архивом.
Метки: gif, ico, jpeg, Photoshop, png, растровый, точечный, Фотошоп
