Создание сайта

Разбить на страницы

Показывать лекцию целиком

Яндекс.Народ - это площадка для хороших сайтов. В этой лекции мы научимся самостоятельно делать хорошие сайты.

Что нужно для того, чтобы сделать сайт?

В один прекрасный день вы решаете сделать сайт. Это решение приходит внезапно, а может, постепенно. Но оно совершенно однозначно - вам нужен сайт. Поспрашивав друзей и знакомых, поискав в Интернете, постепенно вырисовывается перечень понятий, нужных для этого:

Регистрация доменного имени. Другими словами, нужно застолбить то, что имя www.mysite.ru принадлежит именно вам. Делается это рублей за 600 в первый год, а потом еще нужно будет продлевать домен за 450 рублей в год. Разумеется, имя www.mysite.ru можно застолбить только в том случае, если оно свободно, то есть этого никто не сделал до вас.

Хостинг. В конечном итоге - сайт это куча файлов, которые для того чтобы они были доступны посетителям, должны лежать на компьютере, который постоянно включен в сеть с широким каналом связи. Такой компьютер и называется сервером, а предоставление места на нем называется хостингом. Конечно, на этом компьютере еще должно работать специальное программное обеспечение, которое называется серверным. Впрочем, путаницы добавляет и тот факт, что конкретная программа тоже называется сервером - Apache-сервер или IIS-сервер. Получается, на сервере работает сервер, который и крутит сайт. Стоимость хостинга зависит от многих параметров, среди которых самый простой и осязаемый - это размер сайта. На момент написания курса, предоставление 1000МБ серверного жесткого диска обойдутся от 162,5 рублей в месяц. Конечно, лучше планировать эти затраты на целый год.

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

, которая ежегодно публикует подобные статистические данные. Есть вариант получить профессиональный дизайн своего сайта не насовсем, а в аренду. Если вас не слишком беспокоит тот факт, что сайт с точно таким же оформлением, что и у вас, будет доступен для жителей Новой Зеландии, Испании, а также любой другой страны, то смело арендуем шаблон - это будет стоить порядка 70$. Шаблон сайта предлагается также выкупить в уникальное использование. Правда, это будет стоить порядка тех же 2000$.

Иногда нужно помнить - что дизайн это еще далеко не все. Самое главное - это цели и задачи сайта. Библиотека Lib.Ru вообще не содержит никакого дизайна, а тексты на ней выложены в самом обычном текстовом формате. Этот аскетизм не мешает получать сайту премии Рунета, гранты, а также быть ресурсом с очень и очень высокой посещаемостью.

Система управления сайтом или (англ. Content management system, CMS). Это еще один совершенно отдельный мир, теперь уже для программистов. Что нам осталось сделать? К кусочкам паззла - доменного имени, хостинга, дизайна, нам нужно добавить функционал, который соберет все части в единое целое и заставит сайт работать. Этим занимаются программисты, которые на основании требований - так называемого технического задания, воплощают идеи в жизнь. Далее сайт будет передан вам, а вот управлять им - размещать новые странички и материал, редактировать старые, придется вам, с помощью той самой системы управления сайтом. Сколько это будет стоить? Расчет довольно простой - время необходимое на создания сайта умножается на ставку оплаты труда программиста.

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

Для нас это означает - всем нужно платить, платить, платить.

Хорошо, это не проблема для компании, которой нужен сайт. Выделяется определенный бюджет, реализуется задача - без вникания в то, сколько специалистов для этого нужно и кто из них чем будет заниматься. Есть задача - есть средства - получаем результат. От величины бюджета зависит, будет ли это бюджетный ;-) сайт или роскошный шедевр, сделанный лучшими мастерами отрасли.

А как быть всем, кто просто хочет сделать свой сайт? Кто начинает знакомиться со всем этим сайтостроением, изучает HTML и CSS? Кто не знает, как делать сайты, но просто хочет поведать всему миру о своем хобби? Получить персональную площадку, где будет виртуальное представительство человека? Быстро получить сайт, который будет посвящен одному событию, месту или явлению? Перечитав все то, что написано выше, а также сложив все цены, очевидно, для себя, для хобби, не захочется делать никакого сайта.

Но есть простой и совершенно бесплатный выход, который называется Яндекс.Народ. Сервис позволяет получить совершенно бесплатно: доменное имя типа mysite.narod.ru, хостинг, определенный набор шаблонов дизайна, систему управления сайтом.

Подготовка к созданию сайта

Итак, мы будем рассматривать способ, как бесплатно получить свой собственный сайт. Первое, что стоит сделать, это найти сайты конкурентов и выяснить, не будет ли создаваемый сайт стотысячным клоном, абсолютно идентичным и глубоко вторичным. Мы будем рассматривать создание что-то вроде краеведческой площадки, где будут размещаться фотографии Воронежа. Набираем в Яндексе "фотографии Воронежа" и смотрим результаты (рис 3.1):

(рис 3.1) Результаты поиска по запросу "фотографии Воронежа"

Заметим, что на первом месте находятся результаты сайтов, размещенные именно на Народ.Ру. Это, конечно, не правило, но совпадение, которое говорит от том, что энтузиасты сделали настолько хорошие сайты, что они попали в топ результатов.

Внимательно изучив уже сделанные сайты, сформулируем ряд целей для своего сайта:

Разместить фотографии интересных, необычных мест, а не просто памятников архитектуры. Не нужны стандартные памятники и строения, которые есть в любом российском городе (зачастую тем же самым людям и с теми же самыми названиями). Не нужны обычные скульптуры из гранита, чье достоинство заключено лишь в памяти и символизме. Только то, что обязательно захочется увидеть при посещении города.

Выкладывать фотографии в разрешении, достаточном для комфортного просмотра. Никаких эскизов - сразу крупные изображения в виде одного полотна, сопровождаемого комментариями. В свою очередь, эти изображения будут гиперссылками на фотографии с разрешением исходных снимков. Такой подход позволит (кому угодно) печатать изображения в хорошем качестве. Все изображения будем выкладывать без уродливых водяных знаков и копирайтов - большое разрешение будет как бы намекать, что снимки можно печатать совершенно свободно. Конечно, при дублировании материала в сети хочется хотя бы ссылок на оригинал (исходное изображение) - это соответствует нормам авторского права, в некоммерческих проектах это льстит самолюбию, но явно писать про копирайты на сайте не будем.

Сделать привязку к интерактивным Яндекс.Картам - чтобы сразу видеть, где расположен этот объект.

Если мы реализуем эти цели, то сайт будет отличаться от других, а значит, будет представлять определенную ценность. Приступим к созданию сайта. После авторизации на любом из сервисов Яндекса переходим по ссылке ):

(рис 3.2) Переход к сервису "Народ" после авторизации

Это значит, что для получения доменного имени mysite.narod.ru достаточно зарегистрировать адрес электронной почты mysite@yandex.ru. Тогда идем на страницу почты, регистрируем ящик v-rn@yandex.ru и переходим к его настройкам. В поле ):

(рис 3.3) Настройки почтового ящика

Возвращаемся по ссылке ):

(рис 3.4) Создание сайта

Мы оказываемся в мастерской - административной части сайта. Это и есть та система управления сайтом, которую нужно было бы заказывать у специалистов для сайта, создаваемого с нуля. Нам нужно что-нибудь разместить на главной странице. Для этого щелкаем по соответствующей ссылке (рис 3.5):

(рис 3.5) Переход по ссылке "Главная страница" в мастерской

Здесь нам предстоит выбрать один из готовых шаблонов дизайна. Мы остановимся на самом сложном - когда все придется проделывать самостоятельно (рис 3.6):

(рис 3.6) Выбор шаблона дизайна

Открывается страница, на которой предлагается задать внешний вид всех элементов страницы - фоновый цвет, фоновое изображение, размер шрифта, логотип в виде изображение. Ограничимся вводом заголовка (рис 3.7):

(рис 3.7) Формирование главной страницы. Ввод краткого заголовка

Прокручиваем страницу настроек - далее вводим общую информацию (рис 3.8):

(рис 3.8) Формирование главной страницы. Ввод общей информации

Вообще, пока мы разбираемся со всеми этими настройками, лучше всего смелее относиться к цветам, шрифтам, изображениям - если что-то пойдет не так или будет не смотреться, то все можно будет вернуть назад. Конечно, финальное оформление страницы должно быть разумным. Красные буквы, выделенные полужирным шрифтом, на синем фоне выглядят ужасно.

При нашем аскетичном оформлении готовая страничка будет довольно простой (рис 3.9):

(рис 3.9) Готовая заглавная страница

Рекламный миниблок в верхнем левом углу браузера - это своеобразная плата за использование сервиса. Посетитель страницы видит его некоторое время, а потом он сворачивается. Впрочем, если нажать на кнопку с изображением треугольника, то эффект будет тот же. После сворачивания миниблок может быть вообще закрыт. По правилам сервиса на сайте должен присутствовать либо этот миниблок, либо обычный рекламный баннер Яндекса размером 468*60.

Вот и мы получили свое представительство в сети, не используя ровным счетом никаких инструментов веб-дизайнера или программиста. На этом шаге останавливаются многие пользователи сервиса. Вернувшись к шаблонам оформления и выбрав наиболее подходящий, они завершают свою работу. Но есть способ выйти за границы имеющихся дизайнов, создать свою уникальную страничку, управлять всем ее содержимым совершенно произвольным образом. Для этого нужно хотя бы немного освоить HTML и CSS. Далее мы будем рассматривать создание нашего сайта, полагая, что нам знакомы эти понятия.

Вспоминаем, что на создаваемом сайте будут выложены фотографии. Сейчас на локальном компьютере есть папка, в которую помещены оригинальные фотографии. Их довольно много - больше 50. Для размещения их на сайте нужно уменьшить их размер, а также выбрать сохранения в формате для Интернета. Удобнее всего это сделать в программе Adobe Photoshop, используя пакетную обработку изображений. В результате получаем две папки - ):

(рис 3.10) Две папки с изображениями

Лучше всего всем снимкам давать осмысленные названия. Далее мы будем размещать материалы всего сайта через FTP. Есть определенные правила, касающиеся названий файлов и их размеров:

Имена файлов, закачиваемых по FTP, могут содержать только буквы латинского алфавита, цифры и символы . (точка) и _ (подчеркивание). Имя файла не должно начинаться с точки.

Размер одного файла не должен превышать 5 МБ.

Поэтому будем изначально внимательны - еще на стадии подготовки фотографий. Например, если вы захотите в операционной системе Windows Vista переименовать сразу множество файлов, выделив их и введя название для одного, например, "kotenok", то полученная серия "kotenok-(2)", "kotenok-(3)" и т.д. будет содержать неподходящие названия. Придется или называть их в ручную, или использовать другие программы, например, Total Commander.

Для верстки веб-страниц удобнее всего использовать http://www.adobe.com/ru/products/dreamweaver/):

(рис 3.11) Верстка страниц сайта в Adobe Dreamweaver CS4

Кодировка страниц должна быть Windows-1251. При этом не надо указывать тег charset. Нам придется поступить так - в программе Dreamweaver выбрать кодировку Windows-1251, после чего на странице появится следующая строка:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

А потом мы просто удаляем тег charset:

<meta http-equiv="Content-Type" content="text/html" />

Дело в том, что сервер Народ.Ру способен перекодировать страницу, отдавая ее пользователю. По умолчанию все работает с кодировкой windows-1251, но если браузер посетителя сайта не поддерживает ее, то сервер позаботится о предоставлении страницы в нужном виде.

Все страницы, которые получились в результате работы, доступны на сайте http://v-rn.narod.ru. Дело в том, что к моменту написания этой Лекции у меня получился готовый сайт, последовательные шаги которого мы сейчас и рассматриваем. Все страницы содержат предельно простой HTML-код, вот пример одной из страниц:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>Парк Авиастроителей </title>
<meta name="keywords" content="Парк Авиастроителей, Воронеж, Фотографии парка Авиастроителей в Воронеже, 
   деревенные фигуры, деревянная скульптура." />
<meta name="description" content="Фотографии деревянных скульптур воронежского 
   парка Авиастроителей в высоком разрешении." />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="content">
Парк Авиастроителей - небольшой и уютный парк, в котором понадобилось однажды спилить старые деревья.
   Ничего необычного, стандартная задача.
<p><a href="images_full/park13.jpg"><img src="images/park13.jpg" width="806" height="1075" border="0px"/></a>
</p>
<p>Но как были спилены эти деревья! Теперь пеньки - немного доработанные скульпторами,
   стали совершенно самостоятельными украшениями парка.</p>
<p><a href="images_full/park14.jpg"><img src="images/park14.jpg" width="806" height="1075" border="0px"/></a></p>
<p>Их много и они разные. Сова и панда, который залез на дерево.</p>
<p><a href="images_full/muzey15.jpg"><img src="images/park15.jpg" width="1075" height="806" border="0px"/></a></p>

<p><a href="images_full/park10.jpg"><img src="images/park10.jpg" width="806" height="1075" border="0px"/></a></p>
<p>И панда, и дерево представляют собой один ствол.</p>
<p><a href="images_full/park11.JPG"><img src="images/park11.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park12.jpg"><img src="images/park12.jpg" width="806" height="1075" /></a></p>
<p>Небольшие пеньки.</p>
<p><a href="images_full/park16.JPG"><img src="images/park16.jpg" width="1075" height="806" border="0px"/></a></p>
<p>И большие.</p>
<p><a href="images_full/park17.jpg"><img src="images/park17.jpg" width="806" height="1075" border="0px"/></a></p>
<p>Знакомые персонажы знакомых сказок.</p>
<p><a href="images_full/park18.jpg"><img src="images/park18.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park19.jpg"><img src="images/park19.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park.JPG"><img src="images/park.jpg" width="1075" height="806" /></a></p>
<p><a href="images_full/park3.JPG"><img src="images/park3.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park8.jpg"><img src="images/park8.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park7.jpg"><img src="images/park7.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park2.jpg"><img src="images/park2.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park4.JPG"><img src="images/park4.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park5.jpg"><img src="images/park5.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park6.JPG"><img src="images/park6.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park9.jpg"><img src="images/park9.jpg" width="806" height="1075" border="0px"/></a></p>
<p>Более подробную информацию о парке Авиастроителей можно найти в Базе Знаний Черноземья <a 
href="http://www.chernozemye.ru/index.php5/Парк_Авиастроителей">http://www.chernozemye.ru/index.php5/Парк_Авиастроителей</a></p>
<p><a href="index.html">На главную</a></p>
</div>
</body>
</html>

Сейчас на нашем локальном компьютере, в папке лежат все материалы сайта (рис 3.12):

(рис 3.12) Материалы сайта

Теперь перед нами возникает задача - переслать эти материалы на удаленный сервер.

Загрузка файлов через FTP

Для того чтобы узнать, как загрузить сайт, в мастерской переходим по ссылке ):

(рис 3.13) Мастерская сайта, доступ к файлам по FTP

Здесь нас ждет не какой-то специализированный инструментарий, а обычный раздел справки, так что если мы вообще не знаем, что такое FTP, то начнем с самого начала:

Для чего нужен FTP?

FTP расшифровывается как File Transfer Protocol (протокол передачи файлов). Основное назначение FTP - пересылать (копировать, передавать) файлы в Интернете (с удаленного компьютера на локальный и наоборот). Кроме того, при помощи FTP можно работать со своими файлами прямо на удаленном компьютере (переименовывать их, удалять, создавать каталоги и т.п.).

Чтобы воспользоваться протоколом FTP, понадобится специальная программа, так называемый FTP-клиент. FTP-клиентом может служить интернет-браузер (MS Internet Explorer, Netscape Navigator), программа управления файлами FAR, специализированная программа CuteFTP и другие. FTP-клиент встроен также в некоторые HTML-редакторы, такие как HomeSite, Dreamweaver или FrontPage.

Как подключиться к Народ.Ру по FTP?

В командной строке браузера или программы FAR нужно набрать следующее: ftp://ваш_логин_в_Яндекс-Паспорте:ваш_пароль@ftp.narod.ru

Например, если ваш логин в Яндекс-Паспорте - myname, а пароль к нему - 12345, то строка должна быть такой: ftp://myname:12345@ftp.narod.ru. Когда соединение будет установлено, в окне браузера появится список файлов вашего сайта.

Основные инструкции получены, а дальше придется действовать самостоятельно. Идем на сайт http://wincmd.ru/ скачиваем и устанавливаем пробную версию программы Total Commander. В главном меню программы выбираем пункт ):

(рис 3.14) Программа Total Commander, создание нового FTP-соединения

Появляется диалоговое окно, в котором в соответствии с инструкциями вводим одной строкой логин и пароль (рис 3.15):

(рис 3.15) FTP-соединение

В строке ):

(рис 3.16) Подключение к серверу

Несколько секунд - и в половине окна Total Commander отображается содержимого папки сайта, расположенной на сервере. Сейчас там всего одна страница - index.html. В другой половине окна выбираем директорию, где сейчас лежат файлы сайта на локальном компьютере, затем выделяем их всех, а потом нажимаем на клавишу ):

(рис 3.17) Выделение и копирование материалов

Появляется диалоговое окно, в котором просто нажимаем на кнопку ):

(рис 3.18) Выбор способа закачки файлов

При таком способе закачки мы не сможем работать с программой Total Commander, пока все файлы не будут отправлены на сервер. Если это не устраивает, то отмеченная галочка "Закачать в фоновом режиме" позволит качать параллельно с использованием интерфейса.

Процесс пошел - теперь все зависит от нашей скорости Интернета (рис 3.19):

(рис 3.19) Загрузка файлов

Спустя некоторое время возникает ошибка (рис 3.20):

(рис 3.20) Ошибка при загрузке файлов по FTP

Подключаемся снова и опять возникает ошибка. Дело в том, что мы полностью заполнили место для нашего сайта на сервер и больше просто некуда загружать файлы.

Увеличение места под сайт

По умолчанию, для каждого нового сайта резервируется 100 МБ хостинга. Это значение можно увеличить, но не сразу, а только когда остается менее 10 МБ свободного места. Оцениваем, какой общий размер у наших файлов сайта, которые мы загружали (рис 3.21):

(рис 3.21) Общий размер файлов

Очевидно, что 198 МБ никак не могут поместиться на месте 100 МБ. Поэтому придется заняться увеличением хостинга. В мастерской переходим по ссылке ):

(рис 3.22) Мастерская, ссылка "Увеличить место под сайт"

Осталось свободно минус 1 МБ (т.е. мы заняли почти 101 МБ), нажимаем на ссылку ):

(рис 3.23) Добавление еще 100 МБ

Пространство сайта увеличилось до 200 МБ, возвращаемся по ссылке в Мастерскую (рис 3.24):

(рис 3.24) Успешное увеличение размера для сайта

В программе Total Commander отключаемся от FTP, а затем снова подключаемся. Теперь у нас возникла ситуация, когда файлы копировались, но произошла ошибка. Не хотелось бы снова загружать те файлы, которые уже есть на сервере. Для этого снова выделяем все файлы, нажимаем клавишу ):

(рис 3.25) Программа Total Commander, повторная загрузка с пропусканием уже имеющихся файлов

При повторном копировании более удобно выбрать закачку в фоновом режиме (см. рис 3.18). Так мы будем видеть, какие файлы отправляются на сервер, сколько еще их осталось, а также при необходимости сможем выставить ограничение для скорости загрузки (рис 3.26):

(рис 3.26) Total Commander. Загрузка файлов в фоновом режиме

С учетом того, что у нас 198 МБ файлов сайта, а увеличили мы пространство до 200, после загрузки еще раз увеличим размер под сайт (рис 3.27):

(рис 3.27) Увеличение размер пространства до 300 МБ

Таким образом, сервис позволяет увеличивать размер сайта неограниченное число раз. Только пользоваться этой возможность допускается тогда, когда действительно заканчивается место.

Первая версия нашего сайта готова. Сразу после загрузки файлов сайт http://v-rn.narod.ru/ ждет посетителей со всего Интернета.

Редактирование страниц

Просматривая страницы созданного сайта, замечаем досадную опечатку (рис 3.28):

(рис 3.28) Опечатка на странице сайта

Хочется тут же ее исправить. Это можно сделать несколькими способами. Например, открыть страницу на локальном компьютере в программе Adobe DreamweaverЗаметим, что в самой программе Adobe Dreamweaver поддерживается работа по FTP. Подробную инструкцию см.здесь: http://narod.yandex.ru/help/09.yhtml , отредактировать ее, а затем с помощью Total Commander повторно загрузить на сервер, заменив при этом существующую страницу. В принципе, так и нужно поступать, когда изменения носят значительный характер. Но нам сейчас нужно исправить всего одну букву! Поэтому обойдемся встроенными средствами. В Мастерской переходим по ссылке ):

(рис 3.29) Мастерская, переход к управлению файлами

Открывается страница, на которой представлены все содержимое нашего сайта. Замечаем ссылки ):

(рис 3.30) Мастерская. Управление файлами

В отдельном окне открывается HTML-код выбранной страницы. Нам остается только исправить опечатку и нажать на кнопку ):

(рис 3.31) Редактирование страницы сайта

Изменения немедленно будут отображаться на сайте. Просматривая другие страницы сайта и обнаруживая опечатки, точно таким же образом будем редактировать страницы.

Применение Яндекс.Карт на сайте

Переходим к реализации второй части нашей задачи - внедрению динамических Яндекс.Карт на страницах сайта с метками, на которых будут отмечаться места, где были сделаны фотографии. Идем в Мастерскую, в разделе ):

(рис 3.32) Мастерская, переход к Яндекс.Картам, которые тоже входят в кирпичики сайта

Мы оказываемся на странице справки, откуда узнаем, что "API Яндекс.Карт - это инструментарий, позволяющий встраивать карты Яндекса на ваш сайт". После этого переходим к специальному сайту, а с него уже к разделу http://api.yandex.ru/maps/. Для встраивания карт нам будет нужно получить уникальный электронный ключ (рис 3.33):

(рис 3.33) Ссылка на получения API-ключа

Это совершенно бесплатная процедура, которая необходима для встраивания карт. На странице формы получения ключа вводим название нашего сайта v-rn.narod.ru, отмечаем галочку о принятии условий пользовательского соглашения и нажимаем на кнопку ):

(рис 3.34) Форма получения ключа

Количество ключей неограниченно, но для каждого сайта придется получать свой ключ. При вводе адреса сайта очень важно перейти по ссылке "Как лучше указать адрес сайта для получения ключа?"

В качестве адреса сайта лучше всего указывать только домен (например, mydomain.com). Ключ, зарегистрированный на отдельный домен, будет действителен для всех url внутри этого домена и для специальных поддоменов (например для "www"). Ключ, зарегистрированный на домен http://mydomain.com/, будет действителен для:

http://mydomain.com/

http://www.mydomain.com/

http://www.mydomain.com/page/

http://host1.mydomain.com/

http://host2.mydomain.com/page/

Обратите внимание, что ключ, зарегистрированный на домен http://www.mydomain.com/ будет действителен только для домена http://www.mydomain.com/ и его разделов (например, http://www.mydomain.com/page/).

Запоминаем, что указывать нужно без "www" и двигаемся дальше. Тем временем мы получили API-ключ (рис 3.35):

(рис 3.35) Готовый API-ключ Яндекс.Карт

Этот ключ, конечно, выглядит устрашающе - но не нужно пугаться, запоминать его или вводить вручную не придется. Пример кода, который мы видим, тоже пока нам не нужен - в него можно не вникать. Идем сразу в http://api.yandex.ru/maps/tools/):

(рис 3.36) Инструменты Яндекс.Карт

Заметим, что в правом верхнем углу появилась ссылка "Мои ключи". По ней нам всегда доступен полученный ключ.

Определение координат любого места в формате "долгота, широта" нам не нужно. Следовательно, будем выбирать между статическим изображением Яндекс.Карт и Конструктором схем проезда. Статическое изображение будет представлять собой обычную картинку, точно такую же, какая получится при посещении самых обычных карт http://maps.yandex.ru/, выборе нужного места и создания скриншота. Это не слишком интересно. Поэтому остается Конструктор схем проезда, к которому мы и переходим. Находим нужное место на карте, устанавливаем точку, вводим к ней подпись и нажимаем на кнопку ):

(рис 3.37) Установка точки на карте и подписи к ней

Чтобы увидеть, как будет выглядеть схема на сайте, переходим по ссылке ):

(рис 3.38) Просмотр установленной точки

Последний шаг - получить код для вставки. Указываем адрес сайта и нажимаем на кнопку ):

(рис 3.39) Получение кода карты

Генерируются два варианта кода - для интерактивной и статической карт (рис 3.40):

(рис 3.40) Готовый код для вставки

Он уже автоматически содержит API-ключ, который мы получали ранее, так что пока нам его не пришлось использовать вручную. Копируем код для динамической карты, который состоит из двух частей:

<!-- Этот блок кода вставляется в тег <HEAD> (начало) -->
<script src="http://api-maps.yandex.ru/1.0/
?key=AJYdDUoBAAAAf5hmMAMA2PMJnPGzEq44-gA1uwd77mHo1zsAAAAAAAAAAAAmmT_ZT2pY0QPvuWRIUoVc05A-2g==wizard=constructor" 
type="text/javascript"></script>
<script type="text/javascript">
    window.onload = function () {
        var map = new YMaps.Map(document.getElementById("YMapsID"));
        map.setCenter(new YMaps.GeoPoint(39.234738,51.641178), 15, YMaps.MapType.SATELLITE);
        map.addControl(new YMaps.Zoom());
        map.addControl(new YMaps.ToolBar());
        map.addControl(new YMaps.TypeControl());        
        var s = new YMaps.Style();
        s.iconStyle = new YMaps.IconStyle();
        s.iconStyle.offset = new YMaps.Point(-8,-27);
        s.iconStyle.href = "http://api-maps.yandex.ru/i/0.2/placemarks/pmlbm.png";
        s.iconStyle.size = new YMaps.Point(28,29);
        YMaps.Styles.add("wizard#lbmPoint", s);

        
        var placemark1 = new YMaps.Placemark(new YMaps.GeoPoint(39.241385,51.640591), 
         {style: "wizard#lbmPoint", balloonOptions: {maxWidth: 300}});
        map.addOverlay(placemark1);
        placemark1.setBalloonContent("Парк Авиастроителей");        
    }
</script>
<!-- Этот блок кода вставляется в тег <HEAD> (конец) -->

<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (начало) -->
<div id="YMapsID" style="width:600px;height:450px"></div>
<div style="width:600px;text-align:right;font-family:Arial">
  <a href="http://api.yandex.ru/maps/tools/constructor/" 
 style="color:#1A3DC1">Создано с помощью инструментов Яндекс.Карт</a></div>
<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (конец) -->

Комментарии вполне ясно указывают, что куда будет нужно вставлять. Идем в Мастерскую, открываем страницу управления файлами, выбираем редактирование страницы, для которой была получена карта (рис 3.41):

(рис 3.41) Переход к редактированию страницы для вставки кода карты

Полностью HTML-код страницы "park_aviastroiteley.html" теперь будет выглядеть так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>Парк Авиастроителей </title>
<meta name="keywords" content="Парк Авиастроителей, Воронеж, Фотографии парка Авиастроителей в Воронеже, 
  деревенные фигуры, деревянная скульптура." />
<meta name="description" content="Фотографии деревянных скульптур воронежского парка Авиастроителей
  в высоком разрешении." />
<link href="style.css" rel="stylesheet" type="text/css" />


<!-- Этот блок кода вставляется в тег <HEAD> (начало) -->
<script src="http://api-maps.yandex.ru/1.0/
?key=AJYdDUoBAAAAf5hmMAMA2PMJnPGzEq44-gA1uwd77mHo1zsAAAAAAAAAAAAmmT_ZT2pY0QPvuWRIUoVc05A-2g==wizard=constructor" 
type="text/javascript"></script>
<script type="text/javascript">
    window.onload = function () {
        var map = new YMaps.Map(document.getElementById("YMapsID"));
        map.setCenter(new YMaps.GeoPoint(39.234738,51.641178), 15, YMaps.MapType.SATELLITE);
        map.addControl(new YMaps.Zoom());
        map.addControl(new YMaps.ToolBar());
        map.addControl(new YMaps.TypeControl());        
        var s = new YMaps.Style();
        s.iconStyle = new YMaps.IconStyle();
        s.iconStyle.offset = new YMaps.Point(-8,-27);
        s.iconStyle.href = "http://api-maps.yandex.ru/i/0.2/placemarks/pmlbm.png";
        s.iconStyle.size = new YMaps.Point(28,29);
        YMaps.Styles.add("wizard#lbmPoint", s);

        
        var placemark1 = new YMaps.Placemark(new YMaps.GeoPoint(39.241385,51.640591),
         {style: "wizard#lbmPoint", balloonOptions: {maxWidth: 300}});
        map.addOverlay(placemark1);
        placemark1.setBalloonContent("Парк Авиастроителей");        
    }
