Просмотр гипермедийного сайта-образца в режиме «оффлайн».

Просмотр модели сайта

Откройте папку «Модель сайта». В ней находятся три файла — index.htm (это обязательное имя начальной, т.е. первой страницы сайта), 2.htm (файл второй страницы) и 3.htm (файл третьей страницы. Активизируйте файл начальной страницы «index.htm». Откроется начальная страница сайта. Слева размещены три пункта меню сайта, оформленные как гиперссылки (ссылки) на другие страницы. С помощью гиперссылок просмотрите все три страницы сайта. При переходе со страницы на страницу пронаблюдайте эффект «исчезновения» одной из ссылок, который вы будете использовать при создании собственного сайта. Просмотрите каждый из трех файлов в MS Word (правый щелчок — Открыть с помощью — Microsoft Office Word). Обратите внимание на то, что по своей структуре страницы в основном повторяют друг друга. Самостоятельно определите, чем достигается эффект «исчезновения» ссылок.

Просмотр гипермедийного сайта-образца в режиме «оффлайн».

1. Откройте папку «Сайт-Образец». Двойным щелчком активизируйте файл начальной страницы гипермедийного сайта «index.htm». Откроется начальная страница другого сайта «Герменевтика». С помощью гиперссылок просмотрите все страницы сайта. Пронаблюдайте действие всех дополнительных ссылок. На страницах присутствуют не только тексты, но и фотографии, рисунки, а также ссылки на файлы разных типов. Такой сайт (публикацию, проект) мы будем называть гипермедийным.
2. Найдите небольшие изображения, оформленные как гиперссылки. В нашем случае они являются эскизами (thumbnails) крупных версий этих же изображений. При создании сайтов часто возникает необходимость публиковать полномасштабные изображения с большим количеством мелких деталей (географические карты, схемы, чертежи, репродукции произведений искусства). Непосредственное размещение таких изображений на страницах не всегда целесообразно, т.к. это может нарушить дизайн сайта и обязательно увеличит время загрузки страниц, а также приведет к возрастанию потребляемого трафика. Для устранения этих негативных явлений и применяют эскизы. При наличии эскизов пользователь получает возможность самостоятельно управлять открытием изображений в полномасштабном варианте. Графические эскизы могут быть заменены текстовыми фрагментами, оформленными как гиперссылки на скрытые графические изображения (найдите их).
3. Семь файлов страниц гипермедийного были созданы с помощью редактора MS Word. Просмотрите эти файлы в MS Word (правый щелчок — Открыть с помощью — Microsoft Word).
4. Найдите семь файлов семистраничного сайта с расширением «.htm», а также файлы других типов. Просмотрите вложенные папки «index.files», «1.files», «2.files» и т.д., каждая из которых обслуживает одну из гипермедийных страниц. Найдите в папках файлы с графической («.jpg», «.gif») и служебной («.xml», «.thmx») информацией.
5. Программное обеспечение Web-серверов предъявляет строгие требования к размещаемым файлам. Начальная страница обязательно должна быть выполнена в виде файла «index.htm» или «index.html». Имена файлов должны состоять только из цифр и латинских букв без пробелов и дефисов; прописные (заглавные) буквы категорически не рекомендуются. Для обеспечения нормальной работоспособности размещаемого сайта его файлы (особенно графические) должны иметь как можно меньший байтовый размер при сохранении приемлемого качества информационного содержимого.

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

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. Проверьте корректность работы ВСЕХ ссылок на ВСЕХ страницах сайта и устраните найденные ошибки, открывая проблемные страницы в редакторе MS Word. Продемонстрируйте полностью работоспособный гипертекстовый сайт преподавателю и надёжно заархивируйте папку с файлами сайта.

Оформление сайта с помощью графики (фотографий, картинок).

1. Откройте папку материалов для сайта с графическими файлами *.jpg и *.gif и др. (только не*.bmp!) и проконтролируйте их байтовый и геометрический размер. Байтовый размер файлов следует постоянно контролировать, установив вид папок «Таблица». Оптимальный байтовый размер графического файла для использования на сайте — 20-50 кБ, предельно допустимый — до 100 кБ. Файлы размером до 7 кБ малоинформативны и, как правило, дают изображения небольшого геометрического размера. Файлы размером более 100 кБ следует использовать только после согласования с преподавателем. В случае необходимости размер графического файла можно уменьшить с помощью одного из графических редакторов.
2. Разместите на начальной странице сайта обычное (небольшое) изображение. Для этого откройте файл страницы в редакторе MS Word. Скопируйте файл изображения из внешней папки и вставьте его возле левого верхнего края основного текста правого столбца таблицы. Установите подходящий размер изображения, протянув мышью один из углов.
3. Включите обтекание текстом (правый щелчок по картинке — «Обтекание текстом» — «Вокруг рамки»). Сохраните изменения. Просмотрите полученный результат в браузере.
4. Откройте папку своего гипермедийного сайта. Найдите и откройте в ней папку «index.files», автоматически сгенерированную редактором MS Word. В ней найдите два автоматически созданных файла разного размера, несущих информацию об одном и том же изображении. Там также можно видеть служебные файлы. При добавлении других картинок на начальную страницу в папке «index.files» будут появляться новые файлы. Аналогичные файлы появятся при добавлении графики на другие страницы сайта. По левой части имени папки всегда можно определить страницу, которую она обслуживает. Помните, что файл большего размера непосредственно в оформлении страницы не участвует. Этот «лишний» файл вручную удалять нельзя. Он исчезнет сам после дальнейшей оптимизации сайта — обработки его страниц с помощью фильтра HTML.
5. Все дополнительные папки с файлами становятся неотъемлемыми частями сайта и подлежат размещению на Web-сервере. Содержимое папок надо постоянно контролировать. Файлы из них нельзя удалять вручную. Они появляются и исчезают сами после корректирования страниц с помощью редактора MS Word.
6. Оформите другие страницы с помощью изображений. Проконтролируйте содержимое дополнительных папок в режиме «Вид — Эскизы страниц». Просмотрите в браузере весь измененный сайт.
7. Сделайте одну из небольших картинок эскизом — небольшим изображением, щелчок по которому будет открывать в отдельном окне такое же изображение большего размера. Для этого копию файла с изображением большого (до 100 кБ) размера поместите в корневой папке сайта, обязательно дав ей новое имя на латинице без пробелов и дефисов (например, «foto1.jpg»). Если маленького изображения на странице еще нет, то по привычной схеме в редакторе MS Word проделайте процедуру вставки изображения из файла «foto1.jpg» с последующим уменьшением.
8. В редакторе MS Word сделайте правый щелчок по изображению-эскизу и в возникшем контекстном меню войдите в раздел «Гиперссылка». В окне «Вставка гиперссылки» откройте корневую папку сайта и укажите файл «foto1.jpg». Подтвердите свой выбор и сохраните изменения в файле страницы. Пронаблюдайте работу гиперссылки эскиза в браузере. Разместите еще несколько больших изображений с эскизами на других страницах.
9. Оформите текстовые фрагменты одной из страниц как ссылки на графические файлы (например, название достопримечательностей сделайте ссылками на фотографии с их видами). Файлы фотографий заранее разместите в корневой папке сайта. Не делайте ссылок на файлы, находящиеся в автоматически сгенерированных папках! В именах файлов используйте только латиницу без пробелов и дефисов.
10. В корневую папку сайта поместите файл «info.doc» c информацией (например, рефератом) по вашей теме без графических включений размером не более 150 кБ. На последней странице сайта со списком источников добавьте фразу «Дополнительная информация по теме (посмотреть/скачать)» сделав её ссылкой на файл «info.doc». Пронаблюдайте действие ссылки в окне браузера — если браузер не перенастроен, то она должна открывать окно выбора между открытием и сохранением файла на диск. (В перенастроенном браузере вместо выбора откроется сам документ). После размещения сайта на Web-сервере эта ссылка обеспечит скачивание (download) файла на компьютер посетителя сайта. По согласованию с преподавателем добавьте и оформите для скачивания файлы других форматов.

Просмотр модели сайта

Откройте папку «Модель сайта». В ней находятся три файла — index.htm (это обязательное имя начальной, т.е. первой страницы сайта), 2.htm (файл второй страницы) и 3.htm (файл третьей страницы. Активизируйте файл начальной страницы «index.htm». Откроется начальная страница сайта. Слева размещены три пункта меню сайта, оформленные как гиперссылки (ссылки) на другие страницы. С помощью гиперссылок просмотрите все три страницы сайта. При переходе со страницы на страницу пронаблюдайте эффект «исчезновения» одной из ссылок, который вы будете использовать при создании собственного сайта. Просмотрите каждый из трех файлов в MS Word (правый щелчок — Открыть с помощью — Microsoft Office Word). Обратите внимание на то, что по своей структуре страницы в основном повторяют друг друга. Самостоятельно определите, чем достигается эффект «исчезновения» ссылок.

Просмотр гипермедийного сайта-образца в режиме «оффлайн».

1. Откройте папку «Сайт-Образец». Двойным щелчком активизируйте файл начальной страницы гипермедийного сайта «index.htm». Откроется начальная страница другого сайта «Герменевтика». С помощью гиперссылок просмотрите все страницы сайта. Пронаблюдайте действие всех дополнительных ссылок. На страницах присутствуют не только тексты, но и фотографии, рисунки, а также ссылки на файлы разных типов. Такой сайт (публикацию, проект) мы будем называть гипермедийным.
2. Найдите небольшие изображения, оформленные как гиперссылки. В нашем случае они являются эскизами (thumbnails) крупных версий этих же изображений. При создании сайтов часто возникает необходимость публиковать полномасштабные изображения с большим количеством мелких деталей (географические карты, схемы, чертежи, репродукции произведений искусства). Непосредственное размещение таких изображений на страницах не всегда целесообразно, т.к. это может нарушить дизайн сайта и обязательно увеличит время загрузки страниц, а также приведет к возрастанию потребляемого трафика. Для устранения этих негативных явлений и применяют эскизы. При наличии эскизов пользователь получает возможность самостоятельно управлять открытием изображений в полномасштабном варианте. Графические эскизы могут быть заменены текстовыми фрагментами, оформленными как гиперссылки на скрытые графические изображения (найдите их).
3. Семь файлов страниц гипермедийного были созданы с помощью редактора MS Word. Просмотрите эти файлы в MS Word (правый щелчок — Открыть с помощью — Microsoft Word).
4. Найдите семь файлов семистраничного сайта с расширением «.htm», а также файлы других типов. Просмотрите вложенные папки «index.files», «1.files», «2.files» и т.д., каждая из которых обслуживает одну из гипермедийных страниц. Найдите в папках файлы с графической («.jpg», «.gif») и служебной («.xml», «.thmx») информацией.
5. Программное обеспечение Web-серверов предъявляет строгие требования к размещаемым файлам. Начальная страница обязательно должна быть выполнена в виде файла «index.htm» или «index.html». Имена файлов должны состоять только из цифр и латинских букв без пробелов и дефисов; прописные (заглавные) буквы категорически не рекомендуются. Для обеспечения нормальной работоспособности размещаемого сайта его файлы (особенно графические) должны иметь как можно меньший байтовый размер при сохранении приемлемого качества информационного содержимого.