Вставляем картинки в HTML-страницу
Здравствуйте, уважаемый посетитель!
В разделе Работа с изображениями мы подготовили все необходимые картинки для оформления статьи. А сегодня будем непосредственно их вставлять в HTML-страницу.
При этом с помощью стилей CSS мы создадим несколько типовых решений, которые в дальнейшем позволят без труда размещать в контенте разные варианты графических элементов.
Содержание
- Формируем блоки div для возможных вариантов размещения картинок
- Размещаем картинки в HTML-странице
- Задаем параметры картинок с помощью стилей CSS
- Исходные файлы сайта
Формируем блоки div для возможных вариантов размещения картинок
Ранее в статье Оптимизируем размер (ширину, высоту) изображений при определении ширины размещаемых графических элементов в зависимости от параметров размера изображений и места их расположения в области контента мы определили несколько возможных вариантов. Исходя из этого, можно составить следующую таблицу соответствия параметров различных вариантов размещения картинок:
| № варианта | Ширина относительно области контента | Место расположения |
| 1 | 30% | Слева |
| 2 | 30% | Справа |
| 3 | 40% | Слева |
| 4 | 40% | Справа |
| 5 | 60% | По центру |
| 6 | 90% | По центру |
| 7 | 100% | По центру |
Рис.1 Таблица параметров различных вариантов размещения картинок
Теперь для каждого варианта определимся с блоками <dιv>, которые будут использоваться для вставки картинок. Для этого тегам <dιv> присвоим определенные классы. Что в дальнейшем позволит для каждого варианта с помощью свойств CSS устанавливать нужные параметры (размер и место расположения графических элементов).
Например, для первого варианта блок <dιv> может иметь вид <dιv class"img-left30"></dιv>. Для остальных можно назначить классы аналогичным образом:
| № варианта | Класс блока <dιv> | Ширина | Место расположения |
| 1 | img-left30 | 30% | Слева |
| 2 | img-right30 | 30% | Справа |
| 3 | img-left40 | 40% | Слева |
| 4 | img-right40 | 40% | Справа |
| 5 | img-center60 | 60% | По центру |
| 6 | img-center90 | 90% | По центру |
| 7 | img-center100 | 100% | По центру |
Рис.2 Таблица соответствия параметров картинок для различных классов <dιv>
В данном случае наименования классов присвоены исходя из того, что они относятся к изображениям (img) с учетом соответствующих параметров. По крайней мере, мне так удобно, но можно обозначить и по-другому.
Размещаем картинки в HTML-странице
Таким образом мы определили блоки <dιv> для каждого варианта. И теперь можно нужные изображения вставить в текст оформляемой статьи, разместив в соответствующих <dιv> сформированные в предыдущей статье теги <img>.
Получившиеся фрагменты HTML-кода (блок <dιv> вместе с тегом <img>) для всех размещаемых изображений можно представить в следующей таблице:
<div class"img-left40">
<img src="/images/article/main/ugon-avtomobilej-naibolee-rasprostranennoe-prestuplenie-v-rossii.jpg" alt="Угон автомобилей наиболее распространенное преступление в России" title="Угон автомобилей наиболее распространенное преступление в России">
</div>
<div class"img-right40">
<img src="/images/article/main/blokirovka-koles-dlya-zashchity-avtomobilya.jpg" alt="Блокировка колес для защиты автомобиля" title="Блокировка колес для защиты автомобиля">
</div>
<div class"img-center90">
<img src="/images/article/main/protivougonnaya-markirovka-stekol-avtomobilya.png" alt="Противоугонная маркировка стекол автомобиля" title="Противоугонная маркировка стекол автомобиля">
</div>
<div class"img-left40">
<img src="/images/article/main/zamena-stekol-avtomobilya.jpg" alt="Замена стекол автомобиля" title="Замена стекол автомобиля">
</div>
<div class"img-right40">
<img src="/images/article/main/protivougonnaya-markirovka-povyshaet-risk-byt-pojmannym-s-polichnym.jpg" alt="Противоугонная маркировка повышает риск быть пойманным с поличным" title="Противоугонная маркировка повышает риск быть пойманным с поличным">
</div>
<div class"img-right40">
<img src="/images/article/main/markirovka-legkosemnyh-chastej-dlya-zashchity-dorogostoyashchih-detalej.jpg" alt="Маркировка легкосъемных частей для защиты дорогостоящих деталей" title="Маркировка легкосъемных частей для защиты дорогостоящих деталей">
</div>
<div class"img-left40">
<img src="/images/article/main/vypolnenie-protivougonnoj-markirovki-v-servis-centrah.jpg" alt="Выполнение противоугонной маркировки в сервис-центрах" title="Выполнение противоугонной маркировки в сервис-центрах">
</div>
<div class"img-right40">
<img src="/images/article/main/markirovka-legkosemnyh-chastej-dlya-zashchity-dorogostoyashchih-detalej.jpg" alt="Маркировка легкосъемных частей для защиты дорогостоящих деталей" title="Маркировка легкосъемных частей для защиты дорогостоящих деталей">
</div>
Рис.3 Блок <dιv> вместе с тегом <img> для первой картинки
Как видно, здесь для третьей картинки в блоке <dιv> применен класс "img-center90" (поз.7), соответствующий расположению элемента по центру с размером в 90% от ширины области контента.
А для остальных, поочередно используются классы "img-left40", либо "img-right40", располагающие графические элементы в правой или левой части. Причем ширина для них задана в размере 40%.
Ну а теперь осталось только вставить эти фрагменты кода в соответствующие места текста оформляемой страницы. Как после этих дополнений будет выглядеть HTML-код главной страницы, можно посмотреть в разделе Исходные файлы сайта в прилагаемых дополнительных материалах в файле "main.php", расположенном в папке "articles".
Если сейчас после выполненных преобразований открыть главную страницу сайта, то можно увидеть, что в тексте статьи на данный момент все графические элементы оказались вставлены в левой части области контента с размером, соответствующим сохраненным в папке "/images/article/main" изображениям.
Рис.4 Вид страницы с картинками до назначения стилей CSS
Это обусловлено тем, что на данном этапе размещение картинок выполнено всего лишь в части, касающейся HTML-разметки страницы. Что обеспечивает их отображение по умолчанию - с левой стороны с их фактическим размером.
А для того, чтобы придать им нужную ширину и соответствующее месторасположение, необходимо назначить определенные свойства CSS. Что мы сейчас и сделаем.
Задаем параметры картинок с помощью стилей CSS
Как было отмечено на стадии адаптации под мобильные устройства при описании медиа-запросов используется метод "сначала мобильные". Который обеспечивает более быструю загрузку мобильных устройств (при таком способе сначала загружаются стили CSS, предназначенные для мобильных устройств, а уж только потом, в случае необходимости, могут быть переписаны и стили, свойственные стационарным компьютерам).
Поэтому назначать свойства CSS для определения параметров изображений тоже начнем с минимального разрешения экрана по ширине, которое в нашем случае составляет 320px.
Стоит отметить, что если при таких малых размерах экранов использовать графические элементы в 30%, 40% или 60% от ширины области контента, то во многих случаях такие изображения будут не очень хорошо разборчивы. Что, вряд ли, будет способствовать хорошему их восприятию пользователями.
Поэтому при таком разрешении сделаем так, чтобы все картинки стали выводиться по центру области контента с размером не менее 80% от ширины области контента. А при переходе через определенную контрольную точку, кода будет возможно стандартное отображение страницы, параметры графических элементов будем изменять в соответствии классами блоков <dιv> согласно таблицы, приведенной на рис.2.
Что же касается контрольных точек, то следует учесть, что при адаптивной верстке нашего сайта предусмотрен переход из одно колоночного вида в двух колоночный. Поэтому для назначения свойств CSS нужно учитывать несколько контрольных точек.
В связи с чем при назначении свойств CSS будем использовать медиа-запросы для следующих диапазонов разрешения экрана:
- 320px÷399px - все элементы по центру, ширина не менее 80%.
- 400px÷599px - расположение и размеры элементов в соответствии с классами блоков <div> (таблица рис.2).
- 600px÷699px - все элементы по центру, ширина не менее 80%.
- 700px÷1920px - расположение и размеры элементов в соответствии с классами блоков <div> (таблица рис.2).
И теперь осталось исходя из этих условий прописать нужные свойства CSS. Ниже приведен фрагмент таблицы CSS для диапазона 320px÷399px.
/*----------назначение стилей css для диапазона 320px÷399px-----------*/
.img-left30, .img-right30, .img-left40, .img-right40, .img-center60, .img-center90, .img-center100 {
margin: .625em auto .25em auto;
}
.img-left30, .img-right30, .img-left40, .img-right40, .img-center60 {
width: 80%;
}
.img-center90{
width: 90%;
}
.img-center100 {
width: 100%;
}
.img-left30 img, .img-right30 img, .img-left40 img, .img-right40 img, .img-center60 img, .img-center90 img, .img-center100 img {
width: 100%;
}
Рис.5 Назначение стилей CSS для диапазона 320px÷399px.
Как видно, здесь в стоке 15 для всех тегов <img> свойством width задан размер в 100% по отношению к родительским элементам <dιv>. Что дает возможность изменять размер картинок меняя ширину соответствующих им блоков <dιv>. Что и сделано в строках 6,9,12, где задана ширина блоков <dιv> для данного диапазона разрешения экрана.
И последнее, на что стоит обратить внимание, это то, что выравнивание по горизонтали блоков <dιv> здесь выполнено с помощью использования значения auto для свойства margin внешних отступов по горизонтали (поз.3). При этом для того, чтобы картинки не накладывались на текст, по вертикали заданы небольшие фиксированные отступы.
Если теперь открыть страницу с разрешением, соответствующим данному диапазону, то можно увидеть, что все картинки вставлены по центру с увеличенным размером.
Рис.6 Вид страницы при ширине экрана 320px
А теперь составим медиа-запрос для отображения страницы при увеличении ширины экрана более 400px. В этом случае местоположение картинок и их размер должно определяться исходя из классов блоков <dιv>, назначенных согласно таблицы соответствия параметров картинок для различных классов (рис.2).
/*----------назначение стилей css для диапазона 400px÷599px-----------*/
@media only screen and (min-width: 400px) {
.img-left30, .img-left40 {
float: left;
margin: .625em 1.25em .25em 0;
}
.img-right30, .img-right40 {
float: right;
margin: .625em 0 .25em 1.25em;
}
.img-left30, .img-left30 {
width: 30%;
}
.img-left40, .img-left40 {
width: 40%;
}
.img-center60 {
width: 60%;
}
}
Рис.7 Назначение стилей CSS для диапазона 400px÷599px.
Здесь следует отметить, что для того, чтобы расположить графические элементы справа или слева области контента, в стоках 4,8 применено свойство float. Которое не только смещает элементы в нужную сторону, но делает их плавающими, позволяя обтекать их рядом стоящим текстом.
Ну, а ширина всех графических элементов, которая при таком разрешении экрана должна быть менее 80%, устанавливается соответствующими значениями свойств width (поз.12,15,18) в согласно с таблицы, приведенной на рис.2.
Теперь откроем главную страницу при ширине экрана более 400px, например в 500px, и посмотрим как теперь она стала отображаться со вставленными в нее изображениями.
Рис.8 Вид страницы при ширине экрана 500px
Как видно, картинки расположились поочередно с разных сторон области контента с установленной для этих классов шириной в 40%.
Следующим шагом составим медиа-запрос для отображения страницы для диапазона от 600px до 699px. Дело в том, что при превышении контрольной точки в 600px сайт переходит в двух колоночный вид, от чего ширина области контента скачкообразно уменьшается на величину добавленного сайдбара.
Поэтому для этого диапазона сделаем аналогичные преобразования, как это было в первом случае при ширине экрана от 320px до 399px. Т.е. все картинки расположим по центру, а ширину тех, у которых она в предыдущем диапазоне составляла 30%, 40% и 60%, увеличим до 80%.
Соответствующий медиа-запрос представлен в следующей таблице.
/*----------назначение стилей css для диапазона 600px÷699px-----------*/
@media only screen and (min-width: 600px) {
.img-left30, .img-right30, .img-left40, .img-right40 {
float: none;
margin: .625em auto .25em auto;
width: 80%;
}
}
Рис.9 Назначение стилей CSS для диапазона 600px÷699px.
Как видно, для того, чтобы вставить элементы по центру достаточно для соответствующих блоков <dιv> отменить свойство float (поз.4), и назначить выравнивание по горизонтали используя margin со значениями auto для отступа слева и справа (поз.5).
А ширину в 80% установить как обычно с помощью свойства width (поз.6).
Ниже приведен скриншот фрагмент главной страницы после выполненных дополнений в таблице CSS при разрешении экрана по ширине в 650px.
Рис.10 Вид страницы при ширине экрана 650px.
Ну а теперь, последнее что осталось сделать, это установить параметры изображений, которые будут соответствовать для всего оставшегося диапазон разрешения экрана - от 700px до 1920px.
А для этого достаточно в медиа-запросе снова применить стили CSS, которые ранее назначались для диапазона 400px÷599px (рис.5), как показано в следующей таблице.
/*----------назначение стилей css для диапазона 700px÷1920px-----------*/
@media only screen and (min-width: 700px) {
.img-left30, .img-left40 {
float: left;
margin: .625em 1.25em .25em 0;
}
.img-right30, .img-right40 {
float: right;
margin: .625em 0 .25em 1.25em;
}
.img-left30, .img-left30 {
width: 30%;
}
.img-left40, .img-left40 {
width: 40%;
}
.img-center60 {
width: 60%;
}
}
Рис.11 Назначение стилей CSS для диапазона 700px÷1920px.
Ниже приведен скриншот фрагмент, на котором изображена главная страница с разрешением экрана по ширине в 1240px.
Рис.12 Вид страницы при ширине экрана 1240px.
Если это сравнить со скриншотом главной страницы до назначения стилей CSS (рис.4), то можно заметить ощутимую разницу - теперь все изображения вставлены на предназначенные им места и приняли нужный размер.
Что касается составленных здесь медиа-запросов, то они добавлены в соответствующие места существующей таблицы стилей CSS (файл "main.css"), который можно найти в дополнительных материалах исходных файлов сайта в папке "styles".
На этом можно было бы закончить рассмотрение оформления контента. Но, наверное, стоит еще затронуть такой вопрос, как размещение на сайте видео плеера YouTube. Так как этот сервис в настоящее время имеет очень высокую популярность, то использование хостинга YouTube вполне оправдано для повышения интереса пользователей к содержанию сайта.
Поэтому в следующей статье мы займемся этим вопросом и посмотрим как можно легально разместить на своем сайте видеоролики с YouTube.
Исходные файлы сайта
Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:
- Файлы каталога www
- Таблицы базы данных MySQL
Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.
Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.
Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.
С уважением, Николай Гришин