«Для чего это мне нужно?» — спросите вы. Не знаю, может быть, есть желание сделать без привлечения специалистов простой сайт-визитку своего маленького бизнеса или разместить в Интернете свои работы, фотографии, стихи.

Обещал рассказать, как сделать простой, но функциональный и уникальный сайт на Яндексе — рассказываю. Нам понадобится отличная программка для новичков Web Page Maker (скачать, 4.39 Мб), с ее помощью вы сможете создать свои веб-странички безо всяких знаний HTML или CSS. Сразу замечу, что кроме этой программы, есть множество других.

Если кто-то не знает, как процитировать пост, не стесняетесь - жмите на эту ссылку. Если оно вам не надо - тоже не стесняйтесь, напишите: "Саша, ты уже достал всех со своими уроками!" Будем совершенствоваться дальше :)

Регистрация аккаунта на Яндекс.Ру

Для начала, регистрируем аккаунт в системе «Яндекс» — ссылка для регистрации (можно, конечно, выбрать любой хостинг, но в данном примере используется именно этот).

Подберите нормальный логин, т.к. он будет не только именем почтового ящика, но и адресом сайта — ИМЯ_САЙТА.NAROD.RU (если marishechka1985 подходит для e-mail, то для сайта — вопрос спорный).

Заполняем регистрационную информацию. Если вы укажите другой e-mail или мобильный телефон, то для дальнейшей работы сайта необходимо будет их подтвердить (это не больно).

Проверяем информацию, которую указали, и рассказываем «о себе еще немного» (по желанию).

В верхнем меню выбираем «еще» — подменю «Народ» для перехода в Мастерскую нового сайта.

На следующей странице переходим по ссылке «Создать» в меню «Мой сайт». Яндекс предлагает свой визуальный Конструктор для создания сайтов. Можете попробовать и сравнить — уверен, описанный ниже способ вам понравится больше.

Страничка Мастерской выглядит примерно так, если кто-нибудь не видел. Познакомились? Пока «отставляем» браузер в сторону и запускаем программу Web Page Maker.

Создание html-страниц и файлов сайта в программе Web Page Maker

Подробную инструкцию-справку по использованию программы (на русском языке) можно прочитать, нажав на кнопку «Справка» в меню или клавишу F1. Но в этом посте я опишу свои действия по созданию простенького сайта — естественно, если постараться, можно всё сделать в тысячу раз красивее.

В меню «Файл» есть пункт «Новый сайт из шаблона». Т.е средствами программы можно, вообще, просто выбрать подготовленный шаблон сайта.

Предложенные шаблоны разделены на три раздела по несколько штук в каждом.

Вот, например, образец одного из них, имеющий три-четыре разные страницы (главную, информацию об авторе, фотоальбом и т.п.).

Но мы собрались делать уникальный сайт, поэтому будем его создавать сами постепенно. Хочу еще раз обратить внимание, что в этом посте приведен пример простого сайта, созданного на скорую руку — он не будет отличаться ни красотой, ни какими-то дизайнерскими решениями. Вы всего лишь прочитаете об этапах работы с программой. А потом сможете выбрать всё сами: цвета, картинки, размещение элементов и многое другое.

Возможно, намного удобнее размещать элементы сайта, если включить в меню «Правка» показ сетки и указателей границ страничек.

Основные пункты меню, которые будем использовать, это «Вставка» (текст, изображения, фигура, панели, линии, таблицы, формы, объекты, флэшки и так далее)...

...и «Формат». С него и начнем: в этом меню, первым делом, выбираем «Свойства страницы».

Тут несколько понятных рисунков без комментариев — переключаясь на разные вкладки окна «Свойства страницы», указываем (или не указываем) разную информацию.

Мета Тэги

Свойства фона

Вид страницы

И так далее.

Далее вставляем шапку сайта в виде, например, WordArt («Вставка» — «Изображение» — «WordArt»). Можно в шапку поставить и горизонтальную панель-картинку.

В галереи выбираем формат надписи.

Нажимаем OK и вводим наш текст. Его стиль и форма всегда можно поменять.

Теперь наш будущий сайт «украсила» такая вот надпись.

Примечание: ВСЕ элементы сайта в программе Web Page Maker можно редактировать, если дважды кликнуть на них. Для перемещения — один клик (появление четырехконечной стрелки).

Далее выбираем в меню «Панель навигации» и один из предложенных шаблонов.

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

Теперь продублируем Панель навигации под шапкой сайта. Правой кнопкой на элементе и скопировать.

Затем вставить копию.

Редактируем новую панель и указываем «Формат» - «Горизонтальное расположение».

Теперь на нашем страшненьком сайте две панели: вертикальная и горизонтальная.

Добавим картинку: кнопка «Изображение» - «Из файла».

Тянем за уголок вставленной картинки и делаем ее нужного размера. Перемещение картинки (как и других элементов) — активировать ее кликом и тащить.

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

Теперь добавляем текст (кнопка «Текст»).

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

Вот такая страничка получилась в итоге.

Примечание: чтобы сделать слово ссылкой, нужно его выделить, нажать на кнопку «Ссылка» и указать данные ссылки.

Одной странички на сайте нам недостаточно, поэтому создадим еще две (пока что такие же, как и главная index.html).

Двойной клик на панели навигации и переименовываем ссылки.

Теперь правый клик на страничке «index» в панели «Содержание Сайта» — выбрать «Клонировать страницы». Можно просто нажать соответствующую кнопочку.

Снова переходим к редактированию панели навигации и для каждой ссылки в двух панелях на КАЖДОЙ странице (index, second и third) указываем, куда приведет посетителя нажатие на кнопку.

Теперь наш тренировочный сайт выглядим в окне программы примерно так.

После создания сайта, проект через меню «Файл» нужно экспортировать в HTML (выберите или создайте для этого новую папку).

Загрузка html-страниц и файлов сайта на сервер Яндекса

В выбранной для экспорта папке появятся html-файлы ваших страничек и папка с файлами (изображения и т.п.).

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

Страница справки по FTP на Яндексе - http://narod.yandex.ru/help/09.yhtml. Загрузить можно как через элементарный Total Commander, так и через специальные FTP-клиенты (мне, например, нравится пользоваться CuteFTP 8 Professional — подробнее о нем).

Загрузим файлы через браузер: ссылка «Загрузка файлов на сайт» — «Загрузить файлы».

Пока у нас только одна, корневая папка. В нее загрузим только HTML-файлы (index, second и third).

Чтобы загрузить остальные файлы, нужно на сервере создать для них папку — на страничке управления.

Новая папка должна называться так же, как и созданная программой Web Page Maker — «images».

Все картинки-файлы из папки images на компьютере загружаем в такую же созданную папку на сервере.

Вот, в принципе, и всё. Как вы могли заметить, в примере сайт создавался по адресу http://valezsite.narod.ru. Попробуйте перейти по этой ссылке.

Примечание: если вас раздражает «яндексовсвая» реклама, не нравится название сайта с narod.ru или есть еще какие-нибудь причины, можете почитать на сайте http://blogmann.co.cc, как я зарегистрировал БЕСПЛАТНЫЕ домен и хостинг, настроил и запустил БЕСПЛАТНЫЙ блог в Интернете.

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

P.S. Владельцам сайтов на Яндексе может быть интересен пост "Как сделать простую RSS-ленту для простого сайта".

Спасибо за внимание! Пошел разминать затекшие части тела.