</script>
<!-- Этот блок кода вставляется в тег <HEAD> (конец) -->



</head>

<body>
<div class="content">
Парк Авиастроителей - небольшой и уютный парк, в котором понадобилось однажды спилить старые деревья. 
 Ничего необычного, стандартная задача.
<p><a href="images_full/park13.jpg"><img src="images/park13.jpg" width="806" height="1075" border="0px"/></a>
</p>
<p>Но как были спилены эти деревья! Теперь пеньки - немного доработанные скульпторами,
  стали совершенно самостоятельными украшениями парка.</p>
<p><a href="images_full/park14.jpg"><img src="images/park14.jpg" width="806" height="1075" border="0px"/></a></p>
<p>Их много и они разные. Сова и панда, который залез на дерево.</p>
<p><a href="images_full/muzey15.jpg"><img src="images/park15.jpg" width="1075" height="806" border="0px"/></a></p>

<p><a href="images_full/park10.jpg"><img src="images/park10.jpg" width="806" height="1075" border="0px"/></a></p>
<p>И панда, и дерево представляют собой один ствол дерева.</p>
<p><a href="images_full/park11.JPG"><img src="images/park11.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park12.jpg"><img src="images/park12.jpg" width="806" height="1075" /></a></p>
<p>Небольшие пеньки.</p>
<p><a href="images_full/park16.JPG"><img src="images/park16.jpg" width="1075" height="806" border="0px"/></a></p>
<p>И большие.</p>
<p><a href="images_full/park17.jpg"><img src="images/park17.jpg" width="806" height="1075" border="0px"/></a></p>
<p>Знакомые персонажи сказок.</p>
<p><a href="images_full/park18.jpg"><img src="images/park18.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park19.jpg"><img src="images/park19.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park.JPG"><img src="images/park.jpg" width="1075" height="806" /></a></p>
<p><a href="images_full/park3.JPG"><img src="images/park3.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park8.jpg"><img src="images/park8.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park7.jpg"><img src="images/park7.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park2.jpg"><img src="images/park2.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park4.JPG"><img src="images/park4.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park5.jpg"><img src="images/park5.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park6.JPG"><img src="images/park6.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park9.jpg"><img src="images/park9.jpg" width="806" height="1075" border="0px"/></a></p>
<p>Более подробную информацию о парке Авиастроителей можно найти в Базе Знаний Черноземья
<a href="http://www.chernozemye.ru/index.php5/Парк_Авиастроителей">
 http://www.chernozemye.ru/index.php5/Парк_Авиастроителей</a></p>

<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (начало) -->
<div id="YMapsID" style="width:600px;height:450px"></div>
<div style="width:600px;text-align:right;font-family:Arial">
 <a href="http://api.yandex.ru/maps/tools/constructor/" 
style="color:#1A3DC1">Создано с помощью инструментов Яндекс.Карт</a></div>
<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (конец) -->


<p><a href="index.html">На главную</a></p>
</div>
</body>
</html>

Сохраняем изменения, открываем в браузере страницу сайта http://v-rn.narod.ru/park_aviastroiteley.html и видим, что добавилась карта со всеми инструментами. По-прежнему доступно изменение масштаба, отображение смежных участков, а также инструменты, например, линейка (рис 3.42):

(рис 3.42) Готовая интерактивная карта на сайте

Таким же образом мы расставляем метки и подписи для других страниц сайта, получаем код для вставки и внедряем его.

При работе с http://api.yandex.ru/maps/tools/constructor/, допускается ли внедрение какого-то либо участка без всяких ключей? К сожалению, на момент написания курса это невозможно.

Гостевая книга

Продолжим собирание функциональности сайта. В принципе, главная задача выполнена - мы получили сайт, который хотели. Но добавление гостевой книги улучшит общий сервис сайта. В Мастерской щелкаем по ссылке ):

(рис 3.43) Мастерская, ссылка "Гостевая книга"

Открывается страница, на которой мы узнаем, что наша гостевая уже создана и доступна по определенной ссылке, которую мы тут же копируем (рис 3.44):

(рис 3.44) Ссылка на гостевую книгу

На этой же странице доступны операции с гостевой книгой - администрирование, изменение дизайна, настройки. А мы открываем главную страницу и изменяем текст на ней, вставляя ссылку на гостевую книгу:

Добро пожаловать! На этом сайте Вы найдете фотографии интересных мест Воронежа в высоком разрешении с привязкой к картам. Все отзывы и замечания по этому сайту присылайте по адресу <a href="mailto:v-rn@narod.ru">v-rn@narod.ru</a> или оставляйте в <a href="http://www.narod.ru/guestbook/?owner=163691607">гостевой книге</a>.

Теперь при переходе с главной страницы доступна стандартная форма гостевой (рис 3.45):

(рис 3.45) Гостевая книга

Добавленное сообщение немедленно отображается. Если постоянно модерировать оставляемые сообщения, то такая функциональность будет самой удобной для посетителей. Правда, это будет удобно не только для них, но и для спамеров. Настроим премодерацию - режим работы гостевой, при которой добавляемое сообщение будет доступно после одобрения модератором. В операциях с гостевой книгой переходим по ссылке ):

(рис 3.46) Настройки гостевой книги

Заметим, что эти галочки могут быть использованы независимо друг от друга. Далее появляется страница с сообщением "Вам выслан запрос по адресу v-rn@yandex.ru. Просьба зайти по присланной ссылке и подтвердить дублирование сообщений". Проверяем почту, переходим по ссылке в письме, включаем дублирование сообщений. Теперь, когда кто-то заходит и оставляет сообщение, мы тотчас получаем письмо с его содержимым (рис 3.47):

(рис 3.47) Получение сообщения из гостевой книги по e-mail

Нам остается перейти к администрированию гостевой книги, разрешить это сообщение, а потом на него ответить.

Статистика посещений

Для нашего сайта доступна встроенная статистика посещений. Для ее просмотра в Мастерской переходим по ссылке ):

(рис 3.48) Мастерская, ссылка "Статистика посещений"

Открывается страница, на которой мы видим число обращений к сайту и количество уникальных посетителей (рис 3.49):

(рис 3.49) Статистика посещений сайта http://v-rn.narod.ru/ за его первые дни

Идентификация посетителей осуществляется по IP-адресу. Это означает, что даже если мы 100 раз откроем главную страницу сайта в браузере, то все равно число посетителей будет равно одному.

Это общая статистика посещений всех страниц сайта. Если нужно добавить персональный счетчик для отдельно взятой страницы, то следует его включить в свойствах файла (рис 3.50):

(рис 3.50) Персональный счетчик для страницы park_aviastroiteley.html

Отрывается эта страница также, как и для редактирования (см. рис 3.31).

Поиск по сайту

Все кирпичики сайта, который доступны в гостевой, зачастую представляют собой просто фрагмент HTML-кода, который вставляется на страницах сайта. Не является исключением и поиск по сайту, для включения которого в Мастерской переходим по соответствующей ссылке (рис 3.51):

(рис 3.51) Поиск по сайту

Для вставки формы поиска достаточно выбрать подходящее оформление, а затем скопировать и вставить соответствующий HTML-код (рис 3.52):

(рис 3.52) Код формы поиска

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

Когда нельзя или не получится использовать Яндекс.Народ

Завершить эту лекцию хотелось бы лозунгом "Яндекс.Народ - для всех сайтов! Все сайты на Яндекс.Народе!". Но это было бы неправдой. Использование сервиса подразумевает ряд ограничений, как тактического, так и технического характера.

Забавно смотрятся сайты довольно крупных компаний (в том числе и реально действующих), которые размещены на народе. Можно провести аналогию - представим себе президентский кортеж, который состоит из автомобилей марки "Лада-Калина" в сопровождении охраны на автомобилях "Ока". Нельзя сказать, что такой кортеж не сможет ехать, нельзя сказать, что Лада-Калина или Ока - это плохие машины. Достоинства и выгоды от их эксплуатации подтверждаются многочисленными продажами. Но в данном случае эти автомобили просто неуместны. Также, как и не уместно представительство компании на сервисе бесплатных сайтов с шаблонными страницами.

Не стоит доверять сайтам на Народе, предлагающим работу. Не стоит доверять таким же Интернет-магазинам, продающим дорогую электронику и технику. Сделать такой сайт мошенникам - дело нескольких часов. Начать бизнес на Народе, конечно же, можно, но в этом случае нужны веские доказательства того, что вы действительно предлагаете товары и услуги.

Сервис не поддерживает работу с такими языками программирования как PHP, PERL, Python или технологией ASP.NET. Он также не поддерживает какие-либо базы данных. Это означает, что кроме встроенных кирпичиков - чата, форума, гостевой книги и т.д. не получится добавить какую-то иную функциональность.

Несмотря на все эти ограничения, сайт на народе вполне пригоден для пристанища интересного проекта, хобби, мыслей, размышлений, сообщества или хорошего настроения.

Лучшие сайты народа вывешены здесь: http://narod.yandex.ru/rubrics/ А на этой страничке: http://web.archive.org/web/*/http://narod.ru доступна вся история развития сервиса.

Страницы: