ЛАБОРАТОРНАЯ РАБОТА № 1
Тема: «Основы языка гипертекстовой разметки электронных web-документов»
Цель работы: приобретение начальных навыков разметки web-страниц.
Задание на лабораторную работу: изучить теоретические аспекты HTML и практические приемы создания электронных документов.
Содержание отчета
Тема, цель работы и индивидуальное задание.
Краткое описание этапов работы.
Распечатки разработанных текстовых и графических файлов.
Распечатку htm-кода разработанной веб-страницы.
Экранную копию веб-браузера с загруженной страницей.
Контрольные вопросы
Что такое HTML?
Какова структура HTML-кода веб-страниц?
Что означает тег «BODY»?
В каких случаях теги могут быть открывающими и закрывающими, а в каких случаях они не являются ни теми, ни другими?
Для чего нужны атрибуты тегов?
Как организовать гиперссылку в веб-документе?
Как организовать маркированный список веб-документе?
Методические указания для выполнения лабораторной работы
Основные теги языка HTML
Рис.1. Пример незаполненной web-страницы.
На Рис.1 можно видеть пустую web-страницу, у которой заполнен лишь заголовок окна, имеющий название «ПРИМЕР_1». Такую страницу можно получить с помощью запуска следующего html-файла:
<HTML>
<HEAD>
<TITLE> ПРИМЕР_1 </TITLE>
</HEAD>
</HTML>
На Рис.2. изображена web-страница, содержащая текст «Моя первая web-страница» с заголовком «ПРИМЕР_2».
Рис.2. Пример web-страницы с текстом.
Такую страницу можно получить с помощью запуска следующего html-файла:
<HTML>
<HEAD>
<TITLE> ПРИМЕР_2 </TITLE>
</HEAD>
<BODY>Моя первая web-страница </BODY>
</HTML>
На Рис.3. изображена web-страница, содержащая текст «Моя первая web-страница с цветным фоном и шрифтом», который набран красным цветом на желтом фоне с заголовком «ПРИМЕР_3».
Рис.3. Пример web-страницы с текстом и фоном.
Такую страницу можно получить с помощью запуска следующего html-файла:
<HTML>
<HEAD>
<TITLE> ПРИМЕР_3 </TITLE>
</HEAD>
<BODY BGCOLOR=#FFFF00 TEXT=#FF0000>
Моя первая web-страница c цветным шрифтом и фоном </BODY>
</HTML>
В таблице 1 представлены коды, с помощью которых можно работать с цветом. Экспериментируя с разными комбинациями символов, можно добиться различных оттенков. Для корректного отображения кодов цвета в разных браузерах, необходимо перед шестизначным цифровым кодом ставить знак #.
Таблица 1.
-
Цвет
Код
Белый
FFFFFF
Желтый
FFFF00
Синий
0000FF
Зеленый
00FF00
Фиолетовый
FF00FF
Красный
FF0000
Черный
000000
Кроме кодовых сочетаний цвет может определяться символьной константой. В Таблице 2 приведены некоторые стандартные значения таких констант.
Таблица 2. Стандартные константы HTML для работы с цветом
|
|
|
На Рис.4. изображена web-страница, содержащая текст различного размера, расположенный по центру окна и ссылки на файлы различных форматов; заголовок окна - «ПРИМЕР_4».
Рис.4. Пример web-страницы с текстом, фоном и гиперссылками.
Такую страницу можно получить с помощью запуска следующего html-файла:
<HTML>
<HEAD>
<TITLE> ПРИМЕР_4 </TITLE>
</HEAD>
<BODY BGCOLOR=#FFFF00 TEXT=#FF0000>
<H1><CENTER>Моя первая web-страница c цветным шрифтом и фоном и ссылками</CENTER></H1>
<CENTER><H1> СОДЕРЖАНИЕ: </H1>
<H2><A HREF=fio.html>Ф.И.О.</A> </H2>
<H2><A HREF=adress.html>Почтoвый адрес</A> </H2>
<H2><A HREF=эл_почта.doc>E-mail </A></H2>
<H2><A HREF=группа.doc>Группа </A></H2>
<H2><A HREF=Ris.bmp>Фамильный герб </A></H2>
</CENTER>
</BODY>
</HTML>
Далее в таблице 3 приведен список основных тэгов языка HTML.
Таблица 3.
Тэг |
Результат его выполнения |
<HTML>…</HTML> |
Определяет начало и конец HTML файла. |
<HEAD>…</HEAD> |
Определяет начало и конец заголовка HTML файла. |
<TITLE>…</TITLE> |
Название Web страницы |
<BODY>…</BODY> |
Определяет начало и конец основной части HTML файла |
<!...-> |
Комментарий |
<BR> |
Новая строка |
<P> |
Пустая строка |
<H1>…</H1> |
Самые большие буквы |
<H6>…</H6> |
Самые маленькие буквы |
<PRE>…</PRE> |
Выделение отформатированного текста |
<B>… </B> |
Жирный шрифт |
<HR> |
Горизонтальная линия |
<UL>…</UL> |
Начало и конец неупорядоченного списка |
<OL>…</OL> |
Начало и конец упорядоченного списка |
<LI> |
Перечисление злементов списка |
<TABLE>…</TABLE> |
Выделение таблицы |
<CAPTION |
> Название таблицы |
<TR>…</TR> |
Начало и конец описания строки таблицы |
<TH>…</TH> |
Жирный текст в таблице |
<TD>…</TD> |
Обычный текст в таблице |
<FONT SIZE=x> |
изменение размеров шрифта |
<I>… </I> |
Курсив |
<TT>…</TT> |
Машинописный шрифт |
<A HREF=»URL адрес»> Выделяемый текст</A> |
Связь с другой страницей на каком-либо сервере |
<A NAME=»имя отметки»> Выделяемый текст</A> |
Указывает на переход в текущей странице |
<A HREF=»# имя отметки»> Выделяемый текст</A> |
Локализирует место перехода |
<A HREF=»URL адрес # имя отметки»> Выделяемый текст </A> |
Указывает на переход на определенное место в каком-либо NTML документе |
Для того чтобы разместить создаваемую страницу на каком-либо фоне, кроме однотонного цветового поля, необходимо сначала разработать этот фон и сохранить его в графическом файле, который и задать затем при написании HTML-документа. На Рис.5 приведен пример подобной ситуации.
Рис.5. Пример web-страницы с текстом и тематическим фоном.
Такую страницу можно получить с помощью запуска следующего html-файла:
HTML><HEAD><TITLE>Электронный учебник</TITLE>
<BODY text=red background=fon.jpg>
<H1><CENTER>Белгородский университет потребительской кооперации</CENTER></H1>
<H1><CENTER>Кафедра информационных систем и технологий</CENTER></H1>
</BODY></HTML>
Параметр background=fon.jpg определяет, что графический файл fon.jpg будет тем фоном, на котором будет воспроизведено содержимое электронного документа.
На Рис.6 приведен пример окна, где фон является однородным цветовым полем, а рисунок размещен в виде самостоятельной информационной единицы экрана.
Рис.6. Пример web-страницы с текстом, однородным фоном, гиперссылкой и центрированным графическим объектом.
Такую страницу можно получить с помощью запуска следующего html-файла:
<HTML>
<BODY text=green bgcolor="moccasin">
<center><p><b>Магазин детских товаров</b></p></center>
<center><p>Все для детей от 3 лет до 7</p></center>
<center><p>Игрушки.Одежда.Детское питание</p></center>
<center><img src="title.bmp"></center>
<p><A HREF=эл_почта.doc>E-mail </A/p>
</BODY>
</HTML>
Содержание отчета
Тема, цель работы и индивидуальное задание.
Краткое описание этапов работы.
Контрольные вопросы
Что такое HTML?
Какова структура HTML-кода веб-страниц?
Что означает тег «BODY»?
В каких случаях теги могут быть открывающими и закрывающими, а в каких случаях они не являются ни теми, ни другими?
Для чего нужны атрибуты тегов?
Как организовать гиперссылку в веб-документе?
Как организовать маркированный список веб-документе?
ЛАБОРАТОРНАЯ РАБОТА № 2
Тема: «Публикации с помощью средств глобальной сети»
Цель работы: приобретение начальных навыков создания веб-страниц.
Задание на лабораторную работу: сформировать веб-страницу, содержащую следующую информацию:
название авторской телепрограммы,
ее логотип (графическое изображение, фирменный знак),
название телеканала и его логотип,
концепцию и формат телепрограммы;
сведения об авторе (возраст, фото, образование, творческие интересы, контактные телефоны).
Вышеуказанные пункты должны быть связаны с главной страницей с помощью гиперссылки на соответствующий файл.
Порядок выполнения работы
Выбрать индивидуальный вариант задания по согласованию с преподвателем и сформулировать креативные идеи для создания web-страницы.
Разработать файл, содержащий логотип авторской программы – графический файл, созданный в любом известном графическом редакторе – PAINT, COREL DRAW, 3D STUDIO и т.д.
Разработать файл, содержащий логотип телеканала – графический файл, созданный в любом известном графическом редакторе – PAINT, COREL DRAW, 3D STUDIO и т.д.
Разработать текстовый файл, содержащий концептуальные сведения о программе.
Разработать текстовый файл, содержащий сведения об авторе программы.
Создать web-страницу, осуществив в ней механизм доступа на основе гиперссылки, к каждому из ранее созданных файлов.
Сделать отчет по работе.
Содержание отчета
Тема, цель работы и индивидуальное задание.
Краткое описание этапов работы.
Распечатки разработанных текстовых и графических файлов.
Распечатку htm-кода разработанной веб-страницы.
Экранную копию веб-браузера с загруженной страницей.
ЛАБОРАТОРНАЯ РАБОТА № 3
ТЕМА: «Технология создания электронных слайд-фильмов»
ЦЕЛЬ: Приобретение практических навыков работы с пакетом прикладных программ PowerPoint
Задание на лабораторную работу:
Изучить основные элементы интерфейса программы Power Point 7.0, методы создания слайдов, режимы анимации и запуска презентации.
Методические указания для выполнения лабораторной работы
Используя современные информационные технологии можно подготовить красочные, профессионально оформленные презентации с демонстрацией их на экране компьютера в любое удобное время. Кроме того, существуют специальные проекционные аппараты, которые позволяют показывать на большом экране то, что выводится на монитор подключенного к аппарату компьютера.
Презентация, подготовленная с помощью специальной программы – процессора презентаций с целью демонстрации ее на компьютере, представляет собой электронный слайд- фильм. Такой электронный фильм состоит из отдельных изображений – слайдов. Слайд – это страница (экран) видеоматериалов, содержащих предназначенную для презентации информацию.
Электронные слайды удобны тем, что в их состав могут быть включены различные типы информации: текстовая, табличная, графическая и т.д. Обычно слайды оформляются сопровождением звуковых и визуальных эффектов. Например, анимация или звуковое сопровождение смены изображения – слайда.
К слайд-фильму необходимо относиться, как к документу особого формата. Пользователи уже привыкли иметь дело с самыми необычными документами. Тексты в формате Word, например, тоже могут содержать различные анимированные картинки, звуковое сопровождение или видеоролики. Однако, современные специализированные программные и компьютерные средства позволяют глобально расширить возможности достаточно полной и визуально эффектной подготовки представления товаров, услуг, функций фирмы и т. п. в виде электронных слайд-фильмов. Одной из программ, помогающих сформировать электронную презентацию, является процессор презентаций PowerPoint.
Элементы среды PowerPoint
Процессор презентаций PowerPoint превращает введенную пользователем текстовую или числовую информацию в профессионально выполненные слайды, наполненные диаграммами, таблицами, графическими иллюстрациями и пригодные для плодотворной работы с весьма требовательной современной аудиторией. Программа достаточно удобна, интуитивно понятна для пользователя и помогает ему на всех этапах подготовки презентации, подсказывая порядок действий или прямо руководя процессом создания слайдов. PowerPoint запрашивает всю необходимую текстовую и числовую информацию (ее можно вводить с клавиатуры или импортировать из других приложений), а также предоставляет широкий выбор готовых вариантов дизайна. В результате получается последовательность высококачественных графических образов – слайдов, которая ранее могла быть создана только профессиональным художником.
После завершения работы над презентацией пользователь может продемонстрировать созданный электронный фильм на экране монитора, вывести на бумагу слайды для раздачи на совещании, добавить к каждому слайду заметки докладчика, а также подготовить диапозитивы для демонстрации их на большом экране с помощью эпидиаскопа или проекционного аппарата.
Поскольку PowerPoint может работать с презентацией, содержащей значительное количество слайдов, он должен обеспечивать разные режимы их просмотра, уметь показывать презентацию в различных видах. Поэтому в PowerPoint последних версий поддерживаются следующие режимы:
режим просмотра отдельного файла (Вид слайдов);
режим просмотра текстового наполнения презентации в целом (Вид структуры);
режим просмотра всей последовательности слайдов презентации в виде миниатюрных копий (Вид сортировщика слайдов);
режим создания заметок докладчика во время демонстрации презентации (Вид страниц заметок);
режим демонстрации презентации в динамике (Режим демонстрации).
П
ри
первом запуске PowerPoint
пользователю предлагается ознакомиться
с кратким перечнем новых возможностей
этого приложения (рис. 1).
Рис 1. Функции PowerPoint.
При первоначальном формировании презентации необходимо выбрать функцию Пустая презентация. После этого появляется следующий диалог Создать слайд, в котором пользователь может выбрать схему компоновки слайда презентации. PowerPoint предлагает 24 различных варианта компоновочных схем, называемых авторазметками (рис. 2).
Рис 2. Авторазметки слайдов презентации.
После выбора параметра Пустая презентация и авторазметки титульного слайда PowerPoint устанавливается в режим слайдов и на экран выводится первый слайд. Переход в другой режим осуществляется с помощью пяти кнопок, расположенных в левом нижнем углу окна презентации (Рис. 3).
Рис 3. Режимы PowerPoint.
При создании новой презентации или редактировании ранее созданной окно презентации занимает большую часть основного окна PowerPoint. Для изменения его положения или размера используются стандартные кнопки и команды системного меню для основного окна PowerPoint.
Для сравнения двух презентаций и копирования графиков или текста из одной в другую удобно видеть их на экране одновременно. С этой целью необходимо открыть обе презентации, при этом окно последней открытой презентации закроет все, открытые ранее, однако с помощью меню Окно эти окна можно расположить в любом порядке.
Режим Вид слайдов позволяет видеть в каждый данный момент времени только один слайд презентации. Перейти к другому слайду можно одним из следующих способов:
нажатием клавиш PGDN – на слайд вперед, PGUP – на слайд назад;
нажатием кнопок Следующий слайд или Предыдущий слайд, расположенных внизу линии вертикального скроллинга;
перетаскиванием бегунка вертикального скроллинга вверх или вниз.
Встроенная справочная система PowerPoint очень подробна и проста в использовании. Она содержит информацию трех типов:
темы «Как ...» дают подробные пошаговые инструкции;
темы «Расскажи о ...» предоставляют базовую информацию и некоторые детали:
темы «Преодоление проблем» содержат сведения, помогающие определить причину проблем пользователя и устранить их.
Основные этапы формирования простой презентации
Формирование презентации предполагает поэтапное решение трех задач: определение содержания презентации, ввод этого содержания и выбор дизайна.
Этап определения содержания презентации выполняется перед началом работ по формированию презентации. Здесь специалист должен четко определить, что он хочет (какую информацию) представить на обозрение публики, в какой последовательности, в каком объеме и в какой форме.
Следующие два этапа могут решаться в любом порядке: ввод содержания презентации и выбор ее дизайна или наоборот – выбор дизайна, а затем ввод текстовой информации.
П
ростейший
путь одновременного решения обеих задач
– использование Мастера
автосодержания,
который предлагает на выбор несколько
шаблонов содержания презентации (рис.
4).
Рис. 4. Шаблоны презентаций.
Этот мастер также предлагает дизайны презентаций, которые, впрочем, можно всегда изменить на стадии Доводка презентации.
Следует заметить, что начинать создание презентации с выбора функции Шаблон в диалоговом окне PowerPoint пользователям, не имеющим опыта подобной работы, не рекомендуется.
Формирование текстового наполнения презентации удобнее всего делать в режиме структуры (кнопка Вид структуры). В этом режиме перед пользователем на экране монитора представляются все слайды презентации без оформления их какими – либо эффектами. Фрагмент такой презентации в виде структуры представлен на рисунке 5.
Рис 5. Презентация в режиме структуры.
В этом же режиме удобнее всего редактировать содержание презентации или производить частичную замену текста. Кроме того, немаловажную роль играет использование режима структуры при отработке текста презентации в целом.
Далеко не каждая тема может быть хорошо подана с помощью одного только текста. В некоторых случаях необходимы рисунки или диаграммы, в других гораздо более эффективным может оказаться подача информации в виде таблиц.
При создании нового слайда или при открытии пустой презентации PowerPoint раскрывает диалог Создать слайд (рис. 2). В этом диалоге PowerPoint предлагает различные варианты компоновочных схем – авторазметки слайдов (рис. 2). Некоторые схемы позволяют вводить только текст, другие – текст и области для вставки графиков, организационных диаграмм и таблиц. В отдельных авторазметках допускается совмещение всех вышеперечисленных элементов презентации.
Авторазметка слайда содержит особые области – местозаполнители, которые представляют собой обведенные пунктиром прямоугольные области с подсказками внутри, поясняющими и назначение. Подсказки содержат указания, как использовать данный местозаполнитель. Использование местозаполнителей по назначению уменьшает вероятность ошибочного ввода данных.
Авторазметки и местозаполнители являются ключевыми средствами создания презентации. После выбора определенной авторазметки PowerPoint выводит на экран все необходимые для дальнейшей работы средства, избавляя пользователя от поиска нужных команд или кнопок в различных меню.
К следующему этапу – вставка аннотаций и графических объектов – практически все готово, чтобы ввести последние штрихи в создаваемую презентацию. Вставка аннотаций (комментариев) для пояснения отдельных фрагментов излагаемого материала или освещения его специфики может существенно помочь аудитории в полном представлении презентуемого объекта. С этой целью используется кнопка Текст панели инструментов Рисование.
Кроме этого, здесь можно использовать панель инструментов Рисование для добавления графических элементов, сопровождающих текст или видеоматериал любого слайда. При вставке рисунков можно их формировать самостоятельно, используя допустимые в PowerPoint средства, а также применять богатую библиотеку рисунков – если пользователь испытывает затруднения в их создании.
Поскольку презентация хранится в PowerPoint в электронном виде, внесение изменений в слайды производится достаточно легко – также как редактирование текста в любом текстовом процессоре или обновление чисел электронной таблицы в процессоре электронных таблиц.
Независимо от того, как формировалась презентация – с применением Мастера автосодержания или созданием пустой презентации – PowerPoint позволяет в любой момент ввести некоторые изменения или детали, улучшающие, по его мнению, внешний вид презентации или уточняющие ее содержание. С этой целью удобнее всего представить сформированную презентацию в режиме Сортировщика слайдов (рис. 6).
Рис. 6. Презентация в режиме сортировщика слайдов.
Использование этого режима является наилучшим способом внесения каких–либо глобальных изменений, в том числе и смена порядка слайдов и исключение неудачных, поскольку вся презентация представляется на экране в виде уменьшенных пронумерованных копий слайдов.
Далее PowerPoint предоставляет пользователю возможность воспроизведения презентации на любом доступном средстве: бумаге, пленке или экране видеомонитора. В последнее время форма представления презентации в электронном виде – на экране видеомонитора – быстро обгоняет по популярности все остальные, даже использование фотографических слайдов. Электронные презентации отображают графические образы либо на экране компьютера, либо на большом экране с помощью специального проектора. Подключение элементов анимации – плавные переходы от одного слайда к другому, сопровождение звуковыми и видеоэлементами, интерактивный режим просмотра – все это позволяет и помогает менеджеру организации эффективно рекламировать тот или иной объект.
Дополнительные возможности PowerPoint
Несмотря на то, что PowerPoint является очень ценным программным продуктом сам по себе, он становится еще более мощным в сочетании со своими «партнерами» по комплекту Microsoft Office: Microsoft Word и Microsoft Excel.
В основе Microsoft Office лежит мощная технология, называемая OLE (Object Linking and Embedding – связывание и внедрение объектов), позволяющая совместно использовать информацию в различных приложениях путем естественного расширения возможностей отдельного приложения (программы). При перемещении объекта в среду другого приложения, средство OLE, называемое редактирование по месту (in–place editing), обеспечивает доступ пользователю ко всем меню, диалоговым окнам, панелям инструментов и процедурам «родительского» приложения – программы, в среде которой был выполнен импортированный объект (текст, таблица, рисунок).
Выполняется процедура «внедрения» обычными известными способами – копирование через буфер обмена с помощью соответствующих кнопок панелей инструментов – Копировать и Вставить или с использованием техники «перетащить и оставить». Если при этом необходимо сохранить объект в источнике, то при перетаскивании достаточно держать нажатой клавишу CTRL.
Основными возможностями по обмену данными при работе с PowerPoint являются следующие:
вставка текста из Word в PowerPoint;
внедрение слайда в документ Word;
передача диаграммы в Word;
внедрение презентации в Word;
связывание презентации PowerPoint с Word;
использование Word для форматирования и печати страниц заметок и выдач;
внедрение листа Excel в PowerPoint;
связывание листа Excel с PowerPoint;
демонстрация слайда или слайд-фильма PowerPoint в Excel;
отправка презентации с помощью Microsoft Mail;
отправка презентации с помощью Microsoft Exchange.
Пример формирования простой презентации
Запуск системы презентации Power Point 7.0 производится с помощью раскрывающихся окон меню Windows. Создание презентаций может производиться двумя способами:
• с помощью Мастера автосодержания (путем использования готовых образцов слайдов);
• вручную, без использования заготовок.
Ниже рассматривается методика создания слайдов вручную.