Как за 5 мин сделать сайт визитку с классным задним фоном?! В этом видео я рассказываю, как за буквально за 5 минут сделать сайт визитку с классным задним фоном. Это действительно 5 минут, если оставить только все важное. Сделать можно быстро и потратить на это минимум времени! Обязательно используем удобные инструменты для редактирования веб страниц – такие, как например редактор Brackets с двумя дополнениями: Emmet – для ускорения написания кода HTML и Beautify – для красивого оформления кода. Для создания сайта визитки воспользуемся фреймворком Bootstrap. Делаем следующие: 1. Открываем пример с сайта фреймворка Bootstrap - Prices. 2. Кликаем Правой кнопкой мыши – Посмотреть код страницы. 3. Весь код страницы копируем. 4. В редакторе Brackets вставляем скопированный код и сохраняем страницу на рабочий стол в свою папку site2 под именем page1.html. 5. Открываем страницу в браузере – двойной клик по файлу page1.html. 6. Видим, что она отобразилась без оформления – значит не подгрузились CSS стили. В код подключения стилей добавляем url сайта Bootstrap – это делаем в двух местах. 7. Сохраняем – и видим, что теперь страница правильно отображается. 8. Теперь меняем название компании – прямо в коде редактируем текст и сохраняем. 9. Добавляем телефон вместо правой части меню. 10. Редактируем заголовок h1 страницы – меняем его на свой. 11. Редактируем абзац, следующий за заголовком h1. 12. Сохраняем и проверяем что на экране тот текст, который мы ввели. 13. Теперь выбираем картинку для заднего фона, я для демонстраций взял картинку с Яндекс Картинок. 14. Для того, чтобы текст на картинке читался и был виден, саму картинку необходимо сделать либо светлой, либо темной. Для этого использовался онлайн редактор фотошоп. Редактор - меню Корекции - пункт Уровни. Двигая ползунок влево – получаем картинку в светлых тонах, двигая в право – картинку в темных тонах. Затем картинку сохраняем в той же папке что и файл. 15. Для определения заднего фона сайта используется назначение стиля на тег body. 16. Для живого просмотра наших изменений – это можно делать в отладчике страницы. Нажимаем правой кнопкой мыши и выбираем пункт «Исследовать элемент». 17. Тегу body назначили следующие стили: background-image: url(construction.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; 18. Сохранили и проверили – все ОК. Теперь у нас рабочий сайт визитка с классным задним фоном. Подписывайтесь на наш канал в YouTube: / @wiseplat Вступайте в нашу группу ВК:
https://vk.com/wiseplat Задавайте вопросы – постараюсь ответить 😊 Удачи в таких классных начинаниях!
