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

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

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

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.

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

Последние штрихи

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

На Рис. 1 приведен типичный пример применения фреймов. Окно браузера разбито по вертикали на два фрейма. В левом отображается диалог поисковой системы, а справа - наша первая Web-страница. Размер фрейма может изменяться пользователем прямо на экране с помощью мыши. Каждый фрейм имеет собственный адрес, что позволяет отображать его независимо от других фреймов, и собственное имя, позволяющее переходить к нему из других фреймов. Такие свойства фреймов позволяют размещать в одном фрейме информацию, которую автор считает необходимым постоянно показывать пользователю. Это может быть логотип фирмы, набор управляющих кнопок, меню и т.д. С помощью фреймов можно создавать также окна запросов, когда в одном фрейме находится собственно запрос, а в другом - его результаты.

Рис. 1 Окно браузера с фреймами

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

Для описания фреймов используется специальный HTML-файл.

► В окне программы Блокнот (Notepad) создайте новый файл.

► Введите основные теги, кроме тегов <body></body>, которые в файле, описывающем фреймы, не используются. В тегах <title></title> заголовка укажите - Компания ГЕОТОН:

<html> <head>

< title >Компания ГEOTOH</title>

</head>

</html>

Вместо тегов <body></body> в файле, описывающем фреймы, используется пара тегов <frameset></frameset> с атрибутами rows или cols, определяющими, как делится экран - по горизонтали или по вертикали. В качестве значений этих атрибутов можно использовать числовое значение высоты или ширины фрейма в пикселах или в процентах от 1% до 100%. Например, если вы хотите разделить окно браузера по горизонтали на два равных по размеру фрейма, то код HTML должен быть таким:

<frameset rows="50%,50%">

Обратите внимание: значения атрибутов отделяются один от другого запятой.

Чтобы разделить окно браузера по вертикали на два фрейма шириной 200 и 600 пикселов, следует написать:

<frameset cols="200,600">

Однако фактическая ширина и высота окна фрейма зависит от текущего разрешения монитора. Поэтому, если у пользователя установлено разрешение, например, 1024x768 пикселов, т.е. ширина экрана - 1024 пиксела, то часть экрана может остаться незаполненной. Поэтому рекомендуется задавать размеры фреймов в процентах так, чтобы их сумма была равна 100%. Если все же необходимо для одного из окон указать фиксированный размер в пикселах, то размер другого окна можно не указывать, заменив его значение символом *. В этом случае браузер сам подберет нужный размер для второго окна.

Создадим для отображения нашего сайта два вертикальных фрейма. Для первого фрейма, в котором будет выводиться меню, установим фиксированную ширину -160 пикселов, а размер второго предоставим определить браузеру, заменив его звездочкой *.

► В окне программы Блокнот вставьте пустую строку после закрывающего тега </head> и введите следующий код:

<frameset cols="160,*">

</Јrameset>

Таким образом, мы указали, что окно браузера должно быть разделено по вертикали на два фрейма. Для описания каждого фрейма в отдельности используются одиночные теги < frame >, которые должны находиться внутри элемента < frameset >... </ frameset >. Обязательным атрибутом тега < frame > является src, значение его - адрес документа, который должен находиться в данном фрейме. Так как в первом фрейме будет находиться файл menu.html, то данный тег следует записать так:

<frame src="menu.html">

► Вставьте в окне программы Блокнот пустую строку после открывающего тега <frameset > и введите указанный тег.

Во второй фрейм должен загружаться файл geoton. html, поэтому второй тег < frame > будет таким:

<frame src="geoton.html">

Чтобы во второй фрейм могли загружаться также и все остальные страницы сайта - spisok.htmI и другие, которые, возможно, будут созданы, - необходимо с помощью атрибута name присвоить данному фрейму имя, которое, будучи указано в ссылках любого документа в качестве значения атрибута target, определит, в какой именно фрейм следует загрузить документ. Напомним, что в общем случае, при переходе по ссылке новый документ открывается в том же окне. Именно для того, чтобы при переходе по ссылкам нашего меню страницы открывались не в первом фрейме, в котором расположено меню, а во втором, мы использовали в предыдущем разделе в ссылках меню атрибут target со значением "frame": target="frame", где " frame " - это имя второго фрейма. И теперь имя " frame " следует присвоить второму фрейму, в котором должен открываться файл geoton. html. Поэтому второй тег < frame > в окончательном виде должен быть записан так:

<frame src="geoton.html" name="frame">

► Введите этот код, вставив пустую строку перед закрывающим тегом </frameset>.

► Сохраните файл в папке Web под именем index. html.

Окончательный код файла index. html в окне программы Блокнот должен быть таким:

<html>

<head>

< title >Компания rEOTOH</title>

</head>

<frameset cols=160,*>

<frame src="menu. html ">

<frame src="geoton.html" name="frame">

</frameset>

</html>

Имя index. html должно обязательно присваиваться файлу с главной страницей каждого сайта. Именно этот файл открывается по умолчанию при обращении к Web-узлу, если не указано другое имя файла. На некоторых сайтах имя главной страницы может быть index. htm, a index. html отображается не как страница, а как папка с именами файлов. Это надо уточнять у администратора узла.

Теперь можно просмотреть, как выглядят созданные фреймы.

► Откройте в браузере файл index. html из папки Web. Вы увидите, что окно программы просмотра разделено по вертикали на два фрейма. В левом фрейме отображается меню, а в правом - файл geoton. html (Рис. 2.

Рис.2. Фреймы созданы.

Проверим, как работают ссылки меню.

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

► Щелкните Мышью на ссылке меню Главная страница. В правом фрейме снова появится файл geoton. html.

Обратите внимание, что каждый фрейм имеет свои полосы прокрутки. При необходимости их отображение можно отменить. Для этого достаточно в теге < frame > указать атрибут scrolling=no.

► Добавьте в тег, описывающий первый фрейм, атрибут scrolling=no: <frame src^'meim-html" scrolling=no>

В окне браузера Web-страница примет вид примерно как на Рис. 3.

Рис. 3. Вертикальная полоса прокрутки выключена..

Как видите, фреймы - удобное и эффективное средство для размещения информации на Web-страницах. Однако, используя его, не следует терять чувства меры. Слишком большое количество окон на экране не улучшает восприятие информации. Не располагайте на экране более трех фреймов и старайтесь не применять их без необходимости.

Итак, первый этап нашей работы закончен - мы создали сайт из двух Web-страниц. Теперь, чтобы он стал доступен всем, его необходимо поместить в Интернете на один из серверов World Wide Web.

Оглавление

Создаем свою первую Web-страницу. 3

Задаем шрифт, размер шрифта и другое оформление текста. 6

Вставляем рисунок. 11

Создаем список наших возможностей. 12

Книга отзывов и предложений на нашей странице. 14

Вставляем ссылки на другие страницы в Интекрнете. 16

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

Последние штрихи. 24