Создание сайта
Регистрация
Продвижение
Монетизация
Облако тегов

Требуется для просмотраFlash Player 9 или выше.

Показать все теги

Главная » Создание сайта » HTML » Учебник HTML для начинающих. Блочная верстка

Учебник HTML для начинающих. Блочная верстка
Раздел: Создание сайта » HTML  
14 июня 2009   |   автор: admin Оставить комментарий



 

 

 

Урок 10. Веб-страница из трех колонок

 

Возможно, вы обратили внимание, что большинство сайтов имеют схожее расположение элементов на своих страницах. В этом уроке мы познакомимся с так называемым трехколоночным шаблоном фиксированной ширины.

 

Шаблон - это заготовка, которая позволяет в последствии превратить себя в настоящую веб-страницу.

 

Наш шаблон будет состоять из шапки, трех колонок (левой, правой, центральной, с основным контентом), и подвала. Поскольку в кодирование на HTML используются латинские буквы, мы назовем наши элементы соответственно: header, leftside, rightside, content, footer.

 

Вот как будет выглядеть код:

 

</p>
<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>

 

 

А вот как это выглядит в браузере:

 

alt

 

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

 

Наверное, вы уже поняли, что блок мы задаем следующим образом:

 

<div>Содержимое блока</div>

 

Кроме того, у нас появился дополнительный блок, о котором прежде не упоминалось. Он состоит из открывающего и закрывающего тэгов. Первый из них располагается сразу за тэгом , а второй в самом низу, перед тэгом . При этом его содержимым являются все остальные тэги.

 

<div><br />...<br /></div>

 

Данный прием используется для того, чтобы заключить наши блоки в определенную рамку. Таким образом, мы фиксируем их в заданных границах. В противном случае, при изменении размера окна браузера, наши блоки расползлись бы по экрану в хаотичном порядке.

 

Посмотрите еще раз на структуру кода. Если вам она ясна, тогда можно переходить к следующему этапу.

 

 


Далее... Урок 11. CSS

 

 

Вернуться к Оглавлению 

 


Ключевые теги: Учебник HTML, Блоки, div, блочная верстка
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
web-lesson.ru
Добавление комментария
Ваше Имя:
Ваш E-Mail:
Код:
Введите код