Простая вёрстка в HTML. Урок №5.

Вёрстка таблицами. Часть-3.

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

Первым делом любое меню, начинается с главной страницы, то есть мы должны создать пункт «Главная».

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

Следующим, пунктом меню, может стать «Фотогалерея», на которой будут размещены фотографии продукции, к каждой из которых будет привязана ссылка, для перехода к нашим товарам.

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

Создав пункт в меню «Скоро», у нас появляется возможность проведения рекламной компании продукта, о его появления. Здесь мы можем поместить фото и краткое содержание о том товаре, который скоро выйдет в свет. А также создать подписку, для пользователей, что бы они имели возможность получить уведомление о выходе продукта в свет.

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

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

Создаём меню сайта.

Открываем наш файл «index.html» и переходим к закомментированной строке, «Меню сайта». Чуть ниже мы видим вот это:

<td>2</td>

Здесь нам необходимо добавить правила для ячейки в теге <td>, поэтому удаляем полностью выше приведённый код и вставляем  следующее:

<td style="height: 40px; text-align: center;">2</td>

Таким образом, мы указали, высоту для всей ячейки, в которой будет размещена таблица, и её выравнивание содержимого по центру. Далее удалив цифру «2», на её место вставляем вот такую таблицу:

<table style="width: 1000px; height: 45px; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td style="text-align: center;">1</td>
            <td style="text-align: center;">2</td>
            <td style="text-align: center;">3</td>
            <td style="text-align: center;">4</td>
            <td style="text-align: center;">5</td>
            <td style="text-align: center;">6</td>
          </tr>
        </tbody>
      </table>

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

<a href="http://"><button style="width: 166px; height: 40px;">Главная</button></a>

Где начальная с трока «<a href=», говорит браузеру, что он имеет дело с гиперссылкой. Далее следует сама ссылка  «http://», а точнее её часть, которую мы допишем позднее после создания всех основных страниц.  Теперь познакомимся с тегом:

<button></button>

Это парный тег, который в переводе с английского означает «кнопка». То есть данный тег создаёт, кнопку, а любое содержимое (текст) между двух тегов, станет именем этой кнопки. Также в открывшимся теги, мы сразу задали параметры высоты и ширины, нашей будущей кнопки.

<button style="width: 166px; height: 40px;">

Написав содержания, между открывающим и закрывающим тегом, завершаем наш код, вот таким тегом </a>, который предупреждает браузер об окончание действия данной гиперссылки.

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

Рисунок№1.

 Если всё правильно сделали, то должен получиться вот такой фрагмент, как показано на рисунке №1. Если что то, не срослось, то не расстраивайтесь, вы всегда можете посмотреть пример кода, в низу статьи и проверить свои ошибки, а, как известно на ошибках учатся.

В следующем уроке, мы создадим левую колонку и блок контента, нашего сайта визитки. И так до встречи в следующем уроке:  «Простая вёрстка в HTML. Урок №6. Вёрстка таблицами. Часть-4».

Смотреть пример №1