HTML: Популярный самоучитель
Шрифт:
• Сорта яблок, содержит следующие пункты:
· Летние (файл summer.html);
· Осенние (файл autumn.html);
· Зимние (файл winter.html);
· Позднезимние (файл deepwinter.html).
• Рецепты, содержит следующие пункты:
· Салаты с яблоками (файл salat.html);
· Супы с яблоками (файл soup.html);
· Мясные блюда с яблоками (файл meat.html);
· Рыбные блюда с яблоками (файл fish.html).
• О проекте (переход на страницу с информацией о сайте, файл about.html).
Внешний вид меню навигации показан на рис. 14.1. Реализация меню будет рассмотрена позже.
Рис. 14.1. Внешний вид меню навигации
14.3. Расположение файлов
Теперь определимся с тем, какие папки будут созданы и как в них будут располагаться файлы, используемые для сайта. Сразу отметим, что стартовый файл – index.html.
Пусть рассматривается папка, в которой находится сайт. Тогда ее содержимое можно представить следующим списком:
• все HTML-файлы сайта (index.html, history.html и т. д.);
• папка с именем css, в которой находятся используемые таблицы стилей;
• папка с именем script, в которой находятся все используемые сценарии;
• папка с именем apples, в которой находятся иллюстрации – картинки яблок (для чего они, см. далее).
В следующем разделе будет пояснено, почему все HTML-файлы сайта помещаются в одну папку,
14.4. Реализация сайта
Шаблон и внешний вид страниц
Итак, внешний вид страниц строится на основе таблиц. Чтобы сделать наполнение страниц сайта как можно менее трудоемким, разработан HTML-файл шаблонной страницы (шаблон.html), его содержимое приведено в примере 14.1.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<HTML>
<HEAD>
<TITLE>Шаблон</TITLE>
<META name = "Keywords" content = "яблоки, яблоневая культура,
история, сорта яблок, сорт яблок, рецепты, сбор, хранение">
<META http-equiv = "Content-Type" content = "text/html;
charset=windows-1251">
<LINK type = "text/css" href = "css/menu.css" rel = "stylesheet">
<LINK type = "text/css" href = "css/page.css" rel = "stylesheet">
<SCRIPT type = "text/javascript" src = "script/popup_menu.js"></SCRIPT>
</HEAD>
<BODY onClick = "hide_menu;">
<A id = "_start"></A>
<!–Вставка строки меню–>
<SCRIPT type = "text/javascript" src = "script/create_menu.js"></SCRIPT>
<TABLE class = "main_table">
<COL width = "70" class = "info">
<COL width = "*" class = "content">
<TR>
<TD class = "info">
<!–Здесь содержится дополнительная информация, реклама и др.
Загружается сценарием–>
<SCRIPT type = "text/javascript" src = "script/load_info.js"></SCRIPT>
</TD>
<TD class = "content">
<!–Далее идет содержимое страницы–>
</TD>
</TR>
<TR class = "copyright">
<TD colspan = "2">
<!–Информация об авторском праве и др. Загружается сценарием–>
<SCRIPT type = "text/javascript" src = "script/copyright.js"></SCRIPT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Чтобы сделать из приведенного в примере 14.1 файла страницу на конкретную тему, достаточно изменить название страницы, а также добавить на нее содержимое (место вставки содержимого указано HTML-комментарием). Страница шаблона выглядит так, как показано на рис. 14.2.
Рис. 14.2. Внешний вид страницы шаблона
Как можно заметить, кроме названия страницы, собственно текста страницы, а также расположения и размера главной таблицы, формирующей интерфейс страницы, ключевых слов и элементов, подключающих сценарии и таблицы стилей, в файлах создаваемого сайта нет жестко заданной информации. Это сделано для того, чтобы максимально облегчить последующую модификацию всех страниц сайта: меню, информация об авторских правах, информация в левой колонке формируются соответствующими сценариями при загрузке страниц.
Вообще для большей универсальности можно было бы поручить отдельному сценарию полностью формировать раздел HEAD документа (кроме содержимого элемента TITLE), а еще одному сценарию доверить формирование элемента BODY документа (кроме, естественно, содержимого страницы).
Однако за достигнутую с помощью сценариев универсальность надо платить, прежде всего тем, что пользователи, браузеры которых не поддерживают сценарии (что, однако, сегодня встречается крайне редко), смогут увидеть только текстовое наполнение страниц. Им будет недоступно меню, без которого в данной реализации сайта недоступна навигация.
Чтобы такого не случилось, можно добавить, например, в начало и конец текста каждой страницы гиперссылку на дополнительную страницу сайта, в которой содержится оглавление в виде гиперссылок. Тогда пользователь «ущербного» браузера сможет перемещаться по страницам сайта. Если же браузер пользователя поддерживает сценарии, то упомянутые гиперссылки целесообразно скрывать, для чего им можно присвоить идентификаторы, например index1, index2, а в один из файлов сценариев вставить следующие строки:
index1.style.display = «none»;
index2.style.display = "none";
Итак, после рассмотрения файла шаблона страниц сайта можно назвать первую причину, по которой все файлы помещаются в одной папке, – это отсутствие необходимости изменения значений атрибутов в тегах <SCRIPT>, <LINK> и <META> каждой новой страницы. Вторая причина станет очевидна при рассмотрении сценария, создающего меню при загрузке страницы.
Реализация меню
Итак, с меню связаны два сценария. Первый находится в файле create_menu.js и записывает в HTML-документ строки, создающие таблицы – раскрывающиеся меню и таблицу строки меню. Рассмотрим содержимое этого файла (пример 14.2).
/*
Сценарий в этом файле вставляет в документ определение пунктов меню,
а также определение строки главного меню (выполняется при загрузке)
*/
//Определение меню "Информация"
document.write("<TABLE id = \"general\" class = \"hidden\">");
document.write("<TR id = \"general_history\" class = \"item\"");
document.write("onMouseOver = \"general_history.className = 'selected'\"");
document.write("onMouseOut = \"general_history.className = 'item'\">");
document.write("<TD><A href = \"history.html\">История</A></TD>");
document.write("</TR>");
document.write("<TR id = \"general_values\" class = \"item\"");
document.write("onMouseOver = \"general_values.className = 'selected'\"");
document.write("onMouseOut = \"general_values.className = 'item'\">");
document.write("<TD><A href = \"values.html\">Пищевая ценность яблок</A></TD>");
document.write("</TR>");
document.write("<TR id = \"general_collectsave\" class = \"item\"");
document.write("onMouseOver = \"general_collectsave.className = 'selected'\"");
document.write("onMouseOut = \"general_collectsave.className = 'item'\">");
document.write("<TD><A href = \"collectsave.html\">Сбор и хранение яблок</A></TD>");
document.write("</TR>");
document.write("</TABLE>");
//Определение меню «Сорта яблок»
document.write("<TABLE id = \"types\" class = \"hidden\">");
document.write("<TR id = \"types_summer\" class = \"item\"");
document.write("onMouseOver = \"types_summer.className = 'selected'\"");
document.write("onMouseOut = \"types_summer.className = 'item'\">");
document.write("<TD><A href = \"summer.html\">Летние</A></TD>");
document.write("</TR>");
document.write("<TR id = \"types_autumn\" class = \"item\"");
document.write("onMouseOver = \"types_autumn.className = 'selected'\"");
document.write("onMouseOut = \"types_autumn.className = 'item'\">");
document.write("<TD><A href = \"autumn.html\">Осенние</A></TD>");
document.write("</TR>");
document.write("<TR id = \"types_winter\" class = \"item\"");
document.write("onMouseOver = \"types_winter.className = 'selected'\"");
document.write("onMouseOut = \"types_winter.className = 'item'\">");
document.write("<TD><A href = \"winter.html\">Зимние</A></TD>");
document.write("</TR>");
document.write("<TR id = \"types_deepwinter\" class = \"item\"");
document.write("onMouseOver = \"types_deepwinter.className = 'selected'\"");
document.write("onMouseOut = \"types_deepwinter.className = 'item'\">");
document.write("<TD><A href = \"deepwinter.html\">Позднезимние</A></TD>");
document.write("</TR>");
document.write("</TABLE>");
//Определение
меню «Рецепты»document.write("<TABLE id = \"recepts\" class = \"hidden\">");
document.write("<TR id = \"recepts_salat\" class = \"item\"");
document.write("onMouseOver = \"recepts_salat.className = 'selected'\"");
document.write("onMouseOut = \"recepts_salat.className = 'item'\">");
document.write("<TD><A href = \"salat.html\">Салаты с яблоками</A></TD>");
document.write("</TR>");
document.write("<TR id = \"recepts_soup\" class = \"item\"");
document.write("onMouseOver = \"recepts_soup.className = 'selected'\"");
document.write("onMouseOut = \"recepts_soup.className = 'item'\">");
document.write("<TD><A href = \"soup.html\">Супы с яблоками</A></TD>");
document.write("</TR>");
document.write("<TR id = \"recepts_meat\" class = \"item\"");
document.write("onMouseOver = \"recepts_meat.className = 'selected'\"");
document.write("onMouseOut = \"recepts_meat.className = 'item'\">");
document.write("<TD><A href = \"meat.html\">Мясные блюда с яблоками</A></TD>");
document.write("</TR>");
document.write("<TR id = \"recepts_fish\" class = \"item\"");
document.write("onMouseOver = \"recepts_fish.className = 'selected'\"");
document.write("onMouseOut = \"recepts_fish.className = 'item'\">");
document.write("<TD><A href = \"fish.html\">Рыбные блюда с яблоками</A></TD>");
document.write("</TR>");
document.write("</TABLE>");
//Определение строки меню
document.write("<TABLE id = \"main_menu1\" class = \"menu_line\">");
document.write("<COL width = \"70\">");
document.write("<COL width = \"100\">");
document.write("<COL width = \"100\">");
document.write("<COL width = \"80\">");
document.write("<COL width = \"*\">");
document.write("<COL width = \"100\">");
document.write("<TR>");
document.write("<TD class = \"main_item\" id = \"main_index\"");
document.write("onMouseOver = \"main_index.className = 'main_selected'\"");
document.write("onMouseOut = \"main_index.className = 'main_item'\">");
document.write("<A href = \"index.html\" class = \"main_href\">Главная</A>");
document.write("</TD>");
document.write("<TD class = \"main_item\" id = \"main_general\"");
document.write("onClick = \"show_menu(general, main_menu1, main_general)\"");
document.write("onMouseOver = \"main_general.className = 'main_selected'\"");
document.write("onMouseOut = \"main_general.className = 'main_item'\">");
document.write("<A href = \"general\" class = \"main_href\" ");
document.write("onClick = \"event.returnValue = false\">");
document.write("Информация</A>");
document.write("</TD>");
document.write("<TD class = \"main_item\" id = \"main_types\"");
document.write("onClick = \"show_menu(types, main_menu1, main_types)\"");
document.write("onMouseOver = \"main_types.className = 'main_selected'\"");
document.write("onMouseOut = \"main_types.className = 'main_item'\">");
document.write("<A href = \"types\" class = \"main_href\" onClick = \"");
document.write("event.returnValue = false\">");
document.write("Сорта яблок</A>");
document.write("</TD>");
document.write("<TD class = \"main_item\" id = \"main_recepts\"");
document.write("onClick = \"show_menu(recepts, main_menu1, main_recepts)\"");
document.write("onMouseOver = \"main_recepts.className = 'main_selected'\"");
document.write("onMouseOut = \"main_recepts.className = 'main_item'\">");
document.write("<A href = \"recepts\" class = \"main_href\" onClick = \"");
document.write("event.returnValue = false\">");
document.write("Рецепты</A>");
document.write("</TD>");
document.write("<TD></TD>");
document.write("<TD class = \"main_item\" id = \"main_about\"");
document.write("onMouseOver = \"main_about.className = 'main_selected'\"");
document.write("onMouseOut = \"main_about.className = 'main_item'\">");
document.write("<A href = \"about.html\" class = \"main_href\"> О проекте</A>");
document.write("</TD>");
document.write("</TR>");
document.write("</TABLE>");
Приведенный пример является самым объемным в этой книге, однако его суть довольно проста. Вначале в документ записывается HTML-код создания трех таблиц, соответствующих раскрывающимся меню (идентификаторы таблиц: general, types, recepts). Четвертая таблица, добавляемая в документ сценарием, является строкой меню. Начнем рассмотрение именно с нее.
Для начала перепишем HTML-код, описывающий строку меню, в более наглядной форме (то есть рассмотрим создаваемую сценарием таблицу) (пример 14.3).
<TABLE id = «main_menu1» class = «menu_line»>
<COL width = "70">
<COL width = "100">
<COL width = "100">
<COL width = "80">
<COL width = "*">
<COL width = "100">
<TR>
<TD class = "main_item" id = "main_index"
onMouseOver = "main_index.className = 'main_selected'"
onMouseOut = "main_index.className = 'main_item'">
<A href = "index.html" class = "main_href">Главная</A>
</TD>
<TD class = "main_item" id = "main_general"
onClick = "show_menu(general, main_menu1, main_general)"
onMouseOver = "main_general.className = 'main_selected'"
onMouseOut = "main_general.className = 'main_item'">
<A href = "general" class = "main_href"
onClick = "event.returnValue = false">
Информация
</A>
</TD>
<TD class = "main_item" id = "main_types"
onClick = "show_menu(types, main_menu1, main_types)"
onMouseOver = "main_types.className = 'main_selected'"
onMouseOut = "main_types.className = 'main_item'">
<A href = "types" class = "main_href" onClick = "
event.returnValue = false">
Сорта яблок
</A>
</TD>
<TD class = "main_item" id = "main_recepts"
onClick = "show_menu(recepts, main_menu1, main_recepts)"
onMouseOver = "main_recepts.className = 'main_selected'"
onMouseOut = "main_recepts.className = 'main_item'">
<A href = "recepts" class = "main_href" onClick = "
event.returnValue = false">
Рецепты
</A>
</TD>
<TD></TD><!–Эта ячейка просто занимает место–>
<TD class = "main_item" id = "main_about"
onMouseOver = "main_about.className = 'main_selected'"
onMouseOut = "main_about.className = 'main_item'">
<A href = "about.html" class = "main_href"> О проекте</A>
</TD>
</TR>
</TABLE>