Практическая работа 9. Создание табличной верстки

Практическая работа 9

Создание шаблона сайта с помощью табличной верстки

Цель:

ü    научиться создавать шаблоны для сайтов с помощью таблицы

План:

ü    Теоретические сведения

ü    Ход работы

ü    Контрольные вопросы

Теоретические сведения

Любой веб-мастер должен уметь сверстать макет своего сайта своими руками. Это умение пригодится при создании своих шаблонов или же при редактировании готовых шаблонов. Для начала нужно решить для себя каким Вы хотите видеть свой будущий сайт. Здесь же попробуем создать наиболее общий шаблон сайта, который Вы сможете отредактировать при необходимости. Вот его макет:

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

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

1) нужно задать ширину столбцов внутренней таблицы, обычно прописывают в процентах. Под левое и правое меню предлагаю отвести по 15% на каждую, и на основной текст у нас останется 70%;

2) по умолчанию текст в таблице начинается наполняться с середины, что не совсем корректно в этом случаи, в сайтах чаще всего текст начинается с верху, и надо это указать с помощью атрибута valign="top".

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

<meta http-equiv="content-type" content="text/html; charset=windows-1251">

Сохраните полученную Web-страницу с расширением HTML. В результате получится готовый шаблон для сайта, который нужно заполнить: баннер, динамическое меню и тд.

Ход работы

Задание. Создайте шаблон для сайта, используя табличную верстку.

Контрольные вопросы

1 Какие этапы создания сайта Вы знаете?

2 На каком этапе создания сайта осуществляется верстка станиц сайта?

3 Какие виды версток сайта Вы знаете?

4 В чем особенность табличной верстки?

5 Опишите достоинства и недостатки табличной верстки?