Основы блочной верстки

Главная » Уроки » Создание сайтов

Верстка web-сайта — это визуальное оформление сайта, которое мы видим при отображении браузером. Отбросив далекое прошлое HTML (использование фреймов), можно выделить два вида верстки страниц. Первый вид – это табличная верстка. Страницы создаются с использованием тега языка HTML <table>. Другой тип верстки называют блочным или «дивным» дизайном, так как в основе его лежит использование тега <div>.

Основы блочной верстки на HTML

На сегодняшнем этапе разработчики web-сайтов используют более актуальную блочную разметку. Страницы сайта на div быстрее загружаются, так как код страницы занимает меньше места. К достоинствам блочной верстки сайта относится возможность оптимизации и поискового продвижения.

Блочная верстка заключается в использовании тега <div> и каскадной таблицы стилей. Оформление страницы выносится за пределы основного кода и сохраняется в отдельном файле css. Поэтому разработчики получают возможность небольшими правками координально изменять дизайн.

Рассмотрим самый простой макет страницы фиксированной ширины, состоящих из 4 блоков:

  • 1 блок – шапка (header)
  • 2 блок – левая колонка (left)
  • 3 блок – контент (content)
  • 4 блок – нижний колонтитул (footer)

Перейдем к кодированию основ и создадим документ index.html.

<html>
<head>
<title>Блочная верстка</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
<div id="head">шапка</div>
<div id="left">меню</div>
<div id="content">контент</div>
<div id="footer">нижний колонтитул</div>
</div> <!-- /main -->
</body>
</html>

Оформление блоков создадим с помощью каскадной таблицы стилей и сохраним отдельным файлом style.css.

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

Категория: Создание сайтов; Урок сделан: 23.05.2012; Просмотров : 1039; Рейтинг : 0.0/0;
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]





Copyright © 2010 - 2017 Pro100uCoz.ru