СД.ДС.Ф.8 Компьютерный дизайн

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное образовательное учреждение
высшего профессионального образования
«Дальневосточный федеральный университет»
(ДВФУ)
Филиал ДВФУ в г.Дальнереченске
«УТВЕРЖДАЮ»
Директор Филиала
ДВФУ в г.Дальнереченске
_________________ В.И.Дударов
«27» ___августа_________2012г.
УЧЕБНО-МЕТОДИЧЕСКИЙ КОМПЛЕКС ДИСЦИПЛИНЫ
«Компьютерный дизайн»
080801.65 «Прикладная информатика (в экономике)»
Форма подготовки очная
Филиал ДВФУ в г. Дальнереченске
курс 4 , семестр 7
лекции - 17 час.
практические занятия - час.
семинарские занятия - час.
лабораторные работы - 17 час.
консультации
всего часов аудиторной нагрузки - 34 час.
самостоятельная работа – 34 час.
реферативные работы (количество)
контрольные работы (количество)
зачет - 7 семестр
экзамен - семестр
Учебно-методический комплекс составлен в соответствии с требованиями
государственного образовательного стандарта высшего профессионального образования
(утв. Приказом Минобразования РФ 14 марта 2000 года, номер гос. регистрации 52 мжд / сп)
УМКД обсужден на заседании Совета филиала «29» августа 2012 г.
Составитель (ли): Верещагина Елена Александровна
Содержание
Аннотация
3
Рабочая программа учебной дисциплины
4
Конспекты лекций
66
Материалы практических занятий
85
Материалы для организации самостоятельной работы студентов
131
Контрольно-измерительные материалы
134
Список литературы
142
Глоссарий
145
2
Аннотация
Настоящий
УМКД
предназначен
для
студентов,
обучающихся
по
специальности «Прикладная информатика (в экономике)» дневной формы
обучения.
Особенность данного УМКД заключается в формировании у студентов
целостной системы базовых теоретических и практических знаний и умений
использования
компьютерных
информационных
технологий
в
профессиональной деятельности.
Освоение дисциплины, описываемой данным УМКД, необходимо для
изучения дисциплин по специальности и опирается на знания, полученные при
изучении курса информатики и программирования.
3
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное образовательное учреждение
высшего профессионального образования
«Дальневосточный федеральный университет»
(ДВФУ)
Филиал ДВФУ в г.Дальнереченске
«УТВЕРЖДАЮ»
Директор Филиала
ДВФУ в г.Дальнереченске
_________________ В.И.Дударов
«27» ___августа_________2012г.
РАБОЧАЯ ПРОГРАММА УЧЕБНОЙ ДИСЦИПЛИНЫ
«Компьютерный дизайн»
080801 «Прикладная информатика (в экономике)»
Форма подготовки очная
Филиал ДВФУ в г. Дальнереченске
курс 4 , семестр 7
лекции - 17 час.
практические занятия - час.
семинарские занятия - час.
лабораторные работы - 17 час.
консультации
всего часов аудиторной нагрузки - 34 час.
самостоятельная работа – 34 час.
реферативные работы (количество)
контрольные работы (количество)
зачет - 7 семестр
экзамен - семестр
Рабочая программа составлена в соответствии с требованиями государственного
образовательного стандарта высшего профессионального образования (утв. Приказом
Минобразования РФ 14 марта 2000 года, номер гос. регистрации 52 мжд / сп)
Рабочая программа обсуждена на заседании Совета филиала «29» августа 2012 г.
Составитель (ли): Верещагина Елена Александровна
4
Оборотная сторона титульного листа
I. Рабочая программа пересмотрена на заседании Учебно-методической комиссии:
Протокол от «_____» _________________ 20 г. № ______
Зам.директора по УВР _______________________ __________________
(подпись)
(и.о. фамилия)
II. Рабочая программа пересмотрена на заседании Учебно-методической комиссии:
Протокол от «_____» _________________ 200 г. № ______
Зам.директора по УВР _______________________ __________________
(подпись)
(и.о. фамилия)
5
1. Цели и задачи дисциплины
Целью преподавания данной дисциплины является формирование у студентов теоретических и практических навыков по новейшим направлениям в
области создания web-страниц.
Предметом изучения дисциплины «Компьютерный дизайн» являются
понятия: локальная вычислительная сеть, корпоративная сеть, Интернет, webстраницы, web-сайты, публикация сайтов в глобальной сети.
2. Начальные требования к освоению дисциплины
Дисциплина
«Компьютерный
дизайн»
базируется
на
дисциплинах
«Информатика и программирование», «Вычислительные системы, сети и
телекоммуникации»,
а
также
на
навыках,
полученных
в
результате
прохождения учебной практики «По информатике».
3. Требования к уровню освоения содержания дисциплины
В результате изучения дисциплины «Компьютерный дизайн» студент
должен
знать:
• принципы организации глобальной сети Интернет;
• систему адресации в Интернет;
• назначение и основные функции обозревателя Internet Explorer;
• основные сервисы Интернет;
• принципы структурной организации гипертекстовых документов;
• приемы разработки презентаций в среде MS Power Point;
уметь:
• подключать и настраивать компьютеры для работы в Интернете;
• работать в службах прямого общения пользователей;
• проектировать простейшие Web-страницы средствами Word;
• создавать презентации и демонстрировать слайды в MS Power Point.
В процессе преподавания дисциплин учебного плана следует обращать
внимание на следующие нравственные и правовые моменты будущей профессиональной деятельности:
6
Авторское право и пиратство.
Термин компьютерное пиратство включает в себя незаконное копирование программ, подделка и распространение нелицензионного программного
обеспечения и (в некоторых случаях) предоставление программы другому лицу.
Решаясь на использование нелицензионных копий программного продукта, потребитель лишает себя права на техническую поддержку, документацию, гарантийные обязательства и периодические обновления. Кроме того, пиратское
программное обеспечение может содержать вирусы. Наконец, следует помнить,
что программы защищены законами об авторском праве.
Конфиденциальность данных и цифровая подпись.
Электронная цифровая подпись - реквизит электронного документа,
позволяющий идентифицировать владельца, а также установить отсутствие
искажения информации в электронном документе. Электронная цифровая
подпись равнозначна собственноручной подписи в документе на бумажном
носителе. Электронный документ с электронной цифровой подписью имеет
юридическое
значение
при
осуществлении
отношений,
указанных
в
сертификате ключа подписи.
Государственная политика в сфере информатизации.
Государственная политика в сфере формирования информационных ресурсов и информатизации направлена на создание условий для эффективного и
качественного информационного обеспечения решения стратегических и оперативных задач социального и экономического развития Российской Федерации. При этом выделяются следующие направления:
- обеспечение условий для развития и защиты всех форм собственности на
информационные ресурсы;
- формирование и защита государственных информационных ресурсов;
- создание и развитие федеральных и региональных информационных
систем и сетей, обеспечение их совместимости и взаимодействия в едином
информационном пространстве Российской Федерации;
- создание условий для качественного и эффективного информационного
7
обеспечения граждан, органов государственной власти, органов местного
самоуправления, организаций и общественных объединений на основе
государственных информационных ресурсов;
- обеспечение национальной безопасности в сфере информатизации, а
также обеспечение реализации прав граждан, организаций в условиях
информатизации;
- содействие формированию рынка информационных ресурсов, услуг,
информационных систем, технологий, средств их обеспечения;
- формирование и осуществление единой научно - технической и
промышленной политики в сфере информатизации с учетом современного
мирового уровня развития информационных технологий;
- поддержка проектов и программ информатизации;
- создание и совершенствование системы привлечения инвестиций и
механизма
стимулирования
разработки
и
реализации
проектов
ин-
форматизации.
Правовые основы:
Закон РФ «Об информации, информатизации и защите информации»; Закон
РФ «О правовой охране программ для электронных вычислительных машин и
баз данных;
Закон РФ «Об авторском праве и смежных правах»; Закон РФ «Об
электронной цифровой подписи».
4. Объем дисциплины и виды учебной работы
4.1. Очная форма обучения
Распределение по
Вид учебной работы
Всего
семестрам
7
Общая трудоемкость дисциплины
68
68
Лекции
17
17
Лабораторные занятия
17
17
8
Практические занятия
Всего самостоятельная работа
-
-
34
34
Вид итогового контроля
Зачет
5. Содержание дисциплины
5.1. Распределение учебного материала по видам занятий
№
Распределение по видам
п/п
(час)
Наименование раздела дисциплины
Лекции
ЛР
СРС
1
Общие вопросы организации Интернет
1
2
Адресация в Интернете
2
1
4
3
Разработка Web-страниц
2
2
4
4
Язык гипертекстовой разметки документов НТМL
2
2
4
5
HTML: изображения, ссылки, таблицы, фреймы
2
1
4
6
Создание Web-страниц и Web-узла в MS Front Page
2
2
4
7
Размещение публикаций в сети и регистрация в поисковых
2
1
4
системах
2
8
Разработка презентаций в MS Power Point
2
4
4
9
Проведение презентаций в MS Power Point
2
4
4
Всего
17
17
34
5.2. Содержание лекционного курса
Тема 1. Общие вопросы организации Интернет
1) Интернет как иерархия сетей. Виды подключений ПК к Интернету.
2) Магистральная сеть провайдера.
3) Основные элементы сети: маршрутизаторы, точки присутствия (POP),
места доступа (NAP).
4) Что такое intranet.
Тема 2. Адресация в Интернете
1) Протоколы Интернет.
2) Физический IP-адрес. Динамическое распределение IP-адресов.
Формат адреса.
9
3) Доменные имена. Структура доменного имени. Перевод доменного
имени в IP-адрес.
4) Как работает DNS-сервер. Иерархия DNS-серверов.
Тема 3. Введение в Web-технологии
1) Основные понятия: Web-страница, Web-сайт, Web-сервер. Современные
популярные Web-серверы. Адресация страниц.
2) Основные возможности браузера.
3) Web-технология клиент-сервер.
4) Основные элементы Web-страницы и файловая организация Web-сайта.
5) Программы, необходимые для создания Web-сайта. Инструментальные
средства создания web-страниц: FrontPage, Dreamweaver.
Тема 4. Основы HTML
1) Синтаксис HTML. Контейнерные теги. Вложенные теги. Атрибуты и
значения тегов.
2) Структура
Заголовок
html-документа.
документа:
<title>,<meta>,<link>,<style>, <script>.
3) Тело html-документа. Заголовки. Абзацы. Выравнивание заголовков и
абзацев. Конец строки.
4) Создание списков. Маркированные списки. Нумерованные списки. Списки определений.
Тема 5. HTML: изображения, ссылки, таблицы, фреймы
1) Размещение изображений в документе. Форматы изображений.
2) Создание гипертекстовых ссылок.
3) Создание таблиц. Базовая структура html-таблицы и ее отображение в
браузере. Задание размеров таблицы. Выравнивание содержимого ячеек, строк,
таблицы. Задание фона таблиц, рядов и ячеек. Перекрывание строк и колонок.
4) Фреймы. Разделение рабочего пространства окна браузера. Задание
параметров области. Указание имени области.
Тема 6. Создание Web-страниц и Web-узла в MS Front Page
1) Front Page редактор и проводник.
10
2) Создание Web-страниц и Web-узла. Фон, темы и стили.
3) Гиперссылки, web-компоненты.
4) Графика, таблицы.
5) Формы, фреймы.
Тема 7. Размещение публикаций в сети и регистрация в поисковых
системах
1) Бесплатное и коммерческое размещение.
2) Использование протокола передачи.
3) Регистрация Web-страницы в поисковых машинах Интернет.
4) Регистрация доменного имени второго уровня.
Тема 8. Разработка презентаций в MS Power Point
1) Создание презентаций.
2) Работа с презентацией.
3) Работа со структурой презентации.
4) Ввод и изменение текста слайда.
5) Применение и модификация шаблонов оформления.
6) Рисование и изменение фигур.
7) Вставка информации в Power Point.
Тема 9. Проведение презентаций в MS Power Point
1) Настройка и демонстрация презентации.
2) Создание мультимедийных презентаций.
3) Создание веб-презентаций.
4) Рецензирование презентаций.
11
5.3. Содержание лабораторных занятий
Наименование
темы
Общие вопросы организации Интернет
Содержание лабораторного занятия
Построение гиперссылок. Создание гиперссылки в документе MS Word. Создание гипертекста
с переходами в пределах одного документа. Создание
гипертекста с переходом к другому файлу. Создание
Адресация в Интернете
Разработка
Webстраниц
Язык гипертекстовой
разметки
документов
НТМL
HTML: изображения,
ссылки,
таблицы,
фреймы
Создание
Webстраниц и Web-узла в
MS Front Page
гиперссылки
изExcel.
документа MS Word на
диаграмму
MS
Изучение всевозможных сайтов, на которых
возможна публикация Web-страниц.
Создание заготовки Web- страницы. Задание
темы оформления Web- страницы. Задание цвета
текста и гиперссылок Web- страницы. Заполнение
созданной заготовки Web- страницы своими
данными. Вставка рисунка на Web- страницу.
Создание Web- страниц с помощью тегов. Используя
встроенный блокнот.
Создание Web- страниц с помощью тегов.
Изучение элементов оконного интерфейса MS
Front Page: системы меню, панели инструментов,
установленные тип и размер шрифта, масштаб текста в
окне и т.д. Просмотр всех пунктов меню MS Front Page и
ознакомление с системой помощи
Разработка презентаций в MS Power Point
Изучение элементов оконного интерфейса
Power Point: системы меню, панели инструментов, установленные тип и размер шрифта, масштаб текста
в окне и т.д. Просмотр всех пунктов меню Power Point и
Проведение презентаций в MS Power Point
ознакомление с системой
помощи
Создание презентации по индивидуальному заданию.
12
5.4. Методические указания по выполнению лабораторных работ.
Темы 1, 2. Общие вопросы организации интернет. Адресация в
интернете.
Лабораторная работа 1. Построение гиперссылок в MS Word.
Цель: Получение практических навыков создания Web-страниц в MS
Word.
Задание1: Построить гиперссылки. Создать Web-страницу в редакторе
MS Word.
Гиперссылки представляют собой средство удобного перехода к другому
разделу текущего документа или Web-страницы, к другому документу Word
или к другой Web-странице, а также к файлу, созданному в другом приложении. С помощью гиперссылок можно переходить к файлам мультимедиа, в т.ч.
звукозаписям и видеозаписям.
Наглядным примером использования гиперссылок является работа со
справочной системой в приложениях MS Office.
При работе с гиперссылками автоматически открывается панель инструментов Web.
Гиперссылка от обычного текста отличается тем, что ее текст выделен
другим цветом (обычно синим или фиолетовым), подчеркнут и при
помещении на него указателя мыши последний приобретает форму руки,
указывающей на то, что можно перейти к данному объекту простым щелчком
мыши.
Задание 2: Создать текстовую гиперссылку в документе MS Word. Для
перехода по гиперссылке нужно в то место документа, куда осуществляется
переход, вставить закладку.
А. Создать гипертекст с тремя переходами в пределах одного документа
к фрагментам текста, указанным на рис.1 (т.е. к информации об авторах,
Части 1 и Главе 1). Для этого нужно выполнить:
1.
Набрать вручную или скопировать текст, помещенный в надписях
на рис.1, при этом каждый фрагмент текста поместить в начало новой страни13
цы.
2.
В начало каждого фрагмента вставить закладку с именами. Напри-
мер, перед сведениями об авторах - закладку Ильф, перед частью 1 - Часть1 и
т.д. Это выполняется в меню Вставка \ Закладка \ Указать имя закладки \ Добавить.
3.
Выделить будущий гипертекст, например, И. Ильф, Е. Петров и
выполнить в меню: Вставка \ Гиперссылка \ Добавление гиперссылки \
Связать с \ Местом в этом документе \ ОК.
4.
Аналогичным образом создать две оставшиеся гиперссылки и про-
верить их работу.
5.
Показать созданные гиперссылки преподавателю.
Б. Создать гипертекст с переходом к другому файлу. Для этого
выполнить:
1. Поместить фрагмент Главы 1 в отдельный файл и создать на него
гиперссылку. Ссылка на отдельный файл создается практически так же, как и
ссылка в пределах одного документа (см. выше п. А). Отличие только в том,
что в окне Добавление гиперссылки (см. п.3) нужно щелкнуть по кнопке
Имеющимся файлом, затем щелкнуть по кнопке Файл и найти тот файл, в
который вы записали фрагмент Главы 1.
2. Показать созданную гиперссылку преподавателю.
Задание 3: Создать гиперссылку из документа MS Word на диаграмму MS
Excel.
В качестве объекта ссылки выберем файл Solvsamp.xls, в котором
приведен пример выполнения поиска решения в среде MS Excel. Этот файл
создается при установке пакета MS Office и находится в папке C:\Program
Files\Microsoft Of-fice\Office\Samples. Для создания гиперссылки на этот файл
нужно выполнить:
1.
Установить курсор в место нахождения гиперссылки и набрать
имя файла, который будет вызываться – в нашем случае Solvsamp.xls.
2.
Выделить имя файла Solvsamp.xls, включая точку после типа
14
файла, щелкнуть по нему правой кнопкой мыши и выбрать в меню пункт
Гиперссылка…
3.
В открывшемся окне Добавление гиперссылки нажать кнопку
Файл, открыть папку C:\Program Files\Microsoft Office\ Office\Samples,
выделить в ней файл Solvsamp.xls и нажать кнопку ОК два раза.
4.
Текст гиперссылки Solvsamp.xls станет подчеркнутым и приобретет
фиолетовый цвет. Щелкнуть мышью по гиперссылке и убедиться в том, что
открывается приложение MS Excel, в окно которого загружается файл
Solvsamp.xls.
Одновременно автоматически выводится панель инструментов Web (если
не выводится, надо щелкнуть правой кнопкой мыши в любом месте панели и
выбрать из контекстного меню пункт Web).
Обратить внимание, что после вызова гиперссылки ее цвет изменился.
Это является сигналом пользователю о том, что данная гиперссылка уже
вызывалась.
®=
Для удаления гиперссылки нужно
щелкнуть по ней правой кнопкой мыши и
выбрать в меню пункт Гиперссылка \ Удалить гиперссылку.
5. После завершения работы в приложении нужно вернуться в исходное
место документа. Для этого нужно щелкнуть мышью по синей стрелке § Назад
на панели инструментов Web. Для повторного возврата к гиперссылке нужно
щелкнуть мышью по синей стрелке § Далее на этой же панели.
®=
Файлы, вызываемые по гиперссылке,
нельзя удалять или перемещать в другое
место на диске, т.к. нарушается путь, ведущий к этому файлу и гиперссылка не
будет вызываться.
Задание 4: Создать гиперссылку из документа MS Word на рисунок.
В документ можно вставить гиперссылку на рисунок, находящийся на
данном ПК. Этот рисунок представлен в тексте как гиперссылка своим именем
15
и открывается после щелчка по нему. Создание гиперссылки на рисунок
выполняется точно так же, как и гиперссылка на документ MS Excel (см.
задание 2).
Создать гиперссылку из документа MS Word на любой рисунок и
проверить ее работу.
Показать созданные в заданиях 2 и 3 гиперссылки преподавателю.
Темы 3, 4. Разработка Web-страниц. Язык гипертекстовой разметки
документов HTML.
Веб-страницы
являются
гипертекстовыми
и
гипермедийными
документами, которые могут содержать графику, аудио- и видео- информацию
и ссылки на другие ресурсы сети Интернет. Веб-страницы создаются с
помощью языка гипертекстовой разметки HTML (Hyper Text Markup
Language). Просмотр вебстраниц осуществляется специальными программами
- браузерами (обозревателями), содержащими интерпретатор языка HTML.
Под
гипертекстом
понимается
совокупность
информационных
фрагментов, связанных между собой. При этом просмотр информационных
фрагментов может осуществляться пользователем в произвольном порядке. В
HTML все элементы связи между фрагментами текста находятся в теле самого
документа и записываются в ACSII-формате (только текст).
Возможно
создание
веб-страниц
в
режиме
непосредственного
редактирования кода языка HTML (редакторы кодов HTML), либо в режиме
визуального
редактирования
внешнего
вида
страницы
наподобие
редактирования документов Word (WYSIWYG-редакторы).
Общие идеи построения и интерпретации HTML документов:
>
HTML
документ
выглядит
как
совокупность
текстовых
фрагментов, каждый из которых окружен тегами (tags).
>
Каждый тег разметки HTML имеет свой идентификатор и,
возможно, несколько параметров (атрибутов). Название тега вместе с его
параметрами заключаются в скобки <>. В общем виде тег выглядит
16
следующим образом:
<тег параметр1 = значение1 параметр2= значение2...> Текст 1 </тег>
Действие тега распространяется на фрагмент текста <Текст1>.
>
Значения параметров рекомендуется заключать в двойные кавычки. Первый
тег называется открывающим, а парный ему закрывающим. Закрывающий тег
имеет тот же идентификатор, но начинается с символа /. Теги, не
предусматривающие наличие вложенного текста, называются пустыми или
непарными, они не имеют закрывающей части. Непарные теги имеют вид:
<тег параметр 1=значение1 параметр2=значение2 ...>
Для
>
связи
информационных
фрагментов
между
собой
в
гипертекстовом (гипермедийном) документе используются однонаправленные
ссылки,
называемые
гиперссылками.
В
информационных
фрагментах
выделяются специальные поля связывания, активизация такого поля приводит
к переходу на другой фрагмент. Чтобы идти дальше, необходимо
активизировать следующие поля связывания.
>
В гипермедийном документе могут присутствовать гиперсвязи
различных типов. Для WWW актуальны следующие типы связей:
1) поле связывания - метка назначения;
2) поле связывания - фрагмент;
3) поле связывания - фрагмент + метка назначения;
4) поле связывания - подсеть.
Гиперсвязь
(вебстраницы).
первого
Метка
типа
определена
назначения
внутри
отмечает
конец
одного
фрагмента
гиперсвязи,
это
именованная строка в HTML документе.
Второй тип ссылается на начало указанного фрагмента (веб-страницы).
При использовании связи третьего типа переход осуществляется не к
началу указанного фрагмента, а к метке, установленной внутри этого
фрагмента.
Гиперсвязь четвертого типа ссылается на корневой каталог подсети,
откуда есть доступ ко всем принадлежащим подсети фрагментам (обычно это
17
ссылка на корневой каталог веб-узла).
>
Любой
ресурс
WWW
может
быть
указан
с
помощью
универсального идентификатора - URL (Uniform Resource Locator).
В общем виде URL выглядит следующим образом:
метод: //сервер :порт/путь/файл#метка URL
определяет:
1) протокол доступа к документу,
2) имя и адрес сервера, содержащего этот веб-документ,
3) местоположение документа в общей структуре веб-сервера.
Лабораторная работа № 2. Разработка Web-страниц.
Цель: Получение практических навыков работы в стандартном
приложении Блокнот, создания Web-страниц.
С помощью непосредственного редактирования тегов языка HTML
создать веб-страницу ассоциации поставщиков «МАЯК» (рис.2), связанную с
двумя страницами фирм-членов ассоциации.
Задание 1: Создать веб-страницу, содержащую форматированный
текст и списки.
18
1. Создать на диске рабочую папку (например, в папке «Мои документы»).
2. С помощью команды главного меню Windows Пуск \ Программы \
Стандартные \ Блокнот запустить приложение «Блокнот», предназначенное
для редактирования текста в формате ACSII символов (текста MS DOS). Для
того, чтобы текст документа размещался в окне «Блокнот» полностью,
Рис. 2. Страница «МАЯК».
включить режим Перенос по словам (меню Формат программы «Блокнот»).
3. Создать в блокноте новый файл, содержащий текст пустого документа
HTML:
<HTML>
<HЕAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
19
</HTML>
4. Сохранить файл в рабочей папке с именем mayak.htm. При сохранении
из блокнота выбрать в качестве типа файла Все файлы. В рабочей папке должен
появиться файл со значком И. Просмотреть пустую веб-страницу mayak.htm в
браузере MS Internet Explorer. Проанализировать содержимое заголовка
браузера (в заголовке отображается имя файла с указанием пути к нему).
5. Перейти в режим редактирования веб-страницы, выполнив в браузере
команду Вид \ Просмотр HTML-кода. Команда осуществляет вызов приложения
«Блокнот» с текстом активной веб-страницы. Отредактировать страницу. В
качестве заголовка страницы (содержимое тега TITLE) ввести текст
«Ассоциация поставщиков МАЯК».
<TITLE> Ассоциация поставщиков МАЯК </TITLE>
6. Сохранить произведенные изменения.
7. Перейти в окно браузера и просмотреть в нем отредактированную
вебстраницу, нажав кнопку Обновить на панели инструментов браузера.
Проанализировать изменения, произошедшие в строке заголовка окна браузера
(в заголовке отображается содержимое тега TITLE).
8. Поместить в тело страницы текст. Для этого:
• загрузить в Word документ, хранящийся в файле products.doc из папки
С: \Student\Задания\Web \Samples;
• скопировать текст документа в буфер. Перейти в окно блокнота,
содержащего текст веб-страницы, и вставить текст из буфера в качестве
содержимого тега BODY.
Сохранить изменения и просмотреть результат в окне браузера.
7. Выделить строку «Товары месяца: Напитки» в отдельный абзац, для
чего заключить ее в тег Р.
<Р>Товары месяца: Напитки</Р>
Аналогичным образом выделить в один абзац строку «При заказе на
любой из следующих товаров устанавливается 5% скидка», а во второй абзац весь оставшийся блок текста. Просмотреть изменения в браузере.
20
8. Выделить строку «Товары месяца: Напитки» жирным шрифтом,
заключив ее в тег В.
<Р><В>Товары месяца: Напитки</В></Р>
ВНИМАНИЕ!
Следует
строго
соблюдать
вложенность
тегов.
И
открывающий, и закрывающий теги форматирования символов текста (В, I,
FONT и др.) должны помещаться внутри тега абзаца (Р, DIV, CENTER).
Закрывающая часть вложенного тега должна обязательно размещаться в теле
тега-контейнера.
9. Выделить строку «При заказе на любой из следующих товаров
устанавливается 5% скидка» курсивом, заключив ее в тег I. Фрагмент текста
«5% скидка» выделить жирным курсивом, заключив в тег В.
10. Названия товаров оформить в виде списка, каждое название должно
располагаться на новой строке. В пункте 7 фрагмент текста, содержащий
названия товаров, был выделен в один абзац тегом Р. Заменить этот тег на тег
маркированного списка UL. Элементы списка (отдельные названия товаров)
заключить в тег LI. В результате веб-страница должна принять вид:
Товары месяца: Напитки
При заказе на любой из следующих товаров устанавливается 5% скидка:
• Chai
• Chang
• Guarana Fantastica
• Lakkalikoori
11. Реорганизовать список названий товаров в двухуровневый список
следующего вида:
1. Напитки
• Chai
• Chang
• Guarana Fantastica
• Sasquatch Ale
• Steeleye Stout
21
• Cote de Blaye
• Chartreuse verte
• Ipoh Coffee
2.
Закуски
Laughing Lumberjack Lager Outback Lager
Rhonbrau Klosterbier Lakkalikoori Для этого
выполнить следующие действия:
• разделить список на две части: с «Chai» no «Ipoh Coffee» и с «Laughing
Lumberjack Lager» no «Lakkalikoori». Каждую часть заключить в тег
маркированного списка UL;
• изменить вид маркера второй части списка товаров, задав значение
SQUARE для параметра TYPE тега списка. Параметр и его значение
указываются в открывающей части тега UL:
<UL TYPE=”square”>
• перед первой частью списка добавить строку «Напитки», перед второй «Закуски». Заключить эти строки в теги элементов списка LI, а весь фрагмент
текста, относящийся к спискам (начиная со строки «Напитки») - в тег
нумерованного списка OL.
В случае если маркеры первой части списка автоматически изменились,
указать для этой части тип маркера disc.
12. С помощью параметра BGCOLOR тега BODY задать произвольный
цвет фона страницы. В качестве значения этого параметра можно использовать
английские названия основных цветов (см. приложение «фоновые цвета»)
13. Наверху веб-страницы разместить отцентрированный заголовок,
выделенный горизонтальными линиями:
«МАЯК»
Ассоциация поставщиков
Выполнить следующие действия:
• в начало тела веб-страницы (сразу после открывающей части тега
BODY) добавить нужный текст, заключить его в тег CENTER;
22
• для того, чтобы разбить текст на две строки, вставить между ними
непарный тег перевода строки BR, не имеющий закрывающей части;
• перед текстом, заключенным в тег CENTER, вставить непарный тег
горизонтальной линии HR, задать следующие свойства линии: выравнивание
по центру (параметр ALIGN), длина 80% от ширины окна браузера (параметр
WIDTH) и толщина в 2 пикселя (параметр SIZE):
<HR ALIGN=”center” WIDTH="80%" SIZE="2">
• вставить тег горизонтальной линии и после заголовка. Изменить цвет
нижней линии, добавив в тег HR параметр COLOR с выбранным значением;
• текст строк заголовка выделить крупным шрифтом, отличающимся от
используемого по умолчанию на две позиции. Для этого заключить каждый
фрагмент текста в тег FONT, указав параметр размера шрифта SIZE (по
умолчанию используется шрифт размером 3):
<FONT SIZE=”+2”>«MAЯK»</FONT>
• изменить цвет текста заголовка, добавив в тег FONT параметр COLOR с
выбранным значением;
• выделить текст заголовка жирным шрифтом, заключив его в тег В внутри
тега FONT.
14. Выделить текст строки «Товары месяца: Напитки» крупным
шрифтом, превышающий заданный по умолчанию шрифт на 1 позицию.
Обратить внимание на правильное соблюдение вложенности тегов!
15. Добавить после нижней разделительной линии текст с описанием
деятельности ассоциации:
• скопировать через буфер в нужное место веб-страницы «МАЯК»
рекламный
текст
со
страницы
formaggi.htm
из
папки
D:\Student\Задания\Web\Samples
Компания Formaggi Fortini постоянно пополняет список поставок новыми
вкусными товарами. В дополнение к великолепным сырам мы рады
предложить ряд кондитерских, макаронных и мясных изделий. Попробуйте!
Вам очень понравится .
23
• вслед за ним скопировать текст со страницы cajun.htm из той же папки:
«Добро пожаловать в компанию Cajun Delights! Вот уже более 50 лет мы
поставляем лучшие индейские и креольские продукты для магазинов по всему
свету. Наши продукты готовятся на основе подлинных рецептов из самых
свежих компонентов, поэтому они понравятся не только уроженцам Луизианы,
вспоминающим о доме, но и всем гурманам, интересующимся креольской
кухней».
• заключить оба абзаца совместно в тег DIV. Обратить внимание, что в
отличие от тега Р, тег DIV не добавляет пустой строки между абзацами.
Задать выравнивание абзацев по ширине, указав значение justify для
параметра ALIGN тега DIV;
• для разделения абзацев между собой в конец первого абзаца добавить тег
перевода строки BR;
• в начале каждого абзаца задать отступ - «красную строку», добавив
подряд по пять символов неразрывного пробела, каждый из которых задается
последовательностью символов  .
16. Для текста из предыдущего задания увеличить отступ от левой
границы страницы, заключив тег DIV с содержимым в тег BLOCKQUOTE.
17. Выделить названия компаний «Formaggi Fortini» и «Cajun Delights»
жирным курсивом.
Тема 5. HTML: изображения, ссылки, таблицы, фреймы.
Лабораторная работа 3. Графика в HTML.
Цель: Научиться добавлять на Web-страницы изображения, ссылки,
таблицы и фреймы.
24
Задание 1: Добавить на веб-страницу графические изображения и их
позиционирование с помощью таблиц.
1. Создать в рабочей папке новую папку с именем images.
2. Скопировать в папку Images графические файлы cajlogo.gif, forlogo.gif и
nwlogo.gif из папки D: \Student\Задания\Web\Samples.
3. В заголовок страницы «МАЯК» добавить эмблему, хранящуюся в
графическом файле nwlogo.gif. Для этого после верхней линии, отделяющей
заголовок, вставить непарный тег IMG с указанием имени графического
файла и пути к нему:
<IMG SRC=”images/nwlogo.gif ”>
• В целях ускорения загрузки страницы с графикой браузером при ее
открытии, указать в теге IMG величину графического изображения 84x84
точки
(пикселя) с помощью параметров WIDTH (ширина изображения) и HEIGHT
(высота изображения):
<IMG SRC=”Images/Nwlogo.gif” WIDTH=”84” НEIGНТ=”84”>
• Изменить размеры изображения на 100x100, просмотреть изменения в
браузере.
• Расположить текст заголовка рядом с эмблемой, для чего задать
обтекание изображения текстом с помощью параметра ALIGN тега IMG.
Задать для параметра ALIGN значение left, чтобы изображение находилось
слева от текста. Просмотреть результат.
• Задать горизонтальные отступы вокруг изображения по 50 точек с
помощью параметра HSPACE тега IMG.
• Просмотреть результат в браузере. Изменить размер окна браузера и
наблюдать, как изменится расположение текста и изображения.
4. В конец страницы «МАЯК» добавить логотипы фирм Formaggi Fortini и
Cajun Delights с описанием выполняемых этими фирмами поставок.
Позиционировать изображения и текст с помощью таблицы:
• В конец страницы (перед закрывающей частью тега BODY) вставить
25
таблицу из трех строк, каждая из которых состоит из двух ячеек. Для этого
добавить тег таблицы TABLE. В тело тега TABLE добавить три тега строки
таблицы TR. В тело каждого тега добавить по два тега ячейки TD.
<TABLE>
<TR>
<TD></TD> <TD></TD>
</TR>
<TR>
<TD></TD><TD></TD>
</TR>
<TR>
<TD></TD><TD></TD>
</TR>
</TABLE>
• В первую ячейку второй строки (в тело соответствующего тега TD)
поместить изображение из файла forlogo.gif из папки images с размерами
189x34 точки.
• Во вторую ячейку второй строки поместить текст со страницы
formaggi.htm из папки D:\Student\Задания\Web\Samples «Поставки итальянских
продуктов по всему миру».
• В первую ячейку третьей строки поместить изображение из файла
cajlogo.gif из папки images с размерами 195x72 точки.
• Во вторую ячейку третьей строки поместить текст со страницы
cajun.htm из папки D:\Student\Задания\Web\Samples: «Лучшие индейские и
креольские продукты для магазинов по всему свету».
26
Рис. 3. Таблица с логотипами фирм на странице «МАЯК».
5. Для таблицы задать отступы по 10 точек от границ ячеек до текста с
помощью параметра CELLPADDING тега TABLE.
6. В первую ячейку первой строки поместить текст «Члены нашей
ассоциации». Выделить его шрифтом размера 4, сделать жирным.
7. Сделать текст «Члены нашей ассоциации» заголовком таблицы. Для
этого следует объединить ячейки первой строки:
• Из первой строки таблицы удалить второй (пустой) тег ячейки TD.
• Первую ячейку первой строки распространить на две ячейки. Для этого в
открывающей части тега TD, содержащего заголовок таблицы, указать
параметр COLSPAN со значением 2:
<ТD COLSPAN="2"> ... </TD>
• Расположить заголовок по центру объединенной ячейки. Для этого
задать значение center параметра ALIGN в соответствующем теге TD.
8. Просмотреть страницу «МАЯК» в браузере. Исследовать изменения
отображения таблицы с логотипами фирм, происходящие при изменении
размера окна браузера.
При уменьшении размера окна, изображения логотипов фирм будут
отцентрированы по вертикали по отношению к поясняющему их тексту
(рис.3). Задать для логотипов фирм вертикальное выравнивание «по верхнему
краю». Для этого в тегах TD соответствующих ячеек указать параметр
вертикального выравнивания VALIGN со значением top.
Просмотреть изменения в браузере.
27
Задание 2: Создать навигацию внутри страницы «МАЯК» с помощью гиперссылок. Создать связи страницы «МАЯК» со страницами фирм Formaggi
Fortini и Cajun Delights.
1. Внутри ячейки таблицы заключить тег IMG, содержащий ссылку на
файл логотипа фирмы Formaggi Fortini, в тело тега гиперссылки А. Для тега А
указать адрес страницы, на которую указывает ссылка, с помощью параметра
HREF. В данном случае ссылка указывает на страницу formaggi.htm,
расположенную в папке D:\Student\Задания\Web\Samples:
<А HREF=”d:\Student\...\formaggi.htm"> <IMG ...></A>
2. Аналогичным образом оформить изображение с логотипом фирмы
Cajun Delights как гиперссылку на страницу cajun.htm из той же папки.
Проверить работу гиперссылок в окне браузера.
3. В окне браузера изображение помечается как гиперссылка с помощью
рамки. Отменить рамки вокруг логотипов фирм, сделав их размер нулевым.
Для этого в соответствующие теги IMG добавить параметр BORDER со
значением 0.
4. Оформить как гиперссылки на страницы formaggi.htm и cajun.htm
названия фирм, выделенные в тексте страницы «МАЯК» жирным курсивом:
• Текст заключается в тег А вместе с тегами форматирования символов В
и I.
• Потребовать, чтобы страницы фирм открывались в новом окне. Для
этого добавить в тег А параметр TARGET со значением _blank (Внимание!
Значение «_blank» начинается со знака подчеркивания). Проверить работу
ссылок.
5. В конце страницы создать ссылку на ее начало:
• В начале страницы непосредственно после открывающей части тега
BODY создать метку. Для этого вставить тег А с параметром NAME и именем
метки. Назвать метку topstr. Тело тега А оставить пустым:
<А NAME=”topstr”></A>
• В конце страницы непосредственно перед закрывающей частью тега
28
BODY вставить текст «Вернуться в начало страницы». Заключить текст в тег
абзаца Р с выравниванием по центру (параметр ALIGN, значение center).
Выделить текст курсивом.
• Выделить текст «Вернуться в начало страницы» как гиперссылку, в
качестве значения параметра HREF указать имя метки, предваренное знаком
#: <А HREF="#topstr"> ... </А>
Проверить действие гиперссылки в браузере.
6. Продемонстрировать страницу «МАЯК» преподавателю.
Таблица фоновых цветов
Таблица содержит названия некоторых цветов, которые могут быть
использованы для оформления фона (или текста) веб-страниц. Названия
основных цветов отмечены звездочкой *.
Название
RGB
Название
RGB
Название
RGB
цвета
aqua*
#00FF FF
цвета
ivor y
#FFFF F0
цвета
olive*
#808000
beige
#F5F5 DC
khaki
#F0E6 8C
orang e
#FFA500
bisque
#FFE4 C4
lavender
#E6E6 FA
orchid
#DA70D6
black*
#0000 00
le-monchif-
#FFFA CD
papayaw-hip
#FFEFD5
fon
brown
#A52 A2A
light blue
#ADD 8E6
purple*
#800080
burly-wood
#DEB 887
light coral
#F0808 0
red*
#FF000O
chartreuse
#7FFF 00
light cyan
#E0FF FF
salmon
#FA8072
chocolate
#D269 1E
light green
#90EE 90
sienna
#A0522D
coral
#FF7F 50
light salmon #FFA0 7A
silver*
#С0С0С0
cornsilk
#FFF8 DC
light
#20B2 AA
skyblue
#87CEEB
cyan
#00FF FF
seagreen
light
#87CE FA
slateblue
#6A5ACD
darkkhaki
#BDB
skyblue
light
#77889
slategray
#708090
29
76B
fuchsia*
slategray
#FF00
ligh-tyellow
#FFD7
lime *
FF
gold
springgree n
#00FF7F
#00FF
teal*
#008080
#FAF0
white
#FFFFFF
O0
#DAA
linen
520
gray*
#FFFF
E0
00
goldenrod
9
E6
#8080
maroon*
#80000 0 whites-
#0080
mint cream
#F5FF
moke
yellow*
#FFFF00
#FFE4
yellow-
#9ACD32
80
green*
00
greenyellow
honeydew
#F5F5F5
FA
#ADF
moc casin
#F0FF
navy *
F2F
B5
green
#00008 0
F0
Тема 6. Создание Web-страниц и Web-узла в MS Front Page.
Новую веб-страницу в Microsoft FrontPage 2003 можно создать тремя
способами: на основе чистой страницы, на основе имеющейся страницы и на
основе встроенных шаблонов. В меню Файл выберите команду Создать. В
появившейся справа области задач Создать в группе Создать страницу выполните одно
из следующих действий:
• Чтобы создать веб-страницу на основе чистой страницы, выберите Пустая
страница.
• Чтобы создать веб-страницу на основе шаблона, имеющегося в Microsoft
FrontPage, выберите Другие шаблоны страниц, перейдите на вкладку с требуемым
шаблоном и щелкните его.
• Чтобы создать веб-страницу на основе созданного пользователем
динамического веб-шаблона, выберите Создание из имеющейся страницы, найдите и
выберите шаблон, а затем нажмите кнопку Создать новый.
Открытие ранее созданной веб-страницы осуществляется с помощью
команды Файл \ Открыть.
30
В зависимости от необходимого способа просмотра страниц и работы с
ними можно использовать один из четырех режимов представления: Конструктор,
Код, С разделением, Просмотр.
Свойства веб-страницы можно изменить, вызвав команду Файл \ Свойства,
появится
окно
с
пятью
закладками:
Общие,
Форматирование,
Дополнительно, Другие,
Язык.
Веб-узел
представляет
собой
группу
связанных
веб-страниц,
размещенных на одном из серверов HTTP. Шаблоны и Мастера Microsoft
FrontPage облегчают и ускоряют создание веб-узла.
Создание веб-узла в Microsoft FrontPage включает следующие основные
шаги:
• В меню Файл выберите команду Создать.
• В области задач Создание в группе Новый веб-узел выберите тип веб-узла.
Укажите нужный шаблон веб-узла. Укажите расположение для публикации
веб-узла с помощью кнопки Обзор и нажмите кнопку Открыть.
Открытие ранее созданного веб-узла осуществляется с помощью команды
Файл \ Открыть узел.
Работа с веб-узлом в целом может быть осуществлена в следующих
режимах представления: Папки, Удаленный веб-узел, Отчеты, Переходы,
Гиперссылки, Задачи.
Лабораторная работа № 4. Создание Web-страниц и Web-узла в MS
Front Page.
Цель: Получение практических навыков работы в MS Front Page.
Задание 1: Создать веб-узел. Создать веб-страницу.
1. Создайте в директории D:\Student\год_поступления\номер_группы\
папку с вашим именем. В этой папке будет расположен новый веб-узел.
2. Откройте программу FrontPage и в меню Файл выберите команду Создать. В
появившейся справа области задач Создание в группе Одностраничный веб-узел ука-жите
шаблон Одностраничный веб-узел. С помощью кнопки Обзор укажите расположение
31
вашей папки и нажмите Открыть, затем ОК. В результате этих действий будет
создан пустой веб-узел с заготовками папок.
3. На странице index.htm в режиме Конструктор наберите следующий текст
(заполнив пропуски):
Добро пожаловать на мою страничку!
Меня зовут _________ , я учусь на ___ курсе _______ факультета
филиала
Санкт-Петербургского
государственного
инженерно-
экономического университета (г. Чебоксары), в группе ________ .
Эта страница создана с помощью Microsoft FrontPage 2003.
4. В представлении Страница перейдите последовательно в режимы
Конструктор, С разделением, Код, Просмотр. В режиме Код вы можете
увидеть html-коды созданной вами страницы. Режим С разделением является
комбинацией режимов Конструктор и Код. Перейдите в режим Просмотр. Вы
также можете просмотреть страницу, использовав Файл \ Просмотреть в
обозревателе.
5. Закройте веб-узел Файл \ Закрыть узел. Перейдите с помощью
программы Проводник (или Мой компьютер) в созданную вами папку.
Исследуйте ее содержимое.
6. Чтобы открыть веб-узел для дальнейшего редактирования, в программе
FrontPage выберите команду Файл \ Открыть узел и укажите расположение
вашей папки, в которой содержится веб-узел, затем нажмите ОК.
7. Создайте новую пустую страницу и сохраните ее в этом же веб-узле
как chuvashia.htm.
8. На странице chuvashia.htm в режиме Конструктор наберите небольшой
фрагмент текста, который приведен ниже в рамке (для набора символов
чувашского алфавита используйте команду Вставка \ Символ):
ЧУВАШСКАЯ РЕСПУБЛИКА
Чăваш Республики
Образована 24 июня 1920 года как Чувашская автономная область, преобразована 21 апреля 1925 г. в Чувашскую АССР, 24 октября 1990 г. переиме32
нована в Чувашскую Советскую Социалистическую Республику, 13 февраля
1992 г. – в Чувашскую Республику в составе Российской Федерации.
Площадь – 18,3 тыс. м2. Численность населения – 1351,7 тыс. чел. (на
1.01.2001г.).
Столица – город Чебоксары. В Чувашской Республике 21 административный район.
Государственные символы Чувашской Республики – флаг, герб и гимн
– утверждены Постановлением Верховного Совета ЧР от 29 апреля 1992 года.
Автор герба и флага – Э.М.Юрьев. В качестве государственного гимна
Чувашской Республики принята песня «Тăван çĕршыв» (Песня о Родине)
композитора Г.С.Лебедева и поэта И.С.Тукташа.
9. Откройте веб-страницу index.htm, вызовите команду Файл / Свойства и
задайте такие свойства, как название страницы Главная страница; фоновый
рисунок, который можете разработать сами, или взять, например, из папки
Windows; язык страницы (русский), набор символов (кириллица). Сохраните
страницу, выполнив команды Файл / Сохранить. При сохранении страницы вы
получите запрос о сохранении внедренных объектов – файла фонового
рисунка. Для сохранения рисунков веб-узла обычно используется папка
images, поэтому смените папку с помощью соответствующей кнопки, затем
сохраните все рисунки. Перейдите в режим представления папок веб-узла и
откройте папку images – в ней должны находиться файлы рисунков.
10. В свойствах страницы index.htm задайте метапеременные «descriptor»
(Моя первая веб-страница) и «keywords» (фамилия, имя, институт, туризм,
сервис). Для этого вызовите команду Файл \ Свойства, откройте вкладку
Другие, и в разделе Пользовательские метапеременные нажмите кнопку
Добавить (см. рис. 4).
33
Рис. 4. Определение пользовательских метапеременных.
11. Аналогично в свойствах страницы chuvashia.htm задайте название
страницы (Чувашская Республика), фоновый рисунок на ваше усмотрение,
язык страницы и набор знаков, метапеременные «descriptor» (Чувашская
Республика) и «keywords» (Чебоксары, Чувашская, Республика).
12. Создайте страницу web.htm и задайте такие свойства, как название
(Программные средства разработки веб-страниц и презентаций), язык
страницы (русский), набор знаков (кириллица). Наберите на этой странице
список основной литературы, приведенной в конце настоящих методических
указаний.
13. Сохраните все страницы и закройте веб-узел Файл \ Закрыть узел.
Темы и стили веб-страницы
Тема - это набор единообразных элементов оформления и цветовых схем,
которые могут быть применены к веб-страницам для придания им более
профессионального вида. Тема может быть применена к одной или
нескольким страницам, а также ко всему веб-узлу. Для применения темы к
оформлению страницы выберите команду Тема в меню Формат, затем в области
задач укажите необходимую тему.
Стилем называется набор характеристик форматирования, которому
назначено уникальное имя. В программе Microsoft FrontPage можно выбирать
стили
из
группы
пользовательские
встроенных
стили.
стилей
Встроенными
или
создавать
стилями
собственные
называются
часто
используемые параметры форматирования, по умолчанию доступные в поле
Стиль. Определенные пользователями стили могут быть модифицированными
встроенными
стилями
или
создаваемыми
именами
классов.
При
редактировании страницы и встроенные, и определенные пользователями
стили доступны в одном списке.
Рассмотрим создание стиля для абзаца. Выполните следующие действия:
• откройте меню Формат и выберите команду Стиль. В открывшемся окне для
34
поля Список переключитесь на опции Теги НТМ и выберите тег h2 для изменения
стиля заголовка второго уровня;
• нажмите кнопку Изменить, при этом откроется новое окно;
• в поле Тип стиля выберите, будет ли стиль применяться к целому абзацу
(пункт Абзац) или только к знакам текста (пункт Знак);
•
нажмите кнопку Формат и определите характеристики нового стиля;
Замечание. При применении стиля непосредственно к элементу
страницы с помощью кнопки Стиль в диалоговом окне Свойства будет создана так
называемая встроенная таблица каскадных стилей.
Задание
2:
Использовать
встроенные
темы.
Изменить
стиль
форматирования текста.
1. Откройте в программе Microsoft FrontPage созданный вами в
предыдущем упражнении веб-узел Файл \ Открыть узел.
2. Примените понравившуюся вам тему к оформлению страницы
chuvashia.htm.
3. Добавьте стиль абзаца собственной разработки для страницы index.htm.
4. Примените стили собственной разработки на странице index.htm для
заголовка 1, заголовка 2 и стиля абзаца «Обычный».
5. Переключитесь в режим отображения html-кода и найдите вставленную
таблицу стилей (она размещена в заголовке между тегами <style> </style>).
6. Аналогично примените свой стиль форматирования к тегам h1 и P (тег
<P> начинает новый абзац).
7. Примените одну из имеющихся тем к оформлению страницы web.htm.
8. Примените к оформлению списка литературы на странице web.htm
стиль Маркированный список.
9. Закройте веб-узел.
Гиперссылки
Гиперссылка – это связь между веб-страницами или файлами. При
щелчке гиперссылки посетителем узла указанный в ней объект отображается в
веб-обозревателе, открывается или запускается в зависимости от типа этого
35
объекта. Можно создать гиперссылки на следующие объекты: существующую
страницу или файл, новую страницу, страницу или файл в Интернете, адрес
электронной почты, на определенное место (закладку) в тексте.
Чтобы создать гиперссылку на существующую страницу или файл,
выделите текст или рисунок, который требуется использовать в качестве
гиперссылки. Выберите команду Вставка \ Гиперссылка. В группе Связать с
выберите значение файлом, веб-страницей. Выберите необходимый файл или
страницу.
Чтобы создать гиперссылку на страницу или файл в Интернете,
выделите текст или рисунок, который требуется использовать в качестве
гиперссылки. Выберите команду Вставка \ Гиперссылка, затем в поле Адрес
наберите необходимую ссылку.
Создание гиперссылки на закладку. Закладка - метка или место в
тексте, которому присвоено определенное имя, что позволяет быстро
переходить к нему в дальнейшем.
Чтобы создать закладку на веб-странице:
• Выберите текст, с которым следует связать закладку.
• В меню Вставка выберите команду Закладка.
• В поле Имя закладки введите название закладки (используя при
необходимости пробелы).
Для создания гиперссылки на закладку выделите текст или рисунок,
который требуется использовать в качестве гиперссылки. Выберите команду
Вставка \ Гиперссылка. В области Связать с щелкните значок файлом, вебстраницей. Выделите страницу, содержащую закладку, и нажмите кнопку
Закладка. В группе Выберите существующее место в документе выделите
необходимую закладку и нажмите кнопку OK.
Задание 3: Создать гиперссылки на объекты веб-узла. Создать
гиперссылки на закладки.
1. Откройте созданный вами веб-узел.
2. На странице index.htm создайте гиперссылку на страницу chuvashia.htm,
36
связав ее с текстом «Моя Чувашия».
3. В конце страницы chuvashia.htm создайте обратную гиперссылку на
страницу index.htm, связав ее со строкой «На главную страницу».
4. На
странице
index.htm
создайте
гиперссылку
на
сайт
www.microsoft.com, связав эту гиперссылку с текстом «Данная страница
создана с использованием Microsoft FrontPage».
Рис. 5. Схема гиперссылок веб-узла.
5. Переключитесь в режим отображения гиперссылок веб-узла и
проверьте, получили ли вы следующую схему (рис. 5):
6. Проверьте работу гиперссылок в обозревателе Internet Explorer.
6. Проверьте
переключившись
работу
в
режим
гиперссылок
отображения
в
автоматическом
веб-узла
Отчеты
режиме,
и
выбрав
Гиперссылки.
7. Создайте закладки на странице chuvashia.htm для слов «Образована»,
«Площадь», «Столица», «Государственные символы».
8. В самом начале страницы chuvashia.htm наберите текст, приведенный в
рамке, используя стиль «Заголовок 2»:
История образования Чувашской Республики
Площадь
Столица
Государственная символика
10. Свяжите строки этого текста гиперссылками с соответствующими
закладками.
11. Проверьте работу гиперссылок в режиме просмотра страницы
chuvashia.htm.
12. Закройте веб-узел.
Веб-компоненты
37
Рассмотрим
следующие
веб-компоненты:
бегущую
строку,
интерактивные кнопки, панель ссылок и штамп времени/даты.
Бегущая строка. Этот элемент оформления позволяет создавать
различные эффекты на веб-страницах. Текст будет перемещаться по экрану в
горизонтальном направлении. Для вставки бегущей строки на веб-страницу
выполните следующие действия:
1. Щелкните место, куда следует вставить бегущую строку, а потом
введите и выделите текст, который следует представить в виде бегущей
строки.
2. В меню Вставка выберите команду Веб-компонент.
3. В группе Тип компонента нажмите кнопку Динамические эффекты.
4. В группе Выбор эффекта дважды щелкните значок Бегущая строка.
5. Задайте параметры бегущей строки.
Интерактивная кнопка – графическая кнопка с текстом, при наведении
пользователем указателя мыши ее вид изменяется.
1. Установите курсор там, где необходимо добавить кнопку. В меню Вставка
выберите команду Меняющаяся кнопка. Появится окно, показанное на рис. 6.
Рис. 6. Окно выбора интерактивной кнопки.
2. На вкладке Кнопка в списке Кнопки выберите стиль. В поле Текст
введите текст для отображения на кнопке.
38
3. Если текст не помещается на кнопку, то ее размеры можно увеличить,
перейдя на вкладку Рисунок.
4. Для создания гиперссылки нажмите кнопку Обзор, расположенную
после поля Ссылка. Найдите и выберите файл, адрес URL или адрес
электронной почты, с которым нужно связать кнопку, а затем нажмите кнопку
OK.
Замечание. При сохранении веб-страницы Microsoft FrontPage выдает
запрос, сохранять ли связанные с кнопкой изображения. Для их сохранения
следует указать папку images.
Панель ссылок представляет собой группу интерактивных кнопок в
едином оформлении. Для добавления панели ссылок на веб-страницу
выполните следующие действия:
1. Поместите курсор там, где требуется расположить панель ссылок.
2. В меню Вставка выберите команду Переходы.
3. В списке Тип компонента выберите пункт Панели ссылок.
4. В
списке
Выберите
тип
панели
щелкните
пункт
Панель
с
пользовательскими ссылками и нажмите кнопку Далее.
5. Выберите нужный стиль панели ссылок, затем нажмите кнопку Далее.
6. Выберите требуемую ориентацию страницы и нажмите кнопку Готово.
Появится текст: [Измените свойства этой панели для отображения на ней
гиперссылок] + добавление ссылки.
7. Щелкните на строку «добавление ссылки» и создайте гиперссылку на
необходимый вам объект.
Штамп времени и даты состоит из поля даты и (или) поля времени,
которые соответствуют моменту создания или последнего изменения
страницы. Этот штамп, например, позволяет посетителям вашего веб-узла
узнать, изменилась ли информация на нем с момента их последнего визита.
Установите курсор на веб-странице в том месте, где необходимо добавить
штамп времени. В меню Вставка выберите команду Дата и время. Выберите
тип штампа времени. Выберите формат для полей даты и времени.
39
Задание 4: Создать динамические эффекты, интерактивные кнопки,
панель ссылок, штамп даты и времени.
1. Откройте созданный вами веб-узел. На странице index.htm строку
«Добро пожаловать на мою страничку!» сделайте бегущей. Параметры
бегущей строки задайте по своему вкусу.
2. На странице chuvashia.htm строку «Чувашская Республика» сделайте
бегущей.
3. В конце страницы chuvashia.htm создайте интерактивную кнопку с
надписью «На главную страницу» для возврата на index.htm.
4. Создайте аналогичную интерактивную кнопку в конце страницы
web.htm.
5. На странице index.htm после бегущей строки создайте панель ссылок
на страницы chuvashia.htm и web.htm.
6. В конце каждой страницы введите строку «Дата последнего изменения
страницы» и добавьте штамп времени и даты с автоматическим обновлением
даты последнего изменения.
7. Проверьте работу интерактивных кнопок в обозревателе Internet Explorer.
8. Закройте веб-узел, сохранив измененные страницы.
Графика
Рисунки на веб-страницы можно добавлять из различных источников.
Рассмотрим добавление рисунка из файла и встроенной коллекции картинок.
Установите курсор туда, где необходимо добавить рисунок. В меню
Вставка выберите команду Рисунок, а затем – команду Из файла. Перейдите к
файлу, который нужно добавить, и нажмите кнопку Вставить.
Для добавления графики из Коллекции картинок (Microsoft) в меню
Вставка выберите команду Рисунок, а затем – команду Картинки. В области
задач Картинки введите в поле Поиск текста слово или фразу, описывающие
требуемый клип. Нажмите кнопку Найти. В списке результатов поиска
щелкните клип, чтобы вставить его.
Изменение свойств рисунка. Щелкните рисунок правой кнопкой мыши и
40
выберите в контекстном меню команду Свойства рисунка. Появится
следующее окно (рис. 7):
Рис. 7. Окно «Свойства рисунка»
41
Здесь можно менять свойства обтекания текстом, положение на странице,
размер, надпись к рисунку и т.д.
Свойства
рисунков
также
можно
изменить,
используя
панель
инструментов Рисунки. Если панель инструментов Рисунки скрыта, щелкните
рисунок правой кнопкой и выберите в контекстном меню команду Показать
панель инструментов рисунков.
Автоэскиз. Эскиз – это уменьшенная версия рисунка, которая быстро
загружается. Просмотрев эскиз, посетитель веб-узла может решить, нужно ли
ему загружать версию рисунка полного размера. Средство «Автоэскиз»
автоматически создает эскиз с гиперссылкой на исходный рисунок.
Для создания автоэскиза щелкните рисунок правой кнопкой и выберите в
контекстном меню команду Автоэскизы. Будет создан эскиз рисунка и
гиперссылка на первоначальный рисунок обычного размера.
Объект WordArt – это набор стилей текста, которые можно использовать
на веб-страницах для их украшения. Например, можно создать текст с тенью,
скошенный, повернутый или растянутый текст и текст, заполняющий
указанную форму. Все это так называемые текстовые эффекты. Текстовый
эффект является объектом-рисунком, для его редактирования, например, для
заливки рисунком или текстурой, можно использовать панель инструментов
Рисование.
Для добавления объектов WordArt откройте меню Вставка и вызовите
команду Рисунок \ Объект WordArt.
Задание
5:
Добавить
графические
объекты
на
веб-страницу:
автоэскизы, объект WordArt.
1. Откройте в программе FrontPage ранее созданный вами веб-узел.
2. Откройте страницу chuvashia.htm и вставьте файлы с флагом и гербом
Чувашской Республики (расположение файлов уточните у преподавателя,
ведущего занятия).
3.
Щелкните рисунок флага правой кнопкой и выберите Свойства
рисунка. Перейдите на закладку Общие и в строке Текст наберите «Флаг
42
Чувашской Республики». Сохраните страницу вместе с внедренными
рисунками (для расположения рисунков выберите папку images). Перейдите в
режим просмотра и подведите указатель мыши на рисунок флага, должен
появиться введенный вами текст (надпись к рисунку).
4. Создайте соответствующую надпись к гербу.
5. Инструмент ^1 позволяет задать «прозрачный цвет». Чтобы сделать
«прозрачным» цвет на рисунке герба, выделите рисунок, нажмите на кнопку на
панели инструментов и выберите цвет, который вы хотите сделать
«прозрачным» (это должен быть белый фон на рисунке герба). Теперь
нажмите на эту кнопку и прикоснитесь «карандашом» к выбранному цвету на
рисунке - он станет «прозрачным». Запомните - на рисунке может быть только
один «прозрачный» цвет.
6. Сохраните страницу вместе с внедренными файлами рисунков, для их
расположения выберите папку images.
7. Рассмотрите возможности остальных инструментов самостоятельно.
8. Создайте автоэскиз для флага и для герба.
9. Сохраните страницу вместе с внедренными файлами автоэскизов.
10. Просмотрите страницу в обозревателе Internet Explorer.
11. Для настройки размера автоэскиза и других его свойств в меню Сервис
выберите команду Параметры страницы, а затем — вкладку Автоэскизы.
12. Откройте страницу index.htm и вставьте графический файл с вашей
фотографией. Создайте надпись к вашей фотографии.
13. Перейдите на страницу chuvashia.htm и создайте внизу объект
WordArt с текстом «Сервер администрации президента ЧР».
14. Создайте гиперссылку на объект WordArt, связанную с www.cap.ru.
15. Закройте
веб-узел,
сохранив
измененные
страницы
вместе
с
внедренными рисунками.
Таблицы. Макетные таблицы
Таблицы служат для компактного представления информации на
вебстранице. Для работы с таблицами используйте одноименный раздел меню.
43
При оформлении уже созданной таблицы можно воспользоваться
имеющимися шаблонами, вызвав команду Таблица \| Автоформат.
Таблицы могут помечаться и снабжаться названиями путем добавления
подписей
Таблица \ Вставить \ Подпись.
Подпись таблицы размещается над таблицей
или под ней. Текст подписи допускает форматирование.
Макетная
таблица
представляет
собой
созданную
для
страницы
структуру. Макетные ячейки — это области этой структуры, содержащие в
себе содержимое страницы, включая текст, рисунки, веб-части и другие
элементы. Вместе макетные таблицы и ячейки представляют горизонтальные
и вертикальные области, которые можно добавлять на веб-страницу и которые
позволяют задать для содержимого сложную визуальную структуру.
Чтобы
ускорить
создание
веб-страницы,
можно
воспользоваться
предварительно определенными макетными таблицами, вызвав команду
Макетные таблицы и ячейки в меню Таблица. В появившейся справа панели
задач, Макетные таблицы и ячейки следует выбрать нужный макет. Можно
также создать собственную макетную таблицу, самостоятельно построив
таблицу и ячейки.
При щелчке по границе макетной таблицы или ячейки с каждой ее
стороны появляются надписи, сообщающие ширину столбцов и высоту строк.
Каждая надпись содержит стрелку, щелчок по которой приводит к
отображению раскрывающегося списка с вариантами изменения размера
столбца или строки. Можно также выбрать один столбец или одну строку в
таблице и разрешить ей автоматически занимать максимальное доступное
пространство в окне обозревателя. Такая способность ячейки называется
авторастягиванием. Чтобы сделать ячейку авторастягивающейся, щелкните
стрелку на надписи с шириной столбца или высотой строки и выберите команду
Авторастягивание столбца или Авторастягивание строки.
Задание 6: Форматировать таблицу.
1. Откройте в программе FrontPage созданный вами веб-узел.
2. На странице index.htm создайте таблицу и заполните ее, указав
44
расписание ваших занятий:
1
время ПН. ВТ. СР.
9.00- исто-10.20 рия
2
10.30- … 11.50
ЧТ.
ПТ.
СБ.
3. Создайте подпись к таблице «Расписание моих занятий».
4. Для оформления таблицы воспользуйтесь командой Автоформат.
5. Измените цвет фона таблицы. Задайте выравнивание таблицы по
центру страницы.
6. Создайте новую пустую веб-страницу и сохраните ее в этом же узле,
назвав vuz.htm. Задайте такие свойства страницы, как название (ИНЖЭКОН),
язык (русский), набор знаков (кириллица).
7. Примените к оформлению страницы vuz.htm
следующую
макетную
таблицу,
состоящую
из
четырех областей (угол, верхний колонтитул, столбец
слева и основная область).
8. Задайте второму столбцу макетной таблицы свойство авторастягивания.
9. В угол макетной таблицы поместите эмблему университета.
10. Для области верхнего колонтитула задайте цвет фона, совпадающий с
фоном эмблемы университета
11. В верхнем колонтитуле макетной таблицы наберите, используя стиль
«Заголовок 1» и какой-нибудь светлый цвет текста, строку «История
университета».
12. Скопируйте и вставьте в основную область макетной таблицы на
странице vuz.htm текст «История университета» (расположение файла
уточните у преподавателя, ведущего занятия).
13. Задайте цвет фона или фоновый рисунок для всех остальных областей
макетной таблицы на ваше усмотрение.
14. Закройте веб-узел, сохранив измененные страницы.
45
Формы
При
добавлении
формы
в
Microsoft
FrontPage
будет
вставлена
прямоугольная область, которая будет выделена пунктирной линией и будет
содержать кнопки Отправить и Сброс. Внутрь прямоугольной области можно
добавлять текст и поля формы, такие как текстовые поля, переключатели,
флажки, раскрывающиеся списки и кнопки.
Чтобы добавить форму на веб-страницу, в меню Вставка выберите
команду Форма, а затем выберите необходимые поля, которые требуется
добавить в форму. После выборе поля, например, с раскрывающимся списком,
для задания вариантов значений следует щелкнуть форму правой кнопкой
мыши и в появившемся контекстном меню выбрать Свойства поля формы.
Формы часто используются на веб-страницах для того, чтобы узнать
мнение посетителей о веб-узле. С помощью шаблона MS FrontPage легко
создать гостевую книгу. При создании страницы в области задач следует
указать Другие шаблоны страниц, а затем шаблон Гостевая книга.
Задание 7: Создать форму для текста. Сделать раскрывающиеся списки.
1. Откройте в программе FrontPage созданный вами веб-узел.
2. Создайте гостевую книгу на основе шаблона и сохраните эту страницу
как guest.htm. Задайте свойства страницы (название, язык, набор знаков и т.п.).
3. Сверху наберите строку «Гостевая книга», используя стиль «Заголовок
1».
4. Примените какую-либо тему к оформлению страницы.
5. После формы для введения заметок наберите текст, приведенный на
рис. 8:
46
Рис. 8. Формы для введения заметок и с раскрывающимися списками.
6. Создайте форму Раскрывающийся список, в котором будут указаны
следующие значения возраста: <20, 20-29, 30-39, 40-49, 50-60, >60.
7. Создайте форму Раскрывающийся список, в котором будут указаны
значения пола: муж, жен.
8. Создайте форму Раскрывающийся список, в котором будут указаны
следующие значения уровня образования: неполное среднее, среднее,
неполное высшее, высшее, ученая степень.
9. В конце гостевой книги создайте интерактивную кнопку для возврата
на главную страницу index.htm.
10. Закройте веб-узел, сохранив измененные страницы.
Задание 8: Создать личный веб-узел с помощью мастера.
1. Создайте в папке вашей группы папку Ваша_фамилия1. Откройте
программу MS FrontPage и создайте в этой папке личный веб-узел с помощью
мастера. Заготовка личного веб-узла содержит 6 веб-страниц: index.htm,
aboutme.htm, interest.htm, photo.htm, favorite.htm, feedback.htm.
2. Введите на страницу aboutme.htm краткую информацию о себе.
3. На страницу photo.htm вставьте свои фотографии.
4. На странице interest.htm опишите свои увлечения.
5. На странице favorite.htm укажите ссылки на ваши любимые Интернетресурсы.
6. Настройте страницу feedback.htm для сбора необходимых сведений о
посетителях вашего веб-узла.
7. Сохраните внесенные изменения и закройте веб-узел.
Тема 7. Разработка презентаций в MS Power Point.
Презентация (от английского Presentation - представление) - это набор
цветных картинок – слайдов – на определенную тему, который хранится в
файле специального формата с расширением .ppt. На каждом слайде можно
поместить произвольную текстовую или графическую информацию.
Термин «презентация» (иногда говорят «слайд-фильм») связан, прежде
47
всего, с информационными и рекламными функциями картинок, которые
рассчитаны
на
определенную
категорию
зрителей:
потенциальных
покупателей и заказчиков, акционеров, журналистов, читателей и т.д.
Однако темы презентаций не ограничиваются предложением товаров и
услуг, информацией о положении дел и т.п. В области науки и техники любой
доклад можно теперь подготовить в форме презентации (слайд-фильма), при
этом становятся не нужными множество рисованных плакатов с формулами и
диаграммами. Однако для такого доклада перед широкой аудиторией нужен
специальный дорогостоящий проектор. Поэтому в настоящее время основным
средством показа слайд - фильмов является экран дисплея.
В школах и институтах с помощью пакета презентаций можно создавать
и демонстрировать учебные и справочные слайд - фильмы, рассказывать о
работе кружков, секций и клубов, демонстрировать спортивные достижения.
Создание и редактирование произвольных презентаций выполняется с
помощью приложения MS Power Point, входящего в состав пакета MS Office.
В процессе создания презентации вы можете проявить себя и как специалист,
и как режиссер, и как художник. По сравнению с редактором MS Word пакет
MS Power Point предъявляет повышенные требования к творческим
способностям автора, к его художественному вкусу.
Следует отметить, что в Power Point, кроме презентаций, можно также
создавать другие документы, например, визитные карточки, объявления и т.д.
Лабораторная работа № 5. Разработка и размещение презентаций.
Цель: Получение практических навыков работы в программе MS Power
Point.
Задание 1: Изучить примера презентации, созданной в MS Power Point.1.
Запустить приложение MS Power Point и из каталога
D:\Student\Задания\Web загрузить файл Primer.ppt, в котором находится
пример
презентации учебного курса.
2. Так как в процессе работы вы будете изменять файл Primer.ppt, то для
48
сохранения оригинала запишите на диск этот файл под другим именем: Файл \
Сохранить как \ Указать новое имя Primer_n.ppt \ Сохранить, где n - номер вашего
компьютера. После такой операции все вносимые вами изменения в
презентацию будут сохраняться в новом файле Primer n.ppt.
3. Изучить элементы оконного интерфейса Power Point: систему меню,
панели инструментов, установленные тип и размер шрифта, масштаб текста в
окне и т.д. Просмотреть все пункты меню Power Point и ознакомиться с
системой помощи. Обратить внимание на то, что интерфейс Power Point имеет
много общего с интерфейсом приложений Word и Excel.
После загрузки файла презентации на экран выводится первый слайд этой
презентации (титульный лист). Этот слайд содержит три области, в каждой из
которых содержится текст: в первой области - Институт туризма и сервиса, во
второй - Информатика и в третьей - Презентация курса. Последовательно
щелкните мышью на каждом из этих текстов и определите, какая гарнитура и
размер шрифта использовались для набора данного текста. В меню Формат \
Шрифт определите, есть ли тень у данного текста.
Используя клавишу Page Down, просмотреть остальные слайды данной
презентации (всего их пять) и аналогичным образом определить, из скольких
областей состоит каждый слайд и что находится в каждой области. С
помощью клавиши Page Up по слайд-фильму можно продвигаться в обратном
направлении. Общий вид слайдов файла Primer.ppt приведен на рис. 9-13.
4. Нажать кнопку £§| Режим сортировщика слайдов, которая находится в левом
5. нижнем углу экрана или выполнить в меню: Вид \ Сортировщик слайдов. На
экран выводятся в уменьшенном размере все слайды данной презентации,
которые снабжены порядковыми номерами. В этом режиме можно, захватив
слайд мышью, переместить его на другое место, т.е. выполнить «монтаж»
слайд - фильма. Поупражняйтесь в перемещении слайдов, после чего
восстановите их первоначальное положение.
6. В этом же режиме можно удалить выделенный слайд (клавишей
«Delete» или командой меню Правка \ Удалить слайд) или вставить новый
49
Вставка \
7. Создать слайд. Попробуйте вставить новый пустой слайд в конец
презентации и потом удалите его. Для этого нужно щелкнуть мышью правее
последнего слайда и выполнить Вставка \ Создать слайд.
6. Для перехода обратно в режим слайдов нажмите кнопку п| Режим слайдов
или выполните в меню Вид \ Слайды.
7. Запустить демонстрацию презентации. Для этого выполнить в меню
Показ слайдов \| Показ или нажать кнопку на панели инструментов щ | Показ.
Обратите внимание на эффекты, сопровождающие показ слайдов, в частности,
на появление объектов слайда.
8. Открыть в меню пункт Показ слайдов \| Переход слайда и в области
Продвижение установить опцию По щелчку и сбросить опцию Автоматически. Снова
запустить демонстрацию презентации, причем, теперь переход к следующему
слайду выполняется вручную по щелчку мыши.
9. В этом же окне в области Продвижение установить опцию Автоматически
после, а в поле Секунд последовательно установить значения 0 и 5 сек и проверить
действие этого поля на демонстрацию презентации в автоматическом режиме.
10. Вывести на экран второй слайд и выделить в нем область с
программой 1-го курса. Открыть в меню Показ слайдов \ Настройка анимации и в
открывшемся окне Настройка анимации на вкладке Эффекты в области Выберите
эффект и звук определить установленный эффект. Раскрыть список эффектов,
выбрать из них несколько других и, нажав кнопку Просмотр, посмотреть их
действие.
11.
На этой же вкладке раскрыть список Появление текста и просмотреть
различные эффекты появления текста в выделенной области. Обратить
внимание, что в области Порядок анимации задается последовательность появления
на слайде содержимого различных составляющих его объектов. Эту
последовательность можно поменять, выделив нужный объект и кнопками со
стрелками переместив его в нужное место (вперед или назад).
50
12. Откройте файл Айсберг.ppt, в котором находится визитная карточка,
созданная в Power Point. Определите, из каких объектов она состоит.
Рис. 9. Слайд 1.
Рис. 10. Слайд 2.
51
Рис. 11. Слайд 3.
Рис. 13. Слайд 5.
Задание 2: Создать презентацию в MS Power Point.
1. Создать презентацию по своей теме. Номер темы презентации должен
52
соответствовать порядковому номеру студента в журнале группы. Презентация
должна содержать 7-8 слайдов и достаточно подробно освещать предмет
презентации. Слайды должны быть художественно оформлены и содержать
текст, рисунки, диаграмму, а также различные эффекты.
2. Для создания новой презентации выполнить Файл \ Создать. В открывшемся
окне Создать презентацию на вкладке Дизайны презентаций выбрать подходящий вид для
всех создаваемых слайдов, при этом в окне Просмотр можно увидеть внешний
вид слайда для выбранного варианта. Далее в окне Создать слайд выбрать
авторазметку для первого слайда. Если нет подходящего шаблона, можно
выбрать наиболее похожий, который потом можно отредактировать, или же
выбрать пустой слайд и заполнить его самостоятельно.
3. Заполнить первый слайд необходимой информацией. Выбрать шрифт,
его размер, цвет, фон и т.д. Цвет фона устанавливаются кнопкой Цвет заливки
панели инструментов Рисование (найдите ее сами), сама же панель выводится на
экран из меню Вид \ Панели инструментов \ Рисование. Опция Способы заливки
появляющаяся после нажатия кнопки Цвет заливки, позволяет выполнить
градиентную заливку, а также заливку в виде текстуры или с узорами.
4. Если необходимо вставить в слайд надпись, для которой не
предусмотрено место в шаблоне слайда, то это можно сделать, нажав кнопку щ |
Надпись на панели Рисование. Далее мышью при нажатой левой кнопке в нужном
месте выделить область и занести в нее информацию. Каждую из областей
после выделения можно двигать по слайду мышью или клавишами <- Т -»I.
5. После создания первого слайда аналогично создаются остальные. Для
создания следующего слайда нужно выполнить в меню Вставка \ Создать
слайд или нажать кнопку g | Создать слайд, после чего выбрать шаблон
создаваемого слайда и т.д.
6. Для вставки рисунка в слайд нужно:
53
• если рисунок вставляется в специально для него предусмотренное место
шаблона, то достаточно выполнить 2 щелчка левой кнопкой мыши и из
образцов выбрать нужный;
• если рисунок вставляется в произвольную область, то с помощью мыши
после нажатия кнопки щ | Надпись на панели Рисование нужно выделить область и
далее выбрать Вставка \ Рисунок \ Картинки.
7. После создания всех слайдов (или одновременно с этим) установить
различные эффекты для появления текста и рисунков на слайдах. Для этого
выделяется объект и далее Показ слайдов \ Настройка анимации. Способ демонстрации
слайд-фильма (ручной или автоматический), а также интервал времени
устанавливается в меню Показ слайдов \ Переход слайда.
8. Продемонстрировать
созданный
слайд-фильм
преподавателю.
Выполнение презентации показать в ручном и автоматическом режимах. По
заданию преподавателя изменить эффекты в объектах и продемонстрировать
их.
Тема 8. Проведение презентаций в MS Power Point.
Лабораторная работа 6. Создание презентаций по индивидуальному
заданию.
Цель: Научить создавать собственные презентации.
Задание: Из списка предложенных тем выбрать одну и создать по ней
презентацию в MS Power Point.
Темы для создания презентаций (выбираются по желанию студента):
1. Институт туризма и сервиса
2. Адвокатская контора
3. Галантерейный магазин
4. Ресторан
5. Подсобное хозяйство
6. Консультативная поликлиника
7. Теннисный клуб
8. Фабрика детских игрушек
54
9. Мебельный салон
10. Овощной магазин
11. Магазин по продаже меховых изделий
12. Автосалон
13. Салон сотовой связи
14. Парикмахерская
15. Клуб «Сад и огород»
16. Оружейный магазин
17. Моя домашняя оранжерея (домашний зоопарк)
18. Библиотека
19. Туристическая фирма
20. Спортивная секция
21. Любимый предмет
22. Курсовая работа по специальности
23. Гостиница
24. Хобби
25. Чемпионат (футбол, баскетбол, танцы и т.п.)
26. Конференция
27. Личная презентация (о себе, семье, учебе, увлечениях)
28. Создаем презентацию (разработка, редакция, демонстрация и т.п.)
29. Создаем Web-страницу
30. Студенческая группа
31. Компьютер (устройство, состав, работа)
32. Вкусно готовим
33. Красиво шьем
34. Конкурс
35. Совещание
36. Работаем в Интернете
37. Предлагаем товары и услуги
38. Здоровый образ жизни
55
39. Мои увлечения
6. Курсовое проектирование: не предусмотрено.
7. Учебно-методическое обеспечение дисциплины
7.1. Основная литература
1.
Кочегаров, Б.Е. Промышленный дизайн : учебное пособие / Кочегаров
Б.Е. ; под ред. В. В. Сизовой. - 2-е изд. доп. - Владивосток : Изд-во ДВГТУ,
2008. - 320 с.
7.2. Дополнительная:
1.
Александровский,
А.Д.
Delphi
5.0.
Разработка
корпоративных
приложений / А.Д. Александровский. - М. : ДМК, 2000. - 512 с.
2.
Заенчик,
В.М.
Основы
творческо-конструкторской
деятельности:
предметная среда и дизайн : учебник / В.М. Заенчик, А.А Карачев, В.Е.
Шмелев. - М. : Академия, 2006. - 320 с.
3.
Ковешникова, Н.А. Дизайн: история и теория : учебное пособие / Н.А.
Ковешникова. - з-е изд.стер. - М. : Омега-Л, 2007. - 224 с.
4.
Леонтьев, Б. Web-дизайн: Хитрости и тонкости / Б. Леонтьев. - М. :
«Познавательная книга плюс», 2001. - 224 с.
5.
Лоцманенко, В.В. Проектирование и конструирование (основы) :
учебное пособие / В.В. Лоцманенко, Б.Е. Кочегаров. - Владивосток : ДВГТУ,
2004.
6.
Молочков, В.П. Информационные технологии в профессиональной
деятельности. Microsoft Office PowerPoint 2007 : учебное пособие / В.П.
Молочков. - 2-е изд. стер. - М. : Академия, 2010. - 176 с.
7.
Нильсен,
Я.Дизайн
Web-страниц. Анализ
удобства и
простаты
использования 50 узлов : пер. с англ.: учебное пособие / Я. Нильсен, М. Тахир.
- М. : ИД «Вильямс», 2002. - 336 с.
8.
Рейнбоу, В. Компьютерная графика : энциклопедия / В. Рейнбоу. - СПб.
: Питер, 2003. - 768 с.
56
Розенсон, И.А. Основы теории дизайна : учебник / И.А. Розенсон. - СПб.
9.
: Питер, 2006. - 219 с. : ил.
Сухомлинов, А.И. Разработка информационных систем : учебное
10.
пособие / А.И. Сухомлинов ; ДВГТУ. - Владивосток : Изд-во ДВГТУ, 2008. 111 с.
11.
Холмогоров, В. Основы Web-мастерства : учебное пособие / В.
Холмогоров. - СПб. : Питер, 2001. - 352 с.
12.
Шафран, Э. Создание Web-страниц: самоучитель / Э. Шафран. - СПб. :
Питер, 2000. - 320 с.
7.3. Электронные ресурсы:
1.
http://window.edu.ru/resource/402/47402
Зайцева, Е.А. Компьютерная
графика : учебно-методич. пособие / Е.А. Зайцева, Т.Г. Пунина. - Тамбов :
ТГТУ, Педагогический Интернет-клуб, 2006. - 116 с.
2.
http://window.edu.ru/resource/634/36634 Кочегаров, Б.Е. Промышленный
дизайн : учебное пособие Б.Е. Кочегаров. - Владивосток : Изд-во ДВГТУ,
2006. - 297 с.
3.
Летин, А. С.
http://znanium.com/bookread.php?book=127915
Компьютерная графика : учебное пособие / А.С. Летин, О.С. Летина, И.Э.
Пашковский. - М.: Форум, 2007. - 256 с.
4.
http://window.edu.ru/resource/635/36635
Лоцманенко,
В.В.
Проектирование и конструирование (основы) : учебное пособие В.В.
Лоцманенко, Б.Е. Кочегаров. - Владивосток : Изд-во ДВГТУ, 2004. - 96 с.
5.
http://window.edu.ru/resource/997/40997 Писаренко, Т.А. Основы дизайна
: учебное пособие / Т.А. Писаренко, Н.Н.Ставнистый. - Владивосток : ТИДОТ
ДВГУ, 2005. - 112 с.
8.Контрольные задания и методические рекомендации по изучению
дисциплины
9. Технические и электронные средства обучения, иллюстрационные
материалы: не используются.
10. Текущий и итоговый контроль по дисциплине
57
10.1. Формы и методы текущего контроля
С целью организации текущего контроля используются: контрольные
работы, опросы.
10.2. Контрольные тесты для определения минимального уровня
освоения программ:
1. Базовый протокол Интернета
a) TCP/IP;
b) HTTP;
c) FTP.
2. URL-это
a) прикладной протокол;
b) название языка, на котором создаются Web-страницы;
c) адрес ресурса в сети Интернет.
3. Какая программа из пакета MS Office предназначена для общения по
электронной почте
a) обозреватель;
b) Outlook Express;
c) NetMeeting.
4. Отметьте правильные адреса электронной почты
a) moymail@rambler.ru;
b) comp.os@manager;
c) znanie.info.news;
d) 2002km@mail.net.ru.
5. Обозреватель Internet Explorer может работать по протоколу
a) POP3;
b) SMTP;
c) HTTP;
d) IMAP.
6. Гиперссылки – это
a) активные элементы Web-страниц;
58
b) пассивные элементы Web-страниц;
c) элементы не Web-страниц.
7. Отметьте правильные IP-адреса
a) 125.34.2;
b) 125.34.12.1;
c) 168.257.89.11;
d) 157.255.45.7.
8. Для сохранения графического элемента с Web-страницы в файл следует
воспользоваться командой
a) Файл/Сохранить как...;
b) Сохранить на панели инструментов;
c) Сохранить рисунок как... из контекстного меню.
9. Web-страница – это файл с расширением
a) htm;
b) doc;
c) ftp;
d) exe.
10. После отправки сообщения его копия помещается в папку
a) входящие;
b) исходящие;
c) отправленные.
11. С помощью ссылки на Web-странице можно обратиться к
a) любому ресурсу Интернет;
b) только к другим Web-страницам.
12. Страница, загружаемая при запуске браузера является
a) домашней страницей сайта;
b) домашней страницей браузера;
c) последней страницей, с которой осуществлялась работа в предыдущем сеансе.
13. Организация, предоставляющая доступ к Интернету, называется
59
a) обозревателем;
b) провайдером;
c) сервис-центром.
14. Приходящая корреспонденция помещается в папку
a) входящие;
b) исходящие;
c) отправленные.
15. При сохранении Web-страницы на диск с помощью команды
Файл/Сохранить как... в Internet Explorer (5.00 и выше)
a) сохранится только текст;
b) сохранится текст и рисунки;
c) сохранятся все элементы.
16. Отметьте правильные адреса Web-страниц
a) http://www.home.dom.ru/index.htm;
b) http:\\www.narod.ru\default.htm;
c) www://yandex.ru/main.htm;
d) http://groups.com;
e) http://ftp://www.mail.ru/index.htm.
17. FTP – это протокол
a) передачи почты на сервер;
b) передачи файлов;
c) передачи гипертекстовых документов.
18. Браузер – программа-клиент для работы с
a) World Wide Web;
b) Internet Explorer;
c) Outlook Express;
d) электронной почтой.
19. Протокол – это
a) программа для общения с помощью электронной почты;
b) список доступных серверов;
60
c) правила передачи данных в сети.
20. HTML – это
a) протокол передачи гипертекстовых документов;
b) язык гипертекстовой разметки документов.
21. Сервер – это
a) компьютер клиента сети Интернет;
b) компьютер, управляющий сетевыми ресурсами;
c) почтовый робот.
22. Протокол, предназначенный для получения писем из почтового ящика
a) FTP;
b) SMTP;
c) HTTP;
d) POP3:
e) NNTP.
23. Совокупность тематически объединенных гипертекстовых страниц –
это
a) сайт;
b) Web-пространство;
c) архив.
24 . Сайт состоит из:
a) программ;
b) архивов;
c) писем;
d) Web-страниц.
25. SMTP – это
a) протокол передачи гипертекстовых документов;
b) протокол передачи файлов;
c) протокол отправки почтовых сообщений на сервер;
d) протокол получения писем из почтового ящика.
26. Для работы компьютера в локальной сети необходим
61
a) модем;
b) концентратор;
c) шлюз;
d) сетевой адаптер. 27. Хост- это
a) компьютер с динамическим IP-адресом;
b) компьютер с постоянным IP-адресом;
c) компьютер, не имеющий IP-адреса.
62
1. a
Ключ
2. c
3. b
4. a,b,d
5. a
6. a
7. b,c,d
8. c
9. a
10. c
11. b
12. b
13. b
14. a
15. c
16. a,d,e
17. b
18. b
19. c
20. b
21. b
22. b
23. a
24. d
25. c
26. d
27. a
63
10.3. Перечень типовых экзаменационных и зачетных вопросов
1. Интернет как иерархия сетей. Виды подключений ПК к Интернету.
2. Магистральная сеть провайдера.
3. Физический IP-адрес. Динамическое распределение IP-адресов.
Формат адреса.
4. Доменные имена. Структура доменного имени. Перевод доменного
имени в IP-адрес.
5. Как работает DNS-сервер. Иерархия DNS-серверов.
6. Основные понятия: Web-страница, Web-сайт, Web-сервер.
7. Современные популярные Web-серверы. Адресация страниц.
8. Основные возможности браузера.
9. Web-технология клиент-сервер.
10. Основные элементы Web-страницы и файловая организация Webсайта.
11. Программы, необходимые для создания Web-сайта.
Инструментальные средства создания web-страниц: FrontPage,
Dreamweaver.
12. Синтаксис HTML. Контейнерные теги. Вложенные теги. Атрибуты и
значения тегов.
13. Структура html-документа. Заголовок документа:
<title>,<meta>,<link>,<style>, <script>.
14. Тело html-документа. Заголовки. Абзацы. Выравнивание заголовков и
абзацев. Конец строки.
15. Создание списков. Маркированные списки. Нумерованные списки.
Списки определений.
16. Размещение изображений в документе. Форматы изображений.
17. Создание гипертекстовых ссылок.
18. Создание таблиц. Базовая структура html-таблицы и ее отображение в
браузере. Задание размеров таблицы.
19. Создание таблиц. Выравнивание содержимого ячеек, строк, таблицы.
64
Задание фона таблиц, рядов и ячеек. Перекрывание строк и колонок.
20. Фреймы. Разделение рабочего пространства окна браузера. Задание
параметров области. Указание имени области.
21. Бесплатное и коммерческое размещение публикаций в сети и
регистрация в поисковых системах.
22. Использование протокола передачи.
23. Регистрация Web-страницы в поисковых машинах Интернет.
24. Регистрация доменного имени второго уровня.
25. Создание презентаций MS Power Point.
26. Работа с презентацией MS Power Point.
27. Работа со структурой презентации.
28. Ввод и изменение текста слайда.
29. Применение и модификация шаблонов оформления MS Power Point.
30. Рисование и изменение фигур MS Power Point.
31. Вставка информации в Power Point.
32.Настройка и демонстрация презентации MS Power Point.
33.Создание мультимедийных презентаций MS Power Point.
ДОПОЛНЕНИЯ И ИЗМЕНЕНИЯ В РАБОЧЕЙ ПРОГРАММЕ
_________________ / ________________ учебный год
В рабочую программу вносятся следующие дополнения и изменения:
65
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное образовательное учреждение
высшего профессионального образования
«Дальневосточный федеральный университет»
(ДВФУ)
Филиал ДВФУ в г.Дальнереченске
КОНСПЕКТЫ ЛЕКЦИЙ
«Компьютерный
дизайн»
080801 «Прикладная информатика (в экономике)»
г. Дальнереченск
2012
66
Контекст разработки Web
Многие люди являются "авторами" страниц Web, немногие являются
"разработчиками" сайтов Web. Возможно, вы также присоединитесь к
сообществу разработчиков.
Создание страницы Web
Сегодня создание страницы Web является не слишком трудной задачей.
Многие стандартные программные пакеты персональных компьютеров
обладают встроенными средствами для преобразования документов текстовых
процессоров, электронных таблиц, баз данных и т.д. в специально
кодированные документы, которые могут быть доступны в Web. Специальные
пакеты для создания страниц Web, такие, как Microsoft FrontPage и
Macromedia Dreamweaver, позволяют легко создавать страницы Web с
помощью технологии перетаскивания (Drag-and-Drop). В большинстве таких
случаев даже не нужно знать о существовании специального языка
кодирования HTML (язык разметки гипертекста), который неявно все это
обеспечивает.
Если вы знаете язык XHTML, то страницы Web можно создавать с
помощью простого текстового редактора, получая в этом случае значительно
больше контроля над их структурой и форматированием, чем это возможно с
помощью методов перетаскивания. Кроме того, появляется возможность легко
интегрировать существующий код XHTML, апплеты Java, встраиваемые
модули мультимедиа и языки сценариев браузера, чтобы создать на странице
некоторое взаимодействие с пользователем. Независимо от содержания или
привлекательности
страниц,
их
назначение
обычно
ограничено
представлением интересного или информативного текста и графики для
персонального потребления. Маловероятно, что кто-то будет заниматься
задачей создания основной бизнес-системы с помощью HTML и нескольких
подключаемых модулей.
67
Разработка Web
"Разработка" Web, в противоположность "созданию" страниц Web,
выходит далеко за пределы использования кодов разметки и нескольких
подключаемых модулей или метода сценариев для создания привлекательных
или информативных страниц Web. Этот термин относится к использованию
специальных стратегий, инструментов и методов для создания страниц Web и
сайтов Web, характеризуемых как трехуровневые, клиент/серверные системы
обработки информации. Давайте рассмотрим эти термины более подробно,
чтобы понять разнообразие задач, для которых разрабатываются страницы и
сайты Web.
Системы обработки информации
Технологии Web используются не только для создания персональных или
рекламных сайтов Web, содержащих информативный, интересный или
развлекательный материал для публичного потребления. Скорее они
становятся
важным
средством
поддержки
фундаментальных
"бизнес-
процессов" современных организаций — поддерживающие операционные и
управленческие функции. Технические инфраструктуры поддержки этих задач
упрощенно делятся на три типа систем на основе Web, называемых системами
интранет, интернет и экстранет.
Системы интранет
Системы
помогающими
интранет
являются
выполнять
частными,
повседневную
управленческо-информационную
и
внутренними
системами,
обработку
информации,
производственную
деятельность
организаций. Системы интранет на основе Web обслуживают стандартные
внутренние функции бизнеса, оказывая тем самым влияние на основные
организационные системы, такие, как бухгалтерский учет и финансовая
отчетность, маркетинг и отдел продаж, системы закупок и сбыта,
производственные системы, системы трудовых ресурсов и другие. Со
временем системы интранет на основе Web станут основными техническими
68
средствами,
посредством
которых
будет
осуществляться
внутренняя
деятельность организаций по выполнению бизнес-процессов.
Системы интернет
Системы интернет являются публичными информационными системами.
Они включают в себя публичные сайты, которые предоставляют новости,
информацию, и развлечения; сайты электронной коммерции для маркетинга и
продажи продуктов и услуг; правительственные сайты для информирования
или обслуживания широкой публики; и образовательные сайты для
предоставления локального и удаленного доступа к образованию и знаниям.
Всем частям общества публичные системы интернет предоставляют товары,
услуги и информацию посредством Всемирной паутины WWW и связанных с
ней сетей и услуг.
Системы экстранет
Системы экстранет являются системами бизнес-для-бизнеса (B2B),
которые управляют электронным обменом данными (EDI) между деловыми
предприятиями. Эти системы обеспечивают информационный поток между
организациями – между компанией и ее поставщиками и между компанией и
ее
сбытовыми
организациями
–
чтобы
помочь
в
координации
последовательности закупки, производства и распространения. Электронный
обмен данными помогает исключить бумажный поток, сопровождающий
бизнес-транзакции, используя технологии Web для пересылки электронных
документов между компьютерами, а не между людьми.
Как системы на основе Web приложения EDI устраняют трудности
передачи информации между различными программными и аппаратными
платформами с изначально различными информационными форматами и
различными протоколами обмена информацией.
Web становится основным технологическим базисом, электронной
магистралью для сбора информации, обработки и распространения во всех
типах организаций
–
в коммерческих и
финансовых предприятиях,
образовательных учреждениях, правительственных агентствах, учреждениях
69
здравоохранения, агентствах новостей и отрасли развлечений и в большинстве
других формальных организаций, как больших, так и маленьких. Это
всепроникающая технология для разработки систем работы с информацией во
всех частях общества.
На основе Web
Термин "на основе Web" относится к тому факту, что системы обработки
информации полагаются на технологию Интернет, в частности, на так
называемую Всемирную паутину (WWW). Поэтому системы на основе Web
действуют в технологических рамках со следующими характеристиками.
Первое: системы действуют в публичных, а не в частных сетях данных.
Они
осуществляют
коммуникацию
через
Интернет,
т.е.
через
распространенные по всему миру, взаимосвязанные сети компьютеров,
которые являются публично доступными.
Второе:
коммуникационные
сети
основываются
на
открытых
и
публичных технических стандартах, таких, как архитектуры Ethernet,
протоколы передачи TCP/IP и протоколы приложений HTTP и FTP. Они не
являются
частными
или
патентованными
стандартами,
но
являются
принципиально открытыми и свободными для публичного использования.
Третье: системы обработки на основе Web используют широко
распространенное,
часто
бесплатное,
программное
обеспечение
для
разработки и работы. Деятельность по обработке происходит с помощью
браузеров Web, а не специально написанного программного обеспечения для
интерфейса пользователя и для внешнего сбора данных и обработки. Браузеры
Microsoft Internet Explorer, Mozilla Firefox, Opera, Netscape Navigator и другие
являются средством взаимодействия пользователей с системами обработки
информации. Также широко распространенные компьютеры серверов Web
выполняют основные функции бизнес-обработки, а серверы баз данных
обеспечивают хранение информации, доступ к ней и извлечение.
Поэтому общедоступные, не являющиеся специализированными, не
являющиеся
патентованными
оборудование
70
и
системы
программного
обеспечения предоставляют техническую среду для разработки систем
обработки информации и для управления этой деятельностью.
Трехслойная, клиент/серверная архитектура
Термин "клиент/сервер" относится к применению сетей на основе
серверов для управления общим доступом к ресурсам и для распределения
задач
между
аппаратными
и
программными
компонентами.
В
клиент/серверных сетях на основе Web распределение задач обработки
происходит в трех слоях, которые соответствуют трем основным компонентам
оборудования/программного обеспечения системы.
Рис. 1.1. Аппаратные и программные слои трехслойной системы
обработки информации
В первом слое (Tier 1) клиентский настольный ПК выполняет работу
интерфейса пользователя системы; во втором слое (Tier 2) сервер Web
выполняет основные функции системы по обработке; и в третьем слое (Tier 3)
сервер базы данных, и в некоторых случаях медиа-сервер, осуществляет
требуемые системе функции хранения и извлечения информации.
В свою очередь, каждый из трех аппаратных компонентов содержит
соответствующее программное обеспечение. Клиентским программным
обеспечением является браузер Web. Сервер Web выполняет сетевую
71
операционную систему (NOS), такую, как Windows Server, Unix Server или
Linux Server, и с помощью дополнительного программного обеспечения,
например, Internet Information Server или Apache Web Server, реализует
службы Интернет, — WWW, FTP, SMTP mail и другие. Сервер базы данных
выполняет систему управления базой данных (DBMS), такую, как MySQL,
Oracle, Access и другие популярные пакеты. Таким образом, отдельные
компоненты выполняют отдельные задачи обработки, которые интегрируются
с помощью Web в законченную систему обработки информации.
Рассмотрим, например, посещение Web-сайта е-коммерции, например,
Amazon.com. Браузер Web является интерфейсом с сайтом. В ответ на
различные "входящие" запросы, которые вы отправляете при просмотре
продаваемых товаров, создаются различные страницы "вывода". Запросы
вводятся в систему через ссылки Web и посылаемые формы, ответы системы
создают страницы HTML, передаваемые назад браузеру для вывода на экране.
Браузер выполняет действия по вводу и выводу, необходимые для
взаимодействия с сайтом.
За сценой на сервере Web решаются специальные задачи по обработке
информации. Когда, например, делается запрос по поиску книги, выполняются
программы поиска в базах данных для извлечения подходящих книг и для
форматирования вывода для доставки в браузер Web. При просмотре корзины
покупателя другие процедуры извлекают выбранные товары и вычисляют
общую стоимость заказа. При оплате заказа исполняются специальные
программы для соединения с системой проверки кредитной карты и
банковскими системами, так что соответствующие счета дебетуются и
кредитуются. Множество задач обработки, связанных с перемещением в сети
и покупкой, происходят на серверах Web скрыто от пользователя, но они
критически важны для осуществления покупки и для осуществления бизнестранзакций, которые с этим связаны.
Большая часть информации, которая собирается и генерируется во время
покупки, хранится в базах данных, которые находятся на отдельных серверах
72
баз данных. Вся информация, которая выводится на экран, извлекается из
таблиц базы данных. Выбранные товары хранятся в таблицах базы данных.
Практически каждый фрагмент информации о просматриваемых продуктах и
транзакциях при покупке сохраняется в больших базах данных в самой
системе е-коммерции или в связанных базах данных, которые находятся в
центре окружающих ее систем бухгалтерского учета, закупок и дистрибуции.
Даже в самых маленьких коммерческих системах на основе Web
присутствуют такие же функции. Браузер Web предоставляет интерфейс
пользователя с системой, специальные страницы обрабатывают бизнес
транзакции, а одна или несколько баз данных поддерживают информацию,
перемещающуюся в системе. Главное состоит в том, что в системах на основе
Web любого размера существуют три основных слоя функциональности.
Поэтому, с точки зрения разработчика Web, задача состоит в создании трех
отдельных компонентов – интерфейса пользователя, процедур обработки
бизнес-операций, и компонентов поддержки базы данных — и последующей
интеграции в полностью функциональную систему обработки информации.
Навыки разработки Web
Разработка Web относится к использованию технологий Web для
создания клиентских и серверных компонентов обработки, к интеграции их в
качестве приложений в системах обработки интранет, интернет или экстранет,
и к развертыванию их в Web для реализации частной и публичной
деятельности организаций. Набор навыков для реализации этих задач
простирается далеко за пределы способности сохранить страницы Web из
программы текстового процессора, за пределы создания простого сайта Web с
помощью перетаскивания в программном пакете настольного компьютера или
даже за пределы жестко закодированных с помощью XHTML страниц c
вкраплениями подключаемых модулей.
При
окончательном
анализе
разработчику
Web
необходимо
проникновение в сущность операционных и управленческих процессов
организации, понимание того, каким образом производственные процессы
73
создаются и опираются на информационные потоки при производстве товаров
и услуг, и способность абстрагироваться и моделировать эти бизнес системы
на доступном оборудовании и программных технологиях, а также навыки
использования этих технологий для создания систем на основе Web, которые
реализуют эти модели.
Один учебник не может вместить все это. Он может, однако,
предоставить основные знания и навыки для решения существующих проблем
и использования возможностей, сопровождающих системы обработки на
основе Web. Он охватывает основные технические средства для интеграции
клиентского и серверного оборудования и программного обеспечения для
создания систем по сбору, обработке, управлению и распространению
информационного содержания, которое оживляет современные организации.
Попутно вы получите надежное понимание той критической роли, которую
системы на основе Web могут играть в создании операционного и
управленческого успеха различных организаций.
Модели систем Web
Исторически Всемирная паутина WWW функционировала просто как
"система доставки информации". Люди привыкли использовать ее для сбора
информации по всевозможным вопросам, для которых миллионы сайтов Web
предоставили доступ. Однако со временем Web стала чем-то большим, чем
просто электронной библиотекой информации. Она стала платформой
коммуникации,
информации
и
транзакций,
на
которой
реализуется
экономическая, социальная, политическая, образовательная и культурная
деятельность.
Модель доставки информации
При функционировании в качестве системы доставки информации
деятельность по разработке Web — достаточно простая и прямолинейная.
Прежде всего, информационное содержимое вводится в документ, который со
временем станет страницей Web. Это содержимое окружается специальными
кодами компоновки и форматирования Языка разметки гипертекста (HTML)
74
— в последнее время Расширяемого языка разметки гипертекста (XHTML) –
для управления его структурой и представлением в браузере Web.
Затем документ сохраняют на компьютере сервера Web для ожидания
публичного доступа. Пользователи обращаются к документу, вводя в окне
своего браузера адрес Web-документа. Этот адрес, называемый URL, или
Единообразный локатор ресурса, определяет сайт, где хранится страница, и
расположение ее каталога на сервере Web. Этот сервер, в свою очередь,
извлекает страницу и посылает ее браузеру, который интерпретирует код
HTML и выводит документ на экране компьютера.
Существуют определенные последствия построения доступа к Web на
модели доставки информации и в следовании традиционному процессу
разработки Web. Прежде всего, информационное содержимое страницы Web
"фиксируется" или "замораживается" в определенном месте. Оно становится
встроенным и тесно связанным с кодами форматирования XHTML, которые
его окружают. В связи с этим становится трудно изменять содержимое
страницы, не переписывая и не редактируя его форматы представления.
Поэтому затрудняется сохранение актуальности страниц, особенно если
содержимое постоянно изменяется.
В то самое время авторам страниц Web зачастую необходимо быть
знакомым с кодированием XHTML. Даже при использовании визуальных
инструментов, таких, как FrontPage или Dreamweaver, автору может
понадобиться специалист по кодированию, чтобы страница выглядела
требуемым образом. "Эксперту" Web часто также бывает необходимо работать
в тесном контакте с поставщиком контента, обеспечивая технические навыки
для сопровождения страниц.
Для
пользователей
также
имеются
ограниченные
возможности
взаимодействия с традиционными страницами Web. Пользователь часто
выступает в роли пассивного читателя контента, для которого сервер Web
действует в качестве простого электронного "переворачивателя страниц".
Поэтому сайт Web, создаваемый вокруг модели доставки информации, может
75
стать
статическим,
пассивным
хранилищем
устаревшей
информации.
Страница Web рискует стать историческим архивом, а не своевременным,
быстро реагирующим источником точной, самой свежей информации.
Модель обработки информации
Чтобы преодолеть это статическое, пассивное использование Web,
возникает необходимость рассматривать Web не просто как систему доставки
информации, но как полнофункциональную систему обработки информации.
Это означает, что саму систему Web и составляющие ее сайты и страницы
необходимо воспринимать как механизмы для выполнения полного набора
действий по вводу, обработке, выводу и хранению, требуемых для создания
динамического, активного контента, – короче, для обеспечения основных
функций системы обработки информации.
Рис. 1.2. Функции системы обработки информации
В модели информационной обработки четыре базовые функции ввода,
обработки, вывода и хранения имеют специфическое значение.

Функция ввода позволяет пользователям взаимодействовать с системой,
запрашивая параметры обработки, управляя информационным доступом и
определяя методы доставки. Кроме того, пользователь может стать
источником данных,
которые обрабатывает
система и
которые
она
поддерживает в своих репозиториях хранимой информации.

Функция обработки относится к деятельности по манипуляции данными
и логике обработки, необходимых для выполнения работы системы. Этот
термин
предполагает,
что
система
может
"программироваться"
для
выполнения арифметических и логических операций, необходимых для
манипуляции данными ввода и для создания выводимой информации.
76

Функция вывода доставляет результаты обработки пользователю в
правильном, своевременном и соответствующим образом форматированном
виде.

Функция хранения гарантирует продолжительность существования и
целостность обрабатываемой информации, поддерживая ее в течение
длительного периода времени и позволяя добавлять, изменять или удалять
систематическим образом.
В
конечном
счете,
хранимая
информация
становится основным контентом страниц Web, отражая самую современную и
точную информацию, появляющуюся на этих страницах.
С точки зрения обработки информации сама сеть Web функционирует как
гигантская открытая компьютерная система, и фактически такой и является.
Деятельность по обработке информации происходит на различных аппаратных
и
программных
компонентах,
расположенных
в
одном
месте
или
разбросанных по всему миру.
При принятии модели обработки информации можно начинать применять
технологию Web для создания сайтов Web, которые являются действительно
динамичными, интерактивными и современными – сайты Web, на которых
информационный контент всегда самый современный, персонализирован в
соответствии с потребностями пользователя, автоматически изменяется в
ответ на запросы пользователя, и когда изменяется сама информация,
пользователь может взаимодействовать со страницей Web, добавляя или
изменяя информацию в системе. Дополнительное преимущество состоит в
том, что сайты можно создавать таким образом, что не потребуется постоянно
переписывать или переформатировать страницы Web. Сами страницы
изменяются динамически, отражая изменение информации или изменение
предпочтений пользователей.
Присваивание функций компонентам
Возвращаясь к понятию трехслойной, клиент/серверной системы,
посмотрим, как аппаратные компоненты, программные компоненты, и
функции обработки связаны друг с другом с точки зрения обработки
77
информации. Вспомните, что аппаратные компоненты в трехслойной среде
состоят из компьютера клиента Web (настольного ПК), компьютера сервера
Web, и сервера базы данных. Каждый из этих трех аппаратных компонентов
выполняет соответствующее программное обеспечение. Теперь можно
отобразить
функции
обработки
информации
на
эти
три
слоя
оборудования/программ.
Рис. 1.3. Функции системы обработки информации, отображенные в
трехслойную систему клиент/сервер
Все функции ввода и вывода попадают в основном в клиентскую машину
Web. Такая деятельность интерфейса пользователя, как ввод данных, проверка
данных, управление обработкой и форматирование вывода, выполняются на
клиенте Web.
78
Основная деятельность по обработке информации падает на сервер Web,
называемый иногда сервером приложений Web. Здесь программируются
арифметические и логические процедуры для выполнения задач системы по
бизнес обработке.
Наконец, хранение данных и функции доступа выполняются на сервере
базы данных. Этот компонент управляет хранением информации и функциями
извлечения, необходимыми для выполнения бизнес-обработки, и позволяет
осуществлять
долгосрочное
обслуживание
хранимой
информации
посредством добавления, изменения и удаления файлов и баз данных.
Как можно видеть на иллюстрации, системные функции "передаются"
различным отдельным компонентам, хотя все они действуют совместно, как
интегрированные системы различных видов деятельности. Основная идея
заключается в том, что специализированные компоненты выполняют
специализированную работу, для которой они лучше всего подходят.
Справедливо также то, что системные функции "не привязаны к месту". То
есть деятельность ввода, обработки, вывода и хранения могут происходить
там, где расположены компоненты. Они могут быть заключены в одной
машине на одном рабочем столе, распределены между двумя или несколькими
машинами в отделе или компании либо широко разбросаны по всему земному
шару. Во всех этих случаях используемые технологии и методы являются
практически
одинаковыми,
делая
достаточно
рутинной
разработку
приложений Web для любой физической или географической среды, с которой
столкнется разработчик.
Разработка приложений Web
Рассмотрение
обработки
Web
информации
как
трехслойной,
имеет
важные
клиент/серверной
последствия
для
системы
разработки
приложений Web. Вчерашний "создатель страницы Web" становится сегодня
"разработчиком
системы
Web".
Теперь
недостаточно
иметь
пакет
разработчика, состоящий из редактора WYSIWYG и базовых навыков
XHTML. Необходимо стать широко образованным в более разнообразном
79
множестве технологий. Внизу на следующей расширенной схеме трехслойной
системы указаны некоторые навыки и инструменты, необходимые для
проектирования и программирования систем на основе Web, которые
обслуживают деятельность по обработке информации.
Рис. 1.4. Навыки разработки Web, требуемые для создания трехслойных
клиент/серверных приложений на основе Web
Системный ввод и вывод
Так как функция интерфейса пользователя осуществляется через браузер
Web,
выполняющийся
на
клиентском
ПК,
необходимо
использовать
инструменты разработки приложений, которые позволяют программировать
80
браузер для выполнения задач форматирования вывода, ввода данных и
проверки данных. Для этого требуются, конечно, языки разметки, такие, как
XHTML и CSS (Каскадные таблицы стилей), для структуризации и
представления системного ввода и вывода. Растет важность расширений
языков разметки, например, DHTML (Dynamic HTML) для взаимодействия
пользователей со страницей Web и XML (Расширяемый язык разметки) для
представления структур данных, которые доставляются сервером для
обработки в браузере. Также основным языком программирования для
браузера является JavaScript, который используется для манипуляции языками
разметки и структурами данных для выполнения задач браузера по обработке.
Системная обработка
На стороне сервера Web необходимо иметь возможность писать
приложения для выполнения основных задач системы по обработке. Для
кодирования этих процедур используются серверные языки, такие, как PHP. С
одной
стороны,
эти
языки
применяются
как
полноценные
языки
программирования для кодирования арифметических и логических операций
обработки, с другой — они используют встроенные компоненты серверной
обработки для выполнения основных и вспомогательных задач системы. PHP
является широко распространенным языком сценариев общего назначения,
который особенно хорошо подходит для разработки Web и может
встраиваться в XHTML.
Управление базой данных
На стороне сервера базы данных такие языки, как SQL (Язык
структурированных запросов), выполняют функции сохранения данных, их
обслуживания и доступа. Кроме того, языки программирования базы данных
используются для кодирования командных процедур, которые являются
функциями обработки, хранимыми в базах данных, для извлечения,
обновления и создания отчетов о содержимом баз данных. Серверные языки
могут вызывать эти встроенные процедуры баз данных для выполнения
соответствующей обработки, а не кодировать их непосредственно. Все
81
большую важность в хранении данных и электронном обмене данными
приобретают структуры данных XML.
Иногда на разработку Web смотрят упрощенно с чисто технической точки
зрения, забывая, что это является также разработкой системы. Разработчик
должен понимать организационные структуры и процессы. Прежде всего,
система на основе Web является бизнес-процессом. Если не понимать суть
процессов, то маловероятно, что можно будет разработать системы для их
реализации или поддержки. Разработка Web является также реализацией
некоторой интеграции. Задача состоит в том, чтобы объединить совокупность
оборудования, программного обеспечения, людей и процедур для выполнения
некоторой деятельности. Поэтому системный подход является критически
важным для соединения всех частей вместе во что-то функциональное,
продуктивное, экономичное и дружественное. Наконец, разработка Web
является в большой степени творческим предприятием. Очень часто работа
состоит в разработке чего-то нового там, где ничего перед этим не
существовало. Вместо следования директивам хорошо продуманных планов,
ваше воображение создает эти планы, а художник внутри вас их воплощает.
Управляемый полет фантазии хорошо служит разработке Web.
Разработчику
Web
требуется
поэтому
творческое
воображение,
организаторское чутье и обширный набор навыков для создания приложений
Web, которые обслуживают потребности информационной обработки.
Разработчик не обязан быть экспертом высокого уровня во всех языках и
программных инструментах; но необходимо иметь хорошее представление об
их использовании.
Программное обеспечение учебника
В этом учебнике представлено основное подмножество инструментов,
необходимых для создания динамических, интерактивных сайтов Web. На
стороне браузера применяются и описываются XHTML, CSS, JavaScript для
редактирования данных, и динамический HTML. В качестве языка сценариев
сервера используется PHP. Также описываются встроенные функции PHP,
82
необходимые для выполнения функций ввода, обработки, вывода и хранения.
На стороне базы данных представлены примеры для Microsoft Access, и
описаны основные принципы использования языка SQL.
Даже при отсутствии достаточного доступа к этим технологиям,
необходимо
собственные
уметь
следовать
динамические
инструкциям
приложения
и
Web.
начать
создавать
Необходимо,
свои
конечно,
разбираться в программировании: разработчик Web, прежде всего, является
программистом. Предполагается, что читатель хорошо знаком с Visual Basic.
Необходимо также иметь навыки работы с XHTML и быть знакомым с
каскадными таблицами стилей.
Язык PHP
PHP означает Препроцессор гипертекста PHP. Это серверный язык
программирования, созданный специально для динамических страниц Web.
Язык был первоначально разработан в 1994 г. Расмусом Лердорфом и был с
тех пор расширен, чтобы стать одним из наиболее популярных языков
сценариев WWW. Согласно статистике Netcraft в 2005 г. PHP использовался
более чем на 23000000 доменах. Подобно другим типам серверных языков,
таких, как ASP, ASP.NET и JSP, код PHP обрабатывается на сервере Web и
создает код XHTML или другой вывод, который можно увидеть в браузере. В
отличие от других серверных языков, PHP является продуктом с открытым
исходным кодом — это означает, что каждый имеет доступ к исходному коду
и может использовать, изменять и распространять его полностью бесплатно.
Текущая версия PHP, рассматриваемая в учебнике, имеет номер 5. Этот
учебник, несомненно, не является полным изложением языка PHP. Он должен
только продемонстрировать некоторые наиболее широко используемые
свойства и приложения PHP.
83
Систему PHP5
можно применять практически
с любым типом
операционной системы и сервера Web. Однако, чтобы сценарии PHP были
обработаны, должен быть установлен интерпретатор PHP. Это программное
обеспечение доступно в двух формах – полный исходный код и исполняемые
двоичные файлы. Большинство систем Linux поставляются с исходным кодом
PHP. Для систем, отличных от Unix/Linux, двоичные файлы можно загрузить
по адресу http://www.php.net/downloads.php.
84
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное образовательное учреждение
высшего профессионального образования
«Дальневосточный федеральный университет»
(ДВФУ)
Филиал ДВФУ в г.Дальнереченске
МАТЕРИАЛЫ ПРАКТИЧЕСКИХ ЗАНЯТИЙ
«Компьютерный
дизайн»
080801 «Прикладная информатика (в экономике)»
г. Дальнереченск
2012
85
86
Темы 1, 2. Общие вопросы организации интернет. Адресация в
интернете.
Лабораторная работа 1. Построение гиперссылок в MS Word.
Цель: Получение практических навыков создания Web-страниц в MS
Word.
Задание1: Построить гиперссылки. Создать Web-страницу в редакторе
MS Word.
Гиперссылки представляют собой средство удобного перехода к другому
разделу текущего документа или Web-страницы, к другому документу Word
или к другой Web-странице, а также к файлу, созданному в другом
приложении. С помощью гиперссылок можно переходить к файлам
мультимедиа, в т.ч. звукозаписям и видеозаписям.
Наглядным примером использования гиперссылок является работа со
справочной системой в приложениях MS Office.
При работе с гиперссылками автоматически открывается панель
инструментов Web.
Гиперссылка от обычного текста отличается тем, что ее текст выделен
другим цветом (обычно синим или фиолетовым), подчеркнут и при
помещении на него указателя мыши последний приобретает форму руки,
указывающей на то, что можно перейти к данному объекту простым щелчком
мыши.
Задание 2: Создать текстовую гиперссылку в документе MS Word. Для
перехода по гиперссылке нужно в то место документа, куда осуществляется
переход, вставить закладку.
А. Создать гипертекст с тремя переходами в пределах одного документа
к фрагментам текста, указанным на рис.1 (т.е. к информации об авторах,
Части 1 и Главе 1). Для этого нужно выполнить:
6.
Набрать вручную или скопировать текст, помещенный в надписях
на рис.1, при этом каждый фрагмент текста поместить в начало новой
87
страницы.
7.
В начало каждого фрагмента вставить закладку с именами. Напри-
мер, перед сведениями об авторах - закладку Ильф, перед частью 1 - Часть1 и
т.д. Это выполняется в меню Вставка \ Закладка \ Указать имя закладки \
Добавить.
8.
Выделить будущий гипертекст, например, И. Ильф, Е. Петров и
выполнить в меню: Вставка \ Гиперссылка \ Добавление гиперссылки \
Связать с \ Местом в этом документе \ ОК.
9.
Аналогичным образом создать две оставшиеся гиперссылки и
проверить их работу.
10.
Показать созданные гиперссылки преподавателю.
Б. Создать гипертекст с переходом к другому файлу. Для этого
выполнить:
3. Поместить фрагмент Главы 1 в отдельный файл и создать на него
гиперссылку. Ссылка на отдельный файл создается практически так же, как и
ссылка в пределах одного документа (см. выше п. А). Отличие только в том,
что в окне Добавление гиперссылки (см. п.3) нужно щелкнуть по кнопке
Имеющимся файлом, затем щелкнуть по кнопке Файл и найти тот файл, в
который вы записали фрагмент Главы 1.
4. Показать созданную гиперссылку преподавателю.
Задание 3: Создать гиперссылку из документа MS Word на диаграмму MS
Excel.
В качестве объекта ссылки выберем файл Solvsamp.xls, в котором
приведен пример выполнения поиска решения в среде MS Excel. Этот файл
создается при установке пакета MS Office и находится в папке C:\Program
Files\Microsoft Of-fice\Office\Samples. Для создания гиперссылки на этот файл
нужно выполнить:
5.
Установить курсор в место нахождения гиперссылки и набрать
имя файла, который будет вызываться – в нашем случае Solvsamp.xls.
6.
Выделить имя файла Solvsamp.xls, включая точку после типа
88
файла, щелкнуть по нему правой кнопкой мыши и выбрать в меню пункт
Гиперссылка…
В открывшемся окне Добавление гиперссылки нажать кнопку
7.
Файл, открыть папку C:\Program Files\Microsoft Office\ Office\Samples,
выделить в ней файл Solvsamp.xls и нажать кнопку ОК два раза.
Текст гиперссылки Solvsamp.xls станет подчеркнутым и приобретет
8.
фиолетовый цвет. Щелкнуть мышью по гиперссылке и убедиться в том, что
открывается приложение MS Excel, в окно которого загружается файл
Solvsamp.xls.
Одновременно автоматически выводится панель инструментов Web (если
не выводится, надо щелкнуть правой кнопкой мыши в любом месте панели и
выбрать из контекстного меню пункт Web).
Обратить внимание, что после вызова гиперссылки ее цвет изменился.
Это является сигналом пользователю о том, что данная гиперссылка уже
вызывалась.
®=
Для удаления гиперссылки нужно
щелкнуть по ней правой кнопкой мыши и
выбрать в меню пункт Гиперссылка \ Удалить гиперссылку.
5. После завершения работы в приложении нужно вернуться в исходное
место документа. Для этого нужно щелкнуть мышью по синей стрелке § Назад
на панели инструментов Web. Для повторного возврата к гиперссылке нужно
щелкнуть мышью по синей стрелке § Далее на этой же панели.
®=
Файлы, вызываемые по гиперссылке, нельзя удалять
или перемещать в другое место на диске, т.к. нарушается путь,
ведущий
к этому файлу и гиперссылка не будет вызываться.
ве-
Задание 4: Создать гиперссылку из документа MS Word на рисунок.
В документ можно вставить гиперссылку на рисунок, находящийся на
данном ПК. Этот рисунок представлен в тексте как гиперссылка своим именем
и открывается после щелчка по нему. Создание гиперссылки на рисунок
выполняется точно так же, как и гиперссылка на документ MS Excel (см.
89
задание 2).
Создать гиперссылку из документа MS Word на любой рисунок и
проверить ее работу.
Показать созданные в заданиях 2 и 3 гиперссылки преподавателю.
Темы 3, 4. Разработка Web-страниц. Язык гипертекстовой разметки
документов HTML.
Веб-страницы
являются
гипертекстовыми
и
гипермедийными
документами, которые могут содержать графику, аудио- и видео- информацию
и ссылки на другие ресурсы сети Интернет. Веб-страницы создаются с
помощью языка гипертекстовой разметки HTML (Hyper Text Markup
Language). Просмотр вебстраниц осуществляется специальными программами
- браузерами (обозревателями), содержащими интерпретатор языка HTML.
Под
гипертекстом
понимается
совокупность
информационных
фрагментов, связанных между собой. При этом просмотр информационных
фрагментов может осуществляться пользователем в произвольном порядке. В
HTML все элементы связи между фрагментами текста находятся в теле самого
документа и записываются в ACSII-формате (только текст).
Возможно
создание
веб-страниц
в
режиме
непосредственного
редактирования кода языка HTML (редакторы кодов HTML), либо в режиме
визуального
редактирования
внешнего
вида
страницы
наподобие
редактирования документов Word (WYSIWYG-редакторы).
Общие идеи построения и интерпретации HTML документов:
>
HTML
документ
выглядит
как
совокупность
текстовых
фрагментов, каждый из которых окружен тегами (tags).
>
Каждый тег разметки HTML имеет свой идентификатор и,
возможно, несколько параметров (атрибутов). Название тега вместе с его
параметрами заключаются в скобки <>. В общем виде тег выглядит
следующим образом:
<тег параметр1 = значение1 параметр2= значение2...> Текст 1 </тег>
90
Действие тега распространяется на фрагмент текста <Текст1>.
>
Значения параметров рекомендуется заключать в двойные кавычки. Первый
тег называется открывающим, а парный ему закрывающим. Закрывающий тег
имеет тот же идентификатор, но начинается с символа /. Теги, не
предусматривающие наличие вложенного текста, называются пустыми или
непарными, они не имеют закрывающей части. Непарные теги имеют вид:
<тег параметр 1=значение1 параметр2=значение2 ...>
Для
>
связи
информационных
фрагментов
между
собой
в
гипертекстовом (гипермедийном) документе используются однонаправленные
ссылки,
называемые
гиперссылками.
В
информационных
фрагментах
выделяются специальные поля связывания, активизация такого поля приводит
к переходу на другой фрагмент. Чтобы идти дальше, необходимо
активизировать следующие поля связывания.
>
В гипермедийном документе могут присутствовать гиперсвязи
различных типов. Для WWW актуальны следующие типы связей:
5) поле связывания - метка назначения;
6) поле связывания - фрагмент;
7) поле связывания - фрагмент + метка назначения;
8) поле связывания - подсеть.
Гиперсвязь
(вебстраницы).
первого
Метка
типа
определена
назначения
внутри
отмечает
конец
одного
фрагмента
гиперсвязи,
это
именованная строка в HTML документе.
Второй тип ссылается на начало указанного фрагмента (веб-страницы).
При использовании связи третьего типа переход осуществляется не к
началу указанного фрагмента, а к метке, установленной внутри этого
фрагмента.
Гиперсвязь четвертого типа ссылается на корневой каталог подсети,
откуда есть доступ ко всем принадлежащим подсети фрагментам (обычно это
ссылка на корневой каталог веб-узла).
>
Любой
ресурс
WWW
может
91
быть
указан
с
помощью
универсального идентификатора - URL (Uniform Resource Locator).
В общем виде URL выглядит следующим образом:
метод: //сервер :порт/путь/файл#метка URL
определяет:
4) протокол доступа к документу,
5) имя и адрес сервера, содержащего этот веб-документ,
6) местоположение документа в общей структуре веб-сервера.
Лабораторная работа № 2. Разработка Web-страниц.
Цель: Получение практических навыков работы в стандартном
приложении Блокнот, создания Web-страниц.
С помощью непосредственного редактирования тегов языка HTML
создать веб-страницу ассоциации поставщиков «МАЯК» (рис.2), связанную с
двумя страницами фирм-членов ассоциации.
Задание 1: Создать веб-страницу, содержащую форматированный
текст и списки.
3. Создать на диске рабочую папку (например, в папке «Мои документы»).
4. С помощью команды главного меню Windows Пуск \ Программы \ Стандартные \
92
Рис. 2. Страница «МАЯК».
Блокнот
запустить приложение «Блокнот», предназначенное для редактирования
текста в формате ACSII символов (текста MS DOS). Для того, чтобы текст
документа размещался в окне «Блокнот» полностью, включить режим Перенос по
словам (меню Формат программы «Блокнот»).
3. Создать в блокноте новый файл, содержащий текст пустого документа
HTML:
<HTML>
<HЕAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
6. Сохранить файл в рабочей папке с именем mayak.htm. При сохранении
из блокнота выбрать в качестве типа файла Все файлы. В рабочей папке должен
появиться файл со значком И. Просмотреть пустую веб-страницу mayak.htm в
браузере MS Internet Explorer. Проанализировать содержимое заголовка
браузера (в заголовке отображается имя файла с указанием пути к нему).
7. Перейти в режим редактирования веб-страницы, выполнив в браузере
команду Вид \ Просмотр HTML-кода. Команда осуществляет вызов приложения
«Блокнот» с текстом активной веб-страницы. Отредактировать страницу. В
качестве заголовка страницы (содержимое тега TITLE) ввести текст
«Ассоциация поставщиков МАЯК».
<TITLE> Ассоциация поставщиков МАЯК </TITLE>
9. Сохранить произведенные изменения.
10.Перейти в окно браузера и просмотреть в нем отредактированную
вебстраницу, нажав кнопку Обновить на панели инструментов браузера.
Проанализировать изменения, произошедшие в строке заголовка окна браузера
(в заголовке отображается содержимое тега TITLE).
11.Поместить в тело страницы текст. Для этого:
• загрузить в Word документ, хранящийся в файле products.doc из папки
93
С: \Student\Задания\Web \Samples;
• скопировать текст документа в буфер. Перейти в окно блокнота,
содержащего текст веб-страницы, и вставить текст из буфера в качестве
содержимого тега BODY.
Сохранить изменения и просмотреть результат в окне браузера.
7. Выделить строку «Товары месяца: Напитки» в отдельный абзац, для
чего заключить ее в тег Р.
<Р>Товары месяца: Напитки</Р>
Аналогичным образом выделить в один абзац строку «При заказе на
любой из следующих товаров устанавливается 5% скидка», а во второй абзац весь оставшийся блок текста. Просмотреть изменения в браузере.
8. Выделить строку «Товары месяца: Напитки» жирным шрифтом,
заключив ее в тег В.
<Р><В>Товары месяца: Напитки</В></Р>
ВНИМАНИЕ!
Следует
строго
соблюдать
вложенность
тегов.
И
открывающий, и закрывающий теги форматирования символов текста (В, I,
FONT и др.) должны помещаться внутри тега абзаца (Р, DIV, CENTER).
Закрывающая часть вложенного тега должна обязательно размещаться в теле
тега-контейнера.
9. Выделить строку «При заказе на любой из следующих товаров
устанавливается 5% скидка» курсивом, заключив ее в тег I. Фрагмент текста
«5% скидка» выделить жирным курсивом, заключив в тег В.
10. Названия товаров оформить в виде списка, каждое название должно
располагаться на новой строке. В пункте 7 фрагмент текста, содержащий
названия товаров, был выделен в один абзац тегом Р. Заменить этот тег на тег
маркированного списка UL. Элементы списка (отдельные названия товаров)
заключить в тег LI. В результате веб-страница должна принять вид:
Товары месяца: Напитки
При заказе на любой из следующих товаров устанавливается 5% скидка:
• Chai
94
• Chang
• Guarana Fantastica
• Lakkalikoori
___
11. Реорганизовать список названий товаров в двухуровневый список
следующего вида:
1. Напитки
• Chai
• Chang
• Guarana Fantastica
• Sasquatch Ale
• Steeleye Stout
• Cote de Blaye
• Chartreuse verte
• Ipoh Coffee
2.
Закуски
Laughing Lumberjack Lager Outback Lager
Rhonbrau Klosterbier Lakkalikoori Для этого
выполнить следующие действия:
• разделить список на две части: с «Chai» no «Ipoh Coffee» и с «Laughing
Lumberjack Lager» no «Lakkalikoori». Каждую часть заключить в тег
маркированного списка UL;
• изменить вид маркера второй части списка товаров, задав значение
SQUARE для параметра TYPE тега списка. Параметр и его значение
указываются в открывающей части тега UL:
<UL TYPE=”square”>
• перед первой частью списка добавить строку «Напитки», перед второй «Закуски». Заключить эти строки в теги элементов списка LI, а весь фрагмент
текста, относящийся к спискам (начиная со строки «Напитки») - в тег
нумерованного списка OL.
95
В случае если маркеры первой части списка автоматически изменились,
указать для этой части тип маркера disc.
14. С помощью параметра BGCOLOR тега BODY задать произвольный
цвет фона страницы. В качестве значения этого параметра можно использовать
английские названия основных цветов (см. приложение «фоновые цвета»)
15. Наверху веб-страницы разместить отцентрированный заголовок,
выделенный горизонтальными линиями:
«МАЯК»
Ассоциация поставщиков
Выполнить следующие действия:
• в начало тела веб-страницы (сразу после открывающей части тега
BODY) добавить нужный текст, заключить его в тег CENTER;
• для того, чтобы разбить текст на две строки, вставить между ними
непарный тег перевода строки BR, не имеющий закрывающей части;
• перед текстом, заключенным в тег CENTER, вставить непарный тег
горизонтальной линии HR, задать следующие свойства линии: выравнивание
по центру (параметр ALIGN), длина 80% от ширины окна браузера (параметр
WIDTH) и толщина в 2 пикселя (параметр SIZE):
<HR ALIGN=”center” WIDTH="80%" SIZE="2">
• вставить тег горизонтальной линии и после заголовка. Изменить цвет
нижней линии, добавив в тег HR параметр COLOR с выбранным значением;
• текст строк заголовка выделить крупным шрифтом, отличающимся от
используемого по умолчанию на две позиции. Для этого заключить каждый
фрагмент текста в тег FONT, указав параметр размера шрифта SIZE (по
умолчанию используется шрифт размером 3):
<FONT SIZE=”+2”>«MAЯK»</FONT>
• изменить цвет текста заголовка, добавив в тег FONT параметр COLOR с
выбранным значением;
• выделить текст заголовка жирным шрифтом, заключив его в тег В внутри
тега FONT.
96
14. Выделить текст строки «Товары месяца: Напитки» крупным
шрифтом, превышающий заданный по умолчанию шрифт на 1 позицию.
Обратить внимание на правильное соблюдение вложенности тегов!
15. Добавить после нижней разделительной линии текст с описанием
деятельности ассоциации:
• скопировать через буфер в нужное место веб-страницы «МАЯК»
рекламный
текст
со
страницы
formaggi.htm
из
папки
D:\Student\Задания\Web\Samples
Компания Formaggi Fortini постоянно пополняет список поставок новыми
вкусными товарами. В дополнение к великолепным сырам мы рады
предложить ряд кондитерских, макаронных и мясных изделий. Попробуйте!
Вам очень понравится .
• вслед за ним скопировать текст со страницы cajun.htm из той же папки:
«Добро пожаловать в компанию Cajun Delights! Вот уже более 50 лет мы
поставляем лучшие индейские и креольские продукты для магазинов по всему
свету. Наши продукты готовятся на основе подлинных рецептов из самых
свежих компонентов, поэтому они понравятся не только уроженцам Луизианы,
вспоминающим о доме, но и всем гурманам, интересующимся креольской
кухней».
• заключить оба абзаца совместно в тег DIV. Обратить внимание, что в
отличие от тега Р, тег DIV не добавляет пустой строки между абзацами.
Задать выравнивание абзацев по ширине, указав значение justify для
параметра ALIGN тега DIV;
• для разделения абзацев между собой в конец первого абзаца добавить тег
перевода строки BR;
• в начале каждого абзаца задать отступ - «красную строку», добавив
подряд по пять символов неразрывного пробела, каждый из которых задается
последовательностью символов  .
18. Для текста из предыдущего задания увеличить отступ от левой
границы страницы, заключив тег DIV с содержимым в тег BLOCKQUOTE.
97
19. Выделить названия компаний «Formaggi Fortini» и «Cajun Delights»
жирным курсивом.
Тема 5. HTML: изображения, ссылки, таблицы, фреймы.
Лабораторная работа 3. Графика в HTML.
Цель: Научиться добавлять на Web-страницы изображения, ссылки,
таблицы и фреймы.
Задание 1: Добавить на веб-страницу графические изображения и их
позиционирование с помощью таблиц.
4. Создать в рабочей папке новую папку с именем images.
5. Скопировать в папку Images графические файлы cajlogo.gif, forlogo.gif и
nwlogo.gif из папки D: \Student\Задания\Web\Samples.
6. В заголовок страницы «МАЯК» добавить эмблему, хранящуюся в
графическом файле nwlogo.gif. Для этого после верхней линии, отделяющей
заголовок, вставить непарный тег IMG с указанием имени графического
файла и пути к нему:
<IMG SRC=”images/nwlogo.gif ”>
• В целях ускорения загрузки страницы с графикой браузером при ее
открытии, указать в теге IMG величину графического изображения 84x84
точки
(пикселя) с помощью параметров WIDTH (ширина изображения) и HEIGHT
(высота изображения):
<IMG SRC=”Images/Nwlogo.gif” WIDTH=”84” НEIGНТ=”84”>
• Изменить размеры изображения на 100x100, просмотреть изменения в
браузере.
• Расположить текст заголовка рядом с эмблемой, для чего задать
обтекание изображения текстом с помощью параметра ALIGN тега IMG.
Задать для параметра ALIGN значение left, чтобы изображение находилось
слева от текста. Просмотреть результат.
• Задать горизонтальные отступы вокруг изображения по 50 точек с
помощью параметра HSPACE тега IMG.
98
• Просмотреть результат в браузере. Изменить размер окна браузера и
наблюдать, как изменится расположение текста и изображения.
4. В конец страницы «МАЯК» добавить логотипы фирм Formaggi Fortini и
Cajun Delights с описанием выполняемых этими фирмами поставок.
Позиционировать изображения и текст с помощью таблицы:
• В конец страницы (перед закрывающей частью тега BODY) вставить
таблицу из трех строк, каждая из которых состоит из двух ячеек. Для этого
добавить тег таблицы TABLE. В тело тега TABLE добавить три тега строки
таблицы TR. В тело каждого тега добавить по два тега ячейки TD.
<TABLE>
<TR>
<TD></TD> <TD></TD>
</TR>
<TR>
<TD></TD><TD></TD>
</TR>
<TR>
<TD></TD><TD></TD>
</TR>
</TABLE>
• В первую ячейку второй строки (в тело соответствующего тега TD)
поместить изображение из файла forlogo.gif из папки images с размерами
189x34 точки.
• Во вторую ячейку второй строки поместить текст со страницы
formaggi.htm из папки D:\Student\Задания\Web\Samples «Поставки итальянских
продуктов по всему миру».
• В первую ячейку третьей строки поместить изображение из файла
cajlogo.gif из папки images с размерами 195x72 точки.
• Во вторую ячейку третьей строки поместить текст со страницы
cajun.htm из папки D:\Student\Задания\Web\Samples: «Лучшие индейские и
99
креольские продукты для магазинов по всему свету».
Рис. 3. Таблица с логотипами фирм на странице «МАЯК».
8. Для таблицы задать отступы по 10 точек от границ ячеек до текста с
помощью параметра CELLPADDING тега TABLE.
9. В первую ячейку первой строки поместить текст «Члены нашей
ассоциации». Выделить его шрифтом размера 4, сделать жирным.
10.Сделать текст «Члены нашей ассоциации» заголовком таблицы. Для
этого следует объединить ячейки первой строки:
• Из первой строки таблицы удалить второй (пустой) тег ячейки TD.
• Первую ячейку первой строки распространить на две ячейки. Для этого в
открывающей части тега TD, содержащего заголовок таблицы, указать
параметр COLSPAN со значением 2:
<ТD COLSPAN="2"> ... </TD>
• Расположить заголовок по центру объединенной ячейки. Для этого
задать значение center параметра ALIGN в соответствующем теге TD.
8. Просмотреть страницу «МАЯК» в браузере. Исследовать изменения
отображения таблицы с логотипами фирм, происходящие при изменении
размера окна браузера.
При уменьшении размера окна, изображения логотипов фирм будут
отцентрированы по вертикали по отношению к поясняющему их тексту
(рис.3).
Задать для логотипов фирм вертикальное выравнивание «по верхнему
100
краю». Для этого в тегах TD соответствующих ячеек указать параметр
вертикального выравнивания VALIGN со значением top.
Просмотреть изменения в браузере.
101
Задание 2: Создать навигацию внутри страницы «МАЯК» с помощью
гиперссылок. Создать связи страницы «МАЯК» со страницами фирм
Formaggi Fortini и Cajun Delights.
1. Внутри ячейки таблицы заключить тег IMG, содержащий ссылку на
файл логотипа фирмы Formaggi Fortini, в тело тега гиперссылки А. Для тега А
указать адрес страницы, на которую указывает ссылка, с помощью параметра
HREF. В данном случае ссылка указывает на страницу formaggi.htm,
расположенную в папке D:\Student\Задания\Web\Samples:
<А HREF=”d:\Student\...\formaggi.htm"> <IMG ...></A>
5. Аналогичным образом оформить изображение с логотипом фирмы
Cajun Delights как гиперссылку на страницу cajun.htm из той же папки.
Проверить работу гиперссылок в окне браузера.
6. В окне браузера изображение помечается как гиперссылка с помощью
рамки. Отменить рамки вокруг логотипов фирм, сделав их размер нулевым.
Для этого в соответствующие теги IMG добавить параметр BORDER со
значением 0.
7. Оформить как гиперссылки на страницы formaggi.htm и cajun.htm
названия фирм, выделенные в тексте страницы «МАЯК» жирным курсивом:
• Текст заключается в тег А вместе с тегами форматирования символов В
и I.
• Потребовать, чтобы страницы фирм открывались в новом окне. Для
этого добавить в тег А параметр TARGET со значением _blank (Внимание!
Значение «_blank» начинается со знака подчеркивания). Проверить работу
ссылок.
5. В конце страницы создать ссылку на ее начало:
• В начале страницы непосредственно после открывающей части тега
BODY создать метку. Для этого вставить тег А с параметром NAME и именем
метки. Назвать метку topstr. Тело тега А оставить пустым:
<А NAME=”topstr”></A>
• В конце страницы непосредственно перед закрывающей частью тега
102
BODY вставить текст «Вернуться в начало страницы». Заключить текст в тег
абзаца Р с выравниванием по центру (параметр ALIGN, значение center).
Выделить текст курсивом.
• Выделить текст «Вернуться в начало страницы» как гиперссылку, в
качестве значения параметра HREF указать имя метки, предваренное знаком
#:
<А HREF="#topstr"> ... </А>
Проверить действие гиперссылки в браузере.
6. Продемонстрировать страницу «МАЯК» преподавателю.
Таблица фоновых цветов
Таблица содержит названия некоторых цветов, которые могут быть
использованы для оформления фона (или текста) веб-страниц. Названия
основных цветов отмечены звездочкой *.
Название
RGB
цвета
Название
RGB
цве та
Название
RGB
цвета
aqua*
#00FF FF
ivor y
#FFFF F0
olive*
#808000
beige
#F5F5 DC
khaki
#F0E6 8C
orang e
#FFA500
bisque
#FFE4 C4
lavender
#E6E6 FA
orchid
#DA70D6
black*
#0000 00
le-monchif-
#FFFA CD
papayaw-hip
#FFEFD5
fon
brown
#A52 A2A
light blue
#ADD 8E6
purple*
#800080
burly-wood
#DEB 887
light coral
#F0808 0
red*
#FF000O
chartreuse
#7FFF 00
light cyan
#E0FF FF
salmon
#FA8072
chocolate
#D269 1E
light green
#90EE 90
sienna
#A0522D
coral
#FF7F 50
light salmon #FFA0 7A
silver*
#С0С0С0
103
cornsilk
#FFF8 DC
light
#20B2 AA
skyblue
#87CEEB
cyan
#00FF FF
seagreen
light
#87CE FA
slateblue
#6A5ACD
darkkhaki
#BDB
skyblue
light
#77889
slategray
#708090
76B
slategray
9
#FFFF
springgree n
#00FF7F
#00FF
teal*
#008080
#FAF0
white
#FFFFFF
fuchsia*
#FF00
ligh-tyellow
#FFD7
lime *
FF
gold
E0
00
goldenrod
O0
#DAA
linen
520
gray*
E6
#8080
maroon*
#80000 0 whites-
#0080
mint cream
#F5FF
moke
yellow*
#FFFF00
#ADF
moc casin
#FFE4
yellow-
#9ACD32
#F0FF
navy *
80
green*
00
greenyellow
honeydew
#F5F5F5
FA
F2F
B5
green
#00008 0
F0
Тема 6. Создание Web-страниц и Web-узла в MS Front Page.
Новую веб-страницу в Microsoft FrontPage 2003 можно создать тремя
способами: на основе чистой страницы, на основе имеющейся страницы и на
основе встроенных шаблонов. В меню Файл выберите команду Создать. В
появившейся справа области задач Создать в группе Создать страницу выполните одно
из следующих действий:
• Чтобы создать веб-страницу на основе чистой страницы, выберите Пустая
страница.
• Чтобы создать веб-страницу на основе шаблона, имеющегося в Microsoft
FrontPage, выберите Другие шаблоны страниц, перейдите на вкладку с требуемым
шаблоном и щелкните его.
• Чтобы создать веб-страницу на основе созданного пользователем
динамического веб-шаблона, выберите Создание из имеющейся страницы, найдите и
выберите шаблон, а затем нажмите кнопку Создать новый.
Открытие ранее созданной веб-страницы осуществляется с помощью
104
команды Файл \ Открыть.
В зависимости от необходимого способа просмотра страниц и работы с
ними можно использовать один из четырех режимов представления: Конструктор,
Код, С разделением, Просмотр.
Свойства веб-страницы можно изменить, вызвав команду Файл \ Свойства,
появится окно с пятью закладками: Общие, Форматирование, Дополнительно,
Другие,
Язык.
Веб-узел
представляет
собой
группу
связанных
веб-страниц,
размещенных на одном из серверов HTTP. Шаблоны и Мастера Microsoft
FrontPage облегчают и ускоряют создание веб-узла.
Создание веб-узла в Microsoft FrontPage включает следующие основные
шаги:
• В меню Файл выберите команду Создать.
• В области задач Создание в группе Новый веб-узел выберите тип веб-узла.
Укажите нужный шаблон веб-узла. Укажите расположение для публикации
веб-узла с помощью кнопки Обзор и нажмите кнопку Открыть.
Открытие ранее созданного веб-узла осуществляется с помощью команды
Файл \ Открыть узел.
Работа с веб-узлом в целом может быть осуществлена в следующих
режимах представления: Папки, Удаленный веб-узел, Отчеты, Переходы,
Гиперссылки, Задачи.
Лабораторная работа № 4. Создание Web-страниц и Web-узла в MS
Front Page.
Цель: Получение практических навыков работы в MS Front Page.
Задание 1: Создать веб-узел. Создать веб-страницу.
3. Создайте в директории D:\Student\год_поступления\номер_группы\
папку с вашим именем. В этой папке будет расположен новый веб-узел.
4. Откройте программу FrontPage и в меню Файл выберите команду Создать. В
появившейся справа области задач Создание в группе Одностраничный веб-узел ука-жите
105
шаблон Одностраничный веб-узел. С помощью кнопки Обзор укажите расположение
вашей папки и нажмите Открыть, затем ОК. В результате этих действий будет
создан пустой веб-узел с заготовками папок.
3. На странице index.htm в режиме Конструктор наберите следующий текст
(заполнив пропуски):
Добро пожаловать на мою страничку!
Меня зовут _________ , я учусь на ___ курсе ______ факультета
филиала Санкт-Петербургского государственного инженерно-экономического
университета (г. Чебоксары), в группе _____________________ .
Эта страница создана с помощью Microsoft FrontPage 2003.
8. В представлении Страница перейдите последовательно в режимы
Конструктор, С разделением, Код, Просмотр. В режиме Код вы можете
увидеть html-коды созданной вами страницы. Режим С разделением является
комбинацией режимов Конструктор и Код. Перейдите в режим Просмотр. Вы
также можете просмотреть страницу, использовав Файл \ Просмотреть в
обозревателе.
9. Закройте веб-узел Файл \ Закрыть узел. Перейдите с помощью
программы Проводник (или Мой компьютер) в созданную вами папку.
Исследуйте ее содержимое.
10.Чтобы
открыть
веб-узел
для
дальнейшего
редактирования,
в
программе FrontPage выберите команду Файл \ Открыть узел и укажите
расположение вашей папки, в которой содержится веб-узел, затем нажмите
ОК.
11.Создайте новую пустую страницу и сохраните ее в этом же веб-узле
как chuvashia.htm.
8. На странице chuvashia.htm в режиме Конструктор наберите небольшой
фрагмент текста, который приведен ниже в рамке (для набора символов
чувашского алфавита используйте команду Вставка \ Символ):
ЧУВАШСКАЯ РЕСПУБЛИКА
Чăваш Республики
106
Образована 24 июня 1920 года как Чувашская автономная область,
преобразована 21 апреля 1925 г. в Чувашскую АССР, 24 октября 1990 г.
переименована в Чувашскую Советскую Социалистическую Республику, 13
февраля 1992 г. – в Чувашскую Республику в составе Российской Федерации.
Площадь – 18,3 тыс. м2. Численность населения – 1351,7 тыс. чел. (на
1.01.2001г.).
Столица
–
город
Чебоксары.
В
Чувашской
Республике
21
административный район.
Государственные символы Чувашской Республики – флаг, герб и гимн
– утверждены Постановлением Верховного Совета ЧР от 29 апреля 1992 года.
Автор герба и флага – Э.М.Юрьев. В качестве государственного гимна
Чувашской Республики принята песня «Тăван çĕршыв» (Песня о Родине)
композитора Г.С.Лебедева и поэта И.С.Тукташа.
9. Откройте веб-страницу index.htm, вызовите команду Файл / Свойства и
задайте такие свойства, как название страницы Главная страница; фоновый
рисунок, который можете разработать сами, или взять, например, из папки
Windows; язык страницы (русский), набор символов (кириллица). Сохраните
страницу, выполнив команды Файл / Сохранить. При сохранении страницы вы
получите запрос о сохранении внедренных объектов – файла фонового
рисунка. Для сохранения рисунков веб-узла обычно используется папка
images, поэтому смените папку с помощью соответствующей кнопки, затем
сохраните все рисунки. Перейдите в режим представления папок веб-узла и
откройте папку images – в ней должны находиться файлы рисунков.
10. В свойствах страницы index.htm задайте метапеременные «descriptor»
(Моя первая веб-страница) и «keywords» (фамилия, имя, институт, туризм,
сервис). Для этого вызовите команду Файл \ Свойства, откройте вкладку
Другие, и в разделе Пользовательские метапеременные нажмите кнопку
Добавить (см. рис. 4).
107
Рис. 4. Определение пользовательских метапеременных.
14. Аналогично в свойствах страницы chuvashia.htm задайте название
страницы (Чувашская Республика), фоновый рисунок на ваше усмотрение,
язык страницы и набор знаков, метапеременные «descriptor» (Чувашская
Республика) и «keywords» (Чебоксары, Чувашская, Республика).
15. Создайте страницу web.htm и задайте такие свойства, как название
(Программные средства разработки веб-страниц и презентаций), язык
страницы (русский), набор знаков (кириллица). Наберите на этой странице
список основной литературы, приведенной в конце настоящих методических
указаний.
16. Сохраните все страницы и закройте веб-узел Файл \ Закрыть узел.
Темы и стили веб-страницы
Тема - это набор единообразных элементов оформления и цветовых схем,
которые могут быть применены к веб-страницам для придания им более
профессионального вида. Тема может быть применена к одной или
нескольким страницам, а также ко всему веб-узлу. Для применения темы к
оформлению страницы выберите команду Тема в меню Формат, затем в области
задач укажите необходимую тему.
Стилем называется набор характеристик форматирования, которому
назначено уникальное имя. В программе Microsoft FrontPage можно выбирать
стили
из
группы
пользовательские
встроенных
стили.
стилей
Встроенными
или
создавать
стилями
собственные
называются
часто
используемые параметры форматирования, по умолчанию доступные в поле
Стиль. Определенные пользователями стили могут быть модифицированными
встроенными
стилями
или
создаваемыми
108
именами
классов.
При
редактировании страницы и встроенные, и определенные пользователями
стили доступны в одном списке.
Рассмотрим создание стиля для абзаца. Выполните следующие действия:
• откройте меню Формат и выберите команду Стиль. В открывшемся окне для
поля Список переключитесь на опции Теги НТМ и выберите тег h2 для изменения
стиля заголовка второго уровня;
• нажмите кнопку Изменить, при этом откроется новое окно;
• в поле Тип стиля выберите, будет ли стиль применяться к целому абзацу
(пункт Абзац) или только к знакам текста (пункт Знак);
•
нажмите кнопку Формат и определите характеристики нового стиля;
Замечание. При применении стиля непосредственно к элементу
страницы с помощью кнопки Стиль в диалоговом окне Свойства будет создана так
называемая встроенная таблица каскадных стилей.
Задание
2:
Использовать
встроенные
темы.
Изменить
стиль
форматирования текста.
1. Откройте в программе Microsoft FrontPage созданный вами в
предыдущем упражнении веб-узел Файл \ Открыть узел.
2. Примените понравившуюся вам тему к оформлению страницы
chuvashia.htm.
9. Добавьте стиль абзаца собственной разработки для страницы index.htm.
10.Примените стили собственной разработки на странице index.htm для
заголовка 1, заголовка 2 и стиля абзаца «Обычный».
11.Переключитесь
в
режим
отображения
html-кода
и
найдите
вставленную таблицу стилей (она размещена в заголовке между тегами
<style> </style>).
12.Аналогично примените свой стиль форматирования к тегам h1 и P (тег
<P> начинает новый абзац).
13.Примените одну из имеющихся тем к оформлению страницы web.htm.
14.Примените к оформлению списка литературы на странице web.htm
стиль Маркированный список.
109
9. Закройте веб-узел.
Гиперссылки
Гиперссылка – это связь между веб-страницами или файлами. При
щелчке гиперссылки посетителем узла указанный в ней объект отображается в
веб-обозревателе, открывается или запускается в зависимости от типа этого
объекта. Можно создать гиперссылки на следующие объекты: существующую
страницу или файл, новую страницу, страницу или файл в Интернете, адрес
электронной почты, на определенное место (закладку) в тексте.
Чтобы создать гиперссылку на существующую страницу или файл,
выделите текст или рисунок, который требуется использовать в качестве
гиперссылки. Выберите команду Вставка \ Гиперссылка. В группе Связать с
выберите значение файлом, веб-страницей. Выберите необходимый файл или
страницу.
Чтобы создать гиперссылку на страницу или файл в Интернете,
выделите текст или рисунок, который требуется использовать в качестве
гиперссылки. Выберите команду Вставка \ Гиперссылка, затем в поле Адрес
наберите необходимую ссылку.
Создание гиперссылки на закладку. Закладка - метка или место в
тексте, которому присвоено определенное имя, что позволяет быстро
переходить к нему в дальнейшем.
Чтобы создать закладку на веб-странице:
• Выберите текст, с которым следует связать закладку.
• В меню Вставка выберите команду Закладка.
• В поле Имя закладки введите название закладки (используя при
необходимости пробелы).
Для создания гиперссылки на закладку выделите текст или рисунок,
который требуется использовать в качестве гиперссылки. Выберите команду
Вставка \ Гиперссылка. В области Связать с щелкните значок файлом, вебстраницей. Выделите страницу, содержащую закладку, и нажмите кнопку
Закладка. В группе Выберите существующее место в документе выделите
110
необходимую закладку и нажмите кнопку OK.
Задание 3: Создать гиперссылки на объекты веб-узла. Создать
гиперссылки на закладки.
3. Откройте созданный вами веб-узел.
4. На странице index.htm создайте гиперссылку на страницу chuvashia.htm,
связав ее с текстом «Моя Чувашия».
3. В конце страницы chuvashia.htm создайте обратную гиперссылку на
страницу index.htm, связав ее со строкой «На главную страницу».
9. На
странице
создайте
index.htm
гиперссылку
на
сайт
www.microsoft.com, связав эту гиперссылку с текстом «Данная страница
создана с использованием Microsoft FrontPage».
Рис. 5. Схема гиперссылок веб-узла.
10.Переключитесь в режим отображения гиперссылок веб-узла и
проверьте, получили ли вы следующую схему (рис. 5):
6. Проверьте работу гиперссылок в обозревателе Internet Explorer.
работу
11.Проверьте
переключившись
в
режим
гиперссылок
отображения
в
автоматическом
веб-узла
Отчеты
режиме,
и
выбрав
Гиперссылки.
12.Создайте закладки на странице chuvashia.htm для слов «Образована»,
«Площадь», «Столица», «Государственные символы».
13.В самом начале страницы chuvashia.htm наберите текст, приведенный в
рамке, используя стиль «Заголовок 2»:
История образования Чувашской Республики
Площадь
Столица
Государственная символика
111
10. Свяжите строки этого текста гиперссылками с соответствующими
закладками.
11. Проверьте работу гиперссылок в режиме просмотра страницы
chuvashia.htm.
12. Закройте веб-узел.
Веб-компоненты
Рассмотрим
следующие
веб-компоненты:
бегущую
строку,
интерактивные кнопки, панель ссылок и штамп времени/даты.
Бегущая строка. Этот элемент оформления позволяет создавать
различные эффекты на веб-страницах. Текст будет перемещаться по экрану в
горизонтальном направлении. Для вставки бегущей строки на веб-страницу
выполните следующие действия:
6. Щелкните место, куда следует вставить бегущую строку, а потом
введите и выделите текст, который следует представить в виде бегущей
строки.
7. В меню Вставка выберите команду Веб-компонент.
8. В группе Тип компонента нажмите кнопку Динамические эффекты.
9. В группе Выбор эффекта дважды щелкните значок Бегущая строка.
10.Задайте параметры бегущей строки.
Интерактивная кнопка – графическая кнопка с текстом, при наведении
пользователем указателя мыши ее вид изменяется.
1. Установите курсор там, где необходимо добавить кнопку. В меню Вставка
выберите команду Меняющаяся кнопка. Появится окно, показанное на рис. 6.
112
Рис. 6. Окно выбора интерактивной кнопки.
5. На вкладке Кнопка в списке Кнопки выберите стиль. В поле Текст
введите текст для отображения на кнопке.
6. Если текст не помещается на кнопку, то ее размеры можно увеличить,
перейдя на вкладку Рисунок.
7. Для создания гиперссылки нажмите кнопку Обзор, расположенную
после поля Ссылка. Найдите и выберите файл, адрес URL или адрес
электронной почты, с которым нужно связать кнопку, а затем нажмите кнопку
OK.
Замечание. При сохранении веб-страницы Microsoft FrontPage выдает
запрос, сохранять ли связанные с кнопкой изображения. Для их сохранения
следует указать папку images.
Панель ссылок представляет собой группу интерактивных кнопок в
едином оформлении. Для добавления панели ссылок на веб-страницу
выполните следующие действия:
8. Поместите курсор там, где требуется расположить панель ссылок.
9. В меню Вставка выберите команду Переходы.
10.В списке Тип компонента выберите пункт Панели ссылок.
11. В списке Выберите тип панели щелкните пункт Панель с
пользовательскими ссылками и нажмите кнопку Далее.
113
12.Выберите нужный стиль панели ссылок, затем нажмите кнопку Далее.
13.Выберите требуемую ориентацию страницы и нажмите кнопку Готово.
Появится текст: [Измените свойства этой панели для отображения на ней
гиперссылок] + добавление ссылки.
14.Щелкните на строку «добавление ссылки» и создайте гиперссылку на
необходимый вам объект.
Штамп времени и даты состоит из поля даты и (или) поля времени,
которые соответствуют моменту создания или последнего изменения
страницы. Этот штамп, например, позволяет посетителям вашего веб-узла
узнать, изменилась ли информация на нем с момента их последнего визита.
Установите курсор на веб-странице в том месте, где необходимо добавить
штамп времени. В меню Вставка выберите команду Дата и время. Выберите
тип штампа времени. Выберите формат для полей даты и времени.
Задание 4: Создать динамические эффекты, интерактивные кнопки,
панель ссылок, штамп даты и времени.
4. Откройте созданный вами веб-узел. На странице index.htm строку
«Добро пожаловать на мою страничку!» сделайте бегущей. Параметры
бегущей строки задайте по своему вкусу.
5. На странице chuvashia.htm строку «Чувашская Республика» сделайте
бегущей.
6. В конце страницы chuvashia.htm создайте интерактивную кнопку с
надписью «На главную страницу» для возврата на index.htm.
4. Создайте аналогичную интерактивную кнопку в конце страницы
web.htm.
5. На странице index.htm после бегущей строки создайте панель ссылок
на страницы chuvashia.htm и web.htm.
114
9. В конце каждой страницы введите строку «Дата последнего изменения
страницы» и добавьте штамп времени и даты с автоматическим обновлением
даты последнего изменения.
10.Проверьте работу интерактивных кнопок в обозревателе Internet Explorer.
11.Закройте веб-узел, сохранив измененные страницы.
Графика
Рисунки на веб-страницы можно добавлять из различных источников.
Рассмотрим добавление рисунка из файла и встроенной коллекции картинок.
Установите курсор туда, где необходимо добавить рисунок. В меню
Вставка выберите команду Рисунок, а затем – команду Из файла. Перейдите к
файлу, который нужно добавить, и нажмите кнопку Вставить.
Для добавления графики из Коллекции картинок (Microsoft) в меню
Вставка выберите команду Рисунок, а затем – команду Картинки. В области
задач Картинки введите в поле Поиск текста слово или фразу, описывающие
требуемый клип. Нажмите кнопку Найти. В списке результатов поиска
щелкните клип, чтобы вставить его.
Изменение свойств рисунка. Щелкните рисунок правой кнопкой мыши и
выберите в контекстном меню команду Свойства рисунка. Появится
следующее окно (рис. 7):
Рис. 7. Окно «Свойства рисунка».
115
Здесь можно менять свойства обтекания текстом, положение на странице,
размер, надпись к рисунку и т.д.
Свойства
рисунков
также
можно
изменить,
используя
панель
инструментов Рисунки. Если панель инструментов Рисунки скрыта, щелкните
рисунок правой кнопкой и выберите в контекстном меню команду Показать
панель инструментов рисунков.
Автоэскиз. Эскиз – это уменьшенная версия рисунка, которая быстро
загружается. Просмотрев эскиз, посетитель веб-узла может решить, нужно ли
ему загружать версию рисунка полного размера. Средство «Автоэскиз»
автоматически создает эскиз с гиперссылкой на исходный рисунок.
Для создания автоэскиза щелкните рисунок правой кнопкой и выберите в
контекстном меню команду Автоэскизы. Будет создан эскиз рисунка и
гиперссылка на первоначальный рисунок обычного размера.
Объект WordArt – это набор стилей текста, которые можно использовать
на веб-страницах для их украшения. Например, можно создать текст с тенью,
скошенный, повернутый или растянутый текст и текст, заполняющий
указанную форму. Все это так называемые текстовые эффекты. Текстовый
эффект является объектом-рисунком, для его редактирования, например, для
заливки рисунком или текстурой, можно использовать панель инструментов
Рисование.
Для добавления объектов WordArt откройте меню Вставка и вызовите
команду Рисунок \ Объект WordArt.
Задание
5:
Добавить
графические
объекты
на
веб-страницу:
автоэскизы, объект WordArt.
4. Откройте в программе FrontPage ранее созданный вами веб-узел.
5. Откройте страницу chuvashia.htm и вставьте файлы с флагом и гербом
Чувашской Республики (расположение файлов уточните у преподавателя,
ведущего занятия).
6.
Щелкните рисунок флага правой кнопкой и выберите Свойства
рисунка. Перейдите на закладку Общие и в строке Текст наберите «Флаг
116
Чувашской Республики». Сохраните страницу вместе с внедренными
рисунками (для расположения рисунков выберите папку images). Перейдите в
режим просмотра и подведите указатель мыши на рисунок флага, должен
появиться введенный вами текст (надпись к рисунку).
10.Создайте соответствующую надпись к гербу.
11.Инструмент ^1 позволяет задать «прозрачный цвет». Чтобы сделать
«прозрачным» цвет на рисунке герба, выделите рисунок, нажмите на кнопку на
панели инструментов и выберите цвет, который вы хотите сделать
«прозрачным» (это должен быть белый фон на рисунке герба). Теперь
нажмите на эту кнопку и прикоснитесь «карандашом» к выбранному цвету на
рисунке - он станет «прозрачным». Запомните - на рисунке может быть только
один «прозрачный» цвет.
12.Сохраните страницу вместе с внедренными файлами рисунков, для их
расположения выберите папку images.
13.Рассмотрите возможности остальных инструментов самостоятельно.
14.Создайте автоэскиз для флага и для герба.
15.Сохраните страницу вместе с внедренными файлами автоэскизов.
16. Просмотрите страницу в обозревателе Internet Explorer.
17. Для настройки размера автоэскиза и других его свойств в меню Сервис
выберите команду Параметры страницы, а затем — вкладку Автоэскизы.
18. Откройте страницу index.htm и вставьте графический файл с вашей
фотографией. Создайте надпись к вашей фотографии.
19. Перейдите на страницу chuvashia.htm и создайте внизу объект
WordArt с текстом «Сервер администрации президента ЧР».
20. Создайте гиперссылку на объект WordArt, связанную с www.cap.ru.
21. Закройте
веб-узел,
сохранив
измененные
страницы
вместе
с
внедренными рисунками.
Таблицы. Макетные таблицы
Таблицы служат для компактного представления информации на вебстранице. Для работы с таблицами используйте одноименный раздел меню.
117
При оформлении уже созданной таблицы можно воспользоваться
имеющимися шаблонами, вызвав команду Таблица \| Автоформат.
Таблицы могут помечаться и снабжаться названиями путем добавления
подписей
Таблица \ Вставить \ Подпись.
Подпись таблицы размещается над таблицей
или под ней. Текст подписи допускает форматирование.
Макетная
таблица
представляет
собой
созданную
для
страницы
структуру. Макетные ячейки — это области этой структуры, содержащие в
себе содержимое страницы, включая текст, рисунки, веб-части и другие
элементы. Вместе макетные таблицы и ячейки представляют горизонтальные
и вертикальные области, которые можно добавлять на веб-страницу и которые
позволяют задать для содержимого сложную визуальную структуру.
Чтобы
ускорить
создание
веб-страницы,
можно
воспользоваться
предварительно определенными макетными таблицами, вызвав команду
Макетные таблицы и ячейки в меню Таблица. В появившейся справа панели
задач, Макетные таблицы и ячейки следует выбрать нужный макет. Можно
также создать собственную макетную таблицу, самостоятельно построив
таблицу и ячейки.
При щелчке по границе макетной таблицы или ячейки с каждой ее
стороны появляются надписи, сообщающие ширину столбцов и высоту строк.
Каждая надпись содержит стрелку, щелчок по которой приводит к
отображению раскрывающегося списка с вариантами изменения размера
столбца или строки. Можно также выбрать один столбец или одну строку в
таблице и разрешить ей автоматически занимать максимальное доступное
пространство в окне обозревателя. Такая способность ячейки называется
авторастягиванием. Чтобы сделать ячейку авторастягивающейся, щелкните
стрелку на надписи с шириной столбца или высотой строки и выберите команду
Авторастягивание столбца или Авторастягивание строки.
Задание 6: Форматировать таблицу.
3. Откройте в программе FrontPage созданный вами веб-узел.
4. На странице index.htm создайте таблицу и заполните ее, указав
118
расписание ваших занятий:
1
время ПН. ВТ. СР.
9.00- исто-10.20 рия
2
10.30- … 11.50
ЧТ.
ПТ.
СБ.
7. Создайте подпись к таблице «Расписание моих занятий».
8. Для оформления таблицы воспользуйтесь командой Автоформат.
9. Измените цвет фона таблицы. Задайте выравнивание таблицы по
центру страницы.
10.Создайте новую пустую веб-страницу и сохраните ее в этом же узле,
назвав vuz.htm. Задайте такие свойства страницы, как название (ИНЖЭКОН),
язык (русский), набор знаков (кириллица).
7. Примените к оформлению страницы vuz.htm
следующую
макетную
таблицу,
состоящую
из
четырех областей (угол, верхний колонтитул, столбец
слева и основная область).
10.Задайте второму столбцу макетной таблицы свойство
авторастягивания.
11.В угол макетной таблицы поместите эмблему университета.
15. Для области верхнего колонтитула задайте цвет фона, совпадающий с
фоном эмблемы университета
16. В верхнем колонтитуле макетной таблицы наберите, используя стиль
«Заголовок 1» и какой-нибудь светлый цвет текста, строку «История
университета».
17. Скопируйте и вставьте в основную область макетной таблицы на
странице vuz.htm текст «История университета» (расположение файла
уточните у преподавателя, ведущего занятия).
18. Задайте цвет фона или фоновый рисунок для всех остальных областей
макетной таблицы на ваше усмотрение.
119
19. Закройте веб-узел, сохранив измененные страницы.
Формы
При
добавлении
формы
в
Microsoft
FrontPage
будет
вставлена
прямоугольная область, которая будет выделена пунктирной линией и будет
содержать кнопки Отправить и Сброс. Внутрь прямоугольной области можно
добавлять текст и поля формы, такие как текстовые поля, переключатели,
флажки, раскрывающиеся списки и кнопки.
Чтобы добавить форму на веб-страницу, в меню Вставка выберите
команду Форма, а затем выберите необходимые поля, которые требуется
добавить в форму. После выборе поля, например, с раскрывающимся списком,
для задания вариантов значений следует щелкнуть форму правой кнопкой
мыши и в появившемся контекстном меню выбрать Свойства поля формы.
Формы часто используются на веб-страницах для того, чтобы узнать
мнение посетителей о веб-узле. С помощью шаблона MS FrontPage легко
создать гостевую книгу. При создании страницы в области задач следует
указать Другие шаблоны страниц, а затем шаблон Гостевая книга.
Задание 7: Создать форму для текста. Сделать раскрывающиеся списки.
3. Откройте в программе FrontPage созданный вами веб-узел.
4. Создайте гостевую книгу на основе шаблона и сохраните эту страницу
как guest.htm. Задайте свойства страницы (название, язык, набор знаков и т.п.).
3. Сверху наберите строку «Гостевая книга», используя стиль «Заголовок
1».
6. Примените какую-либо тему к оформлению страницы.
7. После формы для введения заметок наберите текст, приведенный на
рис. 8:
120
Рис. 8. Формы для введения заметок и с раскрывающимися списками.
10.Создайте форму Раскрывающийся список, в котором будут указаны
следующие значения возраста: <20, 20-29, 30-39, 40-49, 50-60, >60.
11.Создайте форму Раскрывающийся список, в котором будут указаны
значения пола: муж, жен.
12.Создайте форму Раскрывающийся список, в котором будут указаны
следующие значения уровня образования: неполное среднее, среднее,
неполное высшее, высшее, ученая степень.
13.В конце гостевой книги создайте интерактивную кнопку для возврата
на главную страницу index.htm.
10. Закройте веб-узел, сохранив измененные страницы.
Задание 8: Создать личный веб-узел с помощью мастера.
8. Создайте в папке вашей группы папку Ваша_фамилия1. Откройте
программу MS FrontPage и создайте в этой папке личный веб-узел с помощью
мастера. Заготовка личного веб-узла содержит 6 веб-страниц: index.htm,
aboutme.htm, interest.htm, photo.htm, favorite.htm, feedback.htm.
9. Введите на страницу aboutme.htm краткую информацию о себе.
10.На страницу photo.htm вставьте свои фотографии.
11.На странице interest.htm опишите свои увлечения.
12.На странице favorite.htm укажите ссылки на ваши любимые Интернетресурсы.
13.Настройте страницу feedback.htm для сбора необходимых сведений о
посетителях вашего веб-узла.
14.Сохраните внесенные изменения и закройте веб-узел.
121
Тема 7. Разработка презентаций в MS Power Point.
Презентация (от английского Presentation - представление) - это набор
цветных картинок – слайдов – на определенную тему, который хранится в
файле специального формата с расширением .ppt. На каждом слайде можно
поместить произвольную текстовую или графическую информацию.
Термин «презентация» (иногда говорят «слайд-фильм») связан прежде
всего с информационными и рекламными функциями картинок, которые
рассчитаны
на
определенную
категорию
зрителей:
потенциальных
покупателей и заказчиков, акционеров, журналистов, читателей и т.д.
Однако темы презентаций не ограничиваются предложением товаров и
услуг, информацией о положении дел и т.п. В области науки и техники любой
доклад можно теперь подготовить в форме презентации (слайд-фильма), при
этом становятся не нужными множество рисованных плакатов с формулами и
диаграммами. Однако для такого доклада перед широкой аудиторией нужен
специальный дорогостоящий проектор. Поэтому в настоящее время основным
средством показа слайд - фильмов является экран дисплея.
В школах и институтах с помощью пакета презентаций можно создавать
и демонстрировать учебные и справочные слайд - фильмы, рассказывать о
работе кружков, секций и клубов, демонстрировать спортивные достижения.
Создание и редактирование произвольных презентаций выполняется с
помощью приложения MS Power Point, входящего в состав пакета MS Office.
В процессе создания презентации вы можете проявить себя и как специалист,
и как режиссер, и как художник. По сравнению с редактором MS Word пакет
MS Power Point предъявляет повышенные требования к творческим
способностям автора, к его художественному вкусу.
Следует отметить, что в Power Point, кроме презентаций, можно также
создавать другие документы, например, визитные карточки, объявления и т.д.
Лабораторная работа № 5. Разработка и размещение презентаций.
Цель: Получение практических навыков работы в программе MS Power
Point.
122
Задание 1: Изучить примера презентации, созданной в MS Power Point.1.
Запустить приложение MS Power Point и из каталога
D:\Student\Задания\Web загрузить файл Primer.ppt, в котором находится
пример
презентации учебного курса.
Так как в процессе работы вы будете изменять файл Primer.ppt, то для
сохранения оригинала запишите на диск этот файл под другим именем: Файл \
Сохранить как \ Указать новое имя Primer_n.ppt \ Сохранить, где n - номер вашего
компьютера. После такой операции все вносимые вами изменения в
презентацию будут сохраняться в новом файле Primer n.ppt.
8. Изучить элементы оконного интерфейса Power Point: систему меню,
панели инструментов, установленные тип и размер шрифта, масштаб текста в
окне и т.д. Просмотреть все пункты меню Power Point и ознакомиться с
системой помощи. Обратить внимание на то, что интерфейс Power Point имеет
много общего с интерфейсом приложений Word и Excel.
После загрузки файла презентации на экран выводится первый слайд этой
презентации (титульный лист). Этот слайд содержит три области, в каждой из
которых содержится текст: в первой области - Институт туризма и сервиса, во
второй - Информатика и в третьей - Презентация курса. Последовательно
щелкните мышью на каждом из этих текстов и определите, какая гарнитура и
размер шрифта использовались для набора данного текста. В меню Формат \
Шрифт определите, есть ли тень у данного текста.
Используя клавишу Page Down, просмотреть остальные слайды данной
презентации (всего их пять) и аналогичным образом определить, из скольких
областей состоит каждый слайд и что находится в каждой области. С
помощью клавиши Page Up по слайд-фильму можно продвигаться в обратном
направлении. Общий вид слайдов файла Primer.ppt приведен на рис. 9-13.
9. Нажать кнопку £§| Режим сортировщика слайдов, которая находится в левом
10.нижнем углу экрана или выполнить в меню: Вид \ Сортировщик слайдов. На
экран выводятся в уменьшенном размере все слайды данной презентации,
123
которые снабжены порядковыми номерами. В этом режиме можно, захватив
слайд мышью, переместить его на другое место, т.е. выполнить «монтаж»
слайд - фильма. Поупражняйтесь в перемещении слайдов, после чего
восстановите их первоначальное положение.
11.В этом же режиме можно удалить выделенный слайд (клавишей
«Delete» или командой меню Правка \ Удалить слайд) или вставить новый
Вставка \
12.Создать слайд. Попробуйте вставить новый пустой слайд в конец
презентации и потом удалите его. Для этого нужно щелкнуть мышью правее
последнего слайда и выполнить Вставка \ Создать слайд.
10.Для перехода обратно в режим слайдов нажмите кнопку п| Режим слайдов
или выполните в меню Вид \ Слайды.
11.Запустить демонстрацию презентации. Для этого выполнить в меню
Показ слайдов \| Показ или нажать кнопку на панели инструментов щ | Показ.
Обратите внимание на эффекты, сопровождающие показ слайдов, в частности,
на появление объектов слайда.
12.Открыть в меню пункт Показ слайдов \| Переход слайда и в области
Продвижение установить опцию По щелчку и сбросить опцию Автоматически. Снова
запустить демонстрацию презентации, причем, теперь переход к следующему
слайду выполняется вручную по щелчку мыши.
13.В этом же окне в области Продвижение установить опцию Автоматически
после, а в поле Секунд последовательно установить значения 0 и 5 сек и проверить
действие этого поля на демонстрацию презентации в автоматическом режиме.
12. Вывести на экран второй слайд и выделить в нем область с
программой 1-го курса. Открыть в меню Показ слайдов \ Настройка анимации и в
открывшемся окне Настройка анимации на вкладке Эффекты в области Выберите
эффект и звук определить установленный эффект. Раскрыть список эффектов,
выбрать из них несколько других и, нажав кнопку Просмотр, посмотреть их
действие.
124
13.
На этой же вкладке раскрыть список Появление текста и просмотреть
различные эффекты появления текста в выделенной области. Обратить
внимание, что в области Порядок анимации задается последовательность появления
на слайде содержимого различных составляющих его объектов. Эту
последовательность можно поменять, выделив нужный объект и кнопками со
стрелками переместив его в нужное место (вперед или назад).
12. Откройте файл Айсберг.ppt, в котором находится визитная карточка,
созданная в Power Point. Определите, из каких объектов она состоит.
Рис. 9. Слайд 1.
Рис. 10. Слайд 2.
125
Рис. 11. Слайд 3.
Рис. 13. Слайд 5. Задание 2: Создать презентацию в MS
Power Point.
126
7. Создать презентацию по своей теме. Номер темы презентации должен
соответствовать порядковому номеру студента в журнале группы. Презентация
должна содержать 7-8 слайдов и достаточно подробно освещать предмет
презентации. Слайды должны быть художественно оформлены и содержать
текст, рисунки, диаграмму, а также различные эффекты.
8. Для создания новой презентации выполнить Файл \ Создать. В открывшемся
окне Создать презентацию на вкладке Дизайны презентаций выбрать подходящий вид для
всех создаваемых слайдов, при этом в окне Просмотр можно увидеть внешний
вид слайда для выбранного варианта. Далее в окне Создать слайд выбрать
авторазметку для первого слайда. Если нет подходящего шаблона, можно
выбрать наиболее похожий, который потом можно отредактировать, или же
выбрать пустой слайд и заполнить его самостоятельно.
9. Заполнить первый слайд необходимой информацией. Выбрать шрифт,
его размер, цвет, фон и т.д. Цвет фона устанавливаются кнопкой Цвет заливки
панели инструментов Рисование (найдите ее сами), сама же панель выводится на
экран из меню Вид \ Панели инструментов \ Рисование. Опция Способы заливки
появляющаяся после нажатия кнопки Цвет заливки, позволяет выполнить
градиентную заливку, а также заливку в виде текстуры или с узорами.
10.Если необходимо вставить в слайд надпись, для которой не
предусмотрено место в шаблоне слайда, то это можно сделать, нажав кнопку щ |
Надпись на панели Рисование. Далее мышью при нажатой левой кнопке в нужном
месте выделить область и занести в нее информацию. Каждую из областей
после выделения можно двигать по слайду мышью или клавишами <- Т -»I.
11.После создания первого слайда аналогично создаются остальные. Для
создания следующего слайда нужно выполнить в меню Вставка \ Создать
слайд или нажать кнопку g | Создать слайд, после чего выбрать шаблон
создаваемого слайда и т.д.
12.Для вставки рисунка в слайд нужно:
127
• если рисунок вставляется в специально для него предусмотренное место
шаблона, то достаточно выполнить 2 щелчка левой кнопкой мыши и из
образцов выбрать нужный;
• если рисунок вставляется в произвольную область, то с помощью мыши
после нажатия кнопки щ | Надпись на панели Рисование нужно выделить область и
далее выбрать Вставка \ Рисунок \ Картинки.
1. После создания всех слайдов (или одновременно с этим) установить
различные эффекты для появления текста и рисунков на слайдах. Для этого
выделяется объект и далее Показ слайдов \ Настройка анимации. Способ демонстрации
слайд-фильма (ручной или автоматический), а также интервал времени
устанавливается в меню Показ слайдов \ Переход слайда.
2. Продемонстрировать
созданный
слайд-фильм
преподавателю.
Выполнение презентации показать в ручном и автоматическом режимах. По
заданию преподавателя изменить эффекты в объектах и продемонстрировать
их.
Тема 8. Проведение презентаций в MS Power Point.
Лабораторная работа 6. Создание презентаций по индивидуальному
заданию.
Цель: Научить создавать собственные презентации.
Задание: Из списка предложенных тем выбрать одну и создать по ней
презентацию в MS Power Point.
Темы для создания презентаций (выбираются по желанию студента):
39. Институт туризма и сервиса
40. Адвокатская контора
41. Галантерейный магазин
42. Ресторан
43. Подсобное хозяйство
44. Консультативная поликлиника
45. Теннисный клуб
46. Фабрика детских игрушек
128
47. Мебельный салон
48. Овощной магазин
49. Магазин по продаже меховых изделий
50. Автосалон
51. Салон сотовой связи
52. Парикмахерская
53. Клуб «Сад и огород»
54. Оружейный магазин
55. Моя домашняя оранжерея (домашний зоопарк)
56. Библиотека
57. Туристическая фирма
58. Спортивная секция
59. Любимый предмет
60. Курсовая работа по специальности
61. Гостиница
62. Хобби
63. Чемпионат (футбол, баскетбол, танцы и т.п.)
64. Конференция
65. Личная презентация (о себе, семье, учебе, увлечениях)
66. Создаем презентацию (разработка, редакция, демонстрация и т.п.)
67. Создаем Web-страницу
68. Студенческая группа
69. Компьютер (устройство, состав, работа)
70. Вкусно готовим
71. Красиво шьем
72. Конкурс
73. Совещание
74. Работаем в Интернете
75. Предлагаем товары и услуги
129
76. Здоровый образ жизни
39. Мои увлечения
130
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное образовательное учреждение
высшего профессионального образования
«Дальневосточный федеральный университет»
(ДВФУ)
Филиал ДВФУ в г.Дальнереченске
МАТЕРИАЛЫ ДЛЯ ОРГАНИЗАЦИИ САМОСТОЯТЕЛЬНОЙ РАБОТЫ СТУДЕНТОВ
«Компьютерный
дизайн»
080801 «Прикладная информатика (в экономике)»
г. Дальнереченск
2012
131
Организация самостоятельной работы
Основное изучение материалов дисциплины студентом производится
самостоятельно. В процессе самостоятельной работы студенты:
1. изучают основную и дополнительную литературу;
2. осваивают способы создания собственной Web-страницы;
3. осваивают приемы работы в MS Power Point, создают собственную
презентацию.
В ходе самостоятельного изучения данной дисциплины студентами
осваиваются основные вопросы курса, отраженные в пункте 4 «Содержание
курса». Кроме изучения теоретического материала, самостоятельная работа
предусматривает
сбор
и
анализ
библиографического
материала.
Для
качественного усвоения и закрепления данного курса студентам предлагаются
следующие вопросы в качестве самоконтроля:
1. Организация Интернет. Магистральная сеть провайдера.
2. Основные элементы сети: маршрутизаторы, точки присутствия (POP),
места доступа (NAP).
3. Что такое intranet.
4. Протоколы Интернет.
5. Web-технология клиент-сервер.
6. Основные элементы Web-страницы и файловая организация Webсайта.
7. Создание списков на языке HTML: маркированные списки,
нумерованные списки, списки определений.
8. Размещение изображений в документе на языке HTML. Форматы
изображений.
9. Создание гипертекстовых ссылок на языке HTML.
10.Создание таблиц. Базовая структура html-таблицы и ее отображение в
браузере. Задание размеров таблицы. Выравнивание содержимого ячеек,
строк, таблицы. Задание фона таблиц, рядов и ячеек. Перекрывание строк и
132
колонок.
11. Создание фреймов на языке HTML. Разделение рабочего пространства
окна браузера. Задание параметров области. Указание имени области.
12. Бесплатное и коммерческое размещение публикаций в сети и
регистрация в поисковых системах.
13. Использование протокола передачи.
14. Регистрация Web-страницы в поисковых машинах Интернет.
15. Регистрация доменного имени второго уровня.
16. Работа со структурой презентации в MS Power Point.
17. Ввод и изменение текста слайда в MS Power Point.
18. Применение и модификация шаблонов оформления.
19. Рисование и изменение фигур в MS Power Point.
20. Вставка информации в Power Point.
21. Настройка и демонстрация презентации.
22. Создание мультимедийных презентаций.
23. Создание веб-презентаций.
24. Рецензирование презентаций.
133
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное образовательное учреждение
высшего профессионального образования
«Дальневосточный федеральный университет»
(ДВФУ)
Филиал ДВФУ в г.Дальнереченске
КОНТРОЛЬНО-ИЗМЕРИТЕЛЬНЫЕ МАТЕРИАЛЫ
«Компьютерный
дизайн»
080801 «Прикладная информатика (в экономике)»
г. Дальнереченск
2012
134
1.
Базовый протокол Интернета
d) TCP/IP;
e) HTTP;
f) FTP.
2. URL-это
d) прикладной протокол;
e) название языка, на котором создаются Web-страницы;
f) адрес ресурса в сети Интернет.
3. Какая программа из пакета MS Office предназначена для общения по
электронной почте
d) обозреватель;
e) Outlook Express;
f) NetMeeting.
4. Отметьте правильные адреса электронной почты
e) moymail@rambler.ru;
f) comp.os@manager;
g) znanie.info.news;
h) 2002km@mail.net.ru.
5. Обозреватель Internet Explorer может работать по протоколу
e) POP3;
f) SMTP;
g) HTTP;
h) IMAP.
6. Гиперссылки – это
c) активные элементы Web-страниц;
d) пассивные элементы Web-страниц;
c) элементы не Web-страниц.
7. Отметьте правильные IP-адреса
e) 125.34.2;
135
f) 125.34.12.1;
g) 168.257.89.11;
h) 157.255.45.7.
8. Для сохранения графического элемента с Web-страницы в файл следует
воспользоваться командой
d) Файл/Сохранить как...;
e) Сохранить на панели инструментов;
f) Сохранить рисунок как... из контекстного меню.
9. Web-страница – это файл с расширением
e) htm;
f) doc;
g) ftp;
h) exe.
10. После отправки сообщения его копия помещается в папку
d) входящие;
e) исходящие;
f) отправленные.
11. С помощью ссылки на Web-странице можно обратиться к
c) любому ресурсу Интернет;
d) только к другим Web-страницам.
12. Страница, загружаемая при запуске браузера является
d) домашней страницей сайта;
e) домашней страницей браузера;
f) последней
страницей,
с
которой
осуществлялась
работа
предыдущем сеансе.
13. Организация, предоставляющая доступ к Интернету, называется
a) обозревателем;
d) провайдером;
e) сервис-центром.
136
в
14. Приходящая корреспонденция помещается в папку
d) входящие;
e) исходящие;
f) отправленные.
15. При сохранении Web-страницы на диск с помощью команды
Файл/Сохранить как... в Internet Explorer (5.00 и выше)
d) сохранится только текст;
e) сохранится текст и рисунки;
f) сохранятся все элементы.
16. Отметьте правильные адреса Web-страниц
f) http://www.home.dom.ru/index.htm;
g) http:\\www.narod.ru\default.htm;
h) www://yandex.ru/main.htm;
i) http://groups.com;
j) http://ftp://www.mail.ru/index.htm.
17. FTP – это протокол
d) передачи почты на сервер;
e) передачи файлов;
f) передачи гипертекстовых документов.
18. Браузер – программа-клиент для работы с
e) World Wide Web;
f) Internet Explorer;
g) Outlook Express;
h) электронной почтой.
19. Протокол – это
d) программа для общения с помощью электронной почты;
e) список доступных серверов;
f) правила передачи данных в сети.
20. HTML – это
137
c) протокол передачи гипертекстовых документов;
d) язык гипертекстовой разметки документов.
21. Сервер – это
d) компьютер клиента сети Интернет;
e) компьютер, управляющий сетевыми ресурсами;
f) почтовый робот.
22. Протокол, предназначенный для получения писем из почтового ящика
f) FTP;
g) SMTP;
h) HTTP;
i) POP3:
j) NNTP.
23. Совокупность тематически объединенных гипертекстовых страниц –
это
d) сайт;
e) Web-пространство;
f) архив.
24 . Сайт состоит из:
e) программ;
f) архивов;
g) писем;
h) Web-страниц.
25. SMTP – это
a) протокол передачи гипертекстовых документов;
e) протокол передачи файлов;
f) протокол отправки почтовых сообщений на сервер;
g) протокол получения писем из почтового ящика.
26. Для работы компьютера в локальной сети необходим
a) модем;
138
e) концентратор;
f) шлюз;
g) сетевой адаптер. 27. Хост- это
d) компьютер с динамическим IP-адресом;
e) компьютер с постоянным IP-адресом;
f) компьютер, не имеющий IP-адреса.
Ключ к тесту
1. a
2. c
3. b
4. a,b,d
5. a
6. a
7. b,c,d
8. c
9. a
10. c
11. b
12. b
13. b
14. a
15. c
16. a,d,e
17. b
18. b
19. c
20. b
21. b
22. b
139
23. a
24. d
25. c
26. d
27. a
Зачетные вопросы
1. Интернет как иерархия сетей. Виды подключений ПК к Интернету.
2. Магистральная сеть провайдера.
3. Физический IP-адрес. Динамическое распределение IP-адресов.
Формат адреса.
4. Доменные имена. Структура доменного имени. Перевод доменного
имени в IP-адрес.
5. Как работает DNS-сервер. Иерархия DNS-серверов.
6. Основные понятия: Web-страница, Web-сайт, Web-сервер.
7. Современные популярные Web-серверы. Адресация страниц.
8. Основные возможности браузера.
9. Web-технология клиент-сервер.
10. Основные элементы Web-страницы и файловая организация Webсайта.
11. Программы, необходимые для создания Web-сайта.
Инструментальные средства создания web-страниц: FrontPage,
Dreamweaver.
12. Синтаксис HTML. Контейнерные теги. Вложенные теги. Атрибуты и
значения тегов.
13. Структура html-документа. Заголовок документа:
<title>,<meta>,<link>,<style>, <script>.
14. Тело html-документа. Заголовки. Абзацы. Выравнивание заголовков и
абзацев. Конец строки.
140
15. Создание списков. Маркированные списки. Нумерованные списки.
Списки определений.
16. Размещение изображений в документе. Форматы изображений.
17. Создание гипертекстовых ссылок.
18. Создание таблиц. Базовая структура html-таблицы и ее отображение в
браузере. Задание размеров таблицы.
19. Создание таблиц. Выравнивание содержимого ячеек, строк, таблицы.
Задание фона таблиц, рядов и ячеек. Перекрывание строк и колонок.
20. Фреймы. Разделение рабочего пространства окна браузера. Задание
параметров области. Указание имени области.
21. Бесплатное и коммерческое размещение публикаций в сети и
регистрация в поисковых системах.
22. Использование протокола передачи.
23. Регистрация Web-страницы в поисковых машинах Интернет.
24. Регистрация доменного имени второго уровня.
25. Создание презентаций MS Power Point.
26. Работа с презентацией MS Power Point.
27. Работа со структурой презентации.
28. Ввод и изменение текста слайда.
29. Применение и модификация шаблонов оформления MS Power Point.
30. Рисование и изменение фигур MS Power Point.
31. Вставка информации в Power Point.
32. Настройка и демонстрация презентации MS Power Point.
33. Создание мультимедийных презентаций MS Power Point.
141
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное образовательное учреждение
высшего профессионального образования
«Дальневосточный федеральный университет»
(ДВФУ)
Филиал ДВФУ в г.Дальнереченске
СПИСОК ЛИТЕРАТУРЫ
По дисциплине «Компьютерный дизайн»
080801 «Прикладная информатика (в экономике)»
г. Дальнереченск
2012
142
Основная литература:
1. Кочегаров, Б.Е. Промышленный дизайн : учебное пособие / Кочегаров Б.Е. ;
под ред. В. В. Сизовой. - 2-е изд. доп. - Владивосток : Изд-во ДВГТУ, 2008. 320 с.
Дополнительная:
2. Александровский, А.Д. Delphi 5.0. Разработка корпоративных приложений /
А.Д. Александровский. - М. : ДМК, 2000. - 512 с.
3. Заенчик,
В.М.
Основы
творческо-конструкторской
деятельности:
предметная среда и дизайн : учебник / В.М. Заенчик, А.А Карачев, В.Е.
Шмелев. - М. : Академия, 2006. - 320 с.
4. Ковешникова, Н.А. Дизайн: история и теория : учебное пособие / Н.А.
Ковешникова. - з-е изд.стер. - М. : Омега-Л, 2007. - 224 с.
5. Леонтьев, Б. Web-дизайн: Хитрости и тонкости / Б. Леонтьев. - М. :
«Познавательная книга плюс», 2001. - 224 с.
6. Лоцманенко, В.В. Проектирование и конструирование (основы) : учебное
пособие / В.В. Лоцманенко, Б.Е. Кочегаров. - Владивосток : ДВГТУ, 2004.
7. Молочков,
В.П.
Информационные
технологии
в
профессиональной
деятельности. Microsoft Office PowerPoint 2007 : учебное пособие / В.П.
Молочков. - 2-е изд. стер. - М. : Академия, 2010. - 176 с.
8. Нильсен,
Я.Дизайн
Web-страниц.
Анализ
удобства
и
простаты
использования 50 узлов : пер. с англ.: учебное пособие / Я. Нильсен, М. Тахир.
- М. : ИД «Вильямс», 2002. - 336 с.
9. Рейнбоу, В. Компьютерная графика : энциклопедия / В. Рейнбоу. - СПб. :
Питер, 2003. - 768 с.
10.Розенсон, И.А. Основы теории дизайна : учебник / И.А. Розенсон. - СПб. :
Питер, 2006. - 219 с. : ил.
11.Сухомлинов, А.И. Разработка информационных систем : учебное пособие /
А.И. Сухомлинов ; ДВГТУ. - Владивосток : Изд-во ДВГТУ, 2008. - 111 с.
143
12.Холмогоров, В. Основы Web-мастерства : учебное пособие / В.
Холмогоров. - СПб. : Питер, 2001. - 352 с.
13.Шафран, Э. Создание Web-страниц: самоучитель / Э. Шафран. - СПб. :
Питер, 2000. - 320 с.
Электронные ресурсы:
14. http://window.edu.ru/resource/402/47402
Зайцева, Е.А. Компьютерная
графика : учебно-методич. пособие / Е.А. Зайцева, Т.Г. Пунина. - Тамбов :
ТГТУ, Педагогический Интернет-клуб, 2006. - 116 с.
15. http://window.edu.ru/resource/634/36634 Кочегаров, Б.Е. Промышленный
дизайн : учебное пособие Б.Е. Кочегаров. - Владивосток : Изд-во ДВГТУ,
2006. - 297 с.
16. http://znanium.com/bookread.php?book=127915 Летин, А. С. Компьютерная
графика : учебное пособие / А.С. Летин, О.С. Летина, И.Э. Пашковский. - М.:
Форум, 2007. - 256 с.
17. http://window.edu.ru/resource/635/36635 Лоцманенко, В.В. Проектирование
и конструирование (основы) : учебное пособие В.В. Лоцманенко, Б.Е.
Кочегаров. - Владивосток : Изд-во ДВГТУ, 2004. - 96 с.
18. http://window.edu.ru/resource/997/40997 Писаренко, Т.А. Основы дизайна :
учебное пособие / Т.А. Писаренко, Н.Н.Ставнистый. - Владивосток : ТИДОТ
ДВГУ, 2005. - 112 с.
144
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное образовательное учреждение
высшего профессионального образования
«Дальневосточный федеральный университет»
(ДВФУ)
Филиал ДВФУ в г.Дальнереченске
ГЛОССАРИЙ
По дисциплине «Компьютерный дизайн»
080801 «Прикладная информатика (в экономике)»
г. Дальнереченск
2012
145
Словарь терминов
Основные теги
<html></html> Указывает программе просмотра
страниц что это HTML документ.
<head></head> Определяет место, где помещается
различная информация не отображаемая в
теле документа. Здесь располагается тег
названия документа и теги для поисковых
машин.
<body></body> Определяет видимую часть документа
Теги оглавления
<title></title> Помещает название документа в оглавление
программы просмотра страниц
Атрибуты тела документа
<body bgcolor=?> Устанавливает цвет фона документа,
используя значение цвета в виде RRGGBB пример: FF0000 - красный цвет.
<body text=?> Устанавливает цвет текста документа, используя значение
цвета в виде RRGGBB - пример: 000000 - черный цвет.
<body link=?> Устанавливает цвет гиперссылок,
используя значение цвета в виде RRGGBB пример: 00FF00 - зеленый цвет.
<body vlink=?> Устанавливает цвет гиперссылок на
котох вы уже побывали, используя значение
цвета в виде RRGGBB - пример: 333333 серый цвет.
<body alink=?> Устанавливает цвет гиперссылок при
нажатии.
Теги для форматирования текста
<pre></pre> Обрамляет предварительно отформатированный текст.
<h1></h1> Создает САМЫЙ БОЛЬШОЙ заголовок
146
<h6></h6> Создает самый маленький заголовок
<b></b> Создает жирый текст
<i></i> Создает наклонный текст
<tt></tt> Создает текст - имитирующий стиль печатной
машинки.
<cite></cite> Используется для цитат, обычно наклонный текст.
<em></em> Используется для выделения из текста слова
(наклонный или жирный текст)
<strong></strong> Используется для выделения наиболее выжных
частей текста (наклонный или жирный текст)
<font size=?></font> Устанавливает размер текста в пределах от 1 до 7.
<font color=?></font> Устанавливает цвет текста, используя значение
цвета в виде RRGGBB.
Гиперссылки
<a href="URL"></a> Создает гиперссылку на другие документы или
часть текущего документа.
<a Создает гиперссылку вызова почто-href="mailto:EMAIL"> вой
программы для написания письма ав-</a> тору документа.
<a name="NAME"></a> Отмечает часть текста как цель для
гипперссылок в документе.
<a href="#NAME"></a> Создает гиперссылку на часть текущего
документа.
Форматирование
<p> Создает новый параграф
<p align=?> Выравнивает параграф относительно одной из
сторон документа, значения: left, right, или
center
<br> Вставляет перевод строки.
<blockquote> Создает отступы с обеих сторон тек</blockquote> ста.
147
<dl></dl> Создает список определений.
<dt> Определяет каждый из терминов списка
<dd> Описывает каждое определение
<ol></ol> Создает нумерованный список
<li> Определяет каждый элемент списка и
присваивает номер
<ul></ul> Создает ненумерованный список
<li> Предваряет каждый элемент списка и
добавляет кружок или квадратик.
<div align=?> Важный тег используемый для форматирования
больших блоков текста HTML документа,
также используется в таблицах стилей
Графические элементы
<img src="name"> Добавляет изображение в HTML до<img
src="name" Выравнивает изображение к одной align=?> из сторон
документа, принимает значения: left, right, center; bottom, top, middle
<img src="name"
Устанавливает толщину рамки во-border=?>
круг изображения
<hr> Добавляет в HTML документ горизонтальную линию.
<hr size=?> Устанавливает высоту(толщину) линии
<hr width=?> Устанавливает ширину линии, можно указать
ширину в пикселах или процентах.
<hr noshade> Создает линию без тени.
<hr color=?> Задает линии определенный цвет.
Значение RRGGBB.
Таблицы
<table></table> Создает таблицу.
<tr></tr> Определяет строку в таблице.
<td></td> Определяет отдельную ячейку в таблице.
<th></th> Определяет заголовок таблицы (нормальная
148
ячейка с отцентрованным жирным текстом)
149
Атрибуты таблицы
<table border=#> Задает толщину рамки таблицы.
<table cellspacing=#> Задает расстояние между ячейками
таблицы.
<table cellpadding=#> Задает расстояние между содержимым ячейки и ее
рамкой.
<table width=#> Устанавливает ширину таблицы в
пикселах или процентах от ширины документа.
<tr align=?> или <td Устанавливает выравнивание ячеек в align=?>
таблице, принимает значения: left, center, или right.
<tr valign=?> или <td Устанавливает вертикальное вырав-valign=?>
нивание для ячеек таблицы, принимает значения : top,
middle, или bottom.
<td colspan=#> Указывает кол-во столбцев которое
объединено в одной ячейке. (по умолчанию=1)
<td rowspan=#> Указывает кол-во строк которое объединено в
одной ячейке. (по умолча-нию=1)
<td nowrap> Не позволяет программе просмотра делать
перевод строки в ячейке таблицы.
Кадры
<frameset></frameset> Предваряет тег <body> в документе,
содержащем кадры;
<frameset Определяет строки в таблице кадров, rows="value,value">
высота которых определена кол-вом пикселов или в процентном
соотношении к высоте таблицы кадров.
<frameset Определяет столбцы в таблице кадcols="value,value"> ров, ширина которых определена кол-вом
пикселов или в процентном соотношении к
150
ширине таблицы кадров.
<frame> Определяет единичный кадр или область в
таблице кадров.
<noframes></noframes> Определяет, что будет показано в
окне браузера если он не поддерживает
кадры.
Атрибуты кадров
<frame src="URL"> Определяет какой из HTML документов будет
показан в кадре.
<frame name="name"> Указывает Имя кадра или области,
что позволяет перенаправлять информацию в
этот кадр или область из других кадров.
<frame marginwidth=#> Определяет величину отступов по
левому и правому краям кадра; должно быть
равно или больше 1.
<frame marginheight=#> Определяет величину отступов по
верхнему и нижнему краям кадра; должно быть равно или больше 1.
<frame
Указывает будет-ли выводится ли-scrolling=VALUE>
нейка прокрутки в кадре; значение value
может быть "yes," "no," или "auto". Значение по умолчанию для обычных доку-
ментов - auto.
<frame noresize> Препятствует изменению размеров
кадра.
Формы
Для форм, выполняющих какие-то функции должны быть запущены
соответствующие CGI скрипты на сервере. HTML только
интерфейс
создает
внешний
формы.
<form></form> Создает формы
<select multiple Создает скролируемое меню. Size
name="NAME" устанавливает кол-во пунктов меню, ко151
size=?></select> торое будет показано на экране, остальные будут
доступны при использовании прокрутки.
<option> Указывает каждый отдельный элемент
меню
<select Создает ниспадающее меню
name="NAME"></select>
<option> Указывает каждый отдельный элемент
меню
<textarea name="NAME" Создает окно для ввода текста.
cols=40 rows=8></textarea> Columns указывает ширину окна; rows
указывает его высоту.
<input type="checkbox" Создает checkbox. За тегом следует
name="NAME"> текст.
<input type="radio"
Создает radio кнопку. За тегом сле-
name="NAME" value="x"> дует текст.
<input type=text Создает строку для ввода текста. Па-name="foo"
size=20> раметром Size указывается длина в символах.
<input type="submit"
Создает кнопку "Принять"
value="NAME">
<input type="image"
Создает кнопку "Принять" - для этоborder=0 name="NAME"
го используется изображение
src="name.gif">
<input type="reset"> Создает кнопку "Отмена"
152