среда, 15 февраля 2012 г.

DIV верстка

Давненько о WEB-разработке ничего не писал – надо приступить к этому. Про CSS вы уже знаете, но сегодня нам css-стили не понадобятся, в следующий раз будем использовать. А сегодня я только расскажу о верстке HTML-страниц с помощью DIV-элементов. Дам небольшие примеры.

Вообще, что такое верстка? Грубо говоря это расположение элементов соответственно с эскизом сайта. Если у нам задали (или мы хотим) чтобы у нас был на сайте основной блок информации и дополнительный (с боку) – то так и должно быть. Мы должны сверстать там, чтобы информация появлялась по центру (основная) и сбоку (дополнительная).

Раньше эту задачу решали с помощью таблиц (TABLE в HTML). Таблица – это элемент, в котором есть строки, столбцы и ячейки. Можно всю страницу разделить на большое количество ячеек (каждую из которых – также можно разделить на ячейки). И в эти ячейки помещать необходимые объекты. В принципе – просто.

Но объем кода в несколько раз возрастает. И для его понимания требуется много ресурсов. Так что на смену табличной верстке пришла блочная (DIV) верстка. Все объекты разделяются на блоки (с помощью DIV-тегов) и из этих блоков мы и будем конструировать наши странички, изменять их цвет и тд.

По умолчанию блок занимает все отведенное ему от левой границы до правой (высотой блок именно столько, сколько занимает объект в нем). Но такую растяжку можно исправить, это делается с помощью CSS (в следующий раз расскажу). И теперь небольшой пример HTML-странички с DIV-версткой:

<html>

<head>
            <title>DIV верстка:</title>
</head>

<body>
            <hr>
            <div id="1">
                        Первый блок
            </div>
            <hr>
            <div id="2">
                        Второй блок
            </div>
            <hr>
            <div id="3">
                        Блок побольше<br>
                        Из нескольких строк<br>
                        Высота - всего 4 строки<br>
                        А ширина - весь дисплей<br>
            </div>
            <hr>
            <div class="4">
                        Еще блок
                        <div class="C1">
                                   &nbsp&nbsp&nbspПодблок
                        </div>
            </div>
            <hr>
            <div class="C1">
                        Класс отдельный, но стиль берется из класса C1
            </div>
            <hr>
</body>

<html>

Все просто, есть несколько блоков. В блоках можно объявлять другие блоки. И еще одна особенность у DIV-блоков. У них можно объявить идентификатор (ID) и класс (CLASS). С помощью названий, которые стоят после ID или CLASS можно в CSS обращаться к данным блокам и изменять их внешний вид.

Отличие следующее – ID уникален, CLASS – может повторяться. Обычно идентификатор применяется для блоков страницы (верхняя часть, центральная, боковая и нижняя), а классы – применяются к повторяющимся блокам типа P, H и тд.

В следующий статье я приведу описание примера, в котором будет создана очень простая верстка без картинок (для упрощения понимания). А для тех, кому дорого свое время на изучение данной темы (и особенно для тех, кто проживает в нашей Северной Столице) – говорю что сайт в спб - это недорого и довольно быстро. По ссылке можете перейти на ресурс, который предлагает геогрифически-ориентированные услуги по созданию сайтов (в данном случае – для жителей Петербурга). Цены хорошие, переходите – и все сами узнаете.

Комментариев нет:

Отправить комментарий