- •1 Цель работы
- •2 Пояснение к работе
- •Подстановки
- •2.2 Перечень используемого оборудования
- •3 Задание
- •Вариант 1
- •Вариант 2
- •Вариант 3
- •Вариант 4
- •Вариант 5
- •4 Контрольные вопросы
- •5 Содержание отчета
- •5.2 Цель работы
- •6 Список литературы
- •Практическое занятие 2 «Разметка и эскиз web-страницы тегами html»
- •2 Пояснение к работе
- •2.1 Краткие теоретические сведения
- •1. Общая структура
- •2. Атрибуты
- •3. Регистр записи команд
- •4. Escape-последовательности (подстановки)
- •5. Перевод строки, пробелы, табуляция
- •6. Комментарии
- •7. Общие рекомендации
- •8. Цветовые спецификации
- •9. Базовые теги разметки гипертекста
- •12. Заголовки
- •2.2 Перечень используемого оборудования
- •3 Задание
- •4 Контрольные вопросы
- •5 Содержание отчета
- •5.2 Цель работы
- •6 Список литературы
- •Практическое занятие 3 «Создание web-сайта с тремя html-страницами»
- •2. Задание
- •3 Контрольные вопросы
- •4 Содержание отчета
- •4.2 Цель работы
- •5 Список литературы
- •Практическое занятие 4 «Создание web-страницы с использованием таблиц»
- •2. Задание
- •2.1 Размещение таблиц на html-странице. Форматирование текста в таблице
- •В таблице могут использоваться следующие способы выравнивания:
- •2.2 Размещение таблиц на html-странице. Форматирование ячеек таблицы
- •Форматирование заднего фона таблиц, рядов и ячеек:
- •2.3 Размещение таблиц на html-странице. Объединение ячеек таблицы
- •Объединение ячеек таблицы:
- •3 Контрольные вопросы
- •4 Содержание отчета
- •4.2 Цель работы
- •5 Список литературы
- •Практическое занятие 5 «Дополнительные элементы языка html для форматирования web-страниц»
- •2. Задание
- •Коллекция горизонтальных линий
- •Escape-поcледовательности
- •Физические и логические стили
- •3 Контрольные вопросы
- •4 Содержание отчета
- •4.2 Цель работы
- •5 Список литературы
- •Практическое занятие 6 «Отправка данных с использованием форм. Создание формы на html-странице»
- •2. Краткие теоретические сведения
- •5.2 Цель работы
- •Практическое занятие 7 «Форматирование web-страниц с использованием таблиц стилей. Создание каскадных листов стилей (css)»
- •2.1 Краткие теоретические сведения
- •1. Семейства шрифтов font-family
- •4. Оформление текста text-decoration. Значения: подчеркивание (underline), надчеркивание (overline), зачеркивание (line-through), нет подчеркивания (попе).
- •1. Цвет элемента color — цвет элемента в модели rgb или по стандартным названиям цветов.
- •Отступы.
- •1. Выравнивание text-align — выравнивание абзаца относительно страницы или ячейки таблицы. Значения: по левому краю (left), по центру (center), по правому краю (right), по ширине (justify).
- •5.2 Цель работы
- •Практическое занятие 8 «Подготовка и оптимизация графики для web-страниц»
- •1 Цель работы
- •2 Пояснение к работе
- •2.1 Краткие теоретические сведения
- •5.2 Цель работы
- •Практическое занятие 9 «Создание баннера для web-страницы»
- •1 Цель работы
- •2 Пояснение к работе
- •2.1 Краткие теоретические сведения
- •Варианты заданий
- •Практическое занятие 10 «Создание gif-анимации»
- •Практическое занятие 11 «Создание простейшей анимации в программе Micromedia Flash»
- •2.2 Перечень используемого оборудования
- •3 Задание
- •Простейшая анимация
- •Дополнительные кадры анимации
- •Анимация размеров клипа
- •Создание анимации имитирующие приближение локомотива к зрителю
- •Настойка плавности анимации
- •Применение цветового эффекта
- •Анимация фильтра Glow (Свечение) и его настройка
- •Применение фильтра Blur (Размытие)
- •Озвучивание анимации
- •4 Контрольные вопросы
- •5 Содержание отчета
- •5.2 Цель работы
- •6 Список литературы
- •Практическое занятие 12 «Анимация с использование готовых анимационных эффектов в программе Micromedia Flash»
- •1 Цель работы
- •2 Пояснение к работе
- •2.1 Краткие теоретические сведения
- •5.2 Цель работы
- •Практическое занятие 13 «Создание web-страницы с использованием таблиц»
- •1 Цель работы
- •2 Пояснение к работе
- •2.1 Краткие теоретические сведения
- •5.2 Цель работы
- •Практическое занятие 14 «Создание сайта в программе Macromedia Dreamweaver»
- •1 Цель работы
- •2 Пояснение к работе
- •2.1 Краткие теоретические сведения Основные этапы разработки сайта
- •Типовые виды сайтов
- •2.2 Перечень используемого оборудования
- •3 Задание Вариант 1
- •Вариант 2
- •4 Контрольные вопросы
- •5 Содержание отчета
- •5.2 Цель работы
- •6 Список литературы
3 Контрольные вопросы
3.1 Что такое Escape-последовательности?
3.2 Какие параметры тега горизонтальная линия вы знаете?
3.3 Какие вы знаете физические и логические стили?
4 Содержание отчета
4.1 Наименование работы
4.2 Цель работы
4.3 Задание
4.4 Выводы по работе
4.5 Ответы на контрольные вопросы
5 Список литературы
5.1 Дунаев В.В. Сам себе Web-дизайнер. – СПб.: БХВ – Петербург; Арлит, 2002
5.2 Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. – СПб: Символ-Плюс, 2004.
5.3 Клонингер К. Свежие стили Web-дизайна: как сделать из вашего сайта «конфетку»: Пер с англ. – М.: ДМК Пресс, 2005
Практическое занятие 6 «Отправка данных с использованием форм. Создание формы на html-странице»
1. Цель работы: Научиться создавать формы.
2. Краткие теоретические сведения
Тег <FORM> используется для создания форма на web-странице. Форма служат для отправки данных на сервер и обеспечивают диалог пользователя с приложением. Для отправки формы на сервер обычно используется кнопка, созданная при помощи тега <BUTTON> или <INPUT>, иногда этого же можно добиться, если нажать клавишу <Enter>, находясь в одном из полей данных формы. Когда форма отправляется на сервер, управление данными передается CGI-программе или документу, определенному параметром action тега <FORM>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега <INPUT>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать вид: http://webcreature.ru/index.php?user=Alex&button=activate Все параметры в адресной строке в этом случае, перечисляются послезнака "?", а символ "&" служит для них связкой.
Пример:
<form name="test_form_name" id="test_form_id" method="get" action="?"> <input type="hidden" name="hidden_name" id="hidden_id" value="hidden" /><br/> <input type="text" name="text_name" id="text_id" value="text" /><br/> <input type="password" name="password_name" id="password_id" value="password" /><br/> <input type="radio" name="radio_group_1" id="radio_id_1" value="radio_1" /> <input type="radio" name="radio_group_1" id="radio_id_2" value="radio_2" /> <input type="radio" name="radio_group_1" id="radio_id_3" value="radio_3" /><br/> <input type="radio" name="radio_group_2" id="radio_id_a" value="radio_a" /> <input type="radio" name="radio_group_2" id="radio_id_b" value="radio_b" /> <input type="radio" name="radio_group_2" id="radio_id_c" value="radio_c" checked="checked" /><br/> <input type="checkbox" name="check_a" id="check_id_a" value="check_1" checked="checked" /> <input type="checkbox" name="check_b" id="check_id_b" value="check_2" /> <input type="checkbox" name="check_c" id="check_id_c" value="check_3" checked="checked" /><br/> <select name="select_name_from" id="select_id_from"> <option value="option_1">1</value> <option value="option_2" selected="selected">2</value> <option value="option_3">3</value> </select><br/> <select name="select_name_to" id="select_id_to"> <option value="option_4">4</value> <option value="option_5">5</value> <option value="option_6">6</value> </select><br/> <textarea name="textarea_name" id="textarea_id" cols="20" rows="5">Textarea</textarea><br/> <input type="submit" name="submit_name" id="submit_id" value="submit" /> <input type="reset" name="reset_name" id="reset_id" value="reset" /> </form>
3. Задание
-
Создайте новую HTML-страницу.
-
Создайте документ с несколькими формами (см. пример ).
-
Сохраните страницу в личной папке в файл forma.html
4. Контрольные вопросы
4.1 Как задаются списки переключателей?
4.2 С помощью каких тегов создайтся форма с использованием упорядоченных списков для нумерации полей ввода?
4.3 Для чего необходим тег <FORM>?
5 Содержание отчета
5.1 Наименование работы