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

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

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

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> атрибут border, указав в каче­стве его значения толщину рамки в пикселах.

u Добавьте в тег <table> атрибутborder=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