Муниципальное казённое образовательное учреждение дополнительного образования «Информационный учебно-методический центр» Куйбышевского района
|
РАБОЧАЯ ПРОГРАММА
по курсу «Web - дизайн»
Составитель: ,
методист ИМЦ
Куйбышев, 2012
Пояснительная записка
Предлагаемый курс обучения предназначен как для пользователей ПК, стремящихся освоить возможности современных компьютерных технологий, так и для профессионалов в области создания сайтов.
Название курса: «Web - дизайн»
Длительность: 72 академических часа
Курс рассчитан на пользователей, желающих освоить возможности современных компьютерных технологий, а именно язык гипертекстовой разметки.
Цель курса: овладение профессиональными знаниями и навыками работы в создании сайта.
Задачи курса:
· познакомиться с языком гипертекстовой разметки HTML;
· формировать навыки работы в структуре web-страниц ;
· научить работать с графическими редакторами и языком JavaScript.
Перед тем, как допустить слушателей к работе на ПК проводится инструктаж по ТБ, который позволяет сформировать знания в области оптимального использования компьютерной техники и правилах организации рабочего времени и эргономики рабочего места.
В начале курса слушатели знакомятся с понятием WWW (World Wide Web). Понятие гипертекстовых документов и web-сайтов. Классификации web-сайтов. Различные типы web-сайтов, их назначение и использование. Типы гипертекстовых документов (web-страниц), их различия и сходства. Размещение и хранение web-страницы и сайты. Понятие web-сервера и принципы его работы с пользователем. Обзор программ (браузеров) для просмотра веб-сайтов. Подбор программного обеспечения для работы над веб-сайтом. Язык HTML. Основы, версии и стандарты языка HTML. Структура HTML документа. Основные разделы кода веб-страницы. Понятие тэгов HTML, их типы и оформление. Объявление типа документа. Варианты и стандарты. Открытие блока HTML и начало блока заголовков. Обзор заголовков гипертекстовых документов, их синтаксис и назначение.
Основным разделом изучения данного курса является создание шаблонного кода веб-страницы в простом текстовом редакторе и проверка его работы в браузере. Способы редактирования кода веб-страниц. Создание текстовых заголовков различных уровней и их позиционирование на веб-странице. Обзор тэгов. Принципы вставки спецсимволов и тэги псевдографики. Понятие Unicode, его создание и применение. Тэги вставки изображений на web-страницы и их параметры. Типы шаблонов и способы работы с ними. Понятие и использование нарезки изображений. Примеры нарезки изображений в программе Adobe Photoshop или подобных графических редакторах. Сборка нарезанных изображений в браузере с помощью таблиц. Понятие, области применения и принципы создания анимации. Обзор программного обеспечения для создания анимации. Разработка и изготовление собственных шаблонов веб-страниц и целых сайтов. Автоматизация создания и редактирования веб-сайтов. Работа с визуальными редакторами типа WYSIWYG. Обзор популярных визуальных веб-редакторов: Microsoft FrontPage, Macromedia Dreamweaver и Macromedia HomeSite, их преимущества и недостатки. Создание веб-страницы с помощью шаблонов в визуальных редакторах. Способы доступа к сайту (по имени или IP-адресу). Понятие, принципы построения и работа DNS (BIND). Способы закачки сайта на сервер по протоколам HTTP и FTP.
В рамках данной программы слушатели овладевают навыками работы в создании Web - сайта, а также самостоятельно создавать и редактировать Web - сайты.
С целью отслеживания результативности освоения знаний в области компьютерных технологий в конце изучения всего курса отводится 12 часов на выполнение выпускной работы, с использованием программы, изученной в процессе обучения.
В результате изучение курса слушатели должны:
знать: структуру Web – сайта, язык гипертекстовой разметки ;
уметь: уверенно создавать и публиковать сайт в Internet;
освоить: принципы работы графических редакторов.
По окончании обучения выпускники получают удостоверения установленного образца.
Тематическое планирование по курсу «Web - дизайн»
для слушателей, имеющих опыт работы на ПК
№ п/п | Содержание | Всего | В том числе | Комментарии | |
лекции | практика | ||||
Введение | 1 | 1 | |||
1. | Основные понятия | 8 | |||
1.1. | Понятие WWW (World Wide Web) | 2 | |||
1.2. | Понятие гипертекстовых документов и web-сайтов | 1 | 1 | ||
1.3. | Размещение и хранение web-страницы и сайты. | 1 | 1 | ||
1.4. | Разработка структуры и этапы построения web-сайта. | 1 | 1 | ||
2. | Введение в HTML (язык гипертекстовой разметки). Основы создания сайта. | 12 | |||
2.1. | Язык HTML. Понятие тэгов HTML, их типы и оформление. | 1 | 2 | ||
2.2. | Открытие блока HTML и начало блока заголовков. | 1 | 2 | ||
2.3. | Обзор других тэгов, входящих в блок заголовков. | 1 | 2 | ||
2.4. | Способы редактирования кода веб-страниц. | 1 | 2 | ||
3. | Обзор тэгов HTML для работы с текстом. | 14 | |||
3.1. | Обзор тэгов оформления и выделения текста, а также изменения его размеров и цвета. | 2 | |||
3.2. | Обзор тэгов разрыва строк и выделения блоков, их области применения. | 2 | |||
3.3. | Обзор тэгов создания списков различных типов. | 2 | |||
3.4. | Принципы вставки спецсимволов и тэги псевдографики. Понятие Unicode, его создание и применение. | 2 | |||
3.5. | Понятие, использование и принципы построения таблиц. Обзор тэгов создания таблиц и их параметры. | 2 | |||
3.6. | Понятие гиперссылки. Типы и области применения гиперссылок. Тэги создания гиперссылок и их параметры. | 2 | |||
3.7. | Создание кода и разработка шаблона новостной ленты сайта. | 2 | |||
4. | Создание интерактивных элементов. | 10 | |||
4.1. | Понятие, типы и назначение скриптов. | 1 | 2 | ||
4.2. | Введение в JavaScript, его назначение и области применения. | 1 | 2 | ||
4.3. | Понятие, типы и использование событий на веб-страницах. | 2 | |||
4.4. | Создание всплывающих окон и их использование. | 2 | |||
5. | Работа с графическими объектами и их размещение на веб-сайтах. | 10 | |||
5.1. | Требования и условия размещения графических объектов на веб-страницах. | 2 | |||
5.2. | Принципы адаптации графики. | 2 | |||
5.3. | Понятие и использование нарезки изображений в Adobe Photoshop | 2 | |||
5.4. | Понятие, области применения и принципы создания анимации в программе Adobe ImageReady или подобных редакторах. | 2 | |||
5.5. | Понятие, типы, назначение и использование баннеров. | 2 | |||
6. | Размещение web-сайта на сервере. | 6 | |||
6.1. | Способы доступа к сайту (по имени или IP-адресу). | 2 | |||
6.2. | Понятие, принципы построения и работа DNS (BIND). | 2 | |||
6.3. | Понятие, назначение и использование систем управления контентом (CMS). | 2 | |||
7. | Выпускная работа | 12 | 12 | ||
Итого: | 72 |
Содержание
Введение
Структура курса. Техника безопасности и привила поведения в кабинете ВТ. Правила техники безопасности: общие, перед началом работы на ПК, во время и по окончанию работы. Гигиена. Эргономика. Технические условия эксплуатации. Упражнение по снятию напряжения с глаз.
Основные понятия.Понятие WWW (World Wide Web). Понятие гипертекстовых документов и web-сайтов. Классификации web-сайтов. Различные типы web-сайтов, их назначение и использование. Типы гипертекстовых документов (web-страниц), их различия и сходства. Размещение и хранение web-страницы и сайты. Понятие web-сервера и принципы его работы с пользователем. Обзор программ (браузеров) для просмотра веб-сайтов. Подбор программного обеспечения для работы над веб-сайтом. Необходимый минимум для начала работы. Способы создания веб-сайтов: визуальный, работа с кодом, комбинированный. Разработка структуры и этапы построения web-сайта. Информационное наполнение и взаимосвязи основных разделов и подразделов, а также дополнительных страниц веб-сайта.
Введение в HTML (язык гипертекстовой разметки). Основы создания сайта.Язык HTML. Основы, версии и стандарты языка HTML. Структура HTML документа. Основные разделы кода веб-страницы. Понятие тэгов HTML, их типы и оформление. Объявление типа документа. Варианты и стандарты. Открытие блока HTML и начало блока заголовков. Обзор заголовков гипертекстовых документов, их синтаксис и назначение. Обзор других тэгов, входящих в блок заголовков. Закрытие блока заголовков и открытие основного блока (тэг BODY). Обзор основных параметров тэга BODY и их использование (установка фонового цвета и изображения веб-страницы, задание цветов текста и ссылок и т. д.). Закрывающие тэги блоков HTML. Создание шаблонного кода веб-страницы в простом текстовом редакторе и проверка его работы в браузере. Способы редактирования кода веб-страниц.
Обзор тэгов HTML для работы с текстом.Создание текстовых заголовков различных уровней и их позиционирование на веб-странице. Обзор тэгов оформления и выделения текста, а также изменения его размеров и цвета. Обзор тэгов разрыва строк и выделения блоков, их области применения. Обзор тэгов создания списков различных типов. Принципы вставки спецсимволов и тэги псевдографики. Понятие Unicode, его создание и применение. Тэги вставки изображений на web-страницы и их параметры. Обзор поддерживаемых графических форматов, их различия, ограничения и использование. Понятие, использование и принципы построения таблиц. Обзор тэгов создания таблиц и их параметры. Понятие гиперссылки. Типы и области применения гиперссылок. Тэги создания гиперссылок и их параметры. Создание кода и разработка шаблона новостной ленты сайта.
Создание интерактивных элементов.Понятие, типы и назначение скриптов. Понятие и использование форм на веб-страницах. Принципы взаимодействия формы со скриптами. Обзор тэгов для создания элементов формы (текстовых полей, выпадающих списков и т. д.). Введение в JavaScript, его назначение и области применения. Объектная модель веб-страницы и браузера. Примеры объектов. Понятие, типы и использование событий на веб-страницах. Примеры использования некоторых событий. Создание интерактивных объектов на веб-странице. Создание всплывающих окон и их использование.
Работа с графическими объектами и их размещение на вебсайтах.Требования и условия размещения графических объектов на веб-страницах. Обзор поддерживаемых форматов, их различия и использование. Принципы адаптации графики. Адаптация графических изображений для размещения на веб-страницах. Обзор программного обеспечения для адаптации графики, его различия и возможности. Примеры адаптации изображений в различных форматах с помощью программы Adobe Photoshop и подобных графических редакторов. Понятие и использование нарезки изображений. Примеры нарезки изображений в программе Adobe Photoshop или подобных графических редакторах. Сборка нарезанных изображений в браузере с помощью таблиц. Понятие, области применения и принципы создания анимации. Обзор программного обеспечения для создания анимации. Пример создания и редактирования анимированных изображений в программе Adobe ImageReady или подобных редакторах. Понятие, типы, назначение и использование баннеров. Требования к параметрам баннеров и условия их размещения на сайте. Примеры создания баннеров. Установка баннеров и анимированных изображений на веб-страницы.
Размещение web-сайта на сервере.Способы доступа к сайту (по имени или IP-адресу). Понятие, принципы построения и работа DNS (BIND). Организация InterNIC и её представительства. Выбор и регистрация доменного имени сайта. Понятие и типы хостинга. Выбор хостинга для размещения своего сайта. Требования и ограничения серверов для размещения веб-ресурсов. Способы закачки сайта на сервер по протоколам HTTP и FTP. Обзор программного обеспечения для закачки файлов сайта на сервер и работа с ним. Размещение сайта на сервере. Понятие, назначение и использование систем управления контентом (CMS). Тестирование работы вебсайта на сервере. Возможные ошибки и недочёты.
Выпускная работа: Создание web-сайта.Список литературы
1. Евдокимов Web-сайтов. Эффективная Интернет-коммерция. - Вильямс, 20с., ил.
2. Ксения Гизе, Александра Холмс. Основы Web-дизайна: руководство Cisco. – Вильямс, 2002. - твердый переплет, CD-ROM. – 640 с., ил.
3. Лайза Лопак. Web-дизайн для "чайников". - Диалектика, 20с., ил.
4. Сырых веб-дизайн. Рисуем web-сайт, который продает. - Диалектика, 20с., ил.
5. Тамми Сакс, Гари Мак-Клейн. Дизайн и архитектура современного Web-сайта. Опыт профессионалов. – Вильямс, 20с., ил.
6. Якоб Нильсен, Хоа Лоранжер. Web-дизайн: удобство использования веб-сайтов (юзабилити), - Вильямс, 20с., ил.
