Практикум по программе ''Интернет-технологии для работников образования'': Учебно-методическое пособие

Санкт-Петербургский государственный университет информационных технологий, механики и оптики Кафедра компьютерных образовательных технологий

А.В. Белозубов, Д.Г. Николаев, Д.Г. Штенников

Практикум по программе «Интернет-технологии для работников образования» Учебно-методическое пособие

Санкт-Петербург 2007

УДК 681.3 Белозубов А.В., Николаев Д.Г., Штенников Д.Г. Практикум по программе «Интернет-технологии для работников образования». Учебно-методическое пособие. – СПб., 2007. - 84 с. Рецензенты:

Л.С. Лисицына, к.т.н., доцент, зав. каф. КОТ СПбГУ ИТМО А.А. Бобцов, к.т.н., профессор каф. СУиИ СПбГУ ИТМО

Практикум предназначен для поддержки курсов повышения квалификации работников образования по программе «Интернет-технологии для работников образования» по заказу Комитета по образованию Санкт-Петербурга.

Печатается по решению УМС факультета ИТиП СПбГУ ИТМО

© Санкт-Петербургский государственный университет информационных технологий механики и оптики, 2007

2

ОГЛАВЛЕНИЕ ВВЕДЕНИЕ .................................................................................................4 Рабочее окно программы Outlook Express.......................................................................5 Почтовые папки Outlook Express ......................................................................................7 Работа с учетными записями ...........................................................................................8 Настройка программы Outlook Express для совместного использования .............9 Создание, отправка и удаление электронного письма .............................................10 Чтение пришедшей почты ..............................................................................................12 Подготовка ответов на пришедшие письма ..............................................................13 Передача файлов с помощью электронной почты....................................................14 Практическая работа для освоения урока ...................................................................17

ПРОГРАММА MACROMEDIA DREAMWEAVER CS3 ............................. 19 Основные положения .........................................................................................................19 Основные элементы интерфейса..................................................................................19 Задание основных настроек программы ......................................................................20 Задание основных свойств страницы..........................................................................21 Определение свойств сайта ...........................................................................................22 Форматирование текста .................................................................................................23 Создание гиперссылок.......................................................................................................24 Использование таблиц......................................................................................................25 Вставка изображения и редактирование его свойств .............................................26 Регистрация на бесплатном сервере............................................................................27 Практическая работа для освоения урока ...................................................................30

СОЗДАНИЕ ТЕСТОВЫХ ЗАДАНИЙ С ИСПОЛЬЗОВАНИЕМ ДОПОЛНЕНИЯ COURSEBUILDER ......................................................... 34 Вставка элементов CourseBuilder..................................................................................34 Создание тестового задания в закрытой форме ......................................................35 Практическая работа для освоения урока ...................................................................38

ОСНОВЫ РАБОТЫ В ADOBE PHOTOSHOP CS3 ................................. 40 Основные положения .........................................................................................................40 Создание заголовка ............................................................................................................40 Создание кнопки ..................................................................................................................45 Создание анимации.............................................................................................................49

ОСНОВЫ РАБОТЫ В ADOBE FLASH CS3............................................. 52 Краткий обзор интерфейса .............................................................................................52 Создание флага ...................................................................................................................55 Анимация заголовка ...........................................................................................................56 Маска на заголовке .............................................................................................................58

ЛИТЕРАТУРА ........................................................................................... 61

3

ВВЕДЕНИЕ Цель данного практикума – научить основам работы в сети интернет и созданию простейших web-сайтов, а именно: • самостоятельно регистрировать адрес электронной почты на бесплатном сервере; • пользоваться почтовым клиентом Microsoft Outlook Express 6.0; • создавать простейшие web-страницы с использованием визуального конструктора Adobe Dreamweaver CS3; • самостоятельно регистрировать адрес сайта на бесплатном сервере; • создавать web-страницы, включающие в себя таблицы и иллюстрации; • с использованием визуального конструктора Adobe Dreamweaver CS3 подключаться к FTP-серверу и размещать на нем созданные webстраницы; • создавать тестовые задания закрытой формы; • основам работы с графическим пакетом Adobe Photoshop CS3; • создавать простейшую анимацию в программе Adobe Photoshop CS3; • создавать простейшую анимацию в программе Adobe Flash CS3. Для освоения материала, изложенного в предлагаемом пособии, требуются начальные знания персонального компьютера, операционной системы Windows и ее приложений. Если у вас по ряду причин возникнут трудности с освоением материала, мы советуем вам посмотреть некоторые из книг, входящих в список литературы. Пособие организовано по классическому принципу самоучителя. В него включено семь разделов, содержащих краткую справочную информацию, и практические задания. В подаче материала мы следовали принципам “от простого – к сложному”, в силу которого справка, затрагивающая вопросы выполнения того или иного пункта задания, становилась менее обширной. В пособие вошли краткие описания следующих программ: • Microsoft Outlook Express 6.0; • Adobe Dreamweaver CS3; • CourseBuilder for Dreamweaver 4.4.10; • Adobe Photoshop CS3; • Adobe Flash CS3.

4

ИСПОЛЬЗОВАНИЕ ПРОГРАММЫ OUTLOOK EXPRESS 6.0 ДЛЯ РАБОТЫ С ЭЛЕКТРОННОЙ ПОЧТОЙ Значительный объем информации, передаваемой по сети Интернет, занимает электронная почта, поэтому выбор программы для работы с ней является важной задачей. В этом разделе мы познакомимся с программой Outlook Express 6.0, которая входит в комплект Internet Explorer 6.0 – одного из популярных пакетов программ для работы в Интернет. Для того чтобы начать знакомство с Outlook Express, необходимо, чтобы на компьютере был установлен пакет Internet Explorer 6.0 и настроена связь с Интернет. Рабочее окно программы Outlook Express Запустите Outlook Express. Для этого нажмите кнопку Пуск (Start) на Панели задач (Taskbar) операционной системы Windows. Откроется основное меню. Выберите команду Программы (Programs), а затем – Outlook Express из основного меню. Программа будет запущена. Если программа Outlook Express после установки на данный компьютер запускается в первый раз, то вначале будет запущен Мастер подключения к Интернет (Internet connection Wizard), который предложит вам настроить вашу электронную почту. Вы можете отказаться и настроить почту позже. Если же вы согласитесь, то следуйте указаниям мастера. После того, как программа будет запущена, на экране появится окно Outlook Express (рис. 1.1).

Рис. 1.1. Основное окно программы Outlook Express Рассмотрим названия и назначение всех элементов рабочего окна программы, однако, прежде необходимо выбрать режим работы с электронной почтой. 5

Щелкните мышью на ссылке Входящие (Inbox), чтобы перевести программу в рабочий режим (рис. 1.2). Заголовок окна и меню – стандартные атрибуты окна в операционной системе Windows. В правой части заголовка окна расположены кнопки, предназначенные для стандартных действий с окнами в операционной системе Windows, т.е. сворачивания, восстановления или разворачивания, а также закрытия окна. С помощью меню вы можете выбрать любую команду программы Outlook Express. Ниже меню находится панель инструментов. На этой панели расположены значки, обозначающие часто выполняемые действия. Если щелкнуть мышью по этому значку, нужная команда будет выполнена.

Рис. 1.2. Рабочее окно Outlook Express в режиме просмотра электронной почты Под панелью инструментов расположен открывающийся список Папки (Folders), предназначенный для сортировки принимаемой и отправляемой почты. То есть вы можете раскладывать письма по папкам, удалять и создавать эти папки. Центральная часть окна программы поделена на две части. Верхняя – предназначена для отображения содержимого открытой в настоящий момент времени папки (заголовки писем). Нижняя часть окна (область просмотра) предназначена для отображения текстов писем. Строка состояния предназначена для индикации тех действий, которые в данный момент выполняет программа Outlook Express. Например, в строке состояния могут появляться следующие сообщения: Подключение, Проверка почтового ящика, Нет новых сообщений. Естественно, для английской версии программы эти сообщения будут на английском языке. 6

Почтовые папки Outlook Express Хотя названия почтовых папок Outlook Express во многом говорят сами за себя, но если вы не имеете опыта работы с почтовыми программами, все же стоит познакомиться с их назначением. Входящие (Inbox).

Сюда по умолчанию поступает вся новая почта, и здесь хранятся все пришедшие сообщения. Впоследствии вы можете создать дополнительные папки (например, посвященные разным проектам или письмам от постоянных адресатов) и настроить Outlook Express таким образом, чтобы при поступлении новых писем вся почта автоматически разбиралась и складывалась в отдельные папки. Исходящие (Outbox).

Это папка предназначена для временного хранения отправляемых писем. Зачем это нужно? Представьте, что вы подготавливаете несколько писем друг за другом. Чтобы не соединяться каждый раз с Интернет для отправки очередного письма, письма временно накапливаются в этой папке. Затем, при нажатии на кнопку Доставить почту (Send and Reseive), они разом уходят на почтовый сервер провайдера и далее – к своим адресатам. Именно такой режим отправки писем устанавливается в Outlook Express по умолчанию. Отправленные (Sent Items).

Здесь по умолчанию хранятся копии отправленных сообщений, и вы всегда сможете вспомнить – что, кому и когда вы отсылали. Удаленные (Deleted Items).

Если вы решите удалить ненужные сообщения, то они временно помещаются на хранение в эту папку (на случай, если вы передумаете их удалять). Если вы решите окончательно удалить все сообщения из папки Удаленные, щелкните правой кнопкой мыши по значку папки и из выпавшего меню выберите пункт Очистить папку (Empty folder). Черновики (Drafts).

Если вы готовите новое письмо, но в процессе работы над ним решите дописать письмо позже, то выберите в меню Файл (File) пункт Сохранить (Save). Такое «недописанное» письмо временно сохраняется в папке Черновики (Drafts). Чтобы продолжить впоследствии работу над письмом из этой папки, просто откройте эту папку и дважды щелкните по черновику письма. Затем, если письмо готово, его можно отправить, и оно будет помещено в папку Исходящие (Outbox). Если же письмо по-прежнему не готово к отправке, то его опять можно сохранить в папке черновиков. Если вы получаете много почты с вложенными файлами (документами, графическими файлами и пр.), то неплохо периодически, например, раз в месяц, проводить чистку своих папок от старых сообщений. Это способствует 7

значительной экономии места на жестком диске машины. И не забывайте чистить не только папку с входящими письмами, но и папку Исходящие (Outbox), где хранятся копии ваших собственных писем. Ну и конечно, не забывайте опорожнять папку Удаленные (Deleted Items) от уже ненужных писем, которые явно никогда не понадобятся. При работе с большими объемами разнообразной корреспонденции удобно, кроме выше приведенных, обязательных папок, дополнительно создать свои папки для входящих писем. Это можно сделать используя главное меню Файл/Папка/Создать (File/Folder/New) или команду контекстного меню (которое вызывается щелчком правой кнопкой мыши) Создать папку (New Folder). Работа с учетными записями Для того чтобы отправлять или принимать электронные письма с помощью программы Outlook Express, вам необходимо создать вашу учетную запись, в которую необходимо внести следующие сведения: имя и пароль для входа в систему, а также названия серверов входящих и исходящих сообщений. Эти сведения предоставляются вашим поставщиком услуг Интернет или администратором локальной компьютерной сети. Бесплатно получить почтовую учетную запись можно, например, в почтовой службе Hotmail (www.hotmail.com), которая использует серверы HTTP. Для добавления учетной записи вам нужно выполнить следующую последовательность действий: • выберите Учетные записи (Accounts) в меню Сервис (Tools); • в диалоговом окне Учетные записи в Интернет (Internet Accounts) нажмите кнопку Добавить (Add); • выберите Почта (Mail), чтобы начать работу мастера подключения к Интернет, а затем следуйте инструкциям мастера, чтобы настроить соединение с сервером почты. Каждый пользователь может задать несколько учетных записей почты. Для этого ему нужно повторить вышеуказанные действия для каждой учетной записи. Для изменения настроек существующей учетной записи почты: • выберите Учетная запись (Accounts) в меню Сервис (Tools); • для нужной учетной записи во вкладке Почта (Mail) выберите Свойства (Properties); • внесите необходимые изменения. Для удаления существующей учетной записи почты: • выберите Учетная запись (Accounts) в меню Сервис (Tools); • для нужной учетной записи во вкладке Почта (Mail) выберите Удалить (Remove).

8

Настройка программы Outlook Express для совместного использования Если вы используете свой компьютер совместно с кем-нибудь (дома или на работе), каждому пользователю можно выделить отдельный почтовый ящик в программе Outlook Express. У пользователей будут отдельные настройки работы с почтой, отдельные сообщения и отдельные контакты. Чтобы это осуществить, необходимо создать «удостоверение» для каждого из пользователей. Для добавления удостоверения выполните следующие действия: • в меню Файл (File) укажите на Удостоверения (Identities) и выберите Добавить удостоверение (Add New Identity); • введите имя нового пользователя; • для защиты настроек создаваемого удостоверения следует установить флажок Использование пароля (Require a password) и ввести пароль. Программа Outlook Express предложит вам войти в систему в качестве нового пользователя. При отрицательном ответе вы продолжите работу как текущий пользователь. При положительном ответе нужно будет ввести сведения о подключении к Интернет. В поле ввода Введите имя (Display Name) введите имя для обращения к вам при переписке с помощью электронной почты. Это может быть ваше настоящее имя или псевдоним. Нажмите кнопку Далее (Next), чтобы продолжить работу. Появится следующий диалог Мастера подключение к Интернет (Internet Connection Wizard) (рис. 1.3). Если вы еще не имеете своего адреса электронной почты, то выберите нижний пункт диалогового окна и следуйте появляющимся на экране указаниям. В результате вы получите бесплатную почтовую учетную запись в почтовой службе Hotmail, которая использует серверы HTTP. Если вы уже имеете адрес электронной почты, то нужно создать соответствующую учетную запись (account), которая включает ваше имя и пароль для входа в систему, а также названия серверов входящих и исходящих сообщений. Все эти сведения вам должен предоставить ваш поставщик услуг Интернет или администратор локальной компьютерной сети, в которой вы работаете. Для того чтобы создать учетную запись выберите верхний пункт диалогового окна.

9

Рис. 1.3. Окно задания адреса электронной почты (Internet E-mail Address) После того, как удостоверения заданы, можно переходить от одного к другому, не выключая компьютер и не разрывая связь с Интернет. Для перехода от одного удостоверения к другому, в меню Файл (File) выберите Смена удостоверения (Switch Identity). Для изменения параметров существующего удостоверения в меню Файл (File) укажите на Удостоверения (Identities) и выберите Управление удостоверениями (Manage Identities). Когда появится диалоговое окно, вы можете выполнить следующие действия: • для изменения названия или пароля удостоверения выберите удостоверение и нажмите Свойства (Properties); • для смены удостоверения, загружаемого при запуске, выберите удостоверение из раскрывающегося списка (если соответствующий флажок снят, при каждом запуске приложения, использующего удостоверения, будет выводиться запрос о выборе удостоверения); • для смены удостоверения, используемого по умолчанию, выберите нужное удостоверение из нижнего раскрывающегося списка; • для удаления удостоверения выберите пользователя и нажмите кнопку Удалить (Remove). Создание, отправка и удаление электронного письма Для того чтобы создать электронное письмо, нажмите кнопку Создать на панели инструментов Outlook Express. сообщение (New Message) Появится окно Создание сообщения (New Message) (рис. 1.4). Так же, как при отправке обыкновенного письма, мы заполняем конверт, так и для электронного письма необходимо указать некоторую информацию об адресате. 10

Рис. 1.4. Окно создания сообщения (New Message) Обратите внимание, что текстовый курсор уже находится в поле Кому (То). Введите в поле Кому (То) электронный адрес получателя, например, [email protected]. Для рассылки письма сразу нескольким адресатам служит поле ввода Копия (СС). Отметим также, что для переключения между полями ввода удобно пользоваться клавишей Tab на клавиатуре. Теперь щелкните мышью на поле Тема сообщения (Subject) и введите краткую аннотацию данного письма, например, Тест. На этом заполнение конверта отправляемого письма завершено. Для текста письма предназначена область ниже конверта. Щелкните мышью на этой области и наберите любой текст, например: Привет! Это мое первое письмо в Интернет. После того, как текст письма набран, вы можете проверить орфографию, используя для этого команду Орфография (Spelling) меню Сервис (Tools). Для смены языка, используемого при проверке орфографии, выполните команду Параметры (Options) в меню Сервис (Tools). На вкладке Орфография (Spelling) выберите Язык (Language), на котором написано письмо. После того, как письмо готово, нажмите кнопку Отправить (Send) (первую слева) на панели инструментов окна Создание сообщения (New Message). После этого окно Создание сообщения (New Message) закроется, а ваше письмо будет записано в папку Исходящие (Outbox). Чтобы отправить подготовленное сообщение, нажмите кнопку Доставить (Send and Receive) на панели инструментов Outlook Express. После этой операции ваше сообщение будет отправлено на сервер, а его копия – записана в папку Отправленные (Send Items). 11

Если вы хотите, чтобы ваши сообщения отправлялись сразу по нажатию кнопки Отправить (Send) на панели инструментов окна Создание сообщения (New Message), то выполните следующие действия: • в меню Сервис (Tools) выберите пункт Параметры (Options); • в появившемся окне перейдите на вкладку Отправка (Send) и установите флажок напротив записи Отправлять сообщения немедленно (Send message immediately). Чтобы удалить письмо, выберите в списке Папки (Folders) папку, содержащую данное сообщение, и щелкните мышью на письме. Затем нажмите кнопку Удалить (Delete) на панели инструментов Outlook Express. Письмо будет помещено в папку Удаленные (Deleted Items). Вы можете восстановить удаленные письма из папки Удаленные (Deleted Items). Для этого откройте папку Удаленные (Deleted Items) и переместите нужное сообщение в любую другую папку. Обращаем ваше внимание, что письма, стертые из папки Удаленные (Deleted Items), восстановить нельзя. Чтение пришедшей почты Все электронные письма, посланные вам, вначале собираются в вашем почтовом ящике на сервере. Для того чтобы их получить и прочитать, вам нужно связаться с почтовым сервером. Нажмите кнопку Доставить (Send and Receive) на панели инструментов Outlook Express. После этого будет произведена проверка вашего почтового ящика на почтовом сервере. Все новые сообщения будут записаны в папку Входящие (Inbox). Непрочитанные сообщения имеют значок в виде запечатанного конверта, а прочитанные – открытого конверта. Вы можете изменить ширину колонок в папках с письмами. В папке Входящие (Inbox) – это колонки От (From), Тема (Subject), Получено (Received). Для изменения размеров колонки подведите указатель мыши к ее границе. Указатель мыши изменит свою форму на значок . Нажмите левую кнопку мыши и, не отпуская кнопки, буксируйте границу вправо. Полученные сообщения можно читать либо в области просмотра, либо в отдельном окне. Щелкните значок папки Входящие (Inbox) на панели Outlook или в списке папок. Для просмотра сообщения в области просмотра щелкните по нему в списке сообщений. Для просмотра сообщения в отдельном окне дважды щелкните по нему в списке сообщений. Поскольку не существует единого стандарта на кодирование букв русского алфавита, программа Outlook Express пытается самостоятельно определить кодировку приходящих писем. Однако, есть вероятность, что программа Outlook Express определит кодировку неправильно. Если вы столкнулись с подобной ситуацией, выберите команду Кодировка (Encoding) в меню Вид (View). В открывшемся меню текущая кодировка отмечена кружком у ее названия. Попробуйте выбрать какой-либо другой вариант. После этого содержимое текущего письма отобразится в новой кодировке и его можно 12

будет прочитать при условии, что во время передачи сообщения не произошел сбой. Если вы хотите получить все сведения о сообщении (дата отправки и т.п.), выберите меню Файл (File), команду Свойства (Properties). Для сохранения сообщения на своем диске выберите Сохранить как (Save as) и укажите место и формат сохранения (почтовое сообщение, простой текст, гипертекст). Подготовка ответов на пришедшие письма Часто возникает необходимость ответить на пришедшие письма, причем с цитатами из исходного письма. Если вы приводите цитату, а ниже пишите ответ, то человек, получивший ваше письмо, легко вспомнит о чем идет речь. Рассмотрим, как эта задача решается в Outlook Express. Щелкните мышью на любом письме в папке Входящие (Inbox) и нажмите панели инструментов Outlook Express. Появится кнопку Ответить (Reply) окно, в котором находится содержимое отмеченного вами письма. Обратите внимание, что в поле ввода Кому (То) уже будет подставлен адрес автора этого письма, в поле Тема сообщения (Subject) – сокращение Re: и тема исходного письма, а содержанием письма будет являться само исходное письмо. Причем в начале каждой строки стоит символ “>”, которым принято обозначать цитаты. Слово Re: перед темой сообщения говорит о том, что оно является ответом на сообщение, написанное ранее. Для того чтобы оставить только нужные строки с цитатами, можно выделить фрагменты текста исходного письма и удалить с помощью клавиш Delete и Backspace. Текст выделяется с помощью клавиш управления курсором при нажатой клавиши Shift или с помощью мыши точно так же, как и в любом текстовом редакторе для Windows. Если сообщение готово, нажмите кнопку Отправить (Send and Receive). Затем проверьте папку Исходящие (Outbox). Если подготовленное вами сообщение находится в этой папке, то для того, чтобы отправить его на ваш почтовый сервер, нажмите кнопку Доставить (Send and Receive) на панели инструментов Outlook Express. Кроме значка Ответить (Reply)

, на панели инструментов Outlook

Express расположены также значки Ответить всем (Reply to All)

и

Переслать (Forward) . Рассмотрим их назначение. Ответить всем (Reply to All) – эта кнопка панели инструментов действует аналогично кнопке Ответить (Reply). Отличие состоит в том, что ваше ответное письмо рассылается не только первоначальному автору, но и всем иным адресатам, которым этим автором было послано аналогичное письмо (которые были включены в поле Копия (Copy) исходного сообщения). Таким образом, эта функция имеет смысл лишь тогда, когда вы организуете что-то вроде дискуссии. Однако, вы должны быть уверены, что все адресаты будут согласны на 13

получение вашего письма. Добавим, что традиция электронной переписки запрещает «веерную рассылку» посланий незнакомым людям, особенно содержащих рекламу (так называемый “Spam” – сленговое словечко для непрошеной почты, дословно переводимое как «фарш») и пр. Переслать (Forward) – эта кнопка позволяет перенаправить (переадресовать) полученное письмо другому пользователю, если вы считаете, что ему (ей) оно будет интересно. Передача файлов с помощью электронной почты Программа Outlook Express позволяет пересылать по электронной почте не только текст, но и различные файлы, например, изображения, звуки, электронные таблицы и т.д. Рассмотрим каким образом это можно сделать. Нажмите кнопку Создать сообщение (New Message) на панели инструментов Outlook Express. Появится окно Создание сообщения (New Message). Далее нажмите кнопку Присоединить (Attach) на панели инструментов. Появится диалог Вставка вложений (Insert Attach). С помощью диалога выберите на вашем диске нужный файл и нажмите кнопку Вложить (Attach), чтобы присоединить указанный файл к письму. Обратите внимание, что добавилось еще одно поле ввода, в котором указано имя и размер присоединенного файла. Для того чтобы присоединить несколько файлов, еще раз нажмите кнопку на панели инструментов окна Создание сообщения (New Message) и выберите еще один файл. После того, как письмо подготовлено, надо нажать кнопку Отправить (Send and Receive) на панели инструментов окна Создание сообщения (New Message), чтобы отправить подготовленное сообщение. Если вы получили письмо, слева от заголовка которого находится изображение скрепки, то это означает, что вместе с этим письмом вам прислали файл. Щелкнув мышью на заголовке письма, вы увидите, что письмо содержит поле ввода под названием Вложение (Attach). Щелкните мышью на значке, обозначающем вложенный файл. Установите переключатель в положение Сохранить на диске (Save on disk) и нажмите кнопку ОК, чтобы закрыть этот диалог. Появится диалог Сохранить вложение как (Save Attach As). Выберите папку на диске вашего компьютера, в которой вы хотите сохранить вложенный файл, и нажмите кнопку Сохранить (Save). Диалог Сохранить вложение как (Save Attach As) будет закрыт, и вложенный файл будет сохранен на диске. Регистрация сервере

адреса

электронной

почты

на

бесплатном

Существует множество серверов, предоставляющих возможность самостоятельно зарегистрировать адрес электронной почты. Наиболее распространенными являются службы: gmail.com, mail.ru, pochta.ru, 14

mail.yandex.ru, mail.rambler.ru. Услуги, предоставляемые такими службами, мало чем отличаются друг от друга. Основные различия заключаются лишь в: • размере почтового ящика; • максимальном размер присоединенного к письму файла; • наличие дополнительных возможностей при работе с электронной почтой (адресная книга, проверка орфографии, перевод текста, фильтры переадресации и др.) Принцип получения адреса электронной почты для всех бесплатных серверов одинаков, поэтому рассмотрим регистрацию адреса на примере службы pochta.ru. Для регистрации почтового адреса следует обратиться по адресу http://pochta.ru. Нажав на кнопку "Регистрация" на главной странице (рис. 1.5), откроется страница мастера регистрации (рис. 1.6).

Рис. 1.5. Начало регистрации на сайте почта.ru

Рис. 1.6. Страница мастера регистрации На странице мастера в поле Желаемый E-mail введите адрес электронной почты. Вы можете зарегистрироваться в одном из доменов, входящих в почтовую систему Почта.ru. При выборе адреса электронной почты необходимо учесть, что почтовое имя должно обязательно начинаться со строчной английской буквы и содержать только символы английского алфавита (a-z), цифры (0-9), и символы подчеркивания (_). В случае, если желаемый 15

адрес уже занят, можно попробовать зарегистрировать один из альтернативных адресов, которые будут перечислены в специальной форме. Далее необходимо дважды ввести пароль для создаваемого почтового ящика. Пароль должен включать не менее 6 символов и может содержать только цифры (0-9) и символы английского алфавита (A-Z, a-z). Не создавайте простой пароль, храните его в тайне, не теряйте. В случае если вы забыли пароль, или по каким-либо иным причинам пароль для вашего почтового ящика не принимается, возможны значительные затруднения при доказательстве ваших прав на адрес. Для защиты от автоматической регистрации потребуется ввести текст, который вы увидите на картинке. Если по каким-либо причинам данная картинка не загрузилась, попробуйте обновить страницу браузера. Если это не помогло, проверьте, вероятно, в настройках интернет-обозревателя отключена возможность отображения рисунков. После включения опции показа картинок можно вернуться к процедуре регистрации. Для продолжения регистрации, после заполнения всех полей необходимо нажать на кнопку "Зарегистрировать и заполнить анкету". Пункт "Контрольный вопрос - секретный ответ" (рис. 1.7) дает возможность установить контрольный вопрос и ответ на него, с помощью которого можно сменить пароль, в случае его потери.

Рис. 1.7. Дополнительная информация при регистрации В пункте Адрес для восстановления пароля (рис. 1.7) можно указать адрес электронной почты, на который система вышлет пароль от вашего почтового ящика, в случае если вы его забыли или потеряли (при условии правильного ответа на контрольный вопрос). В следующих полях вы можете указать дополнительную информацию о себе. Для завершения регистрации нажмите на кнопку "Зарегистрировать". После этого вы перейдете в свой новый почтовый ящик, где увидите список папок (рис. 1.8). 16

Рис. 1.8. Список папок В дальнейшем, когда потребуется вернуться к работе с почтой или изменить ее настройки, необходимо идентифицировать себя как пользователя системы. Для этого, на главной странице в соответствующих полях (рис. 1.9) следует указать свои логин и пароль, полученные при регистрации.

Рис. 2.9. Вход в почтовый ящик Практическая работа для освоения урока 1) Зарегистрируйте адрес электронной почты в бесплатной почтовой службе, например, Почта.ru (pochta.ru). 2) Запустите Outlook Express. 3) Создайте свое удостоверение и перейдите к нему. 4) Создайте свою учетную запись, используя параметры зарегистрированного ящика. 5) Узнайте адрес электронной почты соседа и выполните с ним почтовую переписку. Для этого: • создайте письмо; • отправьте почту; 17

Формат: Список

6)

7) 8) 9)

18

• получите почту; • напишите ответ на письмо; • перешлите полученное письмо; • удалите ненужную корреспонденцию. В текстовом редакторе Microsoft Word подготовьте файл документа, содержащий текст, небольшой рисунок и таблицу. Сохраните файл. Выполните вложение файла в письмо в программе Outlook Express и отправьте почту. Извлеките вложенный файл из почтового сообщения, сохранив его на диске. Завершите работу Outlook Express. Выполните почтовую переписку, используя средства бесплатной почтовой службы, например, Почта.ru (pochta.ru)

ПРОГРАММА MACROMEDIA DREAMWEAVER CS3 Основные положения Программа Dreamweaver относится к «визуальным» редакторам HTML, которые реализуют принцип WYSIWYG (what you see is what you get) — что вы видите, то вы и получите. Эта программа позволяет создавать Web-страницы, не требуя от вас знания языка разметки гипертекста. При этом программа предоставляет полный доступ к источнику кода, так что вы можете при создании своей страницы одновременно изучать HTML, заглядывая в источник. Основные элементы интерфейса Интерфейс программы представлен основным окном документа и вспомогательными панелями. В основном окне может отображаться: • Code – исходный код; • Split – исходный код / поле документа (окно делится на две части); • Design – поле документа. Управление способом отображения информации осуществляется с использованием команды основного меню View или кнопками на панели инструментов основного окна . В заголовке основного окна содержится название страницы, в скобках имя файла и символ *, если файл содержит несохраненные изменения. Дополнительные панели упрощают выполнение ряда процедур (действий). Можно закрыть все панели и пользоваться только главным меню, в котором имеются все необходимые пункты. Можно открыть только необходимые на данном этапе панели. Управление дополнительными панелями осуществляется командами меню Window. В левой части строки состояния отображаются основные тэги той строки, в которой в данный момент находится курсор. Рассмотрим наиболее важные плавающие окна и панели. • Окно Tag Inspector содержит код создаваемого документа. Любые изменения в основном окне немедленно отображаются соответствующим кодом. При вводе HTML-кода изменения в основном окне появятся после щелчка мышью за пределами данного окна. • Окно History отслеживает каждый шаг вашей работы и позволяет отменить или повторить действие. • Окно Files вызывает встроенный FTP-клиент для работы с файлами, составляющими сайт.

19

• Панель Insert содержит закладки с кнопками, позволяющими вставлять в документ различные объекты. • Панель Properties позволяет просматривать и редактировать свойства выделенного объекта. Задание основных настроек программы Для того чтобы сделать работу с редактором эффективной и комфортной, нужно определить значение некоторых параметров. Чтобы вызвать настройку параметров программы, нужно в главном меню открыть пункт Edit, а в нем выбрать пункт Preferences… (Edit=>Preferences…) После этого на экране отображается окно редактирования параметров работы. В левой части окна отображаются категории возможных настроек, а в правой – параметры выбранной категории. В категории General собраны общие настройки программы. Флажок Use CSS instead of HTML tags включает или отключает использование для форматирования текста стилей CSS вместо тегов HTML. По умолчанию он включен, и его желательно выключить. Важным моментом является подготовка редактора Dreamweaver к работе с русскоязычными документами. Общепринятым, стандартным языком в компьютерных технологиях является английский язык. Поэтому при размещении англоязычных документов в Internet не возникает никаких затруднений. Но как только речь заходит о документах, которые используют другую кодировку – возникает целый ряд проблем. При работе в редакторе Dreamweaver необходимо указать, в какой кодировке предполагается редактировать документы. Для того чтобы определить кодировку по умолчанию для вновь создаваемых HTML-документов, нужно в окне Preferences выбрать категорию New Document. В списке Default encoding указывается какая-либо из кириллических кодировок. Наиболее употребительными являются Кириллица (KOI8-R) и Кириллица (Windows). Какую из них выбрать зависит от настроек сервера, на котором планируется размещать HTML-документы. Рекомендуется, если это возможно, использовать кодировку Кириллица (Windows). Теперь нужно включить флажок Use when opening existing files that don't specify an encoding, если он не включен по умолчанию. После этого Dreamweaver будет автоматически применять выбранную в списке Default encoding кодировку ко всем открываемым Web-страницам, если в них не задана явно другая кодировка. Далее, в списке Fonts Setting категории Fonts нужно указать, какие шрифты будут использоваться для отображения текста. Для русскоязычных HTML-документов нужно выбрать пункт Кириллица. Теперь все вновь создаваемые HTML-документы будут поддерживать русские буквы.

20

Для того чтобы изменить кодировку уже существующего HTML-документа необходимо выполнить команду Modify=>Page Properties. Появится окно параметров текущей страницы. В категории Title/Encoding из списка Encoding следует выбрать новую желаемую кодировку и нажать кнопку Reload, расположенную справа. Если перед этим документ не был сохранен, то все изменения, сделанные после последнего сохранения, будут утеряны. Чтобы этого избежать, перед изменением кодировки необходимо сохранить документ. Преобразование кодировок возможно только между кодировками одного типа. Например, изменение кодировки Кириллица (KOI8-R) в Кириллица (Windows) будет выполнено корректно, а преобразование из Западноевропейской в Кириллицу (KOI8-R) будет некорректным. Настройку параметров работы редактора Dreamweaver достаточно выполнить один раз после установки программы. А далее при редактировании HTMLдокументов во всех сеансах работы с программой она будет работать согласно установленным параметрам. Задание основных свойств страницы Для того чтобы настроить свойства страницы, необходимо из главного меню выбрать команду Modify=>Page Properties…. Основное, что необходимо задать в открывшемся диалоговом окне, это название (заголовок) страницы – поле Title в категории Title/Encoding. Считается, что каждая страница сайта должна иметь продуманное, кратко и четко сформулированное название. Визуально оно будет отображено в заголовке окна браузера и, кроме того, будет использоваться поисковыми системами и т.п. Кроме заголовка, в категории Appearance этого диалогового, можно установить следующие параметры страницы: • Background image – изображение, которое будет использовано в качестве фона страницы (графический файл с изображением можно выбрать, нажав кнопку Browse…); • Background / Text – соответственно цвета фона страницы и текста, расположенного на ней (можно выбрать цвет из палитры, нажав на кнопке , расположенном рядом); • Links / Visited links / Active links – соответственно цвета ссылок / посещенных ссылок / активных ссылок; • Left margin / Top margin / Margin width / Margin height – задают отступы (поля) по бокам и в начале и конце страницы (Left и Top margin отображаются только в браузере Internet Explorer, а Margin width и height только в Netscape Navigator, поэтому рекомендуется использовать оба параметра одновременно для сохранения совместимости).

21

Определение свойств сайта Сайтом называется группа Web-страниц, расположенных на одном сервере и тесно связанных как по смыслу, так и навигационно. К свойствам сайта относятся: • название сайта; • имя папки, в которой хранится сайт на локальном диске; • адрес сервера и характеристики удаленного доступа; • имя файла, в котором хранится главная (домашняя) страница сайта. Для определения свойств сайта в меню Site щелкните New site — появится диалоговое окно Site Definition. В категории Local Info заполните поле Site Name и выберите Local Root Folder. Имя сайта — это имя проекта, использование которого упрощает управление настройками при работе с различными сайтами (а не страницами одного сайта). Для переключения или настройки на работу с другим сайтом используется команда Define sites меню Site. Настройка способа удаленного доступа к серверу производится в категории Remote Info. Если вы собираетесь использовать встроенный FTP-клиент, который, например, позволяет загрузить на сервер страницу вместе со всеми связанными изображениями, то в поле Access выберите FTP и заполните поля FTP Host, Login и Password. В категории Site Map Layout в поле Home Page укажите имя файла, в котором хранится домашняя страница сайта. FTP-доступ выполняется с помощью панели Files, в одной половине которого отображается рабочая директория локального сайта, а в другой — ваша директория на FTP-сервере, которая появляется после щелчка кнопки Connects to remote host. После соединения с сервером кнопка принимает и становится возможной передача файлов между локальным и вид удаленным сайтами, удаление файлов, организация папок и т. д. Панель Files кроме кнопки Connects to\Disconnects from remote host содержит следующие кнопки (название кнопки появляется при наведении на нее курсора): • Site Files — показывает файлы удаленного и локального сайтов; • Site Map — отображает визуальную карту сайта, иллюстрирующую взаимные связи документов; • Refresh — обновляет списки файлов; • Get — копирует выделенные файлы с удаленного сайта на локальный; • Put — копирует выделенные файлы с локального сайта на удаленный. Передача файлов между локальным и удаленным сайтами возможна и с помощью команды Synchronize меню Site. Эта команда вызывает диалоговое окно Synchronize Files, в котором в списке Synchronize выбирается объект синхронизации: • Entire ‘site name’ Site — весь сайт; • Selected Local Files Only — только выбранные локальные файлы; • Selected Remote Files Only — только выбранные удаленные файлы. 22

В списке Direction определите тип действия: • Put never files to remote — передать последние версии файлов на удаленный сайт; • Get never files from remote — принять последние версии файлов с удаленного сайта; • Get and Put never files — принять и передать последние версии файлов. При установленном флажке Delete remote files not on local drive на удаленном сайте будут удалены все файлы, которые отсутствуют на локальном. После определения объекта и направления, щелкнув кнопку Preview, в диалоговом окне можно увидеть список файлов с отмеченными действиями. Если этот список соответствует вашим намерениям, то щелкните кнопку OK, и файлы будут автоматически переданы или удалены, если какое-либо действие выполнять не надо, снимите флажок для такого файла. Форматирование текста Программа Dreamweaver позволяет форматировать введенный текст: изменять тип заголовка, размеры и цвет шрифта, определять вид шрифта и т. д. Рассмотрим основные возможности форматирования с помощью панели Properties или команд контекстного меню. Форматирование заголовков. Для форматирования заголовков в языке HTML предусмотрено шесть уровней. Чтобы задать заголовки различного уровня, выделите текст, подлежащий форматированию, затем, вызвав контекстное меню, выберите Paragraph Format и заголовок соответствующего уровня, например Heading1. Подобного эффекта можно достичь, используя панель Properties. Например, для создания заголовка второго уровня необходимо выделить соответствующий текст и на панели Properties в поле Format выбрать поле Heading2. Выравнивание текста. В языке HTML предусмотрено выравнивание текста по центру, левому и правому краям, ширине страницы. Для выравнивания текста вызовите контекстное меню и в поле Align выберите нужный вариант, например Center. Для решения этой же задачи с использованием панели Properties достаточно щелкнуть кнопку . Изменение размера шрифта. Язык HTML предусматривает семь размеров шрифта. По умолчанию размер текста — 3. Для изменения в тексте размера шрифта необходимо: выделить текст и, вызвав контекстное меню, в поле Size выбрать соответствующий размер. При помощи панели Properties это можно сделать, выбрав соответствующий размер в поле Size. Следует отметить, что в языке HTML предусмотрена возможность задания размера шрифта не только в абсолютных, но и в относительных единицах, как уменьшение (увеличение) шрифта на некоторую величину относительно заданного. Например, для того чтобы изменить размер шрифта текста с 3 на 5, можно в поле Size выбирать абсолютный размер 5 или относительное значение +2. 23

Изменение цвета шрифта. Для того чтобы поменять цвет шрифта: выделите подлежащий цветовой модификации фрагмент текста, в главном меню щелчком мыши активизируйте пункт Text и выберите пункт Color. Это можно сделать и с помощью панели Properties, щелкнув кнопку и выбрав из предлагаемой палитры нужный цвет. Изменение вида шрифта. Для того чтобы поменять вид шрифта (допустим, с Times New Roman на Arial): в контекстном меню выберите пункт Font и щелкните соответствующий тип шрифта. Для того чтобы изменить вид шрифта с использованием панели Properties, в поле Font выберите необходимый вид шрифта. Изменение начертания шрифта. Программа Dreamweaver предлагает стандартный набор начертаний шрифта: курсивное и полужирное. Также имеется возможность отформатировать текст как подчеркнутый. Для того чтобы изменить начертание исходного текста, в контекстное меню выберите пункт Style и щелкните Bold, Italic или Underline. Сделать фрагмент текста жирным или курсивным можно также при помощи панели Properties. Для этого выделите форматируемый фрагмент текста и щелкните соответствующую кнопку, например . Организация списков. Программа Dreamweaver позволяет оформлять текст в виде двух типов списков — маркированного (ненумерованного) и нумерованного. Рассмотрим создание двух видов списков с использованием панели Properties. Для того чтобы создать ненумерованный список, выделите соответствующий фрагмент текста и щелкните кнопку . Чтобы создать нумерованный список, выделите соответствующий фрагмент текста и щелкните кнопку . Для и . понижения или повышения иерархии списка используются кнопки Вы можете поменять вид списка. Для этого щелкните кнопку List Item на панели Properties и выберите любой из возможных стилей списка. Для нумерованных списков необходимо задать начало отсчета списка с любой цифры или буквы. Создание гиперссылок Ссылки связывают один Web-ресурс с другим. Несмотря на простоту, ссылки стали основным залогом успеха WWW. При организации гиперссылок между Web-страницами создаваемого сайта наиболее удобно использовать относительную адресацию. Поэтому, прежде чем организовать в документе гиперсcылку, необходимо сохранить исходный файл. Рассмотрим создание гиперссылки с использованием панели Properties. Для того чтобы создать гиперсcылку на файл, находящийся на вашем компьютере, выделите фрагмент документа, который будет являться гиперссылкой.

24

Щелкните значок на панели Properties. В открывшемся окне Browse for File выберите файл, на который будет произведена ссылка. Для того чтобы создать ссылку в текущем документе, необходимо выполнить следующие действия. • Установите «якорь» у фрагмента документа, к которому будет обращена ссылка: в панели Insert переключитесь на Common. Перейдите к фрагменту документа, на который будет произведена ссылка, и щелкните . В появившемся окне введите имя «якоря» латинскими буквами. значок • Выделите объект, который будет являться ссылкой, и в поле Link введите символ # и имя «якоря». Для того чтобы создать гиперссылку на ресурс, расположенный в Интернете: • выделите фрагмент документа, который будет являться ссылкой; • введите в поле Link адрес ресурса, например http://spb.fio.ru. Для того чтобы создать ссылку на электронную почту, можно воспользоваться командой Email Link меню Insert или в поле Link ввести URL электронной почты, например mailto:[email protected]. Использование таблиц Таблицы являются основной (и самой простой) формой представления сложного форматирования документа в WWW. Для того чтобы разместить таблицу на Web-станице, щелкните кнопку с изображением таблицы в разделе Common панели Insert. После этого появится диалоговое окно, в котором задаются основные свойства таблицы: количество строк (Rows) и столбцов (Columns), ширина таблицы (Table width) в пикселах или процентах, толщина рамки таблицы (Border), расстояние между ячейками (Cell Spacing) и отступ от границы ячейки до ее содержимого (Cell Padding). Изменение свойств как таблицы в целом, так и отдельных ее ячеек может быть выполнено с помощью панели Properties или контекстного меню. При этом редактируемый элемент предварительно должен быть выделен. При выделении всей таблицы на панели Properties доступными для редактирования являются следующие свойства. Table Name — название таблицы, Rows и Cols — количество строк и столбцов, W — ширина и H — высота таблицы в процентах или пикселах (не рекомендуется задавать высоту таблицы в процентах), Cell Space — расстояние между ячейками, Cell Pad — отступ от границы ячейки до ее содержимого, Align — выравнивание таблицы относительно окна обозревателя, Border — толщина рамки (если установить толщину рамки 0, границы таблицы не будут отображаться на экране). Четыре маленьких кнопки в левом нижнем углу (по порядку, слева направо и сверху вниз): очистить значения высоты строк; очистить значения ширины столбцов; конвертировать значение ширины таблицы в пикселы; конвертировать значение ширины таблицы в проценты. Кнопка и поле Bg Color позволяют установить цвет фона таблицы, Brdr Color 25

— цвет рамки, а поле Bg Image — определить путь к файлу рисунка, который будет использоваться как фон для таблицы. Возможно редактирование свойств отдельной ячейки таблицы: поместите курсор в редактируемую ячейку, после чего на панели Properties будут представлены элементы управления свойствами ячейки: поля Hors и Vert определяют горизонтальное и вертикальное выравнивание в ячейке, W — ширину и H — высоту ячейки, в поле Bg можно определить путь к файлу рисунка, который будет использоваться как фон ячейки, а кнопки

и

позволяют изменить цвет фона и рамки ячейки. Для того чтобы объединить смежные ячейки, выделите их и выберите Modify=>Table=>Merge Cells. Для того чтобы добавить в ячейку строки или столбцы, активизируйте ее и выберите Modify=>Table=>Split Cell. Вставка изображения и редактирование его свойств Прежде чем вставить в документ графическое изображение, необходимо сохранить его. Для внедрения в документ графического изображения в разделе Common на панели Insert. В воспользуйтесь кнопкой появившемся окне Select Image Source выберите файл с требуемым изображением и щелкните кнопку Select. При вставке графического изображения возможны два варианта: • выбранное изображение находится в рабочей директории сайта (или в одной из его поддиректорий). В этом случае оно просто будет вставлено в документ; • выбранное изображение находится за пределами рабочей директории сайта. В этом случае Dreamweaver предложит скопировать его в рабочую директорию, иначе путь к файлу, содержащему графическое изображение, будет прописан неправильно. Настройка свойств изображения. При выделении графического изображения на панели Properties в левом верхнем углу отображается миниатюрная копия изображения. Справа от этой копии находится окошечко, в которое можно вписать значение параметра name (название рисунка используется поисковыми системами). Еще правее расположены два окна, в которых прописаны ширина и высота рисунка. Далее идут параметры Src (путь к рисунку) и ссылка (Link). Поле Link предназначено для создания гиперсвязи относительно данного рисунка. Ее организация аналогична процедуре создания гиперсвязи для текстового фрагмента документа. Для того чтобы поместить графическое изображение в рамку (независимо от того, является он ссылкой или нет), установите соответствующее значение параметра Border (поле Border в правой нижней части панели). Используя поле Align, можно выравнивать рисунок относительно текста. Для создания подсказки или скрытой надписи (проявление которой происходит при наведении курсора на рисунок) 26

существует поле Alt, в которое необходимо ввести соответствующий текст. В , левой нижней части панели расположены инструменты позволяющие сделать из рисунка мультиссылку (мультиссылка дает возможность сделать несколько гиперссылок, относящихся к разным фрагментам одного рисунка). Для того чтобы создать мультиссылку, щелкните рисунок, в окне Properties выберите любой из инструментов, предназначенных для создания мультиссылок, выделите область рисунка, относительно которой будет создана гиперссылка. В поле Link укажите адрес ресурса, на который будет произведен переход. Регистрация на бесплатном сервере После того, как будет готова первая, обычно тестовая, версия вашего сайта, настает время его публикации. Рассмотрим размещение сайта на одном из наиболее популярных в русскоязычной части интернета бесплатном сервере Народ.ru, для регистрации на котором следует обратиться по адресу http://narod.ru. Прежде всего, нужно зарегистрироваться в системе. Для этого на первой странице нужно выбрать себе логин (рис. 2.1). Затем, в открывшейся странице указать Имя и Фамилию и нажать кнопку Дальше.

Рис. 2.1. Начало регистрации на сайте Народ.ru На следующей странице вам необходимо указать пароль для доступа к системе и некоторые сведения для возможного восстановления пароля (рис. 2.2). Прежде чем заполнять поля, обратите внимание на правую часть страницы, где описано, для чего предназначены данные, которые просят вас указать (некоторые поля можно не заполнять).

27

Рис. 2.2. Ввод данных для доступа к системе Народ.ru После заполнения полей необходимо нажать на кнопку OK, внизу страницы. Если все было заполнено корректно, то вы перейдете на следующую страницу регистрации. В противном случае, система укажет причину неудавшейся регистрации и потребуется повторное заполнение данных. На следующей странице (рис. 2.3) вам необходимо заполнить анкету, в которой требуется указать некоторые персональные данные. После их заполнения нажмите на кнопку Сохранить.

Рис. 2.3. Ввод дополнительной информации Проект Народ.ru, существующий в рамках сайта Яndex, помимо обеспечения бесплатного хостинга, предоставляет ряд других услуг своим пользователям. Одной из них является бесплатный почтовый сервис. Поэтому сразу после заполнения формы с персональными данными вам будет выданы адреса электронной почты, которые вы увидите на странице Настройка Яндекса и которые будут совпадать с логином, указанным при регистрации (рис. 2.4).

28

Рис. 2.4. Адреса электронной почты После того, как все необходимые сведения указаны, вы попадаете на страницу настроек (рис. 2.5). Здесь, в случае необходимости, можно изменить пароль и личные сведения (раздел “Персональные данные”). В самом начале доступна только электронная почта, адрес которой был получен в процессе регистрации. Для получения хостинга нужно в разделе “Настройка Яндекса” необходимо выбрать пункт “Создать сайт”. Будет создан адрес сайта, в котором первую часть доменного имени составляет логин, указанный при регистрации, и которое имеет вид логин.narod.ru.

Рис. 2.5. Страница “Настройка Яндекса” После выполнения этих действий в разделе “Настройка Яндекса” появится сайт. Ссылка “Мастерская” позволяет перейти к странице управления и изменения его настроек (рис. 2.7). Создатели данного сервиса предлагают начинающим авторам использовать шаблоны и заготовки для быстрого создания сайта. Среди заготовок наибольший интерес представляют такие элементы сайта, как анкета, опрос, гостевая книга и т.п. Однако, наш ресурс уже готов, поэтому сразу обратимся к разделу “Редактирование и управление” (рис. 2.8). Для загрузки файлов сайта на сервер предназначены инструменты “Загрузка файлов на сайт” и “Управление файлами и HTML-редактор”. В разделе “Доступ к файлам по FTP” подробно описано, как настроить FTPклиент на взаимодействие с сервером. 29

Рис. 2.7. Переход к странице управления сайтом

Рис. 2.8. Средства редактирования и управления сайтом Для загрузки файлов сайта на сервер средствами сервиса Народ.ru, выбираем инструмент “Загрузка файлов на сайт”. Откроется страница выбора файлов для загрузки (рис. 2.9). С помощью кнопок Обзор выбираем файлы, которые необходимо загрузить (можно указать сразу 10 файлов) и нажимаем на кнопку Загрузить файлы.

Рис. 2.9. Загрузка файлов на сайт В дальнейшем, когда потребуется вернуться к работе с сайтом или изменить его настройки, необходимо идентифицировать себя как пользователя системы. Для этого, на главной странице в соответствующих полях (рис. 2.10) следует указать свои логин и пароль, полученные при регистрации.

Рис. 2.10. Вход для управления сайтом Практическая работа для освоения урока 1. Настройте программу редактора Dreamweaver, установив требуемую кодировку создаваемых Web-страниц. 30

2. Определите рабочую папку для локального сайта и параметры удаленного доступа к серверу. 3. Создайте HTML-документ в соответствии с образцом, представленным ниже: Основы работы в HTML-редакторе Dreamweaver Форматирование текста, создание списка Создатели программы Dreamweaver постарались сделать удобный и простой в использовании инструмент, облегчающий процесс создания HTML-страниц, их редактирования и управления большим количеством связанных друг с другом документов. В данном учебном пособии рассматриваются основы работы с пакетом Adobe Dreamweaver CS3. Основное внимание уделяется инструментам и приемам работы, позволяющим создавать качественные образовательные ресурсы. Вы научитесь создавать и форматировать web-страницы, использовать интерактивные элементы, познакомитесь со средствами автоматизации разработки и управления файлами сайта. При организации файлов сайта рекомендуется следовать следующим общепринятым принципам: • в корневом каталоге сайта обязательно должен быть файл index.html, который является первой (стартовой) страницей сайта или фреймосодержащим документом; • графические файлы размещаются в отдельных папках (обычно images); • если имеются дополнительные файлы, используемые как компоненты страниц (например, скрипты JavaScript, стили CSS, анимации Flash), их размещают в отдельных папках в соответствии с типом; • если сайт содержит несколько тематических разделов, то каждый раздел размещается в своей папке, куда также входят все дополнительные материалы, используемые в этом разделе; • для документов, входящих в состав сайта, как правило, используют информативные названия, например links.html, page1.html, background.gif и т.д. (а не имена по умолчанию, такие как Untitled1.htm или Movie1.swf).

4. Сохраните созданный документ в рабочую папку, задав ему имя (например, text.htm). 5. Создайте HTML-документ в соответствии с образцом, представленным ниже: № Автор Название 1 Дронов В.А. Самоучитель Macromedia Dreamweaver 8 2 Кирсанов Д. Веб-дизайн 3 Пауэрс Ш. Динамический HTML 4 Уорнер Д., Гарднер С. Dreamweaver MX 2004 для "чайников" 5 Шафран Э. Создание Web-страниц: самоучитель № Автор Название 6. Сохраните созданный документ в рабочую папку, задав ему имя (например, table.htm).

31

7. C помощью поисковой системы Яндекс найдите картинки среднего размера на любую тематику (например, животные). Сохраните несколько картинок в рабочую папку. 8. Создайте HTML-документ в соответствии с образцом, представленным ниже: Зайцеобразные (лат. Lagomorpha) плацентарных млекопитающих.

-

отряд

Общие сведения Зайцеобразные распространены в почти всех частях света. Раньше их не было в Южной Америке, на Мадагаскаре, островах Юго-восточной Азии и в Австралии. Однако благодаря человеческому вмешательству сегодня они в наличии везде, а в Австралии, в связи с их невстроенностью в пищевую цепь распространение кроликов приобрело характер национального бедствия. Зайцеобразные - звери небольшого размера, с коротким хвостом, либо он отсутствует вовсе. Их зубы имеют некоторое сходство с зубами грызунов. Питание зайцеобразных растительное, в том числе травы, корешки, ветки и кора. Многие виды отличаются чрезвычайно высокой плодовитостью. Классификация В отличие от ранних классификаций зайцеобразные не рассматриваются более как часть грызунов, хотя остаётся бесспорным тот факт, что с грызунами у них состоит близкое генетическое родство. Отряд зайцеобразных разделён на два семейства: • •

семейство зайцы, Leporidae. Населяют практически все части света. семейство пищухи, Ochotonidae. Населяют Сибирь и Северную Америку.

9. Сохраните созданный документ в рабочую папку, задав ему имя (например, picture.htm). 10.Создайте HTML-документ в соответствии с образцом, представленным ниже:

32

11.В качестве ссылки на web-сайт, укажите любой интернет-адрес (например, http://spb.fio.ru). 12.Задайте открытие ссылки на web-сайт в новом окне. 13.В качестве ссылки на web-страницу, укажите любой из созданных ранее HTML-документов. 14.В качестве ссылки на изображение, укажите любую из сохраненных ранее картинок. 15.Сохраните созданный документ в рабочую папку, задав ему имя (например, links.htm).

33

СОЗДАНИЕ ТЕСТОВЫХ ЗАДАНИЙ С ИСПОЛЬЗОВАНИЕМ ДОПОЛНЕНИЯ COURSEBUILDER Пакет JavaScript-программ CourseBuilder является дополнением к HTMLредактору Dreamweaver и предназначен для создания на HTML-страницах тестовых заданий и других интерактивных элементов. Вставка элементов CourseBuilder Для того, чтобы разместить интерактивный элемент CourseBuilder на HTMLстранице, необходимо выполнить команду Insert=>CourseBuilder Interaction или воспользоваться кнопкой на закладке CourseBuilder Interaction панели объектов. Интерактивные элементы CourseBuilder можно размещать в любом месте HTML-документа. Если HTML-документ еще ни разу не был сохранен, то CourseBuilder предложит присвоить ему имя и сохранить. Чтобы избежать путаницы между уже существующими файлами и файлами, созданными CourseBuilder, документы, которые будут содержать тестовые задания, желательно сохранять в отдельной папке (например, папке test). В папку с тестовыми заданиями CourseBuilder должен скопировать необходимые ему изображения и JavaScript-программы. CourseBuilder об этом обязательно предупредит с помощью диалогового окна. По нажатию кнопки OK необходимые файлы будут скопированы в папку с тестовыми заданиями, и CourseBuilder будет готов к работе: появится основное окно CourseBuilder, с помощью которого можно вставить интерактивный элемент и управлять его параметрами. С помощью этого диалогового окна создается “скелет” тестовых заданий и других интерактивных элементов, которые затем, впрочем, могут быть отредактированы в обычном режиме. При редактировании интерактивных элементов в обычном режиме следует быть осторожным, чтобы не разрушить созданную структуру из текста, элементов управления и невидимых вызовов JavaScript-программ. Первая закладка диалогового окна CourseBuilder называется Gallery. На этой закладке необходимо из списка Category выбрать категорию интерактивных элементов и символическое изображение интерактивного элемента, который должен быть вставлен в HTML-документ. Интерактивные элементы разделены на следующие категории: • Multiple-choice Interactions – элементы с множественным выбором, на основе которых создаются тестовые задания в закрытой форме; • Drag-and-drop Interactions – элементы с перетаскиванием, на основе которых создаются тестовые задания на соответствие и установление правильной последовательности; • Explore Interactions – элементы с интерактивными переходами; • Button Interactions – элемент-кнопка; • Text entry Interactions – элементы с текстовым вводом, на основе которых создаются тестовые задания вопросы в открытой форме; 34

• • •

Timer Interactions – элемент-таймер; Slider Interactions – элемент-ползунок; Action Manager Interactions – элемент управления событиями. При выборе одной из категорий на основном центральном поле диалогового окна CourseBuilder отображаются символические изображения интерактивных элементов. Если выбрать одно из них, то в HTML-документ будет вставлена заготовка интерактивного элемента, которую можно настроить с помощью элементов управления на появившихся дополнительных закладках. Создание тестового задания в закрытой форме Для создания тестового задания на диалоговом окне CourseBuilder необходимо выбрать категорию Multiple Choice. Например, создадим тестовое задание с несколькими правильными ответами на основе интерактивного элемента, который имеет условное имя MultCh_ImageChkboxes. Элементы управления для настройки тестового задания расположены на появившихся закладках General, Choices, Action Mgr. Параметры, которые определяют правила проверки тестового задания, расположены на закладке General. Имя интерактивного элемента (Interaction Name) CourseBuilder назначает автоматически, и без особой необходимости изменять его не следует. Это имя используется в процессе работы скриптов, поэтому должно состоять из латинских символов. Формулировка тестового задания записывается в поле Question Text, может быть произвольной длины и содержать любые символы. Группа переключателей Judge Interaction определяет событие, по которому будет осуществляться проверка выполнения тестового задания. Если выбран первый переключатель, то проверка будет выполняться по нажатию на специальную кнопку. Надпись на кнопке (по умолчанию “Submit”) можно задать в текстовом поле справа (например, “Ответ готов”). Если выбран второй переключатель, то проверка будет выполняться сразу, как только ученик выберет один из ответов. Если выбран третий переключатель, то проверка будет выполняться по специальному событию, которое необходимо определить дополнительно. Элемент управления Correct When позволяет задать критерий правильно выполненного тестового задания. Если в этом списке выбран пункт All Correct and None Incorrect, то тестовое задание будет считаться выполненным правильно, когда ученик выбрал все альтернативные варианты ответов, помеченные автором как правильные. Если в этом списке выбран пункт Any Correct and None Incorrect, то тестовое задание будет считаться выполненным правильно, когда ученик выберет хотя бы один из альтернативных вариантов ответов, помеченный автором как правильный. Если при выполнении тестового задания ученик выбрал неправильный ответ, то и в том, и в другом случае тестовое задание будет считаться выполненным неправильно. Флажок Knowledge Track можно включить только в том случае, если результаты выполнения тестовых заданий предполагается обрабатывать с 35

помощью специального программного обеспечения, установленного на Webсервере (например, Lotus Pathware). Автор тестового задания может ограничить количество попыток и время, отводимое на выполнение тестового задания. По умолчанию количество попыток и время на выполнение задания неограничено (Unlimited). Для того, чтобы ограничить количество попыток, необходимо в списке Tries Are выбрать значение Limited To, а в текстовом поле справа указать количество допустимых попыток (например, 3). Аналогично можно ограничить время выполнения тестового задания. Для этого в списке Time Is устанавливается значение Limited To, а в текстовом поле справа указывается предельное время в секундах (например, 180). Если в процессе работы ученика с тестовым заданием закончится количество попыток или отведенное время, то по умолчанию будет выдано предупреждающее сообщение, а затем все элементы данного тестового задания будут заблокированы. Флажок Reset включает в “скелет” тестового задания кнопку для приведения его в исходный вид. Надпись на кнопке можно изменить в обычном режиме редактирования. Если включить флажок Layer, то “скелет” тестового задания будет размещен на отдельном слое. Элементы управления, расположенные на закладке Choices предназначены для создания и изменения параметров вариантов ответов на тестовое задание. Каждый из них должен иметь уникальное имя (Name), которое используется JavaScript-программами, и поэтому должно состоять из латинских символов. В списке Choices отображаются имена альтернативных вариантов ответов, а в нижней части диалогового окна – их параметры. Изменить количество вариантов альтернативных ответов можно с помощью кнопок Add и Delete, а поменять порядок их следования – с помощью кнопок Up и Down. Последовательно выбирая имена альтернативных вариантов ответов из списка Choices, необходимо ввести формулировку каждого варианта ответа (в поле Text) или его графическое представление (имя файла с изображением в поле Image File). Если заполнено и поле Text, и поле Image File, то формулировка альтернативного варианта ответа будет содержать и текст, и изображение. В этом случае флажок Place before text определяет порядок следования изображения. Если флажок включен, то изображение будет размещаться до текста, а если выключен, то после. Элемент управления Appearance определяет изображение, которое будет использоваться в качестве элемента для выбора ответа. С помощью элемента управления Choice Is каждый из альтернативных вариантов ответов должен быть помечен как правильный (Correct) или как неправильный (Incorrect). Если альтернативный вариант ответа помечен значением Not Judged, то неважно выберет ученик этот ответ или нет, так как при проверке он не будет приниматься во внимание. Каждому альтернативному варианту ответа можно назначить свой балл (оценку), который затем использовать для интегральной оценки по результатам выполнения нескольких тестовых заданий. Для этого в поле Score 36

необходимо указать численное значение оценки. Например, если в тестовом задании с четырьмя альтернативными ответами два правильных, то можно назначить каждому из них балл 2.5, чтобы общая оценка за выполнение тестового задания оказалась равной 5. После того, как параметры всех альтернативных вариантов ответов указаны, можно перейти к последней закладке, которая называется Action Mgr. Работа с закладкой Action Mgr при конструировании тестовых заданий в любой другой форме ничем не отличается. На этой закладке на псевдоязыке программирования отображается программа предъявления реакции на выполнение тестового задания (Segment: Correctness), на окончание количества попыток (Segment: Check Tries) и отведенного времени (Segment: Check Time). Эти действия собраны в сегменты, которые могут быть развернуты или свернуты с помощью кнопок Expand и Collapse соответственно. С помощью символических стрелок действия можно перемещать по тексту псевдопрограммы. Команды псевдопрограммы можно вырезать, копировать и вставлять с помощью кнопок Cut, Copy и Paste соответственно. С помощью кнопки Add в псевдопрограмму можно добавлять новые сегменты и действия, которые перечислены в списке справа от этой кнопки. А с помощью кнопок Edit... и Rename… можно отредактировать или переименовать существующие сегменты и действия. Таким образом, Action Manager является мощным средством управления событиями интерактивных элементов CourseBuilder. При создании тестовых заданий CourseBuilder назначает приемлемые алгоритмы обработки событий. В качестве реакции на ответ, на окончание количества попыток или отведенного времени используется небольшое диалоговое окно с сообщением (Popup Message). Единственным недостатком является то, что сообщения достаточно скупые и заданы на английском языке. Из списка действий необходимо выбрать пункт Popup Message и в зависимости от контекста изменить текст сообщения. Например, в случае правильного выполнения тестового задания из сегмента Correctness будет выполнено условие if Correct, что приведет к вызову диалогового окна Popup Message с сообщением на английском языке: “Correct”. Для изменения текста сообщения необходимо выбрать этот пункт списка Popup Message и нажать кнопку Edit… На появившемся диалоговом окне в текстовом поле Message необходимо заменить английское слово “Correct” на русское “Правильно”, “Ответ правильный” или любое другое. Аналогично следует поступить и с реакцией на неправильный ответ, которая вызывается, если выполняется условие else if Incorrect. Если ученик еще не дал ответ, а уже нажал кнопку “Проверить”, то выполнится условие else if Unknown Response. Сообщение “Unknown Response” в действии Popup Message необходимо заменить на сообщение “Задание не выполнено” или на повелительное сообщение “Выполните тестовое задание!” После того, как все необходимые действия по настройке “скелета” тестового задания выполнены, на диалоговом окне CourseBuilder можно нажать кнопку OK. 37

При необходимости можно вернуться в режим редактирования тестового задания. Для этого необходимо выделить иконку , которая расположена после тестового задания. Эту иконку следует также использовать для копирования и переноса соответствующей ей интерактивного элемента CourseBuilder. При ее выделении на панели свойств Dreamweaver появляются свойства элемента CourseBuilder, а в окне редактора должно выделиться все тестовое задание полностью. Необходимое для изменения параметров диалоговое окно вызывается по кнопке Edit… на панели свойств. Практическая работа для освоения урока 1. Создайте тест, состоящий из 5 вопросов различного типа с выдачей сообщений о правильности ответов. Вопросы должны находиться в одном HTML-документе, и располагаться друг за другом. Установите ограничение времени для каждого. Организуйте подсчет результата тестирования. 2. Создайте тест, состоящий из 5 вопросов различного типа с выдачей сообщений о правильности ответов. Вопросы должны находиться в одном HTML-документе, и располагаться в таблице в два столбца. Установите ограничение времени для каждого. Организуйте подсчет результата тестирования. 3. Создайте тест, состоящий из 5 вопросов различного типа с выдачей сообщений о правильности ответов. Вопросы должны находиться в одном HTML-документе, и располагаться на отдельных слоях. Установите ограничение времени для всего теста. Организуйте подсчет результата тестирования. 4. Создайте тест, состоящий из 5 вопросов различного типа без выдачи сообщений о правильности ответов. Вопросы должны находиться в разных HTML-документах. Установите ограничение времени для каждого вопроса. Организуйте условные переходы между документами по следующему принципу: при правильном ответе на вопрос устанавливается переход к файлу со следующим вопросом, при неправильном ответе – к файлу, содержащему информацию об ошибке и объясняющему правильный ответ. 5. Создайте тест, состоящий из 5 вопросов различного типа с выдачей сообщений о правильности ответов. Вопросы должны находиться в одном документе, и располагаться на отдельных слоях. Установите ограничение времени для каждого вопроса. Организуйте подсчет результата тестирования.

38

ОСНОВЫ РАБОТЫ В ADOBE PHOTOSHOP CS3 Основные положения Работая в графическом пакете Photoshop, необходимо отметить простоту интерфейса. Можно выбрать нужный вам инструмент, щелкнув мышью на его значке в панели инструментов. Маленький треугольник справа внизу от значка инструмента указывает на существование открывающегося меню невидимых (альтернативных) инструментов. Чтобы выбрать такой инструмент, нужно установить курсор на значок закрывающего его инструмента, нажать левую кнопку мыши и, удерживая ее, переместить курсор на значок нужного инструмента. Для отображения или отключения различных панелей инструментов пользователю достаточно выбрать команду в меню Window. Параметр Show говорит о том, что панель можно открыть, Hide – закрыть. Создание заголовка Создайте новый файл, File, New. Появится диалоговое окно

В этом диалоговом окне существует возможность задать параметры вашего будущего проекта. Первым параметром Name (Имя) идет имя проекта, которое будет предложено автоматически при создании дальнейшем его сохранении, Width (Ширина), Height (Высота) – линейные размеры проекта, Resolution (Разрешение), Color Mode (Цветовой режим), Background Contents (Цвет фона). Вроде бы простая задача задать параметры и нет никакой хитрости. Но если присмотреться, то напротив каждого параметра стоят дополнительные параметры. Для Width & Heigth это единицы измерения. Которые могут быть следующими: Pixels, Inches, cm, mm, points, picas, colums (пикселы, дюймы, сантиметры, миллиметры, поинты, пики, 40

колонки). Пересчет из одних единиц измерений в другие не составляет большого труда, основными единицами для экранных проектов должны быть pixel. Но при этом необходимо задать и параметр Resolution 72 pixels/inch (точек на дюйм). Именно 72 точки на дюйм являются стандартным разрешением для монитора. Итак для создания заголовка вам потребуютcя следующие параметры: Width 550 pixels, Heigth 100 pixels, Resolution 72 pixels/inch. Остальные параметры можно задать следующими Color Mode: RGB Color, 8 bit (Цветовой режим который может принимать значения цветовых режимов Для текста лучше всего выбрать размер 48, остальные параметры на Ваше усмотрение.

Щелкните лкм по рабочей области экрана и напишите текст, например заголовок для одной из страниц сайта. Если раскрыть панель Layers, то можно отметить, что при создании текста появился новый слой имя которому дал Ваш текст.

После этого текст можно выделить. К уже известному Вам способу выделения текста можно добавить еще один – двойной щелчок лкм по букве T, обозначающем слой с текстом.

Далее текст можно поставить в нужную Вам часть экрана и задать тексту выгибание, например в виде флага. 41

Теперь Созданному тексту можно добавить эффект слоя, для этого в панели Layers необходимо найти кнопку в виде букв Fx – Add a layer style (добавить стиль слоя) после чего появится выпадающее меню в котором можно выбрать один из стилей (эффектов) слоя. Одним из самых частых эффектов слоя (в связи с тем, что фон у страниц, как правило, светлый) является Drop Shadow (падающая тень). В качестве параметров тени можно выбрать веет тени, непрозрачность тени (Opacity). Angle – угол падения света, Distance – расстояния от объекта до подложки на которую отбрасывается тень, Spread – в ощущениях автора играет роль размера тени, Size – размытость тени. Contour – контур тени, Antialiased – экранное сглаживание тени.

42

Если оставить все параметры по умолчанию, то эффект получится тоже не плохой ☺. Кроме этого можно задать объект не выпуклым, а вогнутым – эффект Inner Shadow (внутренняя тень), параметры у нее аналогичные.

Кроме этого, можно задавать псевдо объемные контуры. Bevel and Emboss. В этом случае стоит добавить про параметр Depth – глубина или высота.

43

Если фон у страницы темный, то тогда можно применить эффект Outer Glow (внешнее свечение).

Если немного пофантазировать, то можно получить неплохие эффекты.

44

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

Создание кнопки Создайте новый файл размером 50 на 50 пикселов и разрешением 72 pixels/inch с прозрачным фоном (Transparent)

45

При помощи инструмента Zoom Tool увеличьте масштаб отображения на экране (иначе будет тяжело рисовать). Далее выберите инструмент Oval Marquee Tool (Овальное выделение) и создайте область выделения (если область выделения нужна другой формы, то никто не мешает выбрать например, Rectangular Marquee Tool или поэкспериментировать с возможностями добавления или вычитания областей выделения (см. описание инструментов). Если Вам необходимо нарисовать именно круглую или квадратную кнопку, то Вы можете во время создания области выделения нажать и удерживать клавишу Shift. После отрисовки на экране появляется пунктирная область в виде пунктирной окружности.

Выберите инструмент Gradient Tool, задайте Foreground Color и Background Color (Основной и фоновый цвета), выберите тип градиента от основного цвета к фоновому, вид градиента - Radial Gradient (Радиальный градиент). При помощи Gradient Tool проведите горизонтальную прямую, указанным на рисунке способом. 46

После того, как Вы отпустите лмк внутри области выделения нарисуется градиентный переход, если посмотреть, то в панели Layers Вы увидите, что у Вас присутствует Layer 1 (Слой 1).

Создайте новый слой (Create a new layer). Теперь необходимо уменьшить область выделения, для этого можно нарисовать новую область выделения, но можно воспользоваться пунктом меню Select (Выделение) в котором можно найти весьма полезные команды: All (выделение всего рисунка), Deselect (Убирание области выделения), Inverse (инвертирование области выделения), Modify (изменение параметров области выделения). Именно в пункте меню Modify находятся нужные команды: Expand (увеличение области выделения) и Contract (сжатие области выделения).

47

Итак, Select > Modify > Contract – уменьшение области выделения, в качестве параметров задайте 5 пикселов (pixels). После этого область выделения сожмется по 5 пикселов по периметру. Выберите Gradient Tool, поставьте галочку в переключателе Reverse и поведите горизонтальную прямую указанным на рисунке способом

Отрисуется инвертированный градиентный переход и на экране. Если посмотреть на панель Layers, то увидите, что в новом слое (Layer 2) нарисован круг с градиентной заливкой

Теперь первый вариант кнопки готов (нажатый вариант кнопки) сохраните его File > Save As (Файл, Сохранить), в качестве имени файла задайте but2, а в качестве типа файла gif

На предупреждения согласитесь с программой. Теперь необходимо создать не нажатый вариант кнопки. Для этого создайте еще один слой, уменьшите область выделения еще на 5 пикселов, выберите Gradient Tool, 48

выключите Reverse, и создайте градиентную заливку внутри полученной области выделения.

Сохраните данный файл под именем but1.gif Создание анимации

Создайте новый файл с указанными на рисунке параметрами (стандартные параметры заголовка). Выберите Horizontal Type Tool и напишите текст который будет в дальнейшем анимирован.

49

Откройте панель для анимации (Window > Animation) поле этого, ели посмотрите на эту панель, то в первом кадре анимации уже есть содержимое – это тот текст, который был Вами создан.

Выберите Move Tool и перетащите текст таким образом, чтобы у правого края рабочей области была видна одна буква или только краешек этой буквы.

В панели Animation (Анимация) щелкните по кнопке Duplicate selected frames (дублирование кадра) – кнопка выполнена в виде листочка с загнутым уголком.

Перейдите на новый кадр и при помощи Move Tool перетащите текст на лево таким образом, чтобы из за края листа торчала одна буква. Перейдите вновь на первый кадр и нажмите на кнопку Tween animation frames. Задайте 20 кадров. 50

Получится набор кадров с анимацией. Остается и сохранить в типе gif.

51

ОСНОВЫ РАБОТЫ В ADOBE FLASH CS3 Краткий обзор интерфейса Программа Flash изначально создавалась для простых пользователей Интернета и по этой причине обладает более простыми и универсальными инструментальными средствами. Запускается программа Пуск > Все программы > Adobe Web Premium CS3 > Adobe Flash CS3 Professional. Далее запускается экран в котором можно выбрать один из путей дальнейших действий. На этом экране для дальнейшей работы стоит выбрать Flash File (ActionScript 3.0), в скобках указана версия языка программирования который можно будет в дальнейшем использовать.

После выбора варианта Ваших дальнейших действий открывается интерфейс программы который состоит из следующих основных элементов: Сцена (Scene, иногда ее называют Стадией или монтажным столом). По умолчанию сцена находится в средине экрана и имеет белый цвет. В дальнейшем ее параметры можно будет изменять. В левой части окна находится панель инструментов рисования в которой находятся все основные инструменты рисования. Над сценой находится Timeline (панель времени), в нижней части окна находится панель свойств (Properties) в которой можно в дальнейшем найти свойства инструментов, кадров, сцены. В правой части

52

экрана находятся дополнительные встроенными объектами.

панели

для

работы

с

цветами,

В панели Timeline можно осуществить работу с кадрами (или ключевыми кадрами). Отличие простых кадров от ключевых заключается в том, что внутри кадров возможно только одинаковое содержимое, а в ключевых кадрах можно располагать независимое друг от друга содержимое. Как только Вы создаете новый документ в Timeline, в нем сразу отображается пустой ключевой кадр: . Как только Вы нарисуете некий объект на сцене, то ключевой кадр изменит свой вид и в нем появится черная точка: Таким образом, Вы можете всегда отличить заполненный ключевой кадр от пустого. На панели времени также находится отображение масштаба отображения содержимого на экране: Если нужного Вам процентного значения там не окажется, то это значение можно набрать с клавиатуры. Для того, чтобы изменить параметры проекта необходимо выбрать инструмент Selection Tool (v) – инструмент выделения объектов щелкнуть лкм по сцене.

53

и

Затем, в панели Properties можно поменять основные параметры проекта, для этого достаточно щелкнуть лкм по кнопке, расположенной за словом Size (размер), по умолчанию эта кнопкак имеет следующий вид: Если нажать на эту кнопку, то появится диалоговое окно Document Properties (свойства документа) в котором можно задать описание проекта, его линейные размеры (Dimensions), - width – высота, height (ширина). Единицы измерения автоматически подставляются в виде px (пикселы), если собираетесь делать баннер, то можно ограничить Вашу фантазию размером 550 на 10 пикселов. Кроме этих параметров можно выбрать Background color (цвет фона) – для этого необходимо один раз щелкнуть лкм по цветному квадратику левее этой после чего выпадет палитра среди цветов которой можно мжно фразы: выбрать цвет для Вашего проекта. Следующим параметром на который стоит обратить внимание – Frame rate (скорость кадров в секунду) – по умолчанию это значение равно 12 кадрам в секунду (fps), как правило, большее значение задается если необходима очень плавная анимация. Если данные значения параметров понадобятся более чем в одном проекте, то тогда можно нажать на кнопку Make Default (использовать данные настройки по умолчанию), при этом видимых изменений на сцене не произойдет, и только по нажатию на кнопку Ok Ваши изменения вступят в силу.

54

В случае, если нет желания так глубоко залезать в настройки проекта, . то можно просто заменить цвет фона в панели Properties Делается это аналогично описанному чуть выше способу. И можно поменять скорость кадров:

.

Создание флага Нарисуйте графический примитив в виде прямоугольника. При этом в 1кк появится черная точка.

Создайте второй кк.

Выберите Free Transform Tool , вариант модификации Envelope. По периметру появится набор дополнительных маркеров. Симметрично измените верхнюю и нижнюю стороны прямоугольника.

55

Перейдите на первый кк и в пункте Tween задайте Shape.

Проконтролируйте корректность анимации, сохраните и опубликуйте файл. Анимация заголовка Создайте новый файл размером 550 на 100. Выберите инструмент Text , задайте параметры шрифта (размер 48 или 36) в качестве типа Tool шрифта должно быть установлен Static Text (статичный текст)

Наберите текст, затем выберите инструмент Selection Tool , текст должен обвестись светло-голубой рамкой. С таким текстом анимация Shape работать не будет. Текст необходимо разбить на кривые. Для этого нажмите комбинацию клавиш Ctrl+B и текст разобьется по 56

буквам, затем повторите операцию Ctrl+B и текст разобьется по кривым, при этом текст будет выделен. Это видно по узору в виде сетки над текстом.

После этого выберите инструмент Paint Bucket Tool в качестве заливки – градиентную заливку и щелкните ведерком по первой букве текста. Центр заливки должен быть на первой букве.

Создайте второй кк.

В последнем кк щелкните ведерком по последней буксе Вашей фразы. Центр заливки станет на последней букве.

Вернитесь на первый кк.

В панели Properties

выберите Tween Shape

57

Проконтролируйте корректность анимации, сохраните и опубликуйте файл. Маска на заголовке Интересным вариантом анимации заголовка является использование масок слоя. Создайте новый файл 550 на 100 пикселов. При помощи наберите текст. Выберите инструмент Selection , затем скопируйте текст в буфер Tool обмена (Ctrl+c). Нажатием на кнопку (Insert Layer) в панели Timeline создайте слой, а затем еще один слой. Внешний вид панели Timeline будет аналогичен представленному рисунку. инструмента Text Tool

Перейдите в третий слой (щелкните лкм по кк в Layer 3)

Вставьте текст в те же координаты – Ctrl+Shift+v. После этого в первом кк верхнего слоя должна появиться белая точка на черном фоне, но на сцене изменений не должно быть видно.

58

Перейдите в первый кк второго слоя, выберите цвет, отличный от цвета текста и нарисуйте круг.

Oval Tool, задайте

После этого и в первом кк второго слоя должно появиться состояние заполненного кк.

Выберите Selection Tool всех слоях

и с его помощью выделите 25-е кадры во

Нажмите F6

Перейдите во второй кк второго слоя (Layer 2) и переместите круг таким образом, чтобы траектория его движения проходила через текст.

Перейдите в первый кк второго слоя, в панели Properties выберите Tween > Shape.

59

Щелкните правой клавишей мыши по названию третьего слоя (Layer 3) и выберите пункт Mask (маска). Проконтролируйте корректность анимации, сохраните и опубликуйте файл.

60

ЛИТЕРАТУРА 1. Байков В. Д. Интернет: поиск информации и продвижение сайтов. — СПб: БХВ-Петербург, 2000. — 288 с. 2. Белунцов В. Новейший самоучитель по созданию Web-страниц. — М.: ДЕСС КОМ, 2000. — 448 с. 3. Браун М., Ханикатт Д. HTML 3.2 в подлиннике. — СПб: BHV-СПб, 1998. — 1040 с. 4. Глушаков С. В., Ломотько Д. В., Мельников И. В. Работа в сети Internet: Учебный курс. — Харьков: Фолио; М.: АСТ, 2000. — 346 с. 5. Гончаров А. Самоучитель HTML. — СПб: Питер, 2000. — 240 с. 6. Денисов А., Вихарев И., Белов А. Интернет. Самоучитель. — СПб: Питер, 2000. — 464 с. 7. Дьяконов В. П. Internet. Настольная книга пользователя. — М.: Солон, 2000. — 640 с. 8. Жданов А., Исагулиев К. Macromedia Flash 4. Краткий курс. — СПб: Питер, 2000. — 416 с. 9. Кирсанов Д. Веб-дизайн. — СПб: Символ-Плюс, 1999. — 376 с. 10. Круг С., Блэк Р. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!». — СПб: Символ-Плюс, 2001. — 195 с. 11. Матросов А. В., Сергеев А. О., Чаунин М. П. HTML 4.0 в подлиннике. — СПб: БХВ-Петербург, 2000. — 672 с. 12. Нильсен Я. Веб-дизайн. — СПб: Символ-Плюс, 2000. — 450 с. 13. Соломенчук В. Интернет: краткий курс. — СПб: Питер, 2000. — 288 с. 14. Стразницкас М. Эффективная работа с Photoshop 5. — СПб: Питер, 1999. — 704 с. 15. Федорчук А. Как создаются Web-сайты: краткий курс. — СПб: Питер, 2000. — 224 с. 16. Фролов А. В., Фролов Г. В. Всемирная паутина. — М.: Русская Редакция, 2000. — 400 с. 17. Хольцнер С. Dynamic HTML: руководство разработчика. — К.: BHV, 2000. — 400 с. 18. Шафран Э. Создание Web-страниц: самоучитель. — СПб: Питер, 2001. — 320 с. 19. Якушина Е. В. INTERNET для школьников и начинающих пользователей. — М.: Аквариум, К.: ГИППВ, 2000. — 256 с. 20. Якушина Е. В. Изучаем INTERNET, создаем Web-страничку. — СПб: Питер, 2000. — 256 с.

61

Для заметок

62

Для заметок

63

Для заметок

64

Практикум по программе «Интернет-технологии для работников образования» Бобцов А.А., Бочков А.Л., Зинчик А.А., Меженин А.В., Николаев Д.Г., Штенников Д.Г. Учебное пособие В авторской редакции компьютерный набор и верстка А.В. Белозубов, Д.Г. Николаев, Д.Г. Штенников Редакционно-издательский отдел СПбГУ ИТМО Н.Ф. Гусарова Зав. РИО Лицензия ИД № 00408 от 05.11.99 Подписано к печати Тираж 400 экз. Заказ № Отпечатано на ризографе.