Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Таблицы. Часть 2. Практика.

Viktor | 24.02.2014 | нет комментариев

Итак, как я Вам и обещал, в этой части урока мы с Вами будем практически применять теоретические навыки по использованию таблиц.

Как было сказано в первой части урока основное предназначение таблиц – это разметка Web-страницы и её компоновка. Вы наверное уже слышали такой термин как «Табличный дизайн». Что это значит? Давайте рассмотрим самый простой и распространённый случай компоновки web-страниц. Взгляните на рисунок 10.1.

Рисунок 10.1.

Всё очень просто вся web-страница представляет собой одну большую таблицу, в которой три строки и по одному столбцу в каждой строке (выделено красным цветом) Ширина этой таблицы (читай нашей web-страницы) задается жестко, например, у нас она будет равна 780 px. Длинна страницы – будет плавающей, т.е. длину мы, задавать не будет и браузер автоматически, будет подгонять длину по содержанию, хотя если Вам хочется можно и длину задать жестко. Рамку можно тоже не задавать, но я предлагаю рамку оставить это визуалино отделит страницу от фона.

Как Вы наверное уже поняли из рисунка 10.1 в верхнюю строку таблицы (в 1-ю) вставляем верхний графический блок – Шапку сайта.

В третью строку таблицы вставляем нижний графический блок.

Что такое графический блок? Это просто предварительно подготовленная картинка определенных размеров. Ширина этих картинок (блоков) должна соответствовать ширине нашего сайта, т.е. web-страницы, в данном случае 780 px. А длина (здесь уместнее сказать высота изображения) для шапки сайта это обычно 100 – 120 px. Для нижнего блока обычно 20 – 25 px.  Значит, нам необходимо подготовить два рисунка одно 780х120 рх (шапка сайта), второе 780х20 px  (нижний графический блок).

Во вторую строку таблицы вставляем основное содержание нашей страницы. Но здесь есть небольшая хитрость. На каждом сайте есть отдельно выделенный блок ссылок – меню сайта. Кликая (нажимая) по этим ссылкам посетитель переходит к другим разделам  или страницам сайта. Реализуется это тоже очень просто. В среднюю часть сайта (во вторую строку) мы вставляем еще одну таблицу (синего цвета). Вот мы и получили вложенную таблицу. И выглядит это примерно как на рисунке 10.2:

Рисунок 10.2

Сейчас мы не будем усложнять и вставим во вторую строку простую таблицу (одна строка с двумя колонками – ячейки 2а и 2в). В результате у нас получается страничка с 2-х колоночным дизайном. Соответственно если вставить сюда таблицу с тремя колонками, то на выходе получим 3-х колоночный дизайн сайта.

Итак, я надеюсь Вам понятен принцип верстки web-страницы с помощью таблиц…. Так давайте же переводить эту идею в код. Листинге 10.3 демонстрирует  таблицу на рисунке 10.1.

Листинг 10.3.

<table align=”center” border=”2″  width=”780″ bordercolor=”green” bgcolor=”#ffffff”>
<tr>
<td>шапка сайта</td>
</tr>
      <tr>
            <td>2-я строка</td>
      </tr>
<tr>
<td>нижний графический блок</td>
</tr>
</table>

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

Листинг 10.4.

<table align=”center” border=”1″  width=”780″  bgcolor=”#ffffff”>
<tr>
<td width=”180″>меню</td>
<td>Основное содержание страницы</td>
</tr>
</table>

Объединяем оба этих листинга и получаем готовый макет 2-х колоночного дизайна сайта:

Листинг 10.5.

<table align=”center” border=”2″  width=”780″ bordercolor=”green” bgcolor=”#ffffff”>
<tr>
<td>Шапка сайта</td>
</tr>
      <tr>
            <td>

<table align=”center” border=”1″  width=”780″  bgcolor=”#ffffff”>
<tr>
          <td width=”180″>меню</td>
          <td>Основное содержание страницы</td>
</tr>
</table>

            </td>
      </tr>
<tr>
<td>Нижний графический блок</td>
</tr>
</table>

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

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB