decrypted from CE748042576CF1DA7120EF566F499BC5 source file
Citation preview
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Министерство культуры Российской Федерации ФГБОУ ВПО «Кемеровский государственный университет культуры и искусств» Институт информационных и библиотечных технологий Кафедра технологии автоматизированной обработки информации
WEB-ТЕХНОЛОГИИ Учебно-методический комплекс по направлению подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность», профиль «Технология автоматизированных библиотечно-информационных систем» Квалификация (степень) выпускника «бакалавр» Форма обучения: очная, заочная
Кемерово 2014
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Учебно-методический комплекс составлен в соответствии с требованиями ФГОС ВПО по направлению подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность», профиль «Технология автоматизированных библиотечно-информационных систем», квалификация (степень) выпускника «бакалавр».
Утвержден на заседании кафедры технологии автоматизированной обработки информации 17.01.2014 г., протокол № 8.
Рекомендован к изданию учебно-методическим советом института информационных и библиотечных технологий КемГУКИ 27.01.2014 г., протокол № 3.
Web-технологии [Текст]: учебно-методический комплекс дисциплины по направлению подготовки 51.03.06 (071900) «Библиотечноинформационная деятельность», профиль «Технология автоматизированных библиотечно-информационных систем», квалификация (степень) выпускника «бакалавр» / сост.: Е. Н. Малышева. – Кемерово: Кемеров. гос. ун-т культуры и искусств, 2014. – 104 с. Составитель: канд. физ.-мат. наук, доцент Е. Н. Малышева
2
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
ВВЕДЕНИЕ Гипертекстовые технологии получили широкое распространение в информационном пространстве современного общества, в межкультурной и профессиональной коммуникации. Гипертекстовые системы оказывают всестороннее влияние на современную культуру, различные ее сферы. Гипертекстовая организация знаний характеризует структуры не только реального, но и виртуального пространства, связанного с современными интернет-технологиями. В настоящее время широкое распространение получили современные средства создания web-сайтов, позволяющие осуществлять их визуальное проектирование и автоматически генерирующие код HTML, – htmlредакторы. Однако для полного понимания принципов создания webстраниц необходимо знание основ языка HTML. Именно это обусловило необходимость включения в учебный план направления подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность» дисциплины «web-технологии». Цель освоения дисциплины «web-технологии» – получение студентами знаний теоретических основ гипертекстовых технологий, необходимых для создания web-страниц. Задачи дисциплины: сделать обзор существующих языков разметки; познакомить с приемами использования базовых элементов языка гипертекстовой разметки; дать представление о методах разработки HTML-страниц; сформировать навыки создания web-ресурсов, электронных хранилищ информации средствами языка HTML; обозначить существующие и перспективные области применения языков разметки. Место дисциплины в структуре ООП Дисциплина «Web-технологии» является дисциплиной по выбору информационно-коммуникационного цикла образовательной программы 3
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
по направлению подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность», квалификация (степень) выпускника «бакалавр». Для изучения дисциплины необходимы знания, умения, полученные студентами при изучении дисциплины: «Информатика». Изучение дисциплины направлено на формирование компетенций: готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12); готовность к овладению перспективными методами библиотечноинформационной деятельности на основе информационно-коммуникационных технологий (ПК-4). В результате изучения дисциплины студент должен: знать: классификацию языков разметки (ПК-4); базовые конструкции гипертекстового языка разметки (ОК-12); методы разработки HTML-страниц (ПК-4); существующие и перспективные области применения языков разметки (ОК-12); уметь: создавать электронные информационные ресурсы с помощью языка HTML (ПК-4); использовать базовые конструкции гипертекстового языка разметки в своей учебной и профессиональной деятельности (ПК-4); владеть: приемами использования базовых элементов языка гипертекстовой разметки (ОК-12); методами разработки HTML-страниц (ПК-4); навыками создания и эксплуатации web-ресурсов, электронных хранилищ информации средствами языка HTML (ПК-4). Компетенции, сформированные в ходе изучения дисциплины «Webтехнологии», необходимы для успешного решения задач в ходе самостоятельной работы, а также при выполнении дипломного проекта. 4
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
В структуре дисциплины выделяется два взаимосвязанных раздела: «Языки разметки: основные понятия», «Основы форматирования в HTML». Первый раздел знакомит студентов с общей характеристикой языков разметки, базовыми элементами и структурой HTML-документа. Второй раздел направлен на формирование у студентов практических навыков создания web-страниц. Программой дисциплины предусмотрены лекционные занятия, лабораторные работы, самостоятельная работа студентов. Дисциплина изучается в 3-м семестре. Общая трудоемкость дисциплины составляет 2 зачетные единицы, 72 часа, в том числе: лекционных – 6 часов на очной форме обучения, 2 часа на заочной форме; 30 часов лабораторных занятий на очной форме обучения, 8 часов на заочной форме. СРС составляет 36 часов на очной форме обучения и 62 часа – на заочной. Удельный вес занятий, проводимых в интерактивных формах, на очной форме обучения равен 9 часов (25 % аудиторных занятий), на заочной форме 3 часа (30 % аудиторных занятий) в соответствии с требованиями ФГОС ВПА. Учебной программой курса предусмотрены лабораторные работы по таким разделам, как «Языки разметки: основные понятия», «Основы форматирования». Для диагностики компетенций студентов применяются следующие формы контроля: устный опрос; тестовый контроль, включая компьютерное тестирование; собеседование, защиту отчетов о выполнении учебных исследовательских проектов. Итоговая форма контроля – зачет. Учебно-методический комплекс (УМКд) включает рабочую учебную программу дисциплины, методические рекомендации по курсу, описания лабораторных работ, тесты для самоконтроля, вопросы к зачету, список литературы, перечень полезных ссылок, глоссарий, перечень ключевых слов. В совокупности учебные материалы, представленные в настоящем УМКд, предназначены для организации и проведения аудиторных занятий, выполнения самопроверки, текущего и итогового контроля знаний и умений студентов, а также подготовки студентов к сдаче зачета по дисциплине «Web-технологии». 5
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
1 СТРУКТУРА И СОДЕРЖАНИЕ ДИСЦИПЛИНЫ 1.1 Структура дисциплины Общая трудоемкость дисциплины составляет 2 зачетные единицы, 72 часа.
Раздел дисциплины
Семестр
Тематический план для очной и заочной формы обучения Виды учебной работы, Формы включая самостоятельтекущего ную работу студентов контроля и трудоемкость (в часах) Интеракт. успеваемости. в соответствии с требоформы Форма промеваниями ФГОС ВПО обучения жуточной Лекц. Лаб. СРС аттестации OФО/ OФО/ ОФО/ (по семестрам) ЗФО ЗФО ЗФО
Раздел 1. Языки разметки: основные понятия 1.1 Общая характе3 1(1)/2/6 Проблемристика языков ное излоразметки жение 1.2 Базовые 1/2/4/6 Устный опрос, элементы языка отчет о выполи структура нении лабораHTML-документа торных работ, тестовый контроль Раздел 2. Основы форматирования в HTML 2.1 Форматирова1/1 6/1 6/8 Устный опрос*, ние текста отчет о выполнении лабораторных работ*, тестовый контроль* 2.2 Работа – 4(2)/1 4/4 Защита Устный опрос*, с изображениями проекта отчет о выполнении лабораторных работ*, тестовый контроль*, защита проекта** 6
Раздел дисциплины
Семестр
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Виды учебной работы, Формы включая самостоятельтекущего ную работу студентов контроля и трудоемкость (в часах) Интеракт. успеваемости. в соответствии с требоформы Форма промеваниями ФГОС ВПО обучения жуточной Лекц. Лаб. СРС аттестации OФО/ OФО/ ОФО/ (по семестрам) ЗФО ЗФО ЗФО
2.3 Таблицы в HTML
1/ –
4(2)/2 (1)
6/8
2.4 Форматирование с использованием каскадных таблиц стилей
1/1
6(2)/2 (1)
8/10
2.5 Использование форм и фреймов в HTML
1/ –
8(2)/2 (1)
6/10
Всего
6(1)/2
30(8)/8 36/62 (3)
в т. ч. 9 часов (25 %) аудиторных занятий, в интерактивных формах обучения на ОФО, 3 часа (30 %) на ЗФО
* – форма контроля для ОФО и ЗФО. ** – форма контроля только для ЗФО. 7
Защита Устный опрос*, проекта отчет о выполнении лабораторных работ*, тестовый контроль*, защита проекта** Защита Устный опрос*, проекта* отчет о выполнении лабораторных работ*, тестовый контроль*, защита проекта** Защита Устный опрос*, проекта* отчет о выполнении лабораторных работ*, тестовый контроль*, защита проекта* 9/3 Промежуточная аттестация – зачет в форме собеседования*
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
1.2 Содержание дисциплины Содержание раздела дисциплины
Результаты обучения
Раздел 1. ЯЗЫКИ РАЗМЕТКИ: ОСНОВНЫЕ ПОНЯТИЯ Тема 1.1. Общая характеристика Формируемые компетенции: языков разметки готовность к овладению основными меИстория языков разметки. Стан- тодами, способами и средствами получедартный обобщенный язык размет- ния, хранения, переработки информации, ки SGML (Standard Generalized наличие навыков работы с компьютером Markup Language) как метод созда- как средством управления информацией ния структурированных докумен- (ОК-12); тов. Особенности SGML. Структу- готовность к овладению перспективныра документа с точки зрения ми методами библиотечно-информационSGML. Понятие структурной раз- ной деятельности на основе информационметка и разметки представления. но-коммуникационных технологий (ПК-4) DTD (Document Type Definition) описания. Преимущества и недос- В результате изучения раздела курса татки создания единого DTD- студент должен: описания. Достоинства и недостат- знать: ки SGML. Гипертекстовый язык классификацию языков разметки (ПК-4); разметки HTML (Hyper Text базовые конструкции гипертекстового Markup Language): достоинства и языка разметки (ОК-12); недостатки. Версии языка HTML, существующие и перспективные области перспективы его развития. Расши- применения языков разметки (ОК-12); ряемый язык разметки XML уметь: (eXtensible Markup Language). Тре- использовать базовые конструкции гибования к XML. Понятия струк- пертекстового языка разметки в своей турной и синтаксической коррект- учебной и профессиональной деятельности ности. Диалекты XML (ПК-4); владеть: Тема 1.2. Базовые элементы язы- приемами использования базовых элека и структура HTML-докумен- ментов языка гипертекстовой разметки та (ОК-12) Тег – базовый элемент языка разметки гипертекста. Одиночные и контейнерные теги. Запись тега в общем виде. Понятие атрибутов тега. Структура HTML-документа. Принципы гипертекстовой разметки. Классификация тегов НТМL. Теги, определяющие структуру документа. Назначение тегов , , , . Освоение приемов связывания HTML-страниц гиперссылками 8
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Содержание раздела дисциплины
Результаты обучения
РАЗДЕЛ 2. ОСНОВЫ ФОРМАТИРОВАНИЯ В HTML Тема 2.1. Форматирование тек- Формируемые компетенции: ста готовность к овладению основными меТег управления абзацами
. Те- тодами, способами и средствами получеги, определяющие заголовки. ния, хранения, переработки информации, Управление размерами и начерта- наличие навыков работы с компьютером нием шрифта с помощью тега как средством управления информацией . Задание относительных (ОК-12); размеров шрифтов. Теги управле- готовность к овладению перспективныния разрывами и переносом строк ми методами библиотечно-информационв тексте документа. Теги смысло- ной деятельности на основе информационвого выделения текста. Теги сти- но-коммуникационных технологий (ПК-4); листического выделения текста. Добавление комментариев в В результате изучения раздела курса HTML-документы. Использование студент должен: специальных символов в HTML- знать: документах. Примеры форматиро- базовые конструкции гипертекстового языка разметки (ОК-12); вания текста. Создание неупорядоченных спи- методы разработки HTML-страниц сков в HTML. Атрибут TYPE не- (ПК-4); упорядоченного списка. Создание уметь: упорядоченных списков в HTML. создавать электронные информационные Атрибут START. Типы нумерации ресурсы с помощью языка HTML (ПК-4); упорядоченных списков. Измене- использовать базовые конструкции гиние стиля отдельного элемента пертекстового языка разметки в своей списка. Совместное использование учебной и профессиональной деятельности атрибутов START и TYPE. Атри- (ПК-4); бут VALUE. Создание вложенных владеть: неупорядоченных и неупорядочен- методами разработки HTML-страниц (ПК-4); ных списков Тема 2.2. Работа с изображения- навыками создания и эксплуатации webресурсов, электронных хранилищ информи Размещение изображения на web- мации средствами языка HTML (ПК-4) станице. Обязательный атрибут тега изображения SRC. Атрибуты размера, выравнивания изображения. Добавление вертикальных и горизонтальных полей к изображению. Форматы изображений для размещения на HTMLстраницах. Форматы растровой графики. Оптимизация изображений для размещения на webстраницах 9
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Содержание раздела дисциплины
Результаты обучения
Тема 2.3. Таблицы в HTML Таблицы как важнейший элемент HTML-документов, используемый как для размещения данных, так и для управления взаимным размещением текста и графики. Задание таблиц при помощи тега
. Создание строк, столбцов таблицы. Создание заголовков таблицы, столбцов таблицы. Атрибуты тегов
,
,
. Управление цветом элементов таблиц. Объединение элементов таблиц: атрибуты ROWSPAN и COLSPAN тегов
и
. Примеры создания сложных таблиц Тема 2.4. Форматирование с использованием каскадных таблиц стилей Каскадные таблицы стилей (Cascading Style Sheets – CSS) как специальный язык описания стилей, обладающий богатым набором средств форматирования и управления стилями элементов документа. Задание правил CSS в форме простых и групповых селекторов, ID селекторов, правил наследования и правил определения классов элементов, псевдоклассов и псевдоэлементов. Использование листов стилей в документах. Применение внутренних стилей в документе, использование тегов , и атрибута STYLE. Свойства элементов: шрифта, текста, фона и цвета. Свойства CSS, связанные с разметкой страниц. Глобальные таблицы стилей. Связанные таблицы стилей. Примеры использования CSS 10
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Содержание раздела дисциплины
Результаты обучения
Тема 2.5. Использование форм и фреймов в HTML Область применения форм в HTML-документах. Тег . Основные элементы, используемые в формах: текстовое поле, переключатель, открывающееся меню, кнопки. Атрибуты тега . Определение элементов управления формы – тег . Атрибуты тега . Использование тега для создания многострочных областей ввода текста. Атрибуты тега . Использование списков в форме – тег , его атрибуты. Задание фреймовой структуры. Теги, определяющие фреймовую структуру документов. Подготовка содержимого фрейма. Подготовка главного фрейма. Макетирование фреймов – тег . Атрибуты тега . Создание вложенных фреймов. Примеры использования фреймовых структур в HTML-документах
2 МЕТОДИЧЕСКИЕ УКАЗАНИЯ И ПУТЕВОДИТЕЛЬ ПО ЛИТЕРАТУРЕ ДЛЯ ИЗУЧЕНИЯ КУРСА HTML является простым подмножеством универсального языка разметки документов SGML (Standard Generalized Markup Language – стандартный язык разметки документов), являющегося стандартом для обмена документами между различными платформами. Язык гипертекстовой разметки лежит в основе формирования документов World Wide Web. Для бакалавров направления подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность» компетенции, формируемые при изучении курса «Web-технологии», необходимы для будущей профессио11
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
нальной деятельности. Изучение этой дисциплины направлено на формирование знаний и умений по созданию сайтов, электронных выставок и коллекций. Дисциплина «Web-технологии» имеет ярко выраженную практическую направленность: основными видами учебной работы студентов при освоении данного курса являются лабораторные работы. Цель лабораторных работ – сформировать у студента практические навыки по созданию web-сайтов. Первый раздел учебной дисциплины «Языки разметки: основные понятия» посвящен характеристике языков разметки. В первой теме данного раздела представлена общая характеристика языков разметки: SGML, HTML, XML. Для получения более полной информации о SGML и его взаимосвязях с HTML можно ознакомиться со спецификацией по HTML на русском языке (http://www.w3.org/MarkUp/html4-updates/translations). О диалектах XML подробнее можно узнать из практического пособия [7]. В рекомендуемых источниках [3; 4; 6] представлена информация о принципах гипертекстовой разметки, структуре HTML-документа и его базовых элементах. Второй раздел «Основы форматирования в HTML» посвящен освоению технологий созданий HTML-документов. На получение практических навыков по созданию web-страниц ориентирован лабораторный практикум. Лабораторные работы составлены таким образом, чтобы максимально активизировать деятельность студентов при изучении HTML-технологий: представлена технология работы как в Microsoft FrontPage 2003, так и работа с HTML-кодом в программе Блокнот. Лабораторная работа состоит из теоретической части, описания технологии ее выполнения, заданий и контрольных вопросов для самопроверки. Теоретическая часть каждой лабораторной работы содержит описание основных тегов и их атрибутов, а также примеры их применения. Источниками дополнительной литературы при изучении тем второго раздела могут служить [1; 3; 5; 6; 12], а также информационные ресурсы Интернета, указанные в «Полезных ссылках». Рекомендуется при изучении темы 2.4, создании проектов использовать рекомендуемые источники [1; 3; 5]. 12
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
3 ОПИСАНИЯ ЛАБОРАТОРНЫХ РАБОТ Лабораторная работа 1 Базовые элементы языка и структура HTML-документа 2 часа Цель работы: получить представление о базовых элементах языка и структуре HTML-документа. Задачи работы: 1) Ознакомиться с тегами, определяющими структуру HTML-документа. 2) Ознакомиться с интерфейсом программы MS FrontPage 2003. 3) Овладеть навыками создания гиперссылок. Формируемые компетенции: готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12); готовность к овладению перспективными методами библиотечноинформационной деятельности на основе информационно-коммуникационных технологий (ПК-4). В результате выполнения лабораторной работы студент должен: знать: базовые конструкции гипертекстового языка разметки (ОК-12); уметь: использовать базовые конструкции гипертекстового языка разметки в своей учебной и профессиональной деятельности (ПК-4); владеть: навыками создания гиперссылок (ПК-4). Обеспечивающие средства: персональный компьютер, операционная система Windows, Microsoft FrontPage 2003. Задание: создать простейшие HTML-страницы средствами текстового редактора Блокнот и HTML-редактора MS FrontPage 2003. Требования к отчету: итоги выполнения лабораторной работы представить в виде HTML-документа и ответов на контрольные вопросы. Теоретические сведения Элемент – это конструкция языка HTML, предписывающая способ интерпретации помещенных внутри нее данных. 13
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Элемент разметки или оформления, входящий в формат HTML, называется тег. НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки (""). Любой тег имеет общий вид: область действия тега Теги определяют границы действия элементов. Атрибут – параметр или свойство элемента. Запись атрибута в общем виде: имяАтрибута="значение" Все атрибуты записываются внутри стартового тега. Запись стартового тега с атрибутом в общем виде:
Атрибуты внутри стартового тега разделяются пробелами. Порядок записи атрибутов в теге значения не имеет. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе URL (Universe Resource Locator, унифицированный указатель ресурса), других документов в качестве значения атрибута HREF. Теги могут вкладываются в друг друга иерархически. Допустимо вложение вида
Действие вложенных тегов объединяются. Рассмотрим структуру HTML-документа. Любой документ начинается с тега , который сообщает программе просмотра, что данный файл – это документ на языке HTML. Заканчивается документ тегом , который является закрывающим тегом, парным тегу . Далее – между тегами и – следует головная часть документа, внутри которой, между тегами и , находится название документа. Название выводится в заголовке окна браузера. Как правило, оно предлагается в качестве имени файла при сохранении HTML-документа. Между тегами и помещается основная часть документа, так называемое тело документа. 14
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Создание гиперссылок Одним из основных элементов HTML-документа является гиперссылка, с помощью которой можно переходить от одного документа к другому или к отдельному элементу (закладке) на той же или на другой странице. Для создания гиперссылки служит тег вида: текст ссылки Тег имеет обязательный атрибут HREF, в качестве значения которого используется адрес документа (URL). Адрес ссылки может быть как абсолютным, так и относительным. Относительные ссылки построены относительно текущего документа. Подобную адресацию целесообразно использовать для связи страниц на локальном веб-узле, так как при перемещении группы страниц не придется изменять все адреса URL, если страницы расположены одинаково по отношению друг к другу. Примером относительных адресов URL могут служить следующие записи: text.htm Web-технологии/lesson.htm В первом случае относительный адрес URL содержит только имя файла и указывает на файл в папке, в которой расположена текущая страница. Во втором – адрес URL указывает на файл, который расположен на более низком уровне структуры папок. Так, если текущей страницей является файл index.htm, то браузер предполагает, что папка «Web-технологии» расположена в той же папке, что и файл «index.htm». Следовательно, браузер ищет файл «lesson.htm» в этой папке. Для указания файла (test.htm), находящегося в папке, расположенной на один уровень выше по отношению к папке, в которой расположен текущий файл, необходимо использовать следующую запись: ../test.htm Интерфейс программы Microsoft FrontPage 2003 Интерфейс программы состоит из стандартных для различных Windows-приложений частей (рис. 1). 15
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 1 – Интерфейс программы Microsoft FrontPage 2003
Строка меню (рис. 2) имеет стандартный для большинства Windowsприложений вид и предлагает доступ к основным командам и настройкам программы.
Рисунок 2 – Строка меню
Панель инструментов (рис. 3) состоит из ряда частей. Содержимое панели пользователь может выбирать с помощью меню Вид.
Рисунок 3 – Панель инструментов
Основное окно программы (рис. 4) содержит четыре вкладки: Конструктор, С разделением, Код, Просмотр.
Рисунок 4 – Основное окно программы 16
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Вкладка Конструктор позволяет работать с HTML-документом как с обычным текстовым файлом. В этом случае программа автоматически расставляет все необходимые теги в документе, которые в этом режиме не видны на экране. Вкладка С разделением предназначена для одновременной работы с макетом страницы и кодом. В этом представлении экран разделен на две части: область кода и область конструктора. При выборе элементов в одной области другая область прокручивается и в ней идентифицируется соответствующий элемент. Можно работать как в области кода, так и в области конструктора. Если редактируется HTML-код в области кода, то следует обновить страницу (нажать клавишу F5), чтобы увидеть измененную страницу в области конструктора. При внесении изменений в области конструктора код автоматически обновляется в области кода, поэтому в обновлении необходимости не возникает. Вкладка Код предназначена для просмотра и редактирования исходного кода HTML-документа. Это представление удобно в том случае, если необходимо много места для написания или редактирования кода, например, если набирается большой фрагмент кода для сложной таблицы. Вкладка Просмотр предоставляет возможность просмотра созданного HTML-документа с помощью встроенного web-браузера. Наличие четырех вкладок дает возможность пользователю работать с HTML-документом как с обычным текстом и использовать все возможности его редактирования: изменение параметров редактирования текста, его размещения на странице, добавление таблиц, изображений и т. д. Создание страницы в Microsoft FrontPage Для создания нового файла можно воспользоваться кнопкой Создание новой обычной страницы на панели инструментов или командой Создать меню Файл. В первом случае будет создан документ со следующим кодом HTML (рис. 5). Как видно из рисунка, теги, определяющие структуру HTML-документа, сгенерировались автоматически. При использовании меню Файл пользователю будет предложено выбрать один из примеров, на основе которого будет создан новый документ. Основные параметры созданной страницы изменяются с помощью команды Свойства меню Файл. Эта команда доступна для вызова, если 17
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
пользователь находится на вкладке Конструктор. При вызове этой команды появляется окно Свойства страницы (рис. 6).
Рисунок 5 – HTML-код страницы
Рисунок 6 – Окно Cвойства страницы 18
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
На вкладке Общие пользователь может ввести название документа, которое располагается между тегами и и его местоположение (Базовое расположение). Пользователь также может выбрать звуковой файл, который будет проигрываться при просмотре страницы. Вкладка Форматирование (рис. 7) позволяет пользователю определять цвет фона (Фон) и текста (Текст), выбирать фоновое изображение (Фоновый рисунок), а также цвета активных (Активная ссылка), посещенных (Просмотренная ссылка) и непосещенных ссылок (Гиперссылка).
Рисунок 7 – Вкладка Форматирование окна Свойства страницы
С помощью вкладки Дополнительно (рис. 8) можно изменить отступы от границ документа. Вкладка Другие (рис. 9) предназначена для определения служебных meta-тегов и задания из значений. 19
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 8 – Вкладка Дополнительно окна Свойства страницы
Рисунок 9 – Вкладка Другие окна Свойства страницы
Вкладка Язык (рис. 10) позволяет задать кодировку, с помощью которой следует просматривать содержимое документа. 20
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 10 – Вкладка Язык окна Свойства страницы
После сохранения изменений параметров HTML-документа соответствующим образом изменяется и код документа, что можно наблюдать на вкладке HTML. Создание гиперссылок в Microsoft FrontPage 2003 Чтобы создать ссылку, отметьте объект, который вы хотите включить в ссылку, после чего щелкните на кнопке Гиперссылка панели инструментов или активизируйте команду Гиперссылка меню Вставка. Откроется диалоговое окно Создать гиперссылку (рис. 11).
Рисунок 11 – Окно Добавление гиперссылки 21
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
В этом окне можно задавать гиперссылку: на страницу web-сайта, который открыт в данный момент в MS FrontPage (для этого нужно выбрать ее из списка); на внешний web-сервер, заполнив строку URL самостоятельно; на адрес электронной почты, используя кнопку; на конкретное место документа. Для этого в определенном месте страницы создается закладка: выделяется текст, выполняется команда Вставка – Закладка, в появившемся диалоговом окне вводится имя закладки. Технология работы Работа в программе Блокнот 1. Запустите Блокнот. 2. Введите:
Пример HTML-документа
Web-технологии
3. Сохраните документ под именем index.htm в своей рабочей папке. 4. Просмотрите сохраненный документ в браузере Internet Explorer. При открытии в браузере исходный документ будет иметь следующий вид (рис. 12).
Рисунок 12 – Пример простейшего HTML-документа 22
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Мы видим, что текст, набранный нами между тегами и , отобразился в заголовке окна, а то, что написано внутри , – в самом окне браузера. 5. Рассмотрим пример использования абсолютных ссылок в HTMLдокументе. Введите:
Создание ссылок
Поисковая система Яндекс
6. Сохраните документ под именем index.htm в своей рабочей папке и просмотрите сохраненный документ в браузере Internet Explorer. Работа в Microsoft FrontPage 2003 1. Создайте новый документ в MS FrontPage, используя в качестве исходного варианта Создание новой обычной страницы. 2. В качестве названия введите «Новый Документ». 3. Задайте остальные параметры созданной страницы: отступы от границ по 2 см; цвет фона, текста; кодировку – кириллица. 4. Переключитесь на вкладку Конструктор и введите следующий текст Библиотека – это учреждение, организующее сбор, хранение, общественное пользование произведениями печати. Библиотеки получили развитие с ХV века, после изобретения книгопечатания. В ХIХ веке были организованы публичные библиотеки. В России монастырские библиотеки появились в ХI–ХII веках, первые светские – в ХVIII веке. Первая крупная публичная библиотека открыта в Санкт-Петербурге в 1814 году. 5. В тексте создайте внешнюю гиперссылку на Государственную публичную научно-техническую библиотеку России http://ellib.gpntb.ru 23
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
6. Переключитесь на вкладку Код и, проанализировав HTML-теги, выделите те, которые были добавлены HTML-редактором при установке параметров страницы. 7. Используя их, создайте аналогичный документ в программе Блокнот. Обратите внимание, что добавленный текст должен располагаться между тегами . Контрольные вопросы 1. Что значит тег? 2. Какова структура НТМL-документа? 3. Опишите назначение тега ? 4. Как добавить гиперссылку в документ HTML? 5. Какие вкладки содержит окно программы Microsoft FrontPage 2003? Поясните их назначение. Лабораторная работа № 2 Форматирование текста 4 часа Цель работы: овладение основными приемами размещения и редактирования текстовых объектов на страницах сайта. Задачи работы: 1) ознакомиться с тегами логического и физического форматирования текста; 2) ознакомиться с тегами управления разрывами и переноса строк; 3) ознакомиться с тегами добавления комментариев, специальных символов. Формируемые компетенции: готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12); готовность к овладению перспективными методами библиотечноинформационной деятельности на основе информационно-коммуникационных технологий (ПК-4). 24
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
В результате выполнения лабораторной работы студент должен: знать: теги физического и логического форматирования текста (ПК-4); теги управления разрывами и переноса строк, добавления комментариев, специальных символов (ОК-12, ПК-4); уметь: форматировать HTML-документы (ОК-12, ПК-4); владеть: основными приемами размещения и редактирования текстовых объектов на страницах сайта (ПК-4). Обеспечивающие средства: персональный компьютер, операционная система Windows, Microsoft FrontPage 2003. Задание: создать HTML-страницу с отформатированным текстом. Требования к отчету: итоги выполнения лабораторной работы представить в виде html-документа и ответов на контрольные вопросы. Теоретические сведения Как и в MS Word, основой структуры текста в HTML является абзац. Для выделения абзаца служит тег
, который закрывать необязательно. В теге
можно указать способ выравнивания текста абзаца в виде
. Для выравнивания текста абзаца по левому краю, правому, по центру или по ширине следует использовать значения LEFT, RIGHT, CENTER, JUSTIFY. При использовании тега
между абзацами пропускается строка, а сам абзац начинается без отступа слева (т.е. без «красной строки»). Для принудительного перехода на новую строку используется тег , при этом пропуска строки нет. Для создания неразрывной строки используется тег . В этом случае браузер не будет переносить строку, даже если она выходит за границы экрана, при этом появится горизонтальная полоса прокрутки. Если же возникает необходимость разбиения данной строки на две, но в строго определенном месте, следует использовать тег . Для выделения различных частей документа используются горизонтальные линии, отчетливо показывающие границы между разделами. Горизонтальную линию можно создать с помощью одиночного тега . Этот тег рисует затененную горизонтальную линию вдоль экрана 25
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
браузера. Рассмотрим атрибуты тега . Атрибут WIDTH задает длину линии. Его значение можно указать в пикселях или в процентном отношении к ширине окна браузера. Для задания высоты линии используется атрибут SIZE (задается в пикселах). Цвет разделительной линии задается атрибутом COLOR. Форматирование текста может быть физическим и логическим. Теги физического форматирования определяют формат отображения, указанного в них фрагмента текста в окне браузера. При физическом форматировании текста задаются параметры его отображения, акцент делается не на контексте содержимого, а на визуальном представлении. Однако все браузеры поддерживают тот или иной способ выделения текста. Логические теги предназначены для расстановки логических ударений, выделения логических частей, подчеркивания сути высказываний, к примеру, для выделения цитат, программного кода, аббревиатур. Фрагменты с логическим форматированием отображаются браузерами на экране определенным образом, заданным по умолчанию. Логическое форматирование Заголовки в HTML структурируют текст, составляющий тело документа. Каждый уровень заголовка соответствует определенному уровню детализации. В HTML определено 6 уровней заголовков: от Н1 до Н6. Текст, заключенный между тегами , получается большим – это основной заголовок (6–24 пт). Если текст окружен тегами , то он выглядит несколько меньше (подзаголовок) (5–18 пт); текст внутри еще меньше (4–14 пт) и так далее (H4 – 3 (12 пт); H5 – 2 (10 пт)) до – 1 (8 пт). Элементы логического выделения фрагментов текста, а также возможное оформление каждого из них приведены в таблице 1. Таблица 1 – Теги логического форматирования Теги
Применение
Результат
Используется для Используется для выде выделения цитат или назва- ления цитат или названий книг и статей ний книг и статей 26
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Теги
Применение
Применяется для
вывода небольшого фраг мента программного кода
Используется для выделения важных фрагментов текста Выделяет текст, вводимый пользователем с клавиатуры
Используется для
выделения текста примера
Используется для отметки аббревиатур
Используется для выделения очень важных фрагментов текста Используется для отметки имен переменных
Используется для отметки удаленного текста
Используется для отметки вставленного текста Используется для выделения определений
Результат
Применяется для вывода небольшого куска программного кода Используется для выделения важных фрагментов текста Выделяет текст, вводимый пользователем с клавиатуры Используется для выделения текста примера Используется для отметки аббревиатур Используется для выделения очень важных фрагментов текста Используется для отметки имен переменных Используется для отметки удаленного текста Используется для отметки вставленного текста Используется для выделения определений
Для выделения длинных цитат из основного текста в HTML существует тег . Этот элемент является контейнером и может содержать любые форматирующие теги. При этом имеет место смещение текста цитаты вправо. 27
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Физическое форматирование В таблице 2 представлены теги физического форматирования. Таблица 2 – Теги физического форматирования Теги
Применение
Результат
Полужирный
Полужирный
Курсив
Курсив
Подчеркнутый
Подчеркнутый
Зачеркнутый
Зачеркнутый
…
Верхний индексх
Верхний индексх
… Нижний индексх
Нижний индексх
Увеличение шрифта на один размер
Увеличение шрифта на один размер
Уменьшение шрифта Уменьшение шрифна один размер та на один размер
Размерами и начертанием шрифта можно управлять с помощью тега . Атрибут FACE позволяет указать тип шрифта, которым программа просмотра выводит текст. Если указанного шрифта нет, программа проигнорирует запрос и будет использовать шрифт, установленный по умолчанию. Этот атрибут позволяет указать как один, так и несколько шрифтов (через запятую). Весь список будет просмотрен слева направо и первый из имеющихся на машине пользователя будет использован для вывода документа. Атрибут SIZE служит для указания размера шрифта в условных единицах от 1 до 7. Размер может быть как абсолютной величиной (SIZE=5), так и относительной (SIZE= +2). Во втором примере текущий размер шрифта увеличивается на 2. В таблице 3 указано соответствие типичных размеров шрифта в пунктах значениям атрибута SIZE. Атрибут COLOR устанавливает цвет шрифта, который может быть задан как в формате RGB, так и указанием имени (Приложение 1). 28
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Таблица 3 – Типичные размеры шрифта в пунктах, эквивалентные значениям элемента
1 2 3 4 5 6 7
Размер шрифта в пунктах 8 10 12 14 18 24 36
Специальные символы Для представления специальных символов в документе HTML, таких как знаки >,
#177; #171; #187;
plusmn; laquo; raquo;
« »
Символ кавычки Амперсанд Знак «больше» Знак «меньше» Неразрывный пробел Копирайт Зарегистрированная торговая марка Плюс-минус Левая угловая кавычка Правая угловая кавычка
29
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Работа с текстом в Microsoft FrontPage 2003 Работа с текстом в программе MS FrontPage 2003 в режиме Конструктор аналогична работе с текстом в программе Microsoft Office Word. Заполнить web-страницу текстом можно несколькими способами. 1) Печать текста с клавиатуры начинается с того места, где установлен курсор, при достижении правой границы web-страницы текст будет автоматически переходить на другую строку. Для начала нового абзаца необходимо нажать клавишу Enter. 2) Копирование и вставка текста осуществляется стандартными методами через буфер обмена командами Правка – Копировать, Правка – Вставить. Копируемый фрагмент текста может быть взят из любого другого приложения. 3) Команда Вставка – Файл позволяет в диалоговом окне выбрать документ, который будет полностью перенесен на web-страницу. Во всех случаях любое форматирование текста выполняется с помощью тегов языка HTML, которые автоматически генерируются программой, их можно увидеть в режиме Код или С разделением. Этим объясняются искажения в форматировании текста при переносе его из других приложений. Для редактирования текстового фрагмента необходимо воспользоваться командами панели инструментов Форматирование и меню Формат. При этом основные параметры текста (название шрифта, его размер, цвет) определяются атрибутами тега , а остальные задаются с помощью дополнительного набора тегов. Команды меню Формат для форматирования текста: Шрифт – открывает диалоговое окно для изменения шрифта, начертания, размера, цвета, видоизменения (вкладка Шрифт) и интервала между символами, положения по вертикали (вкладка Межзнаковый интервал). Абзац – открывает диалоговое окно для установки выравнивания, отступов, интервалов между абзацами, интервалов между строками в абзаце. Команды меню Вставка служат для добавления элементов на webстраницу в место, указанное курсором. Символ – открывает диалоговое окно для ввода символов, которых нет на клавиатуре. 30
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Разрыв – открывает диалоговое окно для вставки новой строки без создания нового абзаца. Опция Обычный разрыв строки – добавляет разрыв строк без сдвига текста, опция Очистить левое (правое) поле – добавляет разрыв строк таким образом, что если с левого (правого) края страницы располагается изображение, то строка после разрыва начнется ниже изображения, опция Очистить оба поля – добавляет разрыв строк таким образом, что строка после разрыва начнется там, где поле страницы свободно (рис. 1).
Рисунок 1 – Окно Разрыв меню Вставка
При добавлении специальных символов при работе на вкладке HTML программы MS FrontPage 2003 следует закодировать их специальной последовательностью, представленной в таблице 4. Эти и другие символы можно ввести с помощью команды Символ меню Вставка. При этом необходимо находится на вкладке Конструктор основного окна. Технология работы Работа в программе Блокнот 1. Запустите Блокнот. 2. Добавьте заголовок первого уровня: Этот небольшой сайт посвящен геометрии 3. В теле документа добавьте абзац, оформленный полужирным шрифтом:
7. Дополните документ абзацем с применением шрифта Symbol:
a=c sin a, b=c cos a, a=b tg a
8. Измените первый абзац, применив к нему форматирование, увеличивающее размер букв и изменяющее цвет шрифта:
< font size = "+1" color="red">Соотношения в прямоугольном треугольнике
9. Сохраните файл в Блокноте под именем text.htm и проверьте, как теперь выглядит документ в браузере. 10. Дополните документ абзацем с использованием специальных символов:
" Это предложение взято в кавычки ".
A ± B
Символ & не может быть помещен в текст непосредственно
11. Сохраните файл в Блокноте и проверьте, как теперь выглядит документ в браузере. 12. В любое место документа добавьте следующие комментарии:
Работа в Microsoft FrontPage 2003 1. Используя вкладку Конструктор, перенесите данные из сохраненного в рабочей папке файла text.htm в новый документ. 2. Измените шрифт содержания веб-страницы на Arial Narrow. 3. Добавьте следующий текст и оформите его по образцу. Интернет – это глобальная компьютерная сеть, в которой локальные, региональные и корпоративные сети соединены между собой многочисленными каналами передачи информации с невысокой высокой пропускной способностью. 4. Измените цвет добавленного текста на синий. 5. Ниже добавьте ссылку на адрес вашей электронной почты. В качестве цвета гиперссылок документа используйте зеленый цвет. 32
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
1. 2. 3. 4. 5.
Контрольные вопросы Поясните назначение логического и физического форматирования. Как оформить текст полужирным, курсивным, подчеркнутым начертанием? Как создать неразрывную строку? Каким образом осуществляется добавление комментариев в HTMLдокумент? Какая панель инструментов MS FrontPage 2003 используется для редактирования текстового фрагмента? Лабораторная работа № 3 Создание списков в HTML 2 часа
Цель работы: получить представление о создании списков в HTML. Задачи работы: 1) ознакомиться с тегами и атрибутами создания маркированных и нумерованных списков; 2) ознакомиться с принципом создания вложенных списков. Формируемые компетенции: готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12); готовность к овладению перспективными методами библиотечноинформационной деятельности на основе информационно-коммуникационных технологий (ПК-4). В результате выполнения лабораторной работы студент должен: знать: принципы создания упорядоченных и неупорядоченных списков в HTML (ОК-12, ПК-4); уметь: создавать упорядоченные и неупорядоченные списки в HTML (ОК-12, ПК-4); владеть: навыками создания упорядоченных и неупорядоченных списков в HTML (ОК-12, ПК-4). 33
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Обеспечивающие средства: персональный компьютер, операционная система Windows, Microsoft FrontPage 2003. Задание: создать Web-страницы, содержащие различные типы списков. Требования к отчету: итоги выполнения лабораторной работы представить в виде html-документа и ответов на контрольные вопросы. Теоретические сведения В НТМL имеются следующие виды списков: маркированный список (неупорядоченные) (Unordered Lists
); нумерованные списки (упорядоченные) (Ordered Lists ); список определений (Definition List ). Маркированные списки Пример: собрание гиперссылок на другие документы. Записывается данный список с помощью тега
, закрывать этот тег обязательно. Внутри маркированного списка каждый элемент отмечается тегом
. Пример маркированного списка, соответствующий ниже приведенному HTML коду приведен на рис. 1.
Рисунок 1 – Пример маркированного списка
К устройствам ввода информации относятся:
клавиатура
манипулятор типа мышь
34
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
сканер
световое перо
Атрибут TYPE маркированного списка задает тип маркера:
– сплошные маркеры;
– маркеры в виде окружностей;
– сплошные квадратные маркеры. Можно смешивать разные типы маркеров в одном списке. Нумерованные списки Пример: инструкция, оглавление книги. Записывается данный список с помощью тега , закрывать этот тег обязательно. Внутри нумерованного списка каждый элемент отмечается тегом
. Пример нумерованного списка, соответствующий ниже приведенному HTML коду, приведен на рис. 2.
Глава 1
Глава 2
Глава 3
Глава 4
Рисунок 2 – Пример нумерованного списка 35
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
В таблице 1 представлены основные атрибуты нумерованных списков. В таблице 2 представлены типы нумерации упорядоченных списков в HTML для атрибута TYPE. Таблица 1 – Основные атрибуты нумерованных списков Атрибут
Описание
START="число" VALUE="число" TYPE="тип нумерации"
Позволяет начать нумерацию с цифры, отличной от 1 Изменяет номер отдельного элемента списка и тех, что следуют за ним Задает тип нумерации упорядоченного списка
Таблица 2 – Типы нумерации упорядоченных списков в HTML Тип нумерации
Стиль
Образец последовательности
А а I i 1
заглавные буквы строчные буквы заглавные римские цифры строчные римские цифры арабские цифры
A, B, C a, b, c I, II, III i, ii, iii 1, 2, 3
Стиль отдельного элемента списка можно изменить следующим образом:
Заглавные буквы
Заглавные римские цифры
строчные римские цифры
арабские цифры
строчные буквы
Использование атрибутов START и TYPE Атрибут START устанавливает начальное значение счетчика, а атрибут TYPE назначает стиль нумерации. Следующий пример демонстрирует одновременное использование данных атрибутов. Пример:
Это римское восемь viii
36
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Список определений Пример: словарные статьи, глоссарий. Каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка записывается определяемый термин, во второй части – текст, раскрывающий значение термина. Задаётся данный вид списка тегом . Пункты списка определений размечаются тегом , а определения этих пунктов – тегом . При этом текст определяемого термина выводится без отступа, а следующее за ни определение – с отступом от левого края. Пример списка определений, соответствующий ниже приведенному HTML коду приведен на рис. 3.
SGML Метаязык, т. е. средство формального описания прикладных языков разметки, предназначенных для кодирования структурированных документов.
Рисунок 3 – Пример списка определений
Создание списков в Microsoft FrontPage 2003 Для создания нумерованных и маркированных списков можно использовать кнопки Нумерация и Маркеры на панели инструментов Форматирование. Для детальной настройки списков используется команда Список меню Формат (рис. 4). Вкладка Графические маркеры позволяет выбрать изображение маркера. Для этого необходимо установить переключатель Задать рисунок и при нажатии на кнопку Обзор перейти к файлу изображения. Вкладка Обычные маркеры позволяет выбрать тип маркера. Вкладка Нумерация позволяет определить тип нумерации и начальный номер 37
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
в списке. Для организации вложенных списков необходимо выделить те абзацы, которые будут представлять собой нижний уровень и два раза выполнить команду Увеличить отступ. Для создания вложенных списков на всех вкладках имеется флажок Включить свертываемые структуры, который организует список таким образом, что щелчок левой кнопки мыши на элемент верхнего уровня раскрывает или сворачивает список элементов нижнего уровня.
Рисунок 4 – Окно Список
Технология работы Работа в программе Блокнот 1. Запустите Блокнот и создайте файл test.htm. 2. В теле документа введите заголовок Информационно-коммуникационные технологии в образовании 3. Дополните документ нумерованным списком
38
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Отраслевая система мониторинга и сертификации компьютерной грамотности и ИКТ-компетентности – http://icttest.edu.ru
Проект «Пакет программного обеспечения для образовательных учреждений России» – http://linux.armd.ru
4. Далее введите заголовок Конференции и выставки 5. Дополните документ маркированным списком
Конгресс конференций «Информационные технологии в образовании» – http://ito.edu.ru
Всероссийские научно-методические конференции «Телематика» – http://tm.ifmo.ru
Международные конференции «Применение новых технологий в образовании» – http://www.bytic.ru/
Открытые Всероссийские конференции «Преподавание информационных технологий в России» – http://www.it-education.ru
6. Просмотрите файл в браузере. 7. Измените тип номера, добавив в тег атрибут type, который может принимать значения А, а, I, i, 1 – нумерация прописными и строчными буквами, прописными и строчными римскими цифрами, арабскими цифрами (по умолчанию). 8. 9. Измените тип маркера, добавив в тег
атрибут type, который может принимать значения square, circle, disc – квадрат, окружность, круг (по умолчанию). 10.
11. Сохраните файл. Просмотрите его в браузере. 12. Отделите данную часть документа горизонтальной линией. 13. Добавьте на web-страницу словарь следующих компьютерных терминов. Аннотация – краткая характеристика документа, поясняющая его содержание, назначение, форму, другие особенности. 39
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Библиографический поиск – информационный поиск, осуществляемый в каталоге или картотеке на основании библиографических данных. Библиотечная система – совокупность взаимодействующих библиотек, объединенных на определенных договорных условиях в целях более полного удовлетворения запросов пользователей и эффективного использования библиотечно-библиографических ресурсов. Информационная система – система, предназначенная для хранения, обработки, поиска, распространения, передачи и предоставления информации. Работа в Microsoft FrontPage 2003 1. Создайте web-страницу «Электронные библиотеки» с нумерованным списком и вложенным маркированным списком. 2. В любом графическом редакторе создайте изображение, которое будет использовано в качестве маркера. Создайте маркированный список «Поисковые системы». Контрольные вопросы 1. 2. 3. 4. 5.
Как создать маркированный список на web-cтранице? Какие типы маркеров можно задать с помощью атрибута TYPE? Какие теги используются для создания нумерованных списков? Каким образом можно изменить стиль отдельного элемента списка? Каким образом создаются вложенные списки в MS FrontPage 2003?
Лабораторная работа № 4 Работа с изображениями 4 часа Цель работы: освоение основных приемов работы с графическими изображениями на web-страницах. Задачи работы: 1) ознакомиться с тегом вставки графических изображений и его атрибутами; 2) овладеть практическими навыками редактирования изображений в MS FrontPage 2003. Обеспечивающие средства: персональный компьютер, операционная система Windows, Microsoft FrontPage 2003. 40
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Формируемые компетенции: готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12); готовность к овладению перспективными методами библиотечно-информационной деятельности на основе информационно-коммуникационных технологий (ПК-4). В результате выполнения лабораторной работы студент должен: знать: тег вставки графических изображений и его атрибуты (ОК-12, ПК-4); уметь: добавлять графические изображения на web-страницы (ОК-12, ПК-4); владеть: навыками редактирования изображений в MS FrontPage 2003 (ОК-12, ПК-4). Обеспечивающие средства: персональный компьютер, операционная система Windows, Microsoft FrontPage 2003. Задание: создать сайт, содержащий графические объекты, имеющие области гиперссылок. Требования к отчету: итоги выполнения лабораторной работы представить в виде html-документа и ответов на контрольные вопросы. Теоретические сведения Вставка изображения в HTML-документ осуществляется с помощью тега с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Закрывающегося тега не требуется. Пример вставки изображения:
Изображения на web-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Для обозначения изображения как гипертекстовой метки используется тот же тег , что и для текста, но между и вставляется тег изображения : 41
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
При этом изображение, используемое в качестве гипертекстовой ссылки, обводится дополнительной рамкой. Атрибуты тега изображения . Тег изображения имеет один обязательный атрибут SRC и ряд необязательных. В таблице 1 представлены атрибуты тега . Атрибут ALIGN может принимать следующие значения: top – строка текста идет по верхней границе изображения; bottom – строка текста идет по нижней границе изображения; middle – строка текста идет по середине изображения; left – изображение находится слева, текст обтекает его по правой границе; right – изображение находится у правой границы, текст обтекает его слева. Как правило, браузеры поддерживают рисунки в форматах GIF и JPEG. Первый из этих форматов обычно используется для хранения рисунков с четкими деталями, небольшим набором цветов и возможностью анимации (графические кнопки), второй – для хранения полноцветной графики и фотоизображений. Таблица 1 – Атрибуты тега Атрибут
Описание
SRC ALT ALIGN
указывает URL файла с рисунком содержит краткое описание рисунка указывает на расположение рисунка относительно обтекающего его текста WIDTH, HEIGHT указывает ширину и высоту рисунка в пикселях BORDER указывает ширину рамки вокруг рисунка в пикселях; если значение установлено в 0, то рамка не выводится HSPACE указывает величину отступа слева и справа от рисунка до окружающего его текста в пикселях VSPACE указывает величину отступа сверху и снизу от рисунка до окружающего его текста в пикселях USEMAP указывает на URL карты, ассоциируемой с данным рисунком Работа с изображениями в Microsoft FrontPage 2003 Вставка изображения в программе MS FrontPage 2003 осуществляется при помощи команды Рисунок меню Вставка. 42
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Существуют следующие возможности вставки изображений, предоставляемые приложением: Картинки – возможность выбрать рисунок из коллекции Microsoft Office (рис. 1);
Рисунок 1 – Окно вставки рисунка из коллекции Microsoft Office
Из файла – при запуске этой команды открывается окно диалога, показанное на рис. 2;
Рисунок 2 – Окно вставки рисунка 43
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Со сканера или камеры – возможность получать изображение непосредственно со сканера или другого устройства, поддерживающего технологию TWAIN; Создать фотоколлекцию – выбор этой команды позволяет осуществить вставку фотографии из коллекции фотографий. Для работы с изображениями используется панель инструментов Рисунки (рис. 3) (Вид – Панели инструментов – Рисунки), с помощью которой можно накладывать текст на графический объект, создавать автоэскизы, редактировать изображение, устанавливать прозрачный цвет фона изображения, создавать области гиперссылок на изображении.
Рисунок 3 – Панель инструментов Рисунки
В таблице 2 представлено назначение кнопок панели инструментов Рисунки. Таблица 2 – Назначение кнопок панели инструментов Рисунки Кнопка
Назначение добавляет изображение из файла помещает текст на графический объект создает автоэскиз изображения задает абсолютное размещение рисунка для помещения его в заданном месте страницы перемещают изображение на передний или задний план вращают изображение против часовой и по часовой стрелке зеркально отображают рисунок в горизонтальном и вертикальном направлениях регулируют контрастность изображения регулируют яркость изображения обрезает изображение задает тип линии задает формат рисунка позволяет выбрать цвет на изображении формата GIF, который будет прозрачным 44
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Кнопка
Назначение преобразовывает изображение в оттенки серого, черно-белого, задает размытие задает багетную рамку, которая придает изображению объемный вид позволяет сократить количество цветов позволяет выбирать различные элементы рисунка создаются гипертекстовые области прямоугольной, эллиптической и многоугольной формы выделяет гипертекстовые области восстанавливает изображение в исходное состояние
Для редактирования свойств графического изображения используется команда Свойства меню Формат либо команда Свойства рисунка контекстного меню (рис. 4). Вкладка Вид окна Свойства рисунка позволяет выбрать обтекание изображения текстом. Открывающийся список Выравнивание позволяет задать способ выравнивания графического объекта на странице и его расположение относительно близлежащего текста. В поле ввода Толщина границы можно задать толщину рамки вокруг изображения. Нулевое значение означает отсутствие рамки. В полях ввода со счетчиком Интервал по горизонтали и Интервал по вертикали задается размер отступа в пикселах от изображения до близлежащих элементов, расположенных на web-странице. Если установить флажок Задать размер, то можно указать точные значения ширины и высоты прямоугольной области, которую должно занимать изображение на странице. При установке флажка Задать размер, важно установить флажок Сохранять пропорции, тогда при изменении размеров изображения в одном из полей ввода (Ширина или Высота) пропорционально изменяется значение во втором. На вкладке Общие (рис. 5) можно выбрать формат для сохранения изображения, нажав кнопку Тип графических файлов. В диалоговом окне Тип графических файлов задаются дополнительные параметры, такие, как Качество для файлов JPEG и количество проходов при постепенном показе файлов формата GIF. 45
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 4 – Вкладка Вид окна Свойства рисунка
В разделе Альтернативные представления окна Свойства рисунка в поле Низкое разрешение можно указать файл с заранее подготовленной копией рисунка, сделанной с низким разрешением, которая будет отображаться при загрузке основного рисунка. Поле Текст позволяет задать тестовое описание изображения, которое будет появляться при наведении курсора мыши на рисунок и во время его загрузки. Поле Длинное описание позволяет с помощью кнопки Обзор выбрать файл, который будет содержать подробное описание изображения. Этот файл должен быть импортирован в одну из папок web-сайта. На вкладке Общие окна Свойства рисунка для рисунка можно также указать гиперссылку. При сохранении страницы с изображениями на экране появится стандартный диалог сохранения файлов Сохранить как. В этом случае необходимо указать нужное имя файла страницы и нажать кнопку Сохранить. При этом появится окно Сохранение внедренных файлов (рис. 6). 46
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 5 – Вкладка Общие окна Свойства рисунка
В окне Сохранение внедренных файлов перечислены графические изображения, добавленные на страницу во время работы. В данном окне предлагается сохранить копии добавленных на страницу изображений в папке сайта. При этом можно переименовать файлы с изображением (Переименовать) или выбрать для них отдельную папку (Сменить папку).
Рисунок 6 – Окно Сохранение внедренных объектов 47
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
При необходимости можно не создавать копию рисунка в папке сайта, а сохранить только ссылку на расположение исходного файла. Эта возможность устанавливается с помощью кнопки Действие. Технология работы Работа в программе Блокнот 1. Запустите Paint и нарисуйте схему канала передачи информации (рис. 7). Сохраните его под именем information.gif.
1. Сохраните файл. Просмотрите его в браузере. 2. Задайте размеры рисунка и добавьте подпись к рисунку:
3. Сохраните файл information.htm. Обновите его в браузере. Наведите курсор мыши на изображение и прочитайте всплывающую подсказку. 4. Выровняйте изображение по правому краю, теперь текст будет его обтекать:
5. Сохраните файл. Обновите его в браузере. Работа в Microsoft FrontPage 2003 1. Создайте сайт из двух страниц. На первой странице расположите следующие предложения: Классификация информационных технологий по типу информации. Передача информации. 48
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
2. Первое предложение должно быть гиперссылкой, при переходе по которой отображается вторая страница. Второе предложение – гиперссылкой на файл information.htm. 3. Запустите Paint и нарисуйте схему, представленную на рис. 8. Информационные технологии Технологии обработки текстовой информации
Технологии обработки числовой информации
Технологии обработки графической информации
Технологии обработки звуковой информации
Технологии работы в глобальных сетях Рисунок 8 – Классификация информационных технологий
4. Сохраните изображение под именем shema.gif. 5. Разместите изображение shema.gif на вторую страницу. Создайте фон. 6. На изображении shema.gif сделайте две области ссылок: прямоугольник «технологии обработки текстовой информации» должен быть гиперссылкой на начальную страницу сайта, прямоугольник «технологии работы в глобальных сетях» – на сайт поисковой системы Яндекс http://www.yandex.ru 7. Посмотрите созданный сайт в браузере. Контрольные вопросы 1. Какой тег используется для вставки изображений на web-страницы? 2. Перечислите атрибуты тега вставки изображения и поясните их назначение. 3. Каким образом изображение можно сделать гиперссылкой? 4. Какие существуют возможности вставки изображений MS FrontPage 2003? 5. Какая панель инструментов используется для работы с изображениями в MS FrontPage 2003? 49
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Лабораторная работа № 5 Таблицы в HTML 4 часа Цель работы: освоение приемов разметки HTML-документов с помощью таблиц. Задачи работы: 1) ознакомиться с тегами создания таблиц и их основными атрибутами; 2) овладеть практическими навыками создания и редактирования таблиц в MS FrontPage 2003. Формируемые компетенции: готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12); готовность к овладению перспективными методами библиотечноинформационной деятельности на основе информационно-коммуникационных технологий (ПК-4). В результате выполнения лабораторной работы студент должен: знать: теги создания таблиц и их основные атрибуты (ОК-12, ПК-4); уметь: создавать и редактировать таблицы средствами MS FrontPage 2003 (ОК-12, ПК-4); владеть приемами разметки HTML-документов с помощью таблиц (ОК-12, ПК-4). Обеспечивающие средства: персональный компьютер, операционная система Windows, Microsoft FrontPage 2003. Задание: создать сайт, используя таблицы для разметки страниц. Требования к отчету: итоги выполнения лабораторной работы представить в виде html-документа и ответов на контрольные вопросы. Теоретические сведения Таблица – мощное средство структурирования web-страниц. HTMLтаблицы используются не только для представления табличных данных, 50
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
но и являются широко используемым инструментом дизайна, представляя собой каркас, определяющий место каждого графического и текстового фрагмента на web-странице. Таблицы в HTML определяются при помощи тега
...
, заключающего в себе другие элементы таблицы (название, заголовки ячеек и их содержимое). Создание строки таблицы – тег Данные в таблице организованы построчно, каждая новая строка таблицы задается тегом
...
(закрывающий тег можно не использовать). Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами . Создание столбца таблицы – тег Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами . Число тегов в строке определяет число ячеек (столбцов). Создание заголовков таблицы – тег Тег позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (), либо под таблицей (). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Создание заголовков столбцов таблицы – тег Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка (Таblе Неаder, заголовок таблицы). Эти теги подобны . Отличие состоит в том, что текст, заключенный между тегами , автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться с тегом и атрибутом , текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью . 51
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Для форматирования элементов таблиц в тегах
,
и
используется много различных атрибутов. Рассмотрим их более подробно. Таблица 1 – Атрибуты тегов таблицы Атрибут
BORDER="число"
BORDERCOLOR="цвет"
BGCOLOR="цвет"
ALIGN="выравнивание"
VALIGN="выравнивание"
Теги
Описание
Толщина рамки таблицы в пиксе
лях (по умолчанию рамки нет, BORDER=0)
Цвет рамки таблицы, строки или
отдельно взятой ячейки
Цвет фона таблицы, строки или
отдельно взятой ячейки
Общее горизонтальное выравни
вание таблицы на странице – LEFT/RIGHT/ CENTER Общее выравнивание элементов
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Атрибут
Теги
WIDTH="ширина"
HEIGHT="ширина"
CELLPADDING="число"
CELLSPACING="число"
BACKGROUND="рисунок"
HSPACE="число"
VSPACE="число"
Описание
Выравнивание данных в ячейке – BOTTOM/MIDDLE/TOP Ширина таблицы в пикселях или процентах от ширины окна браузера Ширина ячейки таблицы в пикселях или процентах от ширины таблицы Высота таблицы в пикселях или процентах от ширины окна браузера Свободное пространство между содержимым ячеек и их границами Свободное пространство между границами смежных ячеек Вывод указанного рисунка в качестве фона таблицы Размер свободного пространства слева и справа от таблицы в пикселях Размер свободного пространства сверху и снизу от таблицы в пикселях
Работа с таблицами в Microsoft FrontPage 2003 Для вставки таблицы на web-страницу необходимо установить курсор в нужное место, а затем воспользоваться одним из способов ее создания. 1) Создание таблицы с помощью команды Добавить таблицу (рис. 1) на Стандартной панели инструментов. В этом случае необходимо выбрать данную команду, в результате появится сетка таблицы. Параметры полученной таблицы будут установлены по умолчанию.
53
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
2) Создание таблицы с помощью команды Нарисовать таблицу (рис. 2). Данная команда доступна из меню Таблица или с панели инструментов Таблицы. После выполнения этой команды указатель мыши примет форму карандаша. Далее нажатой левой кнопкой мыши рисуется общая прямоугольная форма таблицы, а затем рисуются ли- Рисунок 1 – Создание таблицы с помощью команды Добавить таблицу нии столбцов и строк.
Рисунок 2 – Создание таблицы с помощью команды Нарисовать таблицу
3) Создание таблицы с помощью команды Таблица – Вставить – Таблица. В результате выполнения этой команды открывается диалоговое окно Вставка таблицы (рис. 3), в котором можно установить различные опции настройки таблицы. Рассмотрим некоторые из них. В разделе Размер в полях Строк и Столбцов задается количество строк и столбцов таблицы. Таблица – Вставить – Таблица 54
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Раздел Положение позволяет задать следующие опции: Выравнивание – задается выравнивание таблицы относительно web-страницы; Обтекание – задается возможность обтекания таблицы другими объектами; Поля ячеек – задается отступ от границ ячеек до их содержимого; Интервал ячеек – определяет отступы между ячейками.
Рисунок 3 – Создание таблицы с помощью команды Таблица – Вставить – Таблица 55
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Опция Задать ширину позволяет задать ширину таблицы тремя способами: первый – ширина не задана (ширина таблицы определяется шириной ячеек с содержимым наибольшей ширины); второй – ширина задана в точках (ширина таблицы задается в пикселях и не меняется при изменении размеров окна браузера, в том случае, если ширина таблицы больше размеров окна браузера, появляется горизонтальная полоса прокрутки); третий – в процентах (ширина таблицы определяется как процент от доступного пространства, под которым понимается либо размер окна обозревателя, либо размер ячейки, в которую вложена таблица). Аналогично устанавливается опция Задать высоту. Раздел Границы устанавливает размер и цветовое оформление рамки таблицы. Раздел Фон позволяет установить фон таблицы либо как однотонный (вкладка Цвет), либо с использованием графического файла (кнопка Обзор). Если заданы оба варианта фона, то приоритет имеет графический фон и только в том случае, если в настройках браузера отменен показ рисунков, будет виден однотонный фон. Раздел По умолчанию позволяет запомнить заданные опции для новых таблиц. Для форматирования свойств уже созданной таблицы используются диалоговые окна Свойства таблицы, Свойства ячейки, которые можно открыть, установив курсор в любом месте таблицы (ячейки) и выполнив соответствующую команду или войдя в контекстное меню Свойства таблицы (Свойства ячейки). Диалоговое окно Свойства таблицы полностью совпадает с диалоговым окном Вставка таблицы. Диалоговое окно Свойства ячейки (рис. 4) позволяет установить следующие опции. Выровнять по горизонтали, Выровнять по вертикали – определяют выравнивание содержимого ячейки. Объединение строк, Объединение столбцов – опРисунок 4 – Диалоговое окно Свойства ячейки ределяют число объединенных строк, столбцов. 56
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Задать ширину, Задать высоту – устанавливают размеры ячейки аналогично размерам таблицы. Ячейка заголовка – включение флажка преобразует ячейку в ячейку заголовка. Не переносить слова – включение флажка запрещает перенос текста по строкам. Разделы Границы и Фон позволяют задать визуальные параметры границ ячейки и фона. FrontPage 2003 предоставляет новую возможность при работе с таблицами – макетные таблицы. Они используются при проектировании web-страниц со сложной структурой оформления. Макетная таблица – особый вид HTML-таблиц, у которых наверху и внизу каждого столбца и по сторонам таблицы имеются ярлыки с информацией о ширине и высоте в пикселях. Макетная таблица (рис. 5) состоит из следующих компонентов.
Рисунок 5 – Проектирование макетной таблицы
Макетная таблица (1) – представляет основу для разработки макета. При выделении в режиме Конструктора она выделяется зеленой рамкой. 57
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Макетные ячейки (2) – представляют собой области макетной таблицы, в которых размещается содержимое страницы, включая текст, рисунки и другие элементы, и при выборе выделяются синей рамкой. Ячейки-заполнители (например, 3) не содержат данных и существуют для того, чтобы дополнять сумму ширин столбцов таблицы до общей ширины таблицы, и выделяются однотонным фоном (только в режиме Конструктор). Обычно перед созданием макета страницы с помощью макетных таблиц страницу подготавливают следующим образом (рис. 5). 1. Устанавливают нулевые поля web-страницы (команда Файл – Свойства – диалоговое окно Свойства страницы – вкладка Дополнительно). 2. Отображают линейку (4), с помощью которой можно измерять в пикселях ширину и высоту макета (команда Вид – Линейка и сетка – Показать линейку). 3. Отображают сетку (5) (команда Вид – Линейка и сетка – Показать сетку). 4. При необходимости вставляют изображение-образец (6), представляющий собой графическую модель web-страницы с большим процентом прозрачности, который вставляется как фон и может использоваться как визуальный ориентир для разработки макета web-страницы (команда Вид – Изображение-образец – Настроить). В открывшемся диалоговом окне Изображение-образец с помощью кнопки Обзор выбирается графический файл, определяется его смещение относительно верхнего левого угла окна и прозрачность. 5. Вставка и редактирование макетных таблиц осуществляется с помощью панели Макетные таблицы и ячейки области задач (рис. 5), которую можно открыть командой Таблица – Макетные таблицы и ячейки. Работая с этой панелью, можно выполнять следующие действия. 1) Создать макетную таблицу. Команда Вставить макетную таблицу (7) – вставляет на webстраницу макетную таблицу фиксированного размера. Команда Нарисовать макетную таблицу (8) – позволяет нарисовать макетную таблицу нажатой левой кнопкой мыши. 58
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Выбор в окне Макет таблицы (10) – вставляет на web-страницу макетную таблицу выбранного типа. Команда Вставить макетную ячейку (11) – открывает диалоговое окно, в котором задаются параметры ячейки. В результате создается таблица, содержащая макетную ячейку. Макетная таблица имеет информационные ярлыки на сторонах (9), щелчок левой кнопкой мыши на ярлыке открывает диалоговое окно с командами, позволяющими изменить ее параметры. 2) Изменить свойства макетной таблицы. Поля Ширина, Высота (12) служат для изменения размеров. Кнопки Выравнивание (13) определяют размещение макетной таблицы на странице. 3) Создать макетные ячейки внутри выделенной макетной таблицы. Команда Нарисовать макетную ячейку (14) позволяет нарисовать ячейку в нужном месте. Выделенная ячейка имеет один ярлык (15) с указанием ее размеров. Изменение размеров ячейки осуществляется нажатой левой кнопкой мыши за метки выбора. При выделении макетной таблицы с нарисованными ячейками появляются информационные ярлыки для каждой ячейки. Раздел Колонтитулы ячейки – позволяет задать параметры верхнего и нижнего колонтитулов (высота, поля, фоновый цвет, ширина и цвет границы). Раздел Углы и заливка ячейки – позволяет задать вид углов ячейки (стандартный или рисунок, размеры, цвета фона и границ) и параметры тени, отбрасываемой от нее (размер, размытие, направление). Технология работы Работа в программе Блокнот 1. Запустите Блокнот. 2. Введите:
Создание таблицы
59
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Список друзей и подруг
ФИО
Телефон
Иванов Иван
35-35-35
Петрова Юлия
46-46-46
3. Сохраните документ под именем table.htm в своей рабочей папке. 4. Просмотрите сохраненный документ в браузере Internet Explorer. 5. Добавьте следующий HTML-код в файл table.htm
Если в таблице два тега TR, то в ней две строки.
Если в строке три тега TD,
то в ней
три столбца.
6. Сохраните документ и просмотрите его в браузере. Работа в Microsoft FrontPage 2003 1. Создайте сайт из трех страниц «История развития библиотек», используя схемы таблиц для разметки страниц, приведенные ниже. При создании таблиц установите невидимые границы. Все страницы свяжите между собой гиперссылками. Схема 1
60
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Схема 2
Схема 3
2. При создании сайта используйте материалы интернет-ресурса «Мир библиотек» (http://www.library.ru/3/) Контрольные вопросы 1. Как создать таблицу на web-странице? 2. Какие атрибуты используются для горизонтального и вертикального выравнивания ячеек в таблице, для определения высоты и ширины ячеек, их цвета? 3. Перечислите способы создания таблиц в MS FrontPage 2003. 4. Что такое макетная таблица? Лабораторная работа № 6 Форматирование с использованием каскадных таблиц стилей 6 часов Цель работы: получить представление о технологии CSS. Задачи работы: 1) ознакомиться с понятием каскадных таблиц стилей; 2) овладеть практическими навыками использования технологии CSS для оформления внешнего вида документов средствами MS FrontPage 2003. Формируемые компетенции: готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навы61
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
ков работы с компьютером как средством управления информацией (ОК-12); готовность к овладению перспективными методами библиотечно-информационной деятельности на основе информационно-коммуникационных технологий (ПК-4). В результате выполнения лабораторной работы студент должен: знать: язык описания стилей CSS (ОК-12, ПК-4); уметь: применять внутренние и внешние стили в документе (ОК-12, ПК-4); владеть: практическими навыками использования технологии CSS для оформления внешнего вида HTML-документов (ОК-12, ПК-4). Обеспечивающие средства: персональный компьютер, операционная система Windows, Microsoft FrontPage 2003. Задание: выполнить оформление сайта при помощи CSS стилей. Требования к отчету: итоги выполнения лабораторной работы представить в виде html-документа и ответов на контрольные вопросы. Теоретические сведения Каскадные таблицы стилей CSS (Cascading Style Sheets) предназначены для определения внешнего вида web-страниц и предоставляют возможность воздействовать на выбор шрифта, параметры форматирования текста, установку фонового цвета, ширину полей и т. д. То есть CSS представляет собой средство разделения логической структуры документа и формы его представления. Логическая структура документа определяется элементами HTMLразметки, в то время как форма представления каждого из этих элементов задается CSS-описателем элемента. Применение CSS состоит из двух этапов. 1) Определение стиля. Стиль – это набор каких-либо свойств. Например, к таким свойствам может относиться: выбранный шрифт, цвет, размер и т. д. В CSS стиль называется селектором. 2) Применение стиля к объектам. В зависимости от выбранного подхода стиль может применяться автоматически или же область его применения необходимо указывать вручную. В CSS выражение, которое применяется к одному или нескольким стилям, называют правилами CSS. 62
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Существует три метода добавления таблиц стилей на web-страницу. 1) Использование внутренних стилей для определения стилей непосредственно в том или ином элементе. 2) Использование внедренных таблиц стилей для определения стилей в начале web-страницы. При этом правила будут применяться только к элементам данного документа. 3) Использование внешних таблиц стилей для определения стилей отдельно в другом документе. Применение этого метода является наиболее рациональным способом с точки зрения разработки web-сайта и его сопровождения. При необходимости можно вносить нужные изменения в файлы описаний, и внешний вид документов web-сайта соответственно будет изменяться при отображении браузером. Работа с каскадными таблицами стилей в Microsoft FrontPage Внутренние стили Внутренние стили CSS применяются в программе FrontPage 2003 автоматически при использовании кнопок Стиль – Формат в различных диалоговых окнах (например: Свойства рисунка, Свойства таблицы, Свойства ячейки, Список, Разрыв) (рис. 1). При этом каждый объект настраивается индивидуально.
Рисунок 1 – Настройка внутренних стилей 63
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Внедренные стили Для определения стилей в начале web-страницы используется команда Формат – Стиль. В появившемся диалоговом окне Стиль (рис. 2) можно создать описание для селекторов тегов и селекторов классов. В списке Стили отображается список или тегов html или селекторов созданных пользователем, в зависимости от выбора в выпадающем меню Список. При выборе любого из селекторов в окнах Абзац и Знаки отображается, как будет выглядеть объект, к которому будет применен стиль, а в окне Описание выводится текстовое описание атрибутов данного стиля. Кнопка Удалить позволяет удалить выделенный селектор из списка Пользовательские стили. Кнопка Создать открывает диалоговое окно Создание стиля, в котором создаются новые селекторы. Кнопка Изменить открывает диалоговое окно Изменение стиля, которое полностью совпадает с окном Создание стиля и служит для изменения описания выделенного селектора. В случае изменения стиля для тега из списка Теги HTML этот селектор тэга переносится в список Пользовательские стили.
Рисунок 2 – Диалоговое окно Стиль
При работе с диалоговым окном Создание (Изменение) стиля (рис. 3) используются следующие поля и кнопки. В поле Имя (для выбора) вводится имя селектора; имя селектора класса начинается с точки (.). 64
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Кнопка Формат позволяет получить доступ к выпадающему списку, в котором можно выбрать следующие пункты: Шрифт – открывает диалоговое окно Шрифт, позволяющее создать стилевые настройки шрифта. Абзац – открывает диалоговое окно Абзац, которое позволяет установить абзацные отступы (слева и справа) от окна браузера, отступ для первой строки, настроить интервалы между строками и абзацами, настроить интервалы между словами в абзацах; Граница – открывает диалоговое окно Границы и заливка, с помощью которого можно установить границу для выделенного абзаца, залить абзац каким-либо цветом; Нумерация – открывает диалоговое окно Список, с помощью которого можно создать нумерованные, маркированные и другие списки; Положение – открывает диалоговое окно Положение, с помощью которого можно точно разместить различные элементы на странице.
Рисунок 3 – Окно Создание стиля 65
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Поле Образец отображает, как будет выглядеть объект, к которому будет применен созданный стиль. В поле Описание выводится текстовое описание атрибутов данного стиля. Выпадающее меню Тип стиля активно в случае создания селектора класса. При выборе типа Знак, в начало имени селектора добавляется слово span. К выделенным объектам селекторы применяются по-разному. Селекторы тегов применяются автоматически после выбора соответствующих команд. Селекторы классов применяются: путем выбора их из числа прочих стилей в выпадающем списке Стиль (рис. 4) на панели инструментов Форматирование; путем выбора из выпадающего окна Класс диалогового окна Изменение стиля, которое открывается кнопкой Стиль из различных диалоговых окон (например, Свойства рисунка, Свойства таблицы, Свойства ячейки, Рисунок 4 – Список стилей Список, Разрыв). При использовании внедренных таблиц стилей их необходимо настраивать для каждой web-страницы. Внешние таблицы стилей В этом случае для определения стилей CSS отводится отдельный файл, на который будут ссылаться web-страницы. Такой подход: 1) обеспечивает централизованное управление стилями CSS на всех web-страницах (внесенные изменения будут автоматически применяться сразу на всех web-страницах, которые ссылаются на файл, содержащий CSS); 2) уменьшается суммарный размер web-сайта; 3) увеличивается скорость загрузки web-страниц. Для создания внешнего файла, содержащего каскадные таблицы стилей, необходимо выполнить команду Файл – Создать и перейти по гиперссылке Другие шаблоны страниц из области задач Создание (рис. 5). 66
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
В открывшемся диалоговом окне Шаблоны страниц следует выбрать вкладку Таблицы стилей, на которой показаны шаблоны таблиц стилей, входящие в состав FrontPage 2003. Для самостоятельного создания таблицы стилей нужно выбрать шаблон Обычная таблица стилей. Полученную страницу с расширением .css необходимо сохранить в одну из папок web-сайта с именем, заданным обязательно латинскими буквами и расширением .css. Далее следует создать описание для селекторов тегов и селекторов классов, используя команду Формат – Стиль, которая открывает диалоговое окно Стиль (рис. 2).
Рисунок 5 – Создание внешнего файла стилей
Созданную таблицу стилей нужно связать со страницами web-сайта. Для этого необходимо выполнить команду Формат – Связи с таблицами стилей. В открывшемся диалоговом окне Связать с таблицей стилей (рис. 6) переключатели и кнопки выполняют следующие действия: 1) переключатель все страницы применяет стили ко всем выделенным страницам web-сайта; 2) переключатель выделенные страницы применяет стили к текущей странице или к web-страницам, выделенным на панели Список папок; 67
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
3) кнопка Добавить служит для добавления файла, содержащего каскадные таблицы стилей; 4) кнопка Удалить служит для удаления файла, содержащего каскадные таблицы стилей, из списка используемых таблиц стилей; 5) кнопки Вниз, Вверх позволяют регулировать порядок присоединения файлов с таблицами каскадных стилей к web-страницам (если используется несколько таблиц каскадных стилей); 6) кнопка Изменить открывает выделенный в окне адрес URL css-файла для редактирования.
Рисунок 6 – Окно Связать с таблицей стилей
Технология работы Работа в программе Блокнот 1. Создайте HTML-документ index.htm. Между тегами добавьте следующий текст:
– некоторый текст, который надо разместить по центру. – некоторый текст, который должен быть выровнен по обоим краям. Таким образом, в определении стиля было создано два класса для тега
: Center и Both. Для первого класса указано форматирование текста по центру, а для второго – по ширине. Для того чтобы указать, к какому именно классу принадлежит конкретный тег, используется атрибут CLASS. Если атрибут CLASS не указан, то будет применено форматирование, принятое по умолчанию (в случае с абзацем – выравнивание по левому краю). 70
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
6. Создание ID-селекторов Кроме задания классов элементов можно ссылаться на конкретный элемент, заданный уникальным идентификатором – ID-селектором. Это делается при помощи определения стиля, явно не привязанного ни к одному из элементов: # somename1 {color: blue} этот текст должен быть зеленым! Стиль, определенный как "somename1", будет применен к одноименному элементу, вне зависимости от того, чем этот элемент является. Важно только знать, что идентификатор (ID) элемента должен быть уникальным, т. е. на странице не должно быть более одного элемента с ID, равного, например, "somename1". Следует учитывать, что классы и идентификаторы могут быть как общими (как в примере с ID), так и привязанными к типу элемента (как в примере с классами для ). Например, если задать класс, определенный для , другому тегу, то такая запись не сработает. Поэтому если необходимо создать класс, который может использоваться с любыми элементами, следует применить следующий синтаксис: .Center {text-align: center;} Работа в Microsoft FrontPage 2003 1. Создайте web-сайт «Наша группа», используя шаблон Пустой вебузел. 2. Используйте файл внешней таблицы стилей CSS style.css и свяжите его со всеми страницами web-узла. 3. Внесите изменения в style.css. Задайте следующие свойства ссылок для всех страниц: цвет и оформление ссылки; цвет и оформление посещенной ссылки; цвет и оформление активной ссылки; цвет и оформление ссылки, в момент нахождения курсора мыши над ней. Контрольные вопросы 1. Какие существуют методы добавления таблиц стилей на web-страницу? 2. Почему CSS называют «каскадными»? В чем это проявляется? 71
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
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 (ОК-12, ПК-4). Обеспечивающие средства: персональный компьютер, операционная система Windows, Microsoft FrontPage 2003. Задание: создать сайт, содержащий формы. Требования к отчету: итоги выполнения лабораторной работы представить в виде html-документа и ответов на контрольные вопросы. 72
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Теоретические сведения Формы предназначены для сбора информации от посетителей webстраницы. После заполнения пользователем формы и запуска процесса ее обработки информация из нее попадает к программе, работающей на сервере. Также они применяются для разработки интерфейса следующих приложений: поисковые службы, информационные базы данных, онлайновые справочники, заказные центры на товары и услуги, гостевые и регистрационные книги пользователей в различных электронных службах. Для размещения форм в HTML применяется тег ... . Основными элементами, используемыми в формах, являются: текстовое поле (однострочное или прокручиваемое); флажок для указания выбираемых элементов; переключатель для выбора одного из нескольких предлагаемых вариантов ответа; открывающееся меню для выбора элемента из списка; кнопки. Тег имеет следующие атрибуты: NAME – имя формы; METHOD (GET или POST) – определяет, как должны обрабатываться входные данные из формы (метод отправки данных на сервер). GET – передача данных посредством переменных окружения сервера (по умолчанию), POST – передача данных в стандартном потоке ввода/вывода сервера; ACTION – адрес, по которому будет отправлено содержимое формы (URL получателя данных). В качестве получателя данных может выступать CGI сценарий (Common Gateway Interface, общий шлюзовой интерфейс) обработки данных (путь к сценарию на сервере) или ссылка на адрес электронной почты – mailto: e-mail; TARGET – окно назначение для отображения результатов обработки данных на web-сервере (по умолчанию текущее окно). ACCEPT-CHARSET – список кодировок для вводимых данных (с разделителями – пробелами или запятыми); 73
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
ACCEPT – список типов содержания формы для отправки серверу (с разделителями – запятыми). ENCTYPE – определяет способ кодирования содержимого формы при отправке, если указан метод POST. По умолчанию используется значение "application/x-www-form-urlencoded". Например: Кроме вышеперечисленных элементов форм в контейнере ... могут находиться теги HTML, задающие форматирование элементов формы и ее структуру. Рассмотрим элементы форм. Определение элементов управления формы — тег Данный тег, используемый для определения области внутри формы, куда вводятся данные, не имеет конечного тега и должен располагаться между тегами . Он формирует поле для ввода информации пользователем. Это может быть текстовое поле, флажки, переключатели или кнопки. Атрибуты тега представлены в таблице 1. Атрибут ALIGN может принимать следующие значения: Left – выровнять по левому краю; Right – выровнять по правому краю; Top – выровнять верхнюю кромку изображения по верхней линии текущей текстовой строки; Middle – выровнять базовую линию текущей текстовой строки по центру изображения; Bottom – выровнять нижнюю кромку изображения по базовой линии текущей текстовой строки. Таблица 1 – Атрибуты тега Атрибут
NAME VALUE
Описание
имя, необходимое для доступа к данному элементу управления значение элемента управления или надпись на кнопке 74
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Атрибут
Описание
TYPE
тип элемента управления (вид поля ввода определяется значением атрибута TYPE) SIZE определяет размер текстового поля в символах CHECKED логический атрибут-флаг; для флажка и переключателя указывает, установлены ли они MAXопределяет максимальное количество символов, которые LENGHT можно ввести в текстовое поле SRC задает адрес рисунка, используемого при создании кнопки ALIGN указывает способ выравнивания изображения в документе READONLY определяет элемент как пригодный только для чтения DISABLED определяет элемент как недоступный Атрибут TYPE может принимать следующие приведенные ниже значения: TEXT – текстовое поле ввода (используется тогда, когда пользователю необходимо ввести небольшое количество текста). TEXTAREA – текстовое поле. PASSWORD – поле ввода пароля (вводимые символы заменяются звездочками). CHECKBOX – элемент «флажок». RADIO – элемент «переключатель». RESET – кнопка сброса введенных значений (кнопка, при нажатии на которую браузер очищает форму от введенных пользователем значений). Если в форме используется атрибут RESET, тег может дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки. SUBMIT – кнопка отправки формы (кнопка, при нажатии на которую браузер отправляет данные, введенные пользователем в форму, на обработку серверу (атрибут action), заданным методом (атрибут method)); HIDDEN – скрытые поля. Добавление в тег атрибута TYPE="HIDDEN" позволит включить в отправляемую форму значения атрибутов NAME и VALUE, 75
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
которые пользователь изменить не может. Такие метки полезны при наличии нескольких форм для дальнейшей обработки данных. BUTTON – кнопка. FILE – дает возможность пользователю прикрепить файл к текущей форме. Создание многострочных областей ввода текста – тег В зависимости от типа формы может потребоваться организовать ввод большого количества текста. В таких случаях используется тег для создания текстового поля из нескольких строк. В таблице 2 представлены атрибуты тега . Таблица 2 – Атрибуты тега Атрибут
Описание
NAME
определяет наименование поля
COLS
указывает (в символах) число колонок, содержащихся в текстовой области
ROWS
задает количество видимых строк текстовой области
READONLY
определяет элемент как доступный только для чтения
DISABLED
определяет элемент как недоступный Использование списков в форме – тег
Когда формы HTML становятся более сложными, в них часто включают списки с прокруткой и выпадающие меню. Для этого используют тег с атрибутом TYPE="select". Для определения списка пунктов используют тег . Тег поддерживает три необязательных атрибута: NAME, MULTIPLE и SIZE. Атрибут NAME – определяет наименование объекта. Атрибут MULTIPLE – позволяет выбрать более чем одно наименование. Атрибут SIZE – определяет число видимых пользователю пунктов списка. Если в форме установлено значение атрибута SIZE=1, то браузер 76
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
выводит на экран список в виде выпадающего меню. В случае SIZE > 1 браузер представляет на экране обычный список. В форме может использоваться тег только внутри тега . Эти теги поддерживают два дополнительных атрибута: SELECTED и VALUE. Атрибут SELECTED – используется для первоначального выбора значения элемента по умолчанию. Атрибут VALUE – указывает на значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно значению тега . Работа с формами в Microsoft FrontPage 2003 Чтобы добавить в форму поле формы, нужно выполнить команду Вставка – Форма и выбрать нужное поле формы из списка. Для изменения размера поля необходимо выделить его и потянуть нажатой левой кнопкой мыши за одну из сторон. Свойства любого поля формы устанавливаются в диалоговом окне, которое можно открыть двойным щелчком левой кнопки мыши на поле. На рис. 1 представлено окно Свойства переключателя. Поле Последовательность перехода определяет последовательность заполнения полей формы в браузере. Кнопку Проверить в этом окне можно использовать только в том случае, если используется станРисунок 1 – Окно Свойства переключателя дартный обработчик форм FrontPage 2003. Кнопка Стиль этого окна позволяет изменить шрифт и цветовое оформление поля. Можно вставить следующие поля формы: Поле – однострочное текстовое поле, которое применяется для ввода короткого сообщения, например имен и фамилий или адресов электронной почты. Параметры поля (имя, начальное значение, 77
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
ширина в знаках) устанавливаются в диалоговом окне Свойства текстового поля. Текстовое поле – используются для ввода одной или нескольких строк текста, например комментария. Это поле прокручивается, что позволяет вводить в него тексты разного объема. Параметры поля (имя, начальное значение, ширина в знаках, число строк) устанавливаются в диалоговом окне Свойства текстового поля. Поле отправки файла – служит для отправки файла на web-сервер в указанную папку web-сайта, состоит из поля для ввода имени файла и кнопки обзор, которая позволяет открыть диалоговое окно Выбор файла. Параметры поля (имя, ширина в знаках) устанавливаются в диалоговом окне Свойства поля отправки файла. Флажок – служит для организации выбора элемента, пользователь может установить или снять флажок по своему усмотрению. Параметры поля (имя, значение, начальное состояние) устанавливаются в диалоговом окне Свойства флажка. Переключатель – служит для организации выбора из списка, в котором можно выбрать только одно значение. Параметры поля (имя, значение, начальное состояние) устанавливаются в диалоговом окне Свойства переключателя. Раскрывающийся список – служит для организации выбора из раскрывающегося списка одного или нескольких вариантов. Заполнение поля (кнопки Добавить, Изменить, Удалить, Вверх, Вниз) и его параметры (имя, высота в строках, разрешение выбора нескольких элементов) устанавливаются в диалоговом окне Свойства раскрывающегося списка. При заполнении поля (кнопки Добавить, Изменить) открывается дополнительное диалоговое окно Добавление или Изменение варианта. Кнопка – позволяет вставить кнопку для отправки данных формы (тип Submit) или для удаления данных из полей формы (тип Reset). Параметры кнопки (имя, подпись, тип) устанавливаются в диалоговом окне Свойства кнопки. Расширенная кнопка – позволяет вставить кнопку аналогичную обычной (Кнопка). Отличие состоит в том, что размер кнопки и надпись на ней можно изменять, не пользуясь диалоговым окном Свойства расширенной кнопки. 78
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок – служит для выбора рисунка, который будет иметь те же свойства, что и кнопка Отправить. Надпись – служит для создания надписи, связанной с каким-либо полем формы. Для организации такой надписи необходимо выделить поле формы и текст, далее выполнить команду для вставки надписи. В результате будет установлена связь между полем формы и текстовой надписью, которая будет обведена серой штриховой линией. Группа – служит для создания видимой рамки с подписью, которую можно использовать для группировки полей формы по разделам. Параметры группы (надпись, выравнивание) устанавливаются в диалоговом окне Свойства группы. Внутри формы кроме полей формы можно вставлять любые объекты (текст, таблицы, рисунки) для улучшения внешнего вида web-страницы. Область формы отображается в пунктирной рамке, которая видна только в режиме Конструктор. Для задания свойств формы нужно установить курсор внутри формы и выполнить команду Вставка – Форма – Свойства формы или выбрать команду контекстного меню Свойства формы. В результате открывается диалоговое окно Свойства формы (рис. 2), в котором устанавливаются различные параметры формы. Раздел Сохранение результатов (2) определяет конечный сценарий обработки данных формы. В случае использования собственных сценариев необходимо установить переключатель В другом месте (3) и из списка выбрать Настраиваемый сценарий. Поле Имя формы (4) служит для указания имени формы. Кнопка Конечная рамка открывает диалоговое окно Конечная рамка (5), в котором можно выбрать окно, из которого будет делаться запрос. Кнопка Параметры (6) открывает диалоговое окно Параметры обработчика форм (7). В поле Действие (8) указывается имя скрипта для обработки формы или mailto:e-mail для отправки данных формы на адрес электронной почты e-mail. В поле Метод (9) выбирается способ передачи данных (GET – способ передачи данных через адресную строку, POST – способ передачи данных 79
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2 – Настройка параметров формы
в теле HTTP запроса). В поле Тип кодировки (10) указывается тип кодировки данных формы при отправке на web-сервер. Возможные типы кодировок: application/x-www-form-urlencoded – данные формы кодируются как пары имени и значения, используется по умолчанию; multipart/form-data – данные формы кодируются как сообщение с отдельными частями для каждого элемента управления на странице, используется для отправки форм, содержащих файлы; text/plain – данные формы кодируются как открытый текст, без управляющих и форматирующих символов, используется для отправки данных на адрес электронной почты. Чтобы создать форму, можно также воспользоваться готовыми шаблонами или мастером создания форм. Для этого в области задач Создание страницы (команда Файл – Создать) нужно выбрать команду Другие шаблоны страниц, перейти на вкладку Общие. Выбор одного из шаблонов: Гостевая книга, Регистрационная форма, Страница поиска, Форма обратной связи – позволяет создать новую web-страницу с типовой формой. 80
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Выбор шаблона Мастер страницы формы запускает мастер страницы формы для определения количества, типа, содержания элементов формы. Технология работы Работа в программе Блокнот 1. Запустите Блокнот. 2. Введите: Форма Анкета студента
Фамилия:
Имя: Отчество: Пол мужской Пол женский Ваш адрес: Пароль: Изучение какой дисциплины вызывает у Вас наибольшие трудности?
Web-технологии ИТ-технологии Математика Выберите дисциплину, вызывающую у Вас наибольший интерес Web-технологии Математика
3. Сохраните документ под именем anketa.htm в своей рабочей папке. 4. Просмотрите сохраненный документ в браузере Internet Explorer. Работа в Microsoft FrontPage 2003 1. Создайте страницу Гостевой книги, используя готовый шаблон MS FrontPage (шаблон Гостевая книга). 2. Создайте фон, соответствующий следующему значению цвета #A7D3DA. 81
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
3. Для графического оформления страницы воспользуйтесь следующими Интернет-ресурсами: www.webman.ru/animation/main.htm http://shpak.narod.ru/collection1.htm http://www.animation-central.com http://www.animationlibrary.com 4. Создайте фон, соответствующий следующему значению цвета – #A7D3DA. 5. Добавьте в документ заголовок «Анкета» и сделайте с него ссылку на файл anketa.htm. Контрольные вопросы 1. Какие теги используются для создания в форме переключателей? 2. Какие значения может принимать атрибут TYPE? 3. Каким образом в форме можно задать раскрывающийся список? 4. Каким образом в MS FrontPage 2003 создать элемент Флажок? 5. Как в MS FrontPage 2003 создать форму на основе готового шаблона? Лабораторная работа № 8 Фрейм как механизм структурирования документов 4 часа Цель работы: получить представление о создании сайтов на основе фреймовой структуры. Задачи работы: 1) ознакомиться с понятием фреймовой структуры web-страницы, особенностями использования фреймов; 2) овладеть практическими навыками создания фреймовой структуры средствами MS FrontPage 2003. Формируемые компетенции: готовность к овладению основными методами, способами и средствами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией (ОК-12); готовность к овладению перспективными методами библиотечно-информационной деятельности на основе информационно-коммуникационных технологий (ПК-4). 82
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
В результате выполнения лабораторной работы студент должен: знать: теги, определяющие фреймовую структуру документов (ОК-12, ПК-4); уметь: задавать фреймовую структуру (ОК-12, ПК-4); владеть: навыками создания сайтов на основе фреймовой структуры (ОК-12, ПК-4). Обеспечивающие средства: персональный компьютер, операционная система Windows, Microsoft FrontPage 2003. Задание: создать сайт, используя фреймовую структуру. Требования к отчету: итоги выполнения лабораторной работы представить в виде html-документа и ответов на контрольные вопросы. Теоретические сведения Фреймы – средство для разделения окна браузера на несколько областей, в каждой из которых отображается содержимое отдельной web-страницы. В отличие от обычных документов документы с фреймовой структурой не содержат никакой информации для предоставления пользователю, а служат для разделения рабочей области браузера на несколько отдельных окон, в которые и загружаются несущие информацию документы. Каждая область может иметь свои полосы прокрутки и ее просмотр с помощью них не влияет на остальные области. Макетирование фреймов – тег Тег определяет набор создаваемых фреймов и их расположение в окне браузера. У тега только два возможных атрибута: ROWS и СОLS. COLS – задает расположение фреймов по горизонтали, может принимать значения в пикселях, процентах либо в относительных единицах, значения перечисляются через запятую. ROWS – задает расположение фреймов по вертикали, может принимать значения в пикселях, процентах либо в относительных единицах, значения перечисляются через запятую. 83
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Например, следующая запись формирует экран, состоящий из трех строк: высота верхней – 20 пикселов, средней – 80 пикселов, нижней – 20 пикселов:
Следующий тег – – создает экран, на котором верхняя строка занимает 10 % высоты экрана, средняя – 60 %, а нижняя – оставшиеся 30 %:
Можно задать относительные значения в комбинации с фиксированными, выраженными в процентах или пикселях. Например, следующий тег создает экран, на котором верхняя строка имеет высоту 20 пикселов, средняя – 80 пикселов, а нижняя занимает все оставшееся место:
Тег определяет содержимое каждого конкретного фрейма. Он всегда должен быть вложенным в контейнер FRAMESET. Количество тегов должно соответствовать указанному числу строк. Этот тег не имеет закрывающего тега, поскольку в нем ничего не содержится. Вся суть тега в его атрибутах. В таблице 1 представлены атрибуты тега . Таблица 1 – Атрибуты тега Атрибут
Описание
NАМЕ задает имя фрейма MARGINWIDTH задает горизонтальный отступ между содержимым фрейма и его границами MARGINHEIGHT задает поля в верхней и нижней частях фрейма SCROLLING дает возможность пользоваться прокруткой во фрейме NORESIZE указывает браузеру, что пользователь не может изменять размеры фрейма. Если этот атрибут не указан, то у пользователя есть возможность изменять размер фрейма SRC содержит URL загружаемого во фрейм документа, является обязательным WIDTH ширина фрейма в процентах от ширины родительского окна или в пикселях HEIGHT высота фрейма в процентах от высоты родительского окна или в пикселях 84
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Атрибут
Описание
FRAMEBORDER указывает, выводить или нет рамку данного фрейма. Если указано 1, то рамка рисуется (это значение принято по умолчанию). Чтобы скрыть рамку, следует указывать 0 Возможные варианты атрибута SCROLLING: yes – во фрейме всегда будут полосы прокрутки, даже если в этом нет необходимости; nо – полос прокрутки не будет, даже когда это необходимо. Если документ слишком большой, а задан режим без прокрутки, документ будет обрезан; аutо – браузер сам определяет, требуются полосы прокрутки или нет. При отсутствии атрибута SCROLLING, результат будет таким же, как при использовании SCROLLING="аutо". В случае, если браузер не поддерживает фреймы, для этого после определения набора фреймов тегом в документ вставляется тег , внутри которого размещают либо альтернативное содержание, либо пояснительный текст. Пример Пример фреймов
Вы просматриваете эту страницу с помощью браузера, не поддерживающего фреймы.
HTML-страница, соответствующая этому коду, представлена на рис. 1. Левое окно занимает 25 % экрана и содержит страницу с названием menu.htm. Окно справа занимает 75 % экрана и содержит файл main.htm. Атрибут TARGET определяет имя фрейма, в котором будет открыт документ. Ссылки на фрейм имеют формат: ссылка 85
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Кроме имён, определяемых непосредственно пользователем, используют следующие стандартные имена: blank – открывает ссылку в новом окне (загружает содержимое страницы, заданной ссылкой, в новом пустом окне); top – открывает ссылку на всё окно, если она находилась во фрейме; parent – открывает ссылку в родительском окне (загружает содержимое страницы, заданной ссылкой, в окно, которое содержит ссылку); self – загружает содержимое страницы, заданной ссылкой, в окно, игнорируя используемые фреймы.
Рисунок 1 – Пример задания фреймовой структуры
Использование атрибута TARGET для загрузки страницы в определенный фрейм Создание фреймов в Microsoft FrontPage 2003 С помощью программы MS FrontPage 2003 можно создавать различные фреймовые структуры, вставлять встроенные фреймы и в зависимости от характера представляемой информации организовывать соответствующие гиперссылки. Все команды, связанные с фреймовой структурой, переведены со словом «рамки». Для организации фреймовой структуры необходимо выбрать команду Файл – Создать и выбрать команду Другие шаблоны страниц из области задач Создание. В открывшемся диалоговом окне Шаблоны страниц выбрать вкладку Страница рамок, на которой показаны шаблоны web-страниц c фреймовой структурой, входящие в состав 86
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
MS FrontPage 2003 (рис. 2). Далее необходимо выделить наиболее подходящий шаблон и нажать кнопку "OK".
Рисунок 2 – Создание страницы с фреймовой структурой
Окно новой web-страницы фреймов (рис. 3) будет разбито на части в соответствии с выбранной структурой.
Рисунок 3 – Страница с фреймовой структурой 87
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Эту страницу необходимо сохранить (Файл – Сохранить) в одну из папок web-узла с именем, заданным обязательно латинскими буквами. Далее необходимо определиться с начальными страницами фреймовой структуры, т. е. с теми которые будут видны при открытии страницы фреймов. Это можно сделать двумя способами. 1) Кнопка Задать начальную страницу позволяет выбрать уже готовую web-страницу сайта в окне Добавление гиперссылки. 2) Кнопка Создать страницу загружает во фрейм новую пустую web-страницу, редактирование которой может быть выполнено обычным образом. Если часть фреймов заполняется с помощью кнопки Создать страницу, то при сохранении страницы фреймов (Файл – Сохранить) отдельно сохраняется каждая новая web-страница. При работе со страницей фреймов на панели вкладок представления появляется еще одна вкладка Без рамок. В этом режиме редактируется содержимое, которое будет отображаться в браузере, если он не поддерживает показ фреймов. Работа над web-страницами, входящими во фреймовую структуру, возможна как по отдельности, так и через страницу фреймов. Для выбора одного из фреймов нужно нажать на него левой кнопкой мыши. Активный фрейм отличается от прочих цветной рамкой. Если нажать левой кнопкой мыши на внешнюю рамку страницы фреймов, то выделенной окажется вся фреймовая структура. Границы фреймов можно перемещать нажатой левой кнопкой мыши. Для работы с выделенным фреймом можно воспользоваться командами меню Рамки. Команда Разделить рамку позволяет разбить фрейм на две части по вертикали или горизонтали. Команда Удалить рамку удаляет фрейм из страницы фреймов. При этом если web-страница, загружаемая в этот фрейм, была сохранена ранее, она остается в структуре web-сайта. Команда Открыть страницу в новом окне открывает web-страницу фрейма для редактирования отдельно от фреймовой структуры. Команды Сохранить страницу, Сохранить страницу как позволяют сохранить данную web-страницу отдельно от остальных страниц фреймов. 88
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Команда Свойство рамки открывает диалоговое окно Свойства рамки, в котором можно задать различные параметры фрейма: имя, описание, размеры, ширина и отображение границ, свойства полос прокрутки, отступы. Еще один вариант использования фреймов – вставка в обычную webстраницу встроенного фрейма (рамки) (рис. 4) командой Вставка – Встроенная рамка. В результате в том месте, где был установлен курсор, вставляется рамка, которую можно заполнить двумя способами: Задать начальную страницу или Создать страницу.
Рисунок 4 – Встроенный фрейм
Щелчок левой кнопкой мыши на границу рамки, выделяет фрейм для изменения его размеров. Двойной щелчок левой кнопкой мыши на границу рамки открывает диалоговое окно Свойства встроенной рамки, в котором можно задавать различные параметры фрейма: имя фрейма, название, размеры, отступы, выравнивание, замещающий текст. При организации гиперссылок между web-страницами фреймовой структуры необходимо с помощью кнопки Выбор рамки в окне Добавление гиперссылки открыть диалоговое окно Конечная рамка (рис. 5) и указать, куда будет загружаться новый объект. Поле Текущая страница рамок позволяет выбрать фрейм для загрузки нового объекта. В списке Общие объекты возможен выбор следующих вариантов: Страница по умолчанию (загрузка в тот фрейм, который определен по умолчанию), Та же рамка (загрузка в тот же фрейм, откуда организовывалась гиперссылка), Страница целиком (загрузка в то же окно с удалением фреймовой структуры), Новое окно (загрузка в новое окно браузера), Родительская рамка (загрузка в старший родительский фрейм). 89
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 5 – Диалоговое окно Конечная рамка
Созданную страницу с фреймовой структурой можно сохранить как шаблон для последующего использования. При этом шаблон будет добавлен к набору шаблонов программы FrontPage. Чтобы сохранить собственный шаблон страницы с фреймами, необходимо выбрать команду меню Файл – Сохранить как. На экране появится стандартный диалог сохранения файлов Сохранить как. В открывающемся списке Тип файла выберите Шаблоны FrontPage. В поле ввода Имя файла укажите имя файла шаблона и нажмите кнопку Сохранить. На экране появится диалог Сохранить как шаблон. В поле ввода Название укажите название шаблона, которое будет отображаться в списке шаблонов при создании новой страницы. В поле ввода Описание можно кратко описать назначение и вид шаблона. Флажок Сохранить шаблон на текущем Web-узле определяет, будет ли шаблон доступен в любом сайте или только в текущем. Нажмите кнопку ОК. Шаблон будет сохранен. Теперь можно использовать собственный шаблон при создании новой страницы с фреймами, выбирая его в списке шаблонов диалога Шаблоны страниц. 90
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Технология работы Работа в программе Блокнот 1. Запустите Блокнот и создайте следующую HTML-страницу с фреймовой структурой (рис. 6). 2. Средний фрейм выполните с полосой прокрутки.
Рисунок 6 – HTML-страница с фреймовой структурой
Работа в Microsoft FrontPage 2003 1. Создайте сайт «История библиотек» на основе фреймовой структуры. 2. Для задания фреймовой структуры выберите Шаблон Объявление и оглавление. В верхний фрейм поместите заголовок «История библиотек». Левый фрейм должен содержать страницу со следующей панелью навигации: Библиотеки Древнего Востока Библиотеки в эпоху античности и в эпоху эллинизма Средневековые библиотеки Библиотеки в XV–XVII веках Библиотеки XVIII века Библиотеки XIX века Библиотеки в ХХ веке 91
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
3. Используя атрибут target, создайте на основе текстовых фрагментов левого фрейма гиперссылки, при нажатии на которые в главный фрейм произойдет загрузка соответствующих страниц. 4. При создании сайта используйте материалы интернет-ресурса «Мир библиотек» (http://www.library.ru/3/event/) Контрольные вопросы 1. Что такое фреймы? 2. Какой тег определяет набор создаваемых фреймов и их расположение в окне браузера? 3. Перечислите атрибуты тега . 4. Как создать страницу с фреймовой структурой в MS FrontPage 2003? 5. Как сохранить собственный шаблон страницы с фреймами в MS FrontPage 2003? 4 ОБРАЗОВАТЕЛЬНЫЕ ТЕХНОЛОГИИ В ходе обучения используются следующие виды образовательных технологий: при проведении лекций и лабораторных работ: традиционные образовательные технологии, мультимедийные и телекоммуникационные технологии; в самостоятельной работе студентов: информационные образовательные технологии (документы в электронном виде, размещенные в электронной образовательной среде КемГУКИ). В соответствии с требованиями ФГОС ВПО необходимо предусматривать широкое использование в учебном процессе интерактивных форм проведения занятий: проблемное изложение материала, разработка и защита творческих работ в виде учебных исследовательских проектов – создание сайтов, электронных выставок и коллекций. Удельный вес занятий, проводимых в интерактивных формах, равен 9 часам на очной форме обучения (25 % аудиторных занятий), 3 часам – на заочной форме, что составляет 30 % аудиторных занятий. Текущий и рубежный контроль знаний студентов осуществляется на лабораторных занятиях и при защите учебных проектов. Итоговый контроль – в форме зачета. 92
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
5 МАТЕРИАЛЬНО-ТЕХНИЧЕСКОЕ ОБЕСПЕЧЕНИЕ ДИСЦИПЛИНЫ Наличие учебных лабораторий, оснащенных проекционной и компьютерной техникой, интегрированной в Интернет. 6 КОНТРОЛЬНО-ИЗМЕРИТЕЛЬНЫЕ МАТЕРИАЛЫ 6.1 Тесты для самоконтроля 1. Выбрать вариант правильного ответа КАКОЙ АТРИБУТ ТЕГА НАЧИНАЕТ НУМЕРАЦИЮ СПИСКА С ОПРЕДЕЛЁННОГО ЗНАЧЕНИЯ? 1) BEGIN; 2) TYPE; 3) VALUE; 4) START. 2. Установить соответствие для тегов: 1) Тег форматирования текста А. 2) Тег организации списка В. 3) Тег организации заголовка таблицы С. 3. Дополнить XML-документ считается синтаксически корректным, если документ является структурно корректным и __________________________________ 4. Выбрать вариант правильного ответа ДЛЯ ВЫДЕЛЕНИЯ ЦИТАТ ИСПОЛЬЗУЕТСЯ ТЕГ: 1) ; 2) 3) 4) 5. Выбрать вариант правильного ответа ОТСУТСТВИЕ В ТЕГЕ АБЗАЦА АТРИБУТА ALIGN ПРИВОДИТ К ВЫРАВНИВАНИЮ ТЕКСТА ПО: 1) ШИРИНЕ; 2) ЛЕВОМУ КРАЮ; 3) ПРАВОМУ КРАЮ; 4) ЦЕНТРУ. 93
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
6. Выбрать вариант правильного ответа КАКОЙ АТРИБУТ СЛУЖИТ ДЛЯ ОБЪЕДИНЕНИЯ СТРОК В ТАБЛИЦЕ? 1) BORDER; 2) COLSPAN; 3) AREA; 4) ROWSPAN. 7. Выбрать вариант правильного ответа УКАЖИТЕ ОБЯЗАТЕЛЬНЫЙ АТРИБУТ ТЕГА FRAME? 1) HREF; 2) SRC; 3) ALIGN; 4) BORDER. 8. Выбрать вариант правильного ответа КАКОЙ ТЕГ НЕОБХОДИМО ИСПОЛЬЗОВАТЬ ДЛЯ СОЗДАНИЯ НУМЕРОВАННОГО СПИСКА? 1) ; 2) ; 3)
; 4)
. 9. Установить соответствие для тегов: 1) Тег логического форматирования текста А. 2) Тег создания заголовка В. 3) Тег организации гиперссылки С. 10. Выбрать вариант правильного ответа КАКОЙ HTML-КОД ПРЕДНАЗНАЧЕН ДЛЯ ВЫВОДА ИЗОБРАЖЕНИЯ С ВСПЛЫВАЮЩЕЙ ПОДСКАЗКОЙ? 1) ; 2) ; 3) . 14. Выбрать вариант правильного ответа КАКОГО ТЕГА НЕ СУЩЕСТВУЕТ? 1)
, ОПРЕДЕЛЯЮЩИЙ СВОБОДНОЕ ПРОСТРАНСТВО МЕЖДУ СОДЕРЖИМЫМ ЯЧЕЕК И ИХ ГРАНИЦАМИ. 1) CELLPADDING; 2) CELLSPACING; 3) HSPACE; 4) VSPACE. 95
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
16. Выбрать вариант правильного ответа ВЫБЕРИТЕ СРЕДИ ПЕРЕЧИСЛЕННЫХ АТРИБУТОВ АТРИБУТ ТЕГА . 1) COLS; 2) SRC; 3) TYPE; 4) MAXLENGHT. 17. Выбрать вариант правильного ответа ДЛЯ СОЗДАНИЯ СПИСКОВ В ФОРМЕ ИСПОЛЬЗУЕТСЯ ТЕГ: 1) ; 2) ; 3) ; 4)
. 18. Выбрать вариант правильного ответа КАКОЙ ТЕГ НЕ ЯВЛЯЕТСЯ ТЕГОМ ФОРМАТИРОВАНИЯ ТАБЛИЦЫ? 1)
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
20. Выбрать вариант правильного ответа КАКОЙ ТЕГ НЕОБХОДИМО ИСПОЛЬЗОВАТЬ ДЛЯ СОЗДАНИЯ НУМЕРОВАННОГО СПИСКА? 1) ; 2) ; 3)
; 4)
. КЛЮЧИ К ТЕСТАМ ДЛЯ САМОКОНТРОЛЯ № вопроса
Ответы
№ вопроса
Ответы
1
3
11
2
2
1 - С, 2 – А, 3 - В
12
1
3
соответствует всем правилам, изложенным в соответствующем DTD-описании
13
2
4
1
14
4
5
2
15
2
6
4
16
1
7
2
17
3
8
2
18
4
9
1 - С, 2 – В, 3 - А
19
1
10
2
20
2
6.2 Тематика проектного обучения 1. Разработка и защита отчета об оформлении сайта при помощи CSS-стилей. 2. Разработка и защита отчета о создании электронной выставки на основе таблиц. 3. Разработка и защита отчета о создании электронной коллекции на основе фреймовой структуры. 4. Разработка и защита отчета о добавлении в HTML-страницу пользовательской формы. 97
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
6.3 Вопросы к зачету 1. Стандартный обобщенный язык разметки SGML. Структура документа. Достоинства и недостатки. 2. Стандартный обобщенный язык разметки SGML. DTD-описания. 3. Язык разметки XML. Требования к языку разметки XML. 4. Диалекты XML. 5. Язык гипертекстовой разметки HTML: история развития, преимущества и недостатки. 6. Принципы гипертекстовой разметки. Структура HTML-документа. 7. Классификация тегов НТМL. 8. Логическое форматирование текста. 9. Физическое форматирование текста. 10. Представление цвета в HTML. 11. Гиперссылки в HTML. 12. Работа с изображениями. 13. Создание списков в HTML. Упорядоченные, неупорядоченные списки. 14. Вложенные неупорядоченные, неупорядоченные списки. 15. Форматирование табличных данных. 16. Использование форм в документах. 17. Использование фреймовых структур в HTML-документах. 18. Каскадные таблицы стилей: использование внутренних стилей. 19. Каскадные таблицы стилей: использование внедренных таблиц стилей. 20. Каскадные таблицы стилей: использование внешних таблиц стилей.
7 УЧЕБНО-БИБЛИОГРАФИЧЕСКОЕ И ИНФОРМАЦИОННОЕ ОБЕСПЕЧЕНИЕ ДИСЦИПЛИНЫ 7.1 Список литературы Основная литература 1. Алексеев, А. П. Введение в Web-дизайн [Электронный ресурс]: учеб. пособие / А. П. Алексеев. – Электрон. дан. – Москва: СОЛОН-ПРЕСС, 2008. – 185 c. – Университетская библиотека online: электрон. библ. система. – Режим доступа: http://www.biblioclub.ru/book/117877/ 98
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
2. Бройдо, В. Л. Архитектура ЭВМ и систем [Текст]: учеб. для вузов / В. Л. Бройдо, О. П. Ильина. – Санкт-Петербург: Питер, 2009. – 720 с. 3. Диков, А. В. Веб-технологии HTML и CSS [Электронный ресурс]: учеб. пособие / А. В. Диков. – Электрон. дан. – Москва: Директ-Медиа, 2012. – 78 с. – Университетская библиотека online: электрон. библ. система. – Режим доступа: http://www.biblioclub.ru/book/96968/ 4. Информатика: учебник [Текст] / под ред. В. В. Трофимова. – 2-е изд., испр. и доп. – Москва: ИД Юрайт, 2013. – 916 с. Дополнительная литература 5. Бердышев, С. Н. Искусство оформления сайта [Электронный ресурс]: практическое пособие / С. Н. Бердышев. – Электрон. дан. – Москва: Дашков и Ко, 2010. – 148 c. – Университетская библиотека online: электрон. библ. система. – Режим доступа: http://www.biblioclub.ru/ 79153_Iskusstvo_oformleniya_saita_Prakticheskoe_posobie.html 6. Буяковская, И. А. Создание гипертекстовых справочных систем [Электронный ресурс]: учеб. пособие / И. А. Буяковская. – Электрон. дан. – Новокузнецк: Кузбасская государственная педагогическая академия, 2007. – 98 с. – Университетская библиотека online: электрон. библ. система. – Режим доступа: http://www.biblioclub.ru/88673_Sozdanie_ gipertekstovykh_spravochnykh_sistem_Uchebnoe_posobie.html 7. Вернике, Д. Язык географической разметки KML [Электронный ресурс]: практ. пособие / Т. Б. Веселкова, А. С. Кабанов. – Электрон. дан. – Москва: Дашков и Ко, 2011. – 89 c. – Университетская библиотека online: электрон. библ. система. – Режим доступа: http://www. biblioclub.ru/book/78928/ 8. Веселкова, Т. Б. Эффективная эксплуатация сайта [Электронный ресурс]: практ. / Т. Б. Веселкова, А. С. Кабанов. – Электрон. дан. – Москва: Дашков и Ко, 2011. – 89 c. – Университетская библиотека online: электрон. библ. система. – Режим доступа: http://www.biblioclub.ru/ book/78928/ 9. Загуменов, А. П. Как раскрутить и разрекламировать web-сайт в сети Интернет [Электронный ресурс]: практ. пособие / А. П. Загуменов. – Электрон. дан. – Минск: ДМК Пресс, 2010. – 384 c. – Университетская библиотека online: электрон. библ. система. – Режим доступа: http://www.biblioclub.ru/book/85114/ 99
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
10. Калмыкова, О. В. Студент в информационно-образовательной среде [Электронный ресурс]: практ. пособие / О. В. Калмыкова. – Электрон. дан. – Москва: Евразийский открытый институт, 2011. – 104 c. – Университетская библиотека online: электрон. библ. система. – Режим доступа: http://www.biblioclub.ru/book/93227/ 11. Пилко, И. С. Информационные и библиотечные технологии [Текст]: учеб. пособие / И. С. Пилко. – Санкт-Петербург: Профессия, 2006. – 344 с. 12. Понфилов, К. С. По ту сторону веб-страницы [Электронный ресурс]: практ. пособие / К. С. Понфилов. – Электрон. дан. – Москва: ДМК Пресс, 2008. – 440 c. – Университетская библиотека online: электрон. библ. система. – Режим доступа: http://www.biblioclub.ru/85086_Po_tu_ storonu_veb_stranitsy.html 7.2 Перечень полезных ссылок 1. Htmlbook.ru [Электронный ресурс]: сайт // Самоучитель по HTML, CSS. – Электрон. дан. – 2002. – Режим доступа: http://htmlbook.ru/ 2. Официальный сайт консорциума Всемирной паутины [Электронный ресурс]: сайт // W3C. – Электрон. дан. – Кейо, 2012. – Режим доступа: http://www.w3.org/XML 3. Seodon.ru [Электронный ресурс]: сайт // Seodon.ru – Электрон. дан. – 2010. – Режим доступа: http://seodon.ru/links/podbor-cvetov-dlja-sajta.php 4. Проект Webmascon [Электронный ресурс]: сайт // Webmascon. – Электрон. дан. – 1999. – Режим доступа: http://www.webmascon.com
8 УЧЕБНО-СПРАВОЧНЫЕ МАТЕРИАЛЫ 8.1 Глоссарий DTD (Documents Type Definitions) – совокупность синтаксических правил, на основе которых проверяется структура документа XML. В DTD явно определяется структура документа XML, указываются элементы и их атрибуты, а также приводится другая информация, распространяющаяся на все документы XML, созданные на основе данного DTD. CSS (Cascading Style Sheets) – специальный язык описания стилей, обладающий богатым набором средств форматирования и управления стилями элементов документа. 100
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
HTML (Hypertext Markup Language) – это язык гипертекстовой разметки документов, лежащий в основе формирования документов World Wide Web (WWW). HTML-документ представляет собой текст, в который вставлены теги разметки, в соответствии с которыми программа просмотра (браузер) отображает его содержимое. SGML (Standard Generalized Markup Language) – это метаязык, т. е. средство формального описания прикладных языков разметки, предназначенных для кодирования структурированных документов. XML (eXtensible markup language) – расширяемый язык гипертекстовой разметки, используемой для создания и размещения документов в среде WWW. В отличие от языка HTML, его можно использовать не только для передачи инструкций по представлению данных, но и для описания содержимого файлов различных типов. XML позволяет автоматизировать обмен данными, не прибегая для этого к существенному объему программирования. Наибольшую область применения имеет в области обмена данными для электронной коммерции. Гиперссылка – выделенный объект (текст или изображение) web-страницы, устанавливающий связь с другим объектом. Тег – базовый элемент языка разметки гипертекста. Большинство тегов заключено в угловые скобки и употребляется в парах, т. е. имеют открывающую и закрывающую метку, которые обозначают начало и конец области действия: например, . Форма – это инструмент, обеспечивающий интерактивную связь сайта с пользователем. Элементы форм (области редактирования текста, поля ввода, меню) позволяют посетителям вводить различную информацию и выбирать нужные опции. Формы применяются для опроса посетителей, покупки товаров, заказа услуг через Интернет, отправки электронной почты. Фреймы – это прямоугольные области экрана, каждая из которых содержит свой собственный HTML-документ. Фреймы часто использовались для навигации по веб-сайту. При нажатии на любую из ссылок, расположенных в одном фрейме, можно продолжать видеть страницы в других окнах. HTML-документ, созданный на фреймовой основе, является набором взаимосвязанных электронных документов, параметры и свойства которых определяются настройками всей фреймовой структуры. 101
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
8.2 Перечень ключевых слов Cascading Style Sheets DTD-описания Атрибуты тега Гиперссылки Диалекты XML Комментарии в HTML Корректность синтаксическая Корректность структурная Листы стилей Макетирование фреймов Оптимизация изображений Переключатель Правила определения классов элементов Псевдоклассы Псевдоэлементы Разметка представления Разметка структурная Селекторы ID Селекторы групповые Селекторы простые Специальные символы Списки вложенные неупорядоченные Списки вложенные упорядоченные Списки неупорядоченные Списки упорядоченные Таблицы стилей глобальные Таблицы стилей каскадные Таблицы стилей связанные 102
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Тег Тег для визуального разделения текста Тег предварительного форматирования текста Тег предварительного форматирования текста Тег управления абзацами Теги контейнерные Теги одиночные Теги смыслового выделения текста Теги стилистического выделения текста Теги управления разрывами и переносом строк Теги форматирования Текстовое поле Формы Фрейм главный Фреймовая структура Фреймы Фреймы вложенные Элементы управления формы Язык разметки гипертекстовый Язык разметки расширяемый
103
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
СОДЕРЖАНИЕ Введение..................................................................................................... 1 Структура и содержание дисциплины.................................................. 1.1 Структура дисциплины....................................................................... 1.2 Содержание дисциплины.................................................................... 2 Методические указания и путеводитель по литературе для изучения курса.................................................................................................. 3 Описания лабораторных работ.............................................................. 4 Образовательные технологии................................................................ 5 Материально-техническое обеспечение дисциплины........................ 6 Контрольно-измерительные материалы............................................... 6.1 Тесты для самоконтроля..................................................................... 6.2 Тематика проектного обучения.......................................................... 6.3 Вопросы к зачету................................................................................. 7 Учебно-библиографическое и информационное обеспечение дисциплины.............................................................................................. 7.1 Список литературы.............................................................................. 7.2 Перечень полезных ссылок................................................................ 8 Учебно-справочные материалы............................................................ 8.1 Глоссарий............................................................................................. 8.2 Перечень ключевых слов....................................................................
Редактор В. А. Шамарданов Компьютерная верстка М. Б. Сорокиной Подписано в печать 20.03.2014. Формат 60х841/16. Бумага офсетная. Гарнитура «Таймс». Уч.-изд. л. 3,4. Усл. печ. л. 6,5. Тираж 300 экз. Заказ № 27 _______________________________________________________ Издательство КемГУКИ: 650029, г. Кемерово, ул. Ворошилова, 19. Тел. 73-45-83. E-mail: [email protected] 104
