Урок 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 же стоит использовать только для самых крупных и значимых блоков.

Урок 1 | Урок 2 | Урок 3 | Урок 4 | Урок 5 | Урок 6 | Урок 7 | Урок 8 | Урок 9