Экспресс-курс: Как быстро создать сайт. Часть 2

В прошлом уроке мы полностью разработали табличную структуру первой страницы сайта и заполнили ячейки таблиц рисунками и текстом. Осталось всего ничего — создать остальные страницы и связать их между собой. После этого можно "повесить" сайт в интернет и начать его "раскрутку". Прежде, чем создавать новые страницы, уясните для себя одну вещь: все они должны храниться в одном месте, и, что немаловажно, рисунки должны обязательно находиться рядом с HTML-страницами. Как правило, их помещают в отдельную папку — Images. Таким образом, лучше всего создать на компьютере папку с любым названием — например, "Мой сайт" — и сохранять туда все страницы вашего сайта и картинки.

Этап 3. Итак, у вас есть первая страница сайта, которая называется index.html (Главная). Предположим, что на сайте будет еще три страницы: "Обо мне", "Мои работы" и "Контакты". Это должно быть отражено в меню, как показано на рис. 1. При щелчке мышью на любом меню пользователь попадает на соответствующую страницу. Например, если он захочет посмотреть ваши работы, он щелкнет на меню "Мои работы", и перед ним появится страница с вашими работами. Пользователь сможет попасть на нужную страницу благодаря тому, что фразу "Мои работы" вы выполните в виде ссылки на нужную страницу. Однако прежде всего нужно создать остальные страницы.

Рис. 1. В меню должны быть обозначены все разделы сайта

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

Поэтому за основу вам нужно взять уже разработанную страницу и всего лишь наполнить ее новой информацией. Чтобы сохранить существующую страницу под другим именем, выполните команду File (Файл) — Save as (Сохранить как) и в появившемся окне задайте странице новое имя — например, about me.html. После этого наполните страницу новой информацией и сохраните все изменения. Точно так же создайте оставшиеся страницы.

Внимание: Вам нужно дать название каждой странице так же, как вы назвали главную страницу index.html. Это название будет отображаться в адресной строке браузера. Предположим, что следующие страницы будут называться about.html, myworks.html, contacts.html.

Ссылки на другие страницы. Когда все готовые страницы будут находиться в одном месте, нужно связать их между собой с помощью ссылок. Для начала откройте первую страницу в программе Dreaweaver. Нужно установить ссылки на пункты меню, причем как в основном, так и в дополнительном, которое находится в нижней части страницы. Выделите название первого меню (например, Главная) и обратитесь к панели свойств. Найдите там поле Link (Ссылка). Сюда нужно ввести адрес страницы, на которую пользователь перейдет после щелчка на данном пункте меню. Нажмите кнопку с изображением папки справа от поля Link (Ссылка) и в появившемся окне укажите место хранения главной страницы. Выберите ее из списка и нажмите кнопку ОК (рис. 2).

Рис. 2. Укажите, где на компьютере находится страница, на которую вы делаете ссылку

Теперь выделите второй пункт меню и повторите только что выполненные действия. Точно так же установите ссылки на все пункты меню (не забудьте о дополнительном меню в нижней части страницы). Ссылки могут быть не только текстовыми, но и в виде картинок. Например, вы решили сделать меню с помощью картинок. Теперь нужно сделать так, чтобы после щелчка на этой картинке пользователь переходил на нужную страницу. Щелкните мышью на картинке и на панели свойств установите для нее ссылку точно так же, как и для текста — с помощью поля Link (Ссылка). В отличие от текстовых ссылок, для картинок нужно еще добавить так называемый альт-текст. Что это такое? Представьте себе, что в целях экономии пользователь отключил у себя в браузере отображение картинок и зашел на ваш сайт. А у вас там меню состоит из картинок, которые у него отображаться не будут. Следовательно, он не поймет ни какие на вашем сайте есть страницы, ни как туда попасть. Альт-текст предназначен именно для того, чтобы сориентировать пользователей, в каком направлении им двигаться. Это текст, скрывающийся за картинкой и дублирующий название пункта меню или содержимое другой картинки. Чтобы добавить альт-текст к картинке, являющейся ссылкой, в области свойств найдите поле Alt и введите в него соответствующий текст.

Внимание: Не забудьте, что вам нужно расставить ссылки на каждой странице сайта.

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

Этап 4. В интернете множество сайтов, и у каждого есть свое уникальное имя, по которому можно идентифицировать сайт. Как правило, названия сайтов состоят из нескольких частей. Самая важная — это имя сайта — например, myfreedom. Далее через точку идет зона, в которой находится сайт. Например, by, ru или com. Чтобы разместить сайт в этих зонах, вам придется найти компанию, которая оказывает платные услуги по регистрации доменного имени и предоставляет услуги хостинга (то есть предоставляет место для размещения сайта в интернете). Однако в интернете можно разместит сайт и бесплатно — например, на сайте narod.yandex.ru. В таком случае адрес вашего сайта в интернете будет иметь следующий вид: "адрес_сайта.narod.ru". Длинно? Зато бесплатно!

Размещение сайта в интернете. Чтобы разместить свой сайт на narod.yandex.ru, зайдите по адресу www.narod.ru. Сначала там нужно пройти процесс регистрации имени будущего сайта. Для этого на главной странице в поле Занять имя для сайта введите имя вашего сайта и нажмите кнопку Занять. После этого вам будет предложено заполнить простую анкету, а затем вы сможете начать пользоваться данным сервисом (для этого надо щелкнуть на ссылке Начать пользоваться сервисом). Теперь вы попадете в свою виртуальную мастерскую (рис. 3).

Рис. 3. С помощью сервиса, предоставляемого www.narod.yandex.ru, можно бесплатно разместить свой сайт в интернете

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

Этап 5. Кажется, все уже сделано, но остался последний штрих, забывать о котором не стоит. Сайт вы сделали и разместили в интернете. Но никто не знает о нем! Поэтому очень важным шагом является раскрутка сайта. Первое, что вы можете сделать, — это зарегистрировать свой сайт во всех возможных каталогах. Буквально на каждом портале есть каталоги, где можно сделать это совершенно бесплатно. Кроме того, вы можете дать ссылку на свой веб-ресурс всем друзьям и попросить их так же переслать вашу ссылку всем своим друзьям. Так вы увеличите посещаемость своего сайта, а это в сети, пожалуй, самое важное. Кстати, чтобы контролировать посещаемость ресурса, установите на свой сайт бесплатный счетчик, который будет показывать, сколько человек ежедневно заходит на вашу страницу. Таких счетчиков в интернете много, и любая поисковая система выдаст вам огромное количество результатов по соответствующему запросу. Как вариант раскрутки сайта можно воспользоваться баннерным обменом — бесплатным показом на других сайтах схожей тематики вашего баннера взамен на то, что и на вашем сайте будет чья-то реклама.

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

Елена Динман. Центр компьютерного образования FreeДom