МЕТОДИЧЕСКИЕ УКАЗАНИЯ ПО ВЫПОЛНЕНИЮ ПРАКТИЧЕСКОЙ РАБОТЫ ПО ИНФОРМАТИКЕ - Тема: Средства создания и сопровождения сайта

МЕТОДИЧЕСКИЕ УКАЗАНИЯ ПО ВЫПОЛНЕНИЮ ПРАКТИЧЕСКОЙ РАБОТЫ ПО ИНФОРМАТИКЕ В СПО

Разработал преподаватель: Игнатьева Елена Сергеевна

Тема:

 Средства создания и сопровождения сайта

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

Образовательные результаты: понимание основ правовых аспектов использования компьютерных программ и прав доступа к глобальным информационным сервисам

Краткие теоретические и учебно-методические материалы по теме

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

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

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

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

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

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

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

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

Интернет - это сложная электронная информационная структура, представляющая собой глобальную сеть, которая позволяет связывать между собой компьютеры в любой точке земного шара.

WWW- World Wide Web («Всемирная паутина») - это общемировая гипертекстовая информационная система (является частью Интернета).

Web – страница - это отдельный комбинированный документ сети WWW, который может содержать текст, графику, анимацию, звуковые и другие объекты. Хранится в файле *.html.

Сайт (веб-сайт, ресурс) – это место в интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из веб-страниц, которые воспринимаются как единое целое.

Создание сайтов - составной процесс, состоящий из нескольких этапов:

1.      разработка дизайна,

2.      вёрстка,

3.      программирование,

4.      безопасность.

Сопровождение сайтов:

o    это техническая поддержка сайта;

o    помощь в обновлении контента;

o    внесение корректировок в работу ресурса.

Методы создания и сопровождения сайтов:

o   вручную на языкe HTML (в БЛОКНОТе);

o   c помощью редакторов сайтов (HEFS, DreamWeaver и др.);

o   c помощью Конструктора сайтов на основе готового шаблона (ucoz.ru, narod.ru и др.);

o   с помощью систем управления сайтов (Joomla, 1С Битрикс и др.).

Этапы создания WEB-страницы:

1. Разработка проекта (Постановка задачи);

·                     Главная тема страницы.

·                     Текстовое содержание (грамотный язык).

·                     Планировка размещения информации на странице (верстка).

·                     Графика (набор рисунков, анимации).

·                     Стиль дизайна (сочетания цветов, фоны и т. п.)

2. Алгоритм заполнения страницы.

3. Программирование.

Программа для WEB-страницы записывается на языке HTML в виде текстовых файлов в текстовом редакторе Блокнот. Эти файлы имеют название имя.html. Операторы (команды) языка HTML называются тегами. Общий вид записи тега: <Тег>Фрагмент страницы </Тег>

Базисные теги

<HTML> </HTML> - начало и конец файла

<TITLE> </TITLE> - имя документа (должно быть в заголовке)

<HEAD> </HEAD>- голова документа

<BODY></BODY> - тело документа

Атрибуты элемента определяют его свойства. Значение атрибута может быть заключено в одинарные или двойные кавычки. Порядок следования атрибутов в теге не важен. Атрибут действует от открывающего тега, в котором он задан, до закрывающего, или только внутри тега, если тег не имеет парного.

Тэги и их атрибуты

Задания практического занятия

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

Страница 1 должна содержать: заголовок; гиперссылки: «Обо мне», «Моя семья», «Друзья», «Мои увлечения».

Страницы 2, 3, 4 и 5 должны содержать: заголовок; по два или более отформатированных абзаца текста (один абзац не менее трех полных строк); фотографии (минимум по одной на каждой странице).

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

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

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

·         для абзацев текста использовать различные варианты выравнивания;

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

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

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

·         для заголовков использовать шрифт Arial, для основного текста –Verdana

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

Задание 3.Измените в настройках браузера шрифт по умолчанию на Courier New, размер 14 и убедиться, что это не повлияло на внешний вид страниц сайта.

Задание 4. Разместите созданный сайт на любом бесплатном хостинге. Проверьте работоспособность.

Задание 5. Проделать задания с 1 по 4, только сайт создайте с помощью языка HTML в БЛОКНОТЕ

Вопросы для закрепления теоретического материала к практическому занятию

1.   Что такое web-сайт?

2.   Что такое web-страница?

3.   Как создать web-страницу с помощью текстового редактора MS Word?

4.   Как в MS Word непосредственно отредактировать  HTML-код?

5.   Что такое WWW?

6.   Что включает в себя сопровождение сайта?

7.   Что такое тег (атрибуты тега)?

Сделать выводы и выполнить отчет в соответствии с Приложением 1.

Порядок выполнения отчета по практическому занятию

1. Изучить теоретический материал. Ответить на контрольные вопросы.

2. Оформить работу в соответствии с шаблоном. При оформлении использовать MS Office