Создание сайтаВведение Если Вы без затруднений работаете с приложением MS Word, дома или на работе имеете возможность выходить в Internet, хотите иметь свой персональный сайт и согласны затратить несколько дней на его создание, но не знаете с чего начать, то это руководство Вам может оказаться полезным. Как известно, сайтом является одна или несколько Web-страниц (документов в формате HTML), выложенных на сервере провайдера и имеющих адрес сетевого ресурса. Мы будем пользоваться тем, что документ, созданный в MS Word, может быть сохранен в формате Web-страницы. Этот формат как раз доступен для обозревателей Internet, например, для обозревателя. Internet Explorer 6.0. Создание сайта обычно предполагает следующие этапы: 1. Создание Web-страниц. 2. Загрузка Web-страниц на сервер провайдера. 3. Раскрутка сайта.^ 1. Настройка среды Microsoft Word С помощью приложения MS Word мы будем создавать Web-страницы, а также создавать гиперссылки. Следует проверить, правильно ли настроена среда этого приложения на Вашем рабочем месте. Для этого выполните команду Сервис, Параметры. В открывшемся окне Параметры откройте вкладку Общие. Затем щелкните на кнопке Параметры Web-документа. В открывшемся окне Параметры Web-документа откройте вкладку Файлы. В рамке Имена и размещение файлов проверьте: 1) Не должно быть флажка Обновлять ссылки при сохранении. В этом случае при сохранении Web-страницы ссылки не будут преобразовываться в абсолютные, а будут оставаться относительными. 2) Установите флажок Создать папку для вспомогательных файлов, если он не установлен. Щелчком на кнопке ОК закройте окно Параметры Web-документа. Щелчком на кнопке ОК закройте окно Параметры.^ 2. Создание главной страницы сайта В качестве примера мы рассмотрим создание сайта по учебной дисциплине Информатика. Создание сайта начните с создания рабочей папки в корневом каталоге жесткого диска d, на котором будут храниться созданные Вами папки и файлы. Имя рабочей папки должно быть в пределах группы уникальным и по возможности коротким. В рабочей папке, создайте папку site, в которой будут храниться все файлы Вашего сайта. Главную Web-страницу сайта посетитель сайта видит первой, когда попадает на сайт. Мы разделим главную страницу (рис. 1) на три части (рамки). В основной рамке (1) будет отображаться информация той Web-страницы, с которой непосредственно работает посетитель сайта. Удобно также постоянно видеть оглавление. Оно будет отображаться во второй рамке (2) главной страницы. Хотелось бы иметь также часть главной страницы, на которой бы отображалась ссылка на новости сегодняшнего дня (3), с которыми посетитель сайта мог бы знакомиться в минуты отдыха. Приступите к созданию главной страницы. Создайте новую Web-страницу. Для этого выполните команду Файл, Создать, Web-страница. Для создания рамок выполните команду Формат, Рамки, Новая страница рамок. Появится окно Рамки.Рис. 1. Предполагаемое разделение экрана главной страницы на 3 рамки В окне Рамки щелкните на кнопке Новая рамка слева. В том же окне Рамки щелкните на кнопке Новая рамка снизу. Три рамки созданы. Подвиньте границы рамок, захватив их курсором мыши, чтобы было соответствие рис.1. По умолчанию система назначила рамкам имена Рамка1, Рамка2 и Рамка3 соответственно. Для Вас будет важно, чтобы имена не содержали никаких букв, кроме букв латинского алфавита. Переименуйте эти рамки, задав им соответственно имена R1, R2 и R3. Для переименования каждой рамки щелкните в ней правой кнопкой мыши, выполните команду контекстного меню Свойства рамки, в поле Имя вместо старого имени введите новое и щелкните на кнопке ОК. Сохраните созданный файл командой Файл, Сохранить. При этом: В качестве места сохранения файла укажите папку site. В поле Тип файла задайте Web-страница. В поле Имя файла укажите index.htm. Щелкните на кнопке Сохранить. В рамке R2 создайте оглавление сайта (оглавление первого уровня). Для этого вставьте в эту рамку таблицу, имеющую одну колонку и четыре строки. Установите указатель мыши внутри рамки R2 и выполните команду Таблица, Вставить, Таблица. Задайте нужное количество строк и столбцов и щелкните на кнопке ОК. Введите в строках таблицы текст, указанный на рис.2. Начальная Лекции Задания 1-го семестра Задания 2-го семестра ^ Рис. 2. Содержание оглавления Текст каждой строки оглавления Вы позже с помощью гиперссылки свяжете с соответствующими Web-страницами, непосредственно содержащими оглавления второго уровня. Чтобы линии таблицы при отображении обозревателем были не видны, выделите таблицу и выполните команду Формат, Границы и заливка. В окне Границы и заливка на вкладке Граница выберите тип нет и щелкните на кнопке ОК. Для украшения рамки R2 добавьте тему, выполнив команду Формат, Тема. Для конкретности будем считать, что была выбрана тема с названием Природа. Этой же темы придерживайтесь при украшении следующих Web-страниц. В рамке R3 введите слово Новости. Сделайте этот текст крупным и установите выравнивание по центру рамки. Украсьте рамку R3 темой Природа. Каждая рамка – это отдельная Web-страница. Сохранять рамку R1 нет необходимости, поскольку она пустая. Сохраните рамки R2 и R3 в папке site в Web-страницах с именами main.htm и news.htm соответственно. Для сохранения каждой рамки щелкните на ней правой кнопкой мыши и выполните команду контекстного меню Сохранить текущую рамку как, в поле Тип файла задайте Web-страница, в поле Имя файла задайте нужное имя (соответственно main.htm или news.htm)и щелкните на кнопке Сохранить. Предварительная работа по созданию главной страницы сайта закончена. Сохраните ее и закройте файл.^ 3. Создание Web-страниц второго уровня Каждая строка оглавления, которое приведено на рис. 2 - это гиперссылка на оглавление более низкого уровня. Ведь лекций и заданий много, значит, требуется соответствующее оглавление. Итак, приступайте к созданию Web-страниц, которые Вы свяжете с оглавлением, показанным на рис. 2.^ 3.1. Начальная страница Эта страница отображается в рамке R1, когда посетитель только что попал на сайт. На этой странице могут, находится сведения о назначении сайта, а также могут находиться местные новости. В качестве примера начальной страницы за основу возьмите документ k:\FP\ФПКПС\kladovka\start.doc. С этим файлом выполните следующие действия: Откройте его и ознакомьтесь с его содержанием. Для украшения документа добавьте тему Природа, выполнив команду Формат, Тема. Сохраните его в папке site в формате Web-страницы, не изменяя его имени. Для этого выполните команду Файл, Сохранить как, для указания места сохранения файла откройте папку site, выберите тип файла Web-страница. В программе Проводник, откройте папку site. Обратите внимание, что создание Web-страницы, привело не только к создания файла start.htm, но и к созданию папки start.files, которая содержит вспомогательные файлы (в первую очередь содержит файлы рисунков). Web-страница, содержащая рисунки (тема тоже рисунок), это единая пара файл плюс папка для рисунков и вспомогательных файлов. Переименовывать Web-страницу с помощью программы Проводник, как обычно переименовывается обычный файл, нельзя. Для этой цели Web-страницу нужно открыть с помощью программы Word и сохранить под другим именем. Свяжите Web-страницу start.htm с рамкой R1 на главной Web-странице. Для этого: Откройте с помощью Word файл index.htm. В окне программы Проводник, щелкните на нем правой кнопкой мыши, выполните команду контекстного меню Открыть с помощь, и в выпавшем меню выберите Microsoft Office Word. В окне открывшейся Web-страницы щелкните правой кнопкой мыши внутри рамки R1 и в контекстном меню выберите Свойства рамки. В открывшемся окне Свойства рамки на вкладке Рамка задайте начальную страницу, которая по умолчанию будет отображаться при открытии главной Web-страницы. Для этого в поле Начальная страница задайте полное имя страницы не в абсолютной адресации, которая будет предложена системой по умолчанию, а в относительной адресации. Полное имя файла в относительной системе адресации есть start.htm (см. рис. 3), поскольку этот файл находится в той же папке, что и открытый файл index.htm. Завершите команду щелчком на кнопке ОК. В рамке R1 отобразится начальная страница. Использование не абсолютной, а относительной адресации является важным, так как при возможных в последствии перемещениях папки site абсолютные адреса ссылок изменяются, а относительные адреса не изменяютcя. Сохраните файл index.htm и закройте его.Рис. 3. Связывание начальной страница с рамкой R1 Двойным щелчком в окне программы Проводник на файле index.htm откройте его. Обратите внимание, по умолчанию Web-страница открывается не в программе Word, а в окне обозревателя. Ознакомьтесь с отображением главной страницы сайта обозревателем и закройте обозреватель.^ 3.2. Создание оглавлений лекций и заданий Все файлы, относящиеся к сайту, можно было бы поместить внутри папки site. Однако все же удобнее структурировать информацию и внутри папки site создать отдельные внутренние папки для файлов, относящихся к лекциям, для файлов, относящихся к заданиям первого семестра и для файлов, относящихся к заданиям второго семестра. Начните работу по созданию оглавлений второго уровня: Создайте в папке site внутренние папки, как это показано на рис. 4.Рис. 4. Внутренняя структура папки site Приступите к созданию оглавления лекций. Создайте новую Web-страницу. Для этого выполните команду Файл, Создать, Web-страница. Поместите на только что созданной Web-странице таблицу, показанную на рис. 5 и удалите ее обрамление. Для украшения Web-страницы добавьте тему Природа, выполнив команду Формат, Тема. Сохраните этот файл в созданной только что Вами папке lekzii в формате Web-страницы, задав ему имя L.htm. Создайте Web-страницу, содержащую оглавление заданий первого семестра. Ее вид показан на рис. 6. Для этого выполните действия аналогичные действиям, описанным выше в пунктах 2 – 5, но при этом сохраните ее в формате Web-страницы в папке semestr1 под именем z.htm. Создайте Web-страницу, содержащую оглавление заданий второго семестра. Ее вид показан на рис. 7. Для этого опять повторите действия аналогичные действиям, описанным выше в пунктах 2 – 5, но при этом сохраните ее в формате Web-страницы в папке semestr2 под именем z.htm.Рис. 5. Оглавление лекцийРис. 6. Оглавление заданий первого семестраРис. 7. Оглавление заданий второго семестра^ 3.3. Создание Web-страниц третьего уровня Здесь речь будет идти о Web-страницах, на которые ссылаются оглавление лекций, а также оглавления заданий. Файлы документов, которые могут послужить примерами, с лекциями (l01.doc, l02.doc, l03.doc), заданиями первого семестра (z101.doc, z102.doc, z103.doc) и заданиями второго семестра (z201.doc, z202.doc, z203.doc) находятся в папке k:\FP\ФПКПС\kladovka. Эти файлы следует преобразовать в Web-страницы и поместить в соответствующие папки, лекции (файлы l01.htm, l02.htm, l03.htm) – в папку lekzii, задания первого семестра (файлы z101.htm, z102.htm, z103.htm) – в папку semestr1, задания второго семестра (файлы z201.htm, z202.htm, z203.htm) – в папку semestr2. Для преобразования в Web-страницу всех этих перечисленных выше девяти файлов выполните для каждого файла следующие действия: Откройте файл в приложении Word и выполните команду Сохранить как, укажите папку, в которой Вы его предполагаете сохранить, выберите тип файла Web-страница и щелкните на кнопке Сохранить. Для украшения Web-страницы добавьте тему Природа, выполнив команду Формат, Тема. Сохраните файл и закройте его.^ 3.4. Связывание заголовка с соответствующей Web-страницей Для связывания заголовка оглавления с Web-страницей применяется гиперссылка. При вставке гиперссылки можно указать ту рамку, в которой должна быть открыта Web-страница, а также и гиперссылки, находящиеся на этой Web-странице. При вставке гиперссылки следите, чтобы путь к Web-странице был не абсолютным (от диска), а относительным (от текущего каталога). При выполнении этого требования гиперссылки будут работать даже при переносе папки site на другой диск. Приступите к вставке гиперссылок. Откройте с помощью Word Web-страницу index.htm. В оглавлении, содержащемся в рамке R2, свяжите строку Главная с файлом Start.htm. Для этого выполните следующие операции: Выделите слово Главная. Щелкните на нем правой кнопкой мыши и выполните команду контекстного меню Гиперссылка и в появившемся окне Добавление гиперссылки (рис. 8) укажите файл start.htm, который должен будет открыться при щелчке на этой гиперссылке.Рис. 8. Связывание гиперссылки с файлом Укажите рамку, в которой должен открыться файл. Для этого щелкните на кнопке Выбор рамки и в открывшемся окне Задание конечной рамки (рис. 9) щелкните в разделе Текущая страница на рамке R1. Проверьте, чтобы был установлен флажок Использовать по умолчанию для всех гиперссылок.Рис. 9. Указание рамки, в которой должна открываться Web-страница Щелчком на кнопке ОК закройте окно Задание конечной рамки. В оглавлении, содержащемся в рамке R2, свяжите строку Лекции с находящимся в папке lekzii файлом L.htm. Для этого выполните операции аналогичные операциям, указанным выше в пунктах 2.a – 2.d. В оглавлении, содержащемся в рамке R2, свяжите строку Задания первого семестра с находящимся в папке semestr1 файлом z.htm. Для этого выполните операции аналогичные операциям, указанным выше в пунктах 2.a – 2.d. В оглавлении, содержащемся в рамке R2, свяжите строку Задания второго семестра с находящемся в папке semestr2 файлом z.htm. Для этого выполните операции аналогичные операциям, указанным выше в пунктах 2.a – 2.d. Сохраните главную страницу. Нажмите клавишу Ctrl и щелкните на гиперссылке Лекции. Если Вы при создании этой гиперссылки Вы не допустили ошибки, то в рамке R1 откроется оглавление лекций. Свяжите гиперссылкой каждую из первых трех позиций этого оглавления с файлом соответствующей лекции из папки lekzii. Нажмите клавишу Ctrl и щелкните на гиперссылке Задания первого семестра. В рамке R1 должно открыться оглавление заданий первого семестра. Свяжите гиперссылкой каждую из первых трех позиций этого оглавления с файлом соответствующего задания из папки semestr1. Нажмите клавишу Ctrl и щелкните на гиперссылке Задания второго семестра. В рамке R1 должно открыться оглавление заданий второго семестра. Свяжите гиперссылкой каждую из первых трех позиций этого оглавления с файлом соответствующего задания из папки semestr2. Рамка R3 по замыслу предназначена для отображения новостей. Реализовать это можно, выполнив следующие операции: Откройте обозреватель и откройте главную страницу сайта Яndex (http:/www.yandex.ru). Откройте вкладку Новости (http:/news.yandex.ru). Щелкните на ссылке Новости на вашем сайте. Выберите тематику, количество и оформление новостей и щелкните на кнопке Получить код. Выделите весь код и скопируйте его в буфер обмена Windows. Поместите указатель мыши в рамку R3, щелкнув на ней, и выполните команду Вид, Источник HTML. Тем самым Вы откроете HTML код своей Web-страницы news.htm. Прокрутите этот код до конца и вставьте перед последней его строкой HTML код, который Вы поместили в буфер обмена. Удалите границы рамок. Больше надобности в них нет. Для этого щелкните правой кнопкой мыши на одной из рамок, выполните команду контекстного меню Свойства рамки, откройте вкладку Границы, в разделе Страница рамок установите переключатель в положение границы отсутствуют и щелкните на кнопке ОК. Сохраните главную Web-страницу index.htm и закройте ее.Подготовка файлов для Вашего сайта закончена. Для проверки правильности выполнения подготовки откройте с помощью обозревателя файл index.htm и проверьте работу всех ссылок. Если все ссылки работают, то можно переходить к загрузке файлов на сайт провайдера. Есть провайдеры, которые любому зарегистрированному пользователю предлагают бесплатно размещать сайт. Одним из них является сайт Народ.4. Регистрация Откройте обозреватель Internet Explorer и перейдите по ссылке http://narod.yandex.ru. Если бы Вы были зарегистрированы как пользователь сайта Народ, то в разделе Вход (расположен в правом верхнем углу Web-страницы) в полях Логин и Пароль следовало бы ввести Ваши учетные данные и щелкнуть на кнопке Войти. Пока Вы еще не прошли регистрацию в разделе Постройте свой сайт за 60 секунд! (расположен вверху центральной части Web-страницы) следует ввести имя Вашего сайта. Для этого в поле Займите это имя для своего сайта и почты введите некоторое имя по Вашему выбору (например, введите Ваш логин в ОСЭП) и щелкните на кнопке Занять. Откроется страница регистрации в Яndex. Если выбранный Вами логин уже занят, то система подскажет Вам еще не занятый логин, с которым Вы можете согласиться или можете ввести другой логин. Закончив регистрацию, обязательно запишите свой логин и пароль!^ 5. Загрузка файлов на сайт Народ Откройте ссылку http://narod.yandex.ru. Введите Ваши логин, пароль и щелкните на кнопке Войти. Откроется Web-страница, с названием Мастерская. В разделе Редактирование и управление щелкните на ссылке Управление файлами и HTML-редактор. Откроется корневая папка Вашего сайта. Создайте в корневой папке точно такую же структуру папок, которая была создана Вами в папке site, имея в виду также и папки для вспомогательных файлов Web-страниц. Имена папок и файлов в соответствии с требованиями сайта Народ могут включать только буквы латинского алфавита, цифры, знак подчеркивания и должны начинаться с буквы. Для создания каждой папки пользуйтесь ссылкой Создать папку. Папка будет создана в текущей папке. Для входа внутрь созданной папки достаточно щелкнуть на ее имени, которое является ссылкой. Для выхода из папки можно щелкнуть на ссылке соответствующего уровня в пути к текущей папке, который отображается выше всех папок, когда текущей папкой не является корневая папка. Загрузите на сайт Народ в соответствующие папки все файлы своего сайта. Для этого щелкните на ссылке Загрузка файлов. Для выбора папки, в которую будет выполняться загрузка файлов, воспользуйтесь ссылкой ^ Выбрать папку. Для загрузки каждого файла в появившемся окне (рис. 10) следует щелкнуть справа от свободного поля на кнопке Browse и указать файл, подлежащий загрузке. После указания подобным образом всех файлов, подлежащих загрузке, щелкните на кнопке Загрузить файлы. После этого произойдет загрузка файлов, которая требует некоторого времени. Следует дождаться сообщения об итогах загрузки и возвращения изображения исходного окна (см. рис. 10). За один раз можно загрузить не более 10 файлов.Рис. 10. Загрузка файлов После выполнения загрузки всех файлов откройте свой сайт (его адрес ВашЛогин.narod.ru) и проверьте его работу.^ 6. Дополнительные полезные средства сайта Народ Сайт Народ дает в распоряжение зарегистрированного пользователя простые средства для создания гостевой книги (обратная связь автора с посетителями сайта), виртуального фотоальбома, чата, персонального форума, проведение опроса и прочее. Описание этих средств имеется в Мастерской. При создании сайта Вы, возможно, не пользовались некоторыми средствами, о существовании которых полезно знать. Речь будет идти о средствах работы с файлами и папками, которые доступны в разделе Мастерская \ Управление файлами. Рассмотрим эти средства. 1. Просмотр htm-файла. Для просмотра файла следует щелкнуть на его имени. 2. Удаление файла и папки, если она не содержит файлов. Для удаления файла (папки) его следует отметить флажком в окошке слева от имени файла (папки), щелкнуть на кнопке . Система потребует подтверждения Вашего намерения. В ответ следует еще раз щелкнуть на кнопке и подождать сообщения системы о завершении выполнения удаления, а также подождать возврата в раздел Мастерская \ Управление файлами. 3. Копирование файла. Для копирования файла его следует отметить флажком в окошке слева от имени файла, щелкнуть на кнопке . В открывшемся окне следует выбрать папку, в которую Вы собираетесь копировать файл, затем щелкнуть на кнопке , дождаться окончания выполнения копирования, а также подождать возврата в раздел Мастерская \ Управление файлами. 4. Перемещение файла. Перемещение файла выполняется во всем аналогично копированию, но применяется при этом другая кнопка . 5. Переименование (описание) файла или папки. Для переименования (описания) файла (папки) следует щелкнуть на кнопке , находящейся в правой части строки с именем файла (папки). В открывшемся окне в левой колонке щелкните на ссылке Имя и описание. В открывшемся окне Управление именем и описанием переименуйте файл (папку). Если считаете полезным, то введите описание файла. Закончить переименование и (или) описание файла следует щелчком на кнопке . 6. На сайте Народ есть каталог сайтов. Если Вы хотите, чтобы Ваш сайт был доступен не только тем, кому Вы сообщили его адрес, его следует выставить в каталог. Для этого откройте свойства главной страницы сайта. В окне свойств выберите Каталог. В открывшемся окне Управление размещением страницы в каталоге выберите подходящую рубрику и щелкните на кнопке . 7. Редактирование файла в HTML редакторе. Если в тексте Web-страницы Вы обнаружили ошибку, то для ее устранения не обязательно заменять всю Web-страницу новой. Текст легко поправить непосредственно на сайте, открыв Web-страницу в HTML редакторе. Для этого щелкните на кнопке , находящейся справа в строке с именем файла Web-страницы. В открывшемся окне пролистайте HTML-код файла, найдите нужный текст и отредактируйте его. Для сохранения отредактированного файла щелкните на кнопке . Дождитесь сообщения о том, что сохранение завершено. Несложно выполнять и более глубокое редактирование. Для этого достаточно иметь элементарное представление о правилах построения HTML-кода. При преобразовании текста с таблицами, ссылками и изображениями в HTML-код в него вкрапливается служебная информация. Чтобы эта служебная информация не смешивалась с основной информацией, ее заключают в специальные скобки, роль которых играют теги. Тегом называются последовательности символов, которые управляют отображением текстовой или иной информации, но при этом не отображаются обозревателем. Большинство тегов используются попарно: – открывающий тег, …> – закрывающий тег. Далее будут рассмотрены некоторые конструкции языка HTML, позволяющие отформатировать вводимый текст. Для выделения части текста жирным шрифтом её необходимо поместить между тегами и . Например, необходимо выделить слова “Обратите внимание!” жирным шрифтом. Для этого в окне редактирования текста следует написать:Обратите внимание! В обозревателе это будет выглядеть так:^ Обратите внимание! Чтобы отцентрировать участок текста, его необходимо поместить между тегами и . Например: Обратите внимание! Для выделения абзаца применяются теги
и . Чтобы поместить на страницу ссылку, используется теги Текст ссылки. Например, ссылка на сайт МЭИ выглядит следующим образом: Сайт МЭИ. Для вставки изображения применяется тег , таблиц – тег .^ 7. Раскрутка сайта Необходимость в раскрутке сайта возникает, если Вы хотите, чтобы о нем знало как можно больше людей. Для этого сайт следует зарегистрировать в информационно-поисковых сайтах и в каталогах. Если Ваш сайт находится на Народе, то его следует поместить в каталог Народа. Для этого откройте свойства главной страницы Вашего сайта, щелкните на ссылке Каталог и выполните необходимые и очевидные действия по регистрации Вашего сайта в каталоге. Можно также зарегистрировать Ваш сайт в нескольких информационно-поисковых системах, например в таких как: Рамблер (http://www.rambler.ru), Яндекс (http://www.yandex.ru), Апорт (http://www.aport.ru). Для этой цели предназначена специальная ссылка, которая обычно находится в нижней части главной страницы информационно-поисковых сайта и называется Добавить ресурс или Добавить сайт, или Все службы и ссылка Добавить сайт на открывшейся Web-странице.8. Задания для самостоятельного выполнения Создайте на своем сайте гостевую книгу, в которой посетители сайта могли бы помещать свои сообщения, а Вы могли бы на них отвечать. Создайте на своем сайте фотоальбом. Создайте свой персональный форум, чтобы посетители могли задавать вопросы, отвечать на вопросы, обмениваться впечатлениями, а также, чтобы Вы могли ответить на вопросы, на которые не смогли ответить посетители.