Стильный фон для сайта (часть 2)

В прошлом уроке «Стильный фон для сайта» мы занимались непосредственно графикой, т.е. созданием самого фонового изображения. В этом уроке мы займемся программной частью и будем писать HTML и CSS код, чтобы подключить наш фон.

Вы узнаете, как изменить задний фон сайта. Хотя в этом уроке мы не будем менять задний фон полностью, а лишь добавим фоновое изображение к сайту.

Откройте файл «index.html» и «style.css». Код, который они должны содержать я приводи в прошлом уроке. Теперь вам нужно кое-что уяснить. HTML-документ состоит из тегов (элементов). Каждый элемент это блок или строка. Содержимое сайта находиться в блочном элементе «BODY», который занимает всю ширину окна браузера. А вот высоту, к сожалению, он не занимает всю. Занимает лишь ту часть, которая отведена под содержание сайта.

Но это еще не все. Все элементы содержаться в самом главном элементе документа «HTML». Этот элемент тоже блочный. Он, так же как и «BODY», не занимает всю высоту, а только длину. Вот наглядный пример того, как по умолчанию расположены элементы:

Верстка макета сайта

Фраза «содержание сайта» это и есть та высота, которую занимают оба блока. Как я уже говорил, высота зависит от содержания сайта. Получается, что высота определяется автоматически. Но нам так не нужно. Нам необходимо, чтобы высота занимала 100% высоты окна браузера, чтобы прижать наш стильный фон к нижнему краю окна браузера.

В нашем файле стилей мы прописали сброс всех внешних и внутренних отступов для всех элементов. Напомню:

«style.css»

Теперь давайте вернемся к нашему файлу «index.html». Нам нужно добавить главный блок «DIV», в котором будет размещаться еще два таких же блока. Добавим блок с идентификатором «wrapper», «main» и «content»Добавим немного текста:

«index.html»

Стильный фон для сайта

 

Это очень интересная статья

 

 

Итак, «div id="wrapper"» определяет главный блок. В блоке «wrapper» находится блок «main», а в блоке «main» – «content».

В блоке «content» находится заголовок и параграф. Их мы отредактируем позже. А сейчас займемся основными блочными элементами, «HTML» и «BODY». Для них в файле стилей пропишем следующее:

«style.css»

Мы задали свойство высоты равное 100%. Теперь наши главные блоки имеют следующий вид:

Стильный фон для сайта

Теперь необходимо основной блок (контейнер) «wrapper» также растянуть до 100% по высоте и ширине.

«style.css»

Все, теперь можем браться за подключение фона к сайту. Для блока «main» свойство высоты (height) необходимо поставить автоматически, и прописать путь к нашему фоновому изображению:

«style.css»

Результат должен получиться примерно такой.

Пока картина еще не ясна. Фонового изображения видно только верхушку, но нам так не нужно. Сейчас давайте зададим ширину и высоту селектору «div#main», чтобы увидеть фоновое изображение:

«style.css»

 

Картина прорисовывается все больше и больше. Если вы заметили, то появилась вертикальная полоса прокрутки, потому что высота равная 1000 пикселов выходит за рамки разрешения монитора (у меня 1024×768).

Теперь нам необходимо выровнять блок с содержимым «main» по центру и понять, где у нас находятся границы. Для этого давайте зададим свойство «border», отвечающую за границы (рамки) этого блока:

«style.css»

 

Теперь у блока «main» вокруг появилась граница серого цвета (сверху, справа, снизу, сверху) равная 1 пикселю. Рамки для наглядности я показал красными стрелками.

Сейчас перед нами стоит задача выровнять блок по центру и опустить фоновое изображение вниз, прижав к левому краю. Делается это так:

«style.css»

 

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

«style.css»

 

Осталось добавить текст на сайт и немного отредактировать заголовок. Для параграфа и заголовка я использовал следующие наборы свойств (стили):

«style.css»

 

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

Для начала я прижму фоновое изображение к низу окна браузера, путем назначения минимальный высоты в 100% окна браузера Т.е. минимальная высота блока «main» будет равна 100% (min-height:100%).

«style.css»

Но это еще не все, если раскопировать абзац, который я напечатал несколько раз, то вы увидите, что текст залезает на наш стильный фон.

Выход есть! Просто добавим внутренние отступы для блока «content» с левой и нижней стороны:

«style.css»

 

Осталось только убрать рамку у блока «main» и подвести итог. Вот что у вас в итоге должно получиться:

«style.css»

«index.html»

Стильный фон для сайта

 

В прошлом уроке «Стильный фон для сайта» мы занимались непосредственно графикой, т.е. созданием самого фонового изображения. В этом уроке мы займемся программной частью и будем писать HTML и CSS код, чтобы подключить наш фон. Вы узнаете, как изменить задний фон сайта. Хотя в этом уроке мы не будем менять задний фон полностью, а лишь добавим фоновое изображение к сайту.

 

В прошлом уроке «Стильный фон для сайта» мы занимались непосредственно графикой, т.е. созданием самого фонового изображения. В этом уроке мы займемся программной частью и будем писать HTML и CSS код, чтобы подключить наш фон. Вы узнаете, как изменить задний фон сайта. Хотя в этом уроке мы не будем менять задний фон полностью, а лишь добавим фоновое изображение к сайту.

 

В прошлом уроке «Стильный фон для сайта» мы занимались непосредственно графикой, т.е. созданием самого фонового изображения. В этом уроке мы займемся программной частью и будем писать HTML и CSS код, чтобы подключить наш фон. Вы узнаете, как изменить задний фон сайта. Хотя в этом уроке мы не будем менять задний фон полностью, а лишь добавим фоновое изображение к сайту.

 

В прошлом уроке «Стильный фон для сайта» мы занимались непосредственно графикой, т.е. созданием самого фонового изображения. В этом уроке мы займемся программной частью и будем писать HTML и CSS код, чтобы подключить наш фон. Вы узнаете, как изменить задний фон сайта. Хотя в этом уроке мы не будем менять задний фон полностью, а лишь добавим фоновое изображение к сайту.

 

В прошлом уроке «Стильный фон для сайта» мы занимались непосредственно графикой, т.е. созданием самого фонового изображения. В этом уроке мы займемся программной частью и будем писать HTML и CSS код, чтобы подключить наш фон. Вы узнаете, как изменить задний фон сайта. Хотя в этом уроке мы не будем менять задний фон полностью, а лишь добавим фоновое изображение к сайту.

 

В прошлом уроке «Стильный фон для сайта» мы занимались непосредственно графикой, т.е. созданием самого фонового изображения. В этом уроке мы займемся программной частью и будем писать HTML и CSS код, чтобы подключить наш фон. Вы узнаете, как изменить задний фон сайта. Хотя в этом уроке мы не будем менять задний фон полностью, а лишь добавим фоновое изображение к сайту.

 

 

 

 

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

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

Вот что я придумал на очень скорую руку!!!

P.S. Ну что, понравилась статья? Дальше будет только интереснее! Поэтому смело подписывайтесь на мои обновления блога и будьте в курсе происходящего! Вас ждут интересные и полезные статьи, конкурсы, опросы и много чего интересного! Также можете порекомендовать мои уроки своим друзьям в социальных сетях, кликнув по иконкам социальных сетей, чуть ниже этого сообщения.

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 23 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Как сделать картинку прозрачной в Фотошопе
  • Favicon для сайта — как средство привлечения посетителей!
  • Создание шапки для сайта или блога своими руками!
  • Фон для сайта в Photoshop своими руками!
  • Как я делаю красивые изображения к своим постам (видеоурок)
  • Шапка для сайта
  • Иконки социальных сетей для сайта
  • Как сохранить изображение с сайта
  • Картинки и иконки для сайта на темном фоне
  • Стильный фон для сайта
Читатели оставили 4 комментария к этой статье:
  • Андрей, 13.11.2011 в 09:18

    Спасибо за статью, познавательно.

  • Наталья06.04.2016 в 14:04

    Просмотрела обе статьи о создании фона сайта и пришла к выводу, что уроки отлично подойдут для создания своих одностраничников под продажу товаров и инфопродуктов или сайтов на HTML. А если делаешь фон для сайта на Вордпрессе или каком другом движке, то надо редактировать Style.css и Index.php в папке шаблонов, я так понимаю. Удобно, особенно когда в настройках шаблона не предусмотрен выбор фона. Такое может быть с бесплатными темами для движков.

  • Татьяна06.04.2016 в 19:41

    Когда-то давно увлекалась созданием странички в html. Начальные знания дают в школе, а при желании можно найти что-то еще в дополнение к азам. Это увлекательный процесс, но из-за невнимательности может долго длиться... Хорошо, когда рука набита уже и знания заложены в голове, а когда каждую строчку подсматриваешь как писать, то сложновато)

  • den114207.04.2016 в 22:41

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

Добавить комментарий к этой статье:

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter