- •Фгбоу впо «Башкирский государственный педагогический университет
- •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. Массивы
Лабораторная работа № 7 Тема «Использование Flash-технологий для создания Web-сайтов»
Упражнение 1 Превращение одного слова в другое
Создаем новый файл (File, New)
С помощью инструмента Text Tool создаем произвольную надпись, меняем цвет заливки, размеры, тип шрифта и т.д. (меню Text).
Можно менять параметры текста в окне Text Options(Window, Panels, Text Options).
Основное отличие Flash от остальных графических редакторов при работе с текстом, заключается в том, что есть два разных состояния текста. Текст сам по себе, т.е. просто текстовый блок, всегда доступный для редактирования, работы с языком сценариев (ActionScript) и имеющий ограниченные возможности для визуального оформления - изменение размера, цвета и наклона. И второе состояние текста, в котором по сути дела мы имеем отношение не с самим текстом, а с его графическим представлением - "разбитый текст".
Выделим созданный текст с помощью инструмента Arrow(чёрная стрелка).
Разобъем текст по буквам Modify / Break Apart [Ctrl+B].
Преобразуем буквы в графику Modify / Break Apart [Ctrl+B].
Зададим на таймелане пустой ключевой кадр, например 60 (см. рис.)
Для этого выделим 60 кадр, меню Inseart, Blank KeyFrame (F7).
Создадим другую произвольную надпись и разобьем ее (пп. 4,5).
Щелкнем правой кнопкой на первом кадре таймелайна. Проверим активизировано ли окно Frame (Panels, Frame). Найдем на нем вкладку Frame, В поле Tweening выберем Shape (превращение), зададим параметр Blend - Distributive (плавно) или Angular (жестко). При этом первые 60 кадров должны окрасится в зеленоватый цвет.
Просмотрим получившийся ролик (Control, Test movie).Ctrl+Enter
Чтобы зафиксировать на экране последнее слово, добавим в 90-м кадре еще один пустой управляющий кадр (F7). Снова посмотрим получившийся ролик.
При необходимости зададим высоту и ширину ролика (Modify, Movie). (Изменение-документ)
Преобразуем Flash-ролик в HTML-документ. Задаем нужные установки (File, Publish Setting, вкладка HTML, при необходимости меняем параметры, особенно расположение файла) и непосредственно преобразуем (Файл-опубликовать параметры).
Для просмотра HTML-документа выбрать File, Publish Preview, HTML.
Задания для самостоятельной работы
Создайте ролик по превращению слова «INTERNET» (шрифт Arial, размер 12, красный цвет, курсив) в слово «ИНТЕРНЕТ» (шрифт Courier New Cyr, размер 32, синий цвет, полужирный шрифт).
Создайте ролик по превращению многоуголника в овал.
Упражнение 2.1 Движение объекта из библиотеки
Создадим новый файл.
Откроем библиотеку символов (Windows, Common Library, Graphics). В случае отсутствия библиотеки или графических объектов в ней выполняем Упражнение 2.2.
Перенесём символ «Mouse» на холст.
Создадим управляющий движением слой (Insert, Create Motion Tween);
Щелкнем в 30-м кадре – вставим управляющий кадр (Insert KeyFrame (F6)). Все 30 кадров при этом закрасятся в голубоватый цвет.
В 30-м кадре произведем изменения символа – с помощью инструмента черная стрелка (Arrow Tools) в ее опциях выберем вращение (Rotate), изменение размера (Scale) и перенесём символ в другую часть холста.
Просмотрим получившийся мини клип – Control, Play.
Упражнение 2. 2. Движение графического объекта
Создадим новый файл.
Нарисуем круг.
Выделим его с помощью инструмента черная стрелка (Arrow Tools) и преобразуем его в графический объект (Изменение-преобразование в значок – F8).
Создадим управляющий движением слой (Insert, Create Motion Tween);
Щелкнем в 30-м кадре – вставим управляющий кадр (Insert KeyFrame (F6)). Все 30 кадров при этом закрасятся в голубоватый цвет.
В 30-м кадре произведем изменения объекта – с помощью инструмента черная стрелка (Arrow Tools) в ее опциях выберем вращение (Rotate), изменение размера (Scale) и перенесём объект в другую часть холста.
Просмотрим получившийся мини клип – Control, Play.
Упражнение 3 Работа со слоями
Создадим новый файл.
Выберем инструмент карандаш, в опциях этого инструмента (в самом низу окна инструментов) выберем Smooth (плавные линии) и нарисуем рыбку.
Выделим его с помощью инструмента черная стрелка (Arrow Tools) и преобразуем его в графический объект (Изменение-преобразование в значок – F8). Появится окно, в котором необходимо указать имя символа и его тип: Graphic - графический символ, Button - кнопка, Movie clip - анимированный символ. В нашем случае это Graphic.
Создадим управляющий движением слой (Insert, Create Motion Tween);
Щелкнем в 50-м кадре – вставим управляющий кадр (Insert KeyFrame (F6)). Все 30 кадров при этом закрасятся в голубоватый цвет.
В 30-м кадре произведем изменения объекта – с помощью инструмента черная стрелка (Arrow Tools) в ее опциях выберем вращение (Rotate), изменение размера (Scale) и перенесём объект в другую часть холста.
Вставим новый слой (Insert, Layer).
Мышкой перенесём появившийся в списке слоёв Layer 2 под слой Layer1.
C помощью специальных кнопок (и) скроем 1-ый слой и защитим его от изменений
Нарисуем во 2-ом слое водоросли и дно с камушками.
Добавим новый слой «Аквариум»( Insert, Layer) и перенесём его под предыдущие два слоя.
C помощью специальных кнопок (и) скроем 2-ой слой и защитим его от изменений.
Нарисуем аквариум.
Покажем и откроем для изменений предыдущие слои (кнопки и).
Просмотрим получившийся мини клип – Control, Play.