Посмотрите на любую веб-страницу, и вы увидите комбинацию текстового контента и изображений. Оба эти элемента являются важными компонентами успеха веб-сайта. Текстовое содержимое - это то, что читатели сайта будут читать и какие поисковые системы будут использовать как часть своих алгоритмов ранжирования. Изображения добавят визуальный интерес к сайту и помогут акцентировать текст.
Добавление текста и изображений на веб-сайты легко. Текст добавляется со стандартными тегами HTML, такими как абзацы, заголовки и списки, в то время как изображения помещаются на страницу с помощью элемент. Однако, если вы добавили изображение на свою веб-страницу, вы можете захотеть, чтобы текст был рядом с изображением, а не выровнен под ним (что по умолчанию образ, добавленный в HTML-код, будет отображаться в браузере). Технически, вы можете достичь этого, используя CSS (рекомендуется) или добавив визуальные инструкции непосредственно в HTML (не рекомендуется, поскольку вы хотите сохранить разделение стиля и структуры вашего сайта).
Использование CSS
Правильный способ изменить способ отображения текста и изображений страницы и того, как их визуальные стили появляются в браузере, - это CSS. Просто помните, поскольку мы говорим о визуальных изменениях на странице (делая поток текста вокруг изображения), это означает, что это область каскадных таблиц стилей.
-
Сначала добавьте свое изображение на свою веб-страницу. Не забудьте исключить любые визуальные характеристики (такие как значения ширины и высоты) из этого HTML. Это важно, особенно для адаптивного веб-сайта, где размер изображения зависит от браузера. Некоторые программы, такие как Adobe Dreamweaver, будут добавлять информацию о ширине и высоте к изображениям, которые вставляются с этим инструментом, поэтому не забудьте удалить эту информацию из HTML-кода! Однако не забудьте включить соответствующий текст alt. Вот пример того, как может выглядеть ваш HTML-код:
-
Для стилизации вы также можете добавить класс к изображению. Это значение класса - это то, что мы будем использовать в нашем файле CSS. Обратите внимание, что используемое здесь значение произвольно, хотя для этого конкретного стиля мы склонны использовать значения «левый» или «правый», в зависимости от того, каким образом мы хотим, чтобы наш образ выравнивался. Мы находим, что простой синтаксис работает хорошо и легко для других, которым, возможно, придется управлять сайтом в будущем, чтобы понять, но вы могли бы дать это любое значение класса, которое вы хотите.
Само по себе это значение класса ничего не сделает. Изображение не будет автоматически выровнено слева от текста. Для этого нам нужно обратиться к нашему файлу CSS.
-
В вашей таблице стилей теперь вы можете добавить следующий стиль:
.оставил {
плыть налево;
заполнение: 0 20px 20px 0;
}
Здесь вы используете свойство CSS float, которое вытаскивает изображение из обычного потока документов (как обычно будет отображаться изображение, а текст выравнивается под ним), и он выравнивает его по левую сторону контейнера , Текст, который появляется после него в разметке HTML, теперь обертывает его. Мы также добавили некоторые значения заполнения, чтобы этот текст не был непосредственно направлен против изображения. Вместо этого у него будет приятный интервал, который будет визуально привлекательным в дизайне страницы. В сокращении CSS для заполнения мы добавили 0 значений в верхнюю и левую части изображения, а 20 пикселей - влево и вправо. Помните, что вам нужно добавить прописку в правую сторону выровненного слева изображения. Правое выровненное изображение (которое мы рассмотрим в какой-то момент) будет иметь дополнение к левой стороне.
-
Если вы просматриваете свою веб-страницу в браузере, теперь вы должны увидеть, что ваше изображение выровнено в левой части страницы, и текст красиво обтекает его. Другой способ сказать, что изображение «плавает влево».
-
Если вы хотите изменить это изображение для выравнивания вправо (например, на примере фотографии, которое прилагается к этой статье), это было бы просто. Во-первых, вы должны убедиться, что в дополнение к стилю, который мы просто добавили в наш CSS для значения класса «left», у нас также есть один для выравнивания по правому краю. Это будет выглядеть так:
.право {
float: right;
заполнение: 0 0 20px 20px;
}
Вы можете видеть, что это почти идентично первому CSS, который мы написали. Единственное различие - это значение, которое мы используем для свойства «float» и используемых дополняющих значений (добавление некоторых к левой части нашего изображения вместо правого).
-
Наконец, вы изменили бы значение класса изображения с «left» на «right» в вашем HTML:
-
Посмотрите на свою страницу в браузере, и ваше изображение должно быть выровнено вправо с аккуратным обтеканием текстом. Мы склонны добавлять оба эти стили: «слева» и «справа» ко всем нашим таблицам стилей, чтобы мы могли использовать эти визуальные стили по мере необходимости, когда создаем веб-страницы. Эти два стиля становятся приятными, многоразовыми функциями, которые мы можем использовать, когда нам нужно стилизовать изображения с обтеканием текста вокруг них.
Использование HTML вместо CSS (и почему вы не должны этого делать)
Несмотря на то, что можно сделать обертку вокруг изображения с помощью HTML, веб-стандарты определяют, что CSS (и шаги, представленные выше) - это способ, чтобы мы могли поддерживать разделение структуры (HTML) и стиля (CSS). Это особенно важно, если учесть, что для некоторых устройств и макетов этот текст может нет необходимо обтекать изображение. Для небольших экранов макет адаптивного веб-сайта может потребовать, чтобы текст действительно выровнялся под изображением и что изображение растягивает всю ширину экрана. Это легко сделать с помощью медиа-запросов, если ваши стили отделены от разметки HTML.В сегодняшнем мире устройств с несколькими устройствами, где изображения и текст будут отображаться по-разному для разных посетителей и на разных экранах, это разделение имеет важное значение для долгосрочного успеха и управления веб-страницей.
