Создание интерактивного web-сайта: учебный курс. EUP.RU - Экономика и управление на предприятиях.

      Книга посвящена созданию web-сайта: его разработке, дизайну, верстке и публикации в Сети. В ней приводится описание работы с различными приложениями, которые используются при создании web-страниц. Основное внимание уделяется созданию интерактивных эффектов, не требующих написания серверных сценариев, а также описанию двух альтернативных технологий — JavaScript и Flash, с помощью которых можно «оживить» страницы своего сайта. Для удобства книга дополнена краткими справочниками по HTML, Flash, JavaScript и ActionScript, а также описанием ресурсов Интернета и новинок Flash MX.


      Содержание
      Выражение признательности
      Введение
      Предположения автора относительно своего читателя 1
      Что нас ждет
      От издательства
      Занятие 1.
      Спасение утопающих
      Интернет для каждого
      Интерактивность
      Серверы, предоставляющие бесплатный хостинг
      www.narod.ru
      www.geocities.com
      Инструменты создания Web
      HTML и JavaScript
      Flash
      Куда путь держим?
      Что нового мы узнали
      Занятие 2.
      О пользе бесплатного сыра
      Мастерская на www.narod.ru
      Главная страница
      Регистрация
      Мастерская
      Создание сайта
      Редактирование сайта
      Интерактивные элементы
      Под крылом www.geocities.com
      Регистрация
      Строительство сайта
      Редактирование сайта
      Добавление интерактивных элементов сайта
      www.spylog.ru и www.hotlog.ru
      www.thecounter.com
      Что нового мы узнали
      Занятие 3.
      Сам себя не похвалишь…
      Создание сайта на HTML
      Дизайн
      Навигация по сайту
      Подготовка текста
      Подготовка графики
      Еще раз о дизайне 6
      Создание элементов оформления
      Верстка
      Тестирование
      Размещение в Сети
      Учитесь в Сети
      Что нового мы узнали 85
      Занятие 4.
      Фильм на Flash
      Знакомство с Flash
      Рабочая среда Flash
      Сайт-фильм
      Слои
      Фон
      Рамка
      Логотип
      Меню
      Содержание
      Фотоальбом
      Растворение текста
      Эффект интерактивности
      ActionScript
      Задание собственной палитры во Flash
      Создание и настройка градиентов
      Запись на диск набора цветов
      Растровая заливка
      Изменение HTML-страницы
      Что нового мы узнали
      Занятие 5.
      Реклама — двигатель торговли
      Путешествия в Интернете
      Поисковые службы
      Раскрутка сайта
      Регистрация в поисковых системах и каталогах
      Обмен ссылками
      Службы обмена баннеpами
      Еще несколько советов
      Что такое баннер
      Малярное дело — тонкое
      Баннерные стандарты
      Меню
      Рисунок
      HTML-код
      Баннеры с JavaScript
      Бегущая строка
      Картинки-кнопки
      Анимированный текст во Flash
      Что нового мы узнали
      Занятие 6.
      К сожаленью, день рожденья…
      На этом занятии
      Электронные открытки
      Outlook Express
      Почта Netscape
      Открытка и согласованная анимация
      Рисуем паровоз
      Пейзаж, облака и дым из трубы
      Поздравления
      Открытка-сюрприз
      Работа с растровым изображением
      Рисуем яблоко
      Кнопка
      Рисуем дальше
      Руки и морфинг
      Что нового мы узнали
      Занятие 7.
      Славный праздник Новый год
      Сценарий
      Начало фильма
      Сцена Украшение
      Елочные шарики
      Серпантин
      Звезда
      Свечи
      Сцена Электросеть
      Сцена Темнота
      Сцена Распаковка
      Сцена Последняя
      Звук
      Что нового мы узнали
      Занятие 8.
      Семь раз отмерь
      На этом занятии
      Этапы работы
      Разработка общей концепции сайта
      Расскажите историю
      Частная собственность
      Идеология сайта
      Дизайн
      Идея
      Макет
      Цветовая гамма
      Выбор шрифтов
      Стиль
      Фреймы
      Что нового мы узнали
      Занятие 9.
      Один раз отрежь
      На этом занятии
      Структура сайта
      Навигация
      Кодировка
      Идеология документа
      Верстка
      Советы по верстке
      Тестирование
      Браузеры
      Количество цветов
      Разрешение экрана
      Поддержка текстовых браузеров
      Тестирование фильма
      Дизайнерские хитрости
      Тестирование сценариев JavaScript
      Размещение и обновление сайта
      Что нового мы узнали
      Занятие 10.
      И столяр, и плотник
      На этом занятии
      Подготовка текста
      Работа в Word
      Ввод специальных символов
      Графика в Сети
      Несколько советов
      Золотое сечение
      Форматы графических файлов
      Атрибут alt
      Размеры файлов
      Графический текст
      Графический текст во Flash
      Anti-aliasing
      Что нового мы узнали
      Занятие 11.
      Встречают по одежке
      На этом занятии
      Графические ссылки
      Нарезка изображений
      Изображения-карты (Image map)
      Метки на странице
      Создание ролика-заставки
      Простой индикатор загрузки
      Ноты
      Нотная строка
      Расположение нот и звук
      Индикация
      Замена и компрессия звука
      Создание заставки во Flash
      Символы капель
      Остальные символы
      Эффекты: интерактивные и не очень
      Интерактивные эффекты
      Полезные сценарии
      Создание часов
      Что нового мы узнали
      Занятие 12.
      Делу — время…
      На этом занятии
      Формы
      Тег
      Кнопки
      Картинка
      Текст
      Текстовое поле
      Флажок
      Переключатель
      Раскрывающийся список
      Отправка данных формы
      Пересылка данных формы между страницами
      Ссылка на e-mail
      Готовые формы и услуги
      Гостевые книги
      Чаты
      Опросы
      Рассылка
      Размещение информации с других сайтов
      Формы во Flash
      Текст и переменные . 281
      Использование внешних данных 289
      Меню 298
      Ссылка на web-страницу и e-mail
      Обмен данными между Flash и JavaScript
      Что нового мы узнали
      Занятие 13.
      Что наша жизнь? — Игра
      На этом занятии
      Создание игры на JavaScript
      Принцесса или тигр?
      Ловля в паутине
      Создание простой аркадной игры на Flash
      Лабиринт
      Клипы
      Тестирование
      Замена указателя мыши
      Что нового мы узнали
      Занятие 14.
      Итого
      На этом занятии
      Виртуальный мир
      Белый лист
      HTML и JavaScript
      Flash 346
      Cайт или фильм?
      HTML
      JavaScript
      Flash
      Что нового мы узнали
      Приложение 1.
      Ресурсы Интернета
      Бесплатный хостинг
      Другие бесплатные ресурсы
      Учебники, руководства, статьи, форумы
      Flash
      HTML
      JavaScript
      Приложение 2.
      HTML 4
      Объявления в документе
      Описание структуры HTML-документа
      Заголовок документа
      Фреймы
      Сценарии
      Изображения-карты
      Тело документа
      Текстовые блоки и глобальная структура документа
      Выделение частей текста
      Управление шрифтами 372
      Дополнительные теги форматирования текста
      Списки
      Встроенные объекты
      Таблицы
      Формы
      Нестандартные теги
      Стандартные атрибуты
      Стандартные цвета
      Приложение 3.
      JavaScript
      Объекты JavaScript, их методы и свойства
      Функции и свойства верхнего уровня
      Операторы JavaScript
      Объекты HTML
      Работа с разными браузерами
      Приложение 4.
      Flash
      Меню
      Панели
      Инструменты и модификаторы
      Приложение 5.
      ActionScript
      Основные действия (Actions)
      Операторы (Operators)
      Побитовые операторы (Bitwise Operators)
      Операторы присваивания (Compound Assignment)
      Строковые операторы (String Operators)
      Функции (Functions)
      Строковые функции (String Function)
      Свойства (Properties)
      Объекты (Objects)
      Массивы (Array)
      Логические выражения (Boolean)
      Цвет (Color)
      Дата (Date)
      Клавиатура (Key)
      Математические функции (Math)
      Мышь (Mouse)
      Клипы (MovieClip)
      Числа (Number)
      Объекты (Object)
      Выделение (Selection)
      Звук (Sound)
      Строковые выражения (String)
      XML
      XMLSocket
      Другие действия
      Приложение 6.
      Новые возможности Flash MX
      Разработчики и дизайнеры
      Совместимость
      Инструменты
      Панели
      Панель Properties (Свойства)
      Новое — еще не забытое старое
      Actions (Действия)
      Reference (Справка)
      Debugger (Отладчик)
      Accessibility (Специальные возможности)
      ActionScript
      FScrollBar
      Прочее
      Толковый словарик Интернета
      Литература
      Алфавитный указатель




      ОТРЫВОК


      Занятие 13
      Что наша жизнь? — Игра
      Лети же сюда,
      С тобой поиграем вместе,
      Воробышек-сирота.
      Кобаяси Исса
      На этом занятии
      У меня за окном вдруг наступило лето — после долгой холодной весны все расцвело, выпустило листья. Там, где еще недавно лежал снег, отцветают одуванчики, распустились ландыши и сирень… Настроение — абсолютно не рабочее, тянет на какие-то подвиги: прокатиться куда-нибудь далеко на велосипеде, сплавать на байдарке. Так что и на нашем занятии мы перед заключительным рывком немного отдохнем или, точнее сказать, дадим отдохнуть другим — посетителям вашего будущего сайта. Сегодня речь пойдет об играх — простеньких компьютерных играх, дающих возможность рассл
      абиться в течение трудового дня. Это занятие будет скорее закреплением пройденного материала. На нем мы повторим:
      как сделать бегущую строку на JavaScript и организовать передачу данных между страницами;
      как программно передвинуть и дублировать клип во Flash;
      как обрабатывать событие нажатия определенной клавиши на клавиатуре.
      Вспомнив все это, мы достаточно простыми средствами сможем сконструировать игру, которая поможет немного отвлечься посетителям вашего сайта, а вам добавит опыта в создании web-страниц.
      Создание игры на JavaScript
      Начнем мы с простой логической игры, навеянной книжкой «Принцесса или тигр?», которую когда-то давно мне вручили за победу на очередной математической олимпиаде. Собственно, этому вопросу и будет посвящена игра.
      Принцесса или тигр?
      В качестве прелюдии — небольшая цитата.
      У Фрэнка Стоктона есть сказка, которая называется «Принцесса или тигр?». В этой сказке один узник должен угадать, в какой из двух комнат находится принцесса, а в какой — тигр. Если он укажет на первую комнату, то женится на принцессе, если на вторую, то его (вполне возможно) растерзает тигр.
      В некотором царстве правил король. Однажды он тоже прочитал эту сказку.
      — В самый раз для моих заключенных! — сказал он своему министру. — Только я не хочу полагаться на случайности. Пусть на дверях каждой комнаты повесят по табличке, а заключенному будет кое-что сказано о них. Если узник не дурак и способен рассуждать логически, он сумеет сохранить себе жизнь и в придачу заполучить прелестную невесту.
      — Блестящая идея, ваше величество! — согласился министр.
      Это была прелюдия. А задачка, которую предстояло решить первому узнику, была вот какая. На двух дверях висели таблички:

      I II
      В этой комнате находится принцесса,
      а в другой сидит тигр В одной из этих комнат находится принцесса; кроме того, в одной из этих комнат сидит тигр
      Еще словоохотливый король добавил, что на одной из табличек написана правда, а на другой — нет.
      Кодирование
      С основой игры мы познакомились, осталось претворить идею в жизнь в виде страницы HTML. Что нам понадобится? На первой странице поместим введение — обычный текст, предваряющий задачку. На нем будет стоять ссылка на страницу с текстом первой задачи (рис. 13.1). Под рисунками дверей (элементы типа image в форме) в таблице будет помещен текст надписей, а сверху будут идти слова короля. Если вы хотите, то можете придать странице средневековый дизайн, поместив все на изображение замка или просто на мозаику из серых булыжников. При щелчке на двери сработает ссылка, указа
      нная в атрибуте action, а на странице-получателе сценарий, скрытый от глаз простого смертного, обработает координаты щелчка и выдаст результат — правильный дан ответ или нет.
      Страница-отправитель
      Для практики использования различных программ верстки HTML-документов на этот раз мы воспользуемся FrontPage Express — программой, входящей в состав Internet Explorer.
      1. Если вы полностью установили пакет для работы с Интернетом, входящий в стандартную поставку Windows, выберите в Главном меню пункт Start>Programs>Internet Explorer>FrontPage Express (Пуск>Программы>Internet Explorer>FrontPage Express). В открывшемся окне FrontPage Express выберите Файл>Создать, а в открывшемся диалоговом окне — Обычная страница и OK.
      2. В новом файле выберите команду Таблица>Вставить таблицу. Задайте параметры таблицы: 6 строк и 1 столбец.
      Верхняя ячейка будет служить своеобразным логотипом страниц с задачами. Мы поместим на нее в качестве фона рисунок зубцов на стене. Если вы решили, что фоном будет кирпичная кладка, то надо указать в качестве фона таблицы файл с изображением. Можно не указывать файл фона, а сделать фон всей страницы, например, черным. Для того чтобы изменить свойства страницы или таблицы, нажмите правую кнопку и выберите соответствующую команду.

      СОВЕТ
      Основная проблема дизайна, связанная с выбором рисунка или фона, заключается в том, что если задать размер таблицы жестко, то при большом разрешении сбоку будет виден фон страницы, а если ширину ячеек указывать в процентном отношении, то сложно будет управлять размещением текста.

      3. В свойствах страницы необходимо указать кодировку для сохранения и отображения: Кириллица (реально это будет windows-1251). Также в свойствах ячейки следует указать ширину в процентах, равную 100.
      4. Щелкнем на верхней ячейке правой кнопкой и выберем команду Свойства ячейки. В диалоговом окне установим флажок Использовать фоновое изображение и, нажав кнопку Обзор, найдем нужный графический файл. Если файла пока нет, можете выбрать для примера любой GIF-файл, по ширине кратный 760 пикселам.

      ПРИМЕЧАНИЕ
      Мы будем ориентироваться на разрешение экрана 800
      ·600. Реальная ширина окна при таком разрешении составляет примерно 760 пикселов.

      5. Следующая ячейка будет пустой: она будет служить для отделения картинки от текста. Ее ширина тоже составляет 100 % от ширины окна. Для этой ячейки необходимо задать и высоту. Для этого надо нажать кнопку Дополнительно, а затем — Добавить, и в поля открывшегося диалогового окна внести атрибут и его значение: height и 5.
      6. Третья ячейка будет содержать основной текст. В нее просто надо вставить текст задачи.
      7. Четвертую ячейку необходимо сначала разбить на два столбца, задав каждому ширину в 50 % (Таблица>Разбить ячейки). Эти хитрости с разбиением нужны для вычисления, на какой двери был сделан щелчок мышью.
      8. Теперь в каждую половинную ячейку надо вставить таблицу, также состоящую из двух столбцов. В центральные ячейки строки необходимо вставить рисунок двери командой Вставка>Изображение. Потом мы вставим тег формы, чтобы браузер автоматически обработал координаты щелчка.
      9. В крайние ячейки необходимо вставить текст табличек-подписей, указав этим ячейкам отдельный фон или фоновое изображение. Цвет можете выбрать любой — исправите потом при редактировании кода. Для задания произвольного цвета выберите из списка пункт Специальный.
      10. Следующая ячейка также будет служить разделителем текста и рисунков и будет выполнена так же, как и вторая, только фон у нее будет уже другой — зеленая трава или по-другому развернутые камни мостовой.
      11. Последняя ячейка, также с зеленой травкой в качестве фона, будет содержать заключительный текст. Страница готова. Сохраним ее, дав команду Сохранить как>Как файл.
      Теперь откроем файл в обычном текстовом редакторе (например, в Блокноте) и посмотрим, какой же код написал FrontPage Express.

      СОВЕТ
      Можно редактировать HTML-код и не выходя из FrontPage Express. Достаточно выбрать команду Вид>HTML.

      У меня получилось примерно следующий код (листинг 13.1).
      Листинг 13.1. Код страницы, сгенерированный FrontPage Express


            content="text/html; charset=windows-1251">

      Обычная страница без названия

            background="Ваш_URL/block.gif">

