HTML: Популярный самоучитель
Шрифт:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0 Transitional//EN»>
<HTML>
<HEAD>
<TITLE>Перемещение элементов страницы</TITLE>
<SCRIPT type = "text/javascript">
var dX, dY; //Координаты точки, за которую "держат" элемент var element; //Перемещаемый элемент var fMoving = false; //==true, если перемещается элемент
//Функция начинает перемещение элемента function start{
if (event)
fMoving = true;
element = event.srcElement;
//Сохраняем координаты "хватания" элемента dX = event.offsetX;
dY = event.offsetY;
//Для перемещения элемент должен свободно
}
//Функция перемещения элемента function move{
if (fMoving){
//Установим новые координаты для элемента element.style.pixelLeft = event.x – dX;
element.style.pixelTop = event.y – dY;
}
}
</SCRIPT>
</HEAD>
<BODY onMouseMove="move" onMouseDown = "start"
onMouseUp = "fMoving = false">
<IMG alt = "Перемещаемый рисунок" width = "100" height = "100">
Перемещаемый текст
<H1>Перемещаемый заголовок</H1>
</BODY>
</HTML>
Документ, текст которого приведен в примере 13.18, после перетаскивания элементов показан на рис. 13.8.
Рис. 13.8. Перетаскивание элементов страницы
Свободно позиционировать можно практически любой элемент страницы, однако наиболее эффектно выглядит перетаскивание изображений. Несмотря на кажущуюся ненужность, перетаскивание элементов может все же оказаться полезным при повышении «дружественности» интерфейса веб-страниц. Представьте себе, что вы, например, совершаете покупки в интернет-магазине. Понравился товар – перетаскиваете его изображение в свою корзину (определенная область окна). Хотите отказаться от покупки выбранного ранее товара – перетаскиваете его изображение за пределы корзины. Удобно, не так ли?
Глава 14
Создаем настоящий веб-сайт
После достаточно долгого изучения создания HTML-документов самих по себе, после изучения каскадных таблиц стилей и того, как добавляются и действуют сценарии в документах, наконец-то рассмотрим применение описанных ранее технологий на примере создания веб-сайта.
Эта глава посвящается непосредственно разработке и реализации веб-сайта. В следующей главе представлена довольно полезная информация, которая может пригодиться при публикации разработанного сайта в Интернете.
14.1. Содержание сайта
В начале определимся с содержанием сайта. Пусть это будет информационный ресурс, посвященный... яблокам. Да, это будет своеобразный сайт любителей яблок. Не столько важна тематика сайта, сколько решения, которые будут применены при его реализации.
Итак, наш информационный ресурс о яблоках будет содержать следующую информацию (кроме стартовой страницы и страницы информации о сайте):
• краткая история развития яблочной культуры;
• информация о пищевых свойствах яблок;
• информация о сборе и хранении яблок;
• информация о сортах яблок;
• рецепты приготовления различных блюд с использованием яблок.
Информация будет по большей части текстовой, а также немного таблиц. Нужно уделить особое внимание представлению рецептов блюд так, чтобы сайт можно было без проблем использовать как справочник по этим рецептам. Кстати, предположительно, что рецепты будут составлять основную долю информации, представленной на сайте.
14.2. Навигация по сайту
Для навигации по сайту будет использован усовершенствованный вариант всплывающего меню, рассмотренного в предыдущей главе. Меню организуем вверху страницы. Оно будет содержать следующие пункты.
• Главная (переход на главную страницу, файл index.html).
• Информация, содержит следующие пункты:
· История (файл history.html);
· Пищевая
· Сбор и хранение яблок (файл collectsave.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>