Далее: Задание 5. Оформление сайта Вверх: Создание статического Web-сайта на Назад: Задание 3. Разработка проекта

Задание 4. Создание сайта.

1. Начните создание собственного сайта. Для этого создайте в папке “Фамилия-группа-тема” новую пустую папку с именем “Сайт-Фамилия-Группа-Тема” Папка “Сайт-Фамилия-Группа-Тема” (как и ее будущие переименованные копии) является корневой (основной) папкой сайта.
2. Внутри папки создайте текстовый документ (файл) с именем “index”, изменив его расширение с “.txt” на “.htm” (правый щелчок — Создать — Текстовый документ). Не пугайтесь предупреждения о возможной недоступности файла! На вопрос об изменении расширения ответьте утвердительно. Должен возникнуть файл “index.htm” — файл начальной страницы. Этот файл в дальнейшем будет также служить шаблоном для создания остальных страниц. Двойным щелчком откройте созданную начальную страницу и убедитесь, что она пуста.
3. Откройте свой файл “index.htm” в редакторе MS Word (правый щелчок — Открыть с помощью — Microsoft Office Word). Вы увидите пустую начальную страницу сайта. Помните, что заполнение, редактирование страниц будут осуществляться с помощью окон редактора MS Word, а просмотр полученного результата — с помощью окон браузера (например, браузера MS Internet Explorer). Вам придется работать в многооконном режиме — одновременно в нескольких окнах, по-разному отображающих содержимое страниц.
4. Для создания страницы “с нуля” самостоятельно заполните открытую с помощью MS Word пустую страницу. Напечатайте заголовок (логотип) сайта (например “Россия”) размером шрифта (кеглем) 36, Arial, выравнивание по левому краю. Под заголовком создайте таблицу, состоящую из одной строки и двух столбцов (“Вставка — Таблица”). Буксировкой границы сделайте правый столбец в два раза шире левого. Установите для таблицы невидимые границы (Свойства таблицы — Границы и заливка — Нет).
5. Сохраните страницу. Обратите внимание на то, что рядом с файлом index.htm появилась папка “index.files”, содержащая служебные файлы страницы.
6. Заполните левый и правый столбцы начальной страницы собственной текстовой информацией. В левом столбце создайте свое меню шрифтом 12, Arial, черным цветом, выравнивание по левому краю, список отключён, без ссылок. В правом столбце создайте подзаголовок (шрифт 18, Arial, выравнивание по левому краю) и введите текст страницы шрифтом 12, Times New Roman, черным цветом, одинарный междустрочный интервал, выравнивание по ширине, без отступа первой строки. Фотографии, рисунки и другие графические элементы оформления НЕ ИСПОЛЬЗУЙТЕ.
7. Сделайте фон, позволяющий легко читать текст страницы (“Разметка страницы — Цвет страницы”). Избегайте ярких, кричащих фонов. Пронаблюдайте результат. Помните, что единый дизайн предполагает единый фон всех страниц сайта.
8. Установите цвет заголовка (логотипа) и подзаголовка правого столбца, гармонирующий с новым фоном. Цвет пунктов меню НЕ устанавливайте (для них в дальнейшем будет использован другой, гиперссылочный механизм установки цвета).
9. Сохраните начальную страницу. Двойным щелчком откройте начальную страницу в окне браузера. Тщательно проверьте её тексты и оформление; при необходимости заново отредактируйте. Помните, что начальная страница создаётся как шаблон (заготовка) для создания остальных страниц, в котором надо устранить все ошибки.

   

10. При просмотре страницы убедитесь, что в заголовке окна браузера (слева от его названия) отсутствует название вашего сайта. Для добавления названия сайта в строку заголовка окна сохраните страницу, открытую в MS Word, с помощью команды “Сохранить как”. Заголовок впечатывается после щелчка по кнопке “Изменить”. Пронаблюдайте появление заголовка в окне браузера.

    
11. Сделайте все пункты меню начальной страницы гиперссылками. Для этого откройте файл “index.htm” в редакторе MS Word. Оформите первый пункт меню в виде ссылки на тот же файл “index.htm”.Для этого протягиванием мышью выделите первый пункт меню. Командой “Гиперссылка” контекстного (правощелчкового) меню выделенного пункта откройте окно добавления гиперссылки. Убедитесь в том, что установлены следующие режимы: “Связать с: файлом, веб-страницей”, “Папка: текущая папка”. Щелчком по значку укажите файл “index.htm” и подтвердите свой выбор кнопкой “ОК”.
12. Второй сверху пункт меню сделайте ссылкой на вторую (пока еще не созданную) страницу. Для этого протягиванием мышью выделите второй пункт меню. Командой “Гиперссылка” контекстного (правощелчкового) меню выделенного пункта вновь откройте окно добавления гиперссылки. Вновь убедитесь в том, что установлены следующие режимы: “Связать с: файлом, веб-страницей”, “Папка: текущая папка”. В строке “Адрес” руками впечатайте 2.htm (этот файл будет создан позднее) и подтвердите своё действие кнопкой “ОК”. Помните, что опечатки и лишние пробелы здесь недопустимы!
13. Аналогично свяжите третий и все остальные пункты меню начальной страницы с пока не существующими файлами “3.htm”, “4.htm” и т.д.
14. Сохраните изменения и просмотрите начальную страницу в окне браузера. Щелчками в окне браузера проверьте работу ссылок. Обратите внимание на то, что все ссылки начальной страницы (кроме первой, как бы не действующей) обеспечивают переход на пустые страницы. Возврат на начальную страницу осуществляйте с помощью кнопки браузера “Назад”. Обратите внимание на то, что посещённые ссылки отличаются цветом от непосещённых. Ошибочно оформленные ссылки откорректируйте или удалите в редакторе MS Word (правый щелчок по ссылке — “Изменить гиперссылку” или “Удалить гиперссылку”).
15. Обязательно продемонстрируйте окончательную версию начальной страницы преподавателю и получите разрешение на создание остальных страниц. Помните, что начальная страница выступает в качестве шаблона остальных страниц. Поэтому необходимо тщательно устранить все ошибки и детально оформить окончательный вариант дизайна страницы.
16. Создайте в корневой папке сайта файлы остальных страниц. Для этого несколько раз сохраните начальную страницу, открытую в MS Word, под новыми именами “2.htm”, “3.htm” и т.д. (“Сохранить как — Другие форматы”). Найдите в папке сайта новые страницы и обслуживающие их папки.
17. Отредактируйте каждую из вновь полученных страниц с помощью MS Word (аналогично редактированию начальной страницы). Помните, что изменению подлежит только содержимое правого столбца таблицы. Основной заголовок, меню содержания в левом столбце, цвет фона и кегли шрифтов НЕ МЕНЯЙТЕ. Измените названия подзаголовков и текстовое содержание правых столбцов. При необходимости добавьте в текст таблицы, не нарушающие компоновку страницы. Фотографии, рисунки и другие графические элементы оформления НЕ ИСПОЛЬЗУЙТЕ. Просмотрите работу всего сайта в браузере, найдите и устраните ошибки.
18. Пронаблюдайте эффект “исчезновения” ссылок образцового сайта (папка “Сайт-Образец”). Эффект состоит в том, что при открытии каждой из страниц в меню исчезает одна ссылка — ссылка на саму открытую страницу, а сам пункт меню превращается в обычный текст. Вам необходимо добавить этот эффект в свой сайт. Для этого вновь откройте свой файл “index.htm” в редакторе MS Word. Не удаляя самого пункта меню, снимите ОДНУ гиперссылку — гиперссылку верхнего пункта меню (правый щелчок — Удалить гиперссылку), т.к. переход с начальной страницы на неё же саму не требуется. Сохраните изменения и просмотрите результат.
19. С каждой из остальных страниц аккуратно удалите по ОДНОЙ “лишней” ссылке, ведущей на саму же открытую страницу. После сохранения всех изменений тщательно проверьте работу всех ссылок сайта. При навигации по страницам меню должно оставаться абсолютно неподвижным. Если меню двигается, найдите проблемные страницы и устраните допущенные ошибки. При невозможности устранить ошибку удалите файл и заново повторите всю процедуру создания и оформления страницы.
20. Вновь просмотрите страницы сайта-образца. В самой нижней части всех его страниц, кроме начальной и последней, вы найдете ссылку “В начало страницы”, которая облегчает возврат к верхней части длинной страницы и к меню сайта.
21. Дополните длинные страницы вашего сайта ссылкой “В начало страницы”. Для этого откройте файл требуемой страницы в редакторе MS Word. В нижней части правого столбца создайте надпись “В начало страницы”. Командой “Гиперссылка” откройте окно добавления гиперссылки. Установите режим “Связать с: местом в документе”. Щелчком выберите место в документе: “Начало документа”. Подтвердите свой выбор кнопкой “ОК”.
22. Обеспечьте дополнительную навигацию по одной из страниц большого объема (для примера см. четвертую страницу сайта-образца). Для удобства навигации в нужных местах текста рекомендуется создать дополнительные подзаголовки. Создайте подменю (дополнительное меню) под заголовком правого столбца. Пункты меню станут ссылками для перехода в места документа, превращенные в закладки. Для добавления закладки в дополнительный подзаголовок (или в любой другой участок текста) установите курсор в его начало и дайте команду “Вставка — Закладка”.

    

23. В открывшемся окне введите имя закладки в виде одного слова и щелкните кнопку “Добавить”. Оформите пункты подменю как ссылки на закладки (“Вставка — Гиперссылка — Связать с: местом в документе”)
24. Проверьте корректность работы ВСЕХ ссылок на ВСЕХ страницах сайта и устраните найденные ошибки, открывая проблемные страницы в редакторе MS Word. Продемонстрируйте полностью работоспособный гипертекстовый сайт преподавателю и надёжно заархивируйте папку с файлами сайта.

Далее: Задание 5. Оформление сайта Вверх: Создание статического Web-сайта на Назад: Задание 3. Разработка проекта