Урок 5

   Продолжим разработку дальше.

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

<div id="header"> </div>

   За ним стоит записать следующее:

<div id="nav"> <ul> <li>Главная</li> <li><a href="#">О нас</a></li> <li><a href="#">Наши работы</a></li> <li><a href="#">Наша страна</a></li> <li><a href="#">Звонки</a></li> <li><a href="#">Программа</a></li> </ul> </div>

   Как видно – все предельно просто. Все разделы оформляются как пункты единого списка. Все, кроме первого – ссылки. Для того, чтобы не переходить на ненаписанные ссылки добавляем решетку, она всегда перенаправит нас на исходную страницу. Теперь я расскажу Вам о каскадности стиля. Вы уже слышали о глобальной настройке блока #nav и о маркированном списке ul. В этом случае каждое следующее правило передается от предыдущего. Кроме этого они все находятся в контейнере, и таким способом перенимают часть правил из него. Именно из-за этого все называется каскадом.

   Снова сохраним нашу страничку. Запустим нашу страничку в браузере и увидим, что логически, страничка теперь разбита на 2 области – в одной из них главный текст, а во второй – новости. Такая верстка из-за такого размещения называется двухколоночной.

   Давайте допишем еще пару строк:

<li><a href="#">Контакты</a></li> <li><a href="#">Справка</a></li> </ul> </div>

   И добавим:

<div id="text"> <img class="img1" src="img1.jpg" alt="Бизнес" /> <p>Бизнес это ………….</p> <p>Теперь ……….</p> <img class="poloska" src="poloska.gif" alt="Бизнес" /> <img class="img2" src="img2.jpg" alt="Бизнес"/> </div>

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

   Рассмотрим новые строки кода. Тег div и атрибут text – это и есть место, где размещается информация на страничке. Под этим и понимают понятие контент. Тут же мы можем видеть абзацы, которые обозначены тегами р. Тег абзаца всегда стандартен – открылся-закрылся. В отличие от слова class, которое обозначает количество использований атрибута. Его также можно использовать и вообще без тега div, что мы и продемонстрировали.

   Рассмотрим на примере.

   Как правило, вставочную строку мы пишем так:
<img src="папка_где_она_лежит/picture.jpg" alt="" />

   Мы записали несколько иначе:
<img class="img1" src="папка_где_она_лежит/picture.jpg" alt="" />

   Сюда спокойно можно дописать еще раз div, но это нецелесообразно.

   Запомните! Атрибут можно приклеивать к уже готовому тегу. div же стоит использовать только для самых крупных и значимых блоков.