Создаем меню в виде таблицы

До сих пор мы создавали документы, в которых текст располагался в одной ко­лонке. На практике иногда бывает необходимо расположить текст в двух или трех колонках. Помочь в этом может таблица. Кроме того, таблица, состоящая из одной ячейки, может эффектно выделить фрагмент текста, на который вы хо­тите обратить- внимание читателя. Очень удобно чередовать в ячейках таблицы рисунки и текст. Ну, и конечно же, таблица нужна для отображения информации в табличном виде. Часто таблица используется для представления меню.

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

u Создайте новый текстовый файл, выбрав в меню программы Блокнот команду Файл / Создать.

u Введите основные теги, создающие структуру документа. В заголовке доку­мента укажите Меню. Цвет фона и текста документа самостоятельно выберите такими, чтобы ссылки были хорошо видны:

< html> < head>

< title> Меню< /title> < /head>

< body bgcolor=silver>

< /body>

< /html>

Каждая таблица начинается тегом < table > и заканчивается тегом < /table>. Строки таблицы образуются парой тегов < tr> < /tr>, между которыми распола­гаются пары тегов < td> < /td>. Каждая пара этих тегов образует один столбец. Между открывающим < td> и закрывающим < /td> тегами помещается текст или любое другое содержимое ячейки.

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

< table>

< tr> < td> Главная страница< /td> < /tr>

< tr> < td> Чем мы занимаемся? < /td> < /tr>

< tr> < td> О ашей компании< /td> < /tr>

< tr> < td> Новости< /td> < /tr>

< tr> < td> Оборудование< /td> < / tr>

< tr> < td> Спец. ПО< /td> < /tr>

< tr> < td> Наши партнеры< /td> < /tr>

< tr> < td> Прайс-лист< /td> < /tr>

< tr> < td> Связь с компанией< /td> < /tr>

< /table>

u Вставьте пустую строку между открывающим < body > и закрывающим < /body> тегами и, начиная с нее, введите указанный код.

u Сохраните документ в папке Web под именем menu.html.

u Откройте в окне браузера файл menu.html.

Созданная нами таблица располагается у левого края экрана. Это положение можно изменить, использовав в открывающем теге < table > атрибут align=center для выравнивания таблицы по центру или атрибут align=right -для выравнивания по правому краю окна браузера. Пункты меню расположены один под другим, а края таблицы и ячеек не видны. Это связано с тем, что по умолчанию рамка и ячейки таблицы не показываются. Чтобы включить их ото­бражение, следует использовать в теге < table > атрибут borde r, указав в каче­стве его значения толщину рамки в пикселах.

u Добавьте в тег < table > атрибут borde r =l, чтобы показать рамку и ячейки таблицы толщиной 1 пиксел:

< table border=l>

Теперь таблица будет отображается с рельефными границами.

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

► Установите для таблицы ширину 140 пикселов, добавив атрибут width=l40 в открывающий тег < table> так, чтобы он принял вид:

< table border=l width=140>

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

При использовании для формирования столбцов таблицы тегов < td> < /td> дан­ные в ячейках представляются шрифтом нормального текста и по умолчанию выравниваются по левому краю ячеек. Если же требуется выделить данные в ячейках, например, заголовки столбцов или строк таблицы, то вместо тегов < td> < /td> удобно использовать теги < th> < /th>. Текст в элементах < th> < /th> обычно выделяется полужирным начертанием и выравнивается по центру ячеек.

Наше меню будет выглядеть лучше, если его пункты будут центрированы в ячейках и выделены полужирным шрифтом. Поэтому заменим в HTML-коде элементы < td> < /td > элементами < th> < /th >.

► Отредактируйте файл menu.html, заменив теги < td> и < /td> соответственно тегами < th> и < /th>.

В тегах < td > и < th > вы можете использовать следующие атрибуты:

· align - для горизонтального выравнивания содержимого ячеек по центру (center), левому (left) и правому (right) краям ячейки;

· width - для указания ширины ячейки в пикселах;

· height - для определения высоты ячейки;

· valign - для вертикального выравнивания данных в ячейке по верхнему (top) и нижнему (bottom) краям и середине (middle) ячейки; по умолчанию valign=middle.

► Проверьте, как работают эти атрибуты, после чего верните таблицу в преж­нее состояние.

Вы можете также изменить цвет любой ячейки, столбца, строки или всей таблицы, вставив атрибут bgcolor соответственно в тег < th>, < tr> или < table>.

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

Нам осталось теперь создать ссылки из двух первых пунктов меню на соответст­вующие страницы нашего сайта. Так как остальные страницы еще не созданы, то ограничимся этими двумя ссылками. Как и прежде, воспользуемся тегами < а> < /а> с атрибутом href. В качестве значения этого атрибута для первого пункта меню - Главная страница - следует указать файл geoton.html, т.е. href=" geoton.html ", а для второго - Чем мы занимаемся? - файл spisok.html, т.е. href=" spisok.html ".

Далее мы разделим экран по вертикали на два окна так, чтобы у левого края эк­рана постоянно отображалась таблица с меню, а справа от нее - страницы нашего сайта, которые пользователь сможет выбирать из меню. Обычно при переходе по ссылке новый документ отображается в том же окне, что и исходный, в котором была ссылка. Чтобы отобразить его в другом окне, необходимо в открывающем теге < а> использовать атрибут target, параметром которого должно быть имя того окна, в которое будет загружен документ. Укажем это имя как значение атрибута target в ссылке: target=" frame ".

► Отредактируйте в файле menu. html строки кода, содержащие названия пунк­тов меню Главная страница и Чем мы занимаемся?, вставив вышеука­занные ссылки соответственно на файлы geoton. html и spisok. html так, что­бы эти строки приняли следующий вид:

< tr> < th> < a href =" geoton.html" target=" frame" > Главная страница < /a> < /th> < /tr>

< tr> < th> < a href =" spisok.html" target=" frame" > Чем мы занимаемся? < /a> < /th> < /tr>

Теперь первые два пункта меню выделены цветом и подчеркнуты как ссылки. Проверим, как работают эти ссылки.

► Щелкните мышью на первой ссылке - Главная страница. В зависимости от версии браузера, файл geoton. html будет загружен либо в новое отдельное, либо в то же самое окно браузера.

► Если файл был загружен в то же самое окно браузера, то нажмите кнопку Назад на панели инструментов или просто закройте окно, если файл был загружен в новое окно. На экране снова отобразится файл menu. html.

► Щелкните мышью на второй ссылке - Чем мы занимаемся? В окне браузера появится файл spisok. html.

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