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

Практическая работа № 30

Тема: Средства создания сайта

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

Образовательные результаты, заявленные во ФГОС третьего поколения:

Студент должен

Уметь:

- создавать web-страницы с помощью текстового процессора MS Word,

- создавать web-страницы и web-сайты на языке HTML,

- оформлять дизайн страницы,

- организовывать внутренние и внешние гиперссылки,

- управлять форматами текста и шрифтами.

Знать:

- этапы создания web-страницы,

- основные элементы и структуру 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. Выполнить практическую  работу;

2.Оформить отчёт по практической  работе;

Обеспеченность занятия (средства обучения)

Основные источники: 

1.            Учебно-методическая литература:

·              Михеева Е.В. Практикум по информации: учеб. пособие. – М., 2004.

·              Михеева Е.В., Титова О.И. Информатика: учебник. – М., 2005.

·              Семакин И.Г., Хеннер Е.К. Информатика. Задачник-практикум 8–11 кл. (в 2 томах). – М., 2002.

·              Семакин И.Г., Хеннер Е.К. Информатика. Учебник 10-11 кл. – М., 2007.

·              Уваров В.М., Силакова Л.А., Красникова Н.Е. Практикум по основам информатики и вычислительной техники: учеб. пособие. – М., 2005.

·              Угринович Н.Д. и др. Практикум по информатике и информационным технологиям 10–11 кл. – М., 2002.

2.     Лист писчей бумаги формат А4 (210x297мм) с нанесенной ограничительной рамкой, отстоящей от левого края листа на 20мм и от остальных на 5мм со штампом основной надписи 15х185 мм (ГОСТ 2.104-2006).

3.     Ручка с чернилами черного цвета.

4.     Карандаш простой.

5.     Персональный компьютер, программа MS Word, интернет-браузер, программа БЛОКНОТ.

Вопросы для закрепления теоретического материала
к практической работе:

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

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

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

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

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

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

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

Инструкция по выполнению практической работы

Внимательно изучить раздаточный и краткий теоретический материал.

Изучить порядок выполнения задания.

Методика анализа результатов, полученных в ходе практической  работы

Контролем  является защита отчета по  практическому занятию.

Задания практической работы:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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