Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Etapy-sozdaniya-sajta » Perexod-ot-tablichnoj-verstki-k-blochnoj

Переход от табличной верстки сайта к блочной.

Критикам и опытным программистам или верстальщикам может не понравится, что я здесь напишу, но повторяю не первый раз:»Я никого не учу, учить не собираюсь, пишу статьи на основе своего опыта». Так что извините меня неграмотного, просто я решил поделиться как проходил этот путь.

резиновый макет сайта

В самом начале своего пути, я прочитал несколько уроков по html (там называлось это учебником), кое-где посмотрел как делают простенький сайт и решил попробовать — это было увлекательно! Как вы уже догадались верстка сайта была табличной . Это было ужасно! Но вопреки этому я думал, что у меня офигенный сайт. В табличной варианте есть свой «плюс». Но минусы перекрывают всё и скоро вы о них узнаете. «Плюс» состоит в том, что данный способ может легко освоить каждый из вас, для этого не нужно усердной практики и т.п.

Табличная вёрстка сайта

Просто таблицы в HTML, настолько просты, что не требуют каких либо знаний по CSS, что намного облегчает сам процесс. Для примера покажу двухколоночный макет, где представлен следующий вариант верстки:

<table width="100%" cellspacing="0" cellpadding="5">
  <tbody>
     <tr>
        <td valign="middle" width="250">Левая колонка</td>
        <td valign="middle">Правая колонка</td>
     </tr>
  </tbody>
</table>

Как видите здесь всё просто, table отвечает за вывод таблицы, tr-строка, td-столбец в таблице. Здесь думаю понятно, останавливаться не будем.

Блочная верстка сайта

Пора посмотреть, как этот же макет выглядит в блочной варианте:

<div id="sidebar">Левая колонка</div>
<div id="content">Правая колонка</div>

И всё! Как видите код вроде простой, даже проще чем в табличной верстке. Сложность состоит в том, что здесь надо иметь знания по CSS, чтобы правильно оформить эти блоки. Вообще блочную верстку сайта можно по-настоящему назвать «дивной»(от слова div-ная). А освоив каскадные таблицы стилей, вы вообще забудете про таблицы. Добавлю ещё про главный «минус» таблиц — это плохое индексирование поисковиками. Чтобы вам было проще освоиться, приведу пример с резиновой шириной:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Описание странички</title>
<style>
body {
font: 12pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
margin: 0; /* Отступы на странице */
}
h1 {
font-size: 36px; /* Размер шрифта */
margin: 0; /* Убираем отступы */
color: #fc6; /* Цвет текста */
}
h2 {
margin-top: 0; /* Убираем отступ сверху */
}
#header { /* Верхний блок */
background: #20867B; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
#sidebar { /* Левая колонка */
float: left; /* Обтекание справа */
border: 1px solid #ccc; /* Параметры рамки вокруг */
width: 20%; /* Ширина колонки */
padding: 5px; /* Поля вокруг текста */
margin: 10px 10px 20px 10px; /* Значения отступов */
}
#content { /* Правая колонка */
margin: 10px 5px 20px 25%; /* Значения отступов */
padding: 5px; /* Поля вокруг текста */
border: 1px solid #ccc; /* Параметры рамки */
}
#footer { /* Нижний блок */
background: #333; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
clear: left; /* Отменяем действие float */
}
</style>
</head>
<body>
<div id="header"><h1>Название сайта</h1></div>
<div id="sidebar">
<p><a href="b_all.html">Пункт №1</a></p>
<p><a href="b_author.html">Пункт №2</a></p>
<p><a href="b_theme.html">Пункт №3</a></p>
<p><a href="b_popular.html">Пункт №4</a></p>
</div>
<div id="content">
<h2>Заголовок текста </h2>
<p>Здесь мы как всегда что-то пишем  бла бла бла бла бла бла бла бла бла бла  бла бла бла бла</p>
<p>бла    бла  бла бла бла бла бла бла бла  бла бла бла  бла бла бла </p>
</div>
<div id="footer">&copy; Александр Побединский </div>
</body>
</html>

Результат вы можете увидеть здесь. Вебмастера скажут почему меню не списком, тут уж извините это просто пример. Вообще меню принято делать с помощью немаркированного списка. Хотел ещё добавить от себя, что от таблиц отказываться полностью не стоит, их обычно используют для предоставления табличных данных, а не вёрстки. На этой прекрасной ноте, я наверное и закончу эту статью, если возникли какие-либо вопросы задавайте, оставляйте свои комментарии.



наверх