Добавим на страницу разделительную таблицу

Шапку для сайта, мы с Вами добавили в прошлом уроке, продолжаем верстать нашу страницу и в этом уроке мы добавим html таблицу для контента.

Сначала, я хотел бы обратить Ваше внимание на следующее. Между шапкой сайта и таблицей с контентом, необходимо сформировать некий отступ.

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

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

Как, добавить таблицу с помощью визуального редактора, мы уже знаем, выбираем в меню редактора меню «Таблица», далее кликаем «Вставить» и затем? кликаем - «Таблица», выбираем одну ячейку и жмем «Ок».

У нас на странице появится таблица с параметрами по умолчанию. Зададим свои параметры таблицы, для этого кликаем в таблицу курсором мышки, и в панели инструментов выбираем инструмент - «Таблица», появится окно свойств таблицы.

Выбираем вкладку – "Таблица” и вбиваем следующие параметры:

Количество строк -1, столбцов – 1, высота таблицы – 12 пикселов, ширина такая же как и у шапки сайта – 770 пикселов, значения всех обрамлений и полей таблицы делаем нулевыми, цвет фона таблицы – прозрачный, выравнивание таблицы – по центру.

После задания параметров кликаем «Ок» и сохраняем изменения в визуальном редакторе, нажав на кнопку «Сохранить».

Давайте откроем файл index.html браузером, и посмотрим как наша страница выглядит после добавления разделительной таблицы.

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

Добавим таблицу для контента

Теперь мы готовы добавить на нашу страницу таблицу для контента. Таблица для контента будет состоять из одной ячейки. Вновь открываем окно визуального html редактора NVU. Добавляем с помощью редактора таблицу, состоящую из одной ячейки, как это делать, мы уже знаем.

Зададим параметры таблицы для контента, для этого, выбираем таблицу, кликнув по ней левой кнопкой мыши. Далее, кликаем кнопку «Таблица» в панели инструментов и переходим к редактированию параметров таблицы.

Параметры таблицы для контента

Сначала вбиваем параметры на вкладке «Ячейка». Здесь, установим параметры выравнивания.

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

Поэтому, в разделе «Выравнивание содержимого» на вкладке «Ячейка», выбираем вот такие параметры: «Вертикальное» - «Вверху», «Горизонтальное» - «Влево».

Переходим к значениям параметров на вкладке «Таблица».

Количество строк и столбцов задаем по одному, так как таблица у нас состоит из одной ячейки. Ширина таблицы как и у шапки сайта – 770 пикселов.

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

Рамку таблицы сделаем 1 пиксел, поля между ячейками и внутри ячеек зададим нулевыми. Выравнивание таблицы в окне браузера - «По центру», цвет фона зададим белый. После задания параметров таблицы жмем «ОК» и сохраняем все изменения, нажав кнопку «Сохранить» в редакторе.

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

Ну что же, теперь мы можем заполнить таблицу контентом. Для данной страницы я приготовил статью, которая называется: «Мой первый сайт в Интернет». Посмотреть, как добавить статью в ячейку таблицы на странице сайта, Вы можете в следующем уроке.

Перейти к Уроку 6: Статья для сайта

Перейти к Уроку 4: Шапка для сайта

Автор: Виктор Милованов