Благодетели сайта

Верстка HTML

Для создании страницы HTML нужно, во первых дизайн - графическое представление элементов будущей страницы, во вторых понять каким методом производить верстку документа, так как верстка HTML разделяется на два варианта исполнения — это табличная верстка и блочная верстка.

Табличная верстка уже устарела с появлением верстки в CSS. На заре создания Интернета, табличная верстка была основной и единственно возможным вариантом верстки. Вся табличная верстка происходила непосредственно в теле документа.

Блочная верстка — это верстка посредством CSS в DIV блоках, то есть стилевая верстка. Блочная верстка осуществляется как в теле документа, так и во внешнем стилевом файле.

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

Для более наглядности приведу два примера исполнения верстки одной и той же страницы.

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

Для начала возьмем простой дизайн страницы:

Верстка сайта клуба

затем рассмотрим код табличной верстки документа с реализованным меню:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Club в табличной верстке</title>
</head>

<body bgcolor="#c0c0c0">
<table width="1191" height="1047" cellpadding="0" cellspacing="0" border="0" align="center" background="images/bg.jpg">
 <tr>
  <td valign="top">
   <table cellpadding="0" cellspacing="0" width="750" height="450" border="0" align="right">
    <tr>
     <td height="120">
      <table cellpadding="0" cellspacing="0" height="10" width="200" align="center" border="0">
       <tr>
        <td align="center" valign="bottom"><a href="#" style=" height:8px; padding:2px; color:#000; font-weight:bold;" title="Фотогалерея">Фотогалерея</a></td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td valign="bottom" height="100">
      <table cellpadding="0" height="10" cellspacing="0" width="200" align="left" border="0">
       <tr>
        <td align="center" valign="bottom"><a href="#" style=" height:8px; padding:2px; color:#000; font-weight:bold;" title="Афиша">Афиша</a></td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td valign="bottom" height="30">
      <table cellpadding="0" height="10" cellspacing="0" width="150" align="center" border="0">
       <tr>
        <td align="left" valign="bottom"><a href="#" style=" height:8px; padding:2px; color:#000; font-weight:bold;" title="События">События</a></td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td valign="bottom" height="60">
      <table cellpadding="0" height="10" cellspacing="0" width="150" align="left" border="0">
       <tr>
        <td align="center" valign="bottom"><a href="#" style=" height:8px; padding:2px; color:#000; font-weight:bold;" title="Меню">Меню</a></td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td valign="bottom" height="60">
      <table cellpadding="0" height="10" cellspacing="0" width="280" align="right" border="0">
       <tr>
        <td align="left" valign="bottom"><a href="#" style=" height:8px; padding:2px; color:#000; font-weight:bold;" title="Форум">Форум</a></td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td valign="bottom">
      <table cellpadding="0" height="10" cellspacing="0" width="280" align="right" border="0">
       <tr>
        <td align="left" valign="bottom"><a href="#" style=" height:8px; padding:2px; color:#000; font-weight:bold;" title="Контакты">Контакты</a></td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</body>
</html>

и сравним его с кодом блочной верстки:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<title>Club блочная верстка</title>
</head>
<body>
<div id="container">
 <div id="foto">
  <a href="#" title="Фотогалерея">Фотогалерея</a>
 </div>
 <div id="poster">
  <span><a href="#" title="Афиша">Афиша</a></span>
 </div>
 <div id="events">
  <span><a href="#" title="События">События</a></span>
 </div>
 <div class="clearfloat"></div>
 <div id="menu">
  <span><a href="#" title="Меню">Меню</a></span>
 </div>
 <div id="right">
  <div id="forum">
   <a href="#" title="Форум">Форум</a>
  </div>
  <div id="contacts">
   <a href="#" title="Контакты">Контакты</a>
  </div>
 </div>
</div>
</body>
</html>

увидели разницу между табличной и блочной версткой?

Более подробно с табличной версткой или с блочной версткой этого примера можно ознакомиться в разделах Табличной верстки и Блочной верстки.