Создание собственной WEB страницы по выбранной теме
Тематический план дисциплины WEB дизайн
| Наименование разделов и тем | Содержание учебного материала, лабораторные работы и практические занятия, самостоятельная работа обучающихся | Объем часов | Уровень освоения | |||
| Раздел 1. WEB-дизайн | ||||||
| Тема 1.1 Структура HTML-документа | Содержание: | |||||
| 1. | ||||||
| 2. | тэг - <HTML> | |||||
| 3. | Раздел НЕAD(Заголовок документа)тэг <НЕAD> | |||||
| 4. | Раздел TITLE(Название документа) | |||||
| 5. | Тело документа- тэг <BODY> | |||||
| 6. | Атрибуты элемента BODY: ALINK, BACKGRQUND, BGCOLOR | |||||
| 7. | Определение цветовых атрибутов элемента BODY | |||||
| Фоновые изображения. Установка полей. | ||||||
| 8. | Тэги заголовка, настраиваемые автором документа. <META | |||||
| 9. | новая технология clientpull | |||||
| атрибутыэлемента META HТТР-EQUIV NАМЕ URL СONTENT | ||||||
| Свойства Keywords и Description | ||||||
| элемент LINK | ||||||
| Тема 1.2 Создание простейшего HTML документа(лаб) | Содержание: | |||||
| 1. | Использование любых текстовых редакторов для создания HTML. | |||||
| 2. | Знакомство с редактором HTML документов HotDog | |||||
| 3. | Составление простейшего HTML документа | |||||
| 4. | Особенности отображения HTML документа в различных браузерах. | |||||
| Контрольная работа: | ||||||
| 1. | Основные теги структуры документа: <HTML> <НЕAD> <BODY> | |||||
| 2. | Раздел TITLE | |||||
| 2. | Атрибуты элемента BODY | |||||
| Тема 1.3 Основные тэги управления стилем текста | Содержание: | |||||
| 1. | Жирный шрифт (bold) <b>текст</b> | |||||
| <strong> текст</strong> | ||||||
| Курсив (italic) <I>текст</I> <em> текст т</em> | ||||||
| Подчеркнутый шрифт (underline) <u>текст</u> | ||||||
| Надстрочный индекс (Superscript) <sup> текст </sup> | ||||||
| Подстрочный индекс (Subscript) <s u b> текст T</su b> | ||||||
| Имитация стиля печатной машинки (Teletype) <tt>TЕKCI</tt> | ||||||
| Заголовки. <h1>Самый большой заголовок</h1> | ||||||
| Блок с отступом <BLOCKQUOTE> текст</BLOCKQUOTE> | ||||||
| Задание базового шрифта, тэг<BASEFONT>, атрибуты элемента <BASEFONT> | ||||||
| Задание шрифтов, управление размером, цветом шрифта с помощью тэга <FONT> | ||||||
| Комментарии в HTML коде | ||||||
| Горизонтальная разделительная линия | ||||||
| Переход на следующую строку тэг <br> | ||||||
| Управление выравниванием текста, тэг <DIV>текст</DIV> | ||||||
| Тема 1.4 Использование тэгов физического форматирования текста(лаб) | Содержание: | |||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| 4. | ||||||
| 5. | ||||||
| 6. | ||||||
| 7. | ||||||
| 8. | ||||||
| 9. | ||||||
| 10. | ||||||
| Тема 1.5 Ссылка на другие документы и файлы | Содержание: | |||||
| 1. | Понятие гипертекстовый документ | |||||
| 2. | Организация ссылок. | |||||
| 3. | 2 части ссылки: указатель ссылки, адресная часть ссылки(URL адрес) | |||||
| 4. | 2 вида указателей: текстовые, графические | |||||
| 5. | Правила записи ссылок, тэг<A> | |||||
| 6. | Параметры тэга <A> | |||||
| Внутренние ссылки | ||||||
| Ссылка на документы различных типов | ||||||
| Ссылка на другие ресурсы интернета | ||||||
| Прочие тэги | ||||||
| Контрольная работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| Тема 1.6 Формирование списков | Содержание: | |||||
| 1. | Назначение списков. Виды списков. | |||||
| 2. | Маркированный список, тэги <UL>, <LI> | |||||
| 3. | Нумерованный список: тэги <OL>, <LI> | |||||
| 4. | Список определений: тэги <DL>, <DT>, <DD> | |||||
| 5. | Списки типа <dir> и <menu> | |||||
| 6. | Вложенные списки | |||||
| 7. | Графические маркеры списка | |||||
| Раздел 2. | ||||||
| Тема 2.1 Формирование списков(лаб) | Содержание: | |||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| 4. | ||||||
| 5. | ||||||
| Практическая работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| 4. | ||||||
| 5. | ||||||
| 6. | ||||||
| 7. | ||||||
| 8. | ||||||
| Тема 2.2 Графика | Содержание: | |||||
| 1. | Назначение графики. | |||||
| Практическая работа: | ||||||
| 1. | Особенности использования графики(достоинства и недостатки) | |||||
| 2. | Способы хранения изображений | |||||
| 3. | Фоновые изображения | |||||
| 4. | Встраиваемые изображения. | |||||
| 5. | Выравнивание изображений. | |||||
| 6. | Задание размеров выводимого изображения | |||||
| 7. | Отделение изображения от текста. | |||||
| 8. | Рамки вокруг изображения | |||||
| 9. | Альтернативный текст | |||||
| 10. | Использования изображения в качестве ссылки | |||||
| Использование миниатюрных версий изображений. | ||||||
| Формат GIF | ||||||
| Формат JPG | ||||||
| Некоторые проблемы использования цвета | ||||||
| Тема 2.3 Графика(лаб) | Содержине: | |||||
| 1. | Изменение фонового изображения | |||||
| 2. | Использование встраиваемых изображений | |||||
| Практическая работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| 4. | ||||||
| 5. | ||||||
| 6. | ||||||
| 7. | ||||||
| 8. | ||||||
| 9. | ||||||
| Контрольная работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| Тема 3.1 Таблицы | Содержание: | |||||
| 1. | Назначение таблиц | |||||
| 2. | Тэги <table>, <tr>, <td>, <th> | |||||
| 3. | Представление таблиц на странице | |||||
| 4. | Параметры тега <table>: border, cellspasing, cellpadding, width, height, align | |||||
| 5. | Форматирование данных внутри таблицы | |||||
| 6. | Вложенные таблицы | |||||
| 7. | Отображение пустых ячеек в таблице | |||||
| 8. | Выравнивание данных в столбцах ячеек | |||||
| 9. | Задание цвета рамок таблицы | |||||
| 10. | Тэги структурирования таблицы | |||||
| 11. | Задание числа столбцов таблицы | |||||
| 12. | Вертикальное выравнивание таблиц | |||||
| 13. | Альтернатива табличному представлению | |||||
| Самостоятельная работа: | ||||||
| 1. | ||||||
| Тема 3.2 Таблицы(лаб) | Содержание: | |||||
| 1. | ||||||
| 2. | ||||||
| Практическая работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| Тема 3.3 Фреймы | Содержание: | |||||
| 1. | Назначение фреймов | |||||
| 2. | Сферы применения фреймов | |||||
| 3. | Правила описания фреймов | |||||
| 4. | Тэги <frameset>, <frame>, <noframes> | |||||
| 5. | Параметры тэга <frameset> | |||||
| 6. | Параметры тэга <frame> | |||||
| 7. | Особенности описания фреймовых структур | |||||
| 8. | Особенности навигации при использования фреймов | |||||
| 9. | Взаимодействие между фреймами | |||||
| 10. | Плавающие фреймы | |||||
| 11. | Редактор фреймов FRAMEGANG | |||||
| 12. | Различие между фреймами и окнами браузера | |||||
| 13. | Примеры сложного взаимодействия между фреймами | |||||
| Практическая работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| Самостоятельная работа | ||||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| Тема 3.4 Фреймы(лаб) | Содержание: | |||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| Практическая работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| 4. | ||||||
| Самостоятельная работа | ||||||
| 1. | ||||||
| Тема 3.5 Карты-изображения | Содержание: | |||||
| 1. | Назначение карты-изображения | |||||
| 2. | Особенности использования карты-изображения | |||||
| 3. | Графическое представление карты-изображения | |||||
| 4. | Описание конфигурации карты-изображения | |||||
| 5. | Варианты реализации карты-изображения | |||||
| 6. | Преимущества и недостатки | |||||
| 7. | Серверный вариант карты-изображения .Формат CERN, NCSA | |||||
| 8. | Клиентский вариант карты-изображения | |||||
| 9. | Тэги <map>, <area>, | |||||
| 10. | Параметры shape, coords, href,no href, target, alt | |||||
| 11. | Комбинация Клиентского и Серверного вариантов | |||||
| 12. | Особенности использования карты-изображения | |||||
| 13. | Альтернативные средства новигации | |||||
| 14. | Средства создания карты-изображения | |||||
| 15. | Программа MAPEDIT | |||||
| Практическая работа: | ||||||
| 1. | ||||||
| Тема 3.6 Карты-изображения(лаб) | Содержание: | |||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| 4. | ||||||
| 5. | ||||||
| 6. | ||||||
| 7. | ||||||
| 8. | ||||||
| 9. | ||||||
| 10. | ||||||
| 11. | ||||||
| Практическая работа: | ||||||
| 1. | ||||||
| Тема 3.7 Формы | Содержание: | |||||
| 1. | Назначение форм. Тэги <form | |||||
| Параметры Тэга <form action | ||||||
| <form action="http: //www.mysite.com/cgi-bin/test.exe"> | ||||||
| 2. | Элементы форм. | |||||
| 3. | Тэг input. Параметры value, type, checked, name, id, | |||||
| 4. | Тэг <select,тэг <option | |||||
| 5. | Параметры Тэга <select: value | |||||
| 6. | Значение параметров value, type, checked, name, id для разных элементов | |||||
| Самостоятельная работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| 4. | ||||||
| Тема 3.8 Звук | Содержание: | |||||
| 1. | Средства воспроизведения звука | |||||
| 2. | Как компьютер работает со звуком | |||||
| 3. | Встраивание звуковых файлов в WEB страницу | |||||
| 4. | Тэг <embed> | |||||
| 5. | Параметры тэга <embed> | |||||
| 6. | Форматы звуковых файлов | |||||
| 7. | Использование ссылки для работы со звуком <A href=*.*> | |||||
| 8. | Различные звуковые модули | |||||
| 9. | Технология RealAudio | |||||
| 10. | Значение параметра CONTROL | |||||
| 11. | Звуковые файлы MP3 | |||||
| 12. | Воспроизведение звуковых файлов MP3 | |||||
| 13. | ||||||
| Практическая работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| Тема 3.9 Звук(лаб) | Содержание: | |||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| Практическая работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| Тема 3.11 Разработка HTML-страниц при помощи текстового редактора WORD | Содержание: | |||||
| 1. | 2 группы редакторов HTML документов | |||||
| 2. | Создание WEB страниц | |||||
| 3. | Создание маркированных и нумерованных списков | |||||
| 4. | Встраивание горизонтальной линии в WEB страницу | |||||
| 5. | Выбор фона создаваемого документа | |||||
| 6. | Изменение цвета и форматирование текста WEB страниц | |||||
| 7. | Работа со стилями на WEB странице | |||||
| 8. | Непосредственное редактирование HTML кода | |||||
| 9. | Таблицы на WEB страницах | |||||
| 10. | Работа с рисунками на WEB страницах | |||||
| 11. | Создание ссылок в документе | |||||
| 12. | Создание форм на WEB страницах | |||||
| 13. | Сохраниение существующего документа Word в формате HTML | |||||
| Практическая работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| Тема 3.12 Разработка HTML-страниц при помощи текстового редактора WORD | Содержание: | |||||
| 1. | ||||||
| Практическая работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| 4. | ||||||
| 5. | ||||||
| Тема 3.13 Создание собственной WEB страницы по выбранной теме | Содержание | |||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| 4. | ||||||
| 5. | ||||||
| Практическая работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| 4. | ||||||
| 5. | ||||||
| Самостоятельная работа: | ||||||
| 1. | ||||||
| 2. | ||||||
| 3. | ||||||
| 4. | ||||||
| 5. | ||||||
| 6. | ||||||
| 7. | ||||||
Темы для работы
Создание собственной WEB страницы по выбранной теме.