Шрифт:
Приведенная в примере функция expand скрывает или показывает элемент страницы, ссылка на который передана ей в качестве параметра, путем изменения его стилевого класса (описание используемых стилевых таблиц приведено далее).
Прочие сценарии
Кроме рассмотренных сценариев, обеспечивающих создание, работоспособность меню и разворачивающихся абзацев, каждая страница использует еще два сценария для заполнения секции дополнительной информации (ячейка, образующая левый ряд основной таблицы) и информации об авторских правах (нижняя часть страницы, образованная слиянием ячеек последней строки основной таблицы).
Первый из указанных сценариев находится в файле load_info.js и выглядит следующим образом (пример 14.8).
/*
Сценарий в этом файле загружает картинки яблок
и рекламные сообщения
*/
//Функция генерации случайного значения (целого)
function rand(min, max){
return Math.floor(Math.random*(max-min)+min);
}
//Загрузка изображения document.write("<TABLE width = \"100%\" height = \"100%\">");
document.write("<TR><TD><IMG id = \"apple_image\" width = \"100%\"");
document.write("src = \"apples/" + rand(1,14.9) + ".jpg\"></TD></TR>");
//Типа загрузка рекламы...
document.write("<TR><TD>Здесь могла быть Ваша реклама</TD></TR>");
document.write("</TABLE>");
При анализе текста приведенного сценария можно увидеть, что сценарием создается таблица, занимающая все доступное пространство (имеется в виду левая часть страницы). В ячейки этой таблицы и добавляются различные сведения. В данном случае это одна из 14 картинок с изображением яблок в папке apples, а также надпись.
Еще один сценарий используется для заполнения ячейки в нижней части страницы сведениями об авторских правах. Он записан в файле copyright.js и состоит из одной-единственной строки:
document.write(«© Чиртик Александр 2006»);
Используемые таблицы стилей
В двух CSS-файлах помещены используемые таблицы стилей. В файле page.css находится таблица стилей, используемая для оформления текста страниц (плюс оформление основной таблицы страниц) (пример 14.9).
/*
Определения стилей для таблицы, форматирующей страницу
*/
TABLE.main_table {width: 100%; border-style: none;
background-color: green}
COL.info {width: 100px; background-color: rgb(180,255,200)}
COL.content {background-color: rgb(200,255,200)}
TR.copyright {background-color: green; color: white; text-align: right;
padding: 5; font-size: 3mm}
/*
Стили рецептов
*/
.process {font-size: 85%}
.products {font-style: italic; font-size: 85%}
/*
Прочие стили разметки
*/
H1 {text-align: center}
В файле menu.css находится таблица стилей, используемая для оформления пунктов меню и рецептов (пример 14.10).
/*
Стиль строки меню и ее пунктов
*/
.menu_line {border-style: none; background-color: green;
width:100%; text-align: center}
.main_item {background-color: green}
.main_selected {background-color: magenta}
A.main_href {color: rgb(230,230,230); text-decoration: none;
font-family: "times new roman"}
/*
Стиль пунктов меню
*/
.item {background-color: rgb(230,230,230)}
.selected {background-color: magenta}
A.main_href {}
/*
Стили отображаемого и спрятанного меню
*/
.menu {border-style: solid; border-width: 1px;
visibility: visible; position: absolute;
background-color: rgb(230,230,230); border-color: black}
.hidden {display: none}
/*
Определение стилей для разворачиваемых элементов exp – класс элемента, при щелчке кнопкой мыши на котором будет показан соответствующий элемент класса expbody
*/
.exp {background-color: rgb(150, 255, 200)}
.exp_ref {text-decoration: none; font-weight: bold}
.expbody {display: block; background-color: rgb(150, 255, 150)}
.exp_hidden {display: none}
В приведенных таблицах стилей использовано небольшое количество настроек, чтобы слишком не увеличивать размер таблиц.
14.5. Примеры работы сайта
При открытии сайта пользователь попадает на главную (стартовую) страницу (файл index.html), показанную на рис. 14.4.
Рис. 14.4. Главная страница сайта
Реализованная страница истории яблок особого интереса не представляет. Обратим внимание, как выглядит страница с рецептами, ведь там дополнительно используются реализованные нами разворачивающиеся абзацы. Итак, внешний вид страницы с рецептами приведен на рис. 14.5 (начало страницы).
Рис. 14.5. Страница с рецептами
Сами рецепты выглядят так, как показано на рис. 14.6.
Рис. 14.6. Страница с рецептами (сами рецепты)
Ну вот, мы выполнили практически все необходимое для того, чтобы можно было поместить сайт в сеть Интернет (правда, содержание сайта пока неполное). Как раз этому посвящена следующая – последняя – глава книги.
Глава 15
Публикация сайта в Интернете
После того как пройден путь от изучения основ HTML до создания собственного сайта, наступило время выйти в большой мир, то есть опубликовать сайт в Интернете. Для этого нужно узнать еще совсем немного (на первый взгляд): как, где помещается сайт в Сети.
15.1. Ищем место для сайта
Чтобы опубликовать сайт в Интернете, нужно сначала найти для него место. В Сети существует ряд серверов, предназначенных как раз для размещения на них сайтов. Услуга предоставления места на таком сервере называется хостингом.
Существует большое количество компаний, осуществляющих как платный, так и бесплатный хостинг. Оба вида хостинга имеют свои преимущества и недостатки. Основными недостатками бесплатного хостинга зачастую являются следующие: