Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-технологии. Учебно-методический комплекс дисциплины по направлению подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность», профиль
.pdf
Разрыв – открывает диалоговое окно для вставки новой строки без
создания нового абзаца. Опция Обычный разрыв строки – добавляет разрыв строк без сдвига текста, опция Очистить левое (пра-
вое) поле – добавляет разрыв строк таким образом, что если с левого
(правого) края страницы располагается изображение, то строка после
разрыва начнется
ниже изображения, опция Очистить оба поля –
добавляет разрыв строк таким образом, что строка после разрыва
начнется там, где поле страницы свободно (рис. 1).
Рисунок 1 – Окно Разрыв меню Вставка
При добавлении специальных символов при работе на вкладке
HTML программы MS FrontPage 2003 следует закодировать их специаль-
ной последовательностью, представленной в таблице 4.
Эти и другие символы можно ввести с помощью команды Символ
меню Вставка. При этом необходимо находится на вкладке Конструктор
основного окна.
Технология работы
Работа в программе Блокнот
1. Запустите Блокнот.
2. Добавьте заголовок первого уровня:
<h1> Этот небольшой сайт посвящен геометрии </h1>
3. В теле документа добавьте абзац, оформленный полужирным
шрифтом:
<p><b>Соотношения в прямоугольном треугольнике</b></p>
4. Дополните документ абзацем, оформленным курсивом:
<p><i>Теорема Пифагора</i></p>
5. Дополните документ абзацем с применением верхнего индекса:
<p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
31
6. Дополните документ абзацем, оформленным курсивом:
<p><i>Другие соотношения</i></p>
7. Дополните документ абзацем с применением шрифта Symbol:
<p>a=c sin <font face="Symbol">a</font>, b=c cos <font
face="Symbol">
a</font>, a=b tg <font face="Symbol">a</font></p>
8. Измените первый абзац, применив к нему форматирование, увели-
чивающее размер букв и изменяющее цвет шрифта:
<p><b>< font size = "+1" color="red">Соотношения в прямоуголь-
ном треугольнике</font></b></p>
9. Сохраните файл в Блокноте под именем text.htm и проверьте,
как теперь
выглядит документ в браузере.
10. Дополните документ абзацем с использованием специальных
символов:
<p> " Это предложение взято в кавычки ". </p>
<p> A ± B </p>
<p> Символ & не может быть помещен в текст непосредст-
венно </p>
11. Сохраните файл в Блокноте и проверьте, как теперь выглядит до-
кумент в браузере.
12. В любое место документа добавьте следующие комментарии:
<!-- Это комментарии -->
Работа в Microsoft FrontPage 2003
1. Используя вкладку Конструктор, перенесите данные из сохраненно-
го в рабочей папке файла text.htm в новый документ.
2. Измените шрифт содержания веб-страницы
на Arial Narrow.
3. Добавьте следующий текст и оформите его по образцу.
Интернет – это глобальная компьютерная сеть, в которой локальные, региональные и корпоративные сети соединены между собой многочисленными каналами передачи информации с невысокой
высокой пропу-
скной способностью.
4. Измените цвет добавленного текста на синий.
5. Ниже добавьте ссылку на адрес вашей электронной почты. В качест-
ве цвета гиперссылок документа используйте зеленый цвет.
32
Контрольные вопросы
1. Поясните назначение логического и физического форматирования.
2. Как оформить текст полужирным, курсивным, подчеркнутым начер-
танием?
3. Как создать неразрывную строку?
4. Каким образом осуществляется добавление комментариев в HTML-
документ?
5. Какая панель инструментов MS FrontPage 2003 используется для ре-
дактирования текстового фрагмента?
Лабораторная работа № 3
Создание списков в HTML
2 часа
Цель работы: получить представление о создании списков в HTML.
Задачи работы:
1) ознакомиться с тегами и атрибутами создания маркированных и
нумерованных списков;
2) ознакомиться с принципом создания вложенных списков.
Формируемые компетенции:
готовность к овладению основными методами, способами и средст-
вами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией
(ОК-12);
готовность к овладению перспективными методами библиотечно-
информационной деятельности на основе информационно-коммуникационных технологий (ПК-4).
В результате выполнения лабораторной работы студент должен:
знать:
принципы создания упорядоченных и неупорядоченных списков
в HTML (ОК-12, ПК-4);
уметь:
создавать упорядоченные и неупорядоченные списки в HTML
(ОК-12, ПК-4);
владеть:
навыками создания упорядоченных и неупорядоченных списков
в HTML (ОК-12, ПК-4).
33
Обеспечивающие средства: персональный компьютер, операционная
система Windows, Microsoft FrontPage 2003.
Задание: создать Web-страницы, содержащие различные типы списков.
Требования к отчету: итоги выполнения лабораторной работы пред-
ставить в виде html-документа и ответов на контрольные вопросы.
Теоретические сведения
В НТМL имеются следующие виды списков:
маркированный список (неупорядоченные) (Unordered Lists <UL>);
нумерованные списки (упорядоченные) (Ordered Lists <OL>);
список определений (Definition List <DL>).
Маркированные
списки
Пример: собрание гиперссылок на другие документы.
Записывается данный список с помощью тега <UL>, закрывать этот
тег обязательно. Внутри маркированного списка каждый элемент отмечается тегом <LI>.
Пример маркированного списка, соответствующий ниже приведенному HTML коду приведен на рис. 1.
Рисунок 1 – Пример маркированного списка
К устройствам ввода информации относятся:
<UL>
<LI> клавиатура</LI>
<LI> манипулятор типа мышь </LI>
34
<LI> сканер </LI>
<LI> световое перо </LI>
</UL>
Атрибут TYPE маркированного списка задает тип маркера:
<UL TYPE="DISK"> – сплошные маркеры;
<UL TYPE="СIRCLE"> – маркеры в виде окружностей;
<UL TYPE="SQUARE"> – сплошные квадратные маркеры.
Можно смешивать разные типы маркеров в одном списке.
Нумерованные списки
Пример: инструкция, оглавление книги.
Записывается данный список с помощью тега <OL>, закрывать этот
тег обязательно.
Внутри нумерованного списка каждый элемент
Пример нумерованного списка, соответствующий ниже приведенному HTML коду, приведен на рис. 2.
<OL>
<LI> Глава 1</LI>
<LI> Глава 2</LI>
<LI> Глава 3</LI>
<LI> Глава 4 </LI>
</OL>
отмечается тегом <LI>.
Рисунок 2 – Пример нумерованного списка
35
В таблице 1 представлены основные атрибуты нумерованных списков.
В таблице 2 представлены типы нумерации упорядоченных списков
в HTML для атрибута TYPE.
Таблица 1 – Основные атрибуты нумерованных списков
Атрибут Описание
START="число" Позволяет начать нумерацию с цифры,
отличной от 1
VALUE="число" Изменяет номер отдельного элемента списка
и тех, что следуют за ним
TYPE="тип нумерации" Задает тип нумерации упорядоченного списка
Таблица 2 – Типы нумерации упорядоченных списков в HTML
Тип нумерации Стиль Образец последовательности
А заглавные буквы A, B, C
а строчные буквы a, b, c
I заглавные римские цифры I, II, III
i строчные римские цифры i, ii, iii
1 арабские цифры 1, 2, 3
Стиль отдельного элемента списка можно изменить следующим
образом:
<OL >
<LI TYPE="А"> Заглавные буквы </LI>
<LI TYPE="I"> Заглавные римские цифры </LI>
<LI TYPE="i"> строчные римские цифры </LI>
<LI TYPE="1"> арабские цифры </LI>
<LI TYPE="a"> строчные буквы </LI>
</OL>
Использование атрибутов START и TYPE
Атрибут START устанавливает начальное значение счетчика, а атрибут TYPE назначает стиль нумерации. Следующий пример демонстрирует
одновременное использование данных атрибутов.
Пример:
<OL START="8" TYPE ="i" >
<LI> Это римское восемь
viii</LI>
</OL>
36
Список определений
Пример: словарные статьи, глоссарий.
Каждый элемент списка определений всегда состоит из двух частей.
В первой части элемента списка записывается определяемый термин,
во второй части – текст, раскрывающий значение термина.
Задаётся данный вид списка тегом <DL> </DL>. Пункты списка
определений размечаются тегом <DT>, а определения этих пунктов –
тегом <DD>.
При этом текст определяемого термина выводится
без отступа,
а следующее за ни определение – с отступом от левого края.
Пример списка определений, соответствующий ниже приведенному
HTML коду приведен на рис. 3.
<DL>
<DT> SGML
<DD> Метаязык, т. е. средство формального описания прикладных
языков разметки, предназначенных для кодирования структурированных
документов.
</DL>
Рисунок 3 – Пример списка определений
Создание списков в Microsoft FrontPage 2003
Для создания нумерованных и маркированных списков можно
использовать кнопки Нумерация и Маркеры на панели инструментов
Форматирование.
Для детальной настройки списков используется команда Список
меню Формат (рис. 4).
Вкладка Графические маркеры позволяет выбрать изображение
маркера. Для этого необходимо установить переключатель Задать рису-
нок и при нажатии на кнопку Обзор
перейти к файлу изображения.
Вкладка Обычные маркеры позволяет выбрать тип маркера. Вкладка Нумерация позволяет определить тип нумерации и начальный номер
37
в списке. Для организации вложенных списков необходимо выделить те
абзацы, которые будут представлять собой нижний уровень и два раза выполнить команду Увеличить отступ.
Для создания вложенных списков на всех вкладках имеется флажок
Включить свертываемые структуры, который организует список таким
образом, что щелчок левой кнопки мыши на элемент верхнего уровня рас
крывает или сворачивает список элементов нижнего уровня.
-
Работа в программе Блокнот
1. Запустите Блокнот и создайте файл test.htm.
2. В теле документа введите заголовок
<h2> Информационно-коммуникационные технологии в образовании </h2>
3. Дополните документ нумерованным списком
<ol>
Рисунок 4 – Окно Список
Технология работы
38
<li>Федеральный образовательный портал – http://www.ict.edu.ru
</li>
<li>Отраслевая система мониторинга и сертификации компьютерной
грамотности и ИКТ-компетентности – http://icttest.edu.ru </li>
<li>Проект «Пакет программного обеспечения для образовательных
учреждений России» – http://linux.armd.ru </li>
</ol>
4. Далее введите заголовок <h2> Конференции и выставки </h2>
5. Дополните документ маркированным списком
<ul>
<li>Конгресс конференций «Информационные технологии в образовании» – http://ito.edu.ru </li>
<li>Всероссийские научно-методические конференции «Телемати-
ка» – http://tm.ifmo.ru </li>
<li>Международные
конференции «Применение новых технологий
в образовании» – http://www.bytic.ru/ </li>
<li>Открытые Всероссийские конференции «Преподавание инфор-
мационных технологий в России» – http://www.it-education.ru </li>
</ul>
6. Просмотрите файл в браузере.
7. Измените тип номера, добавив в тег <ol> атрибут type, который
может принимать значения А, а, I, i, 1 – нумерация прописными и строчными буквами, прописными и строчными римскими цифрами, арабскими
цифрами (по умолчанию).
<ol type="I">
8.
9. Измените тип маркера, добавив в тег <ul> атрибут type, который
может принимать значения square, circle, disc – квадрат, окружность, круг
(по умолчанию).
10. <ul type="square">
11. Сохраните файл. Просмотрите его в браузере.
12. Отделите данную часть документа горизонтальной линией.
13. Добавьте на web-страницу словарь следующих компьютерных
терминов.
Аннотация – краткая характеристика документа, поясняющая его содержание, назначение
, форму, другие особенности.
39
Библиографический поиск – информационный поиск, осуществляемый в каталоге или картотеке на основании библиографических данных.
Библиотечная система – совокупность взаимодействующих библиотек, объединенных на определенных договорных условиях в целях более
полного удовлетворения запросов пользователей и эффективного использования библиотечно-библиографических ресурсов.
Информационная система – система, предназначенная для хранения,
обработки, поиска, распространения, передачи и
предоставления инфор-
мации.
Работа в Microsoft FrontPage 2003
1. Создайте web-страницу «Электронные библиотеки» с нумерован-
ным списком и вложенным маркированным списком.
2. В любом графическом редакторе создайте изображение, которое
будет использовано в качестве маркера. Создайте маркированный список
«Поисковые системы».
Контрольные вопросы
1. Как создать маркированный список на web-cтранице?
2. Какие типы маркеров можно
задать с помощью атрибута TYPE?
3. Какие теги используются для создания нумерованных списков?
4. Каким образом можно изменить стиль отдельного элемента списка?
5. Каким образом создаются вложенные списки в MS FrontPage 2003?
Лабораторная работа № 4
Работа с изображениями
4 часа
Цель работы: освоение основных приемов работы с графическими
изображениями на web-страницах.
Задачи работы:
1)
ознакомиться с тегом вставки графических изображений <IMG>
и его атрибутами;
2) овладеть практическими навыками редактирования изображений
в MS FrontPage 2003.
Обеспечивающие средства: персональный компьютер, операционная
система Windows, Microsoft FrontPage 2003.
40
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]