Поделиться
80. Средства создания и сопровождения сайта образовательной организации.doc
Практическая работа № 30
Тема работы: Средства создания и сопровождения сайта образовательной организации
Цель работы: освоить приемы создания web-страниц и web-сайтов на языке HTML.
Время выполнения: 2 часа.
Оснащение работы: персональный компьютер, программа БЛОКНОТ, интернет-браузер.
Порядок выполнения работы:
- ознакомиться с теоретическими положениями по данной теме;
- выполнить задания практической работы;
- сформулировать вывод;
- оформить отчет.
Краткий теоретический материал
Интернет - это сложная электронная информационная структура, представляющая собой глобальную сеть, которая позволяет связывать между собой компьютеры в любой точке земного шара.
WWW - World Wide Web («Всемирная паутина») - это общемировая гипертекстовая информационная система (является частью Интернета).
Web - страница - это отдельный комбинированный документ сети WWW, который может содержать текст, графику, анимацию, звуковые и другие объекты. Хранится в файле *.html.
Сайт (веб-сайт, ресурс) – это место в интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из веб-страниц, которые воспринимаются как единое целое.
Создание сайтов - составной процесс, состоящий из нескольких этапов:
1. разработка дизайна,
2. вёрстка,
3. программирование,
4. безопасность.
Сопровождение сайтов - это техническая поддержка сайта, помощь в обновлении контента, внесение корректировок в работу ресурса.
Методы создания и сопровождения сайтов:
- вручную на языкe HTML (в БЛОКНОТе);
- c помощью редакторов сайтов (HEFS, DreamWeaver и др.);
- c помощью Конструктора сайтов на основе готового шаблона (ucoz.ru, narod.ru и др.);
- с помощью систем управления сайтов (Joomla, 1С Битрикс и др.).
Этапы создания WEB-страницы
1. Разработка проекта (Постановка задачи):
· Главная тема страницы.
· Текстовое содержание (грамотный язык).
· Планировка размещения информации на странице (верстка).
· Графика (набор рисунков, анимации).
· Стиль дизайна (сочетания цветов, фоны и т. п.)
2. Алгоритм заполнения страницы.
3. Программирование.
Программа для WEB-страницы записывается на языке HTML в виде текстовых файлов в текстовом редакторе Блокнот.
Эти файлы имеют название имя.html
Операторы (команды) языка HTML называются тегами. Общий вид записи тега:
<Тег>Фрагмент страницы </Тег>
Базисные теги:
<HTML> </HTML> - начало и конец файла
<TITLE> </TITLE> - имя документа (должно быть в заголовке)
<HEAD> </HEAD>- голова документа
<BODY></BODY> - тело документа
Пример программы:
<HTML>
<HEAD>
<title> Моя страница </title>
</HEAD>
<BODY>
Содержимое страницы
</BODY>
</HTML>
Заголовки различных уровней:
<H1>Заголовок
первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<H3>Заголовок третьего уровня</H3>
<H4>Заголовок четвертого уровня</H4>
<H5>Заголовок пятого уровня</H5>
<H6>Заголовок шестого уровня</H6>
Атрибуты. Атрибуты элемента определяют его свойства. Значение атрибута может быть заключено в одинарные или двойные кавычки. Порядок следования атрибутов в теге не важен. Атрибут действует от открывающего тега, в котором он задан, до закрывающего, или только внутри тега, если тег не имеет парного.
Тэги и их атрибуты.
|
Атрибут |
Действие |
|
<FONT COLOR=”цвет” size=“число от 1 до 7” FACE=“шрифт”> |
Меняет цвет, Размер, гарнитуру шрифта текста |
|
<BODY TEXT=”color” BGCOLOR="цвет”> |
Меняет цвет всего текста Цвет фона страницы |
|
<BODY BACKGROUND="URL"> |
Добавляет фоновую картинку (графический файл формата *.jpg, *.gif) |
|
<IMG SRC=”файл” ALIGN=”значение”> |
вставка графического изображения |
<HR>
Форматирование шрифта:
<B>Жирный</B>
<I>Курсив</I>
<U>Подчеркнутый</U>
<B><I><U>Жирный подчеркнутый
курсив</B></I></U>
<TT>Равноширинный</TT>
Выделение:
<EM>Выделение</EM>
<STRONG>Усиленное выделение</STRONG>
<HR>
Нумерованный список:
<OL>
<LI>Первый элемент списка</LI>
<LI>Второй элемент списка</LI>
<LI>Третий элемент списка</LI>
</OL>
Ненумерованный список:
<UL>
<LI>Первый элемент списка</LI>
<LI>Второй элемент списка</LI>
<LI>Третий элемент списка</LI>
</UL>
Список определений:
<DL>
<DT>ТЕРМИН 1</DT>
<DD>Пояснение к термину 1</DD>
<DT>ТЕРМИН 2</DT>
<DD>Пояснение к термину 2</DD>
<DT>ТЕРМИН 3</DT>
<DD>Пояснение к термину 3</DD>
</DL>
Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок). Цвет на Web-странице задают либо его названием, либо числовым шести разрядным шестнадцатеричным кодом #RRGGBB (первые два разряда задают интенсивность красного цвета, вторые – зеленого и третьи – синего).
Значение яркости цвета может меняться от минимальной 00 до максимальной FF. В таблице приведены примеры некоторых цветов:
|
Цвет |
Код |
Название |
|
|
Цвет |
Код |
Название |
|
|
черный |
#000000 |
black |
ч |
фиолетовый |
#FF00FF |
magenta |
ф |
|
|
белый |
#FFFFFF |
white |
б |
бирюзовый |
#00FFFF |
cyan |
б |
|
|
красный |
#FF0000 |
red |
к |
желтый |
#FFFF00 |
yellow |
ж |
|
|
зеленый |
#00FF00 |
lime |
з |
золотой |
#FFD800 |
gold |
з |
|
|
синий |
#0000FF |
blue |
с |
оранжевый |
#FFA500 |
orange |
о |
|
|
серый |
#808080 |
gray |
с |
коричневый |
#A82828 |
brown |
к |
Основную цветовую схему Web-страницы можно задать в тэге <BODY> с помощью атрибутов:
|
Цвет фона |
BGCOLOR="#RRGGBB" |
|
Текстура фона |
BACKGROUND="file_name" |
|
Цвет текста |
TEXT="#RRGGBB" |
|
Цвет текста ссылки |
LINK="#RRGGBB" |
|
Цвет текста активной ссылки |
ALINK="#RRGGBB" |
|
Цвет текста просмотренной ссылки |
VLINK="#RRGGBB" |
При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным тоном фонового рисунка.
Чтобы текст хорошо читался, цвета на странице подбирают контрастирующие по яркости: пастельный фон - темный текст, или темный фон - светлый текст. Нежелательны буквы белого цвета - они могут оказаться невидимыми при печати страницы на принтере.
Для оформления страницы можно использовать следующую цветовую схему: (после <BODY>
<BODY BGCOLOR="#FFFFCC" BACKGROUND="fon.png" TEXT="#993300" LINK="#00FF00" ALINK="#FF0000" VLINK="#00FF00"> (Сохранить файл и Обновить страничку)
Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG и PNG.
Изображения помещаются на Web-страницу тэгом IMG с атрибутом SRC, сообщающим браузеру имя и местоположение графического файла.
<IMG SRC="image_name">
Если рядом с изображением не должно быть текста, его размещают внутри отдельного абзаца. Выравнивание рисунка по горизонтали в этом случае задают в тэге <P>. Размеры изображения (в пикселах) можно задать с помощью атрибутов WIDTH и HEIGHT. К изображению атрибутом ALT можно добавить название, которое появляется на экран или вместо иллюстрации (если по какой - либо причине графика не выводится в окне браузера), или в качестве всплывающий строки, при указании на рисунок мышью.
Открыть. Вставить в начале страницы картинку.
<P ALIGN="center"><IMG SRC="c:\Мои документы\bscap0.jpg" WIDTH="515" HEIGHT="240" ALT="Просто картинка"></P>
Атрибут ALIGN выравнивает текст по верхнему краю, середине или нижнему краю изображения, справа или слева от него с помощью значений: top, bottom, middle, left или right.
4. Форматирование текста.
Для выделения фрагментов текста используется тэг <FONT>. Атрибут FACE определяет гарнитуру шрифта, атрибут COLOR – цвет и атрибут SIZE - размер символов.
Выравнивание текста по горизонтали задает атрибут ALIGN. Его возможные значения: left - выравнивание по левому краю center – по центру и right - по правому краю.
Выравнивание можно добавлять к тэгам, задающим заголовки, абзацы, или размещающим информацию в таблице. Выровнять по центру заголовок страницы. HSPACE, VSPACE - горизонтальный и вертикальный отступы между картинкой и текстом.
Введем заголовки различных уровней.
<H1 ALIGN="center"><FONT COLOR="#FF6600">А это - заголовок нашей странички.</FONT></H1>
<H2 ALIGN="center"><FONT COLOR="#FF6622">А это - подзаголовок нашей странички.</FONT></H2> (Сохранить файл и Обновить страничку)
Выделим часть текста более крупным шрифтом и цветом и определим выравнивание
<P ALIGN="left"><FONT SIZE="6" COLOR="#FF0066" FACE="Arial" > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по левому краю.</FONT></P>
<P ALIGN="right"><FONT SIZE="5" COLOR="#FF0000" FACE="Times New Roman" > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по правому краю.</FONT></P>
<P ALIGN="center"><FONT SIZE="4" COLOR="#FF0011" FACE="Arial"> Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по центру.</FONT></P> (Сохранить файл и Обновить страничку)
Различные виды гиперссылок. Связать Web-страницу с другими документами можно с помощью универсального тэга <A>, и его атрибута HREF, указывающим в каком файле хранится вызываемый ресурс.
<A HREF="file_name">Указатель ссылки</A>
file_name – путь к файлу или его URL-адрес в Интернете. Если вызываемый документ размещается в той же папке, что и Web-страница, то можно указывать только имя файла.
Указатель ссылки в окне браузера выделяется подчеркиванием и особым цветом. При указании на него мышью, ее курсор превращается в значок «рука». Щелчок мыши по указателю, вызывает переход на документ, указанный в гиперссылке.
Используем различные значения атрибута HREF для реализации различных реакций браузера:
<A HREF="index1.htm">Моя вторая страничка</A> (Сохранить файл и Обновить страничку)
А теперь с оформлением выравнивания и шрифтов Исправляем предыдущую запись.
<A HREF="index1.htm"><P ALIGN="center"><FONT SIZE="4" COLOR="#FFaa11" FACE="Arial"> Моя вторая страничка</FONT></P></A> (Сохранить файл и Обновить страничку)
5. Создадим вторую страничку.
Для этого откроем Блокнот еще раз. И наберем в нем следующий текст.
<HTML>
<HEAD>
<TITLE>Моя втораЯ страница</TITLE>
</HEAD>
<BODY>
<BODY BGCOLOR="#FF00CC" BACKGROUND="fon.png" TEXT="#993300" LINK="#00FF00" ALINK="#FF0000" VLINK="#00FF00">
<А HREF="index.htm"><P ALIGN="center"><FONT SIZE="4" COLOR="#FFaa11" FACE="Arial">Моя первая страничка</A>
</BODY>
</HTML>
В качестве редакторов, упрощающих создание 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. Некоторые из них приводятся ниже.
Конвертирование элементов оформления в HTM:
|
Элемент документа 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. Создайте с помощью языка HTML в БЛОКНОТЕ web-сайт «Мой сайт», состоящий из пяти страниц:
Страница 1 должна содержать:
· заголовок;
· гиперссылки: «Обо мне», «Моя семья», «Друзья», «Мои увлечения».
Страницы 2, 3, 4 и 5 должны содержать:
· заголовок;
· по два или более отформатированных абзаца текста (один абзац не менее трех полных строк);
· фотографии (минимум по одной на каждой странице).
Сайт должен содержать информацию о вас, а также ваших родственниках, друзьях и т.п.
Требования к сайту:
· заголовки и гиперссылки выравнивать по центру;
· для абзацев текста использовать различные варианты выравнивания (по ширине, по левому краю, по правому краю);
· использовать разные способы выравнивания фотографий;
· обязателен фоновый цвет страницы;
· на каждой странице должен быть заголовок окна;
· для заголовков использовать шрифт Time New Roman, для основного текста – Arial (размеры подобрать самостоятельно).
Задание 2. Протестируйте работоспособность сайта в браузере (по возможность в двух различных). Протестируйте работоспособность сайта при выключенной графике.
Задание 3. Измените в настройках браузера шрифт по умолчанию на Courier New, размер 14 и убедиться, что это не повлияет на внешний вид страниц сайта.
Задание 4. Разместите созданный сайт на любом бесплатном хостинге. Проверьте работоспособность.
Задание 5. Создайте с помощью текстового процессора MS Word web-сайт «Мой сайт», состоящий из пяти страниц:
Страница 1 должна содержать:
· заголовок;
· гиперссылки: «Обо мне», «Моя семья», «Друзья», «Мои увлечения».
Страницы 2, 3, 4 и 5 должны содержать:
· заголовок;
· по два или более отформатированных абзаца текста (один абзац не менее трех полных строк);
· фотографии (минимум по одной на каждой странице).
Сайт должен содержать информацию о вас, а также ваших родственниках, друзьях и т.п.
Требования к сайту:
заголовки и гиперссылки выравнивать по центру;
· для абзацев текста использовать различные варианты выравнивания (по ширине, по левому краю, по правому краю);
· использовать разные способы выравнивания фотографий;
· обязателен фоновый цвет страницы;
· на каждой странице должен быть заголовок окна;
· для заголовков использовать шрифт Arial, для основного текста – Verdana (размеры подобрать самостоятельно).
Задание 6. Протестируйте работоспособность сайта в браузере (по возможность в двух различных). Протестируйте работоспособность сайта при выключенной графике.
Задание 7. Измените в настройках браузера шрифт по умолчанию на Courier New, размер 14 и убедиться, что это не повлияло на внешний вид страниц сайта.
Задание 8. Разместите созданный сайт на любом бесплатном хостинге. Проверьте работоспособность.
Результат деятельности: Отчет по практической работе с выполненными заданиями 1-8.
Контрольные вопросы:
1. Что такое WWW?
2. Что такое web-страница?
3. Что такое сайт?
4. Что включает в себя сопровождение сайта?
5. Что такое тег (атрибуты тега)?
6. Этапы создания web-страницы.
7. Как создать web-страницу с помощью текстового редактора MS Word?
8. Как в MS Word непосредственно отредактировать HTML-код?
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
