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

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

И снова доброе время суток. В этом уроке мы займемся структурой блоков нашей веб-странички: зададим содержимое и заголовки.Давайте еще раз посмотрим на образец.Создание дизайна сайта с нуля. Урок 3Если посмотреть на картинку с точки зрения html, то можно отметить следующие моменты:1. В нашем первом блоке (header) имеется большой заголовок и текст. Картинки пока рассматривать не будем. Заголовки на языке html отмечаются обычно с помощью тегов h1, h2,h3 и т.д. чем дальше, тем меньше их важность. И обычно шапочный (верхний) заголовок — наиболее важный. А значит мы с Вами выделим его с помощью тега h1. Ну а остальной текст поместим в блок div , присвоив класс content, чтобы в дальнейшем иметь  прямой доступ к стилям этого текста.В результате наш код html
Код
<div class=»header»>Блок шириной 100%</div>

заменяется на
Код<div class=»header»>
<h1>Наш заголовок</h1>
<div class=»content»>Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое.
Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое, </div>
</div>

2. Следующие два блока имеют примерно ту же структуру: заголовок и обычный текст. Но заголовок h1 может встречаться на странице только ОДИН раз (это нужно хорошо запомнить). Поэтому для них мы будем использовать теги h2 . Когда Вы будете делать свои сайты, выбор тегов заголовков (h1, h2, h3 или далее) должен будет зависеть от значимости того или иного заголовка. То, на что Вы хотите обратить внимание в первую очередь должно быть h1, во-вторую — h2 и так далее.
В результате наш код html
Код
<div class=»left_block»>Левый блок</div>
<div class=»middle_block»>Средний блок блок</div>

заменяется на
Код<div class=»left_block»>
<h2>Заголовок левого блока</h2>
<div class=»content»>Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое.
Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое, </div>
</div>
<div class=»middle_block»>
<h2>Заголовок среднего блока</h2>
<div class=»content»>Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое.
Его содержимое,Его содержимое,Его содержимое,Его содержимое,Его содержимое, </div>
</div>

3. Третий блок (справка) — это список. А для списка используются теги ul и li (кто с ними не знаком, пройдите по ссылке).
Любой сайт должен содержать меню. А вывод меню списком более, чем удобен. Поэтому мы подготовим этот блок для нашего будущего меню.
Код html
Код
<div class=»right_block»>Правый блок</div>

заменяем на
Код
<div class=»right_block»>
  <h2>Меню</h2>
  <div class=»content»>
  <ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
  <li>Пункт 5</li>
  <li>Пункт 6</li>
  <li>Пункт 7</li>
  <li>Пункт 8</li>
  </ul>
  </div>
</div>

4. У нас с Вами остался последний блок внизу (footer). В нем заголовка нет, поэтому оставляет только текст.
Код html
Код
<div class=»footer»>Подвал</div>

заменяем на
Код
<div class=»footer»>
<div class=»content»>Содержимое подвала,Содержимое подвала,Содержимое подвала.
Содержимое подвала,Содержимое подвала,Содержимое подвала,Содержимое подвала, </div>
</div>
</div>

Сохраняем страничку и в результате должны получить следующее: 
Результат урока 3.
На этом наш третий урок закончен. Надеюсь у Вас все получилось. Попробуйте сразу вставить какой-то более живой текст, представляя, что Вы уже делаете настоящий сайт. И обязательно выкладывайте ссылки на Ваши работы, чтобы нам было, что обсудить.На следующем уроке мы зададим стили для наших блоков. До встречи!!!
Создание дизайна сайта с нуля. Урок 4