background="Ваш_URL/tooth.gif" heigt="100">

- А что, если в обеих комнатах сидят тигры? — спросил узник. - Что же мне тогда-то делать? - Считай, не повезло, — ответил король. - А если в обеих комнатах окажется по красавице? - поинтересовался узник. - Считай, подфартило, — сказал король. — Уж это ты и сам бы мог сообразить! - Ну, хорошо, а если в одной комнате принцесса, а в другую посадили тигра, что тогда? — не успокаивался узник. - Вот тут-то уже все зависит от тебя! Не так ли? - Да откуда же мне знать, где кто? — сокрушенно вздохнул узник. Тут король указал на таблички, прикрепленные к дверям каждой из комнат. На них было написано:
border="0" cellpadding="0" cellspacing="0">
В этой комнате находится принцесса, а в другой комнате сидит тигр	src="Ваш_URL/image/door.gif" width="200" height="250">

border="0" cellpadding="0" cellspacing="0">

src="Ваш_URL/door.gif"
width="250" height="235">

В одной из этих
                      комнат находится
                      принцесса; кроме того, в
                      одной из этих комнат сидит
                      тигр

- На одной — правда, -
отвечал король, — на другой
— нет.

background="image/tooth.gif" height="100">

— А что, если в обеих комнатах сидят тигры? — спросил узник. — Что же мне тогда-то делать? — Считай, не повезло, — ответил король. — А если в обеих комнатах окажется по красавице? — поинтересовался узник. — Считай, подфартило, — сказал король. — Уж это ты и сам бы мог сообразить! — Ну, хорошо, а если в одной комнате принцесса, а в другую посадили тигра, что тогда? — не успокаивался узник. — Вот тут-то уже все зависит от тебя! Не так ли? — Да откуда же мне знать, где кто? — сокрушенно вздохнул узник. Тут король указал на таблички, прикрепленные к дверям каждой из комнат. На них было написано:
border="0" cellpadding="0" cellspacing="0">
В этой комнате находится принцесса, а в другой комнате сидит тигр	width="200" height="250" alt="Door I" border="0">