Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

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

Автор: Андрей Краснокутский

Дата: 2009-02-03

Табличный дизайн сайта (табличная верстка)

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

Как было сказано ранее, основное предназначение таблиц – это разметка Web-страницы и её компоновка. Вы наверное уже слышали такие термины: "Табличный дизайн" или "табличная верстка". Что это значит? Сейчас расскажу.

Давайте рассмотрим самый простой и распространённый случай компоновки web-страницы. Взгляните на рисунок 10.1.

Самый простой и распространённый случай компоновки web-страницы.

Рисунок 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-страницы с помощью таблиц. Теперь давайте переведем эту идею в html-код. В Листинге 10.3 написан html-код первой таблицы представленной на рисунке 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).

Листинг 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>

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

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

Всего Вам доброго.

Обновлено: 08.10.2014 г.

 

Читайте также:

Почтовая рассылка - Главный инструмент Интернет-Бизнесмена.

Что такое Домены второго уровня? Где их взять?

Пошаговый обучающий Видео Курс по созданию сайтов на HTML и CSS.

Какими программами пользуюсь я для создания сайтов и для работы в Интернете?

Анимированные картинки Цветы. Сделай подарок любимой....

 

Просмотров: 11330


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Сергей
Дата: 2016-03-28

Андрей, в Notepad++ при записи макросов они сбиваются и печатается только последний один. Переставлял программу, а исход один. Что делать?

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT