Я, как создатель сайта nevor.ru обращаюсь к Вам с просьбой поддержать инициативу №77Ф40593 на сайте Российская общественная инициатива. До 5-го марта нужно собрать 100 000 подписей. Проголосовать можно через портал Госуслуг. Очень важно показать, что нам не всё-равно.

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

рои

Виды вёрстки

Оглавление
12 апреля 2010 г.

Любому сайту, который выглядит сложнее листа формата А4 с текстом, необходим каркас. Разметка, только уже не гипертекста, а элементов страницы. Нечто вроде полок и стеллажей, на которых вы разложите всю свою информацию, текст, картинки и прочие объекты.

Об эту тему сломано немало копей, каждый хвалит своё болото. На самом деле всё просто: есть спецификация и назначение всех элементов там прописано. Есть элементы структурные, есть для оформления, информационные и т.д.. Я считаю, что каждому способу найдётся своё место при грамотном подходе к проектированию. 

Вёрстка – процесс формирования страниц (макета) путём компоновки текстовых, графических и прочих элементов.

В сети можно встретить несколько прилагательных, употребляющихся со словом верстка:

  1. Дивная.
  2. Блочная.
  3. Табличная.
  4. Вёрстка фреймами.
  5. Семантическая.

Стоит обратить внимание на блочную (она же дивная - от названия контейнера <div>) и табличную (<table>) верстку. Вёрстка фреймами - это атавизм. В ряде случаев его можно и стоит применять, но в современном сайтостроении этому способу отводят место в музее. Семантическая (по моему скромному разумению) - это извращенная философия, а никак не практическая реализация вёрстки. Поэтому расскажу я о табличной и блочной верстке исключительно.

У таблицы есть следующие основные конструктивные элементы (есть и второстепенные):

  1. <THEAD> - группа рядов в шапке таблицы.
  2. <TFOOT> - группа рядов в подвале таблицы.
  3. <TBODY> - группы рядов, составляющих тело таблицы.
  4. <CAPTION> - заголовок таблицы.
  5. <COL> - столбец таблицы.
  6. <COLGROUP> - группа столбцов.
  7. <TR> - ряд ячеек таблицы.
  8. <TH> - ячейка заголовка столбца.
  9. <TD> - ячейка таблицы.

Каркас из таблицы можно построить, например, следующий:

t h e a d
t f o o t
t b o d y
сайдбар
t b o d y
контент

Код этого примера:

<table style="width:70%; margin:20px auto; border:2px solid #FF4500;">
  <thead>
    <tr>
      <td colspan="2" style="background:gold; height:80px;">
        <b>t h e a d</b>
      </td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2" style="background:gold; height:20px;">
        <b>t f o o t</b>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td width="20%" height="300px" style="background:white;text-align:left;" valign="top">
        t b o d y<br>сайдбар
      </td>
      <td width="80%" style="background:#FFF4BF;text-align:center;" valign="top">
        t b o d y<br>контент
      </td>
    </tr>
  </tbody>
</table>

<tfoot> должен следовать за <thead> и лишь потом идет <tbody>, потому что обозреватель сначала рассчитывает размер верхнего и нижнего блока сайта, а все оставшееся пространство идет под контейнер <tbody>. Шапка и подвал присутствуют в таблице в единственном экземпляре, тел может быть сколько угодно. Подробности по атрибутам и значениям смотрите в спецификации.

Официальная спецификация

Перевод Пирамидина А.

Спецификация HTML 4 (W3C)

Спецификация HTML 4 (перевод)

Блочная (div'ная) вёрстка

Теперь поговорим о блочной верстке. С блоками все немного сложнее, поскольку каждый из них по отдельности является независимым объектом, а не частью чего-то более глобального, как ячейки таблицы. Поэтому новичку с блоками придётся чуть потруднее, т.к. каждый из них придётся позиционировать и настраивать при помощи css-стилей.

Блок запросто может наложиться на соседний, спихнуть соседа по странице вниз или за пределы экрана. Поэтому при блочной вёрстке следует быть куда более внимательным к любой мелочи, нежели при табличной. Один забытый пиксель (рамки, отступы, различная трактовка обозревателями и прочее) может обернуться катастрофой.

С другой стороны блоки предоставляют свободу творчества. Из них можно сооружать не только жёсткие конструкции, но и располагать их в производном порядке, позиционировать, создавая подобие аппликаций.

Элементы div и span в сочетании с атрибутами id и class предоставляют общий механизм для добавления структуры к документу. Эти элементы определяют содержимое как инлайн (span) или уровня блока (div), но не навязывают других идиом представления содержимого.

Спецификация HTML 4.01 в переводе Пирамидина A.

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

h e a d e r
div
сайдбар
div
контент
f o o t e r

Код этого примера:

<div style="width:70%; margin:20px auto; border:2px solid #FF4500;">
  <div style="background:gold; height:80px; padding:5px;">
    <b>h e a d e r</b>
  </div>
  <div style="width:20%; height:300px; background:white; 
              text-align:left; float:left; padding:5px;">
    div<br>сайдбар
  </div>
  <div style="height:300px; background:#FFF4BF; text-align:center;  padding:5px;">
    div<br>контент
  </div>
  <div style="background:gold; height:20px; padding:5px;">
    <b>f o o t e r</b>
  </div>
</div>

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

div { display:table; }

Ознакомьтесь с этим разделом спецификации CSS:

Перечень css-свойств:

Спецификация CSS (W3C)

Спецификация CSS (перевод)

В заключение отмечу, что собственных атрибутов в спецификации 4-ой версии (кроме id и class) блоки не имеют. Всё управление блоками осуществляется через css-свойства. Посмотреть их можно опять же в спецификации:

Перечень css-свойств:

Спецификация CSS (W3C)

Спецификация CSS (перевод)

Если материалы сайта оказались для вас полезными, можете поддержать дальнейшее развитие ресурса, оказав ему (и мне ) моральную и материальную поддержку.

Поддержи Nevor.ru

руб.
Похожие статьи
оптимизация кода

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

Кроме исправления ошибок и прочих недочётов необходимо озаботиться оптимизацией контента для поисковых машин. Поисковики предъявляют к сайтам определенные требования, которые с каждым годом только множатся и если вы не решили целенаправленно закрыть сайт от индексации, этих требований стоит придерживаться.

20 февраля 2010 г.

Яндекс.Метрика

Мониторинг доступности сайта Host-tracker.com