Создание сайта за пятнадцать минут

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

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

clip_image001

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

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

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

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

clip_image003

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

clip_image005

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

clip_image007

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

clip_image009

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

clip_image011

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

clip_image013

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

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

clip_image015

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

clip_image017

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

clip_image019

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

clip_image021

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

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

clip_image023

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

clip_image025

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

clip_image027

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

Мета Тэги

clip_image029

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

clip_image031

Вид страницы

clip_image033

И так далее.

clip_image035

clip_image037

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

clip_image039

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

clip_image041

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

clip_image043

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

clip_image045

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

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

clip_image047

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

clip_image049

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

clip_image051

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

clip_image053

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

clip_image055

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

clip_image057

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

clip_image059

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

clip_image061

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

clip_image063

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

clip_image065

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

clip_image067

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

clip_image069

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

clip_image071

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

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

clip_image073

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

clip_image075

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

clip_image077

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

clip_image079

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

clip_image081

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

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

clip_image083

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

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

clip_image085

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

clip_image087

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

clip_image089

clip_image091

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

clip_image093

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

clip_image095

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

clip_image097

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

clip_image099

 

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

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

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

Интернет. В порядке бреда (с)

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.