Глава 1. Больше одной страницы
Часть I. Создание сайта
omne initium difficile est
(«всякое начало трудно» - лат.)
Глава 1. Больше одной страницы
Файлы, в которых хранится информация на компьютере, бывают большими и маленькими. Обычные документы предприятия - договоры, акты выполненных работ, счета-фактуры, информационные письма - занимают чаще всего от 30 до 100 килобайт. Документация к какому-либо оборудованию может занимать несколько мегабайт. Коллекция фотоизображений может занимать сотни мегабайт. Один художественный фильм в формате avi - 700 мегабайт.
Вы открываете все эти файлы, просматриваете их, иногда редактируете - и не задумываетесь об их размере, потому что все эти файлы обычно находятся прямо на вашем компьютере, а современные компьютеры очень мощные и легко обрабатывают файлы довольно больших размеров.
Иное дело - Интернет, там файл, который вы хотите просмотреть, может находиться на другом континенте и до вашего компьютера должен проделать довольно большой путь по проводам и по воздуху, а воздух, как известно, очень плохо проводит электрический ток. Поэтому для Интернета очень важен размер файла, который вы помещаете на сервер. Страничка размером в 30 Кб вполне приемлема, в 100 Кб - уже будет загружаться некоторое время, а пользователь в это время будет ждать и нервничать. А вы-то хотите произвести на пользователя хорошее впечатление! Чтобы он купил ваш товар! Поэтому, если информации много, её не помещают всю на одну страницу, а делят на несколько частей, да ещё указывают размер каждой части в килобайтах, чтобы пользователь сам решал, стоит просматривать данный раздел сайта или нет.
В качестве учебного примера разделим информацию о гипотетической торговой группе «Omnia mea» на несколько страниц для интернет-сайта (пока у нас будет мало информации на каждой странице, но мы готовимся к тому, что её количество когда-нибудь вдруг возрастёт):
Главная (файл - всегда! - index.html)
<p>Торговая группа «Omnia mea»
<p>Торговля разнокалиберными товарами оптом, в розницу и на экспорт
Адреса и телефоны (файл address.html)
<p>г. Одесса, Малая Арнаутская, 22
<p>Тел. 002-002, 003-003, 004-004
<p>Филиал в Москве: ул. Советская, тел. 005-005
<p>E-mail: omneinitium@narod.ru
Банковские реквизиты (файл requisit.html)
<p>ИНН 4407091087 ООО Торговая группа «Омниа меа»
<p>Сч. № 20601710600040000070
<p>Банк получателя филиал «Московский» ОАО «Бета-Банк» г. Одесса, БИК 033170811, Сч. № 10301410700000000334
Прайс-лист (файл pricelist.html)
<p>Видеомагнитофон импортный - 3390 р.
<p>Шуба ангорская импортная - 22600 р.
<p>Икра заморская (импортная), 1 банка, 337 г - 10.50 р.
История (файл history.html)
<p>Наша торговая группа «Omnia mea» славится своими давними традициями и своей историей. В 1856 году барон д'Англар прибыл в Россию, чтобы открыть предприятие по производству и переработке ценных бумаг. Очень скоро барон понял, что перерабатывать в России можно не только ценные бумаги, но и вообще всё ценное и интересное: предметы искусства, антикварную бижутерию, кожгалантерею и даже сахарную свёклу. Предприятие разрослось, и, несомненно, заняло бы ведущее место среди мировых монополий, если бы не революция...
Инструкция
Создайте в папке «Мои документы» папку «Omne», откройте её и создайте в ней несколько текстовых файлов по инструкции, изложенной в Прологе книги, с именами index.html, address.html и др. и запишите в файлы соответствующее содержание. Или скопируйте к себе на компьютер в папку «Omne» готовые текстовые файлы:
ex02 Файлы примеров: text1 (text)
Файлы в указанных местах называются index.txt, address.txt et cetera. После копирования к себе на компьютер их надо будет переименовать в index.html и др. - правой кнопкой мыши - «Переименовать».
Теперь у вас в папке «Omne» лежат несколько HTML-страниц, каждую из них можно открыть двойным щелчком и просмотреть содержимое, но возникает закономерный вопрос: как пользователь будет попадать с одной страницы на другую?
Для этого существуют гиперссылки. Это более сложная конструкция, чем знакомые вам метки <p> и <pre>. Выглядит она так: Адреса. Пользователь видит на странице подчёркнутое слово «Адреса», если он щёлкнет по нему мышкой, то увидит содержимое странички "address.html".
Чтобы с каждой странички сайта можно было перейти на любую другую, в начале каждой странички нужно поместить гиперссылки на все странички, то есть следующий код:
<a href="index.html">Главная</a>
<a href="address.html">Адреса</a>
<a href="requisit.html">Реквизиты</a>
<a href="pricelist.html">Прайс</a>
<a href="history.html">История</a>
Не торопитесь, однако, это делать: для более чёткого разделения ссылок и удобного их восприятия добавим между ними (через пробел) по слову «•» - это слово нарисует при просмотре страницы специальный символ - • - жирную чёрную точку:
<a href="index.html">Главная</a> •
<a href="address.html">Адреса</a> •
<a href="requisit.html">Реквизиты</a> •
<a href="pricelist.html">Прайс</a> •
<a href="history.html">История</a>
Вот теперь этот код (он хранится на CD, там же, где и тексты страниц, в файле «navigatia.txt») можно добавить с помощью копирования в начало каждой вашей страницы. Как, однако, будете вы это делать? Если вы щёлкните мышкой по html-файлу, то он откроется в обозревателе для просмотра, и вы не сможете изменить в нём текст. Поэтому для последующего небольшого редактирования html-файлов поступайте следующим образом. Правой кнопкой мыши по имени файла - пункт выпавшего меню «Открыть с помощью» - «Блокнот»:
Если в выпавшем списке «Открыть с помощью» Блокнота нет, выберите пункт «Выбрать программу», в открывшемся окне найдите Блокнот (Notepad); в следующий раз он будет появляться в списке активных программ для «Открыть с помощью».
Откройте в другом окне (например, двойным щелчком) файл navigatia.txt, выделите мышкой нужный текст ссылок, в меню «Правка» выберите «Копировать» (или нажмите Ctrl+C), затем перейдите в окно с открытой в Блокноте нужной html-страницей и через меню «Правка» - «Вставить» (или Ctrl+V) вставьте скопированный текст в нужное место страницы.
После внесения изменений в текст файла попытайтесь закрыть его - Блокнот спросит, надо ли сохранять изменения, вы ответите «Да» (Enter).
ex03 Файлы примеров: htm1 (htm1)
Если вы открываете страницы примеров на CD или на сайте http://figur.ir2.ru с помощью интернет-обозревателя, то, чтобы посмотреть html-код страницы, щёлкните по ней правой кнопкой мыши и из выпавшего меню выберите «Просмотр в виде HTML» («View source»). То же самое можно сделать через меню обозревателя «Вид». Увиденный вами код можно выделить мышью (или стрелками клавиатуры с нажатой клавишей Shift) и затем скопировать в любое место ваших собственных html-кодов.
Лучше использовать для редактирования текстов html-страниц текстовый редактор, в котором есть «синтаксическая подсветка», например, программу Bred (не требует лицензирования, дистрибутив можно скачать с сайта http://www.astonshell.com/rus).
Обновление информации: FTP
Если у вас есть соответствующая информация о своём предприятии, вы можете поместить в HTML-файлы именно её, а не тексты о несуществующем предприятии «Omnia mea»; убедившись, что все ссылки на ваших страничках работают, вы можете загрузить их на тот веб-сервер, на котором уже лежит ваш файл «index.html»; при этом старый файл сотрётся, а на его место запишется файл с новой информацией (с добавленными в него гиперссылками) – примерно так и производится обновление информации на веб-сайтах.
Правда, загружать файлы на сервер можно по-разному. Если вы наберёте в обозревателе адрес сервера (narod.yandex.ru) и откроете сеанс связи со своим именем и паролем, это будет работа по HTTP-протоколу (HyperText transfer protocol), в адресной строке обозревателя обычно автоматически добавляются впереди символы «http://». При таком соединении загрузка файлов может производиться только через специальные окошечки в формах на страницах сервера.
Удобнее загружать файлы на сервер по специально предназначенному для этого FTP-протоколу (File transfer protocol). Для этого надо в обычном окне любой папки Windows в адресной строке набрать примерно тот же (или очень похожий) адрес сервера, только вместо http:// надо в явной форме указать ftp://. В нашем случае надо набрать ftp://ftp.narod.ru. При подключении к серверу появится диалоговое окно, приглашающее ввести ваше имя и пароль, затем, если вы ввели их правильно, вы увидите файлы своего сайта, как на своём собственном компьютере, и сможете копировать файлы на сайт и обратно обычным перетаскиванием мышью, как в папках Windows.
***
Ваш «корпоративный» веб-сайт готов. Сайты такой структуры и такого размера принято называть веб-визитками. Теперь вы можете поместить адрес своей веб-визитки («http://metall2025.narod.ru») на визитку бумажную; вообще использовать его для помещения информации, которая «не влезает» в газету или в телевизор - например, прайс-лист размером в несколько страниц текста; вы можете поместить адрес сайта во все свои фирменные бланки и рекламные объявления - ни один клиент не кинет в вас камень за «простой» вид ваших веб-страниц, если сайт будет функциональным, то есть если вы постоянно будете заботиться об актуальности информации. Например, желательно каждую неделю обновлять прайс-лист, а также своевременно сообщать об изменениях в режиме работы (и каких-то других важных для клиентов событиях) на вашем предприятии.
Вас может смутить отсутствие картинок и жирных разноцветных заголовков. Поверьте, простой вид вашего сайта (который к тому же загружается с реактивной скоростью!) гораздо приятнее многочисленных неумелых попыток «создать красоту». Ведь главное в общении с клиентами - это стиль. В вашей «простой» странице стиль, несомненно, есть. Потому что ваш стиль - это проявление вашей воли; ни в чём так ясно не видится проявление воли, как в отказе от чего-либо: вы знаете, что можно раскрасить интернет-страницу самым чудовищным образом, но отказываетесь от подобной возможности - это и есть проявление вашей воли, вашего стиля.