ОПИСАНИЯ ЛАБОРАТОРНЫХ РАБОТ

Лабораторная работа 1 Базовые элементы языка и структура HTML-документа

2 часа

Цель работы: получить представление о базовых элементах языка и структуре HTML-документа.

Задачи работы:

  • 1) Ознакомиться с тегами, определяющими структуру HTML-документа.
  • 2) Ознакомиться с интерфейсом программы MS FrontPage 2003.
  • 3) Овладеть навыками создания гиперссылок.

Формируемые компетенции:

  • • готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12);
  • • готовность к овладению перспективными методами библиотечноинформационной деятельности на основе информационно-коммуникационных технологий (ПК-4).

В результате выполнения лабораторной работы студент должен: знать:

• базовые конструкции гипертекстового языка разметки (ОК-12);

уметь:

• использовать базовые конструкции гипертекстового языка разметки в своей учебной и профессиональной деятельности (ПК-4);

владеть:

• навыками создания гиперссылок (ПК-4).

Обеспечивающие средства1, персональный компьютер, операционная система Windows, Microsoft FrontPage 2003.

Задание: создать простейшие HTML-страницы средствами текстового редактора Блокнот и HTML-редактора MS FrontPage 2003.

Требования к отчету: итоги выполнения лабораторной работы представить в виде HTML-документа и ответов на контрольные вопросы.

Теоретические сведения

Элемент - это конструкция языка HTML, предписывающая способ интерпретации помещенных внутри нее данных.

Элемент разметки или оформления, входящий в формат HTML, называется тег.

HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки (”<" и ">").

Любой тег имеет общий вид:

<имя> область действия тега Теги определяют границы действия элементов.

Атрибут - параметр или свойство элемента.

Запись атрибута в общем виде:

имяАтрибута-'значение"

Все атрибуты записываются внутри стартового тега.

Запись стартового тега с атрибутом в общем виде:

<тег имяАтрибута=”значение">

Атрибуты внутри стартового тега разделяются пробелами. Порядок записи атрибутов в теге значения не имеет. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе URL (Universe Resource Locator, унифицированный указатель ресурса), других документов в качестве значения атрибута HREF.

Теги могут вкладываются в друг друга иерархически. Допустимо вложение вида

<тег 1 >

Действие вложенных тегов объединяются.

Рассмотрим структуру HTML-документа.

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

Далее - между тегами и - следует головная часть документа, внутри которой, между тегами и , находится название документа. Название выводится в заголовке окна браузера. Как правило, оно предлагается в качестве имени файла при сохранении HTML-документа. Между тегами и помещается основная часть документа, так называемое тело документа.

Создание гиперссылок

Одним из основных элементов HTML-документа является гиперссылка, с помощью которой можно переходить от одного документа к другому или к отдельному элементу (закладке) на той же или на другой странице.

Для создания гиперссылки служит тег вида:

<А НКЕР="иКЬ_документа" >текст ссылки

Тег <А> имеет обязательный атрибут HREF, в качестве значения которого используется адрес документа (URL).

Адрес ссылки может быть как абсолютным, так и относительным.

Относительные ссылки построены относительно текущего документа. Подобную адресацию целесообразно использовать для связи страниц на локальном веб-узле, так как при перемещении группы страниц не придется изменять все адреса URL, если страницы расположены одинаково по отношению друг к другу.

Примером относительных адресов URL могут служить следующие записи:

text.htm

ХУеЬ-технологииЛеззоп.Ьйп

В первом случае относительный адрес URL содержит только имя файла и указывает на файл в папке, в которой расположена текущая страница.

Во втором - адрес URL указывает на файл, который расположен на более низком уровне структуры папок. Так, если текущей страницей является файл index.htm, то браузер предполагает, что папка «Web-технологии» расположена в той же папке, что и файл «index.htm». Следовательно, браузер ищет файл «lesson.htm» в этой папке.

Для указания файла (test.htm), находящегося в папке, расположенной на один уровень выше по отношению к папке, в которой расположен текущий файл, необходимо использовать следующую запись:

../test.htm

Интерфейс программы Microsoft FrontPage 2003

Интерфейс программы состоит из стандартных для различных Windows-приложений частей (рис. 1).

Интерфейс программы Microsoft FrontPage 2003

Рисунок 1 - Интерфейс программы Microsoft FrontPage 2003

Строка меню (рис. 2) имеет стандартный для большинства Windows-приложений вид и предлагает доступ к основным командам и настройкам программы.

Файл Правка Вид Вставка Формат Сервис Таблица Данные Рамки Окно Справка

Рисунок 2 - Строка меню

Панель инструментов (рис. 3) состоит из ряда частей. Содержимое панели пользователь может выбирать с помощью меню Вид.

d & 1.....dkUJS...# 1 * J ? I ? 1

it

Рисунок 3 — Панель инструментов

Основное окно программы (рис. 4) содержит четыре вкладки: Конструктор, С разделением, Код, Просмотр.

? Конструктор | В С

разделением

ЕЗКод Q Просмотр

Рисунок 4 - Основное окно программы

Вкладка Конструктор позволяет работать с HTML-документом как с обычным текстовым файлом. В этом случае программа автоматически расставляет все необходимые теги в документе, которые в этом режиме не видны на экране.

Вкладка С разделением предназначена для одновременной работы с макетом страницы и кодом. В этом представлении экран разделен на две части: область кода и область конструктора. При выборе элементов в одной области другая область прокручивается и в ней идентифицируется соответствующий элемент.

Можно работать как в области кода, так и в области конструктора. Если редактируется HTML-код в области кода, то следует обновить страницу (нажать клавишу F5), чтобы увидеть измененную страницу в области конструктора.

При внесении изменений в области конструктора код автоматически обновляется в области кода, поэтому в обновлении необходимости не возникает.

Вкладка Код предназначена для просмотра и редактирования исходного кода HTML-документа. Это представление удобно в том случае, если необходимо много места для написания или редактирования кода, например, если набирается большой фрагмент кода для сложной таблицы.

Вкладка Просмотр предоставляет возможность просмотра созданного HTML-документа с помощью встроенного web-браузера.

Наличие четырех вкладок дает возможность пользователю работать с HTML-документом как с обычным текстом и использовать все возможности его редактирования: изменение параметров редактирования текста, его размещения на странице, добавление таблиц, изображений и т. д.

Создание страницы в Microsoft FrontPage

Для создания нового файла можно воспользоваться кнопкой Создание новой обычной страницы на панели инструментов или командой Создать меню Файл. В первом случае будет создан документ со следующим кодом HTML (рис. 5). Как видно из рисунка, теги, определяющие структуру HTML-документа, сгенерировались автоматически.

При использовании меню Файл пользователю будет предложено выбрать один из примеров, на основе которого будет создан новый документ.

Основные параметры созданной страницы изменяются с помощью команды Свойства меню Файл. Эта команда доступна для вызова, если пользователь находится на вкладке Конструктор. При вызове этой команды появляется окно Свойства страницы (рис. 6).

HTML-код страницы

Рисунок 5 - HTML-код страницы

Окно Свойства страницы

Рисунок 6 - Окно Свойства страницы

На вкладке Общие пользователь может ввести название документа, которое располагается между тегами и и его местоположение (Базовое расположение).

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

Вкладка Форматирование (рис. 7) позволяет пользователю определять цвет фона (Фон) и текста (Текст), выбирать фоновое изображение (Фоновый рисунок), а также цвета активных (Активная ссылка), посещенных (Просмотренная ссылка) и непосещенных ссылок (Гиперссылка).

— Вкладка Форматирование окна Свойства страницы

Рисунок 7 — Вкладка Форматирование окна Свойства страницы

С помощью вкладки Дополнительно (рис. 8) можно изменить отступы от границ документа.

Вкладка Другие (рис. 9) предназначена для определения служебных meta-тегов и задания из значений.

Вкладка Дополнительно окна Свойства страницы

Рисунок 8 - Вкладка Дополнительно окна Свойства страницы

Вкладка Другие окна Свойства страницы

Рисунок 9 - Вкладка Другие окна Свойства страницы

Вкладка Язык (рис. 10) позволяет задать кодировку, с помощью которой следует просматривать содержимое документа.

Свойства страницы

ОК | | Отмена

Рисунок 10 - Вкладка Язык окна Свойства страницы

После сохранения изменений параметров HTML-документа соответствующим образом изменяется и код документа, что можно наблюдать на вкладке HTML.

Создание гиперссылок в Microsoft FrontPage 2003

Чтобы создать ссылку, отметьте объект, который вы хотите включить в ссылку, после чего щелкните на кнопке Гиперссылка панели инструментов или активизируйте команду Гиперссылка меню Вставка. Откроется диалоговое окно Создать гиперссылку (рис. 11).

Окно Добавление гиперссылки

Рисунок 11 - Окно Добавление гиперссылки

В этом окне можно задавать гиперссылку:

  • • на страницу web-сайта, который открыт в данный момент в MS FrontPage (для этого нужно выбрать ее из списка);
  • • на внешний web-сервер, заполнив строку URL самостоятельно;
  • • на адрес электронной почты, используя кнопку;
  • • на конкретное место документа. Для этого в определенном месте страницы создается закладка', выделяется текст, выполняется команда Вставка - Закладка, в появившемся диалоговом окне вводится имя закладки.

Технология работы

Работа в программе Блокнот

  • 1. Запустите Блокнот.
  • 2. Введите:

Пример HTML-документа

Web-технологии

  • 3. Сохраните документ под именем index.htm в своей рабочей папке.
  • 4. Просмотрите сохраненный документ в браузере Internet Explorer.

При открытии в браузере исходный документ будет иметь следующий вид (рис. 12).

Пример простейшего HTML-документа

Рисунок 12 - Пример простейшего HTML-документа

Мы видим, что текст, набранный нами между тегами и , отобразился в заголовке окна, а то, что написано внутри , - в самом окне браузера.

5. Рассмотрим пример использования абсолютных ссылок в HTML-документе. Введите:

Создание ссылок

6. Сохраните документ под именем index.htm в своей рабочей папке и просмотрите сохраненный документ в браузере Internet Explorer.

Работа в Microsoft FrontPage 2003

  • 1. Создайте новый документ в MS FrontPage, используя в качестве исходного варианта Создание новой обычной страницы.
  • 2. В качестве названия введите «Новый Документ».
  • 3. Задайте остальные параметры созданной страницы:

отступы от границ по 2 см;

цвет фона, текста;

кодировку - кириллица.

4. Переключитесь на вкладку Конструктор и введите следующий текст

Библиотека - это учреждение, организующее сбор, хранение, общественное пользование произведениями печати. Библиотеки получили развитие

с XV века, после изобретения книгопечатания. В XIX веке были организованы публичные библиотеки. В России монастырские библиотеки появились

в XI-XII веках, первые светские - в XVIII веке. Первая крупная публичная библиотека открыта в Санкт-Петербурге в 1814 году.

5. В тексте создайте внешнюю гиперссылку на Государственную публичную научно-техническую библиотеку России http://ellib.gpntb.ru

  • 6. Переключитесь на вкладку Код и, проанализировав HTML-теги, выделите те, которые были добавлены HTML-редактором при установке параметров страницы.
  • 7. Используя их, создайте аналогичный документ в программе Блокнот.

Обратите внимание, что добавленный текст должен располагаться между тегами .

Контрольные вопросы

  • 1. Что значит тег?
  • 2. Какова структура HTML-документа?
  • 3. Опишите назначение тега ?</li> <li>4. Как добавить гиперссылку в документ HTML?</li> <li>5. Какие вкладки содержит окно программы Microsoft FrontPage 2003? Поясните их назначение.</li> </ul> <p><b>Лабораторная работа № 2</b></p> <p><b>Форматирование текста</b></p> <p><i>4 часа</i></p> <p><i>Цель работы:</i> овладение основными приемами размещения и редактирования текстовых объектов на страницах сайта.</p> <p><i>Задачи работы:</i></p> <ul> <li>1) ознакомиться с тегами логического и физического форматирования текста;</li> <li>2) ознакомиться с тегами управления разрывами и переноса строк;</li> <li>3) ознакомиться с тегами добавления комментариев, специальных символов.</li> </ul> <p><i>Формируемые компетенции:</i></p> <ul> <li>• готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12);</li> <li>• готовность к овладению перспективными методами библиотечноинформационной деятельности на основе информационно-коммуникационных технологий (ПК-4).</li> </ul> <p><i>В результате выполнения лабораторной работы студент должен: знать:</i></p> <ul> <li>• теги физического и логического форматирования текста (ПК-4);</li> <li>• теги управления разрывами и переноса строк, добавления комментариев, специальных символов (ОК-12, ПК-4);</li> </ul> <p><i>уметь:</i></p> <p>• форматировать HTML-документы (ОК-12, ПК-4);</p> <p><i>владеть:</i></p> <p>• основными приемами размещения и редактирования текстовых объектов на страницах сайта (ПК-4).</p> <p><i>Обеспечивающие средства-,</i> персональный компьютер, операционная система Windows, Microsoft FrontPage 2003.</p> <p><i>Задание:</i> создать HTML-страницу с отформатированным текстом.</p> <p><i>Требования к отчету:</i> итоги выполнения лабораторной работы представить в виде html-документа и ответов на контрольные вопросы.</p> <p><i>Теоретические сведения</i></p> <p>Как и в MS Word, основой структуры текста в HTML является абзац. Для выделения абзаца служит тег <Р>, который закрывать необязательно.</p> <p>В теге <Р> можно указать способ выравнивания текста абзаца в виде <Р align-'опция выравнивания">.</p> <p>Для выравнивания текста абзаца по левому краю, правому, по центру или по ширине следует использовать значения LEFT, RIGHT, CENTER, JUSTIFY.</p> <p>При использовании тега <Р> между абзацами пропускается строка, а сам абзац начинается без отступа слева (т.е. без «красной строки»).</p> <p>Для принудительного перехода на новую строку используется тег <BR>, при этом пропуска строки нет.</p> <p>Для создания неразрывной строки используется тег <NOBR>. В этом случае браузер не будет переносить строку, даже если она выходит за границы экрана, при этом появится горизонтальная полоса прокрутки.</p> <p>Если же возникает необходимость разбиения данной строки на две, но в строго определенном месте, следует использовать тег <WBR>.</p> <p>Для выделения различных частей документа используются горизонтальные линии, отчетливо показывающие границы между разделами.</p> <p>Горизонтальную линию можно создать с помощью одиночного тега <HR>. Этот тег рисует затененную горизонтальную линию вдоль экрана браузера. Рассмотрим атрибуты тега <HR>. Атрибут WIDTH задает длину линии. Его значение можно указать в пикселях или в процентном отношении к ширине окна браузера. Для задания высоты линии используется атрибут SIZE (задается в пикселах). Цвет разделительной линии задается атрибутом COLOR.</p> <p>Форматирование текста может быть физическим и логическим. Теги физического форматирования определяют формат отображения, указанного в них фрагмента текста в окне браузера. При физическом форматировании текста задаются параметры его отображения, акцент делается не на контексте содержимого, а на визуальном представлении. Однако все браузеры поддерживают тот или иной способ выделения текста.</p> <p>Логические теги предназначены для расстановки логических ударений, выделения логических частей, подчеркивания сути высказываний, к примеру, для выделения цитат, программного кода, аббревиатур. Фрагменты с логическим форматированием отображаются браузерами на экране определенным образом, заданным по умолчанию.</p> <p><i>Логическое форматирование</i></p> <p>Заголовки в HTML структурируют текст, составляющий тело документа. Каждый уровень заголовка соответствует определенному уровню детализации.</p> <p>В HTML определено 6 уровней заголовков: от Н1 до Н6. Текст, заключенный между тегами , получается большим - это основной заголовок (6-24 пт). Если текст окружен тегами , то он выглядит несколько меньше (подзаголовок) (5-18 пт); текст внутри еще меньше (4-14 пт) и так далее (Н4 - 3 (12 пт); Н5 - 2 (10 пт)) до - 1 (8 пт).</p> <p>Элементы логического выделения фрагментов текста, а также возможное оформление каждого из них приведены в таблице 1.</p> <p><b>Таблица 1 - Теги логического форматирования</b></p> <table border="1"> <tr> <td> <p><b>Теги</b></p > </td> <td> <p><b>Применение</b></p > </td> <td> <p><b>Результат</b></p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p><С1ТЕ> Используется для выделения цитат или названий книг и статей </С1ТЕ></p > </td> <td> <p><i>Используется для выделения цитат или названий книг и статей</i></p > </td> </tr> </table> <table border="1"> <tr> <td> <p><b>Теги</b></p > </td> <td> <p><b>Применение</b></p > </td> <td> <p><b>Результат</b></p > </td> </tr> <tr> <td> <p><CODE></p > <p></CODE></p > </td> <td> <p><CODE> Применяется для вывода небольшого фрагмента программного кода </CODE></p > </td> <td> <p>Применяется для вывода небольшого куска программного кода</p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p><ЕМ> Используется для выделения важных фрагментов текста </ЕМ></p > </td> <td> <p><i>Используется для выделения важных фрагментов текста</i></p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p><KBD> Выделяет текст, вводимый пользователем с клавиатуры </KBD></p > </td> <td> <p>Выделяет текст, вводимый пользователем с клавиатуры</p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p><SAMP> Используется для выделения текста примера </SAMP></p > </td> <td> <p>Используется для выделения текста примера</p > </td> </tr> <tr> <td> <p></p > </td> <td> <p><ABBR> Используется для</p > <p>отметки аббревиатур</p > <p></ABBR></p > </td> <td> <p><b>Используется для отметки аббревиатур</b></p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p><STRONG> Используется для выделения очень важных фрагментов текста </STRONG></p > </td> <td> <p><b>Используется для выделения очень важных фрагментов текста</b></p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p><VAR> Используется для отметки имен переменных</p > <p></VAR></p > </td> <td> <p><i>Используется для отметки имен переменных</i></p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p><DEL> Используется для отметки удаленного текста</p > <p></DEL></p > </td> <td> <p><span>Используется для отметки удаленного текста</p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p><INS> Используется для отметки вставленного текста </INS></p > </td> <td> <p><span>Используется для отметки вставленного текста</p > </td> </tr> <tr> <td> <p></p > </td> <td> <p><ЭЕ№>Используется для выделения</p > <p>определений<Д)РМ></p > </td> <td> <p><i>Используется для выделения определений</i></p > </td> </tr> </table> <p>Для выделения длинных цитат из основного текста в HTML существует тег . Этот элемент является контейнером и может содержать любые форматирующие теги. При этом имеет место смещение текста цитаты вправо.</p> <p><i>Физическое форматирование</i></p> <p>В таблице 2 представлены теги физического форматирования.</p> <p><b>Таблица 2 - Теги физического форматирования</b></p> <table border="1"> <tr> <td> <p><b>Теги</b></p > </td> <td> <p><b>Применение</b></p > </td> <td> <p><b>Результат</b></p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p><В>Полужирный</В></p > </td> <td> <p><b>Полужирный</b></p > </td> </tr> <tr> <td> <p><1> <л></p > </td> <td> <p><1>Курсив</1></p > </td> <td> <p><i>Курсив</i></p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p><и>По дчеркнутый</и ></p > </td> <td> <p><span>Подчеркнутый</p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p><8>Зачеркнутый</8></p > </td> <td> <p><span>Заче<span>ркнутый</p > </td> </tr> <tr> <td> <p><SUP>...</SUP></p > </td> <td> <p>Верхний HHfleKC<SUP>x</SUP></p > </td> <td> <p>Верхний индекс<sup>х</sup></p > </td> </tr> <tr> <td> <p><SUB>...</SUB></p > </td> <td> <p>Нижний HHfleKC<SUB>x</SUB></p > </td> <td> <p>Нижний индекс<sub>х</sub></p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p><ВЮ>Увеличение шрифта на один размер</ВЮ></p > </td> <td> <p>Увеличение шрифта на один размер</p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p><SMALL> Уменьшение шрифта на один pa3Mep</SMALL></p > </td> <td> <p>Уменьшение шрифта на один размер</p > </td> </tr> </table> <p>Размерами и начертанием шрифта можно управлять с помощью тега <FONT FACE= "Шрифт” SIZE= "Размер" COLOR= "ЦВЕТ">.</p> <p>Атрибут FACE позволяет указать тип шрифта, которым программа просмотра выводит текст. Если указанного шрифта нет, программа проигнорирует запрос и будет использовать шрифт, установленный по умолчанию. Этот атрибут позволяет указать как один, так и несколько шрифтов (через запятую). Весь список будет просмотрен слева направо и первый из имеющихся на машине пользователя будет использован для вывода документа.</p> <p>Атрибут SIZE служит для указания размера шрифта в условных единицах от 1 до 7. Размер может быть как абсолютной величиной (SIZE=5), так и относительной (SIZE= +2). Во втором примере текущий размер шрифта увеличивается на 2.</p> <p>В таблице 3 указано соответствие типичных размеров шрифта в пунктах значениям атрибута SIZE.</p> <p>Атрибут COLOR устанавливает цвет шрифта, который может быть задан как в формате RGB, так и указанием имени (Приложение 1).</p> <p><b>Таблица 3 - Типичные размеры шрифта в пунктах, эквивалентные значениям элемента <FONT SIZE></b></p> <table border="1"> <tr> <td> <p><b><FONT SIZE= ”n”></b></p > </td> <td> <p><b>Размер шрифта в пунктах</b></p > </td> </tr> <tr> <td> <p>1</p > </td> <td> <p>8</p > </td> </tr> <tr> <td> <p>2</p > </td> <td> <p>10</p > </td> </tr> <tr> <td> <p>3</p > </td> <td> <p>12</p > </td> </tr> <tr> <td> <p>4</p > </td> <td> <p>14</p > </td> </tr> <tr> <td> <p>5</p > </td> <td> <p>18</p > </td> </tr> <tr> <td> <p>6</p > </td> <td> <p>24</p > </td> </tr> <tr> <td> <p>7</p > </td> <td> <p>36</p > </td> </tr> </table> <p><i>Специальные символы</i></p> <p>Для представления специальных символов в документе HTML, таких как знаки >, <, торговая марка, знак копирайта, плюс-минус, используются специальные коды, состоящие из символа амперсанда (&) и следующего за ним имени символа или его десятичного или шестнадцатеричного значения. Заканчиваться специальный символ должен знаком «точка с запятой».</p> <p>В таблице 4 представлен перечень наиболее часто встречаемых специальных символов.</p> <p><b>Таблица 4 - Специальные символы в HTML</b></p> <table border="1"> <tr> <td> <p><b>Числовой код</b></p > </td> <td> <p><b>Именная замена</b></p > </td> <td> <p><b>Символ</b></p > </td> <td> <p><b>Описание</b></p > </td> </tr> <tr> <td> <p>"</p > </td> <td> <p>"</p > </td> <td> </td> <td> <p>Символ кавычки</p > </td> </tr> <tr> <td> <p>&</p > </td> <td> <p>&</p > </td> <td> <p>&</p > </td> <td> <p>Амперсанд</p > </td> </tr> <tr> <td> <p><</p > </td> <td> <p><</p > </td> <td> <p><</p > </td> <td> <p>Знак «больше»</p > </td> </tr> <tr> <td> <p>></p > </td> <td> <p>></p > </td> <td> <p>></p > </td> <td> <p>Знак «меньше»</p > </td> </tr> <tr> <td> <p> </p > </td> <td> <p> </p > </td> <td> </td> <td> <p>Неразрывный пробел</p > </td> </tr> <tr> <td> <p>©</p > </td> <td> <p>©</p > </td> <td> <p>©</p > </td> <td> <p>Копирайт</p > </td> </tr> <tr> <td> <p>®</p > </td> <td> <p>®</p > </td> <td> </td> <td> <p>Зарегистрированная торговая марка</p > </td> </tr> <tr> <td> <p>±</p > </td> <td> <p>±</p > </td> <td> <p>±</p > </td> <td> <p>Плюс-минус</p > </td> </tr> <tr> <td> <p>«</p > </td> <td> <p>«</p > </td> <td> <p>«</p > </td> <td> <p>Левая угловая кавычка</p > </td> </tr> <tr> <td> <p>»</p > </td> <td> <p>»</p > </td> <td> <p>»</p > </td> <td> <p>Правая угловая кавычка</p > </td> </tr> </table> <p><i>Работа с текстом в Microsoft FrontPage 2003</i></p> <p>Работа с текстом в программе MS FrontPage 2003 в режиме <b>Конструктор </b>аналогична работе с текстом в программе Microsoft Office Word. Заполнить web-страницу текстом можно несколькими способами.</p> <ul> <li>1) Печать текста с клавиатуры начинается с того места, где установлен курсор, при достижении правой границы web-страницы текст будет автоматически переходить на другую строку. Для начала нового абзаца необходимо нажать клавишу <b>Enter.</b></li> <li>2) Копирование и вставка текста осуществляется стандартными методами через <b>буфер обмена </b>командами <b>Правка - Копировать, Правка - Вставить. </b>Копируемый фрагмент текста может быть взят из любого другого приложения.</li> <li>3) Команда <b>Вставка - Файл </b>позволяет в диалоговом окне выбрать документ, который будет полностью перенесен на web-страницу.</li> </ul> <p>Во всех случаях любое форматирование текста выполняется с помощью тегов языка HTML, которые автоматически генерируются программой, их можно увидеть в режиме <b>Код </b>или <b>С разделением. </b>Этим объясняются искажения в форматировании текста при переносе его из других приложений.</p> <p>Для редактирования текстового фрагмента необходимо воспользоваться командами <b>панели инструментов Форматирование </b>и <b>меню Формат.</b></p> <p>При этом основные параметры текста (название шрифта, его размер, цвет) определяются атрибутами тега <FONT>, а остальные задаются с помощью дополнительного набора тегов.</p> <p>Команды меню <b>Формат </b>для форматирования текста:</p> <ul> <li>• <b>Шрифт - </b>открывает диалоговое окно для изменения шрифта, начертания, размера, цвета, видоизменения (вкладка Шрифт) и интервала между символами, положения по вертикали (вкладка <b>Межзнаковый интервал).</b></li> <li>• <b>Абзац - </b>открывает диалоговое окно для установки выравнивания, отступов, интервалов между абзацами, интервалов между строками в абзаце.</li> <li>• Команды меню <b>Вставка </b>служат для добавления элементов на web-страницу в место, указанное курсором.</li> <li>• <b>Символ - </b>открывает диалоговое окно для ввода символов, которых нет на клавиатуре.</li> </ul> <p><b>• Разрыв - </b>открывает диалоговое окно для вставки новой строки без создания нового абзаца. Опция <b>Обычный разрыв строки </b>- добавляет разрыв строк без сдвига текста, опция <b>Очистить левое (правое) поле </b>- добавляет разрыв строк таким образом, что если с левого (правого) края страницы располагается изображение, то строка после разрыва начнется ниже изображения, опция <b>Очистить оба поля -</b>добавляет разрыв строк таким образом, что строка после разрыва начнется там, где поле страницы свободно (рис. 1).</p> <img src="/htm/img/17/24495/10.png" alt="— Окно Разрыв меню Вставка"> <p><i>Рисунок 1 — Окно Разрыв меню Вставка</i></p> <p>При добавлении специальных символов при работе на вкладке <b>HTML </b>программы <b>MS FrontPage 2003 </b>следует закодировать их специальной последовательностью, представленной в таблице 4.</p> <p>Эти и другие символы можно ввести с помощью команды <b>Символ </b>меню <b>Вставка. </b>При этом необходимо находится на вкладке <b>Конструктор </b>основного окна.</p> <p><i>Технология работы</i></p> <p><i>Работа в программе Блокнот</i></p> <ul> <li>1. Запустите <b>Блокнот.</b></li> <li>2. Добавьте заголовок первого уровня:</li> </ul> <p><hl> Этот небольшой сайт посвящен геометрии </hl></p> <p>3. В теле документа добавьте абзац, оформленный полужирным шрифтом:</p> <p><р><Ь>Соотношения в прямоугольном треугольнике</Ь></р></p> <p>4. Дополните документ абзацем, оформленным курсивом: <р><1>Теорема Пифагора<Л></р></p> <p>5. Дополните документ абзацем с применением верхнего индекса: <p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p></p> <ul> <li>6. Дополните документ абзацем, оформленным курсивом: <р><1>Другие соотношения<Л></р></li> <li>7. Дополните документ абзацем с применением шрифта Symbol:</li> </ul> <p><р>а=с sin <font face="Symbol">a</font>, b=c cos <font face="Symbol"></p> <p>a</font>, a=b tg <font face="Symbol">a</font></p></p> <p>8. Измените первый абзац, применив к нему форматирование, увеличивающее размер букв и изменяющее цвет шрифта:</p> <p> <p><b>< font size = "+1" со1ог="геб">Соотношения в прямоугольном треуголы1ике</ГоЩ></Ь></р></p> <ul> <li>9. Сохраните файл в <b>Блокноте </b>под именем text.htm и проверьте, как теперь выглядит документ в браузере.</li> <li>10. Дополните документ абзацем с использованием специальных символов:</li> </ul> <p><р> " Это предложение взято в кавычки ". </р></p> <p><р> A ± В </р></p> <p><р> Символ &атр; не может быть помещен в текст непосредственно </р></p> <ul> <li>11. Сохраните файл в <b>Блокноте </b>и проверьте, как теперь выглядит документ в браузере.</li> <li>12. В любое место документа добавьте следующие комментарии:</li> </ul> <p><!— Это комментарии —></p> <p><i>Работа в Microsoft FrontPage 2003</i></p> <ul> <li>1. Используя вкладку <b>Конструктор, </b>перенесите данные из сохраненного в рабочей папке файла text.htm в новый документ.</li> <li>2. Измените шрифт содержания веб-страницы на Arial Narrow.</li> <li>3. Добавьте следующий текст и оформите его по образцу.</li> </ul> <p><b>Интернет - </b>это глобальная <i>компьютерная сеть,</i> в которой локальные, региональные и корпоративные сети соединены между собой многочисленными каналами передачи информации с <span>невысокой высокой пропускной способностью.</p> <ul> <li>4. Измените цвет добавленного текста на синий.</li> <li>5. Ниже добавьте ссылку на адрес вашей электронной почты. В качестве цвета гиперссылок документа используйте зеленый цвет.</li> </ul> <p><i>Контрольные вопросы</i></p> <ul> <li>1. Поясните назначение логического и физического форматирования.</li> <li>2. Как оформить текст полужирным, курсивным, подчеркнутым начертанием?</li> <li>3. Как создать неразрывную строку?</li> <li>4. Каким образом осуществляется добавление комментариев в HTML-документ?</li> <li>5. Какая панель инструментов MS FrontPage 2003 используется для редактирования текстового фрагмента?</li> </ul> <p><b>Лабораторная работа № 3</b></p> <p><b>Создание списков в HTML</b></p> <p><i>2 часа</i></p> <p><i>Цель работы:</i> получить представление о создании списков в HTML. <i>Задачи работы:</i></p> <p>1) ознакомиться с тегами и атрибутами создания маркированных и нумерованных списков;</p> <p>2) ознакомиться с принципом создания вложенных списков. <i>Формируемые компетенции:</i></p> <ul> <li>• готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12);</li> <li>• готовность к овладению перспективными методами библиотечноинформационной деятельности на основе информационно-коммуникационных технологий (ПК-4).</li> </ul> <p><i>В результате выполнения лабораторной работы студент должен: знать:</i></p> <p>• принципы создания упорядоченных и неупорядоченных списков в HTML (ОК-12, ПК-4);</p> <p><i>уметь:</i></p> <p>• создавать упорядоченные и неупорядоченные списки в HTML (ОК-12, ПК-4);</p> <p><i>владеть:</i></p> <p>• навыками создания упорядоченных и неупорядоченных списков в HTML (ОК-12, ПК-4).</p> <p><i>Обеспечивающие средства',</i> персональный компьютер, операционная система Windows, Microsoft FrontPage 2003.</p> <p><i>Задание:</i> создать Web-страницы, содержащие различные типы списков.</p> <p><i>Требования к отчету:</i> итоги выполнения лабораторной работы представить в виде html-документа и ответов на контрольные вопросы.</p> <p><i>Теоретические сведения</i></p> <p>В HTML имеются следующие виды списков:</p> <ul> <li>• маркированный список (неупорядоченные) (Unordered Lists <UL>);</li> <li>• нумерованные списки (упорядоченные) (Ordered Lists <OL>);</li> <li>• список определений (Definition List <DL>).</li> </ul> <p><i>Маркированные списки</i></p> <p>Пример: собрание гиперссылок на другие документы.</p> <p>Записывается данный список с помощью тега <UL>, закрывать этот тег обязательно. Внутри маркированного списка каждый элемент отмечается тегом <LI>.</p> <p>Пример маркированного списка, соответствующий ниже приведенному HTML коду приведен на рис. 1.</p> <p><b>Маркированный список - Windows Into</b></p> <img src="/htm/img/17/24495/11.png" > <p>& 0:Пабораторный практикумВс</p> <p>Файл Правка Вид Избранное Сервис С ?</p> <p>Маркированный список</p> <ul> <li>• клавиатура</li> <li>• манипулятор типа мышь</li> <li>• сканер</li> <li>• световое перо</li> </ul> <p><i>Рисунок 1 - Пример маркированного списка</i></p> <p>К устройствам ввода информации относятся:</p> <p><UL></p> <p><LI> клавиатура<ЯЛ></p> <p><LI> манипулятор типа мышь </LI></p> <p><Ы> сканер </LI></p> <p><LI> световое перо </LI></p> <p></UL></p> <p>Атрибут TYPE маркированного списка задает тип маркера:</p> <p><UL TYPE="DISK"> - сплошные маркеры;</p> <p><UL TYPE="CIRCLE"> - маркеры в виде окружностей;</p> <p><UL TYPE="SQUARE"> - сплошные квадратные маркеры.</p> <p>Можно смешивать разные типы маркеров в одном списке.</p> <p><i>Нумерованные списки</i></p> <p>Пример: инструкция, оглавление книги.</p> <p>Записывается данный список с помощью тега <OL>, закрывать этот тег обязательно.</p> <p>Внутри нумерованного списка каждый элемент отмечается тегом <LI>.</p> <p>Пример нумерованного списка, соответствующий ниже приведенному HTML коду, приведен на рис. 2.</p> <p><OL></p> <p><LI> Глава 1</Ы></p> <p><LI> Глава 2</Ы></p> <p><Ы> Глава 3</LI></p> <p><LI> Глава 4 </LI></p> <p></OL></p> <img src="/htm/img/17/24495/12.png" > <p>Файл Правка Вид Избранное Сервис С</p> <img src="/htm/img/17/24495/13.png" alt="Пример нумерованного списка"> <p><i>Рисунок 2 - Пример нумерованного списка</i></p> <p>В таблице 1 представлены основные атрибуты нумерованных списков.</p> <p>В таблице 2 представлены типы нумерации упорядоченных списков в HTML для атрибута TYPE.</p> <p><b>Таблица 1 - Основные атрибуты нумерованных списков</b></p> <table border="1"> <tr> <td> <p><b>Атрибут</b></p > </td> <td> <p><b>Описание</b></p > </td> </tr> <tr> <td> <p>START-'число"</p > </td> <td> <p>Позволяет начать нумерацию с цифры, отличной от 1</p > </td> </tr> <tr> <td> <p>УАЕиЕ="число"</p > </td> <td> <p>Изменяет номер отдельного элемента списка и тех, что следуют за ним</p > </td> </tr> <tr> <td> <p>TYPE-'тип нумерации"</p > </td> <td> <p>Задает тип нумерации упорядоченного списка</p > </td> </tr> </table> <p><b>Таблица 2 - Типы нумерации упорядоченных списков в HTML</b></p> <table border="1"> <tr> <td> <p><b>Тип нумерации</b></p > </td> <td> <p><b>Стиль</b></p > </td> <td> <p><b>Образец последовательности</b></p > </td> </tr> <tr> <td> <p>А</p > </td> <td> <p>заглавные буквы</p > </td> <td> <p>А, В, С</p > </td> </tr> <tr> <td> <p>а</p > </td> <td> <p>строчные буквы</p > </td> <td> <p>а, Ь, с</p > </td> </tr> <tr> <td> <p>I</p > </td> <td> <p>заглавные римские цифры</p > </td> <td> <p>I, II, III</p > </td> </tr> <tr> <td> <p>i</p > </td> <td> <p>строчные римские цифры</p > </td> <td> <p>i, й, iii</p > </td> </tr> <tr> <td> <p>1</p > </td> <td> <p>арабские цифры</p > </td> <td> <p>1,2,3</p > </td> </tr> </table> <p>Стиль отдельного элемента списка можно изменить следующим образом:</p> <p><OL></p> <p><LI TYPE="A"> Заглавные буквы </LI></p> <p><LI TYPE="I"> Заглавные римские цифры </LI></p> <p><LI TYPE="i"> строчные римские цифры </LI></p> <p><LI TYPE-' 1 "> арабские цифры </LI></p> <p><LI TYPE="a"> строчные буквы </LI></p> <p></OL></p> <p><i>Использование атрибутов START и TYPE</i></p> <p>Атрибут START устанавливает начальное значение счетчика, а атрибут TYPE назначает стиль нумерации. Следующий пример демонстрирует одновременное использование данных атрибутов.</p> <p>Пример:</p> <p><OL START="8" TYPE ="i" ></p> <p><LI> Это римское восемь viii</LI></p> <p></OL></p> <p><i>Список определений</i></p> <p>Пример: словарные статьи, глоссарий.</p> <p>Каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка записывается определяемый термин, во второй части - текст, раскрывающий значение термина.</p> <p>Задаётся данный вид списка тегом . Пункты списка определений размечаются тегом <DT>, а определения этих пунктов -тегом <DD>.</p> <p>При этом текст определяемого термина выводится без отступа, а следующее за ни определение - с отступом от левого края.</p> <p>Пример списка определений, соответствующий ниже приведенному HTML коду приведен на рис. 3.</p> <p><DL></p> <p><DT> SGML</p> <p><DD> Метаязык, т. е. средство формального описания прикладных языков разметки, предназначенных для кодирования структурированных документов.</p> <p></DL></p> <img src="/htm/img/17/24495/14.png" alt="Пример списка определений"> <p><i>Рисунок 3 - Пример списка определений</i></p> <p><i>Создание списков в Microsoft FrontPage 2003</i></p> <p>Для создания нумерованных и маркированных списков можно использовать кнопки <b>Нумерация </b>и <b>Маркеры </b>на панели инструментов <b>Форматирование.</b></p> <p>Для детальной настройки списков используется команда <b>Список </b>меню <b>Формат </b>(рис. 4).</p> <p>Вкладка <b>Графические маркеры </b>позволяет выбрать изображение маркера. Для этого необходимо установить переключатель <b>Задать рисунок и </b>при нажатии на кнопку <b>Обзор </b>перейти к файлу изображения.</p> <p>Вкладка <b>Обычные маркеры </b>позволяет выбрать тип маркера. Вкладка <b>Нумерация </b>позволяет определить тип нумерации и начальный номер в списке. Для организации вложенных списков необходимо выделить те абзацы, которые будут представлять собой нижний уровень и два раза выполнить команду <b>Увеличить отступ.</b></p> <p>Для создания вложенных списков на всех вкладках имеется флажок <b>Включить свертываемые структуры, </b>который организует список таким образом, что щелчок левой кнопки мыши на элемент верхнего уровня раскрывает или сворачивает список элементов нижнего уровня.</p> <img src="/htm/img/17/24495/15.png" alt="Окно Список"> <p><i>Рисунок 4 - Окно Список</i></p> <p><i>Технология работы</i></p> <p><i>Работа в программе Блокнот</i></p> <ul> <li>1. Запустите Блокнот и создайте файл test.htm.</li> <li>2. В теле документа введите заголовок</li> </ul> <p> <p> Информационно-коммуникационные технологии в образовании 3. Дополните документ нумерованным списком Федеральный образовательный портал - http://www.ict.edu.ru Отраслевая система мониторинга и сертификации компьютерной грамотности и ИКТ-компетентности - http://icttest.edu.ru Проект «Пакет программного обеспечения для образовательных учреждений России» - http://linux.armd.ru 4. Далее введите заголовок Конференции и выставки </p></p> <p>5. Дополните документ маркированным списком</p> <p>ОКонгресс конференций «Информационные технологии в образовании» - http://ito.edu.ru </p> <p><Н>Всероссийские научно-методические конференции «Телематика» - http://tm.ifmo.ru </p> <p><Н>Международные конференции «Применение новых технологий в образовании» - http://www.bytic.ru/ </П></p> <p><Н>Открытые Всероссийские конференции «Преподавание информационных технологий в России» - http://www.it-education.ru </p> <ul> <li>6. Просмотрите файл в браузере.</li> <li>7. Измените тип номера, добавив в тег <о1> атрибут type, который может принимать значения A, a, I, i, 1 - нумерация прописными и строчными буквами, прописными и строчными римскими цифрами, арабскими цифрами (по умолчанию).</li> <li>8. <ol type-Т'></li> <li>9. Измените тип маркера, добавив в тег атрибут type, который может принимать значения square, circle, disc - квадрат, окружность, круг (по умолчанию).</li> <li>10. <ul type="square"></li> <li>11. Сохраните файл. Просмотрите его в браузере.</li> <li>12. Отделите данную часть документа горизонтальной линией.</li> <li>13. Добавьте на web-страницу словарь следующих компьютерных терминов.</li> </ul> <p>Аннотация - краткая характеристика документа, поясняющая его содержание, назначение, форму, другие особенности.</p> <p>Библиографический поиск - информационный поиск, осуществляемый в каталоге или картотеке на основании библиографических данных.</p> <p>Библиотечная система - совокупность взаимодействующих библиотек, объединенных на определенных договорных условиях в целях более полного удовлетворения запросов пользователей и эффективного использования библиотечно-библиографических ресурсов.</p> <p>Информационная система - система, предназначенная для хранения, обработки, поиска, распространения, передачи и предоставления информации.</p> <p><i>Работа в Microsoft FrontPage 2003</i></p> <ul> <li>1. Создайте web-страницу «Электронные библиотеки» с нумерованным списком и вложенным маркированным списком.</li> <li>2. В любом графическом редакторе создайте изображение, которое будет использовано в качестве маркера. Создайте маркированный список «Поисковые системы».</li> </ul> <p><i>Контрольные вопросы</i></p> <ul> <li>1. Как создать маркированный список на web-странице?</li> <li>2. Какие типы маркеров можно задать с помощью атрибута TYPE?</li> <li>3. Какие теги используются для создания нумерованных списков?</li> <li>4. Каким образом можно изменить стиль отдельного элемента списка?</li> <li>5. Каким образом создаются вложенные списки в MS FrontPage 2003?</li> </ul> <p><b>Лабораторная работа № 4</b></p> <p><b>Работа с изображениями</b></p> <p><i>4 часа</i></p> <p><i>Цель работы:</i> освоение основных приемов работы с графическими изображениями на web-страницах.</p> <p><i>Задачи работы:</i></p> <ul> <li>1) ознакомиться с тегом вставки графических изображений <IMG> и его атрибутами;</li> <li>2) овладеть практическими навыками редактирования изображений в MS FrontPage 2003.</li> </ul> <p><i>Обеспечивающие средства',</i> персональный компьютер, операционная система Windows, Microsoft FrontPage 2003.</p> <p><i>Формируемые компетенции:</i></p> <ul> <li>• готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12);</li> <li>• готовность к овладению перспективными методами библиотечно-информационной деятельности на основе информационно-коммуникационных технологий (ПК-4).</li> </ul> <p><i>В результате выполнения лабораторной работы студент должен: знать:</i></p> <p>• тег вставки графических изображений <IMG> и его атрибуты (ОК-12, ПК-4);</p> <p><i>уметь:</i></p> <ul> <li>• добавлять графические изображения на web-страницы (ОК-12, ПК-4); <i>владеть</i>:</li> <li>• навыками редактирования изображений в MS FrontPage 2003 (OK-12, ПК-4).</li> </ul> <p><i>Обеспечивающие средства-,</i> персональный компьютер, операционная система Windows, Microsoft FrontPage 2003.</p> <p><i>Задание:</i> создать сайт, содержащий графические объекты, имеющие области гиперссылок.</p> <p><i>Требования к отчету:</i> итоги выполнения лабораторной работы представить в виде html-документа и ответов на контрольные вопросы.</p> <p><i>Теоретические сведения</i></p> <p>Вставка изображения в HTML-документ осуществляется с помощью тега <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Закрывающегося тега не требуется.</p> <p>Пример вставки изображения:</p> <p><IMG SRC="image.gif’></p> <p>Изображения на web-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Для обозначения изображения как гипертекстовой метки используется тот же тег <А>, что и для текста, но между <А> и </А> вставляется тег изображения <IMG>: <А HREF= "адрес файла или изображения"> <IMG SRC="image.gif '></А></p> <p>При этом изображение, используемое в качестве гипертекстовой ссылки, обводится дополнительной рамкой.</p> <p>Атрибуты тега изображения <IMG>. Тег изображения имеет один обязательный атрибут SRC и ряд необязательных.</p> <p>В таблице 1 представлены атрибуты тега <IMG>.</p> <p>Атрибут ALIGN может принимать следующие значения:</p> <ul> <li>• top - строка текста идет по верхней границе изображения;</li> <li>• bottom - строка текста идет по нижней границе изображения;</li> <li>• middle - строка текста идет по середине изображения;</li> <li>• left - изображение находится слева, текст обтекает его по правой границе;</li> <li>• right - изображение находится у правой границы, текст обтекает его слева.</li> </ul> <p>Как правило, браузеры поддерживают рисунки в форматах GIF и JPEG. Первый из этих форматов обычно используется для хранения рисунков с четкими деталями, небольшим набором цветов и возможностью анимации (графические кнопки), второй - для хранения полноцветной графики и фотоизображений.</p> <p><b>Таблица 1 - Атрибуты тега <IMG></b></p> <table border="1"> <tr> <td> <p><b>Атрибут</b></p > </td> <td> <p><b>Описание</b></p > </td> </tr> <tr> <td> <p>SRC</p > </td> <td> <p>указывает URL файла с рисунком</p > </td> </tr> <tr> <td> <p>ALT</p > </td> <td> <p>содержит краткое описание рисунка</p > </td> </tr> <tr> <td> <p>ALIGN</p > </td> <td> <p>указывает на расположение рисунка относительно обтекающего его текста</p > </td> </tr> <tr> <td> <p>WIDTH, HEIGHT</p > </td> <td> <p>указывает ширину и высоту рисунка в пикселях</p > </td> </tr> <tr> <td> <p>BORDER</p > </td> <td> <p>указывает ширину рамки вокруг рисунка в пикселях; если значение установлено в 0, то рамка не выводится</p > </td> </tr> <tr> <td> <p>HSPACE</p > </td> <td> <p>указывает величину отступа слева и справа от рисунка до окружающего его текста в пикселях</p > </td> </tr> <tr> <td> <p>VSPACE</p > </td> <td> <p>указывает величину отступа сверху и снизу от рисунка до окружающего его текста в пикселях</p > </td> </tr> <tr> <td> <p>USEMAP</p > </td> <td> <p>указывает на URL карты, ассоциируемой с данным рисунком</p > </td> </tr> </table> <p><i>Работа с изображениями в Microsoft FrontPage 2003</i></p> <p>Вставка изображения в программе MS FrontPage 2003 осуществляется при помощи команды <b>Рисунок </b>меню <b>Вставка.</b></p> <p>Существуют следующие возможности вставки изображений, предоставляемые приложением:</p> <p><b>• Картинки - </b>возможность выбрать рисунок из коллекции Microsoft Office (рис. 1);</p> <img src="/htm/img/17/24495/16.png" alt="Окно вставки рисунка из коллекции Microsoft Office"> <p><i>Рисунок 1 - Окно вставки рисунка из коллекции Microsoft Office</i></p> <p><b>• Из файла - </b>при запуске этой команды открывается окно диалога, показанное на рис. 2;</p> <img src="/htm/img/17/24495/17.png" alt="Окно вставки рисунка"> <p><i>Рисунок 2 - Окно вставки рисунка</i></p> <ul> <li>• <b>Со сканера или камеры - </b>возможность получать изображение непосредственно со сканера или другого устройства, поддерживающего технологию TWAIN;</li> <li>• <b>Создать фотоколлекцию - </b>выбор этой команды позволяет осуществить вставку фотографии из коллекции фотографий.</li> </ul> <p>Для работы с изображениями используется панель инструментов <b>Рисунки </b>(рис. 3) <b>(Вид - Панели инструментов - Рисунки), </b>с помощью которой можно накладывать текст на графический объект, создавать автоэскизы, редактировать изображение, устанавливать прозрачный цвет фона изображения, создавать области гиперссылок на изображении.</p> <p><b>| Рисунки______________________________________________________________________________________________? X</b></p> <p><span>^1A Jjio л i[7|aog^i <p><i>Рисунок 3 - Панель инструментов Рисунки</i></p> <p>В таблице 2 представлено назначение кнопок панели инструментов <b>Рисунки.</b></p> <p><b>Таблица 2 - Назначение кнопок панели инструментов Рисунки</b></p> <table border="1"> <tr> <td> <p><b>Кнопка</b></p > </td> <td> <p><b>Назначение</b></p > </td> </tr> <tr> <td> <p>ц</p > </td> <td> <p>добавляет изображение из файла</p > </td> </tr> <tr> <td> <p>А</p > </td> <td> <p>помещает текст на графический объект</p > </td> </tr> <tr> <td> </td> <td> <p>создает автоэскиз изображения</p > </td> </tr> <tr> <td> <p>а</p > </td> <td> <p>задает абсолютное размещение рисунка для помещения его в заданном месте страницы</p > </td> </tr> <tr> <td> </td> <td> <p>перемещают изображение на передний или задний план</p > </td> </tr> <tr> <td> <p>л</p > </td> <td> <p>вращают изображение против часовой и по часовой стрелке</p > </td> </tr> <tr> <td> </td> <td> <p>зеркально отображают рисунок в горизонтальном и вертикальном направлениях</p > </td> </tr> <tr> <td> <p>л л</p > </td> <td> <p>регулируют контрастность изображения</p > </td> </tr> <tr> <td> <p>чД л!</p > </td> <td> <p>регулируют яркость изображения</p > </td> </tr> <tr> <td> </td> <td> <p>обрезает изображение</p > </td> </tr> <tr> <td> </td> <td> <p>задает тип линии</p > </td> </tr> <tr> <td> </td> <td> <p>задает формат рисунка</p > </td> </tr> <tr> <td> </td> <td> <p>позволяет выбрать цвет на изображении формата GIF, который будет прозрачным</p > </td> </tr> </table> <table border="1"> <tr><td colspan="3"> <p><b>Кнопка</b></p > </td> <td> <p><b>Назначение</b></p > </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> <p>преобразовывает изображение в оттенки серого, черно-белого, задает размытие</p > </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> <p>задает багетную рамку, которая придает изображению объемный вид</p > </td> </tr> <tr> <td> </td> <td> <p>ж</p > </td> <td> </td> <td> <p>позволяет сократить количество цветов</p > </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> <p>позволяет выбирать различные элементы рисунка</p > </td> </tr> <tr> <td> <p>Е</p > </td> <td> <p>] с 3</p > </td> <td> <p>i</p > </td> <td> <p>создаются гипертекстовые области прямоугольной, эллиптической и многоугольной формы</p > </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> <p>выделяет гипертекстовые области</p > </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> <p>восстанавливает изображение в исходное состояние</p > </td> </tr> </table> <p>Для редактирования свойств графического изображения используется команда <b>Свойства </b>меню <b>Формат </b>либо команда <b>Свойства рисунка </b>контекстного меню (рис. 4).</p> <p>Вкладка <b>Вид </b>окна <b>Свойства рисунка </b>позволяет выбрать обтекание изображения текстом.</p> <p>Открывающийся список <b>Выравнивание </b>позволяет задать способ выравнивания графического объекта на странице и его расположение относительно близлежащего текста.</p> <p>В поле ввода <b>Толщина границы </b>можно задать толщину рамки вокруг изображения. Нулевое значение означает отсутствие рамки.</p> <p>В полях ввода со счетчиком <b>Интервал по горизонтали </b>и <b>Интервал по вертикали </b>задается размер отступа в пикселах от изображения до близлежащих элементов, расположенных на web-странице.</p> <p>Если установить флажок <b>Задать размер, </b>то можно указать точные значения ширины и высоты прямоугольной области, которую должно занимать изображение на странице. При установке флажка <b>Задать размер, </b>важно установить флажок <b>Сохранять пропорции, </b>тогда при изменении размеров изображения в одном из полей ввода <b>(Ширина </b>или <b>Высота) </b>пропорционально изменяется значение во втором.</p> <p>На вкладке Общие (рис. 5) можно выбрать формат для сохранения изображения, нажав кнопку <b>Тип графических файлов. </b>В диалоговом окне <b>Тип графических файлов </b>задаются дополнительные параметры, такие, как <b>Качество </b>для файлов JPEG и количество проходов при постепенном показе файлов формата GIF.</p> <img src="/htm/img/17/24495/18.png" alt="Вкладка Вид окна Свойства рисунка"> <p><i>Рисунок 4 - Вкладка Вид окна Свойства рисунка</i></p> <p>В разделе <b>Альтернативные представления </b>окна <b>Свойства рисунка </b>в поле <b>Низкое разрешение </b>можно указать файл с заранее подготовленной копией рисунка, сделанной с низким разрешением, которая будет отображаться при загрузке основного рисунка. Поле <b>Текст </b>позволяет задать тестовое описание изображения, которое будет появляться при наведении курсора мыши на рисунок и во время его загрузки.</p> <p>Поле <b>Длинное описание </b>позволяет с помощью кнопки <b>Обзор </b>выбрать файл, который будет содержать подробное описание изображения. Этот файл должен быть импортирован в одну из папок web-сайта.</p> <p>На вкладке <b>Общие </b>окна <b>Свойства рисунка </b>для рисунка можно также указать гиперссылку.</p> <p>При сохранении страницы с изображениями на экране появится стандартный диалог сохранения файлов <b>Сохранить как. </b>В этом случае необходимо указать нужное имя файла страницы и нажать кнопку <b>Сохранить. </b>При этом появится окно <b>Сохранение внедренных файлов </b>(рис. 6).</p> <img src="/htm/img/17/24495/19.png" alt="Вкладка Общие окна Свойства рисунка"> <p><i>Рисунок 5 - Вкладка Общие окна Свойства рисунка</i></p> <p>В окне <b>Сохранение внедренных файлов </b>перечислены графические изображения, добавленные на страницу во время работы. В данном окне предлагается сохранить копии добавленных на страницу изображений в папке сайта. При этом можно переименовать файлы с изображением (Пе<b>реименовать) </b>или выбрать для них отдельную папку <b>(Сменить папку).</b></p> <img src="/htm/img/17/24495/20.png" alt="Окно Сохранение внедренных объектов"> <p><i>Рисунок 6 - Окно Сохранение внедренных объектов</i></p> <p>При необходимости можно не создавать копию рисунка в папке сайта, а сохранить только ссылку на расположение исходного файла.</p> <p>Эта возможность устанавливается с помощью кнопки <b>Действие.</b></p> <p><i>Технология работы</i></p> <p><i>Работа в программе Блокнот</i></p> <p>1. Запустите <b>Paint </b>и нарисуйте схему канала передачи информации (рис. 7). Сохраните его под именем <b>information.gif.</b></p> <p>Отправитель информации</p> <p>-----------------<sub>k</sub></p> <p>Получатель информации</p> <p>Канал передачи информации</p> <p><b>?-----------------</b></p> <p><i>Рисунок 7 - Схема канала передачи информации</i></p> <ul> <li>2. Запустите <b>Блокнот.</b></li> <li>3. Добавьте заголовок <Ь2> Передача информации </Ь2></li> <li>4. Добавьте рисунок:</li> </ul> <p> <img src="information.gif ’></p> <ul> <li>1. Сохраните файл. Просмотрите его в браузере.</li> <li>2. Задайте размеры рисунка и добавьте подпись к рисунку:</li> </ul> <p> <img src="information.gif’ width= "355" height= "213" alt= "Общая схема передачи информации"></p> <ul> <li>3. Сохраните файл <b>information.htm. </b>Обновите его в браузере. Наведите курсор мыши на изображение и прочитайте всплывающую подсказку.</li> <li>4. Выровняйте изображение по правому краю, теперь текст будет его обтекать:</li> </ul> <p> <img src="information.gif width= "355" height= "213" alt= "Общая схема передачи информации" align= "right"></p> <p>5. Сохраните файл. Обновите его в браузере.</p> <p><i>Работа в Microsoft FrontPage 2003</i></p> <p>1. Создайте сайт из двух страниц.</p> <p>На первой странице расположите следующие предложения: Классификация информационных технологий по типу информации. Передача информации.</p> <p>2. Первое предложение должно быть гиперссылкой, при переходе по которой отображается вторая страница.</p> <p>Второе предложение - гиперссылкой на файл <b>information.htm.</b></p> <p>3. Запустите <b>Paint </b>и нарисуйте схему, представленную на рис. 8.</p> <img src="/htm/img/17/24495/21.png" alt="— Классификация информационных технологий"> <p><i>Рисунок 8 — Классификация информационных технологий</i></p> <ul> <li>4. Сохраните изображение под именем <b>shema.gif.</b></li> <li>5. Разместите изображение <b>shema.gif </b>на вторую страницу. Создайте фон.</li> <li>6. На изображении <b>shema.gif </b>сделайте две области ссылок: прямоугольник «технологии обработки текстовой информации» должен быть гиперссылкой на начальную страницу сайта, прямоугольник «технологии работы в глобальных сетях» - на сайт поисковой системы Яндекс http://www.yandex.ru</li> <li>7. Посмотрите созданный сайт в браузере.</li> </ul> <p><i>Контрольные вопросы</i></p> <ul> <li>1. Какой тег используется для вставки изображений на web-страницы?</li> <li>2. Перечислите атрибуты тега вставки изображения и поясните их назначение.</li> <li>3. Каким образом изображение можно сделать гиперссылкой?</li> <li>4. Какие существуют возможности вставки изображений MS FrontPage 2003?</li> <li>5. Какая панель инструментов используется для работы с изображениями в MS FrontPage 2003?</li> </ul> <p><b>Лабораторная работа № 5</b></p> <p><b>Таблицы в HTML</b></p> <p><i>4 часа</i></p> <p><i>Цель работы:</i> освоение приемов разметки HTML-документов с помощью таблиц.</p> <p><i>Задачи работы:</i></p> <ul> <li>1) ознакомиться с тегами создания таблиц и их основными атрибутами;</li> <li>2) овладеть практическими навыками создания и редактирования таблиц в MS FrontPage 2003.</li> </ul> <p><i>Формируемые компетенции:</i></p> <ul> <li>• готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12);</li> <li>• готовность к овладению перспективными методами библиотечноинформационной деятельности на основе информационно-коммуникационных технологий (ПК-4).</li> </ul> <p><i>В результате выполнения лабораторной работы студент должен: знать:</i></p> <p>• теги создания таблиц и их основные атрибуты (ОК-12, ПК-4);</p> <p><i>уметь:</i></p> <p>• создавать и редактировать таблицы средствами MS FrontPage 2003 (OK-12, ПК-4);</p> <p><i>владеть</i></p> <p>• приемами разметки HTML-доку ментов с помощью таблиц (ОК-12, ПК-4).</p> <p><i>Обеспечивающие средства',</i> персональный компьютер, операционная система Windows, Microsoft FrontPage 2003.</p> <p><i>Задание:</i> создать сайт, используя таблицы для разметки страниц.</p> <p><i>Требования к отчету:</i> итоги выполнения лабораторной работы представить в виде html-документа и ответов на контрольные вопросы.</p> <p><i>Теоретические сведения</i></p> <p>Таблица - мощное средство структурирования web-страниц. HTML-таблицы используются не только для представления табличных данных, но и являются широко используемым инструментом дизайна, представляя собой каркас, определяющий место каждого графического и текстового фрагмента на web-странице.</p> <p>Таблицы в HTML определяются при помощи тега <TABLE>... </TABLE>, заключающего в себе другие элементы таблицы (название, заголовки ячеек и их содержимое).</p> <p>Создание строки таблицы - тег <TR></p> <p>Данные в таблице организованы построчно, каждая новая строка таблицы задается тегом <TR>...</TR> (закрывающий тег </TR> можно не использовать). Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами .</p> <p>Создание столбца таблицы - тег <TD></p> <p>Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами . Число тегов в строке определяет число ячеек (столбцов).</p> <p>Создание заголовков таблицы - тег <CAPTION></p> <p>Тег <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<CAPTION ALIGN="top">), либо под таблицей (<CAPTION ALIGN="bottom">). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы.</p> <p>Создание заголовков столбцов таблицы - тег <ТН></p> <p>Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка (Table Header, заголовок таблицы). Эти теги подобны . Отличие состоит в том, что текст, заключенный между тегами , автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться с тегом <В> и атрибутом <ALIGN="center">, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.</p> <p>Для форматирования элементов таблиц в тегах <TABLE>,<TH> и <TD> используется много различных атрибутов. Рассмотрим их более подробно.</p > <p><b>Таблица 1 - Атрибуты тегов таблицы</b></p > <table border="1"> <tr> <td> <p><b>Атрибут</b></p > </td> <td> <p><b>Теги</b></p > </td> <td> <p><b>Описание</b></p > </td> </tr> <tr> <td> <p>ВОКОЕК="число"</p > </td> <td> <p><TABLE></p > </td> <td> <p>Толщина рамки таблицы в пикселях (по умолчанию рамки нет, BORDER=0)</p > </td> </tr> <tr> <td> <p>BORDERCOLOR-'цвет"</p > </td> <td> <p><TABLE> <TDXTR> <TH></p > </td> <td> <p>Цвет рамки таблицы, строки или отдельно взятой ячейки</p > </td> </tr> <tr> <td> <p>ВССОЬ(Ж="цвет"</p > </td> <td> <p><TABLE></p > <p><TD></p > <p><TR></p > <p><TH></p > </td> <td> <p>Цвет фона таблицы, строки или отдельно взятой ячейки</p > </td> </tr> <tr><td rowspan="4"> <p>АЕЮМ="выравнивание"</p > </td> <td> <p><TABLE></p > </td> <td> <p>Общее горизонтальное выравнивание таблицы на странице -LEFT/RIGHT/ CENTER</p > </td> </tr> <tr> <td> <p><TR></p > </td> <td> <p>Общее выравнивание элементов строки</p > <p>LEFT/RIGHT/CENTER/CHAR</p > </td> </tr> <tr> <td> <p><TH></p > </td> <td> <p>Выравнивание заголовка -LEFT/RIGHT/CENTER/CHAR <i>(по умолчанию CENTER)</i></p > </td> </tr> <tr> <td> <p><TD></p > </td> <td> <p>Выравнивание данных в ячейке -LEFT/RIGHT/CENTER/CHAR <i>(по умолчанию LEFT)</i></p > </td> </tr> <tr><td rowspan="3"> <p>VALIGN-'выравнивание"</p > </td> <td> <p><TABLE></p > </td> <td> <p>Общее вертикальное выравнивание элементов таблицы -BOTTOM/ MIDDLE/ТОР <i>(по умолчанию MIDDLE)</i></p > </td> </tr> <tr> <td> <p><TR></p > </td> <td> <p>Общее выравнивание элементов строки - BOTTOM/MIDDLE/ TOP/BASELINE</p > </td> </tr> <tr> <td> <p><TH></p > </td> <td> <p>Выравнивание заголовка -</p > <p>BOTTOM/MIDDLE/TOP</p > </td> </tr> </table> <table border="1"> <tr> <td> <p><b>Атрибут</b></p > </td> <td> <p><b>Теги</b></p > </td> <td> <p><b>Описание</b></p > </td> </tr> <tr> <td> </td> <td> <p><TD></p > </td> <td> <p>Выравнивание данных в ячейке -</p > <p>BOTTOM/MIDDLE/TOP</p > </td> </tr> <tr><td rowspan="2"> <p>WIDTH="niHpnHa"</p > </td> <td> <p><TABLE></p > </td> <td> <p>Ширина таблицы в пикселях или процентах от ширины окна браузера</p > </td> </tr> <tr> <td> <p><ТН></p > <p><TD></p > </td> <td> <p>Ширина ячейки таблицы в пикселях или процентах от ширины таблицы</p > </td> </tr> <tr> <td> <p>НЕЮНТ="ширина"</p > </td> <td> <p><TABLE></p > </td> <td> <p>Высота таблицы в пикселях или процентах от ширины окна браузера</p > </td> </tr> <tr> <td> <p>CELLPADDING="4Hcno"</p > </td> <td> <p><TABLE></p > </td> <td> <p>Свободное пространство между содержимым ячеек и их границами</p > </td> </tr> <tr> <td> <p>CELLSPACING-'число"</p > </td> <td> <p><TABLE></p > </td> <td> <p>Свободное пространство между границами смежных ячеек</p > </td> </tr> <tr> <td> <p>BACKGROUND="pHcyHOK"</p > </td> <td> <p><TABLE></p > </td> <td> <p>Вывод указанного рисунка в качестве фона таблицы</p > </td> </tr> <tr> <td> <p>HSPACE-'число"</p > </td> <td> <p><TABLE></p > </td> <td> <p>Размер свободного пространства слева и справа от таблицы в пикселях</p > </td> </tr> <tr> <td> <p>VSPACE-'число"</p > </td> <td> <p><TABLE></p > </td> <td> <p>Размер свободного пространства сверху и снизу от таблицы в пикселях</p > </td> </tr> </table> <p><i>Работа с таблицами в Microsoft FrontPage 2003</i></p> <p>Для вставки таблицы на web-страницу необходимо установить курсор в нужное место, а затем воспользоваться одним из способов ее создания.</p> <p>1) Создание таблицы с помощью команды <b>Добавить таблицу </b>(рис. 1) на <b>Стандартной панели инструментов. </b>В этом случае необходимо выбрать данную команду, в результате появится сетка таблицы.</p> <p>Параметры полученной таблицы будут установлены по умолчанию.</p> <p>2) Создание таблицы с помощью команды <b>Нарисовать таблицу </b>(рис. 2). Данная команда доступна из меню <b>Таблица </b>или с панели инструментов <b>Таблицы. </b>После выполнения этой команды указатель мыши примет форму карандаша. Далее нажатой левой кнопкой мыши рисуется общая прямоугольная форма таблицы, а затем рисуются линии столбцов и строк.</p> <img src="/htm/img/17/24495/22.png" alt="Создание таблицы с помощью команды Добавить таблицу"> <p><i>Рисунок 1 - Создание таблицы с помощью команды Добавить таблицу</i></p> <p>: Файл Правка Вид Вставка Формат Сервис</p> <p><span>j-j-d» ? <span>j • -у</p> <p>? Обычный ’ Times New Roman</p> <img src="/htm/img/17/24495/23.png" > <p><b>нов_стр_1 .htm*</b></p> <p><b>«] </b><span>|<body> | <table>| [<tr<b>></b><span> | <td>|</p > <img src="/htm/img/17/24495/24.png" > <p>Таблица</p > <p>Данные Рамки Окно Сп</p > <p>3 (12 пт)</p > <table border="1"> <tr> <td> </td><td colspan="2"> <p>Макетные таблицы и ячейки...</p > </td> </tr> <tr> <td> <p>ы</p > </td><td colspan="2"> <p>Нарисовать таблицу</p > </td> </tr> <tr> <td> </td> <td> <p>Вставить</p > </td> <td> <p><b>?</b></p > </td> </tr> <tr><td rowspan="2"> <p>id</p > </td><td rowspan="2"> <p>Выделить</p > <p>Объединить ячейки</p > </td> <td> <p><b>?</b></p > </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> <td> <p>Разбить ячейки...</p > </td> <td> </td> </tr> <tr> <td> </td> <td> <p>Свойства таблицы</p > </td> <td> <p><b>?</b></p > </td> </tr> </table> <p><i>Рисунок 2 - Создание таблицы с помощью команды Нарисовать таблицу</i></p> <p>3) Создание таблицы с помощью команды <b>Таблица - Вставить -Таблица. </b>В результате выполнения этой команды открывается диалоговое окно <b>Вставка таблицы </b>(рис. 3), в котором можно установить различные опции настройки таблицы.</p> <p>Рассмотрим некоторые из них.</p> <p>В разделе <b>Размер </b>в полях <b>Строк </b>и <b>Столбцов </b>задается количество строк и столбцов таблицы.</p> <p><b>Таблица - Вставить - Таблица</b></p> <p>Раздел <b>Положение </b>позволяет задать следующие опции:</p> <p><b>Выравнивание - </b>задается выравнивание таблицы относительно web-страницы;</p> <p><b>Обтекание - </b>задается возможность обтекания таблицы другими объектами;</p> <p><b>Поля ячеек - </b>задается отступ от границ ячеек до их содержимого;</p> <p><b>Интервал ячеек </b>- определяет отступы между ячейками.</p> <img src="/htm/img/17/24495/25.png" alt="Создание таблицы с помощью команды Таблица -"> <p><i>Рисунок 3 - Создание таблицы с помощью команды Таблица -</i></p> <p><i>Вставить - Таблица</i></p> <p>Опция <b>Задать ширину </b>позволяет задать ширину таблицы тремя способами: первый - ширина <b>не задана </b>(ширина таблицы определяется шириной ячеек с содержимым наибольшей ширины); второй - ширина задана <b>в точках </b>(ширина таблицы задается в пикселях и не меняется при изменении размеров окна браузера, в том случае, если ширина таблицы больше размеров окна браузера, появляется горизонтальная полоса прокрутки); третий - <b>в процентах </b>(ширина таблицы определяется как процент от доступного пространства, под которым понимается либо размер окна обозревателя, либо размер ячейки, в которую вложена таблица). Аналогично устанавливается опция <b>Задать высоту.</b></p> <p>Раздел <b>Границы </b>устанавливает размер и цветовое оформление рамки таблицы.</p> <p>Раздел Фон позволяет установить фон таблицы либо как однотонный (вкладка <b>Цвет), </b>либо с использованием графического файла (кнопка <b>Обзор). </b>Если заданы оба варианта фона, то приоритет имеет графический фон и только в том случае, если в настройках браузера отменен показ рисунков, будет виден однотонный фон.</p> <p>Раздел <b>По умолчанию </b>позволяет запомнить заданные опции для новых таблиц.</p> <p>Для форматирования свойств уже созданной таблицы используются диалоговые окна <b>Свойства таблицы, Свойства ячейки, </b>которые можно открыть, установив курсор в любом месте таблицы (ячейки) и выполнив соответствующую команду или войдя в контекстное меню <b>Свойства таблицы (Свойства ячейки).</b></p> <p>Диалоговое окно <b>Свойства таблицы </b>полностью совпадает с диалоговым окном <b>Вставка таблицы.</b></p> <p>Диалоговое окно <b>Свойства ячейки </b>(рис. 4) позволяет установить следующие опции.</p> <p><b>Выровнять по горизонтали, Выровнять по вертикали </b>- определяют выравнивание содержимого ячейки.</p> <img src="/htm/img/17/24495/26.png" > <p><b>Объединение строк, Объединение столбцов - </b>определяют ЧИСЛО объединенных <i>Рисунок 4 - Диалоговое окно Свойства ячейки </i>строк, столбцов.</p> <p><b>Задать ширину, Задать высоту - </b>устанавливают размеры ячейки аналогично размерам таблицы.</p> <p><b>Ячейка заголовка - </b>включение флажка преобразует ячейку в ячейку заголовка. <b>Не переносить слова - </b>включение флажка запрещает перенос текста по строкам. Разделы <b>Границы </b>и <b>Фон </b>позволяют задать визуальные параметры границ ячейки и фона.</p> <p>FrontPage 2003 предоставляет новую возможность при работе с таблицами - макетные таблицы. Они используются при проектировании web-страниц со сложной структурой оформления.</p> <p><i><b>Макетная таблица</b></i> - особый вид HTML-таблиц, у которых наверху и внизу каждого столбца и по сторонам таблицы имеются ярлыки с информацией о ширине и высоте в пикселях.</p> <p>Макетная таблица (рис. 5) состоит из следующих компонентов.</p> <img src="/htm/img/17/24495/27.png" alt="Проектирование макетной таблицы"> <p><i>Рисунок 5 - Проектирование макетной таблицы</i></p> <p><i><b>Макетная таблица</b></i> (1) - представляет основу для разработки макета. При выделении в режиме <b>Конструктора </b>она выделяется зеленой рамкой.</p> <p><i>Макетные ячейки</i> (2) - представляют собой области макетной таблицы, в которых размещается содержимое страницы, включая текст, рисунки и другие элементы, и при выборе выделяются синей рамкой.</p> <p><i>Ячейки-заполнители</i> (например, 3) не содержат данных и существуют для того, чтобы дополнять сумму ширин столбцов таблицы до общей ширины таблицы, и выделяются однотонным фоном (только в режиме <b>Конструктор).</b></p> <p>Обычно перед созданием макета страницы с помощью макетных таблиц страницу подготавливают следующим образом (рис. 5).</p> <ul> <li>1. Устанавливают нулевые поля web-страницы (команда <b>Файл -Свойства - </b>диалоговое окно <b>Свойства страницы - </b>вкладка <b>Дополнительно).</b></li> <li>2. Отображают линейку (4), с помощью которой можно измерять в пикселях ширину и высоту макета (команда <b>Вид - Линейка и сетка -Показать линейку).</b></li> <li>3. Отображают сетку (5) (команда <b>Вид - Линейка и сетка - Показать сетку).</b></li> <li>4. При необходимости вставляют изображение-образец (6), представляющий собой графическую модель web-страницы с большим процентом прозрачности, который вставляется как фон и может использоваться как визуальный ориентир для разработки макета web-страницы (команда <b>Вид - Изображение-образец - Настроить). </b>В открывшемся диалоговом окне <b>Изображение-образец </b>с помощью кнопки <b>Обзор </b>выбирается графический файл, определяется его смещение относительно верхнего левого угла окна и прозрачность.</li> <li>5. Вставка и редактирование макетных таблиц осуществляется с помощью панели <b>Макетные таблицы и ячейки </b>области задач (рис. 5), которую можно открыть командой <b>Таблица - Макетные таблицы и ячейки. </b>Работая с этой панелью, можно выполнять следующие действия.</li> <li>1) <i>Создать макетную таблицу.</i></li> </ul> <p>Команда <b>Вставить макетную таблицу </b>(7) - вставляет на web-страницу макетную таблицу фиксированного размера.</p> <p>Команда <b>Нарисовать макетную таблицу </b>(8) - позволяет нарисовать макетную таблицу нажатой левой кнопкой мыши.</p> <p>Выбор в окне <b>Макет таблицы </b>(10) - вставляет на web-страницу макетную таблицу выбранного типа.</p> <p>Команда <b>Вставить макетную ячейку </b>(11) - открывает диалоговое окно, в котором задаются параметры ячейки. В результате создается таблица, содержащая макетную ячейку.</p> <p>Макетная таблица имеет информационные ярлыки на сторонах (9), щелчок левой кнопкой мыши на ярлыке открывает диалоговое окно с командами, позволяющими изменить ее параметры.</p> <p>2) <i>Изменить свойства макетной таблицы.</i></p> <p>Поля <b>Ширина, Высота </b>(12) служат для изменения размеров.</p> <p>Кнопки <b>Выравнивание </b>(13) определяют размещение макетной таблицы на странице.</p> <p>3) <i>Создать макетные ячейки внутри выделенной макетной таблицы.</i></p> <p>Команда <b>Нарисовать макетную ячейку </b>(14) позволяет нарисовать ячейку в нужном месте. Выделенная ячейка имеет один ярлык (15) с указанием ее размеров. Изменение размеров ячейки осуществляется нажатой левой кнопкой мыши за метки выбора. При выделении макетной таблицы с нарисованными ячейками появляются информационные ярлыки для каждой ячейки.</p> <p><b>Раздел Колонтитулы ячейки - </b>позволяет задать параметры верхнего и нижнего колонтитулов (высота, поля, фоновый цвет, ширина и цвет границы).</p> <p>Раздел <b>Углы </b>и <b>заливка ячейки - </b>позволяет задать вид углов ячейки (стандартный или рисунок, размеры, цвета фона и границ) и параметры тени, отбрасываемой от нее (размер, размытие, направление).</p> <p><i>Технология работы</i></p> <p><i>Работа в программе Блокнот</i></p> <ul> <li>1. Запустите <b>Блокнот.</b></li> <li>2. Введите:</li> </ul> <p><HTML></p> <p><HEAD></p> <p><TITLE> Создание таблицы</Т1ТЬЕ></p> <p></HEAD></p> <p><BODY></p> <p><TABLE></p > <p><CAPTION ALIGN="TOP">CnncoK друзей и подруг</САРТЮМ> <ТЯ><ТН>ФИО</ТН><ТН>Телефон</ТН></ТК></p > <p><ТК><ТЭ>Иванов HBaH</TD><TD>35-35-35</TD></TR></p > <p><TR><TD>rieTpoBa <span>IOjihb</TD><TD>46-46-46</TD></TR></p > <p></TABLE></p> <p></BODY></p> <p></HTML></p> <ul> <li>3. Сохраните документ под именем <b>table.htm </b>в своей рабочей папке.</li> <li>4. Просмотрите сохраненный документ в браузере <b>Internet Explorer.</b></li> <li>5. Добавьте следующий HTML-код в файл <b>table.htm</b></li> </ul> <p><TABLE BORDER="1"></p > <p><TR></p > <p><TD COLSPAN="3">EcnH в таблице два тега TR, то в ней две стро-ки.</ТО></p > <p></TR></p > <p><TR></p > <p><ТО>Если в строке три тега TD,</TD></p > <p><span><TD>to в ней</ТИ></p > <p><ГО>три столбца.</TD></p > <p></TR></p > <p></TABLE></p> <p>6. Сохраните документ и просмотрите его в браузере.</p> <p><i>Работа в Microsoft FrontPage 2003</i></p> <p>1. Создайте сайт из трех страниц «История развития библиотек», используя схемы таблиц для разметки страниц, приведенные ниже. При создании таблиц установите невидимые границы. Все страницы свяжите между собой гиперссылками.</p> <p>Схема 1</p> <table border="1"> <tr> <td> </td> <td> <p>1</p > </td> <td> </td> </tr> <tr> <td> </td><td rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> <p>________________________________________________________________________\________________________________________________________________________1________________________________________________________________________</p > </td> <td> </td> </tr> </table> <p>Схема 2</p> <table border="1"> <tr> <td> </td> </tr> <tr> <td> <p>—</p > </td> </tr> <tr> <td> </td> </tr> <tr> <td> <p>Схема 3</p > </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> <p>2. При создании сайта используйте материалы интернет-ресурса «Мир библиотек» (http://www.library.ni/3/)</p> <p><i>Контрольные вопросы</i></p> <ul> <li>1. Как создать таблицу на web-странице?</li> <li>2. Какие атрибуты используются для горизонтального и вертикального выравнивания ячеек в таблице, для определения высоты и ширины ячеек, их цвета?</li> <li>3. Перечислите способы создания таблиц в MS FrontPage 2003.</li> <li>4. Что такое макетная таблица?</li> </ul> <p><b>Лабораторная работа № 6</b></p> <p><b>Форматирование с использованием каскадных таблиц стилей</b></p> <p><i>6 часов</i></p> <p><i>Цель работы:</i> получить представление о технологии CSS.</p> <p><i>Задачи работы:</i></p> <ul> <li>1) ознакомиться с понятием каскадных таблиц стилей;</li> <li>2) овладеть практическими навыками использования технологии CSS для оформления внешнего вида документов средствами MS FrontPage 2003.</li> </ul> <p><i>Формируемые компетенции:</i></p> <ul> <li>• готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12);</li> <li>• готовность к овладению перспективными методами библиотечно-информационной деятельности на основе информационно-коммуникационных технологий (ПК-4).</li> </ul> <p><i>В результате выполнения лабораторной работы студент должен: знать:</i></p> <p>• язык описания стилей CSS (ОК-12, ПК-4);</p> <p><i>уметь:</i></p> <ul> <li>• применять внутренние и внешние стили в документе (ОК-12, ПК-4); <i>владеть</i>:</li> <li>• практическими навыками использования технологии CSS для оформления внешнего вида HTML-документов (ОК-12, ПК-4).</li> </ul> <p><i>Обеспечивающие средства:</i> персональный компьютер, операционная система Windows, Microsoft FrontPage 2003.</p> <p><i>Задание:</i> выполнить оформление сайта при помощи CSS стилей.</p> <p><i>Требования к отчету:</i> итоги выполнения лабораторной работы представить в виде html-документа и ответов на контрольные вопросы.</p> <p><i>Теоретические сведения</i></p> <p>Каскадные таблицы стилей CSS (Cascading Style Sheets) предназначены для определения внешнего вида web-страниц и предоставляют возможность воздействовать на выбор шрифта, параметры форматирования текста, установку фонового цвета, ширину полей и т. д. То есть CSS представляет собой средство разделения логической структуры документа и формы его представления.</p> <p>Логическая структура документа определяется элементами HTML-разметки, в то время как форма представления каждого из этих элементов задается CSS-описателем элемента.</p> <p>Применение CSS состоит из двух этапов.</p> <ul> <li>1) Определение стиля. Стиль - это набор каких-либо свойств. Например, к таким свойствам может относиться: выбранный шрифт, цвет, размер и т. д. В CSS стиль называется селектором.</li> <li>2) Применение стиля к объектам. В зависимости от выбранного подхода стиль может применяться автоматически или же область его применения необходимо указывать вручную. В CSS выражение, которое применяется к одному или нескольким стилям, называют правилами CSS.</li> </ul> <p>Существует три метода добавления таблиц стилей на web-страницу.</p> <ul> <li>1) Использование внутренних стилей для определения стилей непосредственно в том или ином элементе.</li> <li>2) Использование внедренных таблиц стилей для определения стилей в начале web-страницы. При этом правила будут применяться только к элементам данного документа.</li> <li>3) Использование внешних таблиц стилей для определения стилей отдельно в другом документе. Применение этого метода является наиболее рациональным способом с точки зрения разработки web-сайта и его сопровождения. При необходимости можно вносить нужные изменения в файлы описаний, и внешний вид документов web-сайта соответственно будет изменяться при отображении браузером.</li> </ul> <p><i>Работа с каскадными таблицами стилей в Microsoft FrontPage</i></p> <p><i>Внутренние стили</i></p> <p>Внутренние стили CSS применяются в программе FrontPage 2003 автоматически при использовании кнопок <b>Стиль - Формат </b>в различных диалоговых окнах (например: <b>Свойства рисунка, Свойства таблицы, Свойства ячейки, Список, Разрыв) </b>(рис. 1). При этом каждый объект настраивается индивидуально.</p> <p>Разрыв</p> <table border="1"> <tr><td colspan="2"> <p>Изменение стиля</p > </td> <td> </td> </tr> <tr> <td> <p>Имя (для выбора):</p > </td> <td> <p>Тип стиля:</p > </td> <td> </td> </tr> <tr><td colspan="3"> </td> </tr> </table> <p>Класс:</p> <p>Образец</p> <p>Список</p> <p>Описание</p> <p>Графические маркеры Обычные маркеры Нумерация</p> <p>Рисунок</p> <img src="/htm/img/17/24495/28.png" > <p>Формат</p> <p>| Отмена</p> <p>(?.' Обычный ра</p> <p>Оочиститьлу ^риф“т...<sup>— </sup>Абзац...</p> <p>[ Стиль../<span> |</p> <p>Граница... у Нумераций..</p> <p>Положение...</p> <p><i>Рисунок I - Настройка внутренних стилей</i></p> <p><i>Внедренные стили</i></p> <p>Для определения стилей в начале web-страницы используется команда <b>Формат - Стиль. </b>В появившемся диалоговом окне <b>Стиль </b>(рис. 2) можно создать описание для <i>селекторов тегов</i> и <i>селекторов классов.</i></p> <p>В списке <b>Стили </b>отображается список или тегов html или селекторов созданных пользователем, в зависимости от выбора в выпадающем меню <b>Список. </b>При выборе любого из селекторов в окнах <b>Абзац </b>и <b>Знаки </b>отображается, как будет выглядеть объект, к которому будет применен стиль, а в окне <b>Описание </b>выводится текстовое описание атрибутов данного стиля.</p> <p>Кнопка <b>Удалить </b>позволяет удалить выделенный селектор из списка <b>Пользовательские стили. </b>Кнопка <b>Создать </b>открывает диалоговое окно <b>Создание стиля, </b>в котором создаются новые селекторы. Кнопка Изме<b>нить </b>открывает диалоговое окно <b>Изменение стиля, </b>которое полностью совпадает с окном <b>Создание стиля </b>и служит для изменения описания выделенного селектора. В случае изменения стиля для тега из списка <b>Теги HTML </b>этот селектор тэга переносится в список <b>Пользовательские стили.</b></p> <img src="/htm/img/17/24495/29.png" alt="Диалоговое окно Стиль"> <p><i>Рисунок 2 - Диалоговое окно Стиль</i></p> <p>При работе с диалоговым окном <b>Создание (Изменение) стиля </b>(рис. 3) используются следующие поля и кнопки.</p> <p>В поле <b>Имя (для выбора) </b>вводится имя селектора; имя <i>селектора класса</i> начинается с точки (.).</p> <p>Кнопка <b>Формат </b>позволяет получить доступ к выпадающему списку, в котором можно выбрать следующие пункты:</p> <ul> <li>• <b>Шрифт - </b>открывает диалоговое окно <b>Шрифт, </b>позволяющее создать стилевые настройки шрифта.</li> <li>• <b>Абзац - </b>открывает диалоговое окно <b>Абзац, </b>которое позволяет установить абзацные отступы (слева и справа) от окна браузера, отступ для первой строки, настроить интервалы между строками и абзацами, настроить интервалы между словами в абзацах;</li> <li>• <b>Граница - </b>открывает диалоговое окно <b>Границы и заливка, </b>с помощью которого можно установить границу для выделенного абзаца, залить абзац каким-либо цветом;</li> <li>• <b>Нумерация - </b>открывает диалоговое окно <b>Список, </b>с помощью которого можно создать нумерованные, маркированные и другие списки;</li> <li>• <b>Положение - </b>открывает диалоговое окно <b>Положение, </b>с помощью которого можно точно разместить различные элементы на странице.</li> </ul> <p><b>Создание стиля</b></p> <img src="/htm/img/17/24495/30.png" > <p>Имя (для выбора):</p> <p>Тип стиля:</p> <p>Абзац</p> <img src="/htm/img/17/24495/31.png" > <p>Образец</p> <img src="/htm/img/17/24495/32.png" > <p><b>Поженю ж№ *6 Пнияйный *бг*п; Нзжеше жый <6 зал</b></p> <p><b>Ц-2Ж0НЮ ЖКЕВ «6 7<Ц UlieneiMfi Иэжошо ЖМЙ <6 74Л</b></p> <p><b>Изжешеж^</b></p> <p>Описание</p> <p><b>font-family: Times New Roman; font-size: 14pt; color: tfOOOOFF; text-align: justify; border: Ipx solid #FFOOOO</b></p> <p>Формат<span> т <span>[ OK| [<span> Отмена</p> <p>Шрифт...</p> <p>Абзац...</p> <p>Граница...</p> <p>Нумерация...</p> <p>Положение...</p> <p><i>Рисунок 3 - Окно Создание стиля</i></p> <p>Поле <b>Образец </b>отображает, как будет выглядеть объект, к которому будет применен созданный стиль.</p> <p>В поле <b>Описание </b>выводится текстовое описание атрибутов данного стиля.</p> <p>Выпадающее меню <b>Тип стиля </b>активно в случае создания <i>селектора класса.</i> При выборе типа <b>Знак, </b>в начало имени селектора добавляется слово <b>span.</b></p> <p>К выделенным объектам селекторы применяются по-разному.</p> <p><i>Селекторы тегов</i> применяются автоматически после выбора соответствующих команд.</p> <p><i>Селекторы классов</i> применяются:</p> <p><span>Обычный | - [ Times New Roma</p> <p>И Адрес</p> <p>И Заголовок 1</p> <p>И Заголовок 2</p> <p>И Заголовок 3</p> <p>И Заголовок 4</p> <p>II Заголовок 5</p> <p>И Заголовок 6</p> <p>Я Маркированный список</p> <p>И Нумерованный список</p> <p>И Обычный</p> <p>И Определение</p> <p>И Определенный термин</p> <p>If С форматом</p> <p>И Список каталогов</p> <p>И Список меню</p> <p>Э Стиль знаков по умолчанию</p> <ul> <li>• путем выбора их из числа прочих стилей в выпадающем списке <b>Стиль </b>(рис. 4) на панели инструментов <b>Форматирование;</b></li> <li>• путем выбора из выпадающего окна <b>Класс </b>диалогового окна <b>Изменение стиля, </b>которое открывается кнопкой <b>Стиль </b>из различных диалоговых окон (например, <b>Свойства рисунка, Свой</b></li> </ul> <p><b>ства таблицы, Свойства ячейки, </b><i>Рисунок 4 - Список стилей </i><b>Список, Разрыв).</b></p> <p>При использовании внедренных таблиц стилей их необходимо настраивать для каждой web-страницы.</p> <p><i>Внешние таблицы стилей</i></p> <p>В этом случае для определения стилей CSS отводится отдельный файл, на который будут ссылаться web-страницы. Такой подход:</p> <ul> <li>1) обеспечивает централизованное управление стилями CSS на всех web-страницах (внесенные изменения будут автоматически применяться сразу на всех web-страницах, которые ссылаются на файл, содержащий CSS);</li> <li>2) уменьшается суммарный размер web-сайта;</li> <li>3) увеличивается скорость загрузки web-страниц.</li> </ul> <p>Для создания внешнего файла, содержащего каскадные таблицы стилей, необходимо выполнить команду <b>Файл - Создать </b>и перейти по гиперссылке <b>Другие шаблоны страниц </b>из области задач <b>Создание </b>(рис. 5).</p> <p>В открывшемся диалоговом окне <b>Шаблоны страниц </b>следует выбрать вкладку <b>Таблицы стилей, </b>на которой показаны шаблоны таблиц стилей, входящие в состав FrontPage 2003. Для самостоятельного создания таблицы стилей нужно выбрать шаблон <b>Обычная таблица стилей.</b></p> <p>Полученную страницу с расширением .css необходимо сохранить в одну из папок web-сайта с именем, заданным обязательно латинскими буквами и расширением .css. Далее следует создать описание для <i>селекторов тегов</i> и <i>селекторов классов,</i> используя команду <b>Формат - Стиль, </b>которая открывает диалоговое окно <b>Стиль </b>(рис. 2).</p> <img src="/htm/img/17/24495/33.png" alt="Создание внешнего файла стилей"> <p><i>Рисунок 5 - Создание внешнего файла стилей</i></p> <p>Созданную таблицу стилей нужно связать со страницами web-сайта. Для этого необходимо выполнить команду <b>Формат - Связи с таблицами стилей.</b></p> <p>В открывшемся диалоговом окне <b>Связать с таблицей стилей </b>(рис. 6) переключатели и кнопки выполняют следующие действия:</p> <ul> <li>1) переключатель <b>все страницы </b>применяет стили ко всем выделенным страницам web-сайта;</li> <li>2) переключатель <b>выделенные страницы </b>применяет стили к текущей странице или к web-страницам, выделенным на панели <b>Список папок;</b></li> </ul> <ul> <li>3) кнопка <b>Добавить </b>служит для добавления файла, содержащего каскадные таблицы стилей;</li> <li>4) кнопка Удалить служит для удаления файла, содержащего каскадные таблицы стилей, из списка используемых таблиц стилей;</li> <li>5) кнопки <b>Вниз, Вверх </b>позволяют регулировать порядок присоединения файлов с таблицами каскадных стилей к web-страницам (если используется несколько таблиц каскадных стилей);</li> <li>6) кнопка <b>Изменить </b>открывает выделенный в окне адрес URL css-файла для редактирования.</li> </ul> <img src="/htm/img/17/24495/34.png" alt="Окно Связать с таблицей стилей"> <p><i>Рисунок 6 - Окно Связать с таблицей стилей</i></p> <p><i>Технология работы</i></p> <p><i>Работа в программе Блокнот</i></p> <p>1. Создайте HTML-документ <b>index.htm. </b>Между тегами <HEAD> добавьте следующий текст:</p> <p><STYLE TYPE="text/css"> Hl, Н2 {text-align: center;} </ STYLE ></p> <p>При этом заголовки будут выровнены по центру. Чтобы применить выравнивание сразу на несколько блоков, определим выравнивание при помощи тега . Для этого, вместо определения стилей для HI и Н2, определим стиль для :</p> <p>DIV {text-align: center;}</p> <p>2. Затем вложим оба заголовка в тег . В результате получим следующее:</p> <p><HTML></p> <p><HEAD></p> <p><TITLE> Главная страница

    - некоторый текст, который надо разместить по центру.

    <Р CLASS="Both"> - некоторый текст, который должен быть выровнен по обоим краям.

    Таким образом, в определении стиля было создано два класса для тега : Center и Both. Для первого класса указано форматирование текста по центру, а для второго - по ширине. Для того чтобы указать, к какому именно классу принадлежит конкретный тег, используется атрибут CLASS. Если атрибут CLASS не указан, то будет применено форматирование, принятое по умолчанию (в случае с абзацем - выравнивание по левому краю).

    6. Создание ID-селекторов

    Кроме задания классов элементов можно ссылаться на конкретный элемент, заданный уникальным идентификатором - ID-селектором. Это делается при помощи определения стиля, явно не привязанного ни к одному из элементов:

    # somenamel {color: blue}

    <Р ID="somename 1 "> этот текст должен быть зеленым!

    Стиль, определенный как "somenamel", будет применен к одноименному элементу, вне зависимости от того, чем этот элемент является. Важно только знать, что идентификатор (ID) элемента должен быть уникальным, т. е. на странице не должно быть более одного элемента с ID, равного, например, "somenamel".

    Следует учитывать, что классы и идентификаторы могут быть как общими (как в примере с ID), так и привязанными к типу элемента (как в примере с классами для ). Например, если задать класс, определенный для , другому тегу, то такая запись не сработает.

    Поэтому если необходимо создать класс, который может использоваться с любыми элементами, следует применить следующий синтаксис:

    .Center {text-align: center;}

    Работа в Microsoft FrontPage 2003

    • 1. Создайте web-сайт «Наша группа», используя шаблон Пустой вебузел.
    • 2. Используйте файл внешней таблицы стилей CSS style.css и свяжите его со всеми страницами web-узла.
    • 3. Внесите изменения в style.css.

    Задайте следующие свойства ссылок для всех страниц:

    • • цвет и оформление ссылки;
    • • цвет и оформление посещенной ссылки;
    • • цвет и оформление активной ссылки;
    • • цвет и оформление ссылки, в момент нахождения курсора мыши над ней.

    Контрольные вопросы

    • 1. Какие существуют методы добавления таблиц стилей на web-страницу?
    • 2. Почему CSS называют «каскадными»? В чем это проявляется?
    • 3. Что такое ID-селектор?
    • 4. Охарактеризуйте возможности CSS.
    • 5. Каким образом в FrontPage 2003 осуществляется связь созданной таблицы стилей со страницами web-сайта?

    Лабораторная работа № 7

    Формы в HTML

    4 часа

    Цель работы: получить представление о создании форм в HTML-документах.

    Задачи работы:

    • 1) ознакомиться с тегами создания форм и их основными атрибутами;
    • 2) овладеть практическими навыками создания форм в MS FrontPage 2003.

    Формируемые компетенции:

    • • готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12);
    • • готовность к овладению перспективными методами библиотечноинформационной деятельности на основе информационно-коммуникационных технологий (ПК-4).

    В результате выполнения лабораторной работы студент должен: знать:

    • теги создания форм и их основные атрибуты (ОК-12, ПК-4);

    уметь:

    • • создавать формы в HTML-документах (ОК-12, ПК-4); владеть:
    • • навыками создания форм в MS FrontPage 2003 (OK-12, ПК-4).

    Обеспечивающие средства', персональный компьютер, операционная система Windows, Microsoft FrontPage 2003.

    Задание: создать сайт, содержащий формы.

    Требования к отчету: итоги выполнения лабораторной работы представить в виде html-документа и ответов на контрольные вопросы.

    Теоретические сведения

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

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

    Для размещения форм в HTML применяется тег

    ...
    .

    Основными элементами, используемыми в формах, являются:

    • • текстовое поле (однострочное или прокручиваемое);
    • • флажок для указания выбираемых элементов;
    • • переключатель для выбора одного из нескольких предлагаемых вариантов ответа;
    • • открывающееся меню для выбора элемента из списка;
    • • кнопки.

    Тег

    имеет следующие атрибуты:

    • • NAME - имя формы;
    • • METHOD (GET или POST) - определяет, как должны обрабатываться входные данные из формы (метод отправки данных на сервер). GET - передача данных посредством переменных окружения сервера (по умолчанию), POST - передача данных в стандартном потоке ввода/вывода сервера;
    • • ACTION - адрес, по которому будет отправлено содержимое формы (URL получателя данных). В качестве получателя данных может выступать CGI сценарий (Common Gateway Interface, общий шлюзовой интерфейс) обработки данных (путь к сценарию на сервере) или ссылка на адрес электронной почты - mailto: e-mail;
    • • TARGET - окно назначение для отображения результатов обработки данных на web-сервере (по умолчанию текущее окно).
    • • ACCEPT-CHARSET - список кодировок для вводимых данных (с разделителями - пробелами или запятыми);
    • • ACCEPT - список типов содержания формы для отправки серверу (с разделителями - запятыми).
    • • ENCTYPE - определяет способ кодирования содержимого формы при отправке, если указан метод POST. По умолчанию используется значение "application/x-www-form-urlencoded".

    Например:

    Кроме вышеперечисленных элементов форм в контейнере

    ...
    могут находиться теги HTML, задающие форматирование элементов формы и ее структуру. Рассмотрим элементы форм.

    Определение элементов управления формы — тег

    Данный тег, используемый для определения области внутри формы, куда вводятся данные, не имеет конечного тега и должен располагаться между тегами

    . Он формирует поле для ввода информации пользователем. Это может быть текстовое поле, флажки, переключатели или кнопки. Атрибуты тега представлены в таблице 1.

    Атрибут ALIGN может принимать следующие значения:

    • • Left - выровнять по левому краю;
    • • Right - выровнять по правому краю;
    • • Тор - выровнять верхнюю кромку изображения по верхней линии текущей текстовой строки;
    • • Middle - выровнять базовую линию текущей текстовой строки по центру изображения;
    • • Bottom - выровнять нижнюю кромку изображения по базовой линии текущей текстовой строки.

    Таблица 1 - Атрибуты тега

    Атрибут

    Описание

    NAME

    имя, необходимое для доступа к данному элементу управления

    VALUE

    значение элемента управления или надпись на кнопке

    Атрибут

    Описание

    TYPE

    тип элемента управления (вид поля ввода определяется значением атрибута TYPE)

    SIZE

    определяет размер текстового поля в символах

    CHECKED

    логический атрибут-флаг; для флажка и переключателя указывает, установлены ли они

    МАХ-

    LENGHT

    определяет максимальное количество символов, которые можно ввести в текстовое поле

    SRC

    задает адрес рисунка, используемого при создании кнопки

    ALIGN

    указывает способ выравнивания изображения в документе

    READONLY

    определяет элемент как пригодный только для чтения

    DISABLED

    определяет элемент как недоступный

    Атрибут TYPE может принимать следующие приведенные ниже значения:

    • • TEXT - текстовое поле ввода (используется тогда, когда пользователю необходимо ввести небольшое количество текста).
    • • TEXTAREA - текстовое поле.
    • • PASSWORD - поле ввода пароля (вводимые символы заменяются звездочками).
    • • CHECKBOX - элемент «флажок».
    • • RADIO - элемент «переключатель».
    • • RESET - кнопка сброса введенных значений (кнопка, при нажатии на которую браузер очищает форму от введенных пользователем значений).

    Если в форме используется атрибут RESET, тег может дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки.

    • • SUBMIT - кнопка отправки формы (кнопка, при нажатии на которую браузер отправляет данные, введенные пользователем в форму, на обработку серверу (атрибут action), заданным методом (атрибут method));
    • • HIDDEN - скрытые поля.

    Добавление в тег атрибута TYPE="HIDDEN" позволит включить в отправляемую форму значения атрибутов NAME и VALUE, которые пользователь изменить не может. Такие метки полезны при наличии нескольких форм для дальнейшей обработки данных.

    • • BUTTON - кнопка.
    • • FILE - дает возможность пользователю прикрепить файл к текущей форме.

    Создание многострочных областей ввода текста - тег