- •Фгбоу впо «Башкирский государственный педагогический университет
- •2. Требования к уровню освоения содержания дисциплины «Технологии Internet (Web-мастерство)»
- •3. Объем дисциплины «Технологии Internet (Web-мастерство)» и виды учебной работы
- •4. Содержание дисциплины «Технологии Internet (Web-мастерство)»
- •4.1. Разделы дисциплины и виды занятий
- •4.2.Содержание разделов дисциплины «Технологии Internet (Web-мастерство)»
- •5. Учебно-методическое обеспечение дисциплины
- •6.5. Система подготовки материалов и методических разработок
- •7. Содержание итогового и промежуточного контроля
- •7.1. Перечень примерных контрольных вопросов и заданий для самостоятельной работы
- •7.2 Теоретические вопросы к зачету.
- •Практические задания
- •8. Методические рекомендации по организации изучения дисциплины
- •8.1. Методические рекомендации для преподавателей
- •9.Учебная практика по дисциплине «Технологии Internet (Web-мастерство)» не предусмотрена.
- •2.1. Конспекты лекций по дисциплине «Технологии Internet (Web-мастерство)»
- •2.1. Язык гипертекстовой разметки html.
- •2.1.1. Основные теги.
- •Комментарии
- •Общий вид html-документа
- •2.1.2. Обычный текст или абзац
- •Обычный текст или абзац в сеpедине стpоки
- •2.1.3. Ссылки
- •Ссылки на главы дpугих документов
- •2.1.4. Списки
- •Ненумеpованный список
- •Нумеpованный список
- •2.1.5. Физические стили
- •Наложение различных стилей
- •2.1.6. Рисунки
- •Составные картинки
- •Элемент map
- •2.1.7. Таблицы
- •2.1.8. Формы html
- •Атрибут checkbox
- •Атрибут image
- •Атрибут password
- •Атрибут radio
- •Атрибут reset
- •Атрибут select
- •Атрибут submit
- •Атрибут textarea
- •2.1.9. Фpеймы
- •3.1. Базовый синтаксис css
- •3.3. Применение свойства цвета.
- •Свойство 'background-color'
- •3.4. Фоновые изображения [background-image]
- •3.5. Семейство шрифта [font-family]
- •3.6. Боксовая модель
- •Боксовая модель в css
- •3.7.Принципы css-позиционирования
- •Абсолютное позиционирование
- •Относительное позиционирование
- •4.1. Цвет и форма.
- •4.2. Модульная сетка в дизайне.
- •4.3. Типы сайтов. Модели организации сайта.
- •4.3.1. Линейная организация
- •4.3.2. Решетка
- •4.3.3. Иерархия
- •4.3.4. Паутина
- •5.1. Теория навигации
- •5.1.1 Размещение элементов навигации
- •5.1.2. Правила навигации
- •5.1.3. Основные приемы создания ссылок
- •5.2. Программы для создания web-страниц
- •6.1. Изображения в Интернет: технологии gif, jpeg, png, Flash.
- •6.1.1. Форматы изображений
- •6.1.2. Формат gif
- •6.1.3. Формат jpeg
- •6.1.4. Формат png
- •6.1.6. Другие форматы изображений
- •6.2. Анимация
- •6.3. Звук
- •6.4 Видео
- •7.1. Технологии программирования
- •7.2. Программирование на стороне клиента
- •7.2. Синтаксис языка JavaScript и основы программирования на нем
- •8.1. Технологии, работающие на стороне сервера
- •8.2. Сценарии на стороне сервера
- •8.3. Технологии создания интерактивных страниц: asp, php, ssi
- •8.4. Серверные программные интерфейсы приложений
- •8.4. Сетевые и сопутствующие протоколы
- •8.4.3. Адресация: url/uri/urn/urc
- •9.4 Работа с формами
- •9.5. Рнр: выборочная загрузка
- •9.6 Рнр: гостевая книга
- •10.1. Базовая модель Web-процесса
- •10.2. Планирование сайта
- •I определение цели
- •2. Определение аудитории
- •3. Профилирование пользователей
- •4. Требования к сайту
- •II план сайта
- •III разработка дизайна
- •Логотип
- •Навигатор по сайту
- •IV создание пробного сайта
- •V тестирование
- •10.3 Публикация и продвижение сайта
- •Упражнение 2 – создание списка
- •Упражнение 3 - вставка рисунка
- •Упражнение 4 – гиперссылки
- •Лабораторная работа № 2 Создание home page средствами Notepad (папка web)
- •Последовательность выполнения работы
- •Лабораторная работа № 3
- •Сведения о пользователе
- •Лабораторная работа № 4 Создание домашней странички (папка web)
- •Лабораторная работа № 5 JavaScript
- •Лабораторная работа № 6 JavaScript Создание и обработка форм в электронных документах, их назначение.
- •Лабораторная работа № 7 Тема «Использование Flash-технологий для создания Web-сайтов»
- •Задания для самостоятельной работы
- •Упражнение 4 Создание анимационного ролика «Шарик летит по улице города»
- •Упражнение 6 Создание собственных кнопок
- •Задания для самостоятельной работы
- •Лабораторная работа № 8. Создание web-сайта средствами редактора Dreamweaver (папка web-6)
- •5 Проверить корректность работы файла стилей!
- •Лабораторная работа №9 по технологиям Internet.
- •Лабораторная работа 10. Введение в язык php
- •Лабораторная работа 11. Обработка данных форм
- •Лабораторная работа 12. Массивы
Упражнение 4 Создание анимационного ролика «Шарик летит по улице города»
Создадим новый файл.
Нарисуем овал, закрасим его – это наш шарик. Выберем инструмент карандаш, в опциях этого инструмента (в самом низу окна инструментов) выберем Smooth (плавные линии) и пририсуем к шарику нить.
Выделим полученное изображение (инструмент белая стрелка - Subselect Tool). При этом все нарисованное выделится.
Преобразуем нарисованный шарик объект в символ Insert / Convert to Symbol [F8]. Появится окно, в котором необходимо указать имя символа и его тип: Graphic - графический символ, Button - кнопка, Movie clip - анимированный символ. Для нашего случая это должен быть анимированный символ. Символ при этом заносится в библиотеку символов.
Удалим объект-шарик с холста.
Откроем библиотеку символов (Windows, Library). Найдем созданный нами символ и двойным щелчком вызовем его для редактирования.
Создадим небольшой клип – покачивающийся из стороны в сторону шарик.
Щелкнем в первом кадре таймелана, Создадим управляющий движением слой (Insert, Create Motion Tween);
Щелкнем в 10-м кадре – вставим управляющий кадр (Insert KeyFrame (F6)). Все 10 кадров при этом закрасятся в голубоватый цвет.
В 10-м кадре произведем изменения символа – с помощью инструмента черная стрелка (Arrow Tools) в ее опциях выберем вращение (Rotate) немного наклоним шарик влево, эмитируя покачивание шарика.
Щелкнем в 20-м кадре – вставим управляющий кадр (Insert KeyFrame (F6)).
В 20- кадре произведем изменения символа –немного наклоним шарик вправо, эмитируя покачивание шарика.
Просмотрим получившийся мини клип – Control, Play.
Следующим шагом будет вставка этого анимированного символа в полноценный клип.
В основом окне (scene1) в первом кадре таймелана создадим управляющий движением слой (Insert, Create Motion Tween);
Щелкнем в 60-м кадре – вставим управляющий кадр (Insert KeyFrame (F6)). Все 60 кадров при этом закрасятся в голубоватый цвет.
В 60-м кадре произведем изменения символа – с помощью инструмента черная стрелка (Arrow Tools) в ее опциях выберем изменение размеров (Scale) уменьшим шарик, эмитируя его удаление и перетащим в другую часть холста. Просмотрим получившийся мини клип – Control, Play.
Следующим шагом зададим траекторию движения.
Вставим управляющий траекторией движения слой (Insert, Motion Guide), при этом появится новый слой;
Щелкнем по первому кадру слоя Guide Lauer (кнопка Add Motion Guide). С помощью инструмента карандаш нарисуем предполагаемую траекторию движения шарика. Просмотрим получившийся мини клип – Control, Play.
Добавим новый слой Insert, Layuer. Этот слой будет фоном – фотографией города.
Щелкнем в первом кадре слоя фона;
В ставим изображение города –. File, Import, …
Перетащим слой фона за слой с изображением шарика.
Просмотрим получившийся ролик (Control, Test movie).
Упражнение 5 Создание кнопочного меню.
Основное отличие кнопок состоит в том, что они предназначены для реагирования на действия пользователя, например нажатия на саму кнопку, ее клавишный аналог или активную область в фильме. Timeline кнопки содержит всего четыре кадра: Up - обычное состояние кнопки. Over - изменение кнопки при нахождении над ней мыши. Down - нажатая кнопка. Hit - задание области реагирования.
Если у вас будет несколько одинаковых кнопок, достаточно создать только один образец кнопки, накладывая на него необходимые надписи, меняя цвет или размер экземпляров. Если предполагается, что на кнопках будут анимированные объекты, создайте заранее символы Movie clip, а затем просто разместите их в соответствующем кадре кнопки.
Создадим новый файл.
Выберем кнопку из библиотеки Flash (Window,Common Library, Buttons) и перетянем ее на холст. Если дважды щелкнуть по изображению кнопки в библиотеке, перейдя к ее редактированию, то можно увидеть, как она строится.
Перейдём в сцену1 (Scene1)
Щелкнем правой кнопкой мыши по изображению кнопки на холсте, во всплывающем меню выберем Actions. Flash может предложить следующие типы основных действий (Basic Action): Go To - переход к заданной сцене или кадру. Play - запуск остановленного фильма. Stop - остановка фильма. Toggle High Quality - переключатель качества отображения фильма (режим сглаживания). Stop All Sounds - выключение звука. Get URL - переход по указанному адресу. FS Command - передача проигрывания фильма другим приложениям. Load/Unload Movie - простейший вариант использования данной команды, это загрузка фильма с указанного адреса. Tell Target - выбор фильма для дальнейшего управления (задание цели). If Frame Is Loaded - выполнение команды в случае загрузки указанного кадра. If - проверка на истинность. Loop - цикл. Call - вызов. Set Property - задание свойств фильма. Set Variable - значение переменной. Duplicate/Remove Movie Clip - создание или удаление экземпляра клипа Drag Movie Clip - включает режим перетаскивание клипа Trace - вывод сообщений при выполнении действий Comment - комментарии.
В поле Actions напишем скрипт
on(press){getURL("str1.htm", "_blank")}
укажем URL страницы, которая должна вызываться по нажатию на кнопку и тип окна (новое, тоже и т.д.) куда будет выводиться страница.
На кнопке можно разместить поясняющий текст, а, создав несколько кнопок, получим меню. Если сохранить этот ролик как HTML-страницу, то можно использовать ее код для формирования общего дизайна сайта.