Урок 10. Веб-страница из трех колонок
Возможно, вы обратили внимание, что большинство сайтов имеют схожее расположение элементов на своих страницах. В этом уроке мы познакомимся с так называемым трехколоночным шаблоном фиксированной ширины.
Шаблон - это заготовка, которая позволяет в последствии превратить себя в настоящую веб-страницу.
Наш шаблон будет состоять из шапки, трех колонок (левой, правой, центральной, с основным контентом), и подвала. Поскольку в кодирование на HTML используются латинские буквы, мы назовем наши элементы соответственно: header, leftside, rightside, content, footer.
Вот как будет выглядеть код:
<p><html></p>
<p><head><br /><title>Шаблон из трех колонок</title><br /></head></p>
<p><body></p>
<p><div><br /> <div>Шапка сайта</div><br /> <div>Левая колонка</div><br /> <div>Правая колонка</div><br /> <div>Контент</div><br /> <div>Подвал сайта</div><br /></div></p>
<p></body><br /></html></p>
А вот как это выглядит в браузере:
Возможно это не совсем то, что вы ожидали увидеть. Не огорчайтесь. С помощью нехитрых манипуляций мы придадим нашему шаблону законченный вид. Для этого воспользуемся рядом атрибутов, которые поместим в отдельный файл. Этим мы займемся в следующем уроке. Пока же давайте разберемся с тем, что мы имеем.
Наверное, вы уже поняли, что блок мы задаем следующим образом:
Кроме того, у нас появился дополнительный блок, о котором прежде не упоминалось. Он состоит из открывающего и закрывающего тэгов. Первый из них располагается сразу за тэгом , а второй в самом низу, перед тэгом . При этом его содержимым являются все остальные тэги.
Данный прием используется для того, чтобы заключить наши блоки в определенную рамку. Таким образом, мы фиксируем их в заданных границах. В противном случае, при изменении размера окна браузера, наши блоки расползлись бы по экрану в хаотичном порядке.
Посмотрите еще раз на структуру кода. Если вам она ясна, тогда можно переходить к следующему этапу.
Далее... Урок 11. CSS
Ключевые теги: Учебник HTML, Блоки, div, блочная верстка
