Создание дизайна сайта с нуля. Урок 5

Создание дизайна сайта с нуля. Урок 4
Всем доброго времени суток. Сегодня мы добавим изображения на нашу будущую веб-страничку и попробуем проявить самостоятельность.Для начала над нужно вставить изображения, используя тег img .Напомню, к чему мы стремимся:Нам нужно вставить 4 изображения. Вот тут  я и предлагаю начать Вам проявлять самостоятельность. Я выложу свой код, а Вы попробуйте вставить свои изображения и настроить свою ширину. Пока без настройки стилей, только html — код.Итак:1. Верхний блок:

Код
<div class=»header»>
<div class=»header_img»><img src=»http://static8.depositphotos.com/1001276/811/v/450/dep_8116560-Hibiscus-and-hummingbird.jpg» width=»300px»></div>
<h1>Наш заголовок</h1>
<div class=»content»>Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое.
Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое, </div>
</div>

2. Левый блок:

Код
<div class=»left_block»>
<h2>Заголовок левого блока</h2>
<div class=»content»>Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое.
Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое<div class=»left_block_img»><img src=»http://static8.depositphotos.com/1001276/811/v/450/dep_8116560-Hibiscus-and-hummingbird.jpg» width=»200px»></div></div>
</div>

3. Средний блок:

Код
<div class=»middle_block»>
<h2>Заголовок среднего блока</h2>
<div class=»content»>
<div class=»middle_block_img»><img src=»http://static5.depositphotos.com/1001276/394/v/450/dep_3943535-Lily.jpg» width=»200px»></div>

Его содержимое, еще Его содержимое, Его содержимое,
  Его содержимое, Его содержимое, еще Его содержимое, Его содержимое.
Его содержимое, еще Его содержимое,Его содержимое, Его содержимое, Его содержимое, </div>

</div>

4. Нижний блок:

Код
<div class=»footer»>
<div class=»footer_img»><img src=»http://static8.depositphotos.com/1001276/811/v/450/dep_8116560-Hibiscus-and-hummingbird.jpg» width=»200px»></div>
<div class=»content»>
Содержимое подвала,Содержимое подвала,Содержимое подвала.
Содержимое подвала,Содержимое подвала,Содержимое подвала,Содержимое подвала, </div>
</div>

Обращаю Ваше внимание, что я намеренно не расписывала тут, какой код на что заменить. Я просто привела текст, чтобы Вы сами нашли и ощутили те изменения, которые я внесла код. Попробуйте, поменяйте сами изображения, их ширину.
в таблицу стилей пока Вам нужно будет добавить только следующий код:
Код
/*размещение картинки справа в шапке*/
.header_img
{float:right;
}
.header_img img
{float:right;}
/*размещение картинки справа в среднем блоке*/
.middle_block_img {
float: right;
width: 120px;
}
/*размещение картинки справа в нижнем блоке*/
.footer img {float:left;}
.footer_img
{float:left;
}

И останется добавить только тени. И вот тут Вам предстоит действительно самостоятельная работа. Я предлагаю Вам ссылки на пару статей, где я писала о том, как реализовать блоки с тенями. Попробуйте изучить их и применить на своем проекте. Я даю Вам на это дополнительное время. Следующий урок я размещу не завтра, а только через пару дней, дав Вам возможность попытаться что-то сделать самим и научиться пользоваться литературой.
Вот ссылки на статьи:
— Свойство CSS — box-shadow — Свойство CSS — transform- Примеры CSS теней без использования картинок. Часть 1- Примеры CSS теней без использования картинок. Часть 2

Создание дизайна сайта с нуля. Урок 6