СОЗДАНИЕ САЙТА

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

Сайт включает в свой состав отдельные веб-страницы. Продолжим рассмотрение темы с их создания.

1. Создание веб-страниц c помощью Word

Чаще всего созданные с помощью Word продукты являются документами, а соответствующие файлы имеют расширение .doc. Начиная с Word-97, средствами этого приложения стало возможным создавать веб-страницы. Эти продукты создаются в формате языка HTML, использующемся в Internet. Такие файлы имеют расширение .htm или .html и могут просматриваться обозревателями (например Internet Explorer).

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

В веб-страницу может быть также преобразован любой созданный ранее с помощью Word документ ИмяФайла.doc. Для этого следует открыть этот документ и выполнить команду Файл, Сохранить как… . В поле Тип файла окна Сохранение документа следует выбрать Веб-страница.

При сохранении документа в формате Веб-страница будет создан файл с тем же именем ИмяФайла.htm (если не задать новое имя), а также папка ИмяФайла.files с файлами рисунков и вспомогательными файлами. Эта пара, файл и папка, в единстве представляют полученную веб-страницу. При удалении файла одновременно будет удалена и связанная с ним папка.

Следует иметь в виду, что не все возможности Word, которые могут быть применены в документах (.doc), поддерживаются в веб-страницах. Если конечной целью создания продукта с помощью Word является получение веб-страницы, то следует сразу отказаться от этих возможностей, не поддерживаемых обозревателем.  Для этого следует выполнить команду Сервис, Параметры. В открывшемся окне Параметры на вкладке Общие щелчком на кнопке Параметры веб-документа… открыть соответствующее окно. Затем на вкладке Общие следует установить флажок Отключить средства, не поддерживаемые обозревателем и выбрать нужный обозреватель.

Приступите к выполнению задания на ЭВМ. Дальнейшее изложение задания ориентировано на работу в общеуниверситетских компьютерных классах МЭИ (ТУ).

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

2. Откройте в Word файл документа с настоящим текстом, если он еще не открыт. Этот документ, например, находится  на диске k и имеет полное имя:

k:\FP\Inf\2 семестр\Задания\z11.doc.

3. Сохраните файл в Вашей рабочей папке (команда Сохранить как…).

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

4.1) выполните команду Файл, Сохранить как…;

4.2) в поле Тип файла окна Сохранение документа выберите Веб-страница и завершите команду щелчком на кнопке OK;

4.3) закройте файл и сверните Word.

5. Загляните в свою рабочую папку и убедитесь, что в ней появился файл z11.htm, а также появилась папка z11.files. Для этого откройте папку Мой компьютер, откройте диск d и откройте свою рабочую папку. Сверните окно со своей рабочей папкой.

6. Просмотрите полученную веб-страницу с помощью обозревателя Internet Explorer. Для этого откройте Internet Explorer и откройте файл z11.htm (команда Файл, Открыть). Ознакомьтесь с файлом. Обратите внимание: разделения на страницы нет. Экономить бумагу теперь не нужно, поэтому обтекание рисунков текстом для экономии места на листе теперь неактуально.

7. Закройте Internet Explorer.

8. Восстановите Word и снова откройте файл z11.htm. Веб-страницу можно украсить. Это делается с помощью темы. Выполните команду Формат, Тема…. По своему усмотрению выберите тему и щелкните на кнопке ОК.

9. Сохраните файл и сверните Word.

10. Восстановите окно с Вашей рабочей папкой.

11. Удалите файл z11.htm. Для этого выделите файл и щелкните на кнопке Удалить панели инструментов или сделайте на нем правый щелчок мышью и выберите из появившегося контекстного меню пункт Удалить. Обратите внимание на то, что вместе с файлом была удалена и связанная с ним папка z11.files. Как видите, действительно, это одно целое.

12. Отмените удаление командой Правка, Отменить удаление.

Итак, Вы освоили получение веб-страницы с помощью Word.

2. Подготовка комплекта веб-страниц для загрузки на сайт Народ

13. Создайте комплект веб-страниц, которые Вы предполагаете разместить на своем сайте.

Одна веб-страница  z11.htm в комплекте уже имеется. Для закрепления полученных навыков преобразуйте в веб-страницы еще два документа. В качестве этих документов можно взять задания для выполнения лабораторных работ по «Информатике» в первом или втором семестрах. Согласуйте с преподавателем выбор документов.

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

Обратите внимание, веб-страницу после создания нельзя переименовать, это приведет к ее порче.

3. Создание собственного сайта на сайте Народ

14. Сайт  http://narod.yandex.ru/ предоставляет всем желающим возможность бесплатно создать персональный сайт. Он должен содержать главную страницу (для ее создания предлагается выбор из нескольких шаблонов), которая должна иметь имя index.htm. На этой главной странице предоставляется возможность разместить краткое текстовое описание Вашего сайта, а также необходимое количество ссылок на Ваши веб-страницы.

Предлагаем Вам приступить к созданию собственного сайта.

15. Откройте обозреватель Internet Explorer и перейдите по ссылке http://narod.yandex.ru/. На рис. 1 показан примерный вид этой веб-страницы.

16. Если бы Вы были зарегистрированы как пользователь сайта Народ, то в разделе Вход (расположен в правом верхнем углу Веб-страницы) в полях Логин и Пароль следовало бы ввести Ваши учетные данные и щелкнуть на кнопке Войти. Если же Вы еще не прошли регистрацию, то в разделе Постройте свой сайт за 60 секунд! (расположен вверху центральной части Веб-страницы) следует ввести имя Вашего сайта. Для этого в поле Займите это имя для своего сайта и почты введите некоторое имя по Вашему  выбору (например, введите Ваш логин в ОСЭП) и щелкните на кнопке Занять. В приводимых далее в качестве примера иллюстрациях было занято имя student.

3.1. Регистрация

17. После выбора имени Вам будет предложено заполнить соответствующую анкету для регистрации (рис. 2). Обязательны для заполнения только те поля, которые слева помечены красной точкой.

18. Ознакомьтесь с условиями пользовательского соглашения. Для этого щелкните на ссылке, находящейся над кнопкой .

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

20. Если выбранный Вами логин уже занят, то Вам будет предложено его подправить (рис. 3). Щелкните на кнопке Подставить, еще раз введите пароль, подтвердите пароль и снова щелкните на кнопке .

21. Вам будет предложено подписаться на новости сайта (см. рис. 3). Закончите работу с этим окном щелчком на кнопке Сохранить. Признаком успешного завершения регистрации является появление окна, изображенного на рис. 4. Здесь в качестве примера был получен логин student132. Этот логин в дальнейшем будет применяться в рассматриваемых примерах.

 

 

3.2. Создание главной страницы сайта

22. Сначала следует создать главную страницу сайта. Это та страница, которую первой увидит посетитель Вашего сайта. В Мастерской для этого предусмотрены необходимые средства. Щелкните на ссылке Моя мастерская (см. рис. 4). Вам откроется веб-страница Мастерская (рис. 5).

 

 

23. Щелкните на ссылке Главная страница в разделе Мой дом. На открывшейся странице (рис. 6) Вам будет предложено выбрать шаблон главной страницы сайта.

24. Выберите шаблон по своему усмотрению (в качестве примера был выбран шаблон с названием Апельсиновый) и щелкните на кнопке .

25. Откроется окно шаблона (рис. 7).  Заполните поле О чем сайт. В расположенном ниже поле Текст введите текст, характеризующий направленность сайта.

26. Заполнение ссылок отложите на потом. Щелкните на кнопке . На экране появится изображение главной страницы. Ознакомьтесь с ее внешним видом. Если заметили ошибки, то щелкните на кнопке  и внесите необходимые поправки, иначе щелкните на кнопке . Появится окно, изображенное на рис. 8.

3.3. Доукомплектование начального комплекта веб-страниц для Вашего сайта

Сайт Народ имеет собственные средства для создания по выбираемому шаблону специальных веб-страниц, таких как Про меня, Фотоальбом, Резюме, Любимые ссылки т.д.

27. Создайте веб-страницу Фотоальбом. Для этого щелкните на ссылке перейти к созданию других страниц (см. рис. 8), в открывшемся окне щелкните на ссылке Фотоальбом. Выберите шаблон и щелкните на кнопке .

28. Ознакомьтесь с шаблоном. Если он Вас устраивает, щелкните на кнопке . Ознакомьтесь с видом веб-страницы Фотоальбом. Если она вас устраивает, то еще раз щелкните на кнопке .

29. Щелкните на ссылке перейти в раздел «Управление файлами» (см. рис. 8). В появившемся окне (рис. 9) Вы увидите  отображение файлов, только что созданных Вами в корневой папке Вашего сайта.

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

3.4. Загрузка веб-страниц на сайт

            Загрузите в корневую папку Вашего сайта три веб-страницы из Вашей рабочей папки.

30. Сначала в корневой папке файла следует создать папки для рисунков и вспомогательных файлов каждой веб-страницы. Для этого щелкните на ссылке Создать папку (рис. 9).

31. Введите имя создаваемой папки (рис. 10) для одной из веб-страниц, в точности совпадающее с тем именем, которая она имеет в Вашей рабочей папке, и щелкните на кнопке ОК. Подождите, пока на экран не вернется отображение страницы Управление файлами.

 

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

33. Загрузите файл z11.htm и два остальных .htm-файла в корневой каталог сайта. Для этого щелкните на ссылке Загрузить файлы
(см. рис 9).

34. Для загрузки каждого из трех файлов веб-страниц из рабочей папки в появившемся окне (рис. 11) следует щелкнуть справа от свободного поля на кнопке  и указать файл, подлежащий загрузке. После указания подобным образом трех файлов, подлежащих загрузке, щелкните на кнопке . После этого произойдет загрузка файлов, которая требует некоторого времени. Следует дождаться сообщения об окончании загрузки и возвращения изображения исходного окна (см. рис. 11).

Теперь следует в соответствующие папки веб-страниц загрузить файлы рисунков и вспомогательные файлы.

35. Для этого для каждой из трех веб-страниц выполните следующие действия:

щелкните на ссылке Выбрать папку (см. рис. 11), выберите соответствующую папку и щелкните на кнопке ;

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

36. После окончания загрузки файлов в папки всех трех веб-страниц щелкните на ссылке Мастерская.

3.5. Заполнение ссылок на главной странице

37. Теперь следует вернуться к главной странице, чтобы заполнить на ней ссылки на веб-страницы. Для этого щелкните на ссылке Управление файлами и HTML-редактор.

38. Для перехода к редактированию главной страницы в открывшемся окне (рис. 12) щелкните на кнопке  в строке
index.html.

39. В открывшемся окне (рис. 13) щелкните на ссылке Редактор по шаблону.

40. На экране отобразится шаблон главной страницы
(рис. 7). В этом шаблоне следует заполнить поля ссылок. В итоге Вам следует получить нечто, похожее на шаблон с полями ссылок, изображенными на рис. 14.

Каждая ссылка включает три расположенных в одну колонку поля, слева от которых соответственно записано: Выберите:, или введите:, Текст ссылки: (см. рис. 14). В поле Текст ссылки (в дальнейшем будем его называть полем текста ссылки) вводится произвольный текст, говорящий о содержании веб-страницы. Этот текст будет виден посетителю Вашего сайта как ссылка, щелчок на которой откроет данную веб-страницу. В поле или введите: (его в дальнейшем будем называть полем адреса ссылки) должен находиться адрес веб-страницы. Поле Выберите: для веб-страниц, созданных по шаблону, позволяет заполнять поле адреса ссылки из списка созданных по шаблону веб-страниц, который раскрывается щелчком на кнопке , находящейся справа в поле Выберите.

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

41. Сначала следует заполнить поля ссылок на гостевую книгу и созданный Вами по шаблону фотоальбом. Начните с гостевой книги. Гостевая книга позволяет посетителю сайта сделать в ней запись, которую сможете видеть Вы, а также другие посетители Вашего сайта. В разделе 1 ссылка кнопкой , расположенной справа в поле Выберите,  раскройте выпадающий список и щелчком выберите в нем Гостевая книга. Поле адреса ссылки заполнять не нужно, адрес в нем появится автоматически. Поле текста ссылки также будет заполнено автоматически. Заполнение первой ссылки закончено.

42. Аналогично в разделе 2 ссылка заполните ссылку для фотоальбома (photoalbum.html).

43. Теперь осталось заполнить поля трех ссылок на ранее созданные Вами и загруженные на сайт веб-страницы, которые в рассматриваемом примере имеют имена z11.htm, z03.htm и z04.htm. Начните с  веб-страницы z11.htm. В разделе 3 ссылка введите адрес веб-страницы z11.htm в поле адреса ссылки. В рассматриваемом примере следовало бы ввести http://student132.narod.ru/z11.htm. Вам же в этом адресе следует заменить часть адреса student132 на Ваш логин. В поле текста ссылки введите краткое название, отражающее содержание веб-страницы.

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

45. В Вашем фотоальбоме еще нет фотографий? Поместите туда несколько штук. Если нет оцифрованных фотографий, в учебных целях подойдут любые рисунки, например, из файлов mpei.jpg и  foto.jpg, находящихся по адресу k:\FP\Inf\Кладовка. С этой целью приступите к редактированию веб-страницы Фотоальбом. Для вставки каждой фотографии (рисунка) в фотоальбом, щелкнув на кнопке , выберите соответствующий файл, щелкните на кнопке , введите подпись под фотографией и щелкните на кнопке . После этого следует немного подождать до появления фотографии (рисунка) в фотоальбоме. Завершите добавление фотографий щелчком на кнопке . Ознакомьтесь с итоговым видом фотоальбома; если все в порядке, еще раз щелкните на кнопке .

46. Итак, работа по созданию сайта завершена. Зайдите на свой сайт. Вы ведь записали адрес своего сайта? Для рассмотренного выше примера это http://student132.narod.ru. Адрес Вашего сайта отличается от этого только логином. Посмотрите также, как выглядит  главная страница Вашего сайта. Попробуйте, как работают все ссылки на веб-страницы.

47. Отправьте из своего почтового ящика в ОСЭП сообщение Вашему преподавателю с адресом Вашего сайта и с приглашением его посетить.

48. Если Вы не рассчитываете дальше поддерживать свой сайт, то удалите его после того, как Вы получите ответ преподавателя с положительной оценкой Вашего сайта. Для этого в Мастерской перейдите по ссылке Удалить регистрацию.

Для тех, кто собирается в дальнейшем поддерживать свой сайт, в Мастерской имеется много средств, чтобы сделать Ваш сайт интересным и посещаемым. Например, Вы можете выставить свой сайт в каталог для посетителей сайта Народ.

49. Закончив работу по созданию сайта, удалите свою рабочую папку.

4. Дополнительные полезные средства сайта Народ

При создании сайта Вы, возможно, не пользовались некоторыми средствами, о существовании которых полезно знать. Речь будет идти о средствах работы с файлами и папками, которые доступны в разделе
Мастерская \ Управление файлами. Рассмотрим эти средства.

1. Просмотр файла.

Для просмотра файла следует щелкнуть на его имени.

2. Перемещение по дереву каталогов.

Если Вам требуется посмотреть содержание папки, то это возможно. Чтобы войти в папку, следует щелкнуть на ее имени (см. рис. 12). Например, если Вы щелкните на имени папки z03.files, то Вы сможете увидеть файлы, находящиеся в этой папке (рис. 15).

            Для выхода из открытой папки и перехода по дереву каталогов на один уровень вверх следует щелкнуть на ссылке , которая расположена в левом верхнем углу окна слева от ссылки Корневая папка (рис. 15).

3. Удаление файла и папки, если она не содержит файлов.

Для удаления файла (папки) его следует отметить флажком в окошке слева от имени файла (папки), щелкнуть на кнопке  (см. рис. 12). Система потребует подтверждения Вашего намерения. В ответ следует еще раз щелкнуть на кнопке  и подождать сообщения системы о завершении выполнения удаления, а также подождать возврата в раздел Мастерская \ Управление файлами.

4. Копирование файла. Для копирования файла его следует отметить флажком в окошке слева от имени файла, щелкнуть на кнопке  (см. рис. 15). В открывшемся окне (рис. 16) следует выбрать папку, в которую Вы собираетесь копировать файл, затем щелкнуть на кнопке , дождаться окончания выполнения копирования, а также подождать возврата в раздел Мастерская \ Управление файлами.

5. Перемещение файла.

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

6. Переименование (описание) файла или папки.

Для переименования (описания) файла (папки) следует щелкнуть на кнопке , находящейся в правой части строки с именем файла (папки). В открывшемся окне (см. рис. 13) в левой колонке щелкните на ссылке Имя и описание. В открывшемся окне Управление именем и описанием переименуйте файл (папку). Если считаете полезным, то введите описание файла. Закончить переименование и (или) описание файла следует щелчком на кнопке .

7. На сайте Народ есть каталог персональных сайтов. Если Вы хотите, чтобы Ваш сайт был доступен не только тем, кому Вы сообщили его адрес, его следует выставить в каталог. Для этого откройте свойства главной страницы сайта. В окне свойств выберите Каталог. В открывшемся окне Управление размещением страницы в каталоге выберите подходящую рубрику и щелкните на кнопке .

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

9. Редактирование файла в HTML редакторе.

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

Несложно выполнять и более глубокое редактирование. Для этого достаточно иметь элементарное представление о правилах построения HTML-кода.     При преобразовании текста с таблицами, ссылками и изображениями в HTML-код в него вкрапливается служебная информация. Чтобы эта служебная информация не смешивалась с основной информацией, ее заключают в специальные скобки, роль которых играют теги. Тегом называются последовательности символов, которые управляют отображением текстовой или иной информации, но при этом не отображаются обозревателем. Большинство тегов используются попарно: <…> –  открывающий тег, </…> –  закрывающий тег.

Далее будут рассмотрены некоторые конструкции языка HTML, позволяющие отформатировать вводимый текст. Для выделения части текста жирным шрифтом её необходимо поместить между тегами <B> и </B>.

Например, необходимо выделить слова “Обратите внимание!” жирным шрифтом.

Для этого в окне редактирования текста следует написать:

<B>Обратите внимание!</B>

В обозревателе это будет выглядеть так:

Обратите внимание!

Чтобы отцентрировать участок текста, его необходимо поместить между тегами <CENTER> и </CENTER>.

Например: <CENTER>Обратите внимание!</CENTER>

Для  выделения абзаца применяются теги <P> и </P>.

Чтобы  поместить на страницу ссылку, используется теги <A HREF=”адрес нужной страницы”>Текст ссылки</A>.

Например, ссылка на сайт МЭИ выглядит следующим образом:

<A HREF=”http://www.mpei.ru”>Сайт МЭИ</A>.

Для вставки изображения применяется тег  <IMG>, таблиц – тег <TABLE>.

5. Вопросы для контроля

            1. Из каких компонентов состоит веб-страница, сохраненная в    Word в формате веб-страница?

            2. Каково назначение темы?

            3. Как веб-страница в отличие от документа соотносится с           проблемой экономии бумаги?

            4. Какие средства имеются в Мастерской сайта Народ для       создания веб-страниц?

            5. Как по шаблону создается главная страница сайта?

            6. Для создания каких веб-страниц имеются шаблоны на сайте    Народ?

            7. Как выполнить загрузку файлов на сайт?

            8. Как строится адрес корневой папки персонального сайта?

            9. Как удалить файл из сайта?

10. Что произойдет, если Вы, находясь в разделе Мастерская\Управление файлами, щелкните на имени веб-страницы или на имени папки?