Сайт по шаблону

Чтобы создать Ваш первый простой сайт мы воспользуемся бесплатным хостингом (местом под сайт) narod.ru от поисковой системы Яндекс.

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

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

Итак, приступим:

1. Переходим по ссылке http://narod.ru (или копируем её в адресную строку браузера).

Если с подключением к Интернету всё в порядке, должна загрузиться главная страница сервиса narod.ru.

2. Находим на этой странице (в начале основного текста по центру) строчку "Займите это имя для своего сайта", а точнее — окошко для ввода текста прямо под ней.

В это окошко нужно ввести название (оно же будет и началом адреса) Вашего будущего сайта. Название должно быть:

• Латинскими буквами без пробелов (возможны знаки подчёркивания, дефисы, точки).
• Уникальным. Если кто-то до Вас уже забронировал это название, то Вам придётся немного изменить его или придумать другое.
• По возможности коротким и отражать основную идею сайта.

Для примера я беру название saitposhablonu (сайт по шаблону) и ввожу его в вышеупомянутое окошко. Вы вводите своё название и тыкайте в кнопку "Занять" справа от окошка.

После этого происходит переадресация на другую страницу Яндекс.Паспорт "Регистрация. Шаг 1 из 2".

3. В этой новой странице вводим имя и фамилию (лучше свои :) Название сайта уже должно быть в поле "Логин". Нажимаем "Дальше".

Попадаем на страницу Яндекс.Паспорт "Регистрация. Шаг 2 из 2".

4. Здесь вводим пароль к нашему сайту. Пароль должен содержать от 4 до 20 символов из списка: A-z, 0-9, ! @ # $ % ^ & * ( ) _ — + и не может совпадать с логином.

Логин и пароль лучше записать в какой-нибудь текстовый файл, чтобы потом можно было его скопировать и вставлять при заходе в свой аккаунт. Поскольку этот наш сайт — пробный — можно не слишком беспокоиться о его безопасности, но в будущем — лучше хранить пароли в более надёжных местах, например в записной книжке.

Далее заполняем следующие поля:

Пароль ещё раз — для проверки правильности.

Контрольный вопрос (на случай, если забудем пароль).

Ответ на контрольный вопрос.

Электронная почта (не обязательно, поскольку на Вас будет зарегистрирован новый почтовый ящик вида: название_сайта@yandex.ru).

Мобильный телефон (совсем не обязательно, но если сайт не временный — лучше заполнить).

Контрольные цифры — для защиты от автоматической регистрации.

Нажимаем "Зарегистрировать".

Должна появиться новая страница Яндекс.Паспорт "Готово". На ней можно ввести дополнительную информацию о себе. Нажимаем "Сохранить" и... оказываемся на странице "Мои сервисы".

5. Нажимаем маленькую ссылку "Все службы" в самом верху страницы. Попадаем в полный список сервисов, которые предоставляет Яндекс.

Ищем в центральной колонке ссылку "Народ" и... снова оказываемся на Дерибасовской :) То есть — на главной странице narod.ru с которой и начали. Но...

Но теперь у нас есть логин и пароль от нашего будущего сайта.

6. Вводим пароль в соответствующем окошке в правой панели страницы. Логин уже должен быть там. Если нет — вводим его тоже.

7. Жмём "Войти".

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

Но сначала нужно сделать хотя бы одну страницу сайта — главную. Для этого:

8. Ищем в левой колонке (раздел "Мой дом") ссылку "Главная страница" и нажимаем её.

Открывается страница с вариантами шаблонов для этой страницы.

9. Выбираем приглянувшийся шаблон и жмём "Дальше".

Допустим Вы выбрали шаблон "Простой". Открывается страница настройки вида главной страницы Вашего будущего сайта.

10. Выбираем цвет фона (фон должен быть не слишком "сочным", чтобы не резал глаз). Пожалуй возьмём классический белый.

11. Заполняем графу "О чём сайт". Это будет название сайта, говорящее о его предназначении. В нашем примере это "Сайт по шаблону".

Цвет текста названия... пусть будет тёмно-зелёный, чтобы был контрастным фону, но не кричащим. И пожалуй поставим галку "Жирный", чтобы он всё-таки выделялся.

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

Вот текст нашего экспериментального сайта:

<начало текста>

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

Вы можете сделать себе такой же просто прочитав статью "Как создать сайт по шаблону на narod.ru", написанную специально для желающих быстро научиться создавать сайты.

Данную статью Вы можете найти на сайте http://gold-free.ru в разделе Статьи/Web-дизайн.

<конец текста>

Цвет этого текста оставим чёрным, чтобы он легко читался на белом фоне.

13. Вводим ссылки в соответствующие поля.

Ссылки (или гиперссылки) — это основа Интернета. По ссылкам можно переходить с одного сайта на другой или с одной страницы сайта на другие.

У каждой ссылки есть её видимая часть (текст, картинка, кнопка и т.д.) и адрес, на который переходит посетитель нажав на видимую часть этой ссылки.

Для начала создадим 3 ссылки:

• "Главная" — эта ссылка будет вести на главную страницу этого сайта и иметь адрес http://www.saitposhablonu.narod.ru (не забудьте, что Вы вместо saitposhablonu везде должны указывать придуманное Вами название).
• "Об авторе" — пара слов об авторе статьи. Её адрес пусть будет http://www.saitposhablonu.narod.ru/about.htm
• "Статья о создании этого сайта" — ссылка на эту статью. Адрес: http://gold-free.ru/article/webdesign/shablon.php Это будет внешняя ссылка, ведущая на другой сайт, в отличие от предыдущих — внутренних.

14. Задаём цвета ссылок. Традиционно ссылки делают синим цветом, посещённые ссылки — пурпурным, а активные — красным. Но в принципе — здесь всё на Ваше усмотрение и вкус.

Для примера задам вышеуказанные цвета.

Жмём "Готово" и смотрим результат.

Дизайн прямо скажем — не изысканный, но для начала — вполне сойдёт.

Если Вас всё пока устраивает — жмите "Готово" в верхней части страницы. Если не устраивает, тогда нажимайте "Ещё редактировать" и вносите коррективы.

На следующей странице нам предлагают:

• Отредактировать созданную страницу — опять вернуться к редактированию главной страницы;
• Перейти к созданию других страниц — это мы сейчас и выберем;
• Перейти в раздел "Управление файлами" — пока не надо, но потом обязательно перейдём;
• Порекламировать свой сайт через службу "Яндекс.Директ" — за деньги разумеется :) Тоже пока не будем.

15. Переходим к созданию других страниц. Выбираем шаблон "Про меня", и нам снова предлагают выбрать из нескольких шаблонов и ввести имя файла — оно же адрес новой страницы. Выбираем к примеру "Мышеходный" и вводим имя файла about (мы уже задавали ссылку на него на главной странице).

Нажимаем "Дальше".

16. На новой страничке заполняем поля:

• "Приветствие" — пишем Добро пожаловать... и так далее, как обычно пишут в таких случаях;
• "Фотография" — выбираем свою лучшую фотку для этой страницы, но не слишком большого размера. Оптимальный размер для файла с большой фотографией 50-300 кб. Чем меньше размер, тем быстрее будет грузиться страница;
• "Текст Вашей странички" — немного расскажите о себе, то, что будет интересно узнать посетителям;
• "Ссылки на другие страницы" — здесь можно указать ссылку на главную страницу и например снова на ссылку со статьёй. Свой e-mail лучше не указывать (как это предлагает шаблон по умолчанию), иначе можно получить на него горы спама.

E-mail всегда лучше шифровать, например с помощью вот этой программы: http://gold-free.ru/soft/inet/crypt.php#CrypteMail

Итак, нажали "Готово" и получили страничку "Про меня". Посмотрели и если нужно — подредактировали.

Теперь у нас есть 2 странички сайта, которые ссылаются друг на друга.

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

Но, вот, пока делал главную — допустил одну ошибку. Если помните, ссылка на страницу "Об авторе" (она же "Про меня") выглядела так: http://www.saitposhablonu.narod.ru/about.htm .

То есть оканчивалась расширением htm, в то время как при создании этой самой страницы "Про меня" шаблон предложил по умолчанию расширение html.

Надо заметить, что если для основного домена регистр букв не играет роли, то для отдельных файлов и папок — он важен. Например saitposhablonu.narod.ru и SaitPoShablonu.narod.ru будут работать одинаково, но about.htm и About.htm — две отдельные страницы.

Тем более это относиться и к расширениям файлов htm и html.

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

Для того, чтобы редактировать готовую страницу:

1. Нажимаем ссылку "Мастерская" в левой верхней части окна под логотипом Яндекс.Народ.

2. В правой колонке ищем и нажимаем "Управление файлами и HTML-редактор".

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

3. Ищем файл index.html и нажимаем на кнопочку с карандашом слева от имени файла.

Перед нами снова открылся знакомый редактор странички.

4. Подправляем ссылку — меняем htm на html и нажимаем "Готово" и ещё раз "Готово" на следующей странице.

Теперь если скопировать в новое окно браузера адрес http://www.saitposhablonu.narod.ru/index.html или даже просто saitposhablonu.narod.ru, то откроется главная страница "Сайта по шаблону".

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

Нажав на ней ссылку "Главная" — Вы снова вернётесь на главную.

Вроде бы всё работает :)

Подведём итог:

1. Вы смогли создать свой первый сайт за полчаса даже не владея языком HTML.

2. Теперь Вы можете полировать готовый сайт, добавлять к нему новые страницы и улучшать старые. Для этого всё-таки лучше начать учить HTML (вот неплохой самоучитель для начала: http://gold-free.ru/book/webdesign/html.php#HTMLvPrimerah_DrigalkinVV).

Надеюсь данный опыт понравиться Вам и Вы захотите иметь свой сайт, который возможно даже будет приносить Вам неплохой доход :)

P.S. Эта статья предназначена для свободного распространения в Интернете. Приветствуется её копирование с сохранением авторства Руслана Богданова и всех P.S. — P.P.S.

P.P.S. Я хочу порекомендовать Вам ещё одну статью, о том, на каком языке делать свой первый сайт. Вот ссылка на неё: http://gold-free.ru/article/webdesign/language.php