Тематический план занятий по Web-Дизайну и оптимизации сайтов
| Вид материала | Тематический план |
- Полный комплекс услуг по рекламе в интернете Добро пожаловать в отдел оптимизации, 113.71kb.
- Конспект лекции «Основы Web-дизайна», 197.14kb.
- План занятий Web взгляд изнутри. Вводная часть в курс. Web-страницы, web-сайты, web, 11.42kb.
- Понятия продвижения и оптимизации сайтов, 86.61kb.
- Учебно-методический комплекс дисциплины технологии создания корпоративных сайтов Специальность, 207.68kb.
- Удк система интеллектуального обхода web-сайтов, 57.1kb.
- Календарный план учебных занятий по дисциплине Компьютерный дизайн оптических наноструктур,, 39.38kb.
- Учебник по раскрутке и оптимизации сайтов Учебник по раскрутке и оптимизации сайтов, 484.79kb.
- Прика з, 37.87kb.
- Операційна система ms windows. Порівняння з іншими, 629.64kb.
Тематический план занятий по Web-Дизайну и оптимизации сайтов
В данном методическом пособии предлагается курс «Основы web-дизайна и оптимизации сайтов» для студентов художественно-графического факультета 5-курса, специальность ИЗО, Дизайн. Курс рассчитан на 28 часов. Программа содержит лекционный и практический материал.
При изучении данного материала предполагается, что студенты уже изучили Corel Draw, PhotoShop и владеют знаниями, умениями и навыками в обращении с другими графическими редакторами, а также программами Microsoft Word, Pad, Internet Explorer.
Предполагается, что студенты смогут изучать практическое создание сайтов начального уровня и начать редактировать и править их самостоятельно. Язык разметки текстовых потоков (HTML) –считается простым, по сравнению с другими языками программирования, но изучение большого количества тегов (tags) требует времени.
Пособие составлено таким образом, чтобы студенты сразу изучали и теорию, и практику. Все приемы, приведенные в методическом пособии для проведения факультативных занятий «Основы web-дизайна и оптимизации сайтов» имеют практическое описание, все описанные функции скомпонованы в инструментах, вкладках программ: HtmlPad и Macromedia Dreamweaver.
Во время проведения занятий студенты обязательно пробуют каждый приведенный пример и сохраняют полученные страницы в ходе объяснения (в любом другом случае пособие бесполезно).
В процессе обучения студенты выполняют практические задания, ведут самостоятельную работу. В конце каждого тематического блока выполняют контрольные задания по изученному материалу.
Содержание учебной программы
| Вид занятий | Всего часов |
| Практическая работа | 28 |
| Индивидуальная работа | 11 |
| Аудиторная работа | 17 |
| Контрольные задания | Тестовое задание |
| Вид итогового контроля | Зачет |
Учебно-тематический план
| № | Содержание. | Аудиторная работа | Инд. под руков. преп. | Самостоятельная работа |
| 1 | Введение. Создание Web-страниц. Изуче-ние языка HTML. | 2 | 1 | 3 |
| 2 | Некоторые важнейшие теги HTML. Теги форматирования текстового потока. Создание бегущей текстовой строки (только для Internet Explorer). Список цветов символов HTML. | 3 | 2 | 8 |
| 3 | Редактор Web-страниц HTMLPad. Создание таблиц в HTML | 2 | 1 | 3 |
| 4 | Заголовок страницы. Стандартные атрибуты. | 4 | 1 | 5 |
| 5 | Создание фона HTML-документа. | 2 | 1 | 3 |
| 6 | Создание графики. Использование GIF и PNG-изображений. Программа Gif Ani-mator, Adobe PhotoShop. Создание изобра-жений для Web в программе Adobe Photo Shop. | 2 | 1 | 2 |
| 7 | Редактор Macromedia DreamWeaver. | 3 | 3 | 3 |
| 8 | Скрипт. Фреймы. Элементы диалога (кнопки, области для ввода текста). Заключительная часть. | 1 | 1 | 2 |
| | Всего часов | 17 | 11 | 28 |
1. Введение. Создание Web-страниц. Изучение языка HTML
HTML - Hyper Text Markup Language. Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.php, размещенный в World Wide Web (WWW). WWW - Всемирная Паутина, распределенная система доступа к гипертекстовым документам, существующая в Интернете. Web-страница кроме текста может содержать гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их. Web-страница может содержать вставки в виде графики, анимации, видеоклиппов и музыки.
Для просмотра Web-страниц можно использовать, например, MicroSoft Internet Explorer или NetScape Navigator, или Opera (просмотрщик или броузер).
Язык HTML позволяет:
1) Создавать и редактировать Web-страницы, в том числе свою домашнюю Web-страницу, которую можно затем разместить в Интернете;
2) Редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.);
3) Создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка).
 |  |
| •Создание мультимедийных презентаций (слайд-шоу) и персональных web-страниц. | |
Существуют три основных способа создания Web-страниц (или документов HTML):
1) Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью броузера. Этот самый простой способ рекомендуется начинающим.
Технология этого способа создания Web-страницы такова:
В редакторе Блокнот создается файл Web-страницы, который сохраняется с расширением *.htm. Затем этот файл загружается и просматривается программой Internet Explorer. Для вызова редактора Блокнот с целью редактирования файла Web-страницы во время ее просмотра в Internet Explorer, используется пункт меню Вид, Источник или В виде HTML. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer.
2) Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др.
3) Использование редактора Word-97, где создается текст документа, который затем конвертируется в HTML-формат.
 |  |  |
| •Редактор NotePad | •Редактор HtmlPad. | •Microsoft Office. |
Рассмотрим основные понятия языка HTML:
1. Элемент - это конструкция языка HTML, или контейнер, содержащий данные. Web-страница представляет собой набор элементов.
2. Тег - это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-
страницы теги заключаются в угловые скобки, например: . Конечный тег всегда снабжается косой чертой: .
3. Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют переходить от одного документа к другому.
4. Фрейм - область гипертекстового документа со своими полосами прокрутки.
5. Апплет - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
6. Скрипт - программа, включенная в состав Web-страницы для расширения ее возможностей.
7. Загрузка (DownLoad) - копирование документа с Web-сервера на компьютер клиента.
8. UpLoad - копирование документа c компьютера клиента на Web-сервер - используется при создании собственной Web-страницы (т.е. при ее опубликовании).
Рассмотрим общую структуру типичного простейшего документа HTML:
 •Простой пример структуры HTML документа. | - идентификатор всего блока HTML-команд. - идентификатор заголовка документа HTML. |