Лабораторная работа № 5.
«Создание Web документа с помощью редакторов гипертекста»
Цель работы: Получение практических навыков работы в изучение языка гипертекстовой разметки, подготовка материалов к их публикации в Интернет.
Теоретические сведения.
Для упрощения и автоматизации создания Web-страниц редактор FrontPage Express позволяет использовать мастера и шаблоны. Для этого надо создать новый документ командой Файл > Создать — на экране появится диалоговое окно Новая страница. Выбор в списке Шаблон или мастер любого варианта, кроме пункта Нормальная страница, приводит к использованию мастера или шаблона. При использовании мастера (Мастер персональных основных страниц или Мастер форм) программа задает ряд вопросов и на основании ответов формирует заготовку документа. Результат представляет собой скорее план страницы, чем законченный продукт, и от пользователя требуется наполнение созданных разделов конкретным содержимым.
Шаблоны (Форма обозрения или Форма подтверждения) представляют собой готовый документ «общего характера». В тех местах, где должен располагаться текст, соответствующий нуждам конкретного пользователя, вместо этого помещен текст, описывающий принципы заполнения соответствующего раздела. Этот текст заменяется в ходе редактирования документа. В начале документа-шаблона имеется комментарий (не отображаемый в обычном броузере), описывающий общие правила заполнения данного шаблона. Сохранение документа, сформированного на основе шаблона, не изменяет сам шаблон, который может использоваться многократно.
Публикация Web-документов
Публикация Web-узла (Web-страниц) состоит в размещении документов HTML и всех сопроводительных файлов (изображений, мультимедиа и прочего) на Web-сервере. Если оставить в стороне организационные вопросы (получение места на Web-сервере, оплата и другие), то остаются две основных проблемы.
Как подготовить документы Web-узла таким образом, чтобы перенос их на Web-сервер не привел к нарушению целостности структуры узла?
Как произвести копирование файлов на Web-сервер?
Первый вопрос возникает в том случае, если файлы на Web-сервере предполагается разместить в группе тематических каталогов. Он решается так: при работе над Web-документом необходимо воссоздать на своем компьютере структуру папок Web-узла и сразу же размещать документы в соответствующих папках. Во внутренних ссылках следует использовать только относительные адреса документов. Перенос файлов и папок на Web-сервер с сохранением структуры сохраняет работоспособность ссылок и корректность подключения вставных объектов (иллюстраций и мультимедиа).
При таком подходе облегчается также обновление Web-узла в целом или его отдельных файлов.Для копирования нужных документов на Web-сервер можно применять как передачу данных на съемном носителе, так и прямое копирование данных через Интернет. Последний способ полностью автоматизирован и поэтому более надежен.
Ход работы.
Исследовательская работа
Задание 1. Исследование методов создания
абзацного отступа в документах HTML
Язык HTML не содержит «официальных» средств для создания абзацных отступов. Все броузеры, предназначенные для вывода текста на экран компьютера, выводят текст без отступа, вставляя, пустую строку между отдельными абзацами. Создание абзацного отступа, таким образом, требует использования специальных приемов.
Запустите текстовый редактор (например, Блокнот) и начните создание документа HTML Введите теги структурных элементов и дайте документу заголовок, например Имитация абзацных отступов.
Введите небольшой абзац текста, который будет использоваться как эталон. Сохраните документ.
Откройте обозреватель Internet Explorer и откройте в нем созданный документ. Отрегулируйте ширину окна программы так, чтобы исследуемый абзац занимал несколько строк. Убедитесь, что он выводится без отступа.
Добавление пробелов. Вернитесь к редактированию документа. Разместите после эталонного абзаца горизонтальную линейку (тег <HR>). Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца несколько пробелов. Сохраните документ.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите на добавленный абзац. Объясните, почему создать абзацный отступ таким образом не удается.
Метод элемента списка. Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца тег <DD>. Сохраните документ.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ. Правильно ли используется код HTML в полученном документе? Можно ли рекомендовать такой метод создания абзацного отступа? Почему?
Метод неразрывных пробелов. Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца повторенную несколько раз комбинацию символов . Сохраните документ.
Примечание. Комбинации символов, начинающиеся со знака «&» (амперсанд) и заканчивающиеся точкой с запятой, служат в языке HTML для задания символов, которые отсутствуют на клавиатуре или не могут включаться в текст документа согласно спецификации языка HTML (например, «<»). Комбинация задает неразбивающий пробел.
9. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ. Можно ли рекомендовать такой метод создания абзацного отступа? Почему?
Метод предварительно отформатированного текста. Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линей ки.
Добавьте в начало скопированного абзаца тег <PRE>, задающий предвари тельно отформатированный текст, и несколько пробелов. В конце абзаца добавьте тег </PRE>. Сохраните документ.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ. Обратите внимание на способ обработки пробелов и символов конца строки в предварительно отформатированном тексте. В чем особенность используемого шрифта? Выскажите свое мнение об использовании этого метода создания абзацного отступа.
Метод невидимого изображения. Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца тег <IMG>, укажите используемый файл изображения и задайте отступ по горизонтали в 10 пикселов (HSPACE="10"). Файл изображения должен представлять собой картинку в формате GIF, состоящую из одного пиксела (1x1), заданного прозрачным цветом. Сохраните документ.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ.
Проанализируйте все использованные методы и выскажите свое мнение о принципиальной целесообразности их использования и о том, какой из них наиболее удобен.
Вы познакомились с ограничениями, имеющимися в языке HTML, и некоторыми приемами для их преодоления. Выяснили, что некоторые эффекты можно обеспечить путем некорректного или нестандартного применения элементов HTML. Также познакомились с возможностью ввода символов, отсутствующих на клавиатуре, с помощью специальных последовательностей кодов.
Контрольные вопросы.
Перечислить форматы графических файлов, применяемых для создания Web-страницы.
Понятие фотоморфизм.
Содержание отчета.
1. Название и цель работы.
2. Краткие сведения по теории и порядку выполнения работы.
3. Выводы по работе.