• Рубрики
  • Слайдер статей
  • Тест сайта
  • Подписка
  • Сайдбар
  • Прокрутка вверх
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

    Этой статьей начинается отдельная рубрика "Как сделать сайт с нуля своими руками", где на реальном примере, с предоставлением исходных материалов (программные коды, файлы и т.п.), будет показано, как действительно можно самостоятельно сделать рабочий сайт.

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

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

  • Текущее состояние создаваемого сайта

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

    Здравствуйте уважаемый посетитель!

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

    Для этого предусмотрена возможность оценивать его работу в двух вариантах: с использованием зеркала сайта на поддомене текущего ресурса и на реальном интернет-ресурсе, размещенном на выделенном домене "avtobezugona.ru.

    Следует отметить, что первый вариант, предусматривающий использование зеркала сайта, позволяет наглядно оценить его работу при различных разрешениях экрана в диапазоне от 320px до 1920px. Что очень удобно для проверки адаптации во всем допустимом диапазоне.

    Второй вариант же просто показывает, как это выглядит в реальных условиях при работе в сети Интернет.

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Контент → Вставляем картинки в HTML-страницы


Автор: / Дата:

Вставляем картинки в 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>) для всех размещаемых изображений можно представить в следующей таблице:

  1. <div class"img-left40">

  2. <img src="/images/article/main/ugon-avtomobilej-naibolee-rasprostranennoe-prestuplenie-v-rossii.jpg" alt="Угон автомобилей наиболее распространенное преступление в России" title="Угон автомобилей наиболее распространенное преступление в России">

  3. </div>

  4. <div class"img-right40">

  5. <img src="/images/article/main/blokirovka-koles-dlya-zashchity-avtomobilya.jpg" alt="Блокировка колес для защиты автомобиля" title="Блокировка колес для защиты автомобиля">

  6. </div>

  7. <div class"img-center90">

  8. <img src="/images/article/main/protivougonnaya-markirovka-stekol-avtomobilya.png" alt="Противоугонная маркировка стекол автомобиля" title="Противоугонная маркировка стекол автомобиля">

  9. </div>

  10. <div class"img-left40">

  11. <img src="/images/article/main/zamena-stekol-avtomobilya.jpg" alt="Замена стекол автомобиля" title="Замена стекол автомобиля">

  12. </div>

  13. <div class"img-right40">

  14. <img src="/images/article/main/protivougonnaya-markirovka-povyshaet-risk-byt-pojmannym-s-polichnym.jpg" alt="Противоугонная маркировка повышает риск быть пойманным с поличным" title="Противоугонная маркировка повышает риск быть пойманным с поличным">

  15. </div>

  16. <div class"img-right40">

  17. <img src="/images/article/main/markirovka-legkosemnyh-chastej-dlya-zashchity-dorogostoyashchih-detalej.jpg" alt="Маркировка легкосъемных частей для защиты дорогостоящих деталей" title="Маркировка легкосъемных частей для защиты дорогостоящих деталей">

  18. </div>

  19. <div class"img-left40">

  20. <img src="/images/article/main/vypolnenie-protivougonnoj-markirovki-v-servis-centrah.jpg" alt="Выполнение противоугонной маркировки в сервис-центрах" title="Выполнение противоугонной маркировки в сервис-центрах">

  21. </div>

  22. <div class"img-right40">

  23. <img src="/images/article/main/markirovka-legkosemnyh-chastej-dlya-zashchity-dorogostoyashchih-detalej.jpg" alt="Маркировка легкосъемных частей для защиты дорогостоящих деталей" title="Маркировка легкосъемных частей для защиты дорогостоящих деталей">

  24. </div>

Рис.3 Блок <dιv> вместе с тегом <img> для первой картинки

Как видно, здесь для третьей картинки в блоке <dιv> применен класс "img-center90" (поз.7), соответствующий расположению элемента по центру с размером в 90% от ширины области контента.

А для остальных, поочередно используются классы "img-left40", либо "img-right40", располагающие графические элементы в правой или левой части. Причем ширина для них задана в размере 40%.

Ну а теперь осталось только вставить эти фрагменты кода в соответствующие места текста оформляемой страницы. Как после этих дополнений будет выглядеть HTML-код главной страницы, можно посмотреть в разделе Исходные файлы сайта в прилагаемых дополнительных материалах в файле "main.php", расположенном в папке "articles".

Если сейчас после выполненных преобразований открыть главную страницу сайта, то можно увидеть, что в тексте статьи на данный момент все графические элементы оказались вставлены в левой части области контента с размером, соответствующим сохраненным в папке "/images/article/main" изображениям.

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

Рис.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.

  1. /*----------назначение стилей css для диапазона 320px÷399px-----------*/

  2. .img-left30, .img-right30, .img-left40, .img-right40, .img-center60, .img-center90, .img-center100 {

  3. margin: .625em auto .25em auto;

  4. }

  5. .img-left30, .img-right30, .img-left40, .img-right40, .img-center60 {

  6. width: 80%;

  7. }

  8. .img-center90{

  9. width: 90%;

  10. }

  11. .img-center100 {

  12. width: 100%;

  13. }

  14. .img-left30 img, .img-right30 img, .img-left40 img, .img-right40 img, .img-center60 img, .img-center90 img, .img-center100 img {

  15. width: 100%;

  16. }

Рис.5 Назначение стилей CSS для диапазона 320px÷399px.

Как видно, здесь в стоке 15 для всех тегов <img> свойством width задан размер в 100% по отношению к родительским элементам <dιv>. Что дает возможность изменять размер картинок меняя ширину соответствующих им блоков <dιv>. Что и сделано в строках 6,9,12, где задана ширина блоков <dιv> для данного диапазона разрешения экрана.

И последнее, на что стоит обратить внимание, это то, что выравнивание по горизонтали блоков <dιv> здесь выполнено с помощью использования значения auto для свойства margin внешних отступов по горизонтали (поз.3). При этом для того, чтобы картинки не накладывались на текст, по вертикали заданы небольшие фиксированные отступы.

Если теперь открыть страницу с разрешением, соответствующим данному диапазону, то можно увидеть, что все картинки вставлены по центру с увеличенным размером.

Для увеличения / уменьшения размера изображения кликните по картинке
Вид страницы при ширине экрана 320px

Рис.6 Вид страницы при ширине экрана 320px

А теперь составим медиа-запрос для отображения страницы при увеличении ширины экрана более 400px. В этом случае местоположение картинок и их размер должно определяться исходя из классов блоков <dιv>, назначенных согласно таблицы соответствия параметров картинок для различных классов (рис.2).

  1. /*----------назначение стилей css для диапазона 400px÷599px-----------*/

  2. @media only screen and (min-width: 400px) {

  3. .img-left30, .img-left40 {

  4. float: left;

  5. margin: .625em 1.25em .25em 0;

  6. }

  7. .img-right30, .img-right40 {

  8. float: right;

  9. margin: .625em 0 .25em 1.25em;

  10. }

  11. .img-left30, .img-left30 {

  12. width: 30%;

  13. }

  14. .img-left40, .img-left40 {

  15. width: 40%;

  16. }

  17. .img-center60 {

  18. width: 60%;

  19. }

  20. }

Рис.7 Назначение стилей CSS для диапазона 400px÷599px.

Здесь следует отметить, что для того, чтобы расположить графические элементы справа или слева области контента, в стоках 4,8 применено свойство float. Которое не только смещает элементы в нужную сторону, но делает их плавающими, позволяя обтекать их рядом стоящим текстом.

Ну, а ширина всех графических элементов, которая при таком разрешении экрана должна быть менее 80%, устанавливается соответствующими значениями свойств width (поз.12,15,18) в согласно с таблицы, приведенной на рис.2.

Теперь откроем главную страницу при ширине экрана более 400px, например в 500px, и посмотрим как теперь она стала отображаться со вставленными в нее изображениями.

Для увеличения / уменьшения размера изображения кликните по картинке
Вид страницы при ширине экрана 500px

Рис.8 Вид страницы при ширине экрана 500px

Как видно, картинки расположились поочередно с разных сторон области контента с установленной для этих классов шириной в 40%.

Следующим шагом составим медиа-запрос для отображения страницы для диапазона от 600px до 699px. Дело в том, что при превышении контрольной точки в 600px сайт переходит в двух колоночный вид, от чего ширина области контента скачкообразно уменьшается на величину добавленного сайдбара.

Поэтому для этого диапазона сделаем аналогичные преобразования, как это было в первом случае при ширине экрана от 320px до 399px. Т.е. все картинки расположим по центру, а ширину тех, у которых она в предыдущем диапазоне составляла 30%, 40% и 60%, увеличим до 80%.

Соответствующий медиа-запрос представлен в следующей таблице.

  1. /*----------назначение стилей css для диапазона 600px÷699px-----------*/

  2. @media only screen and (min-width: 600px) {

  3. .img-left30, .img-right30, .img-left40, .img-right40 {

  4. float: none;

  5. margin: .625em auto .25em auto;

  6. width: 80%;

  7. }

  8. }

Рис.9 Назначение стилей CSS для диапазона 600px÷699px.

Как видно, для того, чтобы вставить элементы по центру достаточно для соответствующих блоков <dιv> отменить свойство float (поз.4), и назначить выравнивание по горизонтали используя margin со значениями auto для отступа слева и справа (поз.5).

А ширину в 80% установить как обычно с помощью свойства width (поз.6).

Ниже приведен скриншот фрагмент главной страницы после выполненных дополнений в таблице CSS при разрешении экрана по ширине в 650px.

Для увеличения / уменьшения размера изображения кликните по картинке
Вид страницы при ширине экрана 650px

Рис.10 Вид страницы при ширине экрана 650px.

Ну а теперь, последнее что осталось сделать, это установить параметры изображений, которые будут соответствовать для всего оставшегося диапазон разрешения экрана - от 700px до 1920px.

А для этого достаточно в медиа-запросе снова применить стили CSS, которые ранее назначались для диапазона 400px÷599px (рис.5), как показано в следующей таблице.

  1. /*----------назначение стилей css для диапазона 700px÷1920px-----------*/

  2. @media only screen and (min-width: 700px) {

  3. .img-left30, .img-left40 {

  4. float: left;

  5. margin: .625em 1.25em .25em 0;

  6. }

  7. .img-right30, .img-right40 {

  8. float: right;

  9. margin: .625em 0 .25em 1.25em;

  10. }

  11. .img-left30, .img-left30 {

  12. width: 30%;

  13. }

  14. .img-left40, .img-left40 {

  15. width: 40%;

  16. }

  17. .img-center60 {

  18. width: 60%;

  19. }

  20. }

Рис.11 Назначение стилей CSS для диапазона 700px÷1920px.

Ниже приведен скриншот фрагмент, на котором изображена главная страница с разрешением экрана по ширине в 1240px.

Для увеличения / уменьшения размера изображения кликните по картинке
Вид страницы при ширине экрана 1240px

Рис.12 Вид страницы при ширине экрана 1240px.

Если это сравнить со скриншотом главной страницы до назначения стилей CSS (рис.4), то можно заметить ощутимую разницу - теперь все изображения вставлены на предназначенные им места и приняли нужный размер.

Что касается составленных здесь медиа-запросов, то они добавлены в соответствующие места существующей таблицы стилей CSS (файл "main.css"), который можно найти в дополнительных материалах исходных файлов сайта в папке "styles".

На этом можно было бы закончить рассмотрение оформления контента. Но, наверное, стоит еще затронуть такой вопрос, как размещение на сайте видео плеера YouTube. Так как этот сервис в настоящее время имеет очень высокую популярность, то использование хостинга YouTube вполне оправдано для повышения интереса пользователей к содержанию сайта.

Поэтому в следующей статье мы займемся этим вопросом и посмотрим как можно легально разместить на своем сайте видеоролики с YouTube.

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

  • Файлы каталога www
  • Таблицы базы данных MySQL

Исходные файлы бесплатно предоставляются только зарегистрированным пользователям.

Для того, чтобы скачать дополнительные материалы необходимо войти на сайт указав свой логин и пароль в форме на главной панели.

С уважением, Николай Гришин


Комментарии


Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учитывать в дальнейшем мнение посетителей.

Буду Вам за это очень признателен!

comments powered by HyperComments