Практическая работа. Средства создания и сопровождения сайта. Создание web-сайта с помощью Word

Тема: Средства создания и сопровождения сайта. Создание web-сайта с помощью Word.

Цель: Освоение приемов создания web-страниц и web-сайтов с помощью текстового процессора MS Word; оформление дизайна страницы; организация внутренних и внешних гиперссылок.

Теоретические сведения к практической работе

В качестве редакторов, упрощающих создание Web-сайтов, можно использовать приложения Microsoft Office – Word, Excel, PowerPoint и др. При этом пользователь может не знать язык HTML и иметь привычную среду для оформления документа – WYSIWYG (что вижу, то и получаю). Огромное количество людей, использующих Word в своей повседневной работе, становятся потенциальными разработчиками HTML-документов.

Создать Web-станицу в Word можно двумя способами: с помощью Мастера или шаблона либо преобразовав существующий документ Word в формат HTML. При этом Word сам генерирует тэги HTML, хотя и не оптимальным образом.

Первый способ создания HTML-документов достаточно прост – надо начать создание документа "с нуля" и только следовать советам Мастера и использовать те средства, которые имеются в меню программы.

Второй способ – преобразование существующего документа Word в тэги HTML при сохранении файла Word в формате HTML. Преобразование естественно приводит к тому, что какие-то элементы оформления документа будут утрачены или изменены.

Одной из отличительных особенностей HTML-документов является то, что сам документ содержит только текст, а все остальные объекты встраиваются в документ в момент его отображения Браузером с помощью специальных тэгов и хранятся отдельно. При сохранении HTML-файла в месте размещения документа Word создает на диске папку, в которую помещает сопутствующие ему графические элементы оформления. Например, при сохранении файла с рисунками frieds.htm Word создает папку frieds.files, в которой и разместит все рисунки.

В соответствии с этим при создании сайта – группы взаимосвязанных Web-страниц – рекомендуется помещать сайт в отдельную папку и при перемещении или публикации сайта строго сохранять всю внутреннюю структуру папок.

При подготовке публикации в Интернет материалов, созданных в Word, полезно знать особенности преобразования в формат HTML. Некоторые из них приводятся ниже.

Конвертирование элементов оформления в HTML

Элемент документа Word	Преобразование Word ® HTML
Размеры шрифтов	В Word изображаются шрифты от 9 до 36 пунктов. Размеры шрифтов HTML изменяются от 1 до 7 и служат Браузеру указанием на размер шрифта
Текстовые эффекты: приподнятый, с тенью, уплотненный и т.д.	Текстовые эффекты не сохраняются, но сам текст остается
Начертания: полужирный, курсив, подчеркивание	Начертания шрифта остаются, но некоторые виды подчеркивания преобразуются в сплошную линию
Анимация текста	Анимация не сохраняется, но текст остается. Для придания тексту анимационного эффекта можно использовать бегущую строку (панель "Web-компоненты")
Графика	Изображения преобразуются в формат GIF или JPEG, если они не были сохранены до этого в таких форматах. Линии преобразуются в горизонтальные линии
Графические объекты: автофигуры, фигурный текст, надписи и тени	Объекты преобразуются в файлы формата GIF. В среде редактирования Web-страницы можно вставить графические средства "Вставка" – "Рисунок"
Таблицы	Таблицы преобразуются, однако параметры, не поддерживаемые HTML, не сохраняются (например, цветные границы и границы переменой ширины)
Нумерация страниц и колонтитулы	Так как документ HTML считается одной Web-страницей, то понятие колонтитулов отсутствует, и нумерация страниц не сохраняется
Поля страниц и многоколонный текст	Чтобы сохранить разметку страницы, следует использовать таблицы
Стили	Определенные пользователем стили преобразуются в прямое форматирование, если оно поддерживается HTML

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

Другая возможность перехода в режим редактирования НТМL – это открыть документ в Браузере и вызвать меню "Вид" – "В виде HTML". По умолчанию редактирование выполняется в Блокноте.

Хотя Word отображает документ практически в том же виде, в каком он в дальнейшем будет находиться в Браузере, предварительный просмотр Web-документа можно выполнить, не покидая Word.

В меню "Вид" установлены способы отображения документа Word. При выборе "Web-документ" файл отображается так, как будет выглядеть в Браузере, установленном на компьютере. Через меню "Вид" можно вернуться к обычному режиму работы с документом.

Содержание работы:

Задание № 1. Создайте с помощью Word web-сайт «Мой сайт», от имени любого любимого персонажа сказки, мультфильма, фильма и т.п. состоящий из пяти страниц:

Страница 1 должна содержать:

·                   заголовок;

·                   гиперссылки: «Обо мне», «Моя семья», «Друзья», «Мои увлечения».

Страницы 2, 3, 4 и 5 должны содержать:

·                   заголовок;

·                   по два или более отформатированных абзаца текста (один абзац не менее трех полных строк);

·                   фотографии (минимум по одной на каждой странице).

·                   Ссылки на главную и следующую страницу в виде кнопок.

Сохраните каждую страницу присвоив ей расширение *.html: Файл – Экспорт – Изменить тип – Web-страница в одном файле.

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

Требования к сайту:

·                   заголовки и гиперссылки выравнивать по центру;

·                   для абзацев текста использовать различные варианты выравнивания (по ширине, по левому краю, по правому краю);

·                   использовать разные способы выравнивания фотографий;

·                   обязателен фоновый цвет страницы, фоновый рисунок страницы;

·                   на каждой странице должен быть заголовок окна;

·                   для заголовков использовать шрифт Time New Roman, для основного текста Arial (размеры подобрать самостоятельно).

·                   Придайте сайту законченный вид. Используйте вкладку Дизайн, темы

Задание № 2. Протестируйте работоспособность сайта в браузере (по возможность в двух различных). Протестируйте работоспособность сайта при выключенной графике. Для этого откройте в браузере свой документ